@webstudio-is/react-sdk 0.60.0 → 0.61.0

package/lib/components/blockquote.ws.js

@@ -1,64 +1,52 @@
 import { BlockquoteIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/blockquote.props";
 const presetStyle = {
-  blockquote: {
-    marginTop: {
-      type: "unit",
-      value: 0,
-      unit: "number"
+  blockquote: [
+    {
+      property: "marginTop",
+      value: { type: "unit", value: 0, unit: "number" }
     },
-    marginRight: {
-      type: "unit",
-      value: 0,
-      unit: "number"
+    {
+      property: "marginRight",
+      value: { type: "unit", value: 0, unit: "number" }
     },
-    marginBottom: {
-      type: "unit",
-      value: 10,
-      unit: "px"
+    {
+      property: "marginBottom",
+      value: { type: "unit", value: 10, unit: "px" }
     },
-    marginLeft: {
-      type: "unit",
-      value: 0,
-      unit: "number"
+    {
+      property: "marginLeft",
+      value: { type: "unit", value: 0, unit: "number" }
     },
-    paddingTop: {
-      type: "unit",
-      value: 10,
-      unit: "px"
+    {
+      property: "paddingTop",
+      value: { type: "unit", value: 10, unit: "px" }
     },
-    paddingBottom: {
-      type: "unit",
-      value: 10,
-      unit: "px"
+    {
+      property: "paddingBottom",
+      value: { type: "unit", value: 10, unit: "px" }
     },
-    paddingLeft: {
-      type: "unit",
-      value: 20,
-      unit: "px"
+    {
+      property: "paddingLeft",
+      value: { type: "unit", value: 20, unit: "px" }
     },
-    paddingRight: {
-      type: "unit",
-      value: 20,
-      unit: "px"
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 20, unit: "px" }
     },
-    borderLeftWidth: {
-      type: "unit",
-      value: 5,
-      unit: "px"
+    {
+      property: "borderLeftWidth",
+      value: { type: "unit", value: 5, unit: "px" }
     },
-    borderLeftStyle: {
-      type: "keyword",
-      value: "solid"
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "solid" }
     },
-    borderLeftColor: {
-      type: "rgb",
-      r: 226,
-      g: 226,
-      b: 226,
-      alpha: 1
+    {
+      property: "borderLeftColor",
+      value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",
@@ -66,7 +54,7 @@ const meta = {
   label: "Blockquote",
   Icon: BlockquoteIcon,
   presetStyle,
-  children: ["Blockquote you can edit"]
+  children: [{ type: "text", value: "Blockquote you can edit" }]
 };
 const propsMeta = {
   props

package/lib/components/body.ws.js

@@ -2,28 +2,31 @@ import { BodyIcon } from "@webstudio-is/icons";
 import { body } from "../css/normalize";
 import { props } from "./__generated__/body.props";
 const presetStyle = {
-  body: {
+  body: [
     ...body,
-    minHeight: {
-      type: "unit",
-      unit: "%",
-      value: 100
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "%", value: 100 }
     },
-    fontFamily: {
-      type: "keyword",
-      value: "Arial"
+    {
+      property: "fontFamily",
+      value: { type: "keyword", value: "Arial" }
     },
-    fontSize: {
-      type: "unit",
-      unit: "px",
-      value: 14
+    {
+      property: "fontSize",
+      value: { type: "unit", unit: "px", value: 14 }
     },
-    lineHeight: {
-      type: "unit",
-      unit: "number",
-      value: 1.5
+    {
+      property: "lineHeight",
+      value: { type: "unit", unit: "number", value: 1.5 }
+    },
+    // temporary set root color
+    // until builder start to fallback "inherit" to black
+    {
+      property: "color",
+      value: { type: "keyword", value: "black" }
     }
-  }
+  ]
 };
 const meta = {
   type: "container",

package/lib/components/button.ws.js

@@ -1,6 +1,6 @@
 import { ButtonElementIcon } from "@webstudio-is/icons";
-import { props } from "./__generated__/button.props";
 import { button } from "../css/normalize";
+import { props } from "./__generated__/button.props";
 const presetStyle = {
   button
 };

package/lib/components/code.ws.js

@@ -2,38 +2,30 @@ import { CodeIcon } from "@webstudio-is/icons";
 import { displayVarNamespace } from "./code";
 import { props } from "./__generated__/code.props";
 import { code } from "../css/normalize";
-const display = {
-  type: "var",
-  value: displayVarNamespace,
-  fallbacks: [
-    {
-      type: "keyword",
-      value: "inline-block"
-    }
-  ]
-};
 const presetStyle = {
-  code: {
+  code: [
     ...code,
-    display,
-    paddingLeft: {
-      type: "unit",
-      value: 0.2,
-      unit: "em"
+    {
+      property: "display",
+      value: {
+        type: "var",
+        value: displayVarNamespace,
+        fallbacks: [{ type: "keyword", value: "inline-block" }]
+      }
     },
-    paddingRight: {
-      type: "unit",
-      value: 0.2,
-      unit: "em"
+    {
+      property: "paddingLeft",
+      value: { type: "unit", value: 0.2, unit: "em" }
+    },
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 0.2, unit: "em" }
     },
-    backgroundColor: {
-      type: "rgb",
-      r: 238,
-      g: 238,
-      b: 238,
-      alpha: 1
+    {
+      property: "backgroundColor",
+      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
@@ -41,7 +33,7 @@ const meta = {
   label: "Code",
   Icon: CodeIcon,
   presetStyle,
-  children: ["Code you can edit"]
+  children: [{ type: "text", value: "Code you can edit" }]
 };
 const propsMeta = {
   props,

package/lib/components/component-meta.js

@@ -1,5 +1,6 @@
 import { z } from "zod";
 import { PropMeta } from "@webstudio-is/generate-arg-types";
+import { WsEmbedTemplate } from "../embed-template";
 const WsComponentPropsMeta = z.object({
   props: z.record(PropMeta),
   initialProps: z.array(z.string()).optional()
@@ -32,7 +33,7 @@ const WsComponentMeta = z.object({
   Icon: z.function(),
   presetStyle: z.optional(z.any()),
   states: z.optional(z.array(ComponentState)),
-  children: z.optional(z.array(z.string()))
+  children: z.optional(WsEmbedTemplate)
 });
 export {
   ComponentState,

package/lib/components/form.ws.js

@@ -2,21 +2,28 @@ import { FormIcon } from "@webstudio-is/icons";
 import { form } from "../css/normalize";
 import { props } from "./__generated__/form.props";
 const presetStyle = {
-  form: {
+  form: [
     ...form,
-    minHeight: {
-      type: "unit",
-      unit: "px",
-      value: 20
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "px", value: 20 }
     }
-  }
+  ]
 };
 const meta = {
   category: "forms",
   type: "container",
   label: "Form",
   Icon: FormIcon,
-  presetStyle
+  presetStyle,
+  children: [
+    { type: "instance", component: "Input", children: [] },
+    {
+      type: "instance",
+      component: "Button",
+      children: [{ type: "text", value: "Submit" }]
+    }
+  ]
 };
 const propsMeta = {
   props

package/lib/components/heading.ws.js

@@ -14,7 +14,7 @@ const meta = {
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,
-  children: ["Heading you can edit"],
+  children: [{ type: "text", value: "Heading you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/components/image.ws.js

@@ -2,21 +2,20 @@ import { ImageIcon } from "@webstudio-is/icons";
 import { img } from "../css/normalize";
 import { props } from "./__generated__/image.props";
 const presetStyle = {
-  img: {
+  img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-    maxWidth: {
-      type: "unit",
-      unit: "%",
-      value: 100
+    {
+      property: "maxWidth",
+      value: { type: "unit", unit: "%", value: 100 }
     },
     // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
     // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
-    display: {
-      type: "keyword",
-      value: "block"
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "media",

package/lib/components/italic.ws.js

@@ -2,13 +2,13 @@ import { TextItalicIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/italic.props";
 import { i } from "../css/normalize";
 const presetStyle = {
-  i: {
+  i: [
     ...i,
-    fontStyle: {
-      type: "keyword",
-      value: "italic"
+    {
+      property: "fontStyle",
+      value: { type: "keyword", value: "italic" }
     }
-  }
+  ]
 };
 const meta = {
   type: "rich-text-child",

package/lib/components/link-block.ws.js

@@ -3,13 +3,13 @@ import { props } from "./__generated__/link-block.props";
 import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import { a } from "../css/normalize";
 const presetStyle = {
-  a: {
+  a: [
     ...a,
-    display: {
-      type: "keyword",
-      value: "inline-block"
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",

package/lib/components/link.ws.js

@@ -2,18 +2,17 @@ import { LinkIcon } from "@webstudio-is/icons";
 import { a } from "../css/normalize";
 import { props } from "./__generated__/link.props";
 const presetStyle = {
-  a: {
+  a: [
     ...a,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
     },
-    display: {
-      type: "keyword",
-      value: "inline-block"
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
@@ -22,7 +21,7 @@ const meta = {
   Icon: LinkIcon,
   presetStyle,
   states: [{ selector: "[aria-current=page]", label: "Current page" }],
-  children: ["Link text you can edit"]
+  children: [{ type: "text", value: "Link text you can edit" }]
 };
 const propsMeta = {
   props: {

package/lib/components/list-item.ws.js

@@ -9,7 +9,7 @@ const meta = {
   type: "rich-text",
   label: "List Item",
   Icon: ListItemIcon,
-  children: ["List Item you can edit"],
+  children: [{ type: "text", value: "List Item you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/components/list.ws.js

@@ -2,36 +2,36 @@ import { ListIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/list.props";
 import { ol, ul } from "../css/normalize";
 const presetStyle = {
-  ol: {
+  ol: [
     ...ol,
-    marginTop: {
-      type: "keyword",
-      value: "0"
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px"
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px"
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
     }
-  },
-  ul: {
+  ],
+  ul: [
     ...ul,
-    marginTop: {
-      type: "keyword",
-      value: "0"
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px"
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px"
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",

package/lib/components/paragraph.ws.js

@@ -9,7 +9,7 @@ const meta = {
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
-  children: ["Pragraph you can edit"],
+  children: [{ type: "text", value: "Pragraph you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/components/separator.ws.js

@@ -2,33 +2,33 @@ import { DashIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/separator.props";
 import { hr } from "../css/normalize";
 const presetStyle = {
-  hr: {
+  hr: [
     ...hr,
-    height: {
-      type: "keyword",
-      value: "1px"
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" }
     },
-    backgroundColor: {
-      type: "keyword",
-      value: "gray"
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" }
     },
-    borderTopStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderRightStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderLeftStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderBottomStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",

package/lib/components/text-block.ws.js

@@ -2,14 +2,13 @@ import { TextBlockIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/text-block.props";
 import { div } from "../css/normalize";
 const presetStyle = {
-  div: {
+  div: [
     ...div,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",
@@ -17,7 +16,7 @@ const meta = {
   label: "Text Block",
   Icon: TextBlockIcon,
   presetStyle,
-  children: ["Block of text you can edit"]
+  children: [{ type: "text", value: "Block of text you can edit" }]
 };
 const propsMeta = {
   props

package/lib/css/css.js

@@ -1,9 +1,9 @@
 import { createCssEngine } from "@webstudio-is/css-engine";
 import { getComponentNames } from "../components/components-utils";
 import { getComponentMeta } from "../components";
-import { componentAttribute, idAttribute } from "../tree";
+import { idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
-import { getStyleRules } from "./style-rules";
+import { getPresetStyleRules, getStyleRules } from "./style-rules";
 const createImageValueTransformer = (assets, options) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
     const asset = assets.get(styleValue.value.value);
@@ -40,15 +40,12 @@ const generateCssText = (data, options) => {
   for (const component of getComponentNames()) {
     const meta = getComponentMeta(component);
     const presetStyle = meta?.presetStyle;
-    if (presetStyle !== void 0) {
-      for (const [tag, style] of Object.entries(presetStyle)) {
-        engine.addStyleRule(
-          `${tag}:where([${componentAttribute}=${component}])`,
-          {
-            style
-          }
-        );
-      }
+    if (presetStyle === void 0) {
+      continue;
+    }
+    const rules = getPresetStyleRules(component, presetStyle);
+    for (const [selector, style] of rules) {
+      engine.addStyleRule(selector, { style });
     }
   }
   const styleRules = getStyleRules(styles, styleSourceSelections);