@webstudio-is/sdk-components-react 0.71.0 → 0.73.0

package/lib/paragraph.ws.js

@@ -9,7 +9,7 @@ const presetStyle = {
 };
 const meta = {
   category: "text",
-  type: "rich-text",
+  type: "container",
   label: "Paragraph",
   icon: TextAlignLeftIcon,
   states: defaultStates,
@@ -18,7 +18,7 @@ const meta = {
     {
       type: "instance",
       component: "Paragraph",
-      children: [{ type: "text", value: "Pragraph you can edit" }]
+      children: [{ type: "text", value: "Paragraph you can edit" }]
     }
   ],
   order: 2

package/lib/props.js

@@ -3,66 +3,68 @@ import { propsMeta as propsMeta2 } from "./fragment.ws";
 import { propsMeta as propsMeta3 } from "./html-embed.ws";
 import { propsMeta as propsMeta4 } from "./body.ws";
 import { propsMeta as propsMeta5 } from "./box.ws";
-import { propsMeta as propsMeta6 } from "./text-block.ws";
+import { propsMeta as propsMeta6 } from "./text.ws";
 import { propsMeta as propsMeta7 } from "./heading.ws";
 import { propsMeta as propsMeta8 } from "./paragraph.ws";
 import { propsMeta as propsMeta9 } from "./link.ws";
-import { propsMeta as propsMeta10 } from "./link-block.ws";
-import { propsMeta as propsMeta11 } from "./rich-text-link.ws";
-import { propsMeta as propsMeta12 } from "./span.ws";
-import { propsMeta as propsMeta13 } from "./bold.ws";
-import { propsMeta as propsMeta14 } from "./italic.ws";
-import { propsMeta as propsMeta15 } from "./superscript.ws";
-import { propsMeta as propsMeta16 } from "./subscript.ws";
-import { propsMeta as propsMeta17 } from "./button.ws";
-import { propsMeta as propsMeta18 } from "./input.ws";
-import { propsMeta as propsMeta19 } from "./form.ws";
-import { propsMeta as propsMeta20 } from "./image.ws";
-import { propsMeta as propsMeta21 } from "./blockquote.ws";
-import { propsMeta as propsMeta22 } from "./list.ws";
-import { propsMeta as propsMeta23 } from "./list-item.ws";
-import { propsMeta as propsMeta24 } from "./separator.ws";
-import { propsMeta as propsMeta25 } from "./code-text.ws";
-import { propsMeta as propsMeta26 } from "./label.ws";
-import { propsMeta as propsMeta27 } from "./success-message.ws";
-import { propsMeta as propsMeta28 } from "./error-message.ws";
-import { propsMeta as propsMeta29 } from "./textarea.ws";
-import { propsMeta as propsMeta30 } from "./radio-button-field.ws";
-import { propsMeta as propsMeta31 } from "./radio-button.ws";
-import { propsMeta as propsMeta32 } from "./checkbox-field.ws";
-import { propsMeta as propsMeta33 } from "./checkbox.ws";
+import { propsMeta as propsMeta10 } from "./rich-text-link.ws";
+import { propsMeta as propsMeta11 } from "./span.ws";
+import { propsMeta as propsMeta12 } from "./bold.ws";
+import { propsMeta as propsMeta13 } from "./italic.ws";
+import { propsMeta as propsMeta14 } from "./superscript.ws";
+import { propsMeta as propsMeta15 } from "./subscript.ws";
+import { propsMeta as propsMeta16 } from "./button.ws";
+import { propsMeta as propsMeta17 } from "./input.ws";
+import { propsMeta as propsMeta18 } from "./form.ws";
+import { propsMeta as propsMeta19 } from "./image.ws";
+import { propsMeta as propsMeta20 } from "./blockquote.ws";
+import { propsMeta as propsMeta21 } from "./list.ws";
+import { propsMeta as propsMeta22 } from "./list-item.ws";
+import { propsMeta as propsMeta23 } from "./separator.ws";
+import { propsMeta as propsMeta24 } from "./code-text.ws";
+import { propsMeta as propsMeta25 } from "./label.ws";
+import { propsMeta as propsMeta26 } from "./success-message.ws";
+import { propsMeta as propsMeta27 } from "./error-message.ws";
+import { propsMeta as propsMeta28 } from "./textarea.ws";
+import { propsMeta as propsMeta29 } from "./radio-button.ws";
+import { propsMeta as propsMeta30 } from "./checkbox.ws";
+import { propsMeta as propsMeta31 } from "./vimeo.ws";
+import { propsMeta as propsMeta32 } from "./vimeo-preview-image.ws";
+import { propsMeta as propsMeta33 } from "./vimeo-play-button.ws";
+import { propsMeta as propsMeta34 } from "./vimeo-spinner.ws";
 export {
-  propsMeta21 as Blockquote,
+  propsMeta20 as Blockquote,
   propsMeta4 as Body,
-  propsMeta13 as Bold,
+  propsMeta12 as Bold,
   propsMeta5 as Box,
-  propsMeta17 as Button,
-  propsMeta33 as Checkbox,
-  propsMeta32 as CheckboxField,
-  propsMeta25 as CodeText,
-  propsMeta28 as ErrorMessage,
-  propsMeta19 as Form,
+  propsMeta16 as Button,
+  propsMeta30 as Checkbox,
+  propsMeta24 as CodeText,
+  propsMeta27 as ErrorMessage,
+  propsMeta18 as Form,
   propsMeta2 as Fragment,
   propsMeta7 as Heading,
   propsMeta3 as HtmlEmbed,
-  propsMeta20 as Image,
-  propsMeta18 as Input,
-  propsMeta14 as Italic,
-  propsMeta26 as Label,
+  propsMeta19 as Image,
+  propsMeta17 as Input,
+  propsMeta13 as Italic,
+  propsMeta25 as Label,
   propsMeta9 as Link,
-  propsMeta10 as LinkBlock,
-  propsMeta22 as List,
-  propsMeta23 as ListItem,
+  propsMeta21 as List,
+  propsMeta22 as ListItem,
   propsMeta8 as Paragraph,
-  propsMeta31 as RadioButton,
-  propsMeta30 as RadioButtonField,
-  propsMeta11 as RichTextLink,
-  propsMeta24 as Separator,
+  propsMeta29 as RadioButton,
+  propsMeta10 as RichTextLink,
+  propsMeta23 as Separator,
   propsMeta as Slot,
-  propsMeta12 as Span,
-  propsMeta16 as Subscript,
-  propsMeta27 as SuccessMessage,
-  propsMeta15 as Superscript,
-  propsMeta6 as TextBlock,
-  propsMeta29 as Textarea
+  propsMeta11 as Span,
+  propsMeta15 as Subscript,
+  propsMeta26 as SuccessMessage,
+  propsMeta14 as Superscript,
+  propsMeta6 as Text,
+  propsMeta28 as Textarea,
+  propsMeta31 as Vimeo,
+  propsMeta33 as VimeoPlayButton,
+  propsMeta32 as VimeoPreviewImage,
+  propsMeta34 as VimeoSpinner
 };

package/lib/radio-button.ws.js

@@ -14,8 +14,9 @@ const presetStyle = {
   ]
 };
 const meta = {
+  category: "forms",
   type: "control",
-  label: "Radio Input",
+  label: "Radio",
   icon: RadioCheckedIcon,
   presetStyle,
   order: 5,
@@ -28,6 +29,23 @@ const meta = {
     { 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" }]
+        }
+      ]
+    }
   ]
 };
 const propsMeta = {

package/lib/rich-text-link.ws.js

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

package/lib/span.ws.js

@@ -9,7 +9,7 @@ const presetStyle = {
 };
 const meta = {
   type: "rich-text-child",
-  label: "Styled Text",
+  label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
   presetStyle

package/lib/{text-block.js → text.js}

@@ -3,13 +3,13 @@ import {
   forwardRef
 } from "react";
 const defaultTag = "div";
-const TextBlock = forwardRef(
+const Text = forwardRef(
   ({ tag = defaultTag, ...props }, ref) => {
     return createElement(tag, { ...props, ref });
   }
 );
-TextBlock.displayName = "TextBlock";
+Text.displayName = "Text";
 export {
-  TextBlock,
+  Text,
   defaultTag
 };

package/lib/{text-block.ws.js → text.ws.js}

@@ -1,9 +1,9 @@
-import { TextBlockIcon } from "@webstudio-is/icons/svg";
+import { TextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
 } from "@webstudio-is/react-sdk";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/text-block.props";
+import { props } from "./__generated__/text.props";
 const presetStyle = {
   div: [
     ...div,
@@ -15,16 +15,16 @@ const presetStyle = {
 };
 const meta = {
   category: "text",
-  type: "rich-text",
-  label: "Text Block",
-  icon: TextBlockIcon,
+  type: "container",
+  label: "Text",
+  icon: TextIcon,
   states: defaultStates,
   presetStyle,
   template: [
     {
       type: "instance",
-      component: "TextBlock",
-      children: [{ type: "text", value: "Block of text you can edit" }]
+      component: "Text",
+      children: [{ type: "text", value: "The text you can edit" }]
     }
   ],
   order: 0

package/lib/types/__generated__/vimeo-spinner.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/vimeo.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/box.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps } from "react";
-declare const defaultTag = "div";
+export declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
     tag?: "div" | "header" | "footer" | "nav" | "main" | "section" | "article" | "aside" | "address" | "figure";
 };

package/lib/types/button.d.ts

@@ -1,7 +1,3 @@
-import { type ComponentProps } from "react";
+/// <reference types="react" />
 export declare const defaultTag = "button";
-type ButtonProps = ComponentProps<typeof defaultTag> & {
-    innerText?: string;
-};
-export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export {};
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/types/button.stories.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 import type { ComponentMeta, ComponentStory } from "@storybook/react";
-declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    innerText?: string | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>>;
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>>;
 export default _default;
-export declare const Button: ComponentStory<import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    innerText?: string | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>>;
+export declare const Button: ComponentStory<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>>;

package/lib/types/components.d.ts

@@ -3,11 +3,10 @@ export { Fragment } from "./fragment";
 export { HtmlEmbed } from "./html-embed";
 export { Body } from "./body";
 export { Box } from "./box";
-export { TextBlock } from "./text-block";
+export { Text } from "./text";
 export { Heading } from "./heading";
 export { Paragraph } from "./paragraph";
 export { Link } from "./link";
-export { LinkBlock } from "./link-block";
 export { RichTextLink } from "./rich-text-link";
 export { Span } from "./span";
 export { Bold } from "./bold";
@@ -27,7 +26,9 @@ export { Label } from "./label";
 export { SuccessMessage } from "./success-message";
 export { ErrorMessage } from "./error-message";
 export { Textarea } from "./textarea";
-export { RadioButtonField } from "./radio-button-field";
 export { RadioButton } from "./radio-button";
-export { CheckboxField } from "./checkbox-field";
 export { Checkbox } from "./checkbox";
+export { Vimeo } from "./vimeo";
+export { VimeoPreviewImage } from "./vimeo-preview-image";
+export { VimeoPlayButton } from "./vimeo-play-button";
+export { VimeoSpinner } from "./vimeo-spinner";

package/lib/types/image.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
+import { type ComponentPropsWithoutRef } from "react";
+import { Image as WebstudioImage } from "@webstudio-is/image";
 export declare const defaultTag = "img";
-export declare const Image: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").ClassAttributes<HTMLImageElement> & import("react").ImgHTMLAttributes<HTMLImageElement> & {
-    quality?: number | undefined;
-    optimize?: boolean | undefined;
-    loader: import("@webstudio-is/image").ImageLoader;
-}, "ref"> & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+type Props = Omit<ComponentPropsWithoutRef<typeof WebstudioImage>, "loader">;
+export declare const Image: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLImageElement>>;
+export {};