@webstudio-is/sdk-components-react 0.91.0 → 0.92.0

package/src/slot.ws.ts

@@ -1,20 +0,0 @@
-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",
-  description:
-    "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
-  icon: SlotComponentIcon,
-  stylable: false,
-  order: 6,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {},
-};

package/src/span.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Span as SpanPrimitive } from "./span";
-
-export default {
-  title: "Components/Span",
-  component: SpanPrimitive,
-} satisfies Meta<typeof SpanPrimitive>;
-
-export const Span: StoryObj<typeof SpanPrimitive> = {
-  args: {
-    children: "some span text",
-  },
-};

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

@@ -1,27 +0,0 @@
-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: "Text",
-  icon: PaintBrushIcon,
-  states: defaultStates,
-  presetStyle,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id"],
-};

package/src/subscript.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Subscript as SubscriptPrimitive } from "./subscript";
-
-export default {
-  title: "Components/Subscript",
-  component: SubscriptPrimitive,
-} satisfies Meta<typeof SubscriptPrimitive>;
-
-export const Subscript: StoryObj<typeof SubscriptPrimitive> = {
-  args: {
-    children: "some subscript text",
-  },
-};

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

@@ -1,27 +0,0 @@
-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,
-  initialProps: ["id"],
-};

package/src/superscript.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Superscript as SuperscriptPrimitive } from "./superscript";
-
-export default {
-  title: "Components/Superscript",
-  component: SuperscriptPrimitive,
-} satisfies Meta<typeof SuperscriptPrimitive>;
-
-export const Superscript: StoryObj<typeof SuperscriptPrimitive> = {
-  args: {
-    children: "some superscript text",
-  },
-};

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

@@ -1,27 +0,0 @@
-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,
-  initialProps: ["id"],
-};

package/src/text.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Text as TextPrimitive } from "./text";
-
-export default {
-  title: "Components/Text",
-  component: TextPrimitive,
-} satisfies Meta<typeof TextPrimitive>;
-
-export const Text: StoryObj<typeof TextPrimitive> = {
-  args: {
-    children: "text",
-  },
-};

package/src/text.tsx

@@ -1,22 +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> & {
-  /** Use this property to change the HTML tag of this element to semantically structure and describe the content of a webpage. This can be important for accessibility tools and search engine optimization. */
-  tag?: "div" | "span" | "figcaption" | "cite";
-};
-
-export const Text = forwardRef<ElementRef<typeof defaultTag>, Props>(
-  ({ tag = defaultTag, ...props }, ref) => {
-    return createElement(tag, { ...props, ref });
-  }
-);
-
-Text.displayName = "Text";

package/src/text.ws.tsx

@@ -1,44 +0,0 @@
-import { TextIcon } 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.props";
-import type { defaultTag } from "./text";
-
-const presetStyle = {
-  div: [
-    ...div,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "em", value: 1 },
-    },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "text",
-  type: "container",
-  label: "Text",
-  description:
-    "A generic container for any text content that is not a heading or a link.",
-  icon: TextIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Text",
-      children: [{ type: "text", value: "The text you can edit" }],
-    },
-  ],
-  order: 0,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id", "tag"],
-};

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

@@ -1,50 +0,0 @@
-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" } },
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" },
-    },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "forms",
-  type: "control",
-  label: "Text Area",
-  description:
-    "A multi-line text input for collecting longer string data from your users.",
-  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: ["id", "name", "placeholder", "required", "autoFocus"],
-};

package/src/vimeo-play-button.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { VimeoPlayButton as VimeoPlayButtonPrimitive } from "./vimeo-play-button";
-
-export default {
-  title: "Components/Vimeo Play Button",
-  component: VimeoPlayButtonPrimitive,
-} satisfies Meta<typeof VimeoPlayButtonPrimitive>;
-
-export const VimeoPlayButton: StoryObj<typeof VimeoPlayButtonPrimitive> = {
-  args: {
-    style: { minHeight: 20, outline: "1px solid black" },
-  },
-};

package/src/vimeo-play-button.tsx

@@ -1,24 +0,0 @@
-import {
-  forwardRef,
-  type ElementRef,
-  type ComponentProps,
-  useContext,
-} from "react";
-import { VimeoContext } from "./vimeo";
-import { Button, defaultTag } from "./button";
-
-export { defaultTag };
-
-type Props = ComponentProps<typeof Button>;
-
-export const VimeoPlayButton = forwardRef<ElementRef<typeof defaultTag>, Props>(
-  (props, ref) => {
-    const vimeoContext = useContext(VimeoContext);
-    if (vimeoContext.status !== "initial") {
-      return null;
-    }
-    return <Button {...props} onClick={vimeoContext.onInitPlayer} ref={ref} />;
-  }
-);
-
-VimeoPlayButton.displayName = "VimeoPlayButton";

package/src/vimeo-play-button.ws.ts

@@ -1,30 +0,0 @@
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { props } from "./__generated__/vimeo-play-button.props";
-import { ButtonElementIcon } from "@webstudio-is/icons/svg";
-import { button } from "@webstudio-is/react-sdk/css-normalize";
-import { defaultTag } from "./vimeo-play-button";
-
-const presetStyle = {
-  button,
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  invalidAncestors: ["Button"],
-  requiredAncestors: ["Vimeo"],
-  label: "Play Button",
-  icon: ButtonElementIcon,
-  presetStyle,
-  states: defaultStates,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id"],
-};

package/src/vimeo-preview-image.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { VimeoPreviewImage as VimeoPreviewImagePrimitive } from "./vimeo-preview-image";
-
-export default {
-  title: "Components/Vimeo Preview Image",
-  component: VimeoPreviewImagePrimitive,
-} satisfies Meta<typeof VimeoPreviewImagePrimitive>;
-
-export const VimeoPreviewImage: StoryObj<typeof VimeoPreviewImagePrimitive> = {
-  args: {
-    style: { minHeight: 20, outline: "1px solid black" },
-  },
-};

package/src/vimeo-preview-image.tsx

@@ -1,30 +0,0 @@
-import {
-  forwardRef,
-  type ElementRef,
-  type ComponentProps,
-  useContext,
-} from "react";
-import { Image, defaultTag } from "./image";
-import { VimeoContext } from "./vimeo";
-
-// Generated using https://png-pixel.com/
-const base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
-
-type Props = ComponentProps<typeof Image>;
-
-export const VimeoPreviewImage = forwardRef<
-  ElementRef<typeof defaultTag>,
-  Props
->(({ src, ...rest }, ref) => {
-  const vimeoContext = useContext(VimeoContext);
-
-  return (
-    <Image
-      {...rest}
-      src={String(vimeoContext.previewImageUrl ?? src ?? base64Preview)}
-      ref={ref}
-    />
-  );
-});
-
-VimeoPreviewImage.displayName = "VimeoPreviewImage";

package/src/vimeo-preview-image.ws.ts

@@ -1,22 +0,0 @@
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import {
-  propsOverrides as imagePropsOverrides,
-  propsMeta as imagePropsMeta,
-  meta as imageMeta,
-} from "./image.ws";
-import { props } from "./__generated__/vimeo-preview-image.props";
-
-export const meta: WsComponentMeta = {
-  ...imageMeta,
-  category: "hidden",
-  label: "Preview Image",
-  requiredAncestors: ["Vimeo"],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: { ...props, ...imagePropsOverrides },
-  initialProps: imagePropsMeta.initialProps,
-};

package/src/vimeo-spinner.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { VimeoSpinner as VimeoSpinnerPrimitive } from "./vimeo-spinner";
-
-export default {
-  title: "Components/Vimeo Spinner",
-  component: VimeoSpinnerPrimitive,
-} satisfies Meta<typeof VimeoSpinnerPrimitive>;
-
-export const VimeoSpinner: StoryObj<typeof VimeoSpinnerPrimitive> = {
-  args: {
-    style: { minHeight: 20, outline: "1px solid black" },
-  },
-};

package/src/vimeo-spinner.tsx

@@ -1,25 +0,0 @@
-import {
-  forwardRef,
-  type ElementRef,
-  type ComponentProps,
-  useContext,
-} from "react";
-import { VimeoContext } from "./vimeo";
-
-const defaultTag = "div";
-
-type Props = ComponentProps<typeof defaultTag>;
-
-export const VimeoSpinner = forwardRef<ElementRef<typeof defaultTag>, Props>(
-  (props, ref) => {
-    const vimeoContext = useContext(VimeoContext);
-
-    if (vimeoContext.status !== "initialized") {
-      return null;
-    }
-
-    return <div {...props} ref={ref} />;
-  }
-);
-
-VimeoSpinner.displayName = "VimeoSpinner";

package/src/vimeo-spinner.ws.ts

@@ -1,28 +0,0 @@
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { props } from "./__generated__/vimeo-spinner.props";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import { BoxIcon } from "@webstudio-is/icons/svg";
-
-const presetStyle = {
-  div,
-} satisfies PresetStyle<"div">;
-
-export const meta: WsComponentMeta = {
-  type: "container",
-  icon: BoxIcon,
-  states: defaultStates,
-  presetStyle,
-  category: "hidden",
-  label: "Spinner",
-  requiredAncestors: ["Vimeo"],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id"],
-};

package/src/vimeo.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Vimeo as VimeoPrimitive } from "./vimeo";
-
-export default {
-  title: "Components/Vimeo",
-  component: VimeoPrimitive,
-} satisfies Meta<typeof VimeoPrimitive>;
-
-export const Vimeo: StoryObj<typeof VimeoPrimitive> = {
-  args: {
-    style: { minHeight: 20, outline: "1px solid black" },
-  },
-};