@webstudio-is/sdk-components-react 0.70.0

package/src/bold.ws.tsx

@@ -0,0 +1,26 @@
+import { BoldIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { b } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/bold.props";
+import type { defaultTag } from "./bold";
+
+const presetStyle = {
+  b,
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  type: "rich-text-child",
+  label: "Bold Text",
+  icon: BoldIcon,
+  states: defaultStates,
+  presetStyle,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+};

package/src/box.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Box as BoxPrimitive } from "./box";
+
+export default {
+  title: "Components/Box",
+  component: BoxPrimitive,
+} as ComponentMeta<typeof BoxPrimitive>;
+
+const Template: ComponentStory<typeof BoxPrimitive> = (args) => (
+  <BoxPrimitive
+    {...args}
+    style={{ minHeight: 20, outline: "1px solid black" }}
+  />
+);
+
+export const Box = Template.bind({});
+Box.args = {};

package/src/box.tsx

@@ -0,0 +1,31 @@
+import {
+  createElement,
+  forwardRef,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+
+const defaultTag = "div";
+
+// We don't want to enable all tags because Box is usually a container and we have specific components for many tags.
+type Props = ComponentProps<typeof defaultTag> & {
+  tag?:
+    | "div"
+    | "header"
+    | "footer"
+    | "nav"
+    | "main"
+    | "section"
+    | "article"
+    | "aside"
+    | "address"
+    | "figure";
+};
+
+export const Box = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return createElement(tag, { ...props, ref });
+  }
+);
+
+Box.displayName = "Box";

package/src/box.ws.ts

@@ -0,0 +1,52 @@
+import type { ComponentProps } from "react";
+import { BoxIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import {
+  div,
+  address,
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section,
+} from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/box.props";
+import type { Box } from "./box";
+
+type BoxTags = NonNullable<ComponentProps<typeof Box>["tag"]>;
+
+const presetStyle = {
+  div,
+  address,
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section,
+} satisfies PresetStyle<BoxTags>;
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "container",
+  label: "Box",
+  icon: BoxIcon,
+  states: defaultStates,
+  presetStyle,
+  order: 0,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["tag"],
+};

package/src/button.stories.tsx

@@ -0,0 +1,13 @@
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Button as ButtonPrimitive } from "./button";
+
+export default {
+  title: "Components/Button",
+  component: ButtonPrimitive,
+} as ComponentMeta<typeof ButtonPrimitive>;
+
+const Template: ComponentStory<typeof ButtonPrimitive> = (args) => (
+  <ButtonPrimitive {...args} />
+);
+
+export const Button = Template.bind({});

package/src/button.tsx

@@ -0,0 +1,23 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "button";
+
+type ButtonProps = ComponentProps<typeof defaultTag> & { innerText?: string };
+
+export const Button = forwardRef<ElementRef<typeof defaultTag>, ButtonProps>(
+  (
+    {
+      type = "submit",
+      innerText = "Edit Inner Text in Properties",
+      children,
+      ...props
+    },
+    ref
+  ) => (
+    <button type={type} {...props} ref={ref}>
+      {children ? children : innerText}
+    </button>
+  )
+);
+
+Button.displayName = "Button";

package/src/button.ws.tsx

@@ -0,0 +1,34 @@
+import { ButtonElementIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { button } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/button.props";
+import type { defaultTag } from "./button";
+
+const presetStyle = {
+  button,
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "forms",
+  type: "container",
+  invalidAncestors: ["Button"],
+  label: "Button",
+  icon: ButtonElementIcon,
+  presetStyle,
+  states: [
+    ...defaultStates,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+  ],
+  order: 1,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["type", "innerText", "aria-label"],
+};

package/src/checkbox-field.tsx

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

package/src/checkbox-field.ws.tsx

@@ -0,0 +1,47 @@
+import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
+} from "@webstudio-is/react-sdk";
+import { label } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/checkbox-field.props";
+import type { defaultTag } from "./checkbox-field";
+
+const presetStyle = {
+  label: [
+    ...label,
+    { property: "display", value: { type: "keyword", value: "flex" } },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "forms",
+  type: "container",
+  label: "Checkbox",
+  icon: CheckboxCheckedIcon,
+  states: defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "CheckboxField",
+      children: [
+        { type: "instance", component: "Checkbox", children: [] },
+        {
+          type: "instance",
+          component: "TextBlock",
+          label: "Checkbox Label",
+          props: [],
+          children: [{ type: "text", value: "Checkbox" }],
+        },
+      ],
+    },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: [],
+};

package/src/checkbox.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+export const defaultTag = "input";
+
+export const Checkbox = 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="checkbox" ref={ref} />
+));
+
+Checkbox.displayName = "Checkbox";

package/src/checkbox.ws.tsx

@@ -0,0 +1,43 @@
+import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
+} from "@webstudio-is/react-sdk";
+import { input } from "@webstudio-is/react-sdk/css-normalize";
+import type { defaultTag } from "./checkbox";
+import { props } from "./__generated__/checkbox.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: "Checkbox Input",
+  icon: CheckboxCheckedIcon,
+  presetStyle,
+  order: 6,
+  states: [
+    ...defaultStates,
+    { 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/code-text.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { CodeText as CodeTextPrimitive } from "./code-text";
+
+export default {
+  title: "Components/CodeText",
+  component: CodeTextPrimitive,
+} as ComponentMeta<typeof CodeTextPrimitive>;
+
+const Template: ComponentStory<typeof CodeTextPrimitive> = (args) => (
+  <CodeTextPrimitive {...args} />
+);
+
+export const CodeText = Template.bind({});
+CodeText.args = {
+  children: "alert('Hello World!')",
+};

package/src/code-text.tsx

@@ -0,0 +1,31 @@
+import {
+  forwardRef,
+  createElement,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+import { cssVars } from "@webstudio-is/css-vars";
+
+export const defaultTag = "code";
+
+export const displayVarNamespace = cssVars.unique("code-display");
+
+const blockStyle = {
+  [cssVars.define(displayVarNamespace, true)]: "block",
+};
+
+type Props = Omit<ComponentProps<typeof defaultTag>, "inline"> & {
+  inline?: boolean;
+  meta?: string;
+};
+
+export const CodeText = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  ({ inline = false, ...props }, ref) => {
+    // @todo in the future we should expose the inline prop a an attribute
+    // and define the display style in `presetStyle` in meta.
+    const style = inline ? undefined : blockStyle;
+    return createElement(defaultTag, { ...props, style, ref });
+  }
+);
+
+CodeText.displayName = "CodeText";

package/src/code-text.ws.tsx

@@ -0,0 +1,58 @@
+import { CodeTextIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { code } from "@webstudio-is/react-sdk/css-normalize";
+import { type defaultTag, displayVarNamespace } from "./code-text";
+import { props } from "./__generated__/code-text.props";
+
+const presetStyle = {
+  code: [
+    ...code,
+    {
+      property: "display",
+      value: {
+        type: "var",
+        value: displayVarNamespace,
+        fallbacks: [{ type: "keyword", value: "inline-block" }],
+      },
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "unit", value: 0.2, unit: "em" },
+    },
+    {
+      property: "paddingRight",
+      value: { type: "unit", value: 0.2, unit: "em" },
+    },
+    {
+      property: "backgroundColor",
+      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 },
+    },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "rich-text",
+  label: "Code Text",
+  icon: CodeTextIcon,
+  states: defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "CodeText",
+      children: [{ type: "text", value: "Code you can edit" }],
+    },
+  ],
+  order: 8,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["inline", "lang", "meta"],
+};

package/src/components.ts

@@ -0,0 +1,33 @@
+export { Slot } from "./slot";
+export { Fragment } from "./fragment";
+export { HtmlEmbed } from "./html-embed";
+export { Body } from "./body";
+export { Box } from "./box";
+export { TextBlock } from "./text-block";
+export { Heading } from "./heading";
+export { Paragraph } from "./paragraph";
+export { Link } from "./link";
+export { LinkBlock } from "./link-block";
+export { RichTextLink } from "./rich-text-link";
+export { Span } from "./span";
+export { Bold } from "./bold";
+export { Italic } from "./italic";
+export { Superscript } from "./superscript";
+export { Subscript } from "./subscript";
+export { Button } from "./button";
+export { Input } from "./input";
+export { Form } from "./form";
+export { Image } from "./image";
+export { Blockquote } from "./blockquote";
+export { List } from "./list";
+export { ListItem } from "./list-item";
+export { Separator } from "./separator";
+export { CodeText } from "./code-text";
+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/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/error-message.ws.tsx

@@ -0,0 +1,24 @@
+import { BoxIcon } from "@webstudio-is/icons/svg";
+import type {
+  WsComponentMeta,
+  WsComponentPropsMeta,
+  PresetStyle,
+} from "@webstudio-is/react-sdk";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/error-message.props";
+
+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/form.stories.tsx

@@ -0,0 +1,14 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Form as FormPrimitive } from "./form";
+
+export default {
+  title: "Components/Form",
+  component: FormPrimitive,
+} as ComponentMeta<typeof FormPrimitive>;
+
+const Template: ComponentStory<typeof FormPrimitive> = (args) => (
+  <FormPrimitive {...args} />
+);
+
+export const Form = Template.bind({});
+Form.args = {};

package/src/form.tsx

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

package/src/form.ws.tsx

@@ -0,0 +1,67 @@
+import { FormIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { form } from "@webstudio-is/react-sdk/css-normalize";
+import type { defaultTag } from "./form";
+import { props } from "./__generated__/form.props";
+
+const presetStyle = {
+  form: [
+    ...form,
+    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "forms",
+  type: "container",
+  label: "Form",
+  icon: FormIcon,
+  states: defaultStates,
+  presetStyle,
+  order: 0,
+  template: [
+    {
+      type: "instance",
+      component: "Form",
+      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: "name", value: "email" }],
+          children: [],
+        },
+        {
+          type: "instance",
+          component: "Button",
+          children: [{ type: "text", value: "Submit" }],
+        },
+      ],
+    },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: [],
+};

package/src/fragment.tsx

@@ -0,0 +1,11 @@
+import { forwardRef, type ElementRef, type ReactNode } from "react";
+
+type Props = {
+  children?: ReactNode;
+};
+
+export const Fragment = forwardRef<ElementRef<"div">, Props>((props, ref) => {
+  return <div {...props} ref={ref} style={{ display: "contents" }} />;
+});
+
+Fragment.displayName = "Fragment";

package/src/fragment.ws.ts

@@ -0,0 +1,15 @@
+import type {
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+
+export const meta: WsComponentMeta = {
+  type: "container",
+  label: "Fragment",
+  icon: "",
+  stylable: false,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props: {},
+};

package/src/heading.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Heading as HeadingPrimitive } from "./heading";
+
+export default {
+  title: "Components/Heading",
+  component: HeadingPrimitive,
+} as ComponentMeta<typeof HeadingPrimitive>;
+
+const Template: ComponentStory<typeof HeadingPrimitive> = (args) => (
+  <HeadingPrimitive {...args} />
+);
+
+export const Heading = Template.bind({});
+Heading.args = {
+  children: "Heading",
+};

package/src/heading.tsx

@@ -0,0 +1,20 @@
+import {
+  forwardRef,
+  createElement,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+
+const defaultTag = "h1";
+
+type Props = ComponentProps<typeof defaultTag> & {
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+};
+
+export const Heading = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return createElement(tag, { ...props, ref });
+  }
+);
+
+Heading.displayName = "Heading";