@webstudio-is/react-sdk 0.69.0 → 0.71.0

package/src/components/bold.ws.tsx

@@ -1,26 +0,0 @@
-import { BoldIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import { props } from "./__generated__/bold.props";
-import { b } from "../css/normalize";
-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/components/box.stories.tsx

@@ -1,17 +0,0 @@
-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/components/box.tsx

@@ -1,31 +0,0 @@
-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/components/box.ws.ts

@@ -1,52 +0,0 @@
-import { BoxIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import { props } from "./__generated__/box.props";
-import type { Box } from "./box";
-import type { ComponentProps } from "react";
-import {
-  div,
-  address,
-  article,
-  aside,
-  figure,
-  footer,
-  header,
-  main,
-  nav,
-  section,
-} from "../css/normalize";
-
-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/components/button.stories.tsx

@@ -1,13 +0,0 @@
-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/components/button.tsx

@@ -1,23 +0,0 @@
-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/components/button.ws.tsx

@@ -1,34 +0,0 @@
-import { ButtonElementIcon } from "@webstudio-is/icons/svg";
-import { button } from "../css/normalize";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-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/components/checkbox-field.tsx

@@ -1,10 +0,0 @@
-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/components/checkbox-field.ws.tsx

@@ -1,47 +0,0 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  type PresetStyle,
-  defaultStates,
-} from "./component-meta";
-import { props } from "./__generated__/checkbox-field.props";
-import type { defaultTag } from "./checkbox-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: "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/components/checkbox.tsx

@@ -1,13 +0,0 @@
-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/components/checkbox.ws.tsx

@@ -1,43 +0,0 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  type PresetStyle,
-  defaultStates,
-} from "./component-meta";
-import type { defaultTag } from "./checkbox";
-import { input } from "../css/normalize";
-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/components/code-text.stories.tsx

@@ -1,16 +0,0 @@
-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/components/code-text.tsx

@@ -1,31 +0,0 @@
-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/components/code-text.ws.tsx

@@ -1,58 +0,0 @@
-import { CodeTextIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import { type defaultTag, displayVarNamespace } from "./code-text";
-import { props } from "./__generated__/code-text.props";
-import { code } from "../css/normalize";
-
-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/components.ts

@@ -1,40 +0,0 @@
-/**
- * This file should contain all the components that we use in the builder/production app
- *
- * The application imports only the components it uses and uses
- * getComponent = createGetComponent({ Box, BlaBla })to pass them to RootInstance
- * see example /packages/sdk-size-test/app/routes/$.tsx
- */
-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/components/error-message.tsx

@@ -1,10 +0,0 @@
-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

@@ -1,24 +0,0 @@
-import { BoxIcon } from "@webstudio-is/icons/svg";
-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.stories.tsx

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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/components/form.ws.tsx

@@ -1,67 +0,0 @@
-import { FormIcon } from "@webstudio-is/icons/svg";
-import { form } from "../css/normalize";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-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/components/fragment.tsx

@@ -1,11 +0,0 @@
-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/components/fragment.ws.ts

@@ -1,12 +0,0 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
-
-export const meta: WsComponentMeta = {
-  type: "container",
-  label: "Fragment",
-  icon: "",
-  stylable: false,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {},
-};

package/src/components/heading.stories.tsx

@@ -1,16 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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";