@webstudio-is/react-sdk 0.70.0 → 0.71.0

package/src/components/slot.stories.tsx

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

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

package/src/components/slot.ws.ts

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

package/src/components/span.stories.tsx

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

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

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

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

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

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

@@ -1,10 +0,0 @@
-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/components/success-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__/success-message.props";
-import { div } from "../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/components/superscript.stories.tsx

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

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

@@ -1,26 +0,0 @@
-import { SuperscriptIcon } from "@webstudio-is/icons/svg";
-import { sup } from "../css/normalize";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-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/components/text-block.stories.tsx

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

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

@@ -1,42 +0,0 @@
-import { TextBlockIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import { props } from "./__generated__/text-block.props";
-import type { defaultTag } from "./text-block";
-import { div } from "../css/normalize";
-
-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/components/textarea.tsx

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

@@ -1,44 +0,0 @@
-import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
-import { textarea } from "../css/normalize";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  type PresetStyle,
-  defaultStates,
-} from "./component-meta";
-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"],
-};