@webstudio-is/sdk-components-react 0.72.0 → 0.74.0

package/src/__generated__/button.props.ts

@@ -456,10 +456,4 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
-  innerText: {
-    required: false,
-    control: "text",
-    type: "string",
-    defaultValue: "Edit Inner Text in Properties",
-  },
 };

package/src/__generated__/image.props.ts

@@ -482,6 +482,5 @@ export const props: Record<string, PropMeta> = {
     type: "string",
   },
   quality: { required: false, control: "number", type: "number" },
-  loader: { required: true, control: "text", type: "string" },
   optimize: { required: false, control: "boolean", type: "boolean" },
 };

package/src/__generated__/vimeo-play-button.props.ts

@@ -455,5 +455,4 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
-  innerText: { required: false, control: "text", type: "string" },
 };

package/src/__generated__/vimeo-preview-image.props.ts

@@ -482,6 +482,5 @@ export const props: Record<string, PropMeta> = {
     type: "string",
   },
   quality: { required: false, control: "number", type: "number" },
-  loader: { required: true, control: "text", type: "string" },
   optimize: { required: false, control: "boolean", type: "boolean" },
 };

package/src/blockquote.ws.tsx

@@ -61,7 +61,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "text",
-  type: "rich-text",
+  type: "container",
   label: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,

package/src/button.tsx

@@ -2,20 +2,12 @@ import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
 export const defaultTag = "button";
 
-type ButtonProps = ComponentProps<typeof defaultTag> & { innerText?: string };
+type ButtonProps = ComponentProps<typeof defaultTag>;
 
 export const Button = forwardRef<ElementRef<typeof defaultTag>, ButtonProps>(
-  (
-    {
-      type = "submit",
-      innerText = "Edit Inner Text in Properties",
-      children,
-      ...props
-    },
-    ref
-  ) => (
+  ({ type = "submit", children, ...props }, ref) => (
     <button type={type} {...props} ref={ref}>
-      {children ? children : innerText}
+      {children}
     </button>
   )
 );

package/src/button.ws.tsx

@@ -26,9 +26,16 @@ export const meta: WsComponentMeta = {
     { selector: ":enabled", label: "Enabled" },
   ],
   order: 1,
+  template: [
+    {
+      type: "instance",
+      component: "Button",
+      children: [{ type: "text", value: "Button you can edit" }],
+    },
+  ],
 };
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["type", "innerText", "aria-label"],
+  initialProps: ["type", "aria-label"],
 };

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,9 +26,7 @@ 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";

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,9 +37,6 @@ 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: {
@@ -52,7 +49,7 @@ export const propsOverrides = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props: {
-    ...publicProps,
+    ...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,8 +1,8 @@
-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";
@@ -13,10 +13,9 @@ type Props = Omit<ComponentProps<"a">, "target"> & {
 };
 
 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,

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,9 +26,7 @@ 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";

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,9 +26,7 @@ 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";

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/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.ws.ts

@@ -49,7 +49,7 @@ export const meta: WsComponentMeta = {
               value: { type: "keyword", value: "absolute" },
             },
             {
-              property: "objectPosition",
+              property: "objectFit",
               value: { type: "keyword", value: "cover" },
             },
             {
@@ -88,6 +88,11 @@ export const meta: WsComponentMeta = {
               name: "alt",
               value: "Vimeo video preview image",
             },
+            {
+              type: "string",
+              name: "sizes",
+              value: "100vw",
+            },
           ],
         },
         {