@webstudio-is/sdk-components-react 0.191.4 → 0.192.0

package/lib/vimeo.js

@@ -0,0 +1,215 @@
+import { jsx as s, jsxs as F, Fragment as z } from "react/jsx-runtime";
+import { colord as T } from "colord";
+import { createContext as q, forwardRef as G, useState as h, useContext as H, useEffect as u } from "react";
+import { ReactSdkContext as Y } from "@webstudio-is/react-sdk/runtime";
+const J = (e) => {
+  if (e.url === void 0)
+    return;
+  let t;
+  try {
+    const o = new URL(e.url);
+    t = new URL(x), t.pathname = `/video${o.pathname}`;
+  } catch {
+  }
+  if (t === void 0)
+    return;
+  const r = {
+    showPortrait: "portrait",
+    showByline: "byline",
+    showTitle: "title",
+    controlsColor: "color",
+    showControls: "controls",
+    interactiveParams: "interactive_params",
+    backgroundMode: "background",
+    doNotTrack: "dnt"
+  };
+  let n;
+  for (n in e) {
+    const o = e[n];
+    if (n === "url" || o === void 0)
+      continue;
+    const a = r[n] ?? n;
+    t.searchParams.append(a, o.toString());
+  }
+  if (t.searchParams.set("autoplay", "true"), typeof e.controlsColor == "string") {
+    const o = T(e.controlsColor).toHex().replace("#", "");
+    t.searchParams.set("color", o);
+  }
+  return e.showPortrait && t.searchParams.set("title", "true"), e.showByline && (t.searchParams.set("portrait", "true"), t.searchParams.set("title", "true")), t.toString();
+}, f = (e) => {
+  const t = document.createElement("link");
+  t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
+};
+let I = !1;
+const K = "https://f.vimeocdn.com", x = "https://player.vimeo.com", b = "https://i.vimeocdn.com", Q = () => {
+  I || window.matchMedia("(hover: none)").matches || (f(K), f(x), f(b), I = !0);
+}, W = (e) => {
+  try {
+    const r = new URL(e).pathname.split("/")[2];
+    return r === "" || r == null ? void 0 : r;
+  } catch {
+  }
+}, X = async (e) => {
+  const r = `https://vimeo.com/api/v2/video/${W(e)}.json`, o = (await (await fetch(r)).json())[0].thumbnail_large, a = o.substr(o.lastIndexOf("/") + 1).split("_")[0], i = new URL(b);
+  return i.pathname = `/video/${a}.webp`, i.searchParams.append("mw", "1100"), i.searchParams.append("mh", "619"), i.searchParams.append("q", "70"), i;
+}, Z = () => /* @__PURE__ */ s(
+  "div",
+  {
+    style: {
+      display: "flex",
+      width: "100%",
+      height: "100%",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "1.2em"
+    },
+    children: 'Open the "Settings" panel and paste a video URL, e.g. https://vimeo.com/831343124.'
+  }
+), tt = ({
+  status: e,
+  loading: t,
+  videoUrl: r,
+  previewImageUrl: n,
+  autoplay: o,
+  renderer: a,
+  showPreview: i,
+  onStatusChange: c,
+  onPreviewImageUrlChange: l
+}) => {
+  const [m, p] = h(0);
+  if (u(() => {
+    o && a !== "canvas" && e === "initial" && c("loading");
+  }, [o, e, a, c]), u(() => {
+    a !== "canvas" && Q();
+  }, [a]), u(() => {
+    if (r !== void 0) {
+      if (i === !1) {
+        l(void 0);
+        return;
+      }
+      n === void 0 && X(r).then(l).catch(() => {
+        console.error(`Could not load preview image for ${r}`);
+      });
+    }
+  }, [l, i, r, n]), !(a === "canvas" || e === "initial"))
+    return /* @__PURE__ */ s(
+      "iframe",
+      {
+        src: r,
+        loading: t,
+        allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;",
+        allowFullScreen: !0,
+        style: {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          opacity: m,
+          transition: "opacity 1s",
+          border: "none"
+        },
+        onLoad: () => {
+          c("ready"), p(1);
+        }
+      }
+    );
+}, et = q({
+  onInitPlayer: () => {
+  },
+  status: "initial"
+}), rt = G(
+  ({
+    url: e,
+    loading: t = "lazy",
+    autoplay: r = !1,
+    autopause: n = !0,
+    backgroundMode: o = !1,
+    showByline: a = !1,
+    showControls: i = !0,
+    doNotTrack: c = !1,
+    keyboard: l = !0,
+    loop: m = !1,
+    muted: p = !1,
+    pip: R = !1,
+    playsinline: U = !0,
+    showPortrait: S = !0,
+    quality: L = "auto",
+    responsive: k = !0,
+    speed: E = !1,
+    showTitle: _ = !1,
+    transparent: j = !0,
+    showPreview: M = !1,
+    autopip: N,
+    controlsColor: O,
+    interactiveParams: V,
+    texttrack: $,
+    children: A,
+    ...B
+  }, d) => {
+    const [v, y] = h("initial"), [w, D] = h(), { renderer: g } = H(Y), P = J({
+      url: e,
+      autoplay: r,
+      autopause: n,
+      backgroundMode: o,
+      showControls: i,
+      controlsColor: O,
+      doNotTrack: c,
+      interactiveParams: V,
+      keyboard: l,
+      loop: m,
+      muted: p,
+      pip: R,
+      playsinline: U,
+      quality: L,
+      responsive: k,
+      speed: E,
+      texttrack: $,
+      showTitle: _,
+      transparent: j,
+      showPortrait: S,
+      autopip: N
+    });
+    return /* @__PURE__ */ s(
+      et.Provider,
+      {
+        value: {
+          status: v,
+          previewImageUrl: w,
+          onInitPlayer() {
+            g !== "canvas" && y("loading");
+          }
+        },
+        children: /* @__PURE__ */ s(
+          "div",
+          {
+            ...B,
+            ref: (C) => {
+              d !== null && (typeof d == "function" ? d(C) : d.current = C);
+            },
+            children: P === void 0 ? /* @__PURE__ */ s(Z, {}) : /* @__PURE__ */ F(z, { children: [
+              A,
+              /* @__PURE__ */ s(
+                tt,
+                {
+                  autoplay: r,
+                  videoUrl: P,
+                  previewImageUrl: w,
+                  loading: t,
+                  showPreview: M,
+                  renderer: g,
+                  status: v,
+                  onStatusChange: y,
+                  onPreviewImageUrlChange: D
+                }
+              )
+            ] })
+          }
+        )
+      }
+    );
+  }
+);
+rt.displayName = "Vimeo";
+export {
+  rt as Vimeo,
+  et as VimeoContext
+};

package/lib/vimeo.ws.js

@@ -0,0 +1,329 @@
+import { VimeoIcon as e, SpinnerIcon as t, PlayIcon as p } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { div as r } from "@webstudio-is/sdk/normalize.css";
+import { props as a } from "./__generated__/vimeo.props.js";
+const n = {
+  div: r
+}, s = {
+  category: "media",
+  type: "container",
+  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
+  order: 1,
+  icon: e,
+  states: o,
+  presetStyle: n,
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link", "Heading"] }
+  },
+  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: "VimeoSpinner",
+          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: t
+                }
+              ],
+              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: p
+                    }
+                  ],
+                  children: []
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, u = [
+  "id",
+  "className",
+  "url",
+  "quality",
+  "showPreview",
+  "autoplay",
+  "loading",
+  "backgroundMode",
+  "doNotTrack",
+  "loop",
+  "muted",
+  "showPortrait",
+  "showByline",
+  "showTitle",
+  "showControls",
+  "controlsColor"
+], d = {
+  props: a,
+  initialProps: u
+};
+export {
+  s as meta,
+  d as propsMeta
+};

package/lib/xml-node.js

@@ -0,0 +1,44 @@
+import { jsxs as n, jsx as p } from "react/jsx-runtime";
+import { ReactSdkContext as y } from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as b, useContext as h, createElement as u, Children as g } from "react";
+const x = b(
+  ({ tag: i = "", children: e, ...o }, c) => {
+    const { renderer: f } = h(y), s = Object.entries(o).filter(
+      ([t]) => t.startsWith("data-") === !1 && t.startsWith("aria-") === !1
+    ).filter(([t]) => t !== "tabIndex").filter(([, t]) => typeof t != "function");
+    if (f === void 0) {
+      const t = Object.fromEntries(s);
+      return u(i, t, e);
+    }
+    const r = g.toArray(e), l = r.length > 0 && r.every((t) => typeof t == "string"), a = i.replace(/^[^\p{L}_]+/u, "").replaceAll(/[^\p{L}\p{N}\-._:]+/gu, ""), d = s.map(
+      ([t, m]) => `${t}=${JSON.stringify(m)}`
+    );
+    return /* @__PURE__ */ n("div", { ...o, children: [
+      /* @__PURE__ */ n("span", { style: { color: "rgb(16, 23, 233)" }, children: [
+        "<",
+        [a, ...d].join(" "),
+        ">"
+      ] }),
+      r.length > 0 && /* @__PURE__ */ p(
+        "div",
+        {
+          ref: c,
+          style: {
+            display: l ? "inline" : "block",
+            marginLeft: l ? 0 : "1rem"
+          },
+          children: e
+        }
+      ),
+      /* @__PURE__ */ n("span", { style: { color: "rgb(16, 23, 233)" }, children: [
+        "</",
+        a,
+        ">"
+      ] })
+    ] });
+  }
+);
+x.displayName = "XmlNode";
+export {
+  x as XmlNode
+};

package/lib/xml-node.ws.js

@@ -0,0 +1,18 @@
+import { XmlIcon as o } from "@webstudio-is/icons/svg";
+import "@webstudio-is/react-sdk";
+import { props as t } from "./__generated__/xml-node.props.js";
+const i = {
+  category: "xml",
+  order: 6,
+  type: "container",
+  icon: o,
+  stylable: !1,
+  description: "XML Node"
+}, a = {
+  props: t,
+  initialProps: ["tag"]
+};
+export {
+  i as meta,
+  a as propsMeta
+};

package/lib/xml-time.js

@@ -0,0 +1,25 @@
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as m, useContext as a } from "react";
+import { ReactSdkContext as T } from "@webstudio-is/react-sdk/runtime";
+const l = "short", u = "dateTime attribute is not set", N = "", c = (e) => {
+  if (e === "")
+    return;
+  let t = new Date(e);
+  if (Number.isNaN(t.getTime()) === !1)
+    return t;
+  if (/^\d+$/.test(e)) {
+    let o = Number(e);
+    e.length === 10 && (o *= 1e3), t = new Date(o);
+  }
+  if (Number.isNaN(t.getTime()) === !1)
+    return t;
+}, d = m(
+  ({ dateStyle: e = l, datetime: t = u }, o) => {
+    const { renderer: i } = a(T), s = t === null ? N : t.toString(), n = c(s);
+    let r = s;
+    return n && (r = n.toISOString(), e === "short" && (r = r.split("T")[0])), i === void 0 ? r : /* @__PURE__ */ f("time", { ref: o, children: r });
+  }
+);
+export {
+  d as XmlTime
+};

package/lib/xml-time.ws.js

@@ -0,0 +1,18 @@
+import { CalendarIcon as t } from "@webstudio-is/icons/svg";
+import "@webstudio-is/react-sdk";
+import { props as e } from "./__generated__/xml-time.props.js";
+const i = {
+  category: "xml",
+  type: "container",
+  description: "Converts machine-readable date and time to ISO format.",
+  icon: t,
+  stylable: !1,
+  order: 7
+}, n = {
+  props: e,
+  initialProps: ["datetime", "dateStyle"]
+};
+export {
+  i as meta,
+  n as propsMeta
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.191.4",
+  "version": "0.192.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -42,10 +42,10 @@
     "@react-aria/utils": "^3.25.3",
     "colord": "^2.9.3",
     "micromark": "^4.0.0",
-    "@webstudio-is/icons": "0.191.4",
-    "@webstudio-is/image": "0.191.4",
-    "@webstudio-is/react-sdk": "0.191.4",
-    "@webstudio-is/sdk": "0.191.4"
+    "@webstudio-is/icons": "0.192.0",
+    "@webstudio-is/react-sdk": "0.192.0",
+    "@webstudio-is/sdk": "0.192.0",
+    "@webstudio-is/image": "0.192.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",