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

package/src/link.stories.tsx

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

package/src/link.tsx

@@ -1,43 +0,0 @@
-import { forwardRef, type ComponentProps, useContext } from "react";
-import {
-  usePropUrl,
-  getInstanceIdFromComponentProps,
-  ReactSdkContext,
-} from "@webstudio-is/react-sdk";
-
-export const defaultTag = "a";
-
-type Props = Omit<ComponentProps<"a">, "target"> & {
-  // override (string & {}) in target to generate keywords
-  target?: "_self" | "_blank" | "_parent" | "_top";
-};
-
-export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
-  const { assetBaseUrl } = useContext(ReactSdkContext);
-  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-
-  let url = "#";
-
-  switch (href?.type) {
-    case "page": {
-      url = href.page.path === "" ? "/" : href.page.path;
-      const urlTo = new URL(url, "https://any-valid.url");
-      url = urlTo.pathname;
-
-      if (href.hash !== undefined) {
-        urlTo.hash = encodeURIComponent(href.hash);
-        url = `${urlTo.pathname}${urlTo.hash}`;
-      }
-      break;
-    }
-    case "asset":
-      url = `${assetBaseUrl}${href.asset.name}`;
-      break;
-    case "string":
-      url = href.url;
-  }
-
-  return <a {...props} href={url} ref={ref} />;
-});
-
-Link.displayName = "Link";

package/src/link.ws.tsx

@@ -1,67 +0,0 @@
-import { LinkIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { a } from "@webstudio-is/react-sdk/css-normalize";
-import type { defaultTag } from "./link";
-import { props } from "./__generated__/link.props";
-
-const presetStyle = {
-  a: [
-    ...a,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "em", value: 1 },
-    },
-    {
-      property: "display",
-      value: { type: "keyword", value: "inline-block" },
-    },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "general",
-  type: "container",
-  label: "Link",
-  description:
-    "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
-  icon: LinkIcon,
-  invalidAncestors: ["Link"],
-  presetStyle,
-  order: 1,
-  states: [
-    ...defaultStates,
-    {
-      selector: ":visited",
-      label: "Visited",
-    },
-    {
-      category: "component-states",
-      selector: "[aria-current=page]",
-      label: "Current page",
-    },
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Link",
-      children: [{ type: "text", value: "Link text you can edit" }],
-    },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {
-    ...props,
-    href: {
-      type: "string",
-      control: "url",
-      required: false,
-    },
-  },
-  initialProps: ["id", "href", "target"],
-};

package/src/list-item.stories.tsx

@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { ListItem as ListItemPrimitive } from "./list-item";
-
-export default {
-  title: "Components/List Item",
-  component: ListItemPrimitive,
-} satisfies Meta<typeof ListItemPrimitive>;
-
-export const ListItem: StoryObj<typeof ListItemPrimitive> = {
-  args: {
-    children: "ListItem",
-  },
-};

package/src/list-item.tsx

@@ -1,18 +0,0 @@
-import {
-  forwardRef,
-  createElement,
-  type ElementRef,
-  type ComponentProps,
-} from "react";
-
-export const defaultTag = "li";
-
-type Props = ComponentProps<typeof defaultTag>;
-
-export const ListItem = forwardRef<ElementRef<typeof defaultTag>, Props>(
-  (props, ref) => {
-    return createElement(defaultTag, { ...props, ref });
-  }
-);
-
-ListItem.displayName = "ListItem";

package/src/list-item.ws.tsx

@@ -1,38 +0,0 @@
-import { ListItemIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { li } from "@webstudio-is/react-sdk/css-normalize";
-import type { defaultTag } from "./list-item";
-import { props } from "./__generated__/list-item.props";
-
-const presetStyle = {
-  li,
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "general",
-  type: "container",
-  requiredAncestors: ["List"],
-  label: "List Item",
-  description: "Adds a new item to an existing list.",
-  icon: ListItemIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "ListItem",
-      children: [{ type: "text", value: "List Item you can edit" }],
-    },
-  ],
-  order: 4,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id"],
-};

package/src/list.stories.tsx

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { List as ListPrimitive } from "./list";
-import { ListItem } from "./list-item";
-
-export default {
-  title: "Components/List",
-  component: ListPrimitive,
-} satisfies Meta<typeof ListPrimitive>;
-
-export const List: StoryObj<typeof ListPrimitive> = {
-  args: {
-    children: <ListItem>List</ListItem>,
-  },
-};

package/src/list.tsx

@@ -1,27 +0,0 @@
-import {
-  forwardRef,
-  createElement,
-  type ElementRef,
-  type ComponentProps,
-} from "react";
-
-const unorderedTag = "ul";
-const orderedTag = "ol";
-
-export type ListTag = typeof unorderedTag | typeof orderedTag;
-
-type Props = ComponentProps<typeof unorderedTag> &
-  ComponentProps<typeof orderedTag> & {
-    /** Shows numbers instead of bullets when toggled. See the “List Style Type” property under the “List Item” section in the Style panel for more options. */
-    ordered?: boolean;
-  };
-
-export const List = forwardRef<
-  ElementRef<typeof unorderedTag | typeof orderedTag>,
-  Props
->(({ ordered = false, ...props }, ref) => {
-  const tag = ordered ? orderedTag : unorderedTag;
-  return createElement(tag, { ...props, ref });
-});
-
-List.displayName = "List";

package/src/list.ws.tsx

@@ -1,59 +0,0 @@
-import { ListIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { ol, ul } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/list.props";
-import type { ListTag } from "./list";
-
-const presetStyle = {
-  ol: [
-    ...ol,
-    {
-      property: "marginTop",
-      value: { type: "keyword", value: "0" },
-    },
-    {
-      property: "marginBottom",
-      value: { type: "keyword", value: "10px" },
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "keyword", value: "40px" },
-    },
-  ],
-  ul: [
-    ...ul,
-    {
-      property: "marginTop",
-      value: { type: "keyword", value: "0" },
-    },
-    {
-      property: "marginBottom",
-      value: { type: "keyword", value: "10px" },
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "keyword", value: "40px" },
-    },
-  ],
-} satisfies PresetStyle<ListTag>;
-
-export const meta: WsComponentMeta = {
-  category: "general",
-  type: "container",
-  label: "List",
-  description: "Groups content, like links in a menu or steps in a recipe.",
-  icon: ListIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 3,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id", "ordered", "start", "reversed"],
-};

package/src/metas.ts

@@ -1,32 +0,0 @@
-export { meta as Slot } from "./slot.ws";
-export { meta as Fragment } from "./fragment.ws";
-export { meta as HtmlEmbed } from "./html-embed.ws";
-export { meta as Body } from "./body.ws";
-export { meta as Box } from "./box.ws";
-export { meta as Text } from "./text.ws";
-export { meta as Heading } from "./heading.ws";
-export { meta as Paragraph } from "./paragraph.ws";
-export { meta as Link } from "./link.ws";
-export { meta as RichTextLink } from "./rich-text-link.ws";
-export { meta as Span } from "./span.ws";
-export { meta as Bold } from "./bold.ws";
-export { meta as Italic } from "./italic.ws";
-export { meta as Superscript } from "./superscript.ws";
-export { meta as Subscript } from "./subscript.ws";
-export { meta as Button } from "./button.ws";
-export { meta as Input } from "./input.ws";
-export { meta as Form } from "./form.ws";
-export { meta as Image } from "./image.ws";
-export { meta as Blockquote } from "./blockquote.ws";
-export { meta as List } from "./list.ws";
-export { meta as ListItem } from "./list-item.ws";
-export { meta as Separator } from "./separator.ws";
-export { meta as CodeText } from "./code-text.ws";
-export { meta as Label } from "./label.ws";
-export { meta as Textarea } from "./textarea.ws";
-export { meta as RadioButton } from "./radio-button.ws";
-export { meta as Checkbox } from "./checkbox.ws";
-export { meta as Vimeo } from "./vimeo.ws";
-export { meta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
-export { meta as VimeoPlayButton } from "./vimeo-play-button.ws";
-export { meta as VimeoSpinner } from "./vimeo-spinner.ws";

package/src/paragraph.stories.tsx

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

package/src/paragraph.tsx

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

package/src/paragraph.ws.tsx

@@ -1,38 +0,0 @@
-import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { p } from "@webstudio-is/react-sdk/css-normalize";
-import type { defaultTag } from "./paragraph";
-import { props } from "./__generated__/paragraph.props";
-
-const presetStyle = {
-  p,
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "text",
-  type: "container",
-  label: "Paragraph",
-  description: "A container for multi-line text.",
-  icon: TextAlignLeftIcon,
-  invalidAncestors: ["Paragraph"],
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Paragraph",
-      children: [{ type: "text", value: "Paragraph you can edit" }],
-    },
-  ],
-  order: 2,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id"],
-};

package/src/props.ts

@@ -1,32 +0,0 @@
-export { propsMeta as Slot } from "./slot.ws";
-export { propsMeta as Fragment } from "./fragment.ws";
-export { propsMeta as HtmlEmbed } from "./html-embed.ws";
-export { propsMeta as Body } from "./body.ws";
-export { propsMeta as Box } from "./box.ws";
-export { propsMeta as Text } from "./text.ws";
-export { propsMeta as Heading } from "./heading.ws";
-export { propsMeta as Paragraph } from "./paragraph.ws";
-export { propsMeta as Link } from "./link.ws";
-export { propsMeta as RichTextLink } from "./rich-text-link.ws";
-export { propsMeta as Span } from "./span.ws";
-export { propsMeta as Bold } from "./bold.ws";
-export { propsMeta as Italic } from "./italic.ws";
-export { propsMeta as Superscript } from "./superscript.ws";
-export { propsMeta as Subscript } from "./subscript.ws";
-export { propsMeta as Button } from "./button.ws";
-export { propsMeta as Input } from "./input.ws";
-export { propsMeta as Form } from "./form.ws";
-export { propsMeta as Image } from "./image.ws";
-export { propsMeta as Blockquote } from "./blockquote.ws";
-export { propsMeta as List } from "./list.ws";
-export { propsMeta as ListItem } from "./list-item.ws";
-export { propsMeta as Separator } from "./separator.ws";
-export { propsMeta as CodeText } from "./code-text.ws";
-export { propsMeta as Label } from "./label.ws";
-export { propsMeta as Textarea } from "./textarea.ws";
-export { propsMeta as RadioButton } from "./radio-button.ws";
-export { propsMeta as Checkbox } from "./checkbox.ws";
-export { propsMeta as Vimeo } from "./vimeo.ws";
-export { propsMeta as VimeoPreviewImage } from "./vimeo-preview-image.ws";
-export { propsMeta as VimeoPlayButton } from "./vimeo-play-button.ws";
-export { propsMeta as VimeoSpinner } from "./vimeo-spinner.ws";

package/src/radio-button.tsx

@@ -1,13 +0,0 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
-
-export const defaultTag = "input";
-
-export const RadioButton = 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="radio" ref={ref} />
-));
-
-RadioButton.displayName = "RadioButton";

package/src/radio-button.ws.tsx

@@ -1,64 +0,0 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  type PresetStyle,
-  defaultStates,
-} from "@webstudio-is/react-sdk";
-import type { defaultTag } from "./radio-button";
-import { input } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/radio-button.props";
-
-const presetStyle = {
-  input: [
-    ...input,
-    {
-      property: "marginRight",
-      value: { type: "unit", unit: "em", value: 0.5 },
-    },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "forms",
-  invalidAncestors: ["Button"],
-  type: "control",
-  label: "Radio",
-  description:
-    "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their “Name” properties.",
-  icon: RadioCheckedIcon,
-  presetStyle,
-  order: 5,
-  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" },
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Radio Field",
-      children: [
-        { type: "instance", component: "RadioButton", props: [], children: [] },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Radio Label",
-          props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Radio" }],
-        },
-      ],
-    },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id", "name"],
-};

package/src/rich-text-link.stories.tsx

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

package/src/rich-text-link.tsx

@@ -1,8 +0,0 @@
-import { forwardRef } from "react";
-import { Link } from "./link";
-
-export const RichTextLink: typeof Link = forwardRef((props, ref) => (
-  <Link {...props} ref={ref} />
-));
-
-RichTextLink.displayName = "RichTextLink";

package/src/rich-text-link.ws.tsx

@@ -1,14 +0,0 @@
-import type {
-  WsComponentMeta,
-  WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
-
-export const meta: WsComponentMeta = {
-  ...linkMeta,
-  category: "hidden",
-  type: "rich-text-child",
-  template: [],
-};
-
-export const propsMeta: WsComponentPropsMeta = linkPropsMeta;

package/src/separator.stories.tsx

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Separator as SeparatorPrimitive } from "./separator";
-
-export default {
-  title: "Components/Separator",
-  component: SeparatorPrimitive,
-} satisfies Meta<typeof SeparatorPrimitive>;
-
-export const Separator: StoryObj<typeof SeparatorPrimitive> = {};

package/src/separator.tsx

@@ -1,18 +0,0 @@
-import {
-  forwardRef,
-  createElement,
-  type ElementRef,
-  type ComponentProps,
-} from "react";
-
-export const defaultTag = "hr";
-
-type Props = ComponentProps<typeof defaultTag>;
-
-export const Separator = forwardRef<ElementRef<typeof defaultTag>, Props>(
-  (props, ref) => {
-    return createElement(defaultTag, { ...props, ref });
-  }
-);
-
-Separator.displayName = "Separator";

package/src/separator.ws.tsx

@@ -1,58 +0,0 @@
-import { DashIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { hr } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/separator.props";
-import type { defaultTag } from "./separator";
-
-const presetStyle = {
-  hr: [
-    ...hr,
-
-    {
-      property: "height",
-      value: { type: "keyword", value: "1px" },
-    },
-    {
-      property: "backgroundColor",
-      value: { type: "keyword", value: "gray" },
-    },
-    {
-      property: "borderTopStyle",
-      value: { type: "keyword", value: "none" },
-    },
-    {
-      property: "borderRightStyle",
-      value: { type: "keyword", value: "none" },
-    },
-    {
-      property: "borderLeftStyle",
-      value: { type: "keyword", value: "none" },
-    },
-    {
-      property: "borderBottomStyle",
-      value: { type: "keyword", value: "none" },
-    },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "general",
-  type: "embed",
-  label: "Separator",
-  description:
-    "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
-  icon: DashIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 5,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id"],
-};

package/src/slot.stories.tsx

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

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