@webstudio-is/sdk-components-react 0.70.0

package/src/link.ws.tsx

@@ -0,0 +1,64 @@
+import { LinkIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { a } from "@webstudio-is/react-sdk/css-normalize";
+import type { defaultTag } from "./link";
+import { props } from "./__generated__/link.props";
+
+const presetStyle = {
+  a: [
+    ...a,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 },
+    },
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" },
+    },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "rich-text",
+  label: "Link Text",
+  icon: LinkIcon,
+  presetStyle,
+  order: 1,
+  states: [
+    ...defaultStates,
+    {
+      selector: ":visited",
+      label: "Visited",
+    },
+    {
+      category: "component-states",
+      selector: "[aria-current=page]",
+      label: "Current page",
+    },
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Link",
+      children: [{ type: "text", value: "Link text you can edit" }],
+    },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props: {
+    ...props,
+    href: {
+      type: "string",
+      control: "url",
+      required: false,
+    },
+  },
+  initialProps: ["href", "target", "prefetch"],
+};

package/src/list-item.stories.tsx

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

package/src/list-item.tsx

@@ -0,0 +1,18 @@
+import {
+  forwardRef,
+  createElement,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+
+export const defaultTag = "li";
+
+type Props = ComponentProps<typeof defaultTag>;
+
+export const ListItem = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    return createElement(defaultTag, { ...props, ref });
+  }
+);
+
+ListItem.displayName = "ListItem";

package/src/list-item.ws.tsx

@@ -0,0 +1,36 @@
+import { ListItemIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { li } from "@webstudio-is/react-sdk/css-normalize";
+import type { defaultTag } from "./list-item";
+import { props } from "./__generated__/list-item.props";
+
+const presetStyle = {
+  li,
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "rich-text",
+  requiredAncestors: ["List"],
+  label: "List Item",
+  icon: ListItemIcon,
+  states: defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "ListItem",
+      children: [{ type: "text", value: "List Item you can edit" }],
+    },
+  ],
+  order: 4,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+};

package/src/list.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { List as ListPrimitive } from "./list";
+import { ListItem } from "./list-item";
+
+export default {
+  title: "Components/List",
+  component: ListPrimitive,
+} as ComponentMeta<typeof ListPrimitive>;
+
+const Template: ComponentStory<typeof ListPrimitive> = (args) => (
+  <ListPrimitive {...args} />
+);
+
+export const List = Template.bind({});
+List.args = {
+  children: <ListItem />,
+};

package/src/list.tsx

@@ -0,0 +1,26 @@
+import {
+  forwardRef,
+  createElement,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+
+const unorderedTag = "ul";
+const orderedTag = "ol";
+
+export type ListTag = typeof unorderedTag | typeof orderedTag;
+
+type Props = ComponentProps<typeof unorderedTag> &
+  ComponentProps<typeof orderedTag> & {
+    ordered?: boolean;
+  };
+
+export const List = forwardRef<
+  ElementRef<typeof unorderedTag | typeof orderedTag>,
+  Props
+>(({ ordered = false, ...props }, ref) => {
+  const tag = ordered ? orderedTag : unorderedTag;
+  return createElement(tag, { ...props, ref });
+});
+
+List.displayName = "List";

package/src/list.ws.tsx

@@ -0,0 +1,58 @@
+import { ListIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { ol, ul } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/list.props";
+import type { ListTag } from "./list";
+
+const presetStyle = {
+  ol: [
+    ...ol,
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" },
+    },
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" },
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" },
+    },
+  ],
+  ul: [
+    ...ul,
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" },
+    },
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" },
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" },
+    },
+  ],
+} satisfies PresetStyle<ListTag>;
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "container",
+  label: "List",
+  icon: ListIcon,
+  states: defaultStates,
+  presetStyle,
+  order: 3,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["ordered", "type", "starts", "reversed"],
+};

package/src/metas.ts

@@ -0,0 +1,33 @@
+export { meta as Slot } from "./slot.ws";
+export { meta as Fragment } from "./fragment.ws";
+export { meta as HtmlEmbed } from "./html-embed.ws";
+export { meta as Body } from "./body.ws";
+export { meta as Box } from "./box.ws";
+export { meta as TextBlock } from "./text-block.ws";
+export { meta as Heading } from "./heading.ws";
+export { meta as Paragraph } from "./paragraph.ws";
+export { meta as Link } from "./link.ws";
+export { meta as LinkBlock } from "./link-block.ws";
+export { meta as RichTextLink } from "./rich-text-link.ws";
+export { meta as Span } from "./span.ws";
+export { meta as Bold } from "./bold.ws";
+export { meta as Italic } from "./italic.ws";
+export { meta as Superscript } from "./superscript.ws";
+export { meta as Subscript } from "./subscript.ws";
+export { meta as Button } from "./button.ws";
+export { meta as Input } from "./input.ws";
+export { meta as Form } from "./form.ws";
+export { meta as Image } from "./image.ws";
+export { meta as Blockquote } from "./blockquote.ws";
+export { meta as List } from "./list.ws";
+export { meta as ListItem } from "./list-item.ws";
+export { meta as Separator } from "./separator.ws";
+export { meta as CodeText } from "./code-text.ws";
+export { meta as Label } from "./label.ws";
+export { meta as SuccessMessage } from "./success-message.ws";
+export { meta as ErrorMessage } from "./error-message.ws";
+export { meta as Textarea } from "./textarea.ws";
+export { meta as RadioButtonField } from "./radio-button-field.ws";
+export { meta as RadioButton } from "./radio-button.ws";
+export { meta as CheckboxField } from "./checkbox-field.ws";
+export { meta as Checkbox } from "./checkbox.ws";

package/src/paragraph.stories.tsx

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

package/src/paragraph.tsx

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

package/src/paragraph.ws.tsx

@@ -0,0 +1,35 @@
+import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { p } from "@webstudio-is/react-sdk/css-normalize";
+import type { defaultTag } from "./paragraph";
+import { props } from "./__generated__/paragraph.props";
+
+const presetStyle = {
+  p,
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "text",
+  type: "rich-text",
+  label: "Paragraph",
+  icon: TextAlignLeftIcon,
+  states: defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Paragraph",
+      children: [{ type: "text", value: "Pragraph you can edit" }],
+    },
+  ],
+  order: 2,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+};

package/src/props.ts

@@ -0,0 +1,33 @@
+export { propsMeta as Slot } from "./slot.ws";
+export { propsMeta as Fragment } from "./fragment.ws";
+export { propsMeta as HtmlEmbed } from "./html-embed.ws";
+export { propsMeta as Body } from "./body.ws";
+export { propsMeta as Box } from "./box.ws";
+export { propsMeta as TextBlock } from "./text-block.ws";
+export { propsMeta as Heading } from "./heading.ws";
+export { propsMeta as Paragraph } from "./paragraph.ws";
+export { propsMeta as Link } from "./link.ws";
+export { propsMeta as LinkBlock } from "./link-block.ws";
+export { propsMeta as RichTextLink } from "./rich-text-link.ws";
+export { propsMeta as Span } from "./span.ws";
+export { propsMeta as Bold } from "./bold.ws";
+export { propsMeta as Italic } from "./italic.ws";
+export { propsMeta as Superscript } from "./superscript.ws";
+export { propsMeta as Subscript } from "./subscript.ws";
+export { propsMeta as Button } from "./button.ws";
+export { propsMeta as Input } from "./input.ws";
+export { propsMeta as Form } from "./form.ws";
+export { propsMeta as Image } from "./image.ws";
+export { propsMeta as Blockquote } from "./blockquote.ws";
+export { propsMeta as List } from "./list.ws";
+export { propsMeta as ListItem } from "./list-item.ws";
+export { propsMeta as Separator } from "./separator.ws";
+export { propsMeta as CodeText } from "./code-text.ws";
+export { propsMeta as Label } from "./label.ws";
+export { propsMeta as SuccessMessage } from "./success-message.ws";
+export { propsMeta as ErrorMessage } from "./error-message.ws";
+export { propsMeta as Textarea } from "./textarea.ws";
+export { propsMeta as RadioButtonField } from "./radio-button-field.ws";
+export { propsMeta as RadioButton } from "./radio-button.ws";
+export { propsMeta as CheckboxField } from "./checkbox-field.ws";
+export { propsMeta as Checkbox } from "./checkbox.ws";

package/src/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/radio-button-field.ws.tsx

@@ -0,0 +1,47 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
+} from "@webstudio-is/react-sdk";
+import { props } from "./__generated__/radio-button-field.props";
+import type { defaultTag } from "./radio-button-field";
+import { label } from "@webstudio-is/react-sdk/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",
+  icon: RadioCheckedIcon,
+  states: defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "RadioButtonField",
+      children: [
+        { type: "instance", component: "RadioButton", props: [], children: [] },
+        {
+          type: "instance",
+          component: "TextBlock",
+          label: "Radio Label",
+          props: [],
+          children: [{ type: "text", value: "Radio" }],
+        },
+      ],
+    },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: [],
+};

package/src/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/radio-button.ws.tsx

@@ -0,0 +1,43 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
+} from "@webstudio-is/react-sdk";
+import type { defaultTag } from "./radio-button";
+import { input } from "@webstudio-is/react-sdk/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 Input",
+  icon: RadioCheckedIcon,
+  presetStyle,
+  order: 5,
+  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/rich-text-link.stories.tsx

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

package/src/rich-text-link.tsx

@@ -0,0 +1,8 @@
+import { forwardRef } from "react";
+import { Link } from "./link";
+
+export const RichTextLink: typeof Link = forwardRef((props, ref) => (
+  <Link {...props} ref={ref} />
+));
+
+RichTextLink.displayName = "RichTextLink";

package/src/rich-text-link.ws.tsx

@@ -0,0 +1,22 @@
+import type {
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { props } from "./__generated__/rich-text-link.props";
+import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
+
+const { category, ...linkMetaRest } = linkMeta;
+
+export const meta: WsComponentMeta = {
+  ...linkMetaRest,
+  type: "rich-text-child",
+  template: [],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  initialProps: linkPropsMeta.initialProps,
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href,
+  },
+};

package/src/separator.stories.tsx

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

package/src/separator.tsx

@@ -0,0 +1,18 @@
+import {
+  forwardRef,
+  createElement,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+
+export const defaultTag = "hr";
+
+type Props = ComponentProps<typeof defaultTag>;
+
+export const Separator = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    return createElement(defaultTag, { ...props, ref });
+  }
+);
+
+Separator.displayName = "Separator";

package/src/separator.ws.tsx

@@ -0,0 +1,56 @@
+import { DashIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { hr } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/separator.props";
+import type { defaultTag } from "./separator";
+
+const presetStyle = {
+  hr: [
+    ...hr,
+
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" },
+    },
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" },
+    },
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" },
+    },
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" },
+    },
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" },
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" },
+    },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "embed",
+  label: "Separator",
+  icon: DashIcon,
+  states: defaultStates,
+  presetStyle,
+  order: 5,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: [],
+};

package/src/slot.stories.tsx

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

package/src/slot.tsx

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