@webstudio-is/react-sdk 0.60.0 → 0.62.0

package/lib/components/code.ws.js

@@ -2,38 +2,30 @@ import { CodeIcon } from "@webstudio-is/icons";
 import { displayVarNamespace } from "./code";
 import { props } from "./__generated__/code.props";
 import { code } from "../css/normalize";
-const display = {
-  type: "var",
-  value: displayVarNamespace,
-  fallbacks: [
-    {
-      type: "keyword",
-      value: "inline-block"
-    }
-  ]
-};
 const presetStyle = {
-  code: {
+  code: [
     ...code,
-    display,
-    paddingLeft: {
-      type: "unit",
-      value: 0.2,
-      unit: "em"
+    {
+      property: "display",
+      value: {
+        type: "var",
+        value: displayVarNamespace,
+        fallbacks: [{ type: "keyword", value: "inline-block" }]
+      }
     },
-    paddingRight: {
-      type: "unit",
-      value: 0.2,
-      unit: "em"
+    {
+      property: "paddingLeft",
+      value: { type: "unit", value: 0.2, unit: "em" }
+    },
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 0.2, unit: "em" }
     },
-    backgroundColor: {
-      type: "rgb",
-      r: 238,
-      g: 238,
-      b: 238,
-      alpha: 1
+    {
+      property: "backgroundColor",
+      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
@@ -41,7 +33,7 @@ const meta = {
   label: "Code",
   Icon: CodeIcon,
   presetStyle,
-  children: ["Code you can edit"]
+  children: [{ type: "text", value: "Code you can edit" }]
 };
 const propsMeta = {
   props,

package/lib/components/component-meta.js

@@ -1,5 +1,6 @@
 import { z } from "zod";
 import { PropMeta } from "@webstudio-is/generate-arg-types";
+import { WsEmbedTemplate } from "../embed-template";
 const WsComponentPropsMeta = z.object({
   props: z.record(PropMeta),
   initialProps: z.array(z.string()).optional()
@@ -28,11 +29,12 @@ const WsComponentMeta = z.object({
     "rich-text",
     "rich-text-child"
   ]),
+  acceptedParents: z.optional(z.array(z.string())),
   label: z.string(),
   Icon: z.function(),
   presetStyle: z.optional(z.any()),
   states: z.optional(z.array(ComponentState)),
-  children: z.optional(z.array(z.string()))
+  children: z.optional(WsEmbedTemplate)
 });
 export {
   ComponentState,

package/lib/components/components-utils.js

@@ -24,7 +24,15 @@ const componentNames = Object.keys({
   List: 1,
   ListItem: 1,
   Separator: 1,
-  Code: 1
+  Code: 1,
+  Label: 1,
+  SuccessMessage: 1,
+  ErrorMessage: 1,
+  Textarea: 1,
+  RadioButtonField: 1,
+  RadioButton: 1,
+  CheckboxField: 1,
+  Checkbox: 1
 });
 const getComponentNames = () => {
   const uniqueNames = /* @__PURE__ */ new Set([

package/lib/components/components.js

@@ -22,29 +22,45 @@ import { List } from "./list";
 import { ListItem } from "./list-item";
 import { Separator } from "./separator";
 import { Code } from "./code";
+import { Label } from "./label";
+import { SuccessMessage } from "./success-message";
+import { ErrorMessage } from "./error-message";
+import { Textarea } from "./textarea";
+import { RadioButtonField } from "./radio-button-field";
+import { RadioButton } from "./radio-button";
+import { CheckboxField } from "./checkbox-field";
+import { Checkbox } from "./checkbox";
 export {
   Blockquote,
   Body,
   Bold,
   Box,
   Button,
+  Checkbox,
+  CheckboxField,
   Code,
+  ErrorMessage,
   Form,
   Fragment,
   Heading,
   Image,
   Input,
   Italic,
+  Label,
   Link,
   LinkBlock,
   List,
   ListItem,
   Paragraph,
+  RadioButton,
+  RadioButtonField,
   RichTextLink,
   Separator,
   Slot,
   Span,
   Subscript,
+  SuccessMessage,
   Superscript,
-  TextBlock
+  TextBlock,
+  Textarea
 };

package/lib/components/error-message.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "div";
+const ErrorMessage = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", { ...props, ref }));
+ErrorMessage.displayName = "ErrorMessage";
+export {
+  ErrorMessage,
+  defaultTag
+};

package/lib/components/error-message.ws.js

@@ -0,0 +1,20 @@
+import { BoxIcon } from "@webstudio-is/icons";
+import { props } from "./__generated__/error-message.props";
+import { div } from "../css/normalize";
+const presetStyle = {
+  div
+};
+const meta = {
+  type: "container",
+  label: "Error Message",
+  Icon: BoxIcon,
+  presetStyle
+};
+const propsMeta = {
+  props,
+  initialProps: []
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/form.js

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

package/lib/components/form.ws.js

@@ -2,24 +2,50 @@ import { FormIcon } from "@webstudio-is/icons";
 import { form } from "../css/normalize";
 import { props } from "./__generated__/form.props";
 const presetStyle = {
-  form: {
+  form: [
     ...form,
-    minHeight: {
-      type: "unit",
-      unit: "px",
-      value: 20
-    }
-  }
+    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
+  ]
 };
 const meta = {
   category: "forms",
   type: "container",
   label: "Form",
   Icon: FormIcon,
-  presetStyle
+  presetStyle,
+  children: [
+    {
+      type: "instance",
+      component: "Label",
+      children: [{ type: "text", value: "Name" }]
+    },
+    {
+      type: "instance",
+      component: "Input",
+      props: [{ type: "string", name: "name", value: "name" }],
+      children: []
+    },
+    {
+      type: "instance",
+      component: "Label",
+      children: [{ type: "text", value: "Email" }]
+    },
+    {
+      type: "instance",
+      component: "Input",
+      props: [{ type: "string", name: "email", value: "email" }],
+      children: []
+    },
+    {
+      type: "instance",
+      component: "Button",
+      children: [{ type: "text", value: "Submit" }]
+    }
+  ]
 };
 const propsMeta = {
-  props
+  props,
+  initialProps: []
 };
 export {
   meta,

package/lib/components/heading.ws.js

@@ -14,7 +14,7 @@ const meta = {
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,
-  children: ["Heading you can edit"],
+  children: [{ type: "text", value: "Heading you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/components/image.ws.js

@@ -2,21 +2,20 @@ import { ImageIcon } from "@webstudio-is/icons";
 import { img } from "../css/normalize";
 import { props } from "./__generated__/image.props";
 const presetStyle = {
-  img: {
+  img: [
     ...img,
     // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-    maxWidth: {
-      type: "unit",
-      unit: "%",
-      value: 100
+    {
+      property: "maxWidth",
+      value: { 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"
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "media",

package/lib/components/index.js

@@ -23,6 +23,14 @@ import { meta as ListMeta } from "./list.ws";
 import { meta as ListItemMeta } from "./list-item.ws";
 import { meta as SeparatorMeta } from "./separator.ws";
 import { meta as CodeMeta } from "./code.ws";
+import { meta as LabelMeta } from "./label.ws";
+import { meta as SuccessMessageMeta } from "./success-message.ws";
+import { meta as ErrorMessageMeta } from "./error-message.ws";
+import { meta as TextareaMeta } from "./textarea.ws";
+import { meta as RadioButtonFieldMeta } from "./radio-button-field.ws";
+import { meta as RadioButtonMeta } from "./radio-button.ws";
+import { meta as CheckboxFieldMeta } from "./checkbox-field.ws";
+import { meta as CheckboxMeta } from "./checkbox.ws";
 import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
 import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
@@ -47,6 +55,14 @@ import { propsMeta as ListPropsMeta } from "./list.ws";
 import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
 import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
 import { propsMeta as CodePropsMeta } from "./code.ws";
+import { propsMeta as LabelPropsMeta } from "./label.ws";
+import { propsMeta as SuccessMessagePropsMeta } from "./success-message.ws";
+import { propsMeta as ErrorMessagePropsMeta } from "./error-message.ws";
+import { propsMeta as TextareaPropsMeta } from "./textarea.ws";
+import { propsMeta as RadioButtonFieldPropsMeta } from "./radio-button-field.ws";
+import { propsMeta as RadioButtonPropsMeta } from "./radio-button.ws";
+import { propsMeta as CheckboxFieldPropsMeta } from "./checkbox-field.ws";
+import { propsMeta as CheckboxPropsMeta } from "./checkbox.ws";
 const defaultMetas = {
   Slot: SlotMeta,
   Fragment: FragmentMeta,
@@ -71,7 +87,15 @@ const defaultMetas = {
   List: ListMeta,
   ListItem: ListItemMeta,
   Separator: SeparatorMeta,
-  Code: CodeMeta
+  Code: CodeMeta,
+  Label: LabelMeta,
+  SuccessMessage: SuccessMessageMeta,
+  ErrorMessage: ErrorMessageMeta,
+  Textarea: TextareaMeta,
+  RadioButtonField: RadioButtonFieldMeta,
+  RadioButton: RadioButtonMeta,
+  CheckboxField: CheckboxFieldMeta,
+  Checkbox: CheckboxMeta
 };
 let currentMetas = defaultMetas;
 const getComponentMeta = (name) => {
@@ -108,7 +132,15 @@ const defaultPropsMetasRaw = {
   List: ListPropsMeta,
   ListItem: ListItemPropsMeta,
   Separator: SeparatorPropsMeta,
-  Code: CodePropsMeta
+  Code: CodePropsMeta,
+  Label: LabelPropsMeta,
+  SuccessMessage: SuccessMessagePropsMeta,
+  ErrorMessage: ErrorMessagePropsMeta,
+  Textarea: TextareaPropsMeta,
+  RadioButtonField: RadioButtonFieldPropsMeta,
+  RadioButton: RadioButtonPropsMeta,
+  CheckboxField: CheckboxFieldPropsMeta,
+  Checkbox: CheckboxPropsMeta
 };
 const defaultPropsMetas = defaultPropsMetasRaw;
 let registeredPropsMetas = {};
@@ -163,7 +195,16 @@ const computeInitialProps = (props, defaults, overrides) => {
   ).map(([name]) => name) : [];
   return [...initialProps, ...requiredProps];
 };
+const canAcceptComponent = (parentComponent, childComponent) => {
+  const parentMeta = getComponentMeta(parentComponent);
+  const childMeta = getComponentMeta(childComponent);
+  if (parentMeta?.type !== "container" || childMeta === void 0) {
+    return false;
+  }
+  return childMeta.acceptedParents === void 0 || childMeta.acceptedParents.includes(parentComponent);
+};
 export {
+  canAcceptComponent,
   getComponentMeta,
   getComponentPropsMeta,
   registerComponentMetas,

package/lib/components/input.ws.js

@@ -7,12 +7,24 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "control",
-  label: "Input",
+  label: "Text Field",
   Icon: FormTextFieldIcon,
-  presetStyle
+  presetStyle,
+  states: [
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ]
 };
 const propsMeta = {
-  props
+  props,
+  initialProps: ["name", "type", "placeholder", "required", "autoFocus"]
 };
 export {
   meta,

package/lib/components/italic.ws.js

@@ -2,13 +2,13 @@ import { TextItalicIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/italic.props";
 import { i } from "../css/normalize";
 const presetStyle = {
-  i: {
+  i: [
     ...i,
-    fontStyle: {
-      type: "keyword",
-      value: "italic"
+    {
+      property: "fontStyle",
+      value: { type: "keyword", value: "italic" }
     }
-  }
+  ]
 };
 const meta = {
   type: "rich-text-child",

package/lib/components/label.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "label";
+const Label = forwardRef((props, ref) => /* @__PURE__ */ jsx("label", { ...props, ref }));
+Label.displayName = "Label";
+export {
+  Label,
+  defaultTag
+};

package/lib/components/label.ws.js

@@ -0,0 +1,34 @@
+import { TextBlockIcon } from "@webstudio-is/icons";
+import { props } from "./__generated__/label.props";
+import { label } from "../css/normalize";
+const presetStyle = {
+  label: [
+    ...label,
+    { property: "display", value: { type: "keyword", value: "block" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "rich-text",
+  label: "Input Label",
+  Icon: TextBlockIcon,
+  presetStyle,
+  children: [{ type: "text", value: "Form Label" }]
+};
+const propsMeta = {
+  props: {
+    ...props,
+    htmlFor: {
+      required: false,
+      control: "text",
+      type: "string",
+      rows: 0,
+      label: "For"
+    }
+  },
+  initialProps: ["htmlFor"]
+};
+export {
+  meta,
+  propsMeta
+};

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

@@ -1,21 +1,21 @@
-import { BoxLinkIcon } from "@webstudio-is/icons";
+import { LinkBlockIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/link-block.props";
 import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import { a } from "../css/normalize";
 const presetStyle = {
-  a: {
+  a: [
     ...a,
-    display: {
-      type: "keyword",
-      value: "inline-block"
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
   type: "container",
   label: "Link Block",
-  Icon: BoxLinkIcon,
+  Icon: LinkBlockIcon,
   states: linkMeta.states,
   presetStyle
 };

package/lib/components/link.ws.js

@@ -2,18 +2,17 @@ import { LinkIcon } from "@webstudio-is/icons";
 import { a } from "../css/normalize";
 import { props } from "./__generated__/link.props";
 const presetStyle = {
-  a: {
+  a: [
     ...a,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
     },
-    display: {
-      type: "keyword",
-      value: "inline-block"
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",
@@ -22,7 +21,7 @@ const meta = {
   Icon: LinkIcon,
   presetStyle,
   states: [{ selector: "[aria-current=page]", label: "Current page" }],
-  children: ["Link text you can edit"]
+  children: [{ type: "text", value: "Link text you can edit" }]
 };
 const propsMeta = {
   props: {

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

@@ -7,9 +7,10 @@ const presetStyle = {
 const meta = {
   category: "typography",
   type: "rich-text",
+  acceptedParents: ["List"],
   label: "List Item",
   Icon: ListItemIcon,
-  children: ["List Item you can edit"],
+  children: [{ type: "text", value: "List Item you can edit" }],
   presetStyle
 };
 const propsMeta = {

package/lib/components/list.ws.js

@@ -2,36 +2,36 @@ import { ListIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/list.props";
 import { ol, ul } from "../css/normalize";
 const presetStyle = {
-  ol: {
+  ol: [
     ...ol,
-    marginTop: {
-      type: "keyword",
-      value: "0"
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px"
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px"
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
     }
-  },
-  ul: {
+  ],
+  ul: [
     ...ul,
-    marginTop: {
-      type: "keyword",
-      value: "0"
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
     },
-    marginBottom: {
-      type: "keyword",
-      value: "10px"
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
     },
-    paddingLeft: {
-      type: "keyword",
-      value: "40px"
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",

package/lib/components/paragraph.ws.js

@@ -9,7 +9,7 @@ const meta = {
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
-  children: ["Pragraph you can edit"],
+  children: [{ type: "text", value: "Pragraph you can edit" }],
   presetStyle
 };
 const propsMeta = {

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

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "label";
+const RadioButtonField = forwardRef((props, ref) => /* @__PURE__ */ jsx("label", { ...props, ref }));
+RadioButtonField.displayName = "RadioButtonField";
+export {
+  RadioButtonField,
+  defaultTag
+};

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

@@ -0,0 +1,33 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { props } from "./__generated__/radio-button-field.props";
+import { label } from "../css/normalize";
+const presetStyle = {
+  label: [
+    ...label,
+    { property: "display", value: { type: "keyword", value: "flex" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "container",
+  label: "Radio Button Field",
+  Icon: RadioCheckedIcon,
+  presetStyle,
+  children: [
+    { type: "instance", component: "RadioButton", props: [], children: [] },
+    {
+      type: "instance",
+      component: "TextBlock",
+      props: [],
+      children: [{ type: "text", value: "Radio" }]
+    }
+  ]
+};
+const propsMeta = {
+  props,
+  initialProps: []
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/radio-button.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "input";
+const RadioButton = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, type: "radio", ref }));
+RadioButton.displayName = "RadioButton";
+export {
+  RadioButton,
+  defaultTag
+};