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

package/lib/cjs/vimeo.ws.js

@@ -0,0 +1,345 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vimeo_ws_exports = {};
+__export(vimeo_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(vimeo_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_vimeo = require("./__generated__/vimeo.props");
+const presetStyle = {
+  div: import_css_normalize.div
+};
+const meta = {
+  category: "media",
+  type: "container",
+  label: "Vimeo",
+  order: 1,
+  icon: import_svg.VimeoIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Vimeo",
+      styles: [
+        {
+          property: "position",
+          value: { type: "keyword", value: "relative" }
+        },
+        {
+          property: "aspectRatio",
+          value: { type: "keyword", value: "640/360" }
+        },
+        {
+          property: "width",
+          value: { type: "unit", value: 100, unit: "%" }
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "VimeoPreviewImage",
+          styles: [
+            {
+              property: "position",
+              value: { type: "keyword", value: "absolute" }
+            },
+            {
+              property: "objectFit",
+              value: { type: "keyword", value: "cover" }
+            },
+            {
+              property: "width",
+              value: { type: "unit", value: 100, unit: "%" }
+            },
+            {
+              property: "height",
+              value: { type: "unit", value: 100, unit: "%" }
+            },
+            {
+              property: "borderTopLeftRadius",
+              value: { type: "unit", value: 20, unit: "px" }
+            },
+            {
+              property: "borderTopRightRadius",
+              value: { type: "unit", value: 20, unit: "px" }
+            },
+            {
+              property: "borderBottomLeftRadius",
+              value: { type: "unit", value: 20, unit: "px" }
+            },
+            {
+              property: "borderBottomRightRadius",
+              value: { type: "unit", value: 20, unit: "px" }
+            },
+            {
+              property: "objectPosition",
+              value: { type: "keyword", value: "cover" }
+            }
+          ],
+          children: [],
+          props: [
+            {
+              type: "string",
+              name: "alt",
+              value: "Vimeo video preview image"
+            },
+            {
+              type: "string",
+              name: "sizes",
+              value: "100vw"
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "Box",
+          label: "Spinner",
+          styles: [
+            {
+              property: "position",
+              value: { type: "keyword", value: "absolute" }
+            },
+            {
+              property: "top",
+              value: { type: "unit", value: 50, unit: "%" }
+            },
+            {
+              property: "left",
+              value: { type: "unit", value: 50, unit: "%" }
+            },
+            {
+              property: "width",
+              value: { type: "unit", value: 70, unit: "px" }
+            },
+            {
+              property: "height",
+              value: { type: "unit", value: 70, unit: "px" }
+            },
+            {
+              property: "marginTop",
+              value: { type: "unit", value: -35, unit: "px" }
+            },
+            {
+              property: "marginLeft",
+              value: { type: "unit", value: -35, unit: "px" }
+            }
+          ],
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              label: "Spinner SVG",
+              props: [
+                {
+                  type: "string",
+                  name: "code",
+                  value: import_svg.SpinnerIcon
+                }
+              ],
+              children: []
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "VimeoPlayButton",
+          props: [
+            {
+              type: "string",
+              name: "aria-label",
+              value: "Play button"
+            }
+          ],
+          styles: [
+            {
+              property: "position",
+              value: { type: "keyword", value: "absolute" }
+            },
+            {
+              property: "width",
+              value: { type: "unit", value: 140, unit: "px" }
+            },
+            {
+              property: "height",
+              value: { type: "unit", value: 80, unit: "px" }
+            },
+            {
+              property: "top",
+              value: { type: "unit", value: 50, unit: "%" }
+            },
+            {
+              property: "left",
+              value: { type: "unit", value: 50, unit: "%" }
+            },
+            {
+              property: "marginTop",
+              value: { type: "unit", value: -40, unit: "px" }
+            },
+            {
+              property: "marginLeft",
+              value: { type: "unit", value: -70, unit: "px" }
+            },
+            {
+              property: "display",
+              value: { type: "keyword", value: "flex" }
+            },
+            {
+              property: "alignItems",
+              value: { type: "keyword", value: "center" }
+            },
+            {
+              property: "justifyContent",
+              value: { type: "keyword", value: "center" }
+            },
+            {
+              property: "borderTopStyle",
+              value: { type: "keyword", value: "none" }
+            },
+            {
+              property: "borderRightStyle",
+              value: { type: "keyword", value: "none" }
+            },
+            {
+              property: "borderBottomStyle",
+              value: { type: "keyword", value: "none" }
+            },
+            {
+              property: "borderLeftStyle",
+              value: { type: "keyword", value: "none" }
+            },
+            {
+              property: "borderTopLeftRadius",
+              value: { type: "unit", value: 5, unit: "px" }
+            },
+            {
+              property: "borderTopRightRadius",
+              value: { type: "unit", value: 5, unit: "px" }
+            },
+            {
+              property: "borderBottomLeftRadius",
+              value: { type: "unit", value: 5, unit: "px" }
+            },
+            {
+              property: "borderBottomRightRadius",
+              value: { type: "unit", value: 5, unit: "px" }
+            },
+            {
+              property: "cursor",
+              value: { type: "keyword", value: "pointer" }
+            },
+            {
+              property: "backgroundColor",
+              value: {
+                type: "rgb",
+                r: 18,
+                g: 18,
+                b: 18,
+                alpha: 1
+              }
+            },
+            {
+              property: "color",
+              value: {
+                type: "rgb",
+                r: 255,
+                g: 255,
+                b: 255,
+                alpha: 1
+              }
+            },
+            {
+              state: ":hover",
+              property: "backgroundColor",
+              value: {
+                type: "rgb",
+                r: 0,
+                g: 173,
+                b: 239,
+                alpha: 1
+              }
+            }
+          ],
+          children: [
+            {
+              type: "instance",
+              component: "Box",
+              label: "Play Icon",
+              styles: [
+                {
+                  property: "width",
+                  value: { type: "unit", value: 60, unit: "px" }
+                },
+                {
+                  property: "height",
+                  value: { type: "unit", value: 60, unit: "px" }
+                }
+              ],
+              props: [
+                {
+                  type: "string",
+                  name: "aria-hidden",
+                  value: "true"
+                }
+              ],
+              children: [
+                {
+                  type: "instance",
+                  component: "HtmlEmbed",
+                  label: "Play SVG",
+                  props: [
+                    {
+                      type: "string",
+                      name: "code",
+                      value: import_svg.PlayIcon
+                    }
+                  ],
+                  children: []
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const initialProps = [
+  "url",
+  "quality",
+  "showPreview",
+  "autoplay",
+  "backgroundMode",
+  "doNotTrack",
+  "loop",
+  "muted",
+  "showPortrait",
+  "showByline",
+  "showTitle",
+  "showControls",
+  "controlsColor"
+];
+const propsMeta = {
+  props: import_vimeo.props,
+  initialProps
+};

package/lib/code-text.ws.js

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

package/lib/components.js

@@ -3,11 +3,10 @@ import { Fragment } from "./fragment";
 import { HtmlEmbed } from "./html-embed";
 import { Body } from "./body";
 import { Box } from "./box";
-import { TextBlock } from "./text-block";
+import { Text } from "./text";
 import { Heading } from "./heading";
 import { Paragraph } from "./paragraph";
 import { Link } from "./link";
-import { LinkBlock } from "./link-block";
 import { RichTextLink } from "./rich-text-link";
 import { Span } from "./span";
 import { Bold } from "./bold";
@@ -27,10 +26,12 @@ import { Label } from "./label";
 import { SuccessMessage } from "./success-message";
 import { ErrorMessage } from "./error-message";
 import { Textarea } from "./textarea";
-import { RadioButtonField } from "./radio-button-field";
 import { RadioButton } from "./radio-button";
-import { CheckboxField } from "./checkbox-field";
 import { Checkbox } from "./checkbox";
+import { Vimeo } from "./vimeo";
+import { VimeoPreviewImage } from "./vimeo-preview-image";
+import { VimeoPlayButton } from "./vimeo-play-button";
+import { VimeoSpinner } from "./vimeo-spinner";
 export {
   Blockquote,
   Body,
@@ -38,7 +39,6 @@ export {
   Box,
   Button,
   Checkbox,
-  CheckboxField,
   CodeText,
   ErrorMessage,
   Form,
@@ -50,12 +50,10 @@ export {
   Italic,
   Label,
   Link,
-  LinkBlock,
   List,
   ListItem,
   Paragraph,
   RadioButton,
-  RadioButtonField,
   RichTextLink,
   Separator,
   Slot,
@@ -63,6 +61,10 @@ export {
   Subscript,
   SuccessMessage,
   Superscript,
-  TextBlock,
-  Textarea
+  Text,
+  Textarea,
+  Vimeo,
+  VimeoPlayButton,
+  VimeoPreviewImage,
+  VimeoSpinner
 };

package/lib/heading.ws.js

@@ -14,7 +14,7 @@ const presetStyle = {
 };
 const meta = {
   category: "text",
-  type: "rich-text",
+  type: "container",
   label: "Heading",
   icon: HeadingIcon,
   states: defaultStates,

package/lib/image.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
-  useMemo
+  useMemo,
+  useContext
 } from "react";
 import {
   Image as WebstudioImage,
@@ -10,7 +11,7 @@ import {
 import {
   usePropAsset,
   getInstanceIdFromComponentProps,
-  getParams
+  ReactSdkContext
 } from "@webstudio-is/react-sdk";
 const defaultTag = "img";
 const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
@@ -38,11 +39,11 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
 </svg>`)}`;
 const Image = forwardRef(
   (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;
     if (asset == null || loader == null) {
       return /* @__PURE__ */ jsx("img", { ...props, src: src || imagePlaceholderSvg, ref }, src);

package/lib/image.ws.js

@@ -29,20 +29,23 @@ const meta = {
   presetStyle,
   order: 0
 };
-const { loader, ...publicProps } = props;
+const propsOverrides = {
+  src: {
+    type: "string",
+    control: "file",
+    label: "Source",
+    required: false
+  }
+};
 const propsMeta = {
   props: {
-    ...publicProps,
-    src: {
-      type: "string",
-      control: "file",
-      label: "Source",
-      required: false
-    }
+    ...props,
+    ...propsOverrides
   },
   initialProps: ["src", "width", "height", "alt", "loading"]
 };
 export {
   meta,
-  propsMeta
+  propsMeta,
+  propsOverrides
 };

package/lib/label.ws.js

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

package/lib/link.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useContext } from "react";
 import {
   usePropUrl,
   getInstanceIdFromComponentProps,
-  getParams
+  ReactSdkContext
 } from "@webstudio-is/react-sdk";
 const defaultTag = "a";
 const Link = forwardRef((props, ref) => {
+  const { assetBaseUrl } = useContext(ReactSdkContext);
   const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-  const { assetBaseUrl } = getParams();
   let url = "#";
   switch (href?.type) {
     case "page":

package/lib/link.ws.js

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

package/lib/list-item.ws.js

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

package/lib/metas.js

@@ -3,66 +3,68 @@ import { meta as meta2 } from "./fragment.ws";
 import { meta as meta3 } from "./html-embed.ws";
 import { meta as meta4 } from "./body.ws";
 import { meta as meta5 } from "./box.ws";
-import { meta as meta6 } from "./text-block.ws";
+import { meta as meta6 } from "./text.ws";
 import { meta as meta7 } from "./heading.ws";
 import { meta as meta8 } from "./paragraph.ws";
 import { meta as meta9 } from "./link.ws";
-import { meta as meta10 } from "./link-block.ws";
-import { meta as meta11 } from "./rich-text-link.ws";
-import { meta as meta12 } from "./span.ws";
-import { meta as meta13 } from "./bold.ws";
-import { meta as meta14 } from "./italic.ws";
-import { meta as meta15 } from "./superscript.ws";
-import { meta as meta16 } from "./subscript.ws";
-import { meta as meta17 } from "./button.ws";
-import { meta as meta18 } from "./input.ws";
-import { meta as meta19 } from "./form.ws";
-import { meta as meta20 } from "./image.ws";
-import { meta as meta21 } from "./blockquote.ws";
-import { meta as meta22 } from "./list.ws";
-import { meta as meta23 } from "./list-item.ws";
-import { meta as meta24 } from "./separator.ws";
-import { meta as meta25 } from "./code-text.ws";
-import { meta as meta26 } from "./label.ws";
-import { meta as meta27 } from "./success-message.ws";
-import { meta as meta28 } from "./error-message.ws";
-import { meta as meta29 } from "./textarea.ws";
-import { meta as meta30 } from "./radio-button-field.ws";
-import { meta as meta31 } from "./radio-button.ws";
-import { meta as meta32 } from "./checkbox-field.ws";
-import { meta as meta33 } from "./checkbox.ws";
+import { meta as meta10 } from "./rich-text-link.ws";
+import { meta as meta11 } from "./span.ws";
+import { meta as meta12 } from "./bold.ws";
+import { meta as meta13 } from "./italic.ws";
+import { meta as meta14 } from "./superscript.ws";
+import { meta as meta15 } from "./subscript.ws";
+import { meta as meta16 } from "./button.ws";
+import { meta as meta17 } from "./input.ws";
+import { meta as meta18 } from "./form.ws";
+import { meta as meta19 } from "./image.ws";
+import { meta as meta20 } from "./blockquote.ws";
+import { meta as meta21 } from "./list.ws";
+import { meta as meta22 } from "./list-item.ws";
+import { meta as meta23 } from "./separator.ws";
+import { meta as meta24 } from "./code-text.ws";
+import { meta as meta25 } from "./label.ws";
+import { meta as meta26 } from "./success-message.ws";
+import { meta as meta27 } from "./error-message.ws";
+import { meta as meta28 } from "./textarea.ws";
+import { meta as meta29 } from "./radio-button.ws";
+import { meta as meta30 } from "./checkbox.ws";
+import { meta as meta31 } from "./vimeo.ws";
+import { meta as meta32 } from "./vimeo-preview-image.ws";
+import { meta as meta33 } from "./vimeo-play-button.ws";
+import { meta as meta34 } from "./vimeo-spinner.ws";
 export {
-  meta21 as Blockquote,
+  meta20 as Blockquote,
   meta4 as Body,
-  meta13 as Bold,
+  meta12 as Bold,
   meta5 as Box,
-  meta17 as Button,
-  meta33 as Checkbox,
-  meta32 as CheckboxField,
-  meta25 as CodeText,
-  meta28 as ErrorMessage,
-  meta19 as Form,
+  meta16 as Button,
+  meta30 as Checkbox,
+  meta24 as CodeText,
+  meta27 as ErrorMessage,
+  meta18 as Form,
   meta2 as Fragment,
   meta7 as Heading,
   meta3 as HtmlEmbed,
-  meta20 as Image,
-  meta18 as Input,
-  meta14 as Italic,
-  meta26 as Label,
+  meta19 as Image,
+  meta17 as Input,
+  meta13 as Italic,
+  meta25 as Label,
   meta9 as Link,
-  meta10 as LinkBlock,
-  meta22 as List,
-  meta23 as ListItem,
+  meta21 as List,
+  meta22 as ListItem,
   meta8 as Paragraph,
-  meta31 as RadioButton,
-  meta30 as RadioButtonField,
-  meta11 as RichTextLink,
-  meta24 as Separator,
+  meta29 as RadioButton,
+  meta10 as RichTextLink,
+  meta23 as Separator,
   meta as Slot,
-  meta12 as Span,
-  meta16 as Subscript,
-  meta27 as SuccessMessage,
-  meta15 as Superscript,
-  meta6 as TextBlock,
-  meta29 as Textarea
+  meta11 as Span,
+  meta15 as Subscript,
+  meta26 as SuccessMessage,
+  meta14 as Superscript,
+  meta6 as Text,
+  meta28 as Textarea,
+  meta31 as Vimeo,
+  meta33 as VimeoPlayButton,
+  meta32 as VimeoPreviewImage,
+  meta34 as VimeoSpinner
 };