@webstudio-is/sdk-components-react 0.0.0-021f2d4

package/lib/vimeo-play-button.ws.js

@@ -0,0 +1,31 @@
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { ButtonElementIcon as o } from "@webstudio-is/icons/svg";
+import { button as e } from "@webstudio-is/sdk/normalize.css";
+import { props as n } from "./__generated__/vimeo-play-button.props.js";
+const r = {
+  button: e
+}, p = {
+  category: "hidden",
+  type: "container",
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $in: ["Vimeo", "YouTube"] }
+    },
+    {
+      relation: "ancestor",
+      component: { $neq: "Button" }
+    }
+  ],
+  label: "Play Button",
+  icon: o,
+  presetStyle: r,
+  states: t
+}, c = {
+  props: n,
+  initialProps: ["id", "className"]
+};
+export {
+  p as meta,
+  c as propsMeta
+};

package/lib/vimeo-preview-image.js

@@ -0,0 +1,19 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as i, useContext as t } from "react";
+import { Image as a } from "./image.js";
+import { VimeoContext as g } from "./vimeo.js";
+const n = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=", s = i(({ src: A, ...e }, o) => {
+  const r = t(g);
+  return /* @__PURE__ */ m(
+    a,
+    {
+      ...e,
+      src: String(r.previewImageUrl ?? A ?? n),
+      ref: o
+    }
+  );
+});
+s.displayName = "VimeoPreviewImage";
+export {
+  s as VimeoPreviewImage
+};

package/lib/vimeo-preview-image.ws.js

@@ -0,0 +1,27 @@
+import { meta as e, propsMeta as o } from "./image.ws.js";
+import { props as r } from "./__generated__/vimeo-preview-image.props.js";
+const i = {
+  ...e,
+  category: "hidden",
+  label: "Preview Image",
+  constraints: {
+    relation: "ancestor",
+    component: { $in: ["Vimeo", "YouTube"] }
+  }
+}, p = {
+  props: {
+    ...r,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1
+    }
+  },
+  initialProps: o.initialProps
+};
+export {
+  i as meta,
+  p as propsMeta
+};

package/lib/vimeo-spinner.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as r, useContext as i } from "react";
+import { VimeoContext as n } from "./vimeo.js";
+const m = r(
+  (o, t) => {
+    if (i(n).status === "loading")
+      return /* @__PURE__ */ e("div", { ...o, ref: t });
+  }
+);
+m.displayName = "VimeoSpinner";
+export {
+  m as VimeoSpinner
+};

package/lib/vimeo-spinner.ws.js

@@ -0,0 +1,25 @@
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { BoxIcon as e } from "@webstudio-is/icons/svg";
+import { props as r } from "./__generated__/vimeo-spinner.props.js";
+const n = {
+  div: t
+}, m = {
+  type: "container",
+  constraints: {
+    relation: "ancestor",
+    component: { $in: ["Vimeo", "YouTube"] }
+  },
+  icon: e,
+  states: o,
+  presetStyle: n,
+  category: "hidden",
+  label: "Spinner"
+}, c = {
+  props: r,
+  initialProps: ["id", "className"]
+};
+export {
+  m as meta,
+  c as propsMeta
+};

package/lib/vimeo.js

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

package/lib/vimeo.template.js

@@ -0,0 +1,93 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { SpinnerIcon as r, PlayIcon as n } from "@webstudio-is/icons/svg";
+import { $ as e, css as o } from "@webstudio-is/template";
+const p = {
+  category: "media",
+  order: 1,
+  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
+  template: /* @__PURE__ */ i(
+    e.Vimeo,
+    {
+      "ws:style": o`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `,
+      children: [
+        /* @__PURE__ */ t(
+          e.VimeoPreviewImage,
+          {
+            "ws:style": o`
+          position: absolute;
+          object-fit: cover;
+          object-position: center;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        `,
+            alt: "Vimeo video preview image",
+            sizes: "100vw",
+            optimize: !0
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.VimeoSpinner,
+          {
+            "ws:label": "Spinner",
+            "ws:style": o`
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 70px;
+          height: 70px;
+          margin-top: -35px;
+          margin-left: -35px;
+        `,
+            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.VimeoPlayButton,
+          {
+            "ws:style": o`
+          position: absolute;
+          width: 140px;
+          height: 80px;
+          top: 50%;
+          left: 50%;
+          margin-top: -40px;
+          margin-left: -70px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-style: none;
+          border-radius: 5px;
+          cursor: pointer;
+          background-color: rgb(18, 18, 18);
+          color: rgb(255, 255, 255);
+          &:hover {
+            background-color: rgb(0, 173, 239);
+          }
+        `,
+            "aria-label": "Play button",
+            children: /* @__PURE__ */ t(
+              e.Box,
+              {
+                "ws:label": "Play Icon",
+                "ws:style": o`
+            width: 60px;
+            height: 60px;
+          `,
+                "aria-hidden": !0,
+                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: n })
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  p as meta
+};

package/lib/vimeo.ws.js

@@ -0,0 +1,40 @@
+import { VimeoIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { div as r } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/vimeo.props.js";
+const n = {
+  div: r
+}, c = {
+  type: "container",
+  icon: o,
+  states: t,
+  presetStyle: n,
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link", "Heading"] }
+  }
+}, e = [
+  "id",
+  "className",
+  "url",
+  "title",
+  "quality",
+  "loading",
+  "showPreview",
+  "autoplay",
+  "doNotTrack",
+  "loop",
+  "muted",
+  "showPortrait",
+  "showByline",
+  "showTitle",
+  "showControls",
+  "controlsColor"
+], m = {
+  props: i,
+  initialProps: e
+};
+export {
+  c as meta,
+  m as propsMeta
+};

package/lib/webhook-form.js

@@ -0,0 +1,9 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const i = e(
+  ({ children: o, state: a = "initial", ...r }, m) => /* @__PURE__ */ t("form", { ...r, ref: m, children: o })
+);
+i.displayName = "WebhookForm";
+export {
+  i as WebhookForm
+};

package/lib/webhook-form.template.js

@@ -0,0 +1,49 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { Variable as s, $ as e, expression as o, ActionValue as i, PlaceholderValue as a } from "@webstudio-is/template";
+const n = new s("formState", "initial"), w = {
+  category: "data",
+  order: 1,
+  description: "Collect user data and send it to any webhook.",
+  template: /* @__PURE__ */ r(
+    e.Form,
+    {
+      state: o`${n}`,
+      onStateChange: new i(["state"], o`${n} = state`),
+      children: [
+        /* @__PURE__ */ r(
+          e.Box,
+          {
+            "ws:label": "Form Content",
+            "ws:show": o`${n} === 'initial' || ${n} === 'error'`,
+            children: [
+              /* @__PURE__ */ t(e.Label, { children: new a("Name") }),
+              /* @__PURE__ */ t(e.Input, { name: "name" }),
+              /* @__PURE__ */ t(e.Label, { children: new a("Email") }),
+              /* @__PURE__ */ t(e.Input, { name: "email" }),
+              /* @__PURE__ */ t(e.Button, { children: new a("Submit") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.Box,
+          {
+            "ws:label": "Success Message",
+            "ws:show": o`${n} === 'success'`,
+            children: new a("Thank you for getting in touch!")
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.Box,
+          {
+            "ws:label": "Error Message",
+            "ws:show": o`${n} === 'error'`,
+            children: new a("Sorry, something went wrong.")
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  w as meta
+};

package/lib/webhook-form.ws.js

@@ -0,0 +1,26 @@
+import { WebhookFormIcon as o } from "@webstudio-is/icons/svg";
+import { form as t } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/webhook-form.props.js";
+const n = {
+  label: "Webhook Form",
+  icon: o,
+  type: "container",
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Form", "Button", "Link"] }
+  },
+  presetStyle: {
+    form: t
+  },
+  states: [
+    { selector: "[data-state=error]", label: "Error" },
+    { selector: "[data-state=success]", label: "Success" }
+  ]
+}, c = {
+  props: e,
+  initialProps: ["id", "className", "state", "action"]
+};
+export {
+  n as meta,
+  c as propsMeta
+};

package/lib/xml-node.js

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

package/lib/xml-node.ws.js

@@ -0,0 +1,16 @@
+import { XmlIcon as o } from "@webstudio-is/icons/svg";
+import { props as r } from "./__generated__/xml-node.props.js";
+const e = {
+  category: "xml",
+  order: 6,
+  type: "container",
+  icon: o,
+  description: "XML Node"
+}, i = {
+  props: r,
+  initialProps: ["tag"]
+};
+export {
+  e as meta,
+  i 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,16 @@
+import { CalendarIcon as t } from "@webstudio-is/icons/svg";
+import { props as e } from "./__generated__/xml-time.props.js";
+const a = {
+  category: "xml",
+  type: "container",
+  description: "Converts machine-readable date and time to ISO format.",
+  icon: t,
+  order: 7
+}, i = {
+  props: e,
+  initialProps: ["datetime", "dateStyle"]
+};
+export {
+  a as meta,
+  i as propsMeta
+};