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

package/src/checkbox.ws.tsx

@@ -20,8 +20,9 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
+  category: "forms",
   type: "control",
-  label: "Checkbox Input",
+  label: "Checkbox",
   icon: CheckboxCheckedIcon,
   presetStyle,
   order: 6,
@@ -35,6 +36,23 @@ export const meta: WsComponentMeta = {
     { selector: ":read-only", label: "Read Only" },
     { selector: ":read-write", label: "Read Write" },
   ],
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      label: "Checkbox Field",
+      children: [
+        { type: "instance", component: "Checkbox", children: [] },
+        {
+          type: "instance",
+          component: "Text",
+          label: "Checkbox Label",
+          props: [{ type: "string", name: "tag", value: "span" }],
+          children: [{ type: "text", value: "Checkbox" }],
+        },
+      ],
+    },
+  ],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/code-text.ws.tsx

@@ -37,7 +37,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "general",
-  type: "rich-text",
+  type: "container",
   label: "Code Text",
   icon: CodeTextIcon,
   states: defaultStates,

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

@@ -23,7 +23,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "text",
-  type: "rich-text",
+  type: "container",
   label: "Heading",
   icon: HeadingIcon,
   states: defaultStates,

package/src/image.tsx

@@ -3,6 +3,7 @@ import {
   type ElementRef,
   forwardRef,
   useMemo,
+  useContext,
 } from "react";
 import {
   Image as WebstudioImage,
@@ -11,7 +12,7 @@ import {
 import {
   usePropAsset,
   getInstanceIdFromComponentProps,
-  getParams,
+  ReactSdkContext,
 } from "@webstudio-is/react-sdk";
 
 export const defaultTag = "img";
@@ -40,16 +41,16 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   />
 </svg>`)}`;
 
-type Props = ComponentPropsWithoutRef<typeof WebstudioImage>;
+type Props = Omit<ComponentPropsWithoutRef<typeof WebstudioImage>, "loader">;
 
 export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
   (props, ref) => {
+    const { imageBaseUrl } = useContext(ReactSdkContext);
     const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
 
     const loader = useMemo(() => {
-      const params = getParams();
-      return createImageLoader({ imageBaseUrl: params.imageBaseUrl });
-    }, []);
+      return createImageLoader({ imageBaseUrl });
+    }, [imageBaseUrl]);
 
     const src = asset?.name ?? props.src;
 

package/src/image.ws.tsx

@@ -37,18 +37,20 @@ export const meta: WsComponentMeta = {
   order: 0,
 };
 
-// "loader" is our internal prop not intended to show up in the props panel
-const { loader, ...publicProps } = props;
+// Automatically generated props don't have the right control.
+export const propsOverrides = {
+  src: {
+    type: "string",
+    control: "file",
+    label: "Source",
+    required: false,
+  },
+} as const;
 
 export const propsMeta: WsComponentPropsMeta = {
   props: {
-    ...publicProps,
-    src: {
-      type: "string",
-      control: "file",
-      label: "Source",
-      required: false,
-    },
+    ...props,
+    ...propsOverrides,
   },
   initialProps: ["src", "width", "height", "alt", "loading"],
 };

package/src/label.ws.tsx

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons/svg";
+import { TextIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -18,9 +18,9 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "forms",
-  type: "rich-text",
+  type: "container",
   label: "Input Label",
-  icon: TextBlockIcon,
+  icon: TextIcon,
   states: defaultStates,
   presetStyle,
   order: 2,
@@ -37,10 +37,7 @@ export const propsMeta: WsComponentPropsMeta = {
   props: {
     ...props,
     htmlFor: {
-      required: false,
-      control: "text",
-      type: "string",
-      rows: 0,
+      ...props.htmlFor,
       label: "For",
     },
   },

package/src/link.tsx

@@ -1,27 +1,21 @@
-import { forwardRef, type ComponentProps } from "react";
+import { forwardRef, type ComponentProps, useContext } from "react";
 import {
   usePropUrl,
   getInstanceIdFromComponentProps,
-  getParams,
+  ReactSdkContext,
 } from "@webstudio-is/react-sdk";
 
 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;
+type Props = Omit<ComponentProps<"a">, "target"> & {
+  // override (string & {}) in target to generate keywords
   target?: "_self" | "_blank" | "_parent" | "_top";
-  prefetch?: "none" | "intent" | "render";
 };
 
 export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
+  const { assetBaseUrl } = useContext(ReactSdkContext);
   const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
 
-  const { assetBaseUrl } = getParams();
-
   let url = "#";
 
   switch (href?.type) {

package/src/link.ws.tsx

@@ -25,8 +25,8 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "general",
-  type: "rich-text",
-  label: "Link Text",
+  type: "container",
+  label: "Link",
   icon: LinkIcon,
   presetStyle,
   order: 1,
@@ -60,5 +60,5 @@ export const propsMeta: WsComponentPropsMeta = {
       required: false,
     },
   },
-  initialProps: ["href", "target", "prefetch"],
+  initialProps: ["href", "target"],
 };

package/src/list-item.ws.tsx

@@ -15,7 +15,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "general",
-  type: "rich-text",
+  type: "container",
   requiredAncestors: ["List"],
   label: "List Item",
   icon: ListItemIcon,

package/src/metas.ts

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

package/src/paragraph.ws.tsx

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

package/src/props.ts

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

package/src/radio-button.ws.tsx

@@ -20,8 +20,9 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
+  category: "forms",
   type: "control",
-  label: "Radio Input",
+  label: "Radio",
   icon: RadioCheckedIcon,
   presetStyle,
   order: 5,
@@ -35,6 +36,23 @@ export const meta: WsComponentMeta = {
     { 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" }],
+        },
+      ],
+    },
+  ],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

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

@@ -2,21 +2,13 @@ import type {
   WsComponentMeta,
   WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
-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,
+  ...linkMeta,
+  category: "hidden",
   type: "rich-text-child",
   template: [],
 };
 
-export const propsMeta: WsComponentPropsMeta = {
-  initialProps: linkPropsMeta.initialProps,
-  props: {
-    ...props,
-    href: linkPropsMeta.props.href,
-  },
-};
+export const propsMeta: WsComponentPropsMeta = linkPropsMeta;

package/src/span.ws.tsx

@@ -15,7 +15,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
-  label: "Styled Text",
+  label: "Text",
   icon: PaintBrushIcon,
   states: defaultStates,
   presetStyle,

package/src/text.stories.tsx

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

package/src/{text-block.tsx → text.tsx}

@@ -12,10 +12,10 @@ type Props = ComponentProps<typeof defaultTag> & {
   tag?: "div" | "span" | "figcaption";
 };
 
-export const TextBlock = forwardRef<ElementRef<typeof defaultTag>, Props>(
+export const Text = forwardRef<ElementRef<typeof defaultTag>, Props>(
   ({ tag = defaultTag, ...props }, ref) => {
     return createElement(tag, { ...props, ref });
   }
 );
 
-TextBlock.displayName = "TextBlock";
+Text.displayName = "Text";

package/src/{text-block.ws.tsx → text.ws.tsx}

@@ -1,4 +1,4 @@
-import { TextBlockIcon } from "@webstudio-is/icons/svg";
+import { TextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
   type PresetStyle,
@@ -6,8 +6,8 @@ import {
   type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/text-block.props";
-import type { defaultTag } from "./text-block";
+import { props } from "./__generated__/text.props";
+import type { defaultTag } from "./text";
 
 const presetStyle = {
   div: [
@@ -21,16 +21,16 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   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/src/vimeo-play-button.stories.tsx

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

package/src/vimeo-play-button.tsx

@@ -0,0 +1,24 @@
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentProps,
+  useContext,
+} from "react";
+import { VimeoContext } from "./vimeo";
+import { Button, defaultTag } from "./button";
+
+export { defaultTag };
+
+type Props = ComponentProps<typeof Button>;
+
+export const VimeoPlayButton = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    const vimeoContext = useContext(VimeoContext);
+    if (vimeoContext.status !== "initial") {
+      return null;
+    }
+    return <Button {...props} onClick={vimeoContext.onInitPlayer} ref={ref} />;
+  }
+);
+
+VimeoPlayButton.displayName = "VimeoPlayButton";

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

@@ -0,0 +1,29 @@
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { props } from "./__generated__/vimeo-play-button.props";
+import { ButtonElementIcon } from "@webstudio-is/icons/svg";
+import { button } from "@webstudio-is/react-sdk/css-normalize";
+import { defaultTag } from "./vimeo-play-button";
+
+const presetStyle = {
+  button,
+} satisfies PresetStyle<typeof defaultTag>;
+
+export const meta: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  invalidAncestors: ["Button"],
+  requiredAncestors: ["Vimeo"],
+  label: "Play Button",
+  icon: ButtonElementIcon,
+  presetStyle,
+  states: defaultStates,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+};

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

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

package/src/vimeo-preview-image.tsx

@@ -0,0 +1,30 @@
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentProps,
+  useContext,
+} from "react";
+import { Image, defaultTag } from "./image";
+import { VimeoContext } from "./vimeo";
+
+// Generated using https://png-pixel.com/
+const base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
+
+type Props = ComponentProps<typeof Image>;
+
+export const VimeoPreviewImage = forwardRef<
+  ElementRef<typeof defaultTag>,
+  Props
+>(({ src, ...rest }, ref) => {
+  const vimeoContext = useContext(VimeoContext);
+
+  return (
+    <Image
+      {...rest}
+      src={String(vimeoContext.previewImageUrl ?? src ?? base64Preview)}
+      ref={ref}
+    />
+  );
+});
+
+VimeoPreviewImage.displayName = "VimeoPreviewImage";

package/src/vimeo-preview-image.ws.ts

@@ -0,0 +1,22 @@
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import {
+  propsOverrides as imagePropsOverrides,
+  propsMeta as imagePropsMeta,
+  meta as imageMeta,
+} from "./image.ws";
+import { props } from "./__generated__/vimeo-preview-image.props";
+
+export const meta: WsComponentMeta = {
+  ...imageMeta,
+  category: "hidden",
+  label: "Preview Image",
+  requiredAncestors: ["Vimeo"],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props: { ...props, ...imagePropsOverrides },
+  initialProps: imagePropsMeta.initialProps,
+};

package/src/vimeo-spinner.stories.tsx

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

package/src/vimeo-spinner.tsx

@@ -0,0 +1,25 @@
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentProps,
+  useContext,
+} from "react";
+import { VimeoContext } from "./vimeo";
+
+const defaultTag = "div";
+
+type Props = ComponentProps<typeof defaultTag>;
+
+export const VimeoSpinner = forwardRef<ElementRef<typeof defaultTag>, Props>(
+  (props, ref) => {
+    const vimeoContext = useContext(VimeoContext);
+
+    if (vimeoContext.status !== "initialized") {
+      return null;
+    }
+
+    return <div {...props} ref={ref} />;
+  }
+);
+
+VimeoSpinner.displayName = "VimeoSpinner";