@webstudio-is/react-sdk 0.8.0 → 0.10.0

package/lib/components/box.ws.js

@@ -1,19 +1,19 @@
 import { SquareIcon } from "@webstudio-is/icons";
-import { Box } from "./box";
+import props from "./__generated__/box.props.json";
 const defaultStyle = {
-    boxSizing: {
-        type: "keyword",
-        value: "border-box",
-    },
+  boxSizing: {
+    type: "keyword",
+    value: "border-box"
+  }
 };
 const meta = {
-    Icon: SquareIcon,
-    Component: Box,
-    defaultStyle,
-    canAcceptChildren: true,
-    isContentEditable: false,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Box",
+  type: "container",
+  label: "Box",
+  Icon: SquareIcon,
+  defaultStyle,
+  props
+};
+var box_ws_default = meta;
+export {
+  box_ws_default as default
 };
-export default meta;

package/lib/components/button.js

@@ -1,8 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "button";
-export const Button = forwardRef((props, ref) => _jsx("button", { ...props, ref: ref }));
+const Button = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx("button", {
+    ...props,
+    ref
+  })
+);
 Button.defaultProps = {
-    type: "submit", // Match the platform default
+  type: "submit"
 };
 Button.displayName = "Button";
+export {
+  Button
+};

package/lib/components/button.ws.js

@@ -1,13 +1,13 @@
 import { ButtonIcon } from "@webstudio-is/icons";
-import { Button } from "./button";
+import props from "./__generated__/button.props.json";
 const meta = {
-    Icon: ButtonIcon,
-    Component: Button,
-    canAcceptChildren: false,
-    isContentEditable: true,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Button",
-    children: ["Button text you can edit"],
+  type: "rich-text",
+  label: "Button",
+  Icon: ButtonIcon,
+  children: ["Button text you can edit"],
+  props
+};
+var button_ws_default = meta;
+export {
+  button_ws_default as default
 };
-export default meta;

package/lib/components/component-type.js

@@ -1,25 +1,58 @@
 import { z } from "zod";
-export const WsComponentMeta = z.lazy(() => z
-    .object({
-    Component: z.any(),
+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(),
     defaultStyle: z.optional(z.any()),
-    canAcceptChildren: z.boolean(),
-    isContentEditable: z.boolean(),
-    isInlineOnly: z.boolean(),
-    isListed: z.boolean(),
-    label: z.string(),
     children: z.optional(z.array(z.string())),
-})
-    // We need these restrictions because of the limitation of the current drag&drop implementation.
-    // Its position detection logic will be confused if drop target has `string` children.
-    .refine((val) => val.isContentEditable === false || val.canAcceptChildren === false, {
-    message: "Content editable componetns are not allowed to accept children via drag&drop, because they may have `string` children",
-    path: ["canAcceptChildren"],
-})
-    .refine((val) => val.canAcceptChildren === false ||
-    val.children === undefined ||
-    val.children.every((child) => typeof child !== "string"), {
-    message: "Components that can accept children via drag&drop are not allowed to have `string` children",
-    path: ["children"],
-}));
+    props: Props
+  })
+);
+export {
+  WsComponentMeta
+};

package/lib/components/form.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "form";
-export const Form = forwardRef((props, ref) => _jsx("form", { ...props, ref: ref }));
+const Form = forwardRef((props, ref) => /* @__PURE__ */ jsx("form", {
+  ...props,
+  ref
+}));
 Form.displayName = "Form";
+export {
+  Form
+};

package/lib/components/form.ws.js

@@ -1,24 +1,24 @@
 import { FormIcon } from "@webstudio-is/icons";
-import { Form } from "./form";
+import props from "./__generated__/form.props.json";
 const defaultStyle = {
-    minHeight: {
-        type: "unit",
-        unit: "px",
-        value: 20,
-    },
-    boxSizing: {
-        type: "keyword",
-        value: "border-box",
-    },
+  minHeight: {
+    type: "unit",
+    unit: "px",
+    value: 20
+  },
+  boxSizing: {
+    type: "keyword",
+    value: "border-box"
+  }
 };
 const meta = {
-    Icon: FormIcon,
-    Component: Form,
-    defaultStyle,
-    canAcceptChildren: true,
-    isContentEditable: false,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Form",
+  type: "container",
+  label: "Form",
+  Icon: FormIcon,
+  defaultStyle,
+  props
+};
+var form_ws_default = meta;
+export {
+  form_ws_default as default
 };
-export default meta;

package/lib/components/heading.js

@@ -1,6 +1,14 @@
-import { forwardRef, createElement, } from "react";
+import {
+  forwardRef,
+  createElement
+} from "react";
 const defaultTag = "h1";
-export const Heading = forwardRef(({ tag = defaultTag, ...props }, ref) => {
+const Heading = forwardRef(
+  ({ tag = defaultTag, ...props }, ref) => {
     return createElement(tag, { ...props, ref });
-});
+  }
+);
 Heading.displayName = "Heading";
+export {
+  Heading
+};

package/lib/components/heading.ws.js

@@ -1,13 +1,13 @@
 import { HeadingIcon } from "@webstudio-is/icons";
-import { Heading } from "./heading";
+import props from "./__generated__/heading.props.json";
 const meta = {
-    Icon: HeadingIcon,
-    Component: Heading,
-    canAcceptChildren: false,
-    isContentEditable: true,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Heading",
-    children: ["Heading you can edit"],
+  type: "rich-text",
+  label: "Heading",
+  Icon: HeadingIcon,
+  children: ["Heading you can edit"],
+  props
+};
+var heading_ws_default = meta;
+export {
+  heading_ws_default as default
 };
-export default meta;

package/lib/components/image.js

@@ -1,15 +1,20 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "img";
-export const Image = forwardRef((imageProps, ref) => {
-    return (_jsx("img", { ...imageProps, src: imageProps.src || imagePlaceholderSvg, decoding: "async", ref: ref }));
-});
+const Image = forwardRef(
+  (imageProps, ref) => {
+    return /* @__PURE__ */ jsx("img", {
+      ...imageProps,
+      src: imageProps.src || imagePlaceholderSvg,
+      ref
+    });
+  }
+);
 Image.defaultProps = {
-    src: "",
-    width: "",
-    height: "",
-    loading: "lazy",
-    alt: "",
+  src: "",
+  width: "",
+  height: "",
+  alt: ""
 };
 Image.displayName = "Image";
 const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
@@ -35,3 +40,6 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
     fill="#A2A2A2"
   />
 </svg>`)}`;
+export {
+  Image
+};

package/lib/components/image.ws.js

@@ -1,27 +1,24 @@
 import { ImageIcon } from "@webstudio-is/icons";
-import { Image } from "./image";
+import props from "./__generated__/image.props.json";
 const defaultStyle = {
-    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-    maxWidth: {
-        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",
-    },
+  maxWidth: {
+    type: "unit",
+    unit: "%",
+    value: 100
+  },
+  display: {
+    type: "keyword",
+    value: "block"
+  }
 };
 const meta = {
-    Icon: ImageIcon,
-    Component: Image,
-    canAcceptChildren: false,
-    defaultStyle,
-    isContentEditable: false,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Image",
+  type: "embed",
+  label: "Image",
+  Icon: ImageIcon,
+  defaultStyle,
+  props
+};
+var image_ws_default = meta;
+export {
+  image_ws_default as default
 };
-export default meta;

package/lib/components/index.js

@@ -1,15 +1,120 @@
-export { default as Body } from "./body.ws";
-export { default as Box } from "./box.ws";
-export { default as TextBlock } from "./text-block.ws";
-export { default as Heading } from "./heading.ws";
-export { default as Paragraph } from "./paragraph.ws";
-export { default as Link } from "./link.ws";
-export { default as Span } from "./span.ws";
-export { default as Bold } from "./bold.ws";
-export { default as Italic } from "./italic.ws";
-export { default as Superscript } from "./superscript.ws";
-export { default as Subscript } from "./subscript.ws";
-export { default as Button } from "./button.ws";
-export { default as Input } from "./input.ws";
-export { default as Form } from "./form.ws";
-export { default as Image } from "./image.ws";
+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 { 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";
+const meta = {
+  Box: BoxMeta,
+  Body: BodyMeta,
+  TextBlock: TextBlockMeta,
+  Heading: HeadingMeta,
+  Paragraph: ParagraphMeta,
+  Link: LinkMeta,
+  RichTextLink: RichTextLinkMeta,
+  Span: SpanMeta,
+  Bold: BoldMeta,
+  Italic: ItalicMeta,
+  Superscript: SuperscriptMeta,
+  Subscript: SubscriptMeta,
+  Button: ButtonMeta,
+  Input: InputMeta,
+  Form: FormMeta,
+  Image: ImageMeta
+};
+const components = {
+  Box,
+  Body,
+  TextBlock,
+  Heading,
+  Paragraph,
+  Link,
+  RichTextLink,
+  Span,
+  Bold,
+  Italic,
+  Superscript,
+  Subscript,
+  Button,
+  Input,
+  Form,
+  Image
+};
+let registeredComponents = null;
+let registeredComponentsMeta = null;
+const componentNames = Object.keys(components);
+const getComponentNames = () => {
+  const uniqueNames = /* @__PURE__ */ new Set([
+    ...componentNames,
+    ...Object.keys(registeredComponents || {})
+  ]);
+  return [...uniqueNames.values()];
+};
+const getComponentMeta = (name) => {
+  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
+    return { ...meta[name], ...registeredComponentsMeta[name] };
+  }
+  return meta[name];
+};
+const getComponent = (name) => {
+  return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : components[name];
+};
+const getComponentMetaProps = (name) => {
+  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
+    const allMetaPropKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(meta[name]?.props ?? {}),
+      ...Object.keys(registeredComponentsMeta[name].props)
+    ]);
+    const props = {};
+    for (const key of allMetaPropKeys.values()) {
+      props[key] = {
+        ...meta[name]?.props[key],
+        ...registeredComponentsMeta[name]?.props?.[key],
+        defaultValue: registeredComponentsMeta[name]?.props?.[key]?.defaultValue ?? meta[name]?.props[key]?.defaultValue ?? null,
+        required: registeredComponentsMeta[name]?.props?.[key]?.required || meta[name]?.props[key]?.required
+      };
+    }
+    return props;
+  }
+  return meta[name].props;
+};
+const registerComponents = (components2) => {
+  registeredComponents = components2;
+};
+const registerComponentsMeta = (componentsMeta) => {
+  registeredComponentsMeta = componentsMeta;
+};
+export {
+  getComponent,
+  getComponentMeta,
+  getComponentMetaProps,
+  getComponentNames,
+  registerComponents,
+  registerComponentsMeta
+};

package/lib/components/input.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "input";
-export const Input = forwardRef(({ children: _children, ...props }, ref) => _jsx("input", { ...props, ref: ref }));
+const Input = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", {
+  ...props,
+  ref
+}));
 Input.displayName = "Input";
+export {
+  Input
+};

package/lib/components/input.ws.js

@@ -1,12 +1,12 @@
 import { InputIcon } from "@webstudio-is/icons";
-import { Input } from "./input";
+import props from "./__generated__/input.props.json";
 const meta = {
-    Icon: InputIcon,
-    Component: Input,
-    canAcceptChildren: false,
-    isContentEditable: false,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Input",
+  type: "control",
+  label: "Input",
+  Icon: InputIcon,
+  props
+};
+var input_ws_default = meta;
+export {
+  input_ws_default as default
 };
-export default meta;

package/lib/components/italic.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "i";
-export const Italic = forwardRef((props, ref) => _jsx("i", { ...props, ref: ref }));
+const Italic = forwardRef((props, ref) => /* @__PURE__ */ jsx("i", {
+  ...props,
+  ref
+}));
 Italic.displayName = "Italic";
+export {
+  Italic
+};

package/lib/components/italic.ws.js

@@ -1,19 +1,19 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
-import { Italic } from "./italic";
+import props from "./__generated__/italic.props.json";
 const defaultStyle = {
-    fontStyle: {
-        type: "keyword",
-        value: "italic",
-    },
+  fontStyle: {
+    type: "keyword",
+    value: "italic"
+  }
 };
 const meta = {
-    Icon: FontItalicIcon,
-    Component: Italic,
-    defaultStyle,
-    canAcceptChildren: false,
-    isContentEditable: false,
-    isInlineOnly: true,
-    label: "Italic Text",
-    isListed: false,
+  type: "rich-text-child",
+  label: "Italic Text",
+  Icon: FontItalicIcon,
+  defaultStyle,
+  props
+};
+var italic_ws_default = meta;
+export {
+  italic_ws_default as default
 };
-export default meta;

package/lib/components/link.js

@@ -1,5 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-const defaultTag = "a";
-export const Link = forwardRef(({ href = "", ...props }, ref) => _jsx("a", { ...props, href: href, ref: ref }));
+const Link = forwardRef(
+  ({ href = "", ...props }, ref) => /* @__PURE__ */ jsx("a", {
+    ...props,
+    href,
+    ref
+  })
+);
 Link.displayName = "Link";
+export {
+  Link
+};

package/lib/components/link.ws.js

@@ -1,25 +1,25 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import { Link } from "./link";
+import props from "./__generated__/link.props.json";
 const defaultStyle = {
-    minHeight: {
-        type: "unit",
-        unit: "em",
-        value: 1,
-    },
-    display: {
-        type: "keyword",
-        value: "inline-block",
-    },
+  minHeight: {
+    type: "unit",
+    unit: "em",
+    value: 1
+  },
+  display: {
+    type: "keyword",
+    value: "inline-block"
+  }
 };
 const meta = {
-    Icon: Link2Icon,
-    Component: Link,
-    defaultStyle,
-    canAcceptChildren: false,
-    isContentEditable: true,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Link",
-    children: ["Link text you can edit"],
+  type: "rich-text",
+  label: "Link",
+  Icon: Link2Icon,
+  defaultStyle,
+  children: ["Link text you can edit"],
+  props
+};
+var link_ws_default = meta;
+export {
+  link_ws_default as default
 };
-export default meta;

package/lib/components/paragraph.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "p";
-export const Paragraph = forwardRef((props, ref) => _jsx("p", { ...props, ref: ref }));
+const Paragraph = forwardRef((props, ref) => /* @__PURE__ */ jsx("p", {
+  ...props,
+  ref
+}));
 Paragraph.displayName = "Paragraph";
+export {
+  Paragraph
+};