@webstudio-is/react-sdk 0.29.0 → 0.30.0

package/lib/components/body.ws.js

@@ -1,4 +1,5 @@
 import { BodyIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/body.props.json";
 const presetStyle = {
   marginTop: {
@@ -53,10 +54,12 @@ const meta = {
   type: "body",
   label: "Body",
   Icon: BodyIcon,
-  props,
   presetStyle
 };
-var body_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  body_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/bold.ws.js

@@ -1,12 +1,15 @@
 import { FontBoldIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/bold.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
-  Icon: FontBoldIcon,
-  props
+  Icon: FontBoldIcon
 };
-var bold_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  bold_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/box.ws.js

@@ -1,4 +1,5 @@
 import { SquareIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/box.props.json";
 const presetStyle = {
   boxSizing: {
@@ -10,10 +11,13 @@ const meta = {
   type: "container",
   label: "Box",
   Icon: SquareIcon,
-  presetStyle,
-  props
+  presetStyle
 };
-var box_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props,
+  initialProps: ["tag"]
+});
 export {
-  box_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/button.ws.js

@@ -1,13 +1,17 @@
 import { ButtonIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/button.props.json";
 const meta = {
   type: "rich-text",
   label: "Button",
   Icon: ButtonIcon,
-  children: ["Button text you can edit"],
-  props
+  children: ["Button text you can edit"]
 };
-var button_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props,
+  initialProps: ["type"]
+});
 export {
-  button_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/component-type.js

@@ -1,59 +1,24 @@
 import { z } from "zod";
-const Props = z.record(
-  z.union([
-    z.object({
-      type: z.literal("number"),
-      required: z.boolean(),
-      defaultValue: z.number().nullable()
-    }),
-    z.object({
-      type: z.literal("text"),
-      required: z.boolean(),
-      defaultValue: z.string().nullable()
-    }),
-    z.object({
-      type: z.literal("color"),
-      required: z.boolean(),
-      defaultValue: z.string().nullable()
-    }),
-    z.object({
-      type: z.literal("boolean"),
-      required: z.boolean(),
-      defaultValue: z.boolean().nullable()
-    }),
-    z.object({
-      type: z.enum([
-        "radio",
-        "inline-radio",
-        "check",
-        "inline-check",
-        "multi-select",
-        "select"
-      ]),
-      required: z.boolean(),
-      options: z.array(z.string()),
-      defaultValue: z.string().nullable()
-    })
-  ])
-);
-const WsComponentMeta = z.lazy(
-  () => z.object({
-    type: z.enum([
-      "body",
-      "container",
-      "control",
-      "embed",
-      "rich-text",
-      "rich-text-child"
-    ]),
-    label: z.string(),
-    Icon: z.any(),
-    presetStyle: z.optional(z.any()),
-    children: z.optional(z.array(z.string())),
-    props: Props,
-    initialProps: z.optional(z.array(z.string()))
-  })
-);
+import { PropMeta } from "@webstudio-is/generate-arg-types";
+const WsComponentPropsMeta = z.object({
+  props: z.record(PropMeta),
+  initialProps: z.array(z.string()).optional()
+});
+const WsComponentMeta = z.object({
+  type: z.enum([
+    "body",
+    "container",
+    "control",
+    "embed",
+    "rich-text",
+    "rich-text-child"
+  ]),
+  label: z.string(),
+  Icon: z.any(),
+  presetStyle: z.optional(z.any()),
+  children: z.optional(z.array(z.string()))
+});
 export {
-  WsComponentMeta
+  WsComponentMeta,
+  WsComponentPropsMeta
 };

package/lib/components/form.ws.js

@@ -1,4 +1,5 @@
 import { FormIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/form.props.json";
 const presetStyle = {
   minHeight: {
@@ -15,10 +16,12 @@ const meta = {
   type: "container",
   label: "Form",
   Icon: FormIcon,
-  presetStyle,
-  props
+  presetStyle
 };
-var form_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  form_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/heading.ws.js

@@ -1,13 +1,17 @@
 import { HeadingIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/heading.props.json";
 const meta = {
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,
-  children: ["Heading you can edit"],
-  props
+  children: ["Heading you can edit"]
 };
-var heading_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props,
+  initialProps: ["tag"]
+});
 export {
-  heading_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/image.ws.js

@@ -1,4 +1,5 @@
 import { ImageIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/image.props.json";
 const presetStyle = {
   maxWidth: {
@@ -15,11 +16,16 @@ const meta = {
   type: "embed",
   label: "Image",
   Icon: ImageIcon,
-  presetStyle,
-  props,
-  initialProps: ["src", "width", "height", "alt", "loading"]
+  presetStyle
 };
-var image_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props: {
+    ...props,
+    src: { ...props.src, control: "file-image", name: "Source" }
+  },
+  initialProps: ["src", "width", "height", "alt", "loading"]
+});
 export {
-  image_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/index.js

@@ -1,19 +1,36 @@
-import BodyMeta from "./body.ws";
-import BoxMeta from "./box.ws";
-import TextBlockMeta from "./text-block.ws";
-import HeadingMeta from "./heading.ws";
-import ParagraphMeta from "./paragraph.ws";
-import LinkMeta from "./link.ws";
-import RichTextLinkMeta from "./rich-text-link.ws";
-import SpanMeta from "./span.ws";
-import BoldMeta from "./bold.ws";
-import ItalicMeta from "./italic.ws";
-import SuperscriptMeta from "./superscript.ws";
-import SubscriptMeta from "./subscript.ws";
-import ButtonMeta from "./button.ws";
-import InputMeta from "./input.ws";
-import FormMeta from "./form.ws";
-import ImageMeta from "./image.ws";
+import { PropMeta } from "@webstudio-is/generate-arg-types";
+import { meta as BodyMeta } from "./body.ws";
+import { meta as BoxMeta } from "./box.ws";
+import { meta as TextBlockMeta } from "./text-block.ws";
+import { meta as HeadingMeta } from "./heading.ws";
+import { meta as ParagraphMeta } from "./paragraph.ws";
+import { meta as LinkMeta } from "./link.ws";
+import { meta as RichTextLinkMeta } from "./rich-text-link.ws";
+import { meta as SpanMeta } from "./span.ws";
+import { meta as BoldMeta } from "./bold.ws";
+import { meta as ItalicMeta } from "./italic.ws";
+import { meta as SuperscriptMeta } from "./superscript.ws";
+import { meta as SubscriptMeta } from "./subscript.ws";
+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 { propsMeta as BodyMetaPropsMeta } from "./body.ws";
+import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
+import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
+import { propsMeta as HeadingMetaPropsMeta } from "./heading.ws";
+import { propsMeta as ParagraphMetaPropsMeta } from "./paragraph.ws";
+import { propsMeta as LinkMetaPropsMeta } from "./link.ws";
+import { propsMeta as RichTextLinkMetaPropsMeta } from "./rich-text-link.ws";
+import { propsMeta as SpanMetaPropsMeta } from "./span.ws";
+import { propsMeta as BoldMetaPropsMeta } from "./bold.ws";
+import { propsMeta as ItalicMetaPropsMeta } from "./italic.ws";
+import { propsMeta as SuperscriptMetaPropsMeta } from "./superscript.ws";
+import { propsMeta as SubscriptMetaPropsMeta } from "./subscript.ws";
+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";
@@ -30,7 +47,7 @@ import { Button } from "./button";
 import { Input } from "./input";
 import { Form } from "./form";
 import { Image } from "./image";
-const meta = {
+const defaultMetas = {
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -48,7 +65,60 @@ const meta = {
   Form: FormMeta,
   Image: ImageMeta
 };
-const components = {
+let currentMetas = defaultMetas;
+const getComponentMeta = (name) => {
+  return currentMetas[name];
+};
+const registerComponentMetas = (overrides) => {
+  const result = {};
+  for (const name of Object.keys(defaultMetas)) {
+    result[name] = { ...defaultMetas[name], ...overrides[name] };
+  }
+  currentMetas = result;
+};
+const defaultPropsMetas = {
+  Box: BoxMetaPropsMeta,
+  Body: BodyMetaPropsMeta,
+  TextBlock: TextBlockMetaPropsMeta,
+  Heading: HeadingMetaPropsMeta,
+  Paragraph: ParagraphMetaPropsMeta,
+  Link: LinkMetaPropsMeta,
+  RichTextLink: RichTextLinkMetaPropsMeta,
+  Span: SpanMetaPropsMeta,
+  Bold: BoldMetaPropsMeta,
+  Italic: ItalicMetaPropsMeta,
+  Superscript: SuperscriptMetaPropsMeta,
+  Subscript: SubscriptMetaPropsMeta,
+  Button: ButtonMetaPropsMeta,
+  Input: InputMetaPropsMeta,
+  Form: FormMetaPropsMeta,
+  Image: ImageMetaPropsMeta
+};
+let registeredPropsMetas = {};
+let currentPropsMetas = void 0;
+const getComponentPropsMeta = (name) => {
+  if (currentPropsMetas === void 0) {
+    currentPropsMetas = {};
+    for (const name2 of Object.keys(defaultPropsMetas)) {
+      const props = computeProps(
+        defaultPropsMetas[name2],
+        registeredPropsMetas[name2] ?? {}
+      );
+      const initialProps = computeInitialProps(
+        props,
+        defaultPropsMetas[name2],
+        registeredPropsMetas[name2] ?? {}
+      );
+      currentPropsMetas[name2] = { props, initialProps };
+    }
+  }
+  return currentPropsMetas[name];
+};
+const registerComponentPropsMetas = (metas) => {
+  registeredPropsMetas = metas;
+  currentPropsMetas = void 0;
+};
+const defaultComponents = {
   Box,
   Body,
   TextBlock,
@@ -67,8 +137,7 @@ const components = {
   Image
 };
 let registeredComponents = null;
-let registeredComponentsMeta = null;
-const componentNames = Object.keys(components);
+const componentNames = Object.keys(defaultComponents);
 const getComponentNames = () => {
   const uniqueNames = /* @__PURE__ */ new Set([
     ...componentNames,
@@ -76,51 +145,42 @@ const getComponentNames = () => {
   ]);
   return [...uniqueNames.values()];
 };
-const getComponentMeta = (name) => {
-  const componentMeta = meta[name];
-  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
-    return {
-      ...componentMeta,
-      ...registeredComponentsMeta[name]
-    };
-  }
-  return componentMeta;
-};
 const getComponent = (name) => {
-  return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : components[name];
+  return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : defaultComponents[name];
+};
+const registerComponents = (components) => {
+  registeredComponents = components;
 };
-const getComponentMetaProps = (name) => {
-  const componentMeta = meta[name];
-  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
-    const registeredComponentMeta = registeredComponentsMeta[name];
-    const allMetaPropKeys = /* @__PURE__ */ new Set([
-      ...Object.keys(componentMeta?.props ?? {}),
-      ...Object.keys(registeredComponentMeta.props)
-    ]);
-    const props = {};
-    for (const key of allMetaPropKeys.values()) {
-      props[key] = {
-        ...componentMeta?.props[key],
-        ...registeredComponentMeta?.props?.[key],
-        defaultValue: registeredComponentMeta?.props?.[key]?.defaultValue ?? componentMeta?.props[key]?.defaultValue ?? null,
-        required: registeredComponentMeta?.props?.[key]?.required || componentMeta?.props[key]?.required
-      };
+const computeProps = (defaults, overrides) => {
+  if (overrides) {
+    const allNames = (/* @__PURE__ */ new Set([
+      ...Object.keys(defaults.props ?? {}),
+      ...Object.keys(overrides?.props ?? {})
+    ])).values();
+    const result = {};
+    for (const name of allNames) {
+      result[name] = PropMeta.parse({
+        ...defaults.props[name],
+        ...overrides?.props?.[name]
+      });
     }
-    return props;
+    return result;
   }
-  return componentMeta?.props;
-};
-const registerComponents = (components2) => {
-  registeredComponents = components2;
+  return defaults.props;
 };
-const registerComponentsMeta = (componentsMeta) => {
-  registeredComponentsMeta = componentsMeta;
+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
+  ).map(([name]) => name) : [];
+  return [...initialProps, ...requiredProps];
 };
 export {
   getComponent,
   getComponentMeta,
-  getComponentMetaProps,
   getComponentNames,
-  registerComponents,
-  registerComponentsMeta
+  getComponentPropsMeta,
+  registerComponentMetas,
+  registerComponentPropsMetas,
+  registerComponents
 };

package/lib/components/input.ws.js

@@ -1,12 +1,15 @@
 import { InputIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/input.props.json";
 const meta = {
   type: "control",
   label: "Input",
-  Icon: InputIcon,
-  props
+  Icon: InputIcon
 };
-var input_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  input_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/italic.ws.js

@@ -1,4 +1,5 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/italic.props.json";
 const presetStyle = {
   fontStyle: {
@@ -10,10 +11,12 @@ const meta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: FontItalicIcon,
-  presetStyle,
-  props
+  presetStyle
 };
-var italic_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  italic_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/link.ws.js

@@ -1,4 +1,5 @@
 import { Link2Icon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/link.props.json";
 const presetStyle = {
   minHeight: {
@@ -16,10 +17,13 @@ const meta = {
   label: "Link",
   Icon: Link2Icon,
   presetStyle,
-  children: ["Link text you can edit"],
-  props
+  children: ["Link text you can edit"]
 };
-var link_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props,
+  initialProps: ["href"]
+});
 export {
-  link_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/paragraph.ws.js

@@ -1,13 +1,16 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/paragraph.props.json";
 const meta = {
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
-  children: ["Pragraph you can edit"],
-  props
+  children: ["Pragraph you can edit"]
 };
-var paragraph_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  paragraph_ws_default as default
+  meta,
+  propsMeta
 };

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

@@ -1,12 +1,15 @@
 import { Link2Icon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/rich-text-link.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Link",
-  Icon: Link2Icon,
-  props
+  Icon: Link2Icon
 };
-var rich_text_link_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  rich_text_link_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/span.ws.js

@@ -1,12 +1,15 @@
 import { BrushIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/span.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",
-  Icon: BrushIcon,
-  props
+  Icon: BrushIcon
 };
-var span_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  span_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/subscript.ws.js

@@ -1,12 +1,15 @@
 import { SubscriptIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/subscript.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
-  Icon: SubscriptIcon,
-  props
+  Icon: SubscriptIcon
 };
-var subscript_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  subscript_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/components/superscript.ws.js

@@ -1,12 +1,15 @@
 import { SuperscriptIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/superscript.props.json";
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
-  Icon: SuperscriptIcon,
-  props
+  Icon: SuperscriptIcon
 };
-var superscript_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  superscript_ws_default as default
+  meta,
+  propsMeta
 };

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

@@ -1,4 +1,5 @@
 import { TextIcon } from "@webstudio-is/icons";
+import { WsComponentPropsMeta } from "./component-type";
 import props from "./__generated__/text-block.props.json";
 const presetStyle = {
   minHeight: {
@@ -12,10 +13,12 @@ const meta = {
   label: "Text Block",
   Icon: TextIcon,
   presetStyle,
-  children: ["Block of text you can edit"],
-  props
+  children: ["Block of text you can edit"]
 };
-var text_block_ws_default = meta;
+const propsMeta = WsComponentPropsMeta.parse({
+  props
+});
 export {
-  text_block_ws_default as default
+  meta,
+  propsMeta
 };

package/lib/index.js

@@ -5,9 +5,11 @@ export * from "./pubsub";
 export * from "./app";
 import {
   customComponents,
-  customComponentsMeta
+  customComponentMetas,
+  customComponentPropsMetas
 } from "./app/custom-components";
 export {
-  customComponents,
-  customComponentsMeta
+  customComponentMetas,
+  customComponentPropsMetas,
+  customComponents
 };