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

package/lib/vimeo-spinner.ws.js

@@ -17,7 +17,8 @@ const meta = {
   requiredAncestors: ["Vimeo"]
 };
 const propsMeta = {
-  props
+  props,
+  initialProps: ["id"]
 };
 export {
   meta,

package/lib/vimeo.js

@@ -266,7 +266,7 @@ const EmptyState = () => {
         justifyContent: "center",
         fontSize: "1.2em"
       },
-      children: "Open the Properties panel and paste a video URL, e.g. https://vimeo.com/831343124."
+      children: 'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
     }
   );
 };

package/lib/vimeo.ws.js

@@ -303,6 +303,7 @@ const meta = {
   ]
 };
 const initialProps = [
+  "id",
   "url",
   "quality",
   "showPreview",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.79.0",
+  "version": "0.80.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,14 +40,14 @@
     "@react-aria/utils": "^3.13.3",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-vars": "^0.79.0",
-    "@webstudio-is/generate-arg-types": "^0.79.0",
-    "@webstudio-is/icons": "^0.79.0",
-    "@webstudio-is/image": "^0.79.0",
-    "@webstudio-is/react-sdk": "^0.79.0"
+    "@webstudio-is/css-vars": "^0.80.0",
+    "@webstudio-is/generate-arg-types": "^0.80.0",
+    "@webstudio-is/icons": "^0.80.0",
+    "@webstudio-is/image": "^0.80.0",
+    "@webstudio-is/react-sdk": "^0.80.0"
   },
   "devDependencies": {
-    "@storybook/react": "^7.0.23",
+    "@storybook/react": "^7.0.26",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",

package/src/blockquote.stories.tsx

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

package/src/blockquote.ws.tsx

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

package/src/body.stories.tsx

@@ -1,11 +1,13 @@
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Body as BodyPrimitive } from "./body";
 
 export default {
   title: "Components/Body",
   component: BodyPrimitive,
-} as ComponentMeta<typeof BodyPrimitive>;
+} satisfies Meta<typeof BodyPrimitive>;
 
-export const Body: ComponentStory<typeof BodyPrimitive> = (args) => (
-  <BodyPrimitive {...args} />
-);
+export const Body: StoryObj<typeof BodyPrimitive> = {
+  args: {
+    children: "Body",
+  },
+};

package/src/body.ws.tsx

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

package/src/bold.stories.tsx

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

package/src/bold.ws.tsx

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

package/src/box.stories.tsx

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

package/src/box.ws.ts

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

package/src/button.stories.tsx

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

package/src/button.ws.tsx

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

package/src/checkbox.ws.tsx

@@ -21,6 +21,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "forms",
+  invalidAncestors: ["Button"],
   type: "control",
   label: "Checkbox",
   icon: CheckboxCheckedIcon,
@@ -57,5 +58,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["name"],
+  initialProps: ["id", "name"],
 };

package/src/code-text.stories.tsx

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

package/src/code-text.ws.tsx

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

package/src/form.stories.tsx

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

package/src/form.ws.tsx

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

package/src/heading.stories.tsx

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

package/src/heading.ws.tsx

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

package/src/html-embed.stories.tsx

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

package/src/html-embed.tsx

@@ -72,7 +72,7 @@ const Placeholder = (props: ChildProps) => {
   const { code, innerRef, ...rest } = props;
   return (
     <div ref={innerRef} {...rest} style={{ padding: "20px" }}>
-      {'Open "Properties" panel to insert HTML code'}
+      {'Open the "Settings" panel to insert HTML code'}
     </div>
   );
 };

package/src/html-embed.ws.ts

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

package/src/image.stories.tsx

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

package/src/image.ws.tsx

@@ -52,5 +52,5 @@ export const propsMeta: WsComponentPropsMeta = {
     ...props,
     ...propsOverrides,
   },
-  initialProps: ["src", "width", "height", "alt", "loading"],
+  initialProps: ["id", "src", "width", "height", "alt", "loading"],
 };

package/src/input.stories.tsx

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

package/src/input.ws.tsx

@@ -10,11 +10,18 @@ import type { defaultTag } from "./input";
 import { props } from "./__generated__/input.props";
 
 const presetStyle = {
-  input,
+  input: [
+    ...input,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" },
+    },
+  ],
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
   category: "forms",
+  invalidAncestors: ["Button"],
   type: "control",
   label: "Text Input",
   icon: FormTextFieldIcon,
@@ -36,5 +43,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["name", "type", "placeholder", "required", "autoFocus"],
+  initialProps: ["id", "name", "type", "placeholder", "required", "autoFocus"],
 };

package/src/italic.stories.tsx

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

package/src/italic.ws.tsx

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

package/src/label.ws.tsx

@@ -18,6 +18,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "forms",
+  invalidAncestors: ["Button"],
   type: "container",
   label: "Input Label",
   icon: TextIcon,
@@ -41,5 +42,5 @@ export const propsMeta: WsComponentPropsMeta = {
       label: "For",
     },
   },
-  initialProps: ["htmlFor"],
+  initialProps: ["id", "htmlFor"],
 };

package/src/link.stories.tsx

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

package/src/link.ws.tsx

@@ -60,5 +60,5 @@ export const propsMeta: WsComponentPropsMeta = {
       required: false,
     },
   },
-  initialProps: ["href", "target"],
+  initialProps: ["id", "href", "target"],
 };

package/src/list-item.stories.tsx

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

package/src/list-item.ws.tsx

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

package/src/list.stories.tsx

@@ -1,17 +1,14 @@
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+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,
-} as ComponentMeta<typeof ListPrimitive>;
+} satisfies Meta<typeof ListPrimitive>;
 
-const Template: ComponentStory<typeof ListPrimitive> = (args) => (
-  <ListPrimitive {...args} />
-);
-
-export const List = Template.bind({});
-List.args = {
-  children: <ListItem />,
+export const List: StoryObj<typeof ListPrimitive> = {
+  args: {
+    children: <ListItem>List</ListItem>,
+  },
 };

package/src/list.ws.tsx

@@ -54,5 +54,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["ordered", "type", "start", "reversed"],
+  initialProps: ["id", "ordered", "type", "start", "reversed"],
 };

package/src/paragraph.stories.tsx

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

package/src/paragraph.ws.tsx

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

package/src/radio-button.ws.tsx

@@ -21,6 +21,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "forms",
+  invalidAncestors: ["Button"],
   type: "control",
   label: "Radio",
   icon: RadioCheckedIcon,
@@ -57,5 +58,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["name"],
+  initialProps: ["id", "name"],
 };