@webstudio-is/react-sdk 0.8.0 → 0.10.0

package/src/components/button.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+const defaultTag = "button";
+
+type ButtonProps = ComponentProps<typeof defaultTag>;
+
+export const Button = forwardRef<ElementRef<typeof defaultTag>, ButtonProps>(
+  (props, ref) => <button {...props} ref={ref} />
+);
+
+Button.defaultProps = {
+  type: "submit", // Match the platform default
+};
+Button.displayName = "Button";

package/src/components/button.ws.tsx

@@ -0,0 +1,13 @@
+import { ButtonIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/button.props.json";
+
+const meta: WsComponentMeta = {
+  type: "rich-text",
+  label: "Button",
+  Icon: ButtonIcon,
+  children: ["Button text you can edit"],
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/component-type.ts

@@ -0,0 +1,89 @@
+import { z } from "zod";
+import type { FunctionComponent } from "react";
+import type { IconProps } from "@webstudio-is/icons";
+import type { Style } from "@webstudio-is/css-data";
+
+export type MetaProps = Partial<z.infer<typeof Props>>;
+
+export type WsComponentMeta = {
+  /**
+   * body - can accept other components with dnd but not listed
+   * container - can accept other components with dnd
+   * control - usually form controls like inputs, without children
+   * embed - images, videos or other embeddable components, without children
+   * rich-text - editable text component
+   * rich-text-child - formatted text fragment, not listed in components list
+   */
+  type:
+    | "body"
+    | "container"
+    | "control"
+    | "embed"
+    | "rich-text"
+    | "rich-text-child";
+  label: string;
+  Icon: FunctionComponent<IconProps>;
+  defaultStyle?: Style;
+  children?: Array<string>;
+  props: MetaProps;
+};
+
+const Props = z.record(
+  z.union([
+    z.object({
+      type: z.literal("number"),
+      required: z.boolean(),
+      defaultValue: z.number().nullable(),
+    }),
+
+    z.object({
+      type: z.literal("text"),
+      required: z.boolean(),
+      defaultValue: z.string().nullable(),
+    }),
+
+    z.object({
+      type: z.literal("color"),
+      required: z.boolean(),
+      defaultValue: z.string().nullable(),
+    }),
+
+    z.object({
+      type: z.literal("boolean"),
+      required: z.boolean(),
+      defaultValue: z.boolean().nullable(),
+    }),
+
+    z.object({
+      type: z.enum([
+        "radio",
+        "inline-radio",
+        "check",
+        "inline-check",
+        "multi-select",
+        "select",
+      ]),
+      required: z.boolean(),
+      options: z.array(z.string()),
+      defaultValue: z.string().nullable(),
+    }),
+  ])
+);
+
+export const WsComponentMeta = z.lazy(() =>
+  z.object({
+    type: z.enum([
+      "body",
+      "container",
+      "control",
+      "embed",
+      "rich-text",
+      "rich-text-child",
+    ]),
+    label: z.string(),
+    Icon: z.any(),
+    defaultStyle: z.optional(z.any()),
+    children: z.optional(z.array(z.string())),
+    props: Props,
+  })
+);

package/src/components/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/components/form.tsx

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

package/src/components/form.ws.tsx

@@ -0,0 +1,25 @@
+import { FormIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/form.props.json";
+
+const defaultStyle = {
+  minHeight: {
+    type: "unit",
+    unit: "px",
+    value: 20,
+  },
+  boxSizing: {
+    type: "keyword",
+    value: "border-box",
+  },
+} as const;
+
+const meta: WsComponentMeta = {
+  type: "container",
+  label: "Form",
+  Icon: FormIcon,
+  defaultStyle,
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/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/components/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 as string, { ...props, ref });
+  }
+);
+
+Heading.displayName = "Heading";

package/src/components/heading.ws.tsx

@@ -0,0 +1,13 @@
+import { HeadingIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/heading.props.json";
+
+const meta: WsComponentMeta = {
+  type: "rich-text",
+  label: "Heading",
+  Icon: HeadingIcon,
+  children: ["Heading you can edit"],
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/image.stories.tsx

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

package/src/components/image.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+const defaultTag = "img";
+
+// quality and optimize can be overwritten and used by asset transform
+// Or we need and additional way to pass them upper level
+type ImageProps = ComponentProps<typeof defaultTag>;
+
+export const Image = forwardRef<ElementRef<typeof defaultTag>, ImageProps>(
+  (imageProps, ref) => {
+    return (
+      <img
+        {...imageProps}
+        src={imageProps.src || imagePlaceholderSvg}
+        ref={ref}
+      />
+    );
+  }
+);
+
+Image.defaultProps = {
+  src: "",
+  width: "",
+  height: "",
+  alt: "",
+};
+
+Image.displayName = "Image";
+
+const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
+  width="140"
+  height="140"
+  viewBox="0 0 600 600"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  >
+  <rect width="600" height="600" fill="#CCCCCC" />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
+    fill="#A2A2A2"
+  />
+  <path
+    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
+    fill="#A2A2A2"
+  />
+  <path
+    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
+    fill="#A2A2A2"
+  />
+</svg>`)}`;

package/src/components/image.ws.tsx

@@ -0,0 +1,28 @@
+import { ImageIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/image.props.json";
+
+const defaultStyle = {
+  // Otherwise on new image insert onto canvas it can overfit screen size multiple times
+  maxWidth: {
+    type: "unit",
+    unit: "%",
+    value: 100,
+  },
+  // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+  // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
+  display: {
+    type: "keyword",
+    value: "block",
+  },
+} as const;
+
+const meta: WsComponentMeta = {
+  type: "embed",
+  label: "Image",
+  Icon: ImageIcon,
+  defaultStyle,
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/index.test.ts

@@ -0,0 +1,28 @@
+import {
+  getComponentNames,
+  getComponentMeta,
+  getComponentMetaProps,
+  registerComponentsMeta,
+} from "./index";
+import { WsComponentMeta } from "./component-type";
+
+test.each(getComponentNames())("validating meta definition of %s", (name) => {
+  WsComponentMeta.parse(getComponentMeta(name));
+});
+
+test("defaultValue will be used from Native Component", () => {
+  registerComponentsMeta({
+    Image: {
+      props: {
+        src: {
+          defaultValue: null,
+          required: false,
+          type: "text",
+        },
+      },
+    },
+  });
+
+  const props = getComponentMetaProps("Image");
+  expect(props?.src?.defaultValue).toEqual("");
+});

package/src/components/index.ts

@@ -0,0 +1,159 @@
+import BodyMeta from "./body.ws";
+import BoxMeta from "./box.ws";
+import TextBlockMeta from "./text-block.ws";
+import HeadingMeta from "./heading.ws";
+import ParagraphMeta from "./paragraph.ws";
+import LinkMeta from "./link.ws";
+import RichTextLinkMeta from "./rich-text-link.ws";
+import SpanMeta from "./span.ws";
+import BoldMeta from "./bold.ws";
+import ItalicMeta from "./italic.ws";
+import SuperscriptMeta from "./superscript.ws";
+import SubscriptMeta from "./subscript.ws";
+import ButtonMeta from "./button.ws";
+import InputMeta from "./input.ws";
+import FormMeta from "./form.ws";
+import ImageMeta from "./image.ws";
+
+import { Body } from "./body";
+import { Box } from "./box";
+import { TextBlock } from "./text-block";
+import { Heading } from "./heading";
+import { Paragraph } from "./paragraph";
+import { Link } from "./link";
+import { RichTextLink } from "./rich-text-link";
+import { Span } from "./span";
+import { Bold } from "./bold";
+import { Italic } from "./italic";
+import { Superscript } from "./superscript";
+import { Subscript } from "./subscript";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Form } from "./form";
+import { Image } from "./image";
+
+import type { WsComponentMeta, MetaProps } from "./component-type";
+
+const meta = {
+  Box: BoxMeta,
+  Body: BodyMeta,
+  TextBlock: TextBlockMeta,
+  Heading: HeadingMeta,
+  Paragraph: ParagraphMeta,
+  Link: LinkMeta,
+  RichTextLink: RichTextLinkMeta,
+  Span: SpanMeta,
+  Bold: BoldMeta,
+  Italic: ItalicMeta,
+  Superscript: SuperscriptMeta,
+  Subscript: SubscriptMeta,
+  Button: ButtonMeta,
+  Input: InputMeta,
+  Form: FormMeta,
+  Image: ImageMeta,
+} as const;
+
+const components = {
+  Box,
+  Body,
+  TextBlock,
+  Heading,
+  Paragraph,
+  Link,
+  RichTextLink,
+  Span,
+  Bold,
+  Italic,
+  Superscript,
+  Subscript,
+  Button,
+  Input,
+  Form,
+  Image,
+} as const;
+
+export type ComponentName = keyof typeof components;
+type RegisteredComponents = Partial<{
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  [p in ComponentName]: {};
+}>;
+
+type RegisteredComponentsMeta = Partial<{
+  [p in ComponentName]: Partial<WsComponentMeta>;
+}>;
+
+let registeredComponents: RegisteredComponents | null = null;
+let registeredComponentsMeta: RegisteredComponentsMeta | null = null;
+
+const componentNames = Object.keys(components) as ComponentName[];
+
+export const getComponentNames = (): ComponentName[] => {
+  const uniqueNames = new Set([
+    ...componentNames,
+    ...Object.keys(registeredComponents || {}),
+  ]);
+
+  return [...uniqueNames.values()] as ComponentName[];
+};
+
+export const getComponentMeta = (name: ComponentName): WsComponentMeta => {
+  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
+    return { ...meta[name], ...registeredComponentsMeta[name] };
+  }
+
+  return meta[name];
+};
+
+export const getComponent = (
+  name: ComponentName
+): typeof components[ComponentName] => {
+  return registeredComponents != null && name in registeredComponents
+    ? (registeredComponents[name] as typeof components[ComponentName])
+    : components[name];
+};
+
+export const getComponentMetaProps = (name: ComponentName): MetaProps => {
+  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
+    const allMetaPropKeys = new Set([
+      ...Object.keys(meta[name]?.props ?? {}),
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      ...Object.keys(registeredComponentsMeta[name]!.props!),
+    ]);
+
+    const props: MetaProps = {};
+    /**
+     * Merge props, taking non null defaultValue and required=true from meta
+     **/
+    for (const key of allMetaPropKeys.values()) {
+      props[key] = {
+        ...meta[name]?.props[key],
+        ...registeredComponentsMeta[name]?.props?.[key],
+        defaultValue:
+          registeredComponentsMeta[name]?.props?.[key]?.defaultValue ??
+          meta[name]?.props[key]?.defaultValue ??
+          null,
+        required:
+          registeredComponentsMeta[name]?.props?.[key]?.required ||
+          meta[name]?.props[key]?.required,
+      } as MetaProps[string];
+    }
+    return props;
+  }
+
+  return meta[name].props;
+};
+
+/**
+ *  @todo: Allow register any component.
+ * Now we can register only existings Components, as all our type system would
+ * break otherwise, see getComponent etc. So its overwriteComponent now
+ **/
+export const registerComponents = (components: RegisteredComponents) => {
+  registeredComponents = components;
+};
+
+export const registerComponentsMeta = (
+  componentsMeta: RegisteredComponentsMeta
+) => {
+  registeredComponentsMeta = componentsMeta;
+};

package/src/components/input.stories.tsx

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

package/src/components/input.tsx

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

package/src/components/input.ws.tsx

@@ -0,0 +1,12 @@
+import { InputIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/input.props.json";
+
+const meta: WsComponentMeta = {
+  type: "control",
+  label: "Input",
+  Icon: InputIcon,
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/italic.stories.tsx

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

package/src/components/italic.tsx

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

package/src/components/italic.ws.tsx

@@ -0,0 +1,20 @@
+import { FontItalicIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/italic.props.json";
+
+const defaultStyle = {
+  fontStyle: {
+    type: "keyword",
+    value: "italic",
+  },
+} as const;
+
+const meta: WsComponentMeta = {
+  type: "rich-text-child",
+  label: "Italic Text",
+  Icon: FontItalicIcon,
+  defaultStyle,
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/link.stories.tsx

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

package/src/components/link.tsx

@@ -0,0 +1,9 @@
+import { forwardRef, type ElementRef, type ComponentProps } from "react";
+
+type Props = Omit<ComponentProps<"a">, "href"> & { href?: string };
+
+export const Link = forwardRef<ElementRef<"a">, Props>(
+  ({ href = "", ...props }, ref) => <a {...props} href={href} ref={ref} />
+);
+
+Link.displayName = "Link";

package/src/components/link.ws.tsx

@@ -0,0 +1,26 @@
+import { Link2Icon } from "@webstudio-is/icons";
+import type { WsComponentMeta, MetaProps } from "./component-type";
+import props from "./__generated__/link.props.json";
+
+const defaultStyle = {
+  minHeight: {
+    type: "unit",
+    unit: "em",
+    value: 1,
+  },
+  display: {
+    type: "keyword",
+    value: "inline-block",
+  },
+} as const;
+
+const meta: WsComponentMeta = {
+  type: "rich-text",
+  label: "Link",
+  Icon: Link2Icon,
+  defaultStyle,
+  children: ["Link text you can edit"],
+  props: props as MetaProps,
+};
+
+export default meta;

package/src/components/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",
+};