@webstudio-is/react-sdk 0.68.0 → 0.69.0

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

@@ -17,7 +17,8 @@ const meta = {
   label: "Link Block",
   icon: LinkBlockIcon,
   states: linkMeta.states,
-  presetStyle
+  presetStyle,
+  order: 2
 };
 const propsMeta = {
   props: {

package/lib/components/link.ws.js

@@ -23,6 +23,7 @@ const meta = {
   label: "Link Text",
   icon: LinkIcon,
   presetStyle,
+  order: 1,
   states: [
     ...defaultStates,
     {
@@ -35,7 +36,13 @@ const meta = {
       label: "Current page"
     }
   ],
-  children: [{ type: "text", value: "Link text you can edit" }]
+  template: [
+    {
+      type: "instance",
+      component: "Link",
+      children: [{ type: "text", value: "Link text you can edit" }]
+    }
+  ]
 };
 const propsMeta = {
   props: {

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

@@ -8,14 +8,21 @@ const presetStyle = {
   li
 };
 const meta = {
-  category: "typography",
+  category: "general",
   type: "rich-text",
-  acceptedParents: ["List"],
+  requiredAncestors: ["List"],
   label: "List Item",
   icon: ListItemIcon,
-  children: [{ type: "text", value: "List Item you can edit" }],
   states: defaultStates,
-  presetStyle
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "ListItem",
+      children: [{ type: "text", value: "List Item you can edit" }]
+    }
+  ],
+  order: 4
 };
 const propsMeta = {
   props

package/lib/components/list.ws.js

@@ -37,13 +37,13 @@ const presetStyle = {
   ]
 };
 const meta = {
-  category: "typography",
+  category: "general",
   type: "container",
   label: "List",
   icon: ListIcon,
   states: defaultStates,
   presetStyle,
-  children: []
+  order: 3
 };
 const propsMeta = {
   props,

package/lib/components/paragraph.ws.js

@@ -8,13 +8,20 @@ const presetStyle = {
   p
 };
 const meta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Paragraph",
   icon: TextAlignLeftIcon,
-  children: [{ type: "text", value: "Pragraph you can edit" }],
   states: defaultStates,
-  presetStyle
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Paragraph",
+      children: [{ type: "text", value: "Pragraph you can edit" }]
+    }
+  ],
+  order: 2
 };
 const propsMeta = {
   props

package/lib/components/radio-button-field.ws.js

@@ -17,14 +17,20 @@ const meta = {
   icon: RadioCheckedIcon,
   states: defaultStates,
   presetStyle,
-  children: [
-    { type: "instance", component: "RadioButton", props: [], children: [] },
+  template: [
     {
       type: "instance",
-      component: "TextBlock",
-      label: "Radio Label",
-      props: [],
-      children: [{ type: "text", value: "Radio" }]
+      component: "RadioButtonField",
+      children: [
+        { type: "instance", component: "RadioButton", props: [], children: [] },
+        {
+          type: "instance",
+          component: "TextBlock",
+          label: "Radio Label",
+          props: [],
+          children: [{ type: "text", value: "Radio" }]
+        }
+      ]
     }
   ]
 };

package/lib/components/radio-button.ws.js

@@ -18,6 +18,7 @@ const meta = {
   label: "Radio Input",
   icon: RadioCheckedIcon,
   presetStyle,
+  order: 5,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },

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

@@ -4,7 +4,7 @@ const { category, ...linkMetaRest } = linkMeta;
 const meta = {
   ...linkMetaRest,
   type: "rich-text-child",
-  children: []
+  template: []
 };
 const propsMeta = {
   initialProps: linkPropsMeta.initialProps,

package/lib/components/separator.ws.js

@@ -40,7 +40,7 @@ const meta = {
   icon: DashIcon,
   states: defaultStates,
   presetStyle,
-  children: []
+  order: 5
 };
 const propsMeta = {
   props,

package/lib/components/slot.ws.js

@@ -3,7 +3,9 @@ const meta = {
   category: "general",
   type: "container",
   label: "Slot",
-  icon: SlotComponentIcon
+  icon: SlotComponentIcon,
+  stylable: false,
+  order: 6
 };
 const propsMeta = {
   props: {}

package/lib/components/text-block.js

@@ -1,7 +1,13 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {
+  createElement,
+  forwardRef
+} from "react";
 const defaultTag = "div";
-const TextBlock = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", { ...props, ref }));
+const TextBlock = forwardRef(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return createElement(tag, { ...props, ref });
+  }
+);
 TextBlock.displayName = "TextBlock";
 export {
   TextBlock,

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

@@ -14,16 +14,24 @@ const presetStyle = {
   ]
 };
 const meta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Text Block",
   icon: TextBlockIcon,
   states: defaultStates,
   presetStyle,
-  children: [{ type: "text", value: "Block of text you can edit" }]
+  template: [
+    {
+      type: "instance",
+      component: "TextBlock",
+      children: [{ type: "text", value: "Block of text you can edit" }]
+    }
+  ],
+  order: 0
 };
 const propsMeta = {
-  props
+  props,
+  initialProps: ["tag"]
 };
 export {
   meta,

package/lib/components/textarea.ws.js

@@ -17,6 +17,7 @@ const meta = {
   label: "Text Area",
   icon: FormTextAreaIcon,
   presetStyle,
+  order: 4,
   states: [
     ...defaultStates,
     { selector: "::placeholder", label: "Placeholder" },

package/lib/embed-template.js

@@ -27,11 +27,12 @@ const EmbedTemplateProp = z.union([
     value: z.array(z.string())
   })
 ]);
-const EmbedTemplateStyleDecl = z.object({
+const EmbedTemplateStyleDeclRaw = z.object({
   state: z.optional(z.string()),
   property: z.string(),
   value: StyleValue
 });
+const EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
 const EmbedTemplateInstance = z.lazy(
   () => z.object({
     type: z.literal("instance"),

package/lib/index.js

@@ -5,20 +5,15 @@ export * from "./pubsub";
 export * from "./app";
 export * from "./components/components";
 export * from "./components/components-utils";
-import {
-  customComponents,
-  customComponentMetas,
-  customComponentPropsMetas
-} from "./app/custom-components";
 import {
   componentCategories,
   stateCategories
 } from "./components/component-meta";
 export * from "./embed-template";
+import { usePropUrl, getInstanceIdFromComponentProps } from "./props";
 export {
   componentCategories,
-  customComponentMetas,
-  customComponentPropsMetas,
-  customComponents,
-  stateCategories
+  getInstanceIdFromComponentProps,
+  stateCategories,
+  usePropUrl
 };

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

@@ -10,7 +10,7 @@ const createElementsTree = ({
   assetsStore,
   pagesStore,
   Component,
-  getComponent
+  components
 }) => {
   const rootInstance = instances.get(rootInstanceId);
   if (rootInstance === void 0) {
@@ -22,7 +22,7 @@ const createElementsTree = ({
     instanceSelector: rootInstanceSelector,
     Component,
     children: rootInstance.children,
-    getComponent
+    components
   });
   const root = createInstanceElement({
     Component,
@@ -35,7 +35,7 @@ const createElementsTree = ({
         /* @__PURE__ */ jsx(Scripts, {})
       ] }, "children")
     ],
-    getComponent
+    components
   });
   return /* @__PURE__ */ jsx(
     ReactSdkContext.Provider,
@@ -50,7 +50,7 @@ const createInstanceChildrenElements = ({
   instanceSelector,
   children,
   Component,
-  getComponent
+  components
 }) => {
   const elements = [];
   for (const child of children) {
@@ -68,14 +68,14 @@ const createInstanceChildrenElements = ({
       instanceSelector: childInstanceSelector,
       children: childInstance.children,
       Component,
-      getComponent
+      components
     });
     const element = createInstanceElement({
       instance: childInstance,
       instanceSelector: childInstanceSelector,
       Component,
       children: children2,
-      getComponent
+      components
     });
     elements.push(element);
   }
@@ -86,14 +86,14 @@ const createInstanceElement = ({
   instance,
   instanceSelector,
   children = [],
-  getComponent
+  components
 }) => {
   return /* @__PURE__ */ jsx(
     Component,
     {
       instance,
       instanceSelector,
-      getComponent,
+      components,
       children
     },
     instance.id

package/lib/tree/root.js

@@ -1,18 +1,14 @@
 import { atom } from "nanostores";
 import { createElementsTree } from "./create-elements-tree";
 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 InstanceRoot = ({
   data,
   Component,
-  customComponents = defaultCustomComponents,
-  getComponent
+  components
 }) => {
   setParams(data.params);
-  registerComponents(customComponents);
   return createElementsTree({
     instances: new Map(data.build.instances),
     rootInstanceId: data.page.rootInstanceId,
@@ -22,7 +18,7 @@ const InstanceRoot = ({
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: atom(new Map(data.pages.map((page) => [page.id, page]))),
     Component: Component ?? WebstudioComponent,
-    getComponent
+    components
   });
 };
 export {

package/lib/tree/webstudio-component.js

@@ -20,7 +20,7 @@ const WebstudioComponent = ({
   instance,
   instanceSelector,
   children,
-  getComponent,
+  components,
   ...rest
 }) => {
   const instanceProps = useInstanceProps(instance.id);
@@ -30,7 +30,7 @@ const WebstudioComponent = ({
     [idAttribute]: instance.id,
     [componentAttribute]: instance.component
   };
-  const Component = getComponent(instance.component);
+  const Component = components.get(instance.component);
   if (Component === void 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }