@webstudio-is/react-sdk 0.60.0 → 0.61.0

package/lib/types/embed-template.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/index.d.ts

@@ -7,3 +7,4 @@ export * from "./components/components";
 export * from "./components/components-utils";
 export { customComponents, customComponentMetas, customComponentPropsMetas, } from "./app/custom-components";
 export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, componentCategories, } from "./components/component-meta";
+export * from "./embed-template";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -17,10 +17,10 @@
     "react-dom": "^18.2.0",
     "typescript": "5.0.3",
     "zod": "^3.19.1",
-    "@webstudio-is/jest-config": "^1.0.5",
+    "@webstudio-is/jest-config": "^1.0.6",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
-    "@webstudio-is/tsconfig": "^1.0.5"
+    "@webstudio-is/tsconfig": "^1.0.6"
   },
   "peerDependencies": {
     "@remix-run/react": "^1.15.0",
@@ -33,17 +33,18 @@
     "detect-font": "^0.1.5",
     "html-tags": "^3.2.0",
     "nanoevents": "^7.0.1",
+    "nanoid": "^3.2.0",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.60.0",
-    "@webstudio-is/css-data": "^0.60.0",
-    "@webstudio-is/css-engine": "^0.60.0",
-    "@webstudio-is/css-vars": "^0.60.0",
-    "@webstudio-is/fonts": "^0.60.0",
-    "@webstudio-is/generate-arg-types": "^0.60.0",
-    "@webstudio-is/icons": "^0.60.0",
-    "@webstudio-is/image": "^0.60.0",
-    "@webstudio-is/prisma-client": "^0.60.0",
-    "@webstudio-is/project-build": "^0.60.0"
+    "@webstudio-is/asset-uploader": "^0.61.0",
+    "@webstudio-is/css-data": "^0.61.0",
+    "@webstudio-is/css-engine": "^0.61.0",
+    "@webstudio-is/css-vars": "^0.61.0",
+    "@webstudio-is/fonts": "^0.61.0",
+    "@webstudio-is/generate-arg-types": "^0.61.0",
+    "@webstudio-is/icons": "^0.61.0",
+    "@webstudio-is/image": "^0.61.0",
+    "@webstudio-is/prisma-client": "^0.61.0",
+    "@webstudio-is/project-build": "^0.61.0"
   },
   "exports": {
     ".": {

package/src/components/blockquote.ws.tsx

@@ -1,72 +1,62 @@
-import type { Style } from "@webstudio-is/css-data";
 import { BlockquoteIcon } from "@webstudio-is/icons";
 import type { defaultTag } from "./blockquote";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 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 },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "typography",
@@ -74,7 +64,7 @@ export const meta: WsComponentMeta = {
   label: "Blockquote",
   Icon: BlockquoteIcon,
   presetStyle,
-  children: ["Blockquote you can edit"],
+  children: [{ type: "text", value: "Blockquote you can edit" }],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/body.ws.tsx

@@ -1,38 +1,41 @@
 import { BodyIcon } from "@webstudio-is/icons";
 import { body } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/body.props";
 import type { defaultTag } from "./body";
-import type { Style } from "@webstudio-is/css-data";
 
 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" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "container",

package/src/components/bold.ws.tsx

@@ -1,13 +1,16 @@
 import { BoldIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/bold.props";
 import { b } from "../css/normalize";
-import type { Style } from "@webstudio-is/css-data";
 import type { defaultTag } from "./bold";
 
 const presetStyle = {
   b,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

package/src/components/box.ws.ts

@@ -1,9 +1,12 @@
 import { BoxIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/box.props";
 import type { Box } from "./box";
 import type { ComponentProps } from "react";
-import type { Style } from "@webstudio-is/css-data";
 import {
   div,
   address,
@@ -30,7 +33,7 @@ const presetStyle = {
   main,
   nav,
   section,
-} as const satisfies Record<BoxTags, Style>;
+} satisfies PresetStyle<BoxTags>;
 
 export const meta: WsComponentMeta = {
   category: "general",

package/src/components/button.ws.tsx

@@ -1,13 +1,16 @@
 import { ButtonElementIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
-import { props } from "./__generated__/button.props";
 import { button } from "../css/normalize";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
+import { props } from "./__generated__/button.props";
 import type { defaultTag } from "./button";
-import type { Style } from "@webstudio-is/css-data";
 
 const presetStyle = {
   button,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "forms",

package/src/components/code.ws.tsx

@@ -1,44 +1,38 @@
 import { CodeIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { type defaultTag, displayVarNamespace } from "./code";
 import { props } from "./__generated__/code.props";
-import type { Style, StyleValue } from "@webstudio-is/css-data";
 import { code } from "../css/normalize";
 
-const display: StyleValue = {
-  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" },
     },
-    backgroundColor: {
-      type: "rgb",
-      r: 238,
-      g: 238,
-      b: 238,
-      alpha: 1,
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 0.2, unit: "em" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+    {
+      property: "backgroundColor",
+      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 },
+    },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "general",
@@ -46,7 +40,7 @@ export const meta: WsComponentMeta = {
   label: "Code",
   Icon: CodeIcon,
   presetStyle,
-  children: ["Code you can edit"],
+  children: [{ type: "text", value: "Code you can edit" }],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/component-meta.ts

@@ -1,11 +1,13 @@
 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 { PropMeta } from "@webstudio-is/generate-arg-types";
 import type { htmlTags as HtmlTags } from "html-tags";
+import { EmbedTemplateStyleDecl, WsEmbedTemplate } from "../embed-template";
 
-type PresetStyle = Partial<Record<HtmlTags, Style>>;
+export type PresetStyle<Tag extends HtmlTags = HtmlTags> = Partial<
+  Record<Tag, EmbedTemplateStyleDecl[]>
+>;
 
 // props are separated from the rest of the meta
 // so they can be exported separately and potentially tree-shaken
@@ -48,7 +50,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 type WsComponentMeta = Omit<

package/src/components/form.ws.tsx

@@ -1,20 +1,22 @@
-import type { Style } from "@webstudio-is/css-data";
 import { FormIcon } from "@webstudio-is/icons";
 import { form } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./form";
 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 },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "forms",
@@ -22,6 +24,14 @@ export const meta: WsComponentMeta = {
   label: "Form",
   Icon: FormIcon,
   presetStyle,
+  children: [
+    { type: "instance", component: "Input", children: [] },
+    {
+      type: "instance",
+      component: "Button",
+      children: [{ type: "text", value: "Submit" }],
+    },
+  ],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/heading.ws.tsx

@@ -1,8 +1,11 @@
-import type { Style } from "@webstudio-is/css-data";
 import { HeadingIcon } from "@webstudio-is/icons";
 import type { ComponentProps } from "react";
 import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { Heading } from "./heading";
 import { props } from "./__generated__/heading.props";
 
@@ -15,14 +18,14 @@ const presetStyle = {
   h4,
   h5,
   h6,
-} as const satisfies Record<HeadingTags, Style>;
+} satisfies PresetStyle<HeadingTags>;
 
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,
-  children: ["Heading you can edit"],
+  children: [{ type: "text", value: "Heading you can edit" }],
   presetStyle,
 };
 

package/src/components/image.ws.tsx

@@ -1,28 +1,30 @@
-import type { Style } from "@webstudio-is/css-data";
 import { ImageIcon } from "@webstudio-is/icons";
 import { img } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./image";
 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" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "media",

package/src/components/input.ws.tsx

@@ -1,13 +1,16 @@
-import type { Style } from "@webstudio-is/css-data";
 import { FormTextFieldIcon } from "@webstudio-is/icons";
 import { input } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./input";
 import { props } from "./__generated__/input.props";
 
 const presetStyle = {
   input,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "forms",

package/src/components/italic.ws.tsx

@@ -1,19 +1,22 @@
-import type { Style } from "@webstudio-is/css-data";
 import { TextItalicIcon } from "@webstudio-is/icons";
 import type { defaultTag } from "./italic";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 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" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

package/src/components/link-block.ws.tsx

@@ -1,20 +1,23 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/link-block.props";
 import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import type { defaultTag } from "./link-block";
-import type { Style } from "@webstudio-is/css-data";
 import { a } from "../css/normalize";
 
 const presetStyle = {
-  a: {
+  a: [
     ...a,
-    display: {
-      type: "keyword",
-      value: "inline-block",
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "general",