@webstudio-is/sdk-components-react 0.79.0 → 0.80.0

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

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

package/src/separator.stories.tsx

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

package/src/separator.ws.tsx

@@ -52,5 +52,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: [],
+  initialProps: ["id"],
 };

package/src/slot.stories.tsx

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

package/src/span.stories.tsx

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

package/src/span.ws.tsx

@@ -23,4 +23,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
+  initialProps: ["id"],
 };

package/src/subscript.stories.tsx

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

package/src/subscript.ws.tsx

@@ -23,4 +23,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
+  initialProps: ["id"],
 };

package/src/superscript.stories.tsx

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

package/src/superscript.ws.tsx

@@ -23,4 +23,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
+  initialProps: ["id"],
 };

package/src/text.stories.tsx

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

package/src/text.ws.tsx

@@ -38,5 +38,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["tag"],
+  initialProps: ["id", "tag"],
 };

package/src/textarea.ws.tsx

@@ -14,6 +14,10 @@ const presetStyle = {
     ...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>;
 
@@ -40,5 +44,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["name", "placeholder", "required", "autoFocus"],
+  initialProps: ["id", "name", "placeholder", "required", "autoFocus"],
 };

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

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

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

@@ -26,4 +26,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
+  initialProps: ["id"],
 };

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

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

package/src/vimeo-spinner.stories.tsx

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

package/src/vimeo-spinner.ws.ts

@@ -24,4 +24,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
+  initialProps: ["id"],
 };

package/src/vimeo.stories.tsx

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

package/src/vimeo.tsx

@@ -413,8 +413,9 @@ const EmptyState = () => {
         fontSize: "1.2em",
       }}
     >
-      Open the Properties panel and paste a video URL, e.g.
-      https://vimeo.com/831343124.
+      {
+        'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
+      }
     </div>
   );
 };

package/src/vimeo.ws.ts

@@ -7,7 +7,8 @@ import {
 } from "@webstudio-is/react-sdk";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
 import { props } from "./__generated__/vimeo.props";
-import { type VimeoOptions } from "./vimeo";
+import { Vimeo } from "./vimeo";
+import type { ComponentProps } from "react";
 
 const presetStyle = {
   div,
@@ -309,7 +310,8 @@ export const meta: WsComponentMeta = {
   ],
 };
 
-const initialProps: Array<keyof VimeoOptions> = [
+const initialProps: Array<keyof ComponentProps<typeof Vimeo>> = [
+  "id",
   "url",
   "quality",
   "showPreview",