@webstudio-is/react-sdk 0.17.0 → 0.18.0

package/lib/cjs/components/body.ws.cjs

@@ -29,7 +29,7 @@ __export(body_ws_exports, {
 module.exports = __toCommonJS(body_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_body_props = __toESM(require("./__generated__/body.props.json"), 1);
-const defaultStyle = {
+const presetStyle = {
   marginTop: {
     type: "unit",
     unit: "px",
@@ -83,6 +83,6 @@ const meta = {
   label: "Body",
   Icon: import_icons.BodyIcon,
   props: import_body_props.default,
-  defaultStyle
+  presetStyle
 };
 var body_ws_default = meta;

package/lib/cjs/components/box.ws.cjs

@@ -29,7 +29,7 @@ __export(box_ws_exports, {
 module.exports = __toCommonJS(box_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_box_props = __toESM(require("./__generated__/box.props.json"), 1);
-const defaultStyle = {
+const presetStyle = {
   boxSizing: {
     type: "keyword",
     value: "border-box"
@@ -39,7 +39,7 @@ const meta = {
   type: "container",
   label: "Box",
   Icon: import_icons.SquareIcon,
-  defaultStyle,
+  presetStyle,
   props: import_box_props.default
 };
 var box_ws_default = meta;

package/lib/cjs/components/component-type.cjs

@@ -71,7 +71,7 @@ const WsComponentMeta = import_zod.z.lazy(
     ]),
     label: import_zod.z.string(),
     Icon: import_zod.z.any(),
-    defaultStyle: import_zod.z.optional(import_zod.z.any()),
+    presetStyle: import_zod.z.optional(import_zod.z.any()),
     children: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
     props: Props,
     initialProps: import_zod.z.optional(import_zod.z.array(import_zod.z.string()))

package/lib/cjs/components/form.ws.cjs

@@ -29,7 +29,7 @@ __export(form_ws_exports, {
 module.exports = __toCommonJS(form_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_form_props = __toESM(require("./__generated__/form.props.json"), 1);
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "px",
@@ -44,7 +44,7 @@ const meta = {
   type: "container",
   label: "Form",
   Icon: import_icons.FormIcon,
-  defaultStyle,
+  presetStyle,
   props: import_form_props.default
 };
 var form_ws_default = meta;

package/lib/cjs/components/image.ws.cjs

@@ -29,7 +29,7 @@ __export(image_ws_exports, {
 module.exports = __toCommonJS(image_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_image_props = __toESM(require("./__generated__/image.props.json"), 1);
-const defaultStyle = {
+const presetStyle = {
   maxWidth: {
     type: "unit",
     unit: "%",
@@ -44,7 +44,7 @@ const meta = {
   type: "embed",
   label: "Image",
   Icon: import_icons.ImageIcon,
-  defaultStyle,
+  presetStyle,
   props: import_image_props.default,
   initialProps: ["src", "width", "height", "alt", "loading"]
 };

package/lib/cjs/components/italic.ws.cjs

@@ -29,7 +29,7 @@ __export(italic_ws_exports, {
 module.exports = __toCommonJS(italic_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_italic_props = __toESM(require("./__generated__/italic.props.json"), 1);
-const defaultStyle = {
+const presetStyle = {
   fontStyle: {
     type: "keyword",
     value: "italic"
@@ -39,7 +39,7 @@ const meta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: import_icons.FontItalicIcon,
-  defaultStyle,
+  presetStyle,
   props: import_italic_props.default
 };
 var italic_ws_default = meta;

package/lib/cjs/components/link.ws.cjs

@@ -29,7 +29,7 @@ __export(link_ws_exports, {
 module.exports = __toCommonJS(link_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_link_props = __toESM(require("./__generated__/link.props.json"), 1);
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "em",
@@ -44,7 +44,7 @@ const meta = {
   type: "rich-text",
   label: "Link",
   Icon: import_icons.Link2Icon,
-  defaultStyle,
+  presetStyle,
   children: ["Link text you can edit"],
   props: import_link_props.default
 };

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

@@ -29,7 +29,7 @@ __export(text_block_ws_exports, {
 module.exports = __toCommonJS(text_block_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_text_block_props = __toESM(require("./__generated__/text-block.props.json"), 1);
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "em",
@@ -40,7 +40,7 @@ const meta = {
   type: "rich-text",
   label: "Text Block",
   Icon: import_icons.TextIcon,
-  defaultStyle,
+  presetStyle,
   children: ["Block of text you can edit"],
   props: import_text_block_props.default
 };

package/lib/cjs/css/breakpoints.cjs

@@ -22,7 +22,7 @@ __export(breakpoints_exports, {
 });
 module.exports = __toCommonJS(breakpoints_exports);
 const initialBreakpoints = [
-  { label: "Mobile", minWidth: 360 },
+  { label: "Mobile", minWidth: 0 },
   { label: "Tablet", minWidth: 768 },
   { label: "Laptop", minWidth: 1024 },
   { label: "Desktop", minWidth: 1280 }

package/lib/cjs/db/instance.cjs

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var instance_exports = {};
 __export(instance_exports, {
   Instance: () => Instance,
+  Text: () => Text,
   toBaseInstance: () => toBaseInstance
 });
 module.exports = __toCommonJS(instance_exports);
@@ -31,11 +32,18 @@ const toBaseInstance = (instance) => {
     cssRules: instance.cssRules
   };
 };
+const Text = import_zod.z.lazy(
+  () => import_zod.z.object({
+    type: import_zod.z.literal("text"),
+    value: import_zod.z.string()
+  })
+);
 const Instance = import_zod.z.lazy(
   () => import_zod.z.object({
+    type: import_zod.z.literal("instance"),
     id: import_zod.z.string(),
     component: import_zod.z.string(),
-    children: import_zod.z.array(import_zod.z.union([Instance, import_zod.z.string()])),
+    children: import_zod.z.array(import_zod.z.union([Instance, Text])),
     cssRules: import_zod.z.array(import_css_data.CssRule)
   })
 );

package/lib/cjs/pubsub/create.cjs

@@ -77,6 +77,18 @@ const createPubsub = () => {
           emitter.off("*", onAction);
         };
       }, [onAction]);
+    },
+    subscribe(type, onAction) {
+      emitter.on(type, onAction);
+      return () => {
+        emitter.off(type, onAction);
+      };
+    },
+    subscribeAll(onAction) {
+      emitter.on("*", onAction);
+      return () => {
+        emitter.off("*", onAction);
+      };
     }
   };
 };

package/lib/cjs/tree/create-elements-tree.cjs

@@ -59,8 +59,8 @@ const createInstanceChildrenElements = ({
 }) => {
   const elements = [];
   for (const child of children) {
-    if (typeof child === "string") {
-      elements.push(child);
+    if (child.type === "text") {
+      elements.push(child.value);
       continue;
     }
     const children2 = createInstanceChildrenElements({

package/lib/components/body.ws.js

@@ -1,6 +1,6 @@
 import { BodyIcon } from "@webstudio-is/icons";
 import props from "./__generated__/body.props.json";
-const defaultStyle = {
+const presetStyle = {
   marginTop: {
     type: "unit",
     unit: "px",
@@ -54,7 +54,7 @@ const meta = {
   label: "Body",
   Icon: BodyIcon,
   props,
-  defaultStyle
+  presetStyle
 };
 var body_ws_default = meta;
 export {

package/lib/components/box.ws.js

@@ -1,6 +1,6 @@
 import { SquareIcon } from "@webstudio-is/icons";
 import props from "./__generated__/box.props.json";
-const defaultStyle = {
+const presetStyle = {
   boxSizing: {
     type: "keyword",
     value: "border-box"
@@ -10,7 +10,7 @@ const meta = {
   type: "container",
   label: "Box",
   Icon: SquareIcon,
-  defaultStyle,
+  presetStyle,
   props
 };
 var box_ws_default = meta;

package/lib/components/component-type.js

@@ -48,7 +48,7 @@ const WsComponentMeta = z.lazy(
     ]),
     label: z.string(),
     Icon: z.any(),
-    defaultStyle: z.optional(z.any()),
+    presetStyle: z.optional(z.any()),
     children: z.optional(z.array(z.string())),
     props: Props,
     initialProps: z.optional(z.array(z.string()))

package/lib/components/form.ws.js

@@ -1,6 +1,6 @@
 import { FormIcon } from "@webstudio-is/icons";
 import props from "./__generated__/form.props.json";
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "px",
@@ -15,7 +15,7 @@ const meta = {
   type: "container",
   label: "Form",
   Icon: FormIcon,
-  defaultStyle,
+  presetStyle,
   props
 };
 var form_ws_default = meta;

package/lib/components/image.ws.js

@@ -1,6 +1,6 @@
 import { ImageIcon } from "@webstudio-is/icons";
 import props from "./__generated__/image.props.json";
-const defaultStyle = {
+const presetStyle = {
   maxWidth: {
     type: "unit",
     unit: "%",
@@ -15,7 +15,7 @@ const meta = {
   type: "embed",
   label: "Image",
   Icon: ImageIcon,
-  defaultStyle,
+  presetStyle,
   props,
   initialProps: ["src", "width", "height", "alt", "loading"]
 };

package/lib/components/italic.ws.js

@@ -1,6 +1,6 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
 import props from "./__generated__/italic.props.json";
-const defaultStyle = {
+const presetStyle = {
   fontStyle: {
     type: "keyword",
     value: "italic"
@@ -10,7 +10,7 @@ const meta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: FontItalicIcon,
-  defaultStyle,
+  presetStyle,
   props
 };
 var italic_ws_default = meta;

package/lib/components/link.ws.js

@@ -1,6 +1,6 @@
 import { Link2Icon } from "@webstudio-is/icons";
 import props from "./__generated__/link.props.json";
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "em",
@@ -15,7 +15,7 @@ const meta = {
   type: "rich-text",
   label: "Link",
   Icon: Link2Icon,
-  defaultStyle,
+  presetStyle,
   children: ["Link text you can edit"],
   props
 };

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

@@ -1,6 +1,6 @@
 import { TextIcon } from "@webstudio-is/icons";
 import props from "./__generated__/text-block.props.json";
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "em",
@@ -11,7 +11,7 @@ const meta = {
   type: "rich-text",
   label: "Text Block",
   Icon: TextIcon,
-  defaultStyle,
+  presetStyle,
   children: ["Block of text you can edit"],
   props
 };

package/lib/css/breakpoints.js

@@ -1,5 +1,5 @@
 const initialBreakpoints = [
-  { label: "Mobile", minWidth: 360 },
+  { label: "Mobile", minWidth: 0 },
   { label: "Tablet", minWidth: 768 },
   { label: "Laptop", minWidth: 1024 },
   { label: "Desktop", minWidth: 1280 }

package/lib/db/instance.js

@@ -7,15 +7,23 @@ const toBaseInstance = (instance) => {
     cssRules: instance.cssRules
   };
 };
+const Text = z.lazy(
+  () => z.object({
+    type: z.literal("text"),
+    value: z.string()
+  })
+);
 const Instance = z.lazy(
   () => z.object({
+    type: z.literal("instance"),
     id: z.string(),
     component: z.string(),
-    children: z.array(z.union([Instance, z.string()])),
+    children: z.array(z.union([Instance, Text])),
     cssRules: z.array(CssRule)
   })
 );
 export {
   Instance,
+  Text,
   toBaseInstance
 };

package/lib/pubsub/create.js

@@ -48,6 +48,18 @@ const createPubsub = () => {
           emitter.off("*", onAction);
         };
       }, [onAction]);
+    },
+    subscribe(type, onAction) {
+      emitter.on(type, onAction);
+      return () => {
+        emitter.off(type, onAction);
+      };
+    },
+    subscribeAll(onAction) {
+      emitter.on("*", onAction);
+      return () => {
+        emitter.off("*", onAction);
+      };
     }
   };
 };

package/lib/tree/create-elements-tree.js

@@ -36,8 +36,8 @@ const createInstanceChildrenElements = ({
 }) => {
   const elements = [];
   for (const child of children) {
-    if (typeof child === "string") {
-      elements.push(child);
+    if (child.type === "text") {
+      elements.push(child.value);
       continue;
     }
     const children2 = createInstanceChildrenElements({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -21,23 +21,24 @@
   "devDependencies": {
     "@babel/core": "^7.20.2",
     "@esbuild-kit/esm-loader": "^2.4.2",
+    "@jest/globals": "^29.3.1",
+    "@remix-run/node": "^1.6.4",
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-interactions": "^6.5.6",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/builder-webpack4": "^6.5.6",
-    "@storybook/manager-webpack4": "^6.5.6",
-    "@storybook/react": "^6.5.6",
+    "@storybook/react": "^6.5.14",
     "@storybook/testing-library": "^0.0.11",
     "@types/node": "^17.0.21",
+    "@types/react": "^17.0.24",
+    "@types/react-dom": "^17.0.9",
     "@webstudio-is/generate-arg-types": "*",
     "@webstudio-is/jest-config": "*",
     "@webstudio-is/scripts": "*",
+    "@webstudio-is/storybook-config": "*",
+    "@webstudio-is/tsconfig": "*",
     "babel-loader": "^8.2.5",
     "esbuild": "^0.14.25",
     "esbuild-node-externals": "^1.4.1",
+    "jest": "^29.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remix-utils": "^4.1.0",
@@ -48,7 +49,6 @@
   "peerDependencies": {
     "@remix-run/react": "^1.2.3",
     "@remix-run/server-runtime": "^1.2.3",
-    "@storybook/react": "^6.5.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remix-utils": "^4.1.0",

package/src/components/body.ws.tsx

@@ -2,7 +2,7 @@ import { BodyIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/body.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   marginTop: {
     type: "unit",
     unit: "px",
@@ -57,7 +57,7 @@ const meta: WsComponentMeta = {
   label: "Body",
   Icon: BodyIcon,
   props: props as MetaProps,
-  defaultStyle,
+  presetStyle,
 };
 
 export default meta;

package/src/components/box.ws.ts

@@ -2,7 +2,7 @@ import { SquareIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/box.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   boxSizing: {
     type: "keyword",
     value: "border-box",
@@ -13,7 +13,7 @@ const meta: WsComponentMeta = {
   type: "container",
   label: "Box",
   Icon: SquareIcon,
-  defaultStyle,
+  presetStyle,
   props: props as MetaProps,
 };
 

package/src/components/component-type.ts

@@ -23,7 +23,7 @@ export type WsComponentMeta = {
     | "rich-text-child";
   label: string;
   Icon: FunctionComponent<IconProps>;
-  defaultStyle?: Style;
+  presetStyle?: Style;
   children?: Array<string>;
   props: MetaProps;
   initialProps?: Array<string>;
@@ -83,7 +83,7 @@ export const WsComponentMeta = z.lazy(() =>
     ]),
     label: z.string(),
     Icon: z.any(),
-    defaultStyle: z.optional(z.any()),
+    presetStyle: z.optional(z.any()),
     children: z.optional(z.array(z.string())),
     props: Props,
     initialProps: z.optional(z.array(z.string())),

package/src/components/form.ws.tsx

@@ -2,7 +2,7 @@ import { FormIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/form.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "px",
@@ -18,7 +18,7 @@ const meta: WsComponentMeta = {
   type: "container",
   label: "Form",
   Icon: FormIcon,
-  defaultStyle,
+  presetStyle,
   props: props as MetaProps,
 };
 

package/src/components/image.ws.tsx

@@ -2,7 +2,7 @@ import { ImageIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/image.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   // Otherwise on new image insert onto canvas it can overfit screen size multiple times
   maxWidth: {
     type: "unit",
@@ -21,7 +21,7 @@ const meta: WsComponentMeta = {
   type: "embed",
   label: "Image",
   Icon: ImageIcon,
-  defaultStyle,
+  presetStyle,
   props: props as MetaProps,
   initialProps: ["src", "width", "height", "alt", "loading"],
 };

package/src/components/index.test.ts

@@ -1,3 +1,4 @@
+import { test, expect } from "@jest/globals";
 import {
   getComponentNames,
   getComponentMeta,

package/src/components/italic.ws.tsx

@@ -2,7 +2,7 @@ import { FontItalicIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/italic.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   fontStyle: {
     type: "keyword",
     value: "italic",
@@ -13,7 +13,7 @@ const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: FontItalicIcon,
-  defaultStyle,
+  presetStyle,
   props: props as MetaProps,
 };
 

package/src/components/link.ws.tsx

@@ -2,7 +2,7 @@ import { Link2Icon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/link.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "em",
@@ -18,7 +18,7 @@ const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Link",
   Icon: Link2Icon,
-  defaultStyle,
+  presetStyle,
   children: ["Link text you can edit"],
   props: props as MetaProps,
 };

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

@@ -2,7 +2,7 @@ import { TextIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, MetaProps } from "./component-type";
 import props from "./__generated__/text-block.props.json";
 
-const defaultStyle = {
+const presetStyle = {
   minHeight: {
     type: "unit",
     unit: "em",
@@ -14,7 +14,7 @@ const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Text Block",
   Icon: TextIcon,
-  defaultStyle,
+  presetStyle,
   children: ["Block of text you can edit"],
   props: props as MetaProps,
 };

package/src/css/breakpoints.ts

@@ -3,7 +3,7 @@ import type { Breakpoint } from "@webstudio-is/css-data";
 export type BaseBreakpoint = Pick<Breakpoint, "label" | "minWidth">;
 
 export const initialBreakpoints: Array<BaseBreakpoint> = [
-  { label: "Mobile", minWidth: 360 },
+  { label: "Mobile", minWidth: 0 },
   { label: "Tablet", minWidth: 768 },
   { label: "Laptop", minWidth: 1024 },
   { label: "Desktop", minWidth: 1280 },

package/src/db/instance.ts

@@ -10,8 +10,14 @@ export type BaseInstance = {
   cssRules: Array<CssRule>;
 };
 
+export type Text = {
+  type: "text";
+  value: string;
+};
+
 export type Instance = BaseInstance & {
-  children: Array<Instance | string>;
+  type: "instance";
+  children: Array<Instance | Text>;
 };
 
 export const toBaseInstance = (instance: Instance): BaseInstance => {
@@ -22,12 +28,20 @@ export const toBaseInstance = (instance: Instance): BaseInstance => {
   };
 };
 
+export const Text = z.lazy(() =>
+  z.object({
+    type: z.literal("text"),
+    value: z.string(),
+  })
+);
+
 export const Instance = z.lazy(
   () =>
     z.object({
+      type: z.literal("instance"),
       id: z.string(),
       component: z.string(),
-      children: z.array(z.union([Instance, z.string()])),
+      children: z.array(z.union([Instance, Text])),
       cssRules: z.array(CssRule),
     })
   // @todo can't figure out how to make component to be z.enum(Object.keys(components))

package/src/pubsub/create.ts

@@ -82,5 +82,27 @@ export const createPubsub = <PublishMap>() => {
         };
       }, [onAction]);
     },
+
+    subscribe<Type extends keyof PublishMap>(
+      type: Type,
+      onAction: (payload: PublishMap[Type]) => void
+    ) {
+      emitter.on(type, onAction);
+      return () => {
+        emitter.off(type, onAction);
+      };
+    },
+
+    subscribeAll(
+      onAction: <Type extends keyof PublishMap>(
+        type: Type,
+        payload: PublishMap[Type]
+      ) => void
+    ) {
+      emitter.on("*", onAction);
+      return () => {
+        emitter.off("*", onAction);
+      };
+    },
   };
 };

package/src/tree/create-elements-tree.tsx

@@ -5,8 +5,12 @@ import { Scripts, ScrollRestoration } from "@remix-run/react";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
 export type ChildrenUpdates = Array<
-  | string
   | {
+      type: "text";
+      value: string;
+    }
+  | {
+      type: "instance";
       id: undefined | Instance["id"];
       component: Instance["component"];
       children: ChildrenUpdates;
@@ -60,8 +64,8 @@ const createInstanceChildrenElements = ({
 }) => {
   const elements = [];
   for (const child of children) {
-    if (typeof child === "string") {
-      elements.push(child);
+    if (child.type === "text") {
+      elements.push(child.value);
       continue;
     }
     const children = createInstanceChildrenElements({

package/src/user-props/types.ts

@@ -2,9 +2,8 @@ import type { InstanceProps, Instance } from "../db";
 import { UserProp } from "./schema";
 
 export type UserPropsUpdates = {
-  treeId: InstanceProps["treeId"];
-  propsId: InstanceProps["id"];
   instanceId: Instance["id"];
+  propsId?: InstanceProps["id"];
   updates: Array<UserProp>;
 };