New flags support h1 - h6 element preference, explicit width/height declaration flags

.github/workflows/docs-deploy.yml

@@ -7,6 +7,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+      - name: run pre-deploy (build docs and more)
+        run: |
+          chmod +x ./scripts/docs-deploy/pre-deploy.sh
+          ./scripts/docs-deploy/pre-deploy.sh
+        shell: bash
       - name: copy docs to gridaco/grida.co
         uses: DevOpenWRT-Router/github-action-push-to-another-repository@main
         env:

docs/flags/.gitignore

@@ -0,0 +1,7 @@
+## Learn more at scripts/docs-copy/flags-api-docs.js
+# custom
+----ignore.md
+---custom.md
+
+# flags api docs
+--*.md

docs/flags/README.md

@@ -0,0 +1,5 @@
+# Flags Documentation directory.
+
+Go to [Index](./index.md)
+
+## Flags Api references are copied from support-flags package via script - `/scripts/docs-copy/flags-api-docs.sh`

packages/builder-web-core/widget-core/widget-with-style.ts

@@ -27,9 +27,14 @@ export abstract class WidgetWithStyle
     IWHStyleWidget,
     IPositionedWidget,
     IBoxShadowWidget,
-    IEdgeInsetsWidget {
-  width?: number;
-  height?: number;
+    IEdgeInsetsWidget
+{
+  width?: DimensionLength;
+  height?: DimensionLength;
+  minWidth?: DimensionLength;
+  minHeight?: DimensionLength;
+  maxWidth?: DimensionLength;
+  maxHeight?: DimensionLength;
 
   constraint?: {
     left?: DimensionLength;
@@ -90,7 +95,8 @@ export abstract class WidgetWithStyle
  */
 export abstract class MultiChildWidgetWithStyle
   extends WidgetWithStyle
-  implements IWidgetWithStyle, IMultiChildJsxWidget {
+  implements IWidgetWithStyle, IMultiChildJsxWidget
+{
   readonly children: Array<JsxWidget> = [];
 
   constructor({ key }: { key: WidgetKey }) {

packages/builder-web-core/widgets-native/container/index.ts

@@ -4,6 +4,7 @@ import {
   Border,
   BorderRadiusManifest,
   BoxShadowManifest,
+  DimensionLength,
 } from "@reflect-ui/core";
 import { Background } from "@reflect-ui/core/lib/background";
 import * as css from "@web-builder/styles";
@@ -21,16 +22,28 @@ export class Container extends StylableJsxWidget {
     key: WidgetKey;
     x?: number;
     y?: number;
-    width?: number;
-    height?: number;
+
+    width?: DimensionLength;
+    height?: DimensionLength;
+    minWidth?: DimensionLength;
+    maxWidth?: DimensionLength;
+    minHeight?: DimensionLength;
+    maxHeight?: DimensionLength;
+
     background?: Background;
     borderRadius?: BorderRadiusManifest;
     boxShadow?: BoxShadowManifest[];
     border?: Border;
   }) {
     super(p);
+
     this.width = p.width;
     this.height = p.height;
+    this.minWidth = p.minWidth;
+    this.maxWidth = p.maxWidth;
+    this.minHeight = p.minHeight;
+    this.maxHeight = p.maxHeight;
+
     this.x = p.x;
     this.y = p.y;
     this.background = p.background;
@@ -41,8 +54,13 @@ export class Container extends StylableJsxWidget {
 
   styleData(): CSSProperties {
     return {
-      width: css.px(this.width),
-      height: css.px(this.height),
+      width: css.length(this.width),
+      height: css.length(this.height),
+      "min-width": css.length(this.minWidth),
+      "max-width": css.length(this.maxWidth),
+      "min-height": css.length(this.minHeight),
+      "max-height": css.length(this.maxHeight),
+
       "box-shadow": css.boxshadow(...(this.boxShadow ?? [])),
       ...css.background(this.background),
       ...css.border(this.border),
@@ -59,6 +77,7 @@ export class Container extends StylableJsxWidget {
 
 export abstract class SelfClosingContainer
   extends Container
-  implements Omit<Container, "children"> {
+  implements Omit<Container, "children">
+{
   readonly children?: undefined;
 }

packages/builder-web-core/widgets-native/flex/index.ts

@@ -45,16 +45,24 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
 
   borderRadius?: BorderRadiusManifest;
   border?: Border;
+
+  minWidth?: DimensionLength;
+  maxWidth?: DimensionLength;
   minHeight?: DimensionLength;
+  maxHeight?: DimensionLength;
+
   flexWrap?: FlexWrap;
 
   constructor(
     p: IFlexManifest<StylableJsxWidget> & {
       // direction: "row" | "column";
       key: WidgetKey;
-      width?: number;
-      height?: number;
+      width?: DimensionLength;
+      height?: DimensionLength;
+      minWidth?: DimensionLength;
+      maxWidth?: DimensionLength;
       minHeight?: DimensionLength;
+      maxHeight?: DimensionLength;
       mainAxisAlignment?: MainAxisAlignment;
       mainAxisSize?: MainAxisSize;
       crossAxisAlignment?: CrossAxisAlignment;
@@ -74,6 +82,11 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
     this.width = p.width;
     this.height = p.height;
 
+    this.minWidth = p.minWidth;
+    this.maxWidth = p.maxWidth;
+    this.minHeight = p.minHeight;
+    this.maxHeight = p.maxHeight;
+
     // flex related
     this.direction = p.direction;
     this.itemSpacing = p.itemSpacing;
@@ -94,7 +107,6 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
 
     // css only
     this.overflow = p.overflow;
-    this.minHeight = p.minHeight;
     this.flexWrap = p.flexWrap;
   }
 
@@ -119,7 +131,12 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
       ...css.border(this.border),
       ...css.borderRadius(this.borderRadius),
       ...flexsizing({ ...this }),
-      "min-height": css.minHeight(this.minHeight),
+
+      "min-width": css.length(this.minWidth),
+      "max-width": css.length(this.maxWidth),
+      "min-height": css.length(this.minHeight),
+      "max-height": css.length(this.maxHeight),
+
       ...css.background(this.background),
       "box-sizing": (this.padding && "border-box") || undefined,
       ...css.padding(this.padding),
@@ -146,8 +163,8 @@ function flexsizing({
 }: {
   direction: Axis;
   mainAxisSize?: MainAxisSize;
-  width?: number;
-  height?: number;
+  width?: DimensionLength;
+  height?: DimensionLength;
   flex?: number;
 }): CSSProperties {
   switch (mainAxisSize) {
@@ -163,8 +180,8 @@ function flexsizing({
         case Axis.vertical:
           return {
             flex: "none",
-            width: width && css.px(width),
-            height: height && css.px(height),
+            width: width && css.length(width),
+            height: height && css.length(height),
           };
       }
     }

packages/builder-web-core/widgets-native/html-svg/index.ts

@@ -1,7 +1,7 @@
 import { StylableJsxWidget } from "@web-builder/core/widget-tree/widget";
 import { CSSProperties } from "@coli.codes/css";
-import { JSXElementConfig, StylableJSXElementConfig, WidgetKey } from "../..";
-import { px, color } from "@web-builder/styles";
+import { StylableJSXElementConfig, WidgetKey } from "../..";
+import * as css from "@web-builder/styles";
 import {
   JSX,
   JSXAttribute,
@@ -10,7 +10,6 @@ import {
   JSXIdentifier,
   JSXOpeningElement,
   JSXSelfClosingElement,
-  Snippet,
   StringLiteral,
 } from "coli";
 import { Color, GradientType } from "@reflect-ui/core";
@@ -110,7 +109,7 @@ export class SvgElement extends StylableJsxWidget {
     } else {
       switch (this.fill.type) {
         case "solid-color": {
-          return [path_with_fill(color(this.fill as Color))];
+          return [path_with_fill(css.color(this.fill as Color))];
         }
         case "graphics": {
           console.error("graphics fill for svg not supported.");
@@ -127,7 +126,7 @@ export class SvgElement extends StylableJsxWidget {
                     new JSXAttribute("offset", new StringLiteral(`${stop}%`)),
                     new JSXAttribute(
                       "style",
-                      new StringLiteral(`stop-color: ${color(c)}`)
+                      new StringLiteral(`stop-color: ${css.color(c)}`)
                     ),
                   ],
                 });
@@ -194,9 +193,9 @@ export class SvgElement extends StylableJsxWidget {
       };
     }
     return {
-      width: px(this.width),
-      height: px(this.height),
-      color: color(this.color),
+      width: css.length(this.width),
+      height: css.length(this.height),
+      color: css.color(this.color),
     };
   }
 

packages/builder-web-core/widgets-native/html-text-span/index.ts → packages/builder-web-core/widgets-native/html-text-element/index.ts

@@ -1,17 +1,18 @@
-import { JSXElementConfig, StylableJSXElementConfig, WidgetKey } from "../..";
-import {
-  TextDataWidget,
-  TextChildWidget,
-  StylableJsxWidget,
-} from "@web-builder/core";
+import { StylableJSXElementConfig, WidgetKey } from "../..";
+import { TextDataWidget, TextChildWidget } from "@web-builder/core";
 import * as core from "@reflect-ui/core";
-import { TextOverflow } from "@reflect-ui/core";
+import { TextOverflow, WebTextElement } from "@reflect-ui/core";
 import { CSSProperties } from "@coli.codes/css";
 import { JSX } from "coli";
 import { RGBA } from "@reflect-ui/core";
 import * as css from "@web-builder/styles";
 import { Dynamic } from "@reflect-ui/core/lib/_utility-types";
 
+/**
+ * Html Text Representative.
+ *
+ * You can select wich element to render with `elementPreference`. - choose between h1 ~ h6, p, span, etc.
+ */
 export class Text extends TextChildWidget {
   _type: "Text";
 
@@ -23,6 +24,9 @@ export class Text extends TextChildWidget {
   width?: number;
   height?: number;
 
+  // experimental
+  elementPreference?: WebTextElement;
+
   constructor(p: {
     key: WidgetKey;
     data: string;
@@ -31,6 +35,7 @@ export class Text extends TextChildWidget {
     textAlign: core.TextAlign;
     width?: number;
     height?: number;
+    elementPreference?: WebTextElement;
   }) {
     super(p);
 
@@ -41,6 +46,9 @@ export class Text extends TextChildWidget {
     this.textAlign = p.textAlign;
     this.width = p.width;
     this.height = p.height;
+
+    // experimental
+    this.elementPreference = p.elementPreference;
   }
 
   textData() {
@@ -54,7 +62,7 @@ export class Text extends TextChildWidget {
     let textStyle: any = {
       // text style
       // ------------------------------------------
-      color: css.color((this.textStyle.color as any) as RGBA),
+      color: css.color(this.textStyle.color as any as RGBA),
       "text-overflow": this.overflow,
       "font-size": css.px(this.textStyle.fontSize),
       "font-family": css.fontFamily(this.textStyle.fontFamily),
@@ -78,7 +86,16 @@ export class Text extends TextChildWidget {
   jsxConfig(): StylableJSXElementConfig {
     return <StylableJSXElementConfig>{
       type: "tag-and-attr",
-      tag: JSX.identifier("span"),
+      tag: JSX.identifier(__get_dedicated_element_tag(this.elementPreference)),
     };
   }
 }
+
+const __default_element_tag = "span";
+const __get_dedicated_element_tag = (t?: WebTextElement | undefined) => {
+  if (t) {
+    return t;
+  } else {
+    return __default_element_tag;
+  }
+};

packages/builder-web-core/widgets-native/index.ts

@@ -3,7 +3,7 @@ export * from "./container";
 export * from "./row";
 export * from "./flex";
 export * from "./stack";
-export * from "./html-text-span";
+export * from "./html-text-element";
 export * from "./html-svg";
 export * from "./html-image";
 export * from "./error-widget";