@webstudio-is/react-sdk 0.69.0 → 0.71.0

package/src/components/heading.ws.tsx

@@ -1,44 +0,0 @@
-import { HeadingIcon } from "@webstudio-is/icons/svg";
-import type { ComponentProps } from "react";
-import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import type { Heading } from "./heading";
-import { props } from "./__generated__/heading.props";
-
-type HeadingTags = NonNullable<ComponentProps<typeof Heading>["tag"]>;
-
-const presetStyle = {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-} satisfies PresetStyle<HeadingTags>;
-
-export const meta: WsComponentMeta = {
-  category: "text",
-  type: "rich-text",
-  label: "Heading",
-  icon: HeadingIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Heading",
-      children: [{ type: "text", value: "Heading you can edit" }],
-    },
-  ],
-  order: 1,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["tag"],
-};

package/src/components/html-embed.stories.tsx

@@ -1,16 +0,0 @@
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
-import { HtmlEmbed as HtmlEmbedPrimitive } from "./html-embed";
-
-export default {
-  title: "Components/HtmlEmbed",
-  component: HtmlEmbedPrimitive,
-} as ComponentMeta<typeof HtmlEmbedPrimitive>;
-
-const Template: ComponentStory<typeof HtmlEmbedPrimitive> = (args) => (
-  <HtmlEmbedPrimitive {...args} />
-);
-
-export const HtmlEmbed = Template.bind({});
-HtmlEmbed.args = {
-  code: "<strong>custom code</strong>",
-};

package/src/components/html-embed.tsx

@@ -1,96 +0,0 @@
-import {
-  forwardRef,
-  useContext,
-  useEffect,
-  useRef,
-  type ForwardedRef,
-} from "react";
-import { mergeRefs } from "@react-aria/utils";
-import { ReactSdkContext } from "../context";
-
-type Props = {
-  code: string;
-  executeScriptOnCanvas: boolean;
-};
-
-type ChildProps = {
-  innerRef: ForwardedRef<HTMLDivElement>;
-  // code can be actually undefined when prop is not provided
-  code?: string;
-};
-
-/**
- * Scripts are executed when rendered client side.
- * Necessary on canvas which does not have server rendering.
- */
-const ExecutableHtml = (props: ChildProps) => {
-  const { code, innerRef, ...rest } = props;
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (container === null || code === undefined) {
-      return;
-    }
-    // the trick to execute inserted scripts
-    // https://ghinda.net/article/script-tags
-    const range = document.createRange();
-    range.setStart(container, 0);
-    const fragment = range.createContextualFragment(code);
-    while (container.firstChild) {
-      container.removeChild(container.firstChild);
-    }
-    container.append(fragment);
-  }, [code]);
-
-  return (
-    <div
-      {...rest}
-      ref={mergeRefs(innerRef, containerRef)}
-      style={{ display: "contents" }}
-    />
-  );
-};
-
-/**
- * Scripts are executed when rendered server side
- */
-const InnerHtml = (props: ChildProps) => {
-  const { code, innerRef, ...rest } = props;
-
-  return (
-    <div
-      {...rest}
-      ref={innerRef}
-      style={{ display: "contents" }}
-      dangerouslySetInnerHTML={{ __html: props.code ?? "" }}
-    />
-  );
-};
-
-const Placeholder = (props: ChildProps) => {
-  const { code, innerRef, ...rest } = props;
-  return (
-    <div ref={innerRef} {...rest} style={{ padding: "20px" }}>
-      {'Open "Properties" panel to insert HTML code'}
-    </div>
-  );
-};
-
-export const HtmlEmbed = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { renderer } = useContext(ReactSdkContext);
-  const { code, executeScriptOnCanvas, ...rest } = props;
-
-  // code can be actually undefined when prop is not provided
-  if (code === undefined || code.trim().length === 0) {
-    return <Placeholder innerRef={ref} {...rest} />;
-  }
-
-  if (renderer === "canvas" && executeScriptOnCanvas === true) {
-    return <ExecutableHtml innerRef={ref} code={code} {...rest} />;
-  }
-
-  return <InnerHtml innerRef={ref} code={code} {...rest} />;
-});
-
-HtmlEmbed.displayName = "HtmlEmbed";

package/src/components/html-embed.ws.ts

@@ -1,24 +0,0 @@
-import { EmbedIcon } from "@webstudio-is/icons/svg";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
-import { props } from "./__generated__/html-embed.props";
-
-export const meta: WsComponentMeta = {
-  category: "general",
-  type: "embed",
-  label: "HTML Embed",
-  icon: EmbedIcon,
-  stylable: false,
-  order: 7,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {
-    ...props,
-    code: {
-      required: true,
-      control: "code",
-      type: "string",
-      rows: 10,
-    },
-  },
-};

package/src/components/image.stories.tsx

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

package/src/components/image.tsx

@@ -1,80 +0,0 @@
-import {
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-  forwardRef,
-  useMemo,
-} from "react";
-import {
-  Image as WebstudioImage,
-  createImageLoader,
-} from "@webstudio-is/image";
-import { usePropAsset, getInstanceIdFromComponentProps } from "../props";
-import { getParams } from "../app/params";
-
-export const defaultTag = "img";
-
-const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
-  width="140"
-  height="140"
-  viewBox="0 0 600 600"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  >
-  <rect width="600" height="600" fill="#CCCCCC" />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
-    fill="#A2A2A2"
-  />
-</svg>`)}`;
-
-type Props = ComponentPropsWithoutRef<typeof WebstudioImage>;
-
-export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
-  (props, ref) => {
-    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
-
-    const loader = useMemo(() => {
-      const params = getParams();
-      return createImageLoader({ imageBaseUrl: params.imageBaseUrl });
-    }, []);
-
-    const src = asset?.name ?? props.src;
-
-    if (asset == null || loader == null) {
-      return (
-        <img key={src} {...props} src={src || imagePlaceholderSvg} ref={ref} />
-      );
-    }
-
-    return (
-      <WebstudioImage
-        /**
-         * `key` is needed to recreate the image in case of asset change in builder,
-         * this gives immediate feedback when an asset is changed.
-         * Also, it visually fixes image distortion when another asset has a seriously different  aspectRatio
-         * (we change aspectRatio CSS prop on asset change)
-         *
-         * In non-builder mode, key on images are usually also a good idea,
-         * prevents showing outdated images on route change.
-         **/
-        key={src}
-        {...props}
-        loader={loader}
-        src={src}
-        ref={ref}
-      />
-    );
-  }
-);
-
-Image.displayName = "Image";

package/src/components/image.ws.tsx

@@ -1,54 +0,0 @@
-import { ImageIcon } from "@webstudio-is/icons/svg";
-import { img } from "../css/normalize";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import type { defaultTag } from "./image";
-import { props } from "./__generated__/image.props";
-
-const presetStyle = {
-  img: [
-    ...img,
-
-    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-    {
-      property: "maxWidth",
-      value: { type: "unit", unit: "%", value: 100 },
-    },
-    // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
-    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" },
-    },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "media",
-  type: "embed",
-  label: "Image",
-  icon: ImageIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 0,
-};
-
-// "loader" is our internal prop not intended to show up in the props panel
-const { loader, ...publicProps } = props;
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {
-    ...publicProps,
-    src: {
-      type: "string",
-      control: "file",
-      label: "Source",
-      required: false,
-    },
-  },
-  initialProps: ["src", "width", "height", "alt", "loading"],
-};

package/src/components/index.ts

@@ -1,143 +0,0 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
-import { meta as SlotMeta } from "./slot.ws";
-import { meta as FragmentMeta } from "./fragment.ws";
-import { meta as HtmlEmbedMeta } from "./html-embed.ws";
-import { meta as BodyMeta } from "./body.ws";
-import { meta as BoxMeta } from "./box.ws";
-import { meta as TextBlockMeta } from "./text-block.ws";
-import { meta as HeadingMeta } from "./heading.ws";
-import { meta as ParagraphMeta } from "./paragraph.ws";
-import { meta as LinkMeta } from "./link.ws";
-import { meta as LinkBlockMeta } from "./link-block.ws";
-import { meta as RichTextLinkMeta } from "./rich-text-link.ws";
-import { meta as SpanMeta } from "./span.ws";
-import { meta as BoldMeta } from "./bold.ws";
-import { meta as ItalicMeta } from "./italic.ws";
-import { meta as SuperscriptMeta } from "./superscript.ws";
-import { meta as SubscriptMeta } from "./subscript.ws";
-import { meta as ButtonMeta } from "./button.ws";
-import { meta as InputMeta } from "./input.ws";
-import { meta as FormMeta } from "./form.ws";
-import { meta as ImageMeta } from "./image.ws";
-import { meta as BlockquoteMeta } from "./blockquote.ws";
-import { meta as ListMeta } from "./list.ws";
-import { meta as ListItemMeta } from "./list-item.ws";
-import { meta as SeparatorMeta } from "./separator.ws";
-import { meta as CodeTextMeta } from "./code-text.ws";
-import { meta as LabelMeta } from "./label.ws";
-import { meta as SuccessMessageMeta } from "./success-message.ws";
-import { meta as ErrorMessageMeta } from "./error-message.ws";
-import { meta as TextareaMeta } from "./textarea.ws";
-import { meta as RadioButtonFieldMeta } from "./radio-button-field.ws";
-import { meta as RadioButtonMeta } from "./radio-button.ws";
-import { meta as CheckboxFieldMeta } from "./checkbox-field.ws";
-import { meta as CheckboxMeta } from "./checkbox.ws";
-
-// these are huge JSON objects that we want to be tree-shaken when not used!
-import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
-import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
-import { propsMeta as HtmlEmbedMetaPropsMeta } from "./html-embed.ws";
-import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
-import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
-import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
-import { propsMeta as HeadingMetaPropsMeta } from "./heading.ws";
-import { propsMeta as ParagraphMetaPropsMeta } from "./paragraph.ws";
-import { propsMeta as LinkMetaPropsMeta } from "./link.ws";
-import { propsMeta as LinkBlockPropsMeta } from "./link-block.ws";
-import { propsMeta as RichTextLinkMetaPropsMeta } from "./rich-text-link.ws";
-import { propsMeta as SpanMetaPropsMeta } from "./span.ws";
-import { propsMeta as BoldMetaPropsMeta } from "./bold.ws";
-import { propsMeta as ItalicMetaPropsMeta } from "./italic.ws";
-import { propsMeta as SuperscriptMetaPropsMeta } from "./superscript.ws";
-import { propsMeta as SubscriptMetaPropsMeta } from "./subscript.ws";
-import { propsMeta as ButtonMetaPropsMeta } from "./button.ws";
-import { propsMeta as InputMetaPropsMeta } from "./input.ws";
-import { propsMeta as FormMetaPropsMeta } from "./form.ws";
-import { propsMeta as ImageMetaPropsMeta } from "./image.ws";
-import { propsMeta as BlockquotePropsMeta } from "./blockquote.ws";
-import { propsMeta as ListPropsMeta } from "./list.ws";
-import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
-import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
-import { propsMeta as CodeTextPropsMeta } from "./code-text.ws";
-import { propsMeta as LabelPropsMeta } from "./label.ws";
-import { propsMeta as SuccessMessagePropsMeta } from "./success-message.ws";
-import { propsMeta as ErrorMessagePropsMeta } from "./error-message.ws";
-import { propsMeta as TextareaPropsMeta } from "./textarea.ws";
-import { propsMeta as RadioButtonFieldPropsMeta } from "./radio-button-field.ws";
-import { propsMeta as RadioButtonPropsMeta } from "./radio-button.ws";
-import { propsMeta as CheckboxFieldPropsMeta } from "./checkbox-field.ws";
-import { propsMeta as CheckboxPropsMeta } from "./checkbox.ws";
-
-// @todo this list should not be hardcoded!
-export const defaultMetas: Record<string, WsComponentMeta> = {
-  Slot: SlotMeta,
-  Fragment: FragmentMeta,
-  HtmlEmbed: HtmlEmbedMeta,
-  Box: BoxMeta,
-  Body: BodyMeta,
-  TextBlock: TextBlockMeta,
-  Heading: HeadingMeta,
-  Paragraph: ParagraphMeta,
-  Link: LinkMeta,
-  LinkBlock: LinkBlockMeta,
-  RichTextLink: RichTextLinkMeta,
-  Span: SpanMeta,
-  Bold: BoldMeta,
-  Italic: ItalicMeta,
-  Superscript: SuperscriptMeta,
-  Subscript: SubscriptMeta,
-  Button: ButtonMeta,
-  Input: InputMeta,
-  Form: FormMeta,
-  Image: ImageMeta,
-  Blockquote: BlockquoteMeta,
-  List: ListMeta,
-  ListItem: ListItemMeta,
-  Separator: SeparatorMeta,
-  CodeText: CodeTextMeta,
-  Label: LabelMeta,
-  SuccessMessage: SuccessMessageMeta,
-  ErrorMessage: ErrorMessageMeta,
-  Textarea: TextareaMeta,
-  RadioButtonField: RadioButtonFieldMeta,
-  RadioButton: RadioButtonMeta,
-  CheckboxField: CheckboxFieldMeta,
-  Checkbox: CheckboxMeta,
-};
-
-// @todo this list should not be hardcoded!
-export const defaultPropsMetas: Record<string, WsComponentPropsMeta> = {
-  Slot: SlotMetaPropsMeta,
-  Fragment: FragmentMetaPropsMeta,
-  HtmlEmbed: HtmlEmbedMetaPropsMeta,
-  Box: BoxMetaPropsMeta,
-  Body: BodyMetaPropsMeta,
-  TextBlock: TextBlockMetaPropsMeta,
-  Heading: HeadingMetaPropsMeta,
-  Paragraph: ParagraphMetaPropsMeta,
-  Link: LinkMetaPropsMeta,
-  LinkBlock: LinkBlockPropsMeta,
-  RichTextLink: RichTextLinkMetaPropsMeta,
-  Span: SpanMetaPropsMeta,
-  Bold: BoldMetaPropsMeta,
-  Italic: ItalicMetaPropsMeta,
-  Superscript: SuperscriptMetaPropsMeta,
-  Subscript: SubscriptMetaPropsMeta,
-  Button: ButtonMetaPropsMeta,
-  Input: InputMetaPropsMeta,
-  Form: FormMetaPropsMeta,
-  Image: ImageMetaPropsMeta,
-  Blockquote: BlockquotePropsMeta,
-  List: ListPropsMeta,
-  ListItem: ListItemPropsMeta,
-  Separator: SeparatorPropsMeta,
-  CodeText: CodeTextPropsMeta,
-  Label: LabelPropsMeta,
-  SuccessMessage: SuccessMessagePropsMeta,
-  ErrorMessage: ErrorMessagePropsMeta,
-  Textarea: TextareaPropsMeta,
-  RadioButtonField: RadioButtonFieldPropsMeta,
-  RadioButton: RadioButtonPropsMeta,
-  CheckboxField: CheckboxFieldPropsMeta,
-  Checkbox: CheckboxPropsMeta,
-};

package/src/components/input.stories.tsx

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

package/src/components/input.tsx

@@ -1,13 +0,0 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
-
-export const defaultTag = "input";
-
-export const Input = forwardRef<
-  ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag> & {
-    type?: "text" | "email" | "password" | "number" | "tel" | "url";
-  }
-  // Make sure children are not passed down to an input, because this will result in error.
->(({ children: _children, ...props }, ref) => <input {...props} ref={ref} />);
-
-Input.displayName = "Input";

package/src/components/input.ws.tsx

@@ -1,40 +0,0 @@
-import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
-import { input } from "../css/normalize";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import type { defaultTag } from "./input";
-import { props } from "./__generated__/input.props";
-
-const presetStyle = {
-  input,
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "forms",
-  type: "control",
-  label: "Text Input",
-  icon: FormTextFieldIcon,
-  presetStyle,
-  order: 3,
-  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", "type", "placeholder", "required", "autoFocus"],
-};

package/src/components/italic.stories.tsx

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

package/src/components/italic.tsx

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

package/src/components/italic.ws.tsx

@@ -1,32 +0,0 @@
-import { TextItalicIcon } from "@webstudio-is/icons/svg";
-import type { defaultTag } from "./italic";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "./component-meta";
-import { props } from "./__generated__/italic.props";
-import { i } from "../css/normalize";
-
-const presetStyle = {
-  i: [
-    ...i,
-    {
-      property: "fontStyle",
-      value: { type: "keyword", value: "italic" },
-    },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  type: "rich-text-child",
-  label: "Italic Text",
-  icon: TextItalicIcon,
-  states: defaultStates,
-  presetStyle,
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-};

package/src/components/label.tsx

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

package/src/components/label.ws.tsx

@@ -1,48 +0,0 @@
-import { TextBlockIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  type PresetStyle,
-  defaultStates,
-} from "./component-meta";
-import { props } from "./__generated__/label.props";
-import type { defaultTag } from "./label";
-import { label } from "../css/normalize";
-
-const presetStyle = {
-  label: [
-    ...label,
-    { property: "display", value: { type: "keyword", value: "block" } },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "forms",
-  type: "rich-text",
-  label: "Input Label",
-  icon: TextBlockIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      children: [{ type: "text", value: "Form Label" }],
-    },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {
-    ...props,
-    htmlFor: {
-      required: false,
-      control: "text",
-      type: "string",
-      rows: 0,
-      label: "For",
-    },
-  },
-  initialProps: ["htmlFor"],
-};

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

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