@webstudio-is/react-sdk 0.69.0 → 0.71.0

package/src/components/link-block.tsx

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

package/src/components/link-block.ws.tsx

@@ -1,38 +0,0 @@
-import { LinkBlockIcon } from "@webstudio-is/icons/svg";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
-} from "./component-meta";
-import { props } from "./__generated__/link-block.props";
-import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
-import type { defaultTag } from "./link-block";
-import { a } from "../css/normalize";
-
-const presetStyle = {
-  a: [
-    ...a,
-    {
-      property: "display",
-      value: { type: "keyword", value: "inline-block" },
-    },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "general",
-  type: "container",
-  label: "Link Block",
-  icon: LinkBlockIcon,
-  states: linkMeta.states,
-  presetStyle,
-  order: 2,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {
-    ...props,
-    href: linkPropsMeta.props.href,
-  },
-  initialProps: linkPropsMeta.initialProps,
-};

package/src/components/link.stories.tsx

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

@@ -1,41 +0,0 @@
-import { forwardRef, type ComponentProps } from "react";
-import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
-import { getParams } from "../app/params";
-
-export const defaultTag = "a";
-
-// @todo props that come from remix link, shouldn't be here at all
-// - prefetch should be only on remix component and it already is
-// - props meta should be generated from Remix link
-// - changing this requires update in app/canvas/custom-components/link.tsx
-type Props = Omit<ComponentProps<"a">, "href" | "target"> & {
-  href?: string;
-  target?: "_self" | "_blank" | "_parent" | "_top";
-  prefetch?: "none" | "intent" | "render";
-};
-
-export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
-  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-
-  const { assetBaseUrl } = getParams();
-
-  let url = "#";
-
-  switch (href?.type) {
-    case "page":
-      url = href.page.path === "" ? "/" : href.page.path;
-      if (href.hash !== undefined) {
-        url += `#${href.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/components/link.ws.tsx

@@ -1,64 +0,0 @@
-import { LinkIcon } from "@webstudio-is/icons/svg";
-import { a } from "../css/normalize";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-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: "rich-text",
-  label: "Link Text",
-  icon: LinkIcon,
-  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: ["href", "target", "prefetch"],
-};

package/src/components/list-item.stories.tsx

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

package/src/components/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/components/list-item.ws.tsx

@@ -1,36 +0,0 @@
-import { ListItemIcon } from "@webstudio-is/icons/svg";
-import { li } from "../css/normalize";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-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: "rich-text",
-  requiredAncestors: ["List"],
-  label: "List Item",
-  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,
-};

package/src/components/list.stories.tsx

@@ -1,17 +0,0 @@
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
-import { List as ListPrimitive } from "./list";
-import { ListItem } from "./list-item";
-
-export default {
-  title: "Components/List",
-  component: ListPrimitive,
-} as ComponentMeta<typeof ListPrimitive>;
-
-const Template: ComponentStory<typeof ListPrimitive> = (args) => (
-  <ListPrimitive {...args} />
-);
-
-export const List = Template.bind({});
-List.args = {
-  children: <ListItem />,
-};

package/src/components/list.tsx

@@ -1,26 +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> & {
-    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/components/list.ws.tsx

@@ -1,58 +0,0 @@
-import { ListIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import { props } from "./__generated__/list.props";
-import type { ListTag } from "./list";
-import { ol, ul } from "../css/normalize";
-
-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",
-  icon: ListIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 3,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["ordered", "type", "starts", "reversed"],
-};

package/src/components/paragraph.stories.tsx

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

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

@@ -1,35 +0,0 @@
-import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
-import { p } from "../css/normalize";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-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: "rich-text",
-  label: "Paragraph",
-  icon: TextAlignLeftIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Paragraph",
-      children: [{ type: "text", value: "Pragraph you can edit" }],
-    },
-  ],
-  order: 2,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-};

package/src/components/radio-button-field.tsx

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

package/src/components/radio-button-field.ws.tsx

@@ -1,47 +0,0 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  type PresetStyle,
-  defaultStates,
-} from "./component-meta";
-import { props } from "./__generated__/radio-button-field.props";
-import type { defaultTag } from "./radio-button-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: "Radio",
-  icon: RadioCheckedIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "RadioButtonField",
-      children: [
-        { type: "instance", component: "RadioButton", props: [], children: [] },
-        {
-          type: "instance",
-          component: "TextBlock",
-          label: "Radio Label",
-          props: [],
-          children: [{ type: "text", value: "Radio" }],
-        },
-      ],
-    },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: [],
-};

package/src/components/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/components/radio-button.ws.tsx

@@ -1,43 +0,0 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  type PresetStyle,
-  defaultStates,
-} from "./component-meta";
-import type { defaultTag } from "./radio-button";
-import { input } from "../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 = {
-  type: "control",
-  label: "Radio Input",
-  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" },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["name"],
-};

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

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

package/src/components/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/components/rich-text-link.ws.tsx

@@ -1,19 +0,0 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
-import { props } from "./__generated__/rich-text-link.props";
-import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
-
-const { category, ...linkMetaRest } = linkMeta;
-
-export const meta: WsComponentMeta = {
-  ...linkMetaRest,
-  type: "rich-text-child",
-  template: [],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  initialProps: linkPropsMeta.initialProps,
-  props: {
-    ...props,
-    href: linkPropsMeta.props.href,
-  },
-};

package/src/components/separator.stories.tsx

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

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

@@ -1,56 +0,0 @@
-import { DashIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import { props } from "./__generated__/separator.props";
-import type { defaultTag } from "./separator";
-import { hr } from "../css/normalize";
-
-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",
-  icon: DashIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 5,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: [],
-};