@webstudio-is/react-sdk 0.35.0 → 0.36.0

package/lib/components/image.ws.js

@@ -1,5 +1,5 @@
 import { ImageIcon } from "@webstudio-is/icons";
-import props from "./__generated__/image.props.json";
+import { props } from "./__generated__/image.props";
 const presetStyle = {
   maxWidth: {
     type: "unit",
@@ -20,7 +20,12 @@ const meta = {
 const propsMeta = {
   props: {
     ...props,
-    src: { ...props.src, control: "file-image", name: "Source" }
+    src: {
+      type: "string",
+      control: "file-image",
+      label: "Source",
+      required: false
+    }
   },
   initialProps: ["src", "width", "height", "alt", "loading"]
 };

package/lib/components/index.js

@@ -15,6 +15,11 @@ import { meta as ButtonMeta } from "./button.ws";
 import { meta as InputMeta } from "./input.ws";
 import { meta as FormMeta } from "./form.ws";
 import { meta as ImageMeta } from "./image.ws";
+import { meta as BlockquoteMeta } from "./blockquote.ws";
+import { meta as ListMeta } from "./list.ws";
+import { meta as ListItemMeta } from "./list-item.ws";
+import { meta as SeparatorMeta } from "./separator.ws";
+import { meta as CodeMeta } from "./code.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
 import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
 import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
@@ -31,22 +36,11 @@ import { propsMeta as ButtonMetaPropsMeta } from "./button.ws";
 import { propsMeta as InputMetaPropsMeta } from "./input.ws";
 import { propsMeta as FormMetaPropsMeta } from "./form.ws";
 import { propsMeta as ImageMetaPropsMeta } from "./image.ws";
-import { Body } from "./body";
-import { Box } from "./box";
-import { TextBlock } from "./text-block";
-import { Heading } from "./heading";
-import { Paragraph } from "./paragraph";
-import { Link } from "./link";
-import { RichTextLink } from "./rich-text-link";
-import { Span } from "./span";
-import { Bold } from "./bold";
-import { Italic } from "./italic";
-import { Superscript } from "./superscript";
-import { Subscript } from "./subscript";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Form } from "./form";
-import { Image } from "./image";
+import { propsMeta as BlockquotePropsMeta } from "./blockquote.ws";
+import { propsMeta as ListPropsMeta } from "./list.ws";
+import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
+import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
+import { propsMeta as CodePropsMeta } from "./code.ws";
 const defaultMetas = {
   Box: BoxMeta,
   Body: BodyMeta,
@@ -63,7 +57,12 @@ const defaultMetas = {
   Button: ButtonMeta,
   Input: InputMeta,
   Form: FormMeta,
-  Image: ImageMeta
+  Image: ImageMeta,
+  Blockquote: BlockquoteMeta,
+  List: ListMeta,
+  ListItem: ListItemMeta,
+  Separator: SeparatorMeta,
+  Code: CodeMeta
 };
 let currentMetas = defaultMetas;
 const getComponentMeta = (name) => {
@@ -76,7 +75,7 @@ const registerComponentMetas = (overrides) => {
   }
   currentMetas = result;
 };
-const defaultPropsMetas = {
+const defaultPropsMetasRaw = {
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,
@@ -92,8 +91,14 @@ const defaultPropsMetas = {
   Button: ButtonMetaPropsMeta,
   Input: InputMetaPropsMeta,
   Form: FormMetaPropsMeta,
-  Image: ImageMetaPropsMeta
+  Image: ImageMetaPropsMeta,
+  Blockquote: BlockquotePropsMeta,
+  List: ListPropsMeta,
+  ListItem: ListItemPropsMeta,
+  Separator: SeparatorPropsMeta,
+  Code: CodePropsMeta
 };
+const defaultPropsMetas = defaultPropsMetasRaw;
 let registeredPropsMetas = {};
 let currentPropsMetas = void 0;
 const getComponentPropsMeta = (name) => {
@@ -118,36 +123,7 @@ const registerComponentPropsMetas = (metas) => {
   registeredPropsMetas = metas;
   currentPropsMetas = void 0;
 };
-const defaultComponents = {
-  Box,
-  Body,
-  TextBlock,
-  Heading,
-  Paragraph,
-  Link,
-  RichTextLink,
-  Span,
-  Bold,
-  Italic,
-  Superscript,
-  Subscript,
-  Button,
-  Input,
-  Form,
-  Image
-};
-let registeredComponents = null;
-const componentNames = Object.keys(defaultComponents);
-const getComponentNames = () => {
-  const uniqueNames = /* @__PURE__ */ new Set([
-    ...componentNames,
-    ...Object.keys(registeredComponents || {})
-  ]);
-  return [...uniqueNames.values()];
-};
-const getComponent = (name) => {
-  return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : defaultComponents[name];
-};
+let registeredComponents;
 const registerComponents = (components) => {
   registeredComponents = components;
 };
@@ -171,16 +147,15 @@ const computeProps = (defaults, overrides) => {
 const computeInitialProps = (props, defaults, overrides) => {
   const initialProps = overrides?.initialProps ?? defaults?.initialProps ?? [];
   const requiredProps = props ? Object.entries(props).filter(
-    ([name, value]) => value?.type.required && initialProps.includes(name) === false
+    ([name, value]) => value?.required && initialProps.includes(name) === false
   ).map(([name]) => name) : [];
   return [...initialProps, ...requiredProps];
 };
 export {
-  getComponent,
   getComponentMeta,
-  getComponentNames,
   getComponentPropsMeta,
   registerComponentMetas,
   registerComponentPropsMetas,
-  registerComponents
+  registerComponents,
+  registeredComponents
 };

package/lib/components/input.ws.js

@@ -1,5 +1,5 @@
 import { InputIcon } from "@webstudio-is/icons";
-import props from "./__generated__/input.props.json";
+import { props } from "./__generated__/input.props";
 const meta = {
   type: "control",
   label: "Input",

package/lib/components/italic.ws.js

@@ -1,5 +1,5 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
-import props from "./__generated__/italic.props.json";
+import { props } from "./__generated__/italic.props";
 const presetStyle = {
   fontStyle: {
     type: "keyword",

package/lib/components/link.ws.js

@@ -1,5 +1,5 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import props from "./__generated__/link.props.json";
+import { props } from "./__generated__/link.props";
 const presetStyle = {
   minHeight: {
     type: "unit",

package/lib/components/list-item.js

@@ -0,0 +1,14 @@
+import {
+  forwardRef,
+  createElement
+} from "react";
+const defaultTag = "li";
+const ListItem = forwardRef(
+  (props, ref) => {
+    return createElement(defaultTag, { ...props, ref });
+  }
+);
+ListItem.displayName = "ListItem";
+export {
+  ListItem
+};

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

@@ -0,0 +1,15 @@
+import { ListItemIcon } from "@webstudio-is/icons";
+import { props } from "./__generated__/list-item.props";
+const meta = {
+  type: "rich-text",
+  label: "List Item",
+  Icon: ListItemIcon,
+  children: ["List Item you can edit"]
+};
+const propsMeta = {
+  props
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/list.js

@@ -0,0 +1,14 @@
+import {
+  forwardRef,
+  createElement
+} from "react";
+const unorderedTag = "ul";
+const orderedTag = "ol";
+const List = forwardRef(({ ordered = false, ...props }, ref) => {
+  const tag = ordered ? orderedTag : unorderedTag;
+  return createElement(tag, { ...props, ref });
+});
+List.displayName = "List";
+export {
+  List
+};

package/lib/components/list.ws.js

@@ -0,0 +1,31 @@
+import { ListIcon } from "@webstudio-is/icons";
+import { props } from "./__generated__/list.props";
+const presetStyle = {
+  marginTop: {
+    type: "keyword",
+    value: "0"
+  },
+  marginBottom: {
+    type: "keyword",
+    value: "10px"
+  },
+  paddingLeft: {
+    type: "keyword",
+    value: "40px"
+  }
+};
+const meta = {
+  type: "container",
+  label: "List",
+  Icon: ListIcon,
+  presetStyle,
+  children: []
+};
+const propsMeta = {
+  props,
+  initialProps: ["ordered", "type", "starts", "reversed"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/paragraph.ws.js

@@ -1,5 +1,5 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
-import props from "./__generated__/paragraph.props.json";
+import { props } from "./__generated__/paragraph.props";
 const meta = {
   type: "rich-text",
   label: "Paragraph",

package/lib/components/rich-text-link.ws.js

@@ -1,5 +1,5 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import props from "./__generated__/rich-text-link.props.json";
+import { props } from "./__generated__/rich-text-link.props";
 const meta = {
   type: "rich-text-child",
   label: "Link",

package/lib/components/separator.js

@@ -0,0 +1,14 @@
+import {
+  forwardRef,
+  createElement
+} from "react";
+const defaultTag = "hr";
+const Separator = forwardRef(
+  (props, ref) => {
+    return createElement(defaultTag, { ...props, ref });
+  }
+);
+Separator.displayName = "Separator";
+export {
+  Separator
+};

package/lib/components/separator.ws.js

@@ -0,0 +1,31 @@
+import { DashIcon } from "@webstudio-is/icons";
+import { props } from "./__generated__/separator.props";
+const presetStyle = {
+  height: {
+    type: "keyword",
+    value: "1px"
+  },
+  backgroundColor: {
+    type: "keyword",
+    value: "gray"
+  },
+  border: {
+    type: "keyword",
+    value: "none"
+  }
+};
+const meta = {
+  type: "embed",
+  label: "Separator",
+  Icon: DashIcon,
+  presetStyle,
+  children: []
+};
+const propsMeta = {
+  props,
+  initialProps: []
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/span.ws.js

@@ -1,5 +1,5 @@
 import { BrushIcon } from "@webstudio-is/icons";
-import props from "./__generated__/span.props.json";
+import { props } from "./__generated__/span.props";
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",

package/lib/components/subscript.ws.js

@@ -1,5 +1,5 @@
 import { SubscriptIcon } from "@webstudio-is/icons";
-import props from "./__generated__/subscript.props.json";
+import { props } from "./__generated__/subscript.props";
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",

package/lib/components/superscript.ws.js

@@ -1,5 +1,5 @@
 import { SuperscriptIcon } from "@webstudio-is/icons";
-import props from "./__generated__/superscript.props.json";
+import { props } from "./__generated__/superscript.props";
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",

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

@@ -1,5 +1,5 @@
 import { TextIcon } from "@webstudio-is/icons";
-import props from "./__generated__/text-block.props.json";
+import { props } from "./__generated__/text-block.props";
 const presetStyle = {
   minHeight: {
     type: "unit",

package/lib/css/get-browser-style.js

@@ -1,4 +1,5 @@
 import { detectFont } from "detect-font";
+import { keywordValues } from "@webstudio-is/css-data";
 import { properties, units } from "@webstudio-is/css-data";
 const unitsList = Object.values(units).flat();
 const unitRegex = new RegExp(`${unitsList.join("|")}`);
@@ -9,8 +10,15 @@ const parseValue = (property, value) => {
     value = "transparent";
   }
   if (Number.isNaN(number)) {
+    const values = keywordValues[property];
+    if (values?.includes(value)) {
+      return {
+        type: "keyword",
+        value
+      };
+    }
     return {
-      type: "keyword",
+      type: "unparsed",
       value
     };
   }

package/lib/index.js

@@ -3,6 +3,8 @@ export * from "./tree";
 export * from "./components";
 export * from "./pubsub";
 export * from "./app";
+export * from "./components/components";
+export * from "./components/components-utils";
 import {
   customComponents,
   customComponentMetas,

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

@@ -8,11 +8,13 @@ const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
-  Component
+  Component,
+  getComponent
 }) => {
   const children = createInstanceChildrenElements({
     Component,
-    children: instance.children
+    children: instance.children,
+    getComponent
   });
   const body = createInstanceElement({
     Component,
@@ -26,7 +28,8 @@ const createElementsTree = ({
           /* @__PURE__ */ jsx(Scripts, {})
         ]
       }, "children")
-    ]
+    ],
+    getComponent
   });
   return /* @__PURE__ */ jsx(ReactSdkContext.Provider, {
     value: { propsByInstanceIdStore, assetsStore },
@@ -35,7 +38,8 @@ const createElementsTree = ({
 };
 const createInstanceChildrenElements = ({
   children,
-  Component
+  Component,
+  getComponent
 }) => {
   const elements = [];
   for (const child of children) {
@@ -45,12 +49,14 @@ const createInstanceChildrenElements = ({
     }
     const children2 = createInstanceChildrenElements({
       children: child.children,
-      Component
+      Component,
+      getComponent
     });
     const element = createInstanceElement({
       instance: child,
       Component,
-      children: children2
+      children: children2,
+      getComponent
     });
     elements.push(element);
   }
@@ -59,12 +65,14 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
-  children = []
+  children = [],
+  getComponent
 }) => {
   const props = {
     instance,
     children,
-    key: instance.id
+    key: instance.id,
+    getComponent
   };
   return /* @__PURE__ */ jsx(Component, {
     ...props

package/lib/tree/index.js

@@ -1,3 +1,3 @@
 export * from "./create-elements-tree";
 export * from "./root";
-export * from "./wrapper-component";
+export * from "./webstudio-component";

package/lib/tree/root.js

@@ -1,14 +1,37 @@
 import { atom } from "nanostores";
 import { createElementsTree } from "./create-elements-tree";
-import { WrapperComponent } from "./wrapper-component";
+import { WebstudioComponent } from "./webstudio-component";
 import { registerComponents } from "../components";
 import { customComponents as defaultCustomComponents } from "../app/custom-components";
 import { setParams } from "../app/params";
 import { getPropsByInstanceId } from "../props";
+const denormalizeTree = (instances) => {
+  const convertTree = (instance) => {
+    const legacyInstance = {
+      type: "instance",
+      id: instance.id,
+      component: instance.component,
+      children: []
+    };
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        const childInstance = instances.get(child.value);
+        if (childInstance) {
+          legacyInstance.children.push(convertTree(childInstance));
+        }
+      } else {
+        legacyInstance.children.push(child);
+      }
+    }
+    return legacyInstance;
+  };
+  return convertTree(Array.from(instances.values())[0]);
+};
 const InstanceRoot = ({
   data,
   Component,
-  customComponents = defaultCustomComponents
+  customComponents = defaultCustomComponents,
+  getComponent
 }) => {
   if (data.tree === null) {
     throw new Error("Tree is null");
@@ -16,12 +39,13 @@ const InstanceRoot = ({
   setParams(data.params ?? null);
   registerComponents(customComponents);
   return createElementsTree({
-    instance: data.tree.root,
+    instance: denormalizeTree(new Map(data.tree.instances)),
     propsByInstanceIdStore: atom(
       getPropsByInstanceId(new Map(data.tree.props))
     ),
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
-    Component: Component ?? WrapperComponent
+    Component: Component ?? WebstudioComponent,
+    getComponent
   });
 };
 export {

package/lib/tree/{wrapper-component.js → webstudio-component.js}

@@ -1,6 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment2 } from "react";
-import { getComponent } from "../components";
 import { useInstanceProps } from "../props";
 const renderText = (text) => {
   const lines = text.split("\n");
@@ -11,7 +10,7 @@ const renderText = (text) => {
     ]
   }, index));
 };
-const renderWrapperComponentChildren = (children) => {
+const renderWebstudioComponentChildren = (children) => {
   if (children === void 0 || children.length === 0) {
     return;
   }
@@ -19,9 +18,10 @@ const renderWrapperComponentChildren = (children) => {
     return typeof child === "string" ? renderText(child) : child;
   });
 };
-const WrapperComponent = ({
+const WebstudioComponent = ({
   instance,
   children,
+  getComponent,
   ...rest
 }) => {
   const instanceProps = useInstanceProps(instance.id);
@@ -37,16 +37,16 @@ const WrapperComponent = ({
   }
   return /* @__PURE__ */ jsx(Component, {
     ...props,
-    children: renderWrapperComponentChildren(children)
+    children: renderWebstudioComponentChildren(children)
   });
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";
 const collapsedAttribute = "data-ws-collapsed";
 export {
-  WrapperComponent,
+  WebstudioComponent,
   collapsedAttribute,
   componentAttribute,
   idAttribute,
-  renderWrapperComponentChildren
+  renderWebstudioComponentChildren
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -46,17 +46,20 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.35.0",
-    "@webstudio-is/css-data": "^0.35.0",
-    "@webstudio-is/generate-arg-types": "^0.35.0",
-    "@webstudio-is/icons": "^0.35.0",
-    "@webstudio-is/image": "^0.35.0",
-    "@webstudio-is/prisma-client": "^0.35.0",
-    "@webstudio-is/project-build": "^0.35.0"
+    "@webstudio-is/asset-uploader": "^0.36.0",
+    "@webstudio-is/css-data": "^0.36.0",
+    "@webstudio-is/css-vars": "^0.36.0",
+    "@webstudio-is/generate-arg-types": "^0.36.0",
+    "@webstudio-is/icons": "^0.36.0",
+    "@webstudio-is/image": "^0.36.0",
+    "@webstudio-is/prisma-client": "^0.36.0",
+    "@webstudio-is/project-build": "^0.36.0"
   },
   "exports": {
-    "import": "./lib/index.js",
-    "require": "./lib/cjs/index.cjs"
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/cjs/index.cjs"
+    }
   },
   "types": "src/index.ts",
   "files": [
@@ -70,7 +73,7 @@
   "scripts": {
     "dev": "build-package --watch",
     "build": "build-package",
-    "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.json\"",
+    "build:args": "generate-arg-types './src/components/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
     "typecheck": "tsc --noEmit",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",

package/src/app/custom-components/image.tsx

@@ -7,7 +7,7 @@ import {
 import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
 import { usePropAsset } from "../../props";
-import { idAttribute } from "../../tree/wrapper-component";
+import { idAttribute } from "../../tree/webstudio-component";
 import { getParams } from "../params";
 
 const defaultTag = "img";

package/src/app/custom-components/index.ts

@@ -10,13 +10,8 @@ export const customComponents = {
   RichTextLink,
 };
 
-export const customComponentPropsMetas = {
-  Image: {
-    props: {
-      ...imageProps,
-      src: { ...imageProps.src, control: "file-image", name: "Source" },
-    },
-  } as WsComponentPropsMeta,
+export const customComponentPropsMetas: Record<string, WsComponentPropsMeta> = {
+  Image: { props: imageProps },
 };
 
 // just for completeness, maybe we add soemthing here later