@webstudio-is/react-sdk 0.9.0 → 0.10.1

package/lib/cjs/components/body.cjs

@@ -1,8 +1,31 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Body = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var body_exports = {};
+__export(body_exports, {
+  Body: () => Body
+});
+module.exports = __toCommonJS(body_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 const defaultTag = "body";
-exports.Body = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("body", { ...props, ref: ref }));
-exports.Body.displayName = "Body";
+const Body = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("body", {
+  ...props,
+  ref
+}));
+Body.displayName = "Body";

package/lib/cjs/components/body.ws.cjs

@@ -1,64 +1,88 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const icons_1 = require("@webstudio-is/icons");
-const body_1 = require("./body");
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var body_ws_exports = {};
+__export(body_ws_exports, {
+  default: () => body_ws_default
+});
+module.exports = __toCommonJS(body_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_body_props = __toESM(require("./__generated__/body.props.json"), 1);
 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: icons_1.BodyIcon,
-    Component: body_1.Body,
-    canAcceptChildren: true,
-    isContentEditable: false,
-    label: "Body",
-    isInlineOnly: false,
-    isListed: false,
-    defaultStyle,
+  type: "body",
+  label: "Body",
+  Icon: import_icons.BodyIcon,
+  props: import_body_props.default,
+  defaultStyle
 };
-exports.default = meta;
+var body_ws_default = meta;

package/lib/cjs/components/bold.cjs

@@ -1,8 +1,31 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Bold = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var bold_exports = {};
+__export(bold_exports, {
+  Bold: () => Bold
+});
+module.exports = __toCommonJS(bold_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 const defaultTag = "b";
-exports.Bold = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("b", { ...props, ref: ref }));
-exports.Bold.displayName = "Bold";
+const Bold = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", {
+  ...props,
+  ref
+}));
+Bold.displayName = "Bold";

package/lib/cjs/components/bold.ws.cjs

@@ -1,14 +1,38 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const icons_1 = require("@webstudio-is/icons");
-const bold_1 = require("./bold");
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var bold_ws_exports = {};
+__export(bold_ws_exports, {
+  default: () => bold_ws_default
+});
+module.exports = __toCommonJS(bold_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_bold_props = __toESM(require("./__generated__/bold.props.json"), 1);
 const meta = {
-    Icon: icons_1.FontBoldIcon,
-    Component: bold_1.Bold,
-    canAcceptChildren: false,
-    isContentEditable: false,
-    label: "Bold Text",
-    isInlineOnly: true,
-    isListed: false,
+  type: "rich-text-child",
+  label: "Bold Text",
+  Icon: import_icons.FontBoldIcon,
+  props: import_bold_props.default
 };
-exports.default = meta;
+var bold_ws_default = meta;

package/lib/cjs/components/box.cjs

@@ -1,9 +1,31 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Box = void 0;
-const react_1 = require("react");
-const defaultTag = "div";
-exports.Box = (0, react_1.forwardRef)(({ tag = defaultTag, ...props }, ref) => {
-    return (0, react_1.createElement)(tag, { ...props, ref });
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var box_exports = {};
+__export(box_exports, {
+  Box: () => Box
 });
-exports.Box.displayName = "Box";
+module.exports = __toCommonJS(box_exports);
+var import_react = require("react");
+const defaultTag = "div";
+const Box = (0, import_react.forwardRef)(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return (0, import_react.createElement)(tag, { ...props, ref });
+  }
+);
+Box.displayName = "Box";

package/lib/cjs/components/box.ws.cjs

@@ -1,21 +1,45 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const icons_1 = require("@webstudio-is/icons");
-const box_1 = require("./box");
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var box_ws_exports = {};
+__export(box_ws_exports, {
+  default: () => box_ws_default
+});
+module.exports = __toCommonJS(box_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_box_props = __toESM(require("./__generated__/box.props.json"), 1);
 const defaultStyle = {
-    boxSizing: {
-        type: "keyword",
-        value: "border-box",
-    },
+  boxSizing: {
+    type: "keyword",
+    value: "border-box"
+  }
 };
 const meta = {
-    Icon: icons_1.SquareIcon,
-    Component: box_1.Box,
-    defaultStyle,
-    canAcceptChildren: true,
-    isContentEditable: false,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Box",
+  type: "container",
+  label: "Box",
+  Icon: import_icons.SquareIcon,
+  defaultStyle,
+  props: import_box_props.default
 };
-exports.default = meta;
+var box_ws_default = meta;

package/lib/cjs/components/button.cjs

@@ -1,11 +1,36 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 const defaultTag = "button";
-exports.Button = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("button", { ...props, ref: ref }));
-exports.Button.defaultProps = {
-    type: "submit", // Match the platform default
+const Button = (0, import_react.forwardRef)(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+    ...props,
+    ref
+  })
+);
+Button.defaultProps = {
+  type: "submit"
 };
-exports.Button.displayName = "Button";
+Button.displayName = "Button";

package/lib/cjs/components/button.ws.cjs

@@ -1,15 +1,39 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const icons_1 = require("@webstudio-is/icons");
-const button_1 = require("./button");
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var button_ws_exports = {};
+__export(button_ws_exports, {
+  default: () => button_ws_default
+});
+module.exports = __toCommonJS(button_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_button_props = __toESM(require("./__generated__/button.props.json"), 1);
 const meta = {
-    Icon: icons_1.ButtonIcon,
-    Component: button_1.Button,
-    canAcceptChildren: false,
-    isContentEditable: true,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Button",
-    children: ["Button text you can edit"],
+  type: "rich-text",
+  label: "Button",
+  Icon: import_icons.ButtonIcon,
+  children: ["Button text you can edit"],
+  props: import_button_props.default
 };
-exports.default = meta;
+var button_ws_default = meta;

package/lib/cjs/components/component-type.cjs

@@ -1,28 +1,78 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WsComponentMeta = void 0;
-const zod_1 = require("zod");
-exports.WsComponentMeta = zod_1.z.lazy(() => zod_1.z
-    .object({
-    Component: zod_1.z.any(),
-    Icon: zod_1.z.any(),
-    defaultStyle: zod_1.z.optional(zod_1.z.any()),
-    canAcceptChildren: zod_1.z.boolean(),
-    isContentEditable: zod_1.z.boolean(),
-    isInlineOnly: zod_1.z.boolean(),
-    isListed: zod_1.z.boolean(),
-    label: zod_1.z.string(),
-    children: zod_1.z.optional(zod_1.z.array(zod_1.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"],
-}));
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var component_type_exports = {};
+__export(component_type_exports, {
+  WsComponentMeta: () => WsComponentMeta
+});
+module.exports = __toCommonJS(component_type_exports);
+var import_zod = require("zod");
+const Props = import_zod.z.record(
+  import_zod.z.union([
+    import_zod.z.object({
+      type: import_zod.z.literal("number"),
+      required: import_zod.z.boolean(),
+      defaultValue: import_zod.z.number().nullable()
+    }),
+    import_zod.z.object({
+      type: import_zod.z.literal("text"),
+      required: import_zod.z.boolean(),
+      defaultValue: import_zod.z.string().nullable()
+    }),
+    import_zod.z.object({
+      type: import_zod.z.literal("color"),
+      required: import_zod.z.boolean(),
+      defaultValue: import_zod.z.string().nullable()
+    }),
+    import_zod.z.object({
+      type: import_zod.z.literal("boolean"),
+      required: import_zod.z.boolean(),
+      defaultValue: import_zod.z.boolean().nullable()
+    }),
+    import_zod.z.object({
+      type: import_zod.z.enum([
+        "radio",
+        "inline-radio",
+        "check",
+        "inline-check",
+        "multi-select",
+        "select"
+      ]),
+      required: import_zod.z.boolean(),
+      options: import_zod.z.array(import_zod.z.string()),
+      defaultValue: import_zod.z.string().nullable()
+    })
+  ])
+);
+const WsComponentMeta = import_zod.z.lazy(
+  () => import_zod.z.object({
+    type: import_zod.z.enum([
+      "body",
+      "container",
+      "control",
+      "embed",
+      "rich-text",
+      "rich-text-child"
+    ]),
+    label: import_zod.z.string(),
+    Icon: import_zod.z.any(),
+    defaultStyle: import_zod.z.optional(import_zod.z.any()),
+    children: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
+    props: Props
+  })
+);

package/lib/cjs/components/form.cjs

@@ -1,8 +1,31 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Form = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var form_exports = {};
+__export(form_exports, {
+  Form: () => Form
+});
+module.exports = __toCommonJS(form_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 const defaultTag = "form";
-exports.Form = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("form", { ...props, ref: ref }));
-exports.Form.displayName = "Form";
+const Form = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
+  ...props,
+  ref
+}));
+Form.displayName = "Form";