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

package/src/vimeo.ws.ts

@@ -0,0 +1,331 @@
+import { PlayIcon, SpinnerIcon, VimeoIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/vimeo.props";
+import { type VimeoOptions } from "./vimeo";
+
+const presetStyle = {
+  div,
+} satisfies PresetStyle<"div">;
+
+export const meta: WsComponentMeta = {
+  category: "media",
+  type: "container",
+  label: "Vimeo",
+  order: 1,
+  icon: VimeoIcon,
+  states: 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: 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: PlayIcon,
+                    },
+                  ],
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+const initialProps: Array<keyof VimeoOptions> = [
+  "url",
+  "quality",
+  "showPreview",
+  "autoplay",
+  "backgroundMode",
+  "doNotTrack",
+  "loop",
+  "muted",
+  "showPortrait",
+  "showByline",
+  "showTitle",
+  "showControls",
+  "controlsColor",
+];
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps,
+};

package/lib/checkbox-field.js

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const defaultTag = "label";
-const CheckboxField = forwardRef((props, ref) => /* @__PURE__ */ jsx("label", { ...props, ref }));
-CheckboxField.displayName = "CheckboxField";
-export {
-  CheckboxField,
-  defaultTag
-};

package/lib/checkbox-field.ws.js

@@ -1,44 +0,0 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { label } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/checkbox-field.props";
-const presetStyle = {
-  label: [
-    ...label,
-    { property: "display", value: { type: "keyword", value: "flex" } }
-  ]
-};
-const meta = {
-  category: "forms",
-  type: "container",
-  label: "Checkbox",
-  icon: CheckboxCheckedIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "CheckboxField",
-      children: [
-        { type: "instance", component: "Checkbox", children: [] },
-        {
-          type: "instance",
-          component: "TextBlock",
-          label: "Checkbox Label",
-          props: [],
-          children: [{ type: "text", value: "Checkbox" }]
-        }
-      ]
-    }
-  ]
-};
-const propsMeta = {
-  props,
-  initialProps: []
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/cjs/radio-button-field.ws.js

@@ -1,62 +0,0 @@
-"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 radio_button_field_ws_exports = {};
-__export(radio_button_field_ws_exports, {
-  meta: () => meta,
-  propsMeta: () => propsMeta
-});
-module.exports = __toCommonJS(radio_button_field_ws_exports);
-var import_svg = require("@webstudio-is/icons/svg");
-var import_react_sdk = require("@webstudio-is/react-sdk");
-var import_radio_button_field = require("./__generated__/radio-button-field.props");
-var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
-const presetStyle = {
-  label: [
-    ...import_css_normalize.label,
-    { property: "display", value: { type: "keyword", value: "flex" } }
-  ]
-};
-const meta = {
-  category: "forms",
-  type: "container",
-  label: "Radio",
-  icon: import_svg.RadioCheckedIcon,
-  states: import_react_sdk.defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "RadioButtonField",
-      children: [
-        { type: "instance", component: "RadioButton", props: [], children: [] },
-        {
-          type: "instance",
-          component: "TextBlock",
-          label: "Radio Label",
-          props: [],
-          children: [{ type: "text", value: "Radio" }]
-        }
-      ]
-    }
-  ]
-};
-const propsMeta = {
-  props: import_radio_button_field.props,
-  initialProps: []
-};

package/lib/link-block.js

@@ -1,10 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { Link } from "./link";
-import { defaultTag } from "./link";
-const LinkBlock = forwardRef((props, ref) => /* @__PURE__ */ jsx(Link, { ...props, ref }));
-LinkBlock.displayName = "LinkBlock";
-export {
-  LinkBlock,
-  defaultTag
-};

package/lib/link-block.ws.js

@@ -1,33 +0,0 @@
-import { LinkBlockIcon } from "@webstudio-is/icons/svg";
-import { a } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/link-block.props";
-import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
-const presetStyle = {
-  a: [
-    ...a,
-    {
-      property: "display",
-      value: { type: "keyword", value: "inline-block" }
-    }
-  ]
-};
-const meta = {
-  category: "general",
-  type: "container",
-  label: "Link Block",
-  icon: LinkBlockIcon,
-  states: linkMeta.states,
-  presetStyle,
-  order: 2
-};
-const propsMeta = {
-  props: {
-    ...props,
-    href: linkPropsMeta.props.href
-  },
-  initialProps: linkPropsMeta.initialProps
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/radio-button-field.js

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const defaultTag = "label";
-const RadioButtonField = forwardRef((props, ref) => /* @__PURE__ */ jsx("label", { ...props, ref }));
-RadioButtonField.displayName = "RadioButtonField";
-export {
-  RadioButtonField,
-  defaultTag
-};

package/lib/radio-button-field.ws.js

@@ -1,44 +0,0 @@
-import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { props } from "./__generated__/radio-button-field.props";
-import { label } from "@webstudio-is/react-sdk/css-normalize";
-const presetStyle = {
-  label: [
-    ...label,
-    { property: "display", value: { type: "keyword", value: "flex" } }
-  ]
-};
-const meta = {
-  category: "forms",
-  type: "container",
-  label: "Radio",
-  icon: RadioCheckedIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "RadioButtonField",
-      children: [
-        { type: "instance", component: "RadioButton", props: [], children: [] },
-        {
-          type: "instance",
-          component: "TextBlock",
-          label: "Radio Label",
-          props: [],
-          children: [{ type: "text", value: "Radio" }]
-        }
-      ]
-    }
-  ]
-};
-const propsMeta = {
-  props,
-  initialProps: []
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/types/checkbox-field.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const defaultTag = "label";
-export declare const CheckboxField: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/lib/types/link-block.d.ts

@@ -1,3 +0,0 @@
-import { Link } from "./link";
-export { defaultTag } from "./link";
-export declare const LinkBlock: typeof Link;

package/lib/types/link-block.stories.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
-declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "target"> & {
-    href?: string | undefined;
-    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
-    prefetch?: "none" | "intent" | "render" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>>;
-export default _default;
-export declare const LinkBlock: ComponentStory<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "target"> & {
-    href?: string | undefined;
-    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
-    prefetch?: "none" | "intent" | "render" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>>;

package/lib/types/radio-button-field.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const defaultTag = "label";
-export declare const RadioButtonField: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/src/checkbox-field.tsx

@@ -1,10 +0,0 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
-
-export const defaultTag = "label";
-
-export const CheckboxField = forwardRef<
-  ElementRef<typeof defaultTag>,
-  Omit<ComponentProps<typeof defaultTag>, "htmlFor">
->((props, ref) => <label {...props} ref={ref} />);
-
-CheckboxField.displayName = "CheckboxField";

package/src/checkbox-field.ws.tsx

@@ -1,47 +0,0 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  type PresetStyle,
-  defaultStates,
-} from "@webstudio-is/react-sdk";
-import { label } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/checkbox-field.props";
-import type { defaultTag } from "./checkbox-field";
-
-const presetStyle = {
-  label: [
-    ...label,
-    { property: "display", value: { type: "keyword", value: "flex" } },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "forms",
-  type: "container",
-  label: "Checkbox",
-  icon: CheckboxCheckedIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "CheckboxField",
-      children: [
-        { type: "instance", component: "Checkbox", children: [] },
-        {
-          type: "instance",
-          component: "TextBlock",
-          label: "Checkbox Label",
-          props: [],
-          children: [{ type: "text", value: "Checkbox" }],
-        },
-      ],
-    },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: [],
-};

package/src/link-block.stories.tsx

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

package/src/link-block.tsx

@@ -1,9 +0,0 @@
-import { forwardRef } from "react";
-import { Link } from "./link";
-export { defaultTag } from "./link";
-
-export const LinkBlock: typeof Link = forwardRef((props, ref) => (
-  <Link {...props} ref={ref} />
-));
-
-LinkBlock.displayName = "LinkBlock";