@webstudio-is/sdk-components-react 0.70.0

package/src/slot.ws.ts

@@ -0,0 +1,18 @@
+import { SlotComponentIcon } from "@webstudio-is/icons/svg";
+import type {
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "container",
+  label: "Slot",
+  icon: SlotComponentIcon,
+  stylable: false,
+  order: 6,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props: {},
+};

package/src/span.stories.tsx

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

package/src/span.tsx

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

package/src/span.ws.tsx

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

package/src/subscript.stories.tsx

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

package/src/subscript.tsx

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

package/src/subscript.ws.tsx

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

package/src/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/success-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 { props } from "./__generated__/success-message.props";
+import { div } from "@webstudio-is/react-sdk/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/superscript.stories.tsx

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

package/src/superscript.tsx

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

package/src/superscript.ws.tsx

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

package/src/text-block.stories.tsx

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

package/src/text-block.tsx

@@ -0,0 +1,21 @@
+import {
+  createElement,
+  forwardRef,
+  type ElementRef,
+  type ComponentProps,
+} from "react";
+
+export 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" | "span" | "figcaption";
+};
+
+export const TextBlock = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return createElement(tag, { ...props, ref });
+  }
+);
+
+TextBlock.displayName = "TextBlock";

package/src/text-block.ws.tsx

@@ -0,0 +1,42 @@
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/text-block.props";
+import type { defaultTag } from "./text-block";
+
+const presetStyle = {
+  div: [
+    ...div,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 },
+    },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "text",
+  type: "rich-text",
+  label: "Text Block",
+  icon: TextBlockIcon,
+  states: defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "TextBlock",
+      children: [{ type: "text", value: "Block of text you can edit" }],
+    },
+  ],
+  order: 0,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["tag"],
+};

package/src/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";

package/src/textarea.ws.tsx

@@ -0,0 +1,44 @@
+import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type PresetStyle,
+  defaultStates,
+} from "@webstudio-is/react-sdk";
+import { textarea } from "@webstudio-is/react-sdk/css-normalize";
+import type { defaultTag } from "./textarea";
+import { props } from "./__generated__/textarea.props";
+
+const presetStyle = {
+  textarea: [
+    ...textarea,
+    // resize doesn't work well while on canvas
+    { property: "resize", value: { type: "keyword", value: "none" } },
+  ],
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "forms",
+  type: "control",
+  label: "Text Area",
+  icon: FormTextAreaIcon,
+  presetStyle,
+  order: 4,
+  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", "placeholder", "required", "autoFocus"],
+};