@webstudio-is/react-sdk 0.59.0 → 0.61.0

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/app/index.d.ts

@@ -1,3 +1,2 @@
 export * from "./root";
-export * from "./handle-request.server";
 export * from "./params";

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>>>;

package/lib/types/components/component-meta.d.ts

@@ -1,9 +1,9 @@
 import { z } from "zod";
 import type { FunctionComponent } from "react";
 import type { IconProps } from "@webstudio-is/icons";
-import type { Style } from "@webstudio-is/css-data";
 import type { htmlTags as HtmlTags } from "html-tags";
-type PresetStyle = Partial<Record<HtmlTags, Style>>;
+import { EmbedTemplateStyleDecl } from "../embed-template";
+export type PresetStyle<Tag extends HtmlTags = HtmlTags> = Partial<Record<Tag, EmbedTemplateStyleDecl[]>>;
 declare const WsComponentPropsMeta: z.ZodObject<{
     props: z.ZodRecord<z.ZodString, z.ZodUnion<[z.ZodObject<{
         control: z.ZodLiteral<"number">;
@@ -608,9 +608,21 @@ declare const WsComponentMeta: z.ZodObject<{
         label: string;
         selector: string;
     }>, "many">>;
-    children: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    children: z.ZodOptional<z.ZodLazy<z.ZodArray<z.ZodUnion<[z.ZodType<import("../embed-template").EmbedTemplateInstance, z.ZodTypeDef, import("../embed-template").EmbedTemplateInstance>, z.ZodObject<{
+        type: z.ZodLiteral<"text">;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        type: "text";
+        value: string;
+    }, {
+        type: "text";
+        value: string;
+    }>]>, "many">>>;
 }, "strip", z.ZodTypeAny, {
-    children?: string[] | undefined;
+    children?: ({
+        type: "text";
+        value: string;
+    } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     category?: "media" | "general" | "typography" | "forms" | undefined;
     presetStyle?: any;
     states?: {
@@ -621,7 +633,10 @@ declare const WsComponentMeta: z.ZodObject<{
     label: string;
     Icon: (...args: unknown[]) => unknown;
 }, {
-    children?: string[] | undefined;
+    children?: ({
+        type: "text";
+        value: string;
+    } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     category?: "media" | "general" | "typography" | "forms" | undefined;
     presetStyle?: any;
     states?: {

package/lib/types/components/components-utils.d.ts

@@ -16,7 +16,7 @@ export declare const getComponent: (name: string) => undefined | (typeof compone
 export declare const createGetComponent: (comps: Partial<typeof components>) => (name: string) => import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>, "ref"> & import("react").RefAttributes<HTMLBodyElement>> | 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>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
     tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLHeadingElement>> | import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "target"> & {