@webstudio-is/react-sdk 0.60.0 → 0.62.0

package/src/components/italic.ws.tsx

@@ -1,19 +1,22 @@
-import type { Style } from "@webstudio-is/css-data";
 import { TextItalicIcon } from "@webstudio-is/icons";
 import type { defaultTag } from "./italic";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 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" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

package/src/components/label.tsx

@@ -0,0 +1,10 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "label";
+
+export const Label = forwardRef<
+  ElementRef<typeof defaultTag>,
+  ComponentProps<typeof defaultTag>
+>((props, ref) => <label {...props} ref={ref} />);
+
+Label.displayName = "Label";

package/src/components/label.ws.tsx

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

package/src/components/link-block.ws.tsx

@@ -1,26 +1,29 @@
-import { BoxLinkIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import { LinkBlockIcon } from "@webstudio-is/icons";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/link-block.props";
 import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import type { defaultTag } from "./link-block";
-import type { Style } from "@webstudio-is/css-data";
 import { a } from "../css/normalize";
 
 const presetStyle = {
-  a: {
+  a: [
     ...a,
-    display: {
-      type: "keyword",
-      value: "inline-block",
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "general",
   type: "container",
   label: "Link Block",
-  Icon: BoxLinkIcon,
+  Icon: LinkBlockIcon,
   states: linkMeta.states,
   presetStyle,
 };

package/src/components/link.ws.tsx

@@ -1,24 +1,26 @@
-import type { Style } from "@webstudio-is/css-data";
 import { LinkIcon } from "@webstudio-is/icons";
 import { a } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./link";
 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" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "general",
@@ -27,7 +29,7 @@ export const meta: WsComponentMeta = {
   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" }],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/list-item.ws.tsx

@@ -1,20 +1,24 @@
-import type { Style } from "@webstudio-is/css-data";
 import { ListItemIcon } from "@webstudio-is/icons";
 import { li } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./list-item";
 import { props } from "./__generated__/list-item.props";
 
 const presetStyle = {
   li,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   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,
 };
 

package/src/components/list.ws.tsx

@@ -1,42 +1,45 @@
 import { ListIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/list.props";
 import type { ListTag } from "./list";
-import type { Style } from "@webstudio-is/css-data";
 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" },
     },
-  },
-} as const satisfies Record<ListTag, Style>;
+  ],
+} satisfies PresetStyle<ListTag>;
 
 export const meta: WsComponentMeta = {
   category: "typography",

package/src/components/paragraph.ws.tsx

@@ -1,20 +1,23 @@
-import type { Style } from "@webstudio-is/css-data";
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
 import { p } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./paragraph";
 import { props } from "./__generated__/paragraph.props";
 
 const presetStyle = {
   p,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
-  children: ["Pragraph you can edit"],
+  children: [{ type: "text", value: "Pragraph you can edit" }],
   presetStyle,
 };
 

package/src/components/radio-button-field.tsx

@@ -0,0 +1,10 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "label";
+
+export const RadioButtonField = forwardRef<
+  ElementRef<typeof defaultTag>,
+  Omit<ComponentProps<typeof defaultTag>, "htmlFor">
+>((props, ref) => <label {...props} ref={ref} />);
+
+RadioButtonField.displayName = "RadioButtonField";

package/src/components/radio-button-field.ws.tsx

@@ -0,0 +1,38 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons";
+import type {
+  WsComponentMeta,
+  WsComponentPropsMeta,
+  PresetStyle,
+} from "./component-meta";
+import { props } from "./__generated__/radio-button-field.props";
+import type { defaultTag } from "./radio-button-field";
+import { label } from "../css/normalize";
+
+const presetStyle = {
+  label: [
+    ...label,
+    { property: "display", value: { type: "keyword", value: "flex" } },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  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" }],
+    },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: [],
+};

package/src/components/radio-button.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "input";
+
+export const RadioButton = forwardRef<
+  ElementRef<typeof defaultTag>,
+  Omit<ComponentProps<typeof defaultTag>, "type">
+  // Make sure children are not passed down to an input, because this will result in error.
+>(({ children: _children, ...props }, ref) => (
+  <input {...props} type="radio" ref={ref} />
+));
+
+RadioButton.displayName = "RadioButton";

package/src/components/radio-button.ws.tsx

@@ -0,0 +1,40 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons";
+import type {
+  WsComponentMeta,
+  WsComponentPropsMeta,
+  PresetStyle,
+} from "./component-meta";
+import type { defaultTag } from "./radio-button";
+import { input } from "../css/normalize";
+import { props } from "./__generated__/radio-button.props";
+
+const presetStyle = {
+  input: [
+    ...input,
+    {
+      property: "marginRight",
+      value: { type: "unit", unit: "em", value: 0.5 },
+    },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  type: "control",
+  label: "Radio Button",
+  Icon: RadioCheckedIcon,
+  presetStyle,
+  states: [
+    { selector: ":checked", label: "Checked" },
+    { 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" },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["name"],
+};

package/src/components/separator.ws.tsx

@@ -1,42 +1,43 @@
 import { DashIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/separator.props";
 import type { defaultTag } from "./separator";
-import type { Style } from "@webstudio-is/css-data";
 import { hr } from "../css/normalize";
 
 const presetStyle = {
-  hr: {
+  hr: [
     ...hr,
 
-    height: {
-      type: "keyword",
-      value: "1px",
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" },
     },
-
-    backgroundColor: {
-      type: "keyword",
-      value: "gray",
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" },
     },
-
-    borderTopStyle: {
-      type: "keyword",
-      value: "none",
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" },
     },
-    borderRightStyle: {
-      type: "keyword",
-      value: "none",
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" },
     },
-    borderLeftStyle: {
-      type: "keyword",
-      value: "none",
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" },
     },
-    borderBottomStyle: {
-      type: "keyword",
-      value: "none",
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "general",

package/src/components/span.ws.tsx

@@ -1,13 +1,16 @@
-import type { Style } from "@webstudio-is/css-data";
 import { PaintBrushIcon } from "@webstudio-is/icons";
 import { span } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./span";
 import { props } from "./__generated__/span.props";
 
 const presetStyle = {
   span,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

package/src/components/subscript.ws.tsx

@@ -1,13 +1,16 @@
-import type { Style } from "@webstudio-is/css-data";
 import { SubscriptIcon } from "@webstudio-is/icons";
 import { sub } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./subscript";
 import { props } from "./__generated__/subscript.props";
 
 const presetStyle = {
   sub,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

package/src/components/success-message.tsx

@@ -0,0 +1,10 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "div";
+
+export const SuccessMessage = forwardRef<
+  ElementRef<typeof defaultTag>,
+  ComponentProps<typeof defaultTag>
+>((props, ref) => <div {...props} ref={ref} />);
+
+SuccessMessage.displayName = "SuccessMessage";

package/src/components/success-message.ws.tsx

@@ -0,0 +1,24 @@
+import { BoxIcon } from "@webstudio-is/icons";
+import type {
+  WsComponentMeta,
+  WsComponentPropsMeta,
+  PresetStyle,
+} from "./component-meta";
+import { props } from "./__generated__/success-message.props";
+import { div } from "../css/normalize";
+
+const presetStyle = {
+  div,
+} satisfies PresetStyle<"div">;
+
+export const meta: WsComponentMeta = {
+  type: "container",
+  label: "Success Message",
+  Icon: BoxIcon,
+  presetStyle,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: [],
+};

package/src/components/superscript.ws.tsx

@@ -1,13 +1,16 @@
-import type { Style } from "@webstudio-is/css-data";
 import { SuperscriptIcon } from "@webstudio-is/icons";
 import { sup } from "../css/normalize";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import type { defaultTag } from "./superscript";
 import { props } from "./__generated__/superscript.props";
 
 const presetStyle = {
   sup,
-} as const satisfies Record<typeof defaultTag, Style>;
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",

package/src/components/text-block.ws.tsx

@@ -1,21 +1,22 @@
 import { TextBlockIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "./component-meta";
 import { props } from "./__generated__/text-block.props";
 import type { defaultTag } from "./text-block";
-import type { Style } from "@webstudio-is/css-data";
 import { div } from "../css/normalize";
 
 const presetStyle = {
-  div: {
+  div: [
     ...div,
-
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 },
     },
-  },
-} as const satisfies Record<typeof defaultTag, Style>;
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "typography",
@@ -23,7 +24,7 @@ export const meta: WsComponentMeta = {
   label: "Text Block",
   Icon: TextBlockIcon,
   presetStyle,
-  children: ["Block of text you can edit"],
+  children: [{ type: "text", value: "Block of text you can edit" }],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/textarea.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "textarea";
+
+export const Textarea = forwardRef<
+  ElementRef<typeof defaultTag>,
+  ComponentProps<typeof defaultTag>
+  // Make sure children are not passed down to an textarea, because this will result in error.
+>(({ children: _children, ...props }, ref) => (
+  <textarea {...props} ref={ref} />
+));
+
+Textarea.displayName = "Textarea";