@webstudio-is/react-sdk 0.60.0 → 0.61.0

package/lib/css/normalize.js

@@ -1,12 +1,9 @@
 import { borders } from "./presets";
 const boxSizing = {
-  type: "keyword",
-  value: "border-box"
-};
-const baseStyle = {
-  boxSizing,
-  ...borders
+  property: "boxSizing",
+  value: { type: "keyword", value: "border-box" }
 };
+const baseStyle = [boxSizing, ...borders];
 const div = baseStyle;
 const address = baseStyle;
 const article = baseStyle;
@@ -32,262 +29,246 @@ const ul = baseStyle;
 const ol = baseStyle;
 const p = baseStyle;
 const span = baseStyle;
-const html = {
+const html = [
   /* 1 */
-  lineHeight: {
-    type: "unit",
-    value: 1.15,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 1.15, unit: "number" }
   },
   /* 2 */
-  textSizeAdjust: {
-    type: "unit",
-    value: 100,
-    unit: "%"
+  {
+    property: "textSizeAdjust",
+    value: { type: "unit", value: 100, unit: "%" }
   },
   /* 3 */
-  tabSize: {
-    type: "unit",
-    value: 4,
-    unit: "number"
+  {
+    property: "tabSize",
+    value: { type: "unit", value: 4, unit: "number" }
   },
   boxSizing,
   ...borders
-};
-const body = {
+];
+const body = [
   /* 1 */
-  marginTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   /* 2 */
-  fontFamily: {
-    type: "keyword",
-    value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+  {
+    property: "fontFamily",
+    value: {
+      type: "keyword",
+      value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+    }
   },
   boxSizing,
   ...borders
-};
-const hr = {
+];
+const hr = [
   /* 1 */
-  height: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "height",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   /* 2 */
-  color: { type: "keyword", value: "inherit" },
+  {
+    property: "color",
+    value: { type: "keyword", value: "inherit" }
+  },
   boxSizing,
   ...borders
-};
-const b = {
-  fontWeight: {
-    type: "keyword",
-    value: "bolder"
+];
+const b = [
+  {
+    property: "fontWeight",
+    value: { type: "keyword", value: "700" }
   },
   boxSizing,
   ...borders
-};
+];
 const strong = b;
-const code = {
+const code = [
   /* 1 */
-  fontFamily: {
-    type: "keyword",
-    value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+  {
+    property: "fontFamily",
+    value: {
+      type: "keyword",
+      value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+    }
   },
   /* 2 */
-  fontSize: {
-    type: "unit",
-    value: 1,
-    unit: "em"
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 1, unit: "em" }
   },
   boxSizing,
   ...borders
-};
+];
 const kbd = code;
 const samp = code;
 const pre = code;
-const small = {
-  fontSize: {
-    type: "unit",
-    value: 80,
-    unit: "%"
+const small = [
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 80, unit: "%" }
   },
   boxSizing,
   ...borders
-};
-const subSupBase = {
-  fontSize: {
-    type: "unit",
-    value: 75,
-    unit: "%"
+];
+const subSupBase = [
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 75, unit: "%" }
   },
-  lineHeight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 0, unit: "number" }
   },
-  position: {
-    type: "keyword",
-    value: "relative"
+  {
+    property: "position",
+    value: { type: "keyword", value: "relative" }
   },
-  verticalAlign: {
-    type: "keyword",
-    value: "baseline"
+  {
+    property: "verticalAlign",
+    value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
   ...borders
-};
-const sub = {
+];
+const sub = [
   ...subSupBase,
-  bottom: {
-    type: "unit",
-    value: -0.25,
-    unit: "em"
+  {
+    property: "bottom",
+    value: { type: "unit", value: -0.25, unit: "em" }
   }
-};
-const sup = {
+];
+const sup = [
   ...subSupBase,
-  top: {
-    type: "unit",
-    value: -0.5,
-    unit: "em"
+  {
+    property: "top",
+    value: { type: "unit", value: -0.5, unit: "em" }
   }
-};
-const table = {
+];
+const table = [
   /* 1 */
-  textIndent: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "textIndent",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   ...borders,
   /* 2 */
-  borderTopColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderTopColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderRightColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderRightColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderBottomColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderBottomColor",
+    value: { type: "keyword", value: "inherit" }
   },
-  borderLeftColor: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "borderLeftColor",
+    value: { type: "keyword", value: "inherit" }
   },
   boxSizing
-};
-const buttonBase = {
+];
+const buttonBase = [
   /* 1 */
-  fontFamily: {
-    type: "keyword",
-    value: "inherit"
+  {
+    property: "fontFamily",
+    value: { type: "keyword", value: "inherit" }
   },
-  fontSize: {
-    type: "unit",
-    value: 100,
-    unit: "%"
+  {
+    property: "fontSize",
+    value: { type: "unit", value: 100, unit: "%" }
   },
-  lineHeight: {
-    type: "unit",
-    value: 1.15,
-    unit: "number"
+  {
+    property: "lineHeight",
+    value: { type: "unit", value: 1.15, unit: "number" }
   },
   /* 2 */
-  marginTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  marginLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+  {
+    property: "marginTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "marginLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
   ...borders
-};
+];
 const input = buttonBase;
 const optgroup = buttonBase;
 const textarea = buttonBase;
-const button = {
+const button = [
   ...buttonBase,
-  textTransform: {
-    type: "keyword",
-    value: "none"
+  {
+    property: "textTransform",
+    value: { type: "keyword", value: "none" }
   }
-};
+];
 const select = button;
-const legend = {
-  paddingTop: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingRight: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingBottom: {
-    type: "unit",
-    value: 0,
-    unit: "number"
-  },
-  paddingLeft: {
-    type: "unit",
-    value: 0,
-    unit: "number"
+const legend = [
+  {
+    property: "paddingTop",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingRight",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingBottom",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "paddingLeft",
+    value: { type: "unit", value: 0, unit: "number" }
   },
   boxSizing,
   ...borders
-};
-const progress = {
-  verticalAlign: {
-    type: "keyword",
-    value: "baseline"
+];
+const progress = [
+  {
+    property: "verticalAlign",
+    value: { type: "keyword", value: "baseline" }
   },
   boxSizing,
   ...borders
-};
-const summary = {
-  display: {
-    type: "keyword",
-    value: "list-item"
+];
+const summary = [
+  {
+    property: "display",
+    value: { type: "keyword", value: "list-item" }
   },
   boxSizing,
   ...borders
-};
+];
 export {
   a,
   address,

package/lib/css/presets.js

@@ -1,41 +1,21 @@
-const borders = {
-  borderTopColor: {
-    type: "keyword",
-    value: "currentColor"
+const borders = [
+  {
+    property: "borderTopWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderRightColor: {
-    type: "keyword",
-    value: "currentColor"
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderBottomColor: {
-    type: "keyword",
-    value: "currentColor"
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   },
-  borderLeftColor: {
-    type: "keyword",
-    value: "currentColor"
-  },
-  borderTopWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderRightWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderBottomWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
-  },
-  borderLeftWidth: {
-    type: "unit",
-    value: 1,
-    unit: "px"
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", value: 1, unit: "px" }
   }
-};
+];
 export {
   borders
 };

package/lib/css/style-rules.js

@@ -1,3 +1,4 @@
+import { componentAttribute } from "../tree";
 const getStyleRules = (styles, styleSourceSelections) => {
   if (styles === void 0 || styleSourceSelections === void 0) {
     return [];
@@ -44,6 +45,22 @@ const getStyleRules = (styles, styleSourceSelections) => {
   }
   return styleRules;
 };
+const getPresetStyleRules = (component, presetStyle) => {
+  const presetStyleRules = /* @__PURE__ */ new Map();
+  for (const [tag, styles] of Object.entries(presetStyle)) {
+    for (const styleDecl of styles) {
+      const selector = `${tag}:where([${componentAttribute}=${component}])${styleDecl.state ?? ""}`;
+      let rule = presetStyleRules.get(selector);
+      if (rule === void 0) {
+        rule = {};
+        presetStyleRules.set(selector, rule);
+      }
+      rule[styleDecl.property] = styleDecl.value;
+    }
+  }
+  return presetStyleRules;
+};
 export {
+  getPresetStyleRules,
   getStyleRules
 };

package/lib/embed-template.js

@@ -0,0 +1,140 @@
+import { z } from "zod";
+import { nanoid } from "nanoid";
+import { StyleValue } from "@webstudio-is/css-data";
+const EmbedTemplateText = z.object({
+  type: z.literal("text"),
+  value: z.string()
+});
+const EmbedTemplateProp = z.union([
+  z.object({
+    type: z.literal("number"),
+    name: z.string(),
+    value: z.number()
+  }),
+  z.object({
+    type: z.literal("string"),
+    name: z.string(),
+    value: z.string()
+  }),
+  z.object({
+    type: z.literal("boolean"),
+    name: z.string(),
+    value: z.boolean()
+  }),
+  z.object({
+    type: z.literal("string[]"),
+    name: z.string(),
+    value: z.array(z.string())
+  })
+]);
+const EmbedTemplateStyleDecl = z.object({
+  state: z.optional(z.string()),
+  property: z.string(),
+  value: StyleValue
+});
+const EmbedTemplateInstance = z.lazy(
+  () => z.object({
+    type: z.literal("instance"),
+    component: z.string(),
+    props: z.optional(z.array(EmbedTemplateProp)),
+    styles: z.optional(z.array(EmbedTemplateStyleDecl)),
+    children: WsEmbedTemplate
+  })
+);
+const WsEmbedTemplate = z.lazy(
+  () => z.array(z.union([EmbedTemplateInstance, EmbedTemplateText]))
+);
+const createInstancesFromTemplate = (treeTemplate, instances, props, styleSourceSelections, styleSources, styles, defaultBreakpointId) => {
+  const parentChildren = [];
+  for (const item of treeTemplate) {
+    if (item.type === "instance") {
+      const instanceId = nanoid();
+      if (item.props) {
+        for (const prop of item.props) {
+          props.push({
+            id: nanoid(),
+            instanceId,
+            ...prop
+          });
+        }
+      }
+      if (item.styles) {
+        const styleSourceId = nanoid();
+        styleSources.push({
+          type: "local",
+          id: styleSourceId
+        });
+        styleSourceSelections.push({
+          instanceId,
+          values: [styleSourceId]
+        });
+        for (const styleDecl of item.styles) {
+          styles.push({
+            breakpointId: defaultBreakpointId,
+            styleSourceId,
+            state: styleDecl.state,
+            property: styleDecl.property,
+            value: styleDecl.value
+          });
+        }
+      }
+      const instance = {
+        type: "instance",
+        id: instanceId,
+        component: item.component,
+        children: []
+      };
+      instances.push(instance);
+      instance.children = createInstancesFromTemplate(
+        item.children,
+        instances,
+        props,
+        styleSourceSelections,
+        styleSources,
+        styles,
+        defaultBreakpointId
+      );
+      parentChildren.push({
+        type: "id",
+        value: instanceId
+      });
+    }
+    if (item.type === "text") {
+      parentChildren.push({
+        type: "text",
+        value: item.value
+      });
+    }
+  }
+  return parentChildren;
+};
+const generateDataFromEmbedTemplate = (treeTemplate, defaultBreakpointId) => {
+  const instances = [];
+  const props = [];
+  const styleSourceSelections = [];
+  const styleSources = [];
+  const styles = [];
+  const children = createInstancesFromTemplate(
+    treeTemplate,
+    instances,
+    props,
+    styleSourceSelections,
+    styleSources,
+    styles,
+    defaultBreakpointId
+  );
+  return {
+    children,
+    instances,
+    props,
+    styleSourceSelections,
+    styleSources,
+    styles
+  };
+};
+export {
+  EmbedTemplateInstance,
+  EmbedTemplateStyleDecl,
+  WsEmbedTemplate,
+  generateDataFromEmbedTemplate
+};

package/lib/index.js

@@ -13,6 +13,7 @@ import {
 import {
   componentCategories
 } from "./components/component-meta";
+export * from "./embed-template";
 export {
   componentCategories,
   customComponentMetas,

package/lib/types/components/box.stories.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import type { ComponentStory, ComponentMeta } from "@storybook/react";
 declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    tag?: "div" | "address" | "article" | "aside" | "figure" | "footer" | "header" | "main" | "nav" | "section" | undefined;
+    tag?: "address" | "article" | "aside" | "div" | "figure" | "footer" | "header" | "main" | "nav" | "section" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;
 export default _default;
 export declare const Box: ComponentStory<import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    tag?: "div" | "address" | "article" | "aside" | "figure" | "footer" | "header" | "main" | "nav" | "section" | undefined;
+    tag?: "address" | "article" | "aside" | "div" | "figure" | "footer" | "header" | "main" | "nav" | "section" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;