@webstudio-is/react-sdk 0.9.0 → 0.10.1

package/lib/components/body.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 = "body";
-export const Body = forwardRef((props, ref) => _jsx("body", { ...props, ref: ref }));
+const Body = forwardRef((props, ref) => /* @__PURE__ */ jsx("body", {
+  ...props,
+  ref
+}));
 Body.displayName = "Body";
+export {
+  Body
+};

package/lib/components/body.ws.js

@@ -1,62 +1,62 @@
 import { BodyIcon } from "@webstudio-is/icons";
-import { Body } from "./body";
+import props from "./__generated__/body.props.json";
 const defaultStyle = {
-    marginTop: {
-        type: "unit",
-        unit: "px",
-        value: 0,
-    },
-    marginRight: {
-        type: "unit",
-        unit: "px",
-        value: 0,
-    },
-    marginBottom: {
-        type: "unit",
-        unit: "px",
-        value: 0,
-    },
-    marginLeft: {
-        type: "unit",
-        unit: "px",
-        value: 0,
-    },
-    minHeight: {
-        type: "unit",
-        unit: "%",
-        value: 100,
-    },
-    backgroundColor: {
-        type: "keyword",
-        value: "white",
-    },
-    fontFamily: {
-        type: "keyword",
-        value: "Arial",
-    },
-    fontSize: {
-        type: "unit",
-        unit: "px",
-        value: 14,
-    },
-    lineHeight: {
-        type: "unit",
-        unit: "number",
-        value: 1.5,
-    },
-    color: {
-        type: "keyword",
-        value: "#232323",
-    },
+  marginTop: {
+    type: "unit",
+    unit: "px",
+    value: 0
+  },
+  marginRight: {
+    type: "unit",
+    unit: "px",
+    value: 0
+  },
+  marginBottom: {
+    type: "unit",
+    unit: "px",
+    value: 0
+  },
+  marginLeft: {
+    type: "unit",
+    unit: "px",
+    value: 0
+  },
+  minHeight: {
+    type: "unit",
+    unit: "%",
+    value: 100
+  },
+  backgroundColor: {
+    type: "keyword",
+    value: "white"
+  },
+  fontFamily: {
+    type: "keyword",
+    value: "Arial"
+  },
+  fontSize: {
+    type: "unit",
+    unit: "px",
+    value: 14
+  },
+  lineHeight: {
+    type: "unit",
+    unit: "number",
+    value: 1.5
+  },
+  color: {
+    type: "keyword",
+    value: "#232323"
+  }
 };
 const meta = {
-    Icon: BodyIcon,
-    Component: Body,
-    canAcceptChildren: true,
-    isContentEditable: false,
-    label: "Body",
-    isInlineOnly: false,
-    isListed: false,
-    defaultStyle,
+  type: "body",
+  label: "Body",
+  Icon: BodyIcon,
+  props,
+  defaultStyle
+};
+var body_ws_default = meta;
+export {
+  body_ws_default as default
 };
-export default meta;

package/lib/components/bold.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 = "b";
-export const Bold = forwardRef((props, ref) => _jsx("b", { ...props, ref: ref }));
+const Bold = forwardRef((props, ref) => /* @__PURE__ */ jsx("b", {
+  ...props,
+  ref
+}));
 Bold.displayName = "Bold";
+export {
+  Bold
+};

package/lib/components/bold.ws.js

@@ -1,12 +1,12 @@
 import { FontBoldIcon } from "@webstudio-is/icons";
-import { Bold } from "./bold";
+import props from "./__generated__/bold.props.json";
 const meta = {
-    Icon: FontBoldIcon,
-    Component: Bold,
-    canAcceptChildren: false,
-    isContentEditable: false,
-    label: "Bold Text",
-    isInlineOnly: true,
-    isListed: false,
+  type: "rich-text-child",
+  label: "Bold Text",
+  Icon: FontBoldIcon,
+  props
+};
+var bold_ws_default = meta;
+export {
+  bold_ws_default as default
 };
-export default meta;

package/lib/components/box.js

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

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;