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

package/lib/vimeo.ws.js

@@ -0,0 +1,327 @@
+import { PlayIcon, SpinnerIcon, VimeoIcon } 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__/vimeo.props";
+const presetStyle = {
+  div
+};
+const meta = {
+  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 = [
+  "url",
+  "quality",
+  "showPreview",
+  "autoplay",
+  "backgroundMode",
+  "doNotTrack",
+  "loop",
+  "muted",
+  "showPortrait",
+  "showByline",
+  "showTitle",
+  "showControls",
+  "controlsColor"
+];
+const propsMeta = {
+  props,
+  initialProps
+};
+export {
+  meta,
+  propsMeta
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.71.0",
+  "version": "0.73.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -38,11 +38,13 @@
   },
   "dependencies": {
     "@react-aria/utils": "^3.13.3",
-    "@webstudio-is/css-vars": "^0.71.0",
-    "@webstudio-is/generate-arg-types": "^0.71.0",
-    "@webstudio-is/icons": "^0.71.0",
-    "@webstudio-is/image": "^0.71.0",
-    "@webstudio-is/react-sdk": "^0.71.0"
+    "colord": "^2.9.3",
+    "shallow-equal": "^3.1.0",
+    "@webstudio-is/css-vars": "^0.73.0",
+    "@webstudio-is/generate-arg-types": "^0.73.0",
+    "@webstudio-is/icons": "^0.73.0",
+    "@webstudio-is/image": "^0.73.0",
+    "@webstudio-is/react-sdk": "^0.73.0"
   },
   "devDependencies": {
     "@storybook/react": "^6.5.16",
@@ -50,7 +52,7 @@
     "@types/react-dom": "^18.0.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "5.0.3",
+    "typescript": "5.1.3",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.6"

package/src/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Webstudio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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__/link-block.props.ts

@@ -4,7 +4,6 @@ export const props: Record<string, PropMeta> = {
   slot: { required: false, control: "text", type: "string" },
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
-  href: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
@@ -12,6 +11,7 @@ export const props: Record<string, PropMeta> = {
     options: ["_self", "_blank", "_parent", "_top"],
   },
   download: { required: false, control: "text", type: "string" },
+  href: { required: false, control: "text", type: "string" },
   hrefLang: { required: false, control: "text", type: "string" },
   media: { required: false, control: "text", type: "string" },
   ping: { required: false, control: "text", type: "string" },
@@ -468,10 +468,4 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
-  prefetch: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["none", "intent", "render"],
-  },
 };

package/src/__generated__/link.props.ts

@@ -4,7 +4,6 @@ export const props: Record<string, PropMeta> = {
   slot: { required: false, control: "text", type: "string" },
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
-  href: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
@@ -12,6 +11,7 @@ export const props: Record<string, PropMeta> = {
     options: ["_self", "_blank", "_parent", "_top"],
   },
   download: { required: false, control: "text", type: "string" },
+  href: { required: false, control: "text", type: "string" },
   hrefLang: { required: false, control: "text", type: "string" },
   media: { required: false, control: "text", type: "string" },
   ping: { required: false, control: "text", type: "string" },
@@ -468,10 +468,4 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
-  prefetch: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["none", "intent", "render"],
-  },
 };

package/src/__generated__/rich-text-link.props.ts

@@ -4,7 +4,6 @@ export const props: Record<string, PropMeta> = {
   slot: { required: false, control: "text", type: "string" },
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
-  href: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
@@ -12,6 +11,7 @@ export const props: Record<string, PropMeta> = {
     options: ["_self", "_blank", "_parent", "_top"],
   },
   download: { required: false, control: "text", type: "string" },
+  href: { required: false, control: "text", type: "string" },
   hrefLang: { required: false, control: "text", type: "string" },
   media: { required: false, control: "text", type: "string" },
   ping: { required: false, control: "text", type: "string" },
@@ -468,10 +468,4 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
-  prefetch: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["none", "intent", "render"],
-  },
 };

package/src/__generated__/{checkbox-field.props.ts → vimeo-play-button.props.ts}

@@ -5,6 +5,20 @@ export const props: Record<string, PropMeta> = {
   slot: { required: false, control: "text", type: "string" },
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
+  disabled: { required: false, control: "boolean", type: "boolean" },
+  formAction: { required: false, control: "text", type: "string" },
+  formEncType: { required: false, control: "text", type: "string" },
+  formMethod: { required: false, control: "text", type: "string" },
+  formNoValidate: { required: false, control: "boolean", type: "boolean" },
+  formTarget: { required: false, control: "text", type: "string" },
+  name: { required: false, control: "text", type: "string" },
+  type: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["button", "submit", "reset"],
+  },
+  value: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   defaultValue: { required: false, control: "text", type: "string" },
   suppressContentEditableWarning: {