@webstudio-is/react-sdk 0.61.0 → 0.63.0

package/src/components/code.ws.tsx

@@ -1,8 +1,9 @@
 import { CodeIcon } from "@webstudio-is/icons";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { type defaultTag, displayVarNamespace } from "./code";
 import { props } from "./__generated__/code.props";
@@ -39,6 +40,7 @@ export const meta: WsComponentMeta = {
   type: "rich-text",
   label: "Code",
   Icon: CodeIcon,
+  states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }],
 };

package/src/components/component-meta.ts

@@ -25,13 +25,24 @@ export const componentCategories = [
   "forms",
 ] as const;
 
+export const stateCategories = ["states", "component-states"] as const;
+
 export const ComponentState = z.object({
+  category: z.enum(stateCategories).optional(),
   selector: z.string(),
   label: z.string(),
 });
 
 export type ComponentState = z.infer<typeof ComponentState>;
 
+export const defaultStates: ComponentState[] = [
+  { selector: ":hover", label: "Hover" },
+  { selector: ":active", label: "Active" },
+  { selector: ":focus", label: "Focus" },
+  { selector: ":focus-visible", label: "Focus Visible" },
+  { selector: ":focus-within", label: "Focus Within" },
+];
+
 const WsComponentMeta = z.object({
   category: z.enum(componentCategories).optional(),
   // container - can accept other components with dnd
@@ -46,6 +57,7 @@ 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()),

package/src/components/components-utils.ts

@@ -1,3 +1,4 @@
+import type { forwardRef } from "react";
 import * as components from "./components";
 import { registeredComponents } from "./index";
 
@@ -34,6 +35,14 @@ const componentNames = Object.keys({
   ListItem: 1,
   Separator: 1,
   Code: 1,
+  Label: 1,
+  SuccessMessage: 1,
+  ErrorMessage: 1,
+  Textarea: 1,
+  RadioButtonField: 1,
+  RadioButton: 1,
+  CheckboxField: 1,
+  Checkbox: 1,
 } satisfies { [K in keyof typeof components]: 1 }) as Array<
   keyof typeof components
 >;
@@ -47,17 +56,16 @@ export const getComponentNames = (): ComponentName[] => {
   return Array.from(uniqueNames) as ComponentName[];
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponent = ReturnType<typeof forwardRef<any, any>>;
+
 /**
  * Now used only in builder app
  * @todo Consider using the same approach in the builder app as in the published apps . A dynamic import is needed
  */
-export const getComponent = (
-  name: string
-): undefined | (typeof components)[ComponentName] => {
+export const getComponent = (name: string): undefined | AnyComponent => {
   return registeredComponents != null && name in registeredComponents
-    ? (registeredComponents[
-        name as ComponentName
-      ] as (typeof components)[ComponentName])
+    ? (registeredComponents[name as ComponentName] as AnyComponent)
     : components[name as ComponentName];
 };
 
@@ -68,11 +76,9 @@ export const getComponent = (
  * see example /packages/sdk-size-test/app/routes/$.tsx
  **/
 export const createGetComponent = (comps: Partial<typeof components>) => {
-  return (name: string) => {
+  return (name: string): undefined | AnyComponent => {
     return registeredComponents != null && name in registeredComponents
-      ? (registeredComponents[
-          name as ComponentName
-        ] as (typeof components)[ComponentName])
+      ? (registeredComponents[name as ComponentName] as AnyComponent)
       : comps[name as ComponentName];
   };
 };

package/src/components/components.ts

@@ -29,3 +29,11 @@ export { List } from "./list";
 export { ListItem } from "./list-item";
 export { Separator } from "./separator";
 export { Code } from "./code";
+export { Label } from "./label";
+export { SuccessMessage } from "./success-message";
+export { ErrorMessage } from "./error-message";
+export { Textarea } from "./textarea";
+export { RadioButtonField } from "./radio-button-field";
+export { RadioButton } from "./radio-button";
+export { CheckboxField } from "./checkbox-field";
+export { Checkbox } from "./checkbox";

package/src/components/error-message.tsx

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

package/src/components/error-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__/error-message.props";
+import { div } from "../css/normalize";
+
+const presetStyle = {
+  div,
+} satisfies PresetStyle<"div">;
+
+export const meta: WsComponentMeta = {
+  type: "container",
+  label: "Error Message",
+  Icon: BoxIcon,
+  presetStyle,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: [],
+};

package/src/components/form.tsx

@@ -5,6 +5,10 @@ export const defaultTag = "form";
 export const Form = forwardRef<
   ElementRef<typeof defaultTag>,
   ComponentProps<typeof defaultTag>
->((props, ref) => <form {...props} ref={ref} />);
+>(({ children, ...props }, ref) => (
+  <form {...props} ref={ref}>
+    {children}
+  </form>
+));
 
 Form.displayName = "Form";

package/src/components/form.ws.tsx

@@ -1,9 +1,10 @@
 import { FormIcon } from "@webstudio-is/icons";
 import { form } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./form";
 import { props } from "./__generated__/form.props";
@@ -11,10 +12,7 @@ import { props } from "./__generated__/form.props";
 const presetStyle = {
   form: [
     ...form,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "px", value: 20 },
-    },
+    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } },
   ],
 } satisfies PresetStyle<typeof defaultTag>;
 
@@ -23,9 +21,31 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "Form",
   Icon: FormIcon,
+  states: defaultStates,
   presetStyle,
   children: [
-    { type: "instance", component: "Input", 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",
@@ -36,4 +56,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
+  initialProps: [],
 };

package/src/components/heading.ws.tsx

@@ -1,10 +1,11 @@
 import { HeadingIcon } from "@webstudio-is/icons";
 import type { ComponentProps } from "react";
 import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { Heading } from "./heading";
 import { props } from "./__generated__/heading.props";
@@ -26,6 +27,7 @@ export const meta: WsComponentMeta = {
   label: "Heading",
   Icon: HeadingIcon,
   children: [{ type: "text", value: "Heading you can edit" }],
+  states: defaultStates,
   presetStyle,
 };
 

package/src/components/image.ws.tsx

@@ -1,9 +1,10 @@
 import { ImageIcon } from "@webstudio-is/icons";
 import { img } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./image";
 import { props } from "./__generated__/image.props";
@@ -31,6 +32,7 @@ export const meta: WsComponentMeta = {
   type: "embed",
   label: "Image",
   Icon: ImageIcon,
+  states: defaultStates,
   presetStyle,
 };
 

package/src/components/index.ts

@@ -25,6 +25,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";
 
 // these are huge JSON objects that we want to be tree-shaken when not used!
 import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
@@ -51,6 +59,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";
 
 // @todo this list should not be hardcoded!
 const defaultMetas: Record<string, WsComponentMeta> = {
@@ -78,6 +94,14 @@ const defaultMetas: Record<string, WsComponentMeta> = {
   ListItem: ListItemMeta,
   Separator: SeparatorMeta,
   Code: CodeMeta,
+  Label: LabelMeta,
+  SuccessMessage: SuccessMessageMeta,
+  ErrorMessage: ErrorMessageMeta,
+  Textarea: TextareaMeta,
+  RadioButtonField: RadioButtonFieldMeta,
+  RadioButton: RadioButtonMeta,
+  CheckboxField: CheckboxFieldMeta,
+  Checkbox: CheckboxMeta,
 };
 
 let currentMetas = defaultMetas;
@@ -122,6 +146,14 @@ const defaultPropsMetasRaw = {
   ListItem: ListItemPropsMeta,
   Separator: SeparatorPropsMeta,
   Code: CodePropsMeta,
+  Label: LabelPropsMeta,
+  SuccessMessage: SuccessMessagePropsMeta,
+  ErrorMessage: ErrorMessagePropsMeta,
+  Textarea: TextareaPropsMeta,
+  RadioButtonField: RadioButtonFieldPropsMeta,
+  RadioButton: RadioButtonPropsMeta,
+  CheckboxField: CheckboxFieldPropsMeta,
+  Checkbox: CheckboxPropsMeta,
 } as const;
 
 const defaultPropsMetas: Record<string, WsComponentPropsMeta> =
@@ -219,3 +251,18 @@ const computeInitialProps = (
   // order of initialProps must be preserved
   return [...initialProps, ...requiredProps];
 };
+
+export const canAcceptComponent = (
+  parentComponent: string,
+  childComponent: string
+) => {
+  const parentMeta = getComponentMeta(parentComponent);
+  const childMeta = getComponentMeta(childComponent);
+  if (parentMeta?.type !== "container" || childMeta === undefined) {
+    return false;
+  }
+  return (
+    childMeta.acceptedParents === undefined ||
+    childMeta.acceptedParents.includes(parentComponent)
+  );
+};

package/src/components/input.tsx

@@ -4,7 +4,9 @@ export const defaultTag = "input";
 
 export const Input = forwardRef<
   ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag>
+  ComponentProps<typeof defaultTag> & {
+    type?: "text" | "email" | "password" | "number" | "tel" | "url";
+  }
   // Make sure children are not passed down to an input, because this will result in error.
 >(({ children: _children, ...props }, ref) => <input {...props} ref={ref} />);
 

package/src/components/input.ws.tsx

@@ -1,9 +1,10 @@
 import { FormTextFieldIcon } from "@webstudio-is/icons";
 import { input } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./input";
 import { props } from "./__generated__/input.props";
@@ -15,11 +16,24 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "control",
-  label: "Input",
+  label: "Text Field",
   Icon: FormTextFieldIcon,
   presetStyle,
+  states: [
+    ...defaultStates,
+    { 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" },
+  ],
 };
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
+  initialProps: ["name", "type", "placeholder", "required", "autoFocus"],
 };

package/src/components/italic.ws.tsx

@@ -1,9 +1,10 @@
 import { TextItalicIcon } from "@webstudio-is/icons";
 import type { defaultTag } from "./italic";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { props } from "./__generated__/italic.props";
 import { i } from "../css/normalize";
@@ -22,6 +23,7 @@ export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Italic Text",
   Icon: TextItalicIcon,
+  states: defaultStates,
   presetStyle,
 };
 

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,41 @@
+import { TextBlockIcon } from "@webstudio-is/icons";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
+} 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,
+  states: defaultStates,
+  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,4 +1,4 @@
-import { BoxLinkIcon } from "@webstudio-is/icons";
+import { LinkBlockIcon } from "@webstudio-is/icons";
 import type {
   PresetStyle,
   WsComponentMeta,
@@ -23,7 +23,7 @@ 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,9 +1,10 @@
 import { LinkIcon } from "@webstudio-is/icons";
 import { a } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./link";
 import { props } from "./__generated__/link.props";
@@ -28,7 +29,18 @@ export const meta: WsComponentMeta = {
   label: "Link Text",
   Icon: LinkIcon,
   presetStyle,
-  states: [{ selector: "[aria-current=page]", label: "Current page" }],
+  states: [
+    ...defaultStates,
+    {
+      selector: ":visited",
+      label: "Visited",
+    },
+    {
+      category: "component-states",
+      selector: "[aria-current=page]",
+      label: "Current page",
+    },
+  ],
   children: [{ type: "text", value: "Link text you can edit" }],
 };
 

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

@@ -1,9 +1,10 @@
 import { ListItemIcon } from "@webstudio-is/icons";
 import { li } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./list-item";
 import { props } from "./__generated__/list-item.props";
@@ -15,9 +16,11 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
+  acceptedParents: ["List"],
   label: "List Item",
   Icon: ListItemIcon,
   children: [{ type: "text", value: "List Item you can edit" }],
+  states: defaultStates,
   presetStyle,
 };
 

package/src/components/list.ws.tsx

@@ -1,8 +1,9 @@
 import { ListIcon } from "@webstudio-is/icons";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import { props } from "./__generated__/list.props";
 import type { ListTag } from "./list";
@@ -46,6 +47,7 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "List",
   Icon: ListIcon,
+  states: defaultStates,
   presetStyle,
   children: [],
 };

package/src/components/paragraph.ws.tsx

@@ -1,9 +1,10 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
 import { p } from "../css/normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "./component-meta";
 import type { defaultTag } from "./paragraph";
 import { props } from "./__generated__/paragraph.props";
@@ -18,6 +19,7 @@ export const meta: WsComponentMeta = {
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
   children: [{ type: "text", value: "Pragraph you can edit" }],
+  states: defaultStates,
   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,40 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
+} 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,
+  states: defaultStates,
+  presetStyle,
+  children: [
+    { type: "instance", component: "RadioButton", props: [], children: [] },
+    {
+      type: "instance",
+      component: "TextBlock",
+      props: [],
+      children: [{ type: "text", value: "Radio" }],
+    },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: [],
+};