@webstudio-is/sdk-components-react 0.0.0-017f1bd

package/lib/vimeo.ws.js

@@ -0,0 +1,35 @@
+import { VimeoIcon as o } from "@webstudio-is/icons/svg";
+import { div as e } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/vimeo.props.js";
+const i = [
+  "id",
+  "className",
+  "url",
+  "title",
+  "quality",
+  "loading",
+  "showPreview",
+  "autoplay",
+  "doNotTrack",
+  "loop",
+  "muted",
+  "showPortrait",
+  "showByline",
+  "showTitle",
+  "showControls",
+  "controlsColor",
+  "playsinline"
+], s = {
+  icon: o,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div: e },
+  initialProps: i,
+  props: t
+};
+export {
+  s as meta
+};

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,88 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { $ as r, ActionValue as i, ws as e, PlaceholderValue as a, css as n, Variable as w, expression as l } from "@webstudio-is/template";
+const s = new w("formState", "initial"), d = {
+  category: "data",
+  order: 1,
+  description: "Collect user data and send it to any webhook.",
+  template: /* @__PURE__ */ o(
+    r.Form,
+    {
+      state: l`${s}`,
+      onStateChange: new i(["state"], l`${s} = state`),
+      children: [
+        /* @__PURE__ */ o(
+          e.element,
+          {
+            "ws:tag": "div",
+            "ws:label": "Form Content",
+            "ws:show": l`${s} === 'initial' || ${s} === 'error'`,
+            children: [
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "label",
+                  "ws:style": n`
+            display: block;
+          `,
+                  children: new a("Name")
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "input",
+                  "ws:style": n`
+            display: block;
+          `,
+                  name: "name"
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "label",
+                  "ws:style": n`
+            display: block;
+          `,
+                  children: new a("Email")
+                }
+              ),
+              /* @__PURE__ */ t(
+                e.element,
+                {
+                  "ws:tag": "input",
+                  "ws:style": n`
+            display: block;
+          `,
+                  name: "email"
+                }
+              ),
+              /* @__PURE__ */ t(e.element, { "ws:tag": "button", children: new a("Submit") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.element,
+          {
+            "ws:tag": "div",
+            "ws:label": "Success Message",
+            "ws:show": l`${s} === 'success'`,
+            children: new a("Thank you for getting in touch!")
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.element,
+          {
+            "ws:tag": "div",
+            "ws:label": "Error Message",
+            "ws:show": l`${s} === 'error'`,
+            children: new a("Sorry, something went wrong.")
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  d as meta
+};

package/lib/webhook-form.ws.js

@@ -0,0 +1,27 @@
+import { WebhookFormIcon as o } from "@webstudio-is/icons/svg";
+import { form as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/webhook-form.props.js";
+const c = {
+  label: "Webhook Form",
+  icon: o,
+  presetStyle: {
+    form: e
+  },
+  states: [
+    { selector: "[data-state=error]", label: "Error" },
+    { selector: "[data-state=success]", label: "Success" }
+  ],
+  initialProps: ["id", "class", "state", "action"],
+  props: {
+    ...r,
+    action: {
+      type: "resource",
+      control: "resource",
+      description: "The URI of a program that processes the information submitted via the form.",
+      required: !1
+    }
+  }
+};
+export {
+  c as meta
+};

package/lib/xml-node.js

@@ -0,0 +1,61 @@
+import { jsxs as r, jsx as t, 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 C, createElement as N, Children as F } from "react";
+const j = b(
+  ({ tag: c = "", children: l, ...i }, d) => {
+    const { renderer: p } = C(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 N(
+        `${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__ */ r("span", { children: [
+      " ",
+      /* @__PURE__ */ t("span", { style: { color: "#FF0000" }, children: f }),
+      /* @__PURE__ */ t("span", { style: { color: "#000000" }, children: "=" }),
+      /* @__PURE__ */ r("span", { style: { color: "#0000FF" }, children: [
+        '"',
+        h,
+        '"'
+      ] })
+    ] }, y));
+    return /* @__PURE__ */ r("div", { ...i, style: { backgroundColor: "rgba(255,255,255,1)" }, children: [
+      /* @__PURE__ */ r("span", { children: [
+        /* @__PURE__ */ r("span", { style: { color: "#800000" }, children: [
+          "<",
+          s
+        ] }),
+        o.length > 0 && m(o),
+        n.length === 0 ? /* @__PURE__ */ t("span", { style: { color: "#800000" }, children: "/>" }) : /* @__PURE__ */ t("span", { style: { color: "#800000" }, children: ">" })
+      ] }),
+      n.length > 0 && /* @__PURE__ */ r(u, { children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            ref: d,
+            style: {
+              display: a ? "inline" : "block",
+              marginLeft: a ? 0 : "1rem",
+              color: "#000000"
+            },
+            children: l
+          }
+        ),
+        /* @__PURE__ */ r("span", { style: { color: "#800000" }, children: [
+          "</",
+          s,
+          ">"
+        ] })
+      ] })
+    ] });
+  }
+);
+j.displayName = "XmlNode";
+export {
+  j as XmlNode
+};

package/lib/xml-node.ws.js

@@ -0,0 +1,13 @@
+import { XmlIcon as o } from "@webstudio-is/icons/svg";
+import { props as r } from "./__generated__/xml-node.props.js";
+const m = {
+  category: "xml",
+  order: 6,
+  icon: o,
+  description: "XML Node",
+  initialProps: ["tag"],
+  props: r
+};
+export {
+  m as meta
+};

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,13 @@
+import { CalendarIcon as t } from "@webstudio-is/icons/svg";
+import { props as e } from "./__generated__/xml-time.props.js";
+const a = {
+  category: "xml",
+  description: "Converts machine-readable date and time to ISO format.",
+  icon: t,
+  order: 7,
+  initialProps: ["datetime", "dateStyle"],
+  props: e
+};
+export {
+  a as meta
+};

package/lib/youtube.js

@@ -0,0 +1,227 @@
+import { jsx as u, jsxs as E, Fragment as O } from "react/jsx-runtime";
+import { forwardRef as x, useState as p, useContext as S, useRef as T, useEffect as y } from "react";
+import { ReactSdkContext as A } from "@webstudio-is/react-sdk/runtime";
+import { VideoContext as N, requestFullscreen as P } from "./shared/video.js";
+const U = "https://www.youtube-nocookie.com", V = "https://www.youtube.com", j = "https://img.youtube.com", L = (e) => {
+  if (e)
+    try {
+      const t = new URL(e);
+      return t.pathname === "/embed" ? void 0 : t.hostname === "youtu.be" ? t.pathname.slice(1) : t.searchParams.get("v") || t.pathname.split("/").pop();
+    } catch {
+      return e;
+    }
+}, D = (e, t) => {
+  var o, n;
+  const s = L(e.url), r = new URL(t);
+  if (s)
+    r.pathname = `/embed/${s}`;
+  else if (e.url)
+    try {
+      const c = new URL(e.url);
+      r.pathname = c.pathname, r.search = c.search;
+    } catch {
+    }
+  const i = Object.keys(e), a = {};
+  a.autoplay = "1";
+  for (const c of i)
+    if (e[c] !== void 0)
+      switch (c) {
+        case "autoplay":
+          e.autoplay && e.muted === void 0 && (a.mute = "1");
+          break;
+        case "muted":
+          a.mute = e.muted ? "1" : "0";
+          break;
+        case "showControls":
+          a.controls = e.showControls ? "1" : "0";
+          break;
+        case "showRelatedVideos":
+          a.rel = e.showRelatedVideos ? "1" : "0";
+          break;
+        case "keyboard":
+          a.keyboard = e.keyboard ? "1" : "0";
+          break;
+        case "loop":
+          a.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (a.playlist = s);
+          break;
+        case "inline":
+          a.playsinline = e.inline ? "1" : "0";
+          break;
+        case "allowFullscreen":
+          a.fs = e.allowFullscreen ? "1" : "0";
+          break;
+        case "captionLanguage":
+          a.cc_lang_pref = e.captionLanguage;
+          break;
+        case "showCaptions":
+          a.cc_load_policy = e.showCaptions ? "1" : "0";
+          break;
+        case "showAnnotations":
+          a.iv_load_policy = e.showAnnotations ? "1" : "3";
+          break;
+        case "startTime":
+          a.start = (o = e.startTime) == null ? void 0 : o.toString();
+          break;
+        case "endTime":
+          a.end = (n = e.endTime) == null ? void 0 : n.toString();
+          break;
+        case "disableKeyboard":
+          a.disablekb = e.disableKeyboard ? "1" : "0";
+          break;
+        case "language":
+          a.hl = e.language;
+          break;
+        case "listId":
+          a.list = e.listId;
+          break;
+        case "listType":
+          a.listType = e.listType;
+          break;
+        case "color":
+          a.color = e.color;
+          break;
+        case "origin":
+          a.origin = e.origin;
+          break;
+        case "referrer":
+          a.widget_referrer = e.referrer;
+          break;
+        case "playlist":
+          a.playlist = e.playlist;
+          break;
+        case "enablejsapi":
+          a.enablejsapi = e.enablejsapi ? "1" : "0";
+          break;
+      }
+  return Object.entries(a).forEach(([c, l]) => {
+    l !== void 0 && r.searchParams.append(c, l.toString());
+  }), r.toString();
+}, R = (e) => {
+  const t = document.createElement("link");
+  t.rel = "preconnect", t.href = e, t.crossOrigin = "true", document.head.appendChild(t);
+};
+let _ = !1;
+const F = (e) => {
+  if (!(_ || window.matchMedia("(hover: none)").matches)) {
+    try {
+      const t = new URL(e);
+      R(t.origin);
+    } catch {
+    }
+    R(j), _ = !0;
+  }
+}, Y = (e) => new URL(`${j}/vi/${e}/maxresdefault.jpg`), K = () => /* @__PURE__ */ u("div", { className: "flex w-full h-full items-center justify-center text-lg", children: 'Open the "Settings" panel and paste a video URL, e.g. https://youtube.com/watch?v=dQw4w9WgXcQ' }), M = ({
+  title: e,
+  status: t,
+  loading: s,
+  videoUrl: r,
+  previewImageUrl: i,
+  autoplay: a,
+  inline: o,
+  renderer: n,
+  showPreview: c,
+  onStatusChange: l,
+  onPreviewImageUrlChange: d
+}) => {
+  const [h, m] = p(0), b = T(null);
+  return y(() => {
+    a && n !== "canvas" && t === "initial" && l("loading");
+  }, [a, t, n, l]), y(() => {
+    n !== "canvas" && F(r);
+  }, [n, r]), y(() => {
+    const f = L(r);
+    if (!f || !c) {
+      d(void 0);
+      return;
+    }
+    i || d(Y(f));
+  }, [d, c, r, i]), n === "canvas" || t === "initial" ? null : /* @__PURE__ */ u(
+    "iframe",
+    {
+      ref: b,
+      title: e,
+      src: r,
+      loading: s,
+      allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+      allowFullScreen: !0,
+      style: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        opacity: h,
+        transition: "opacity 1s",
+        border: "none"
+      },
+      onLoad: () => {
+        l("ready"), m(1), !o && !a && b.current && P(b.current);
+      }
+    }
+  );
+}, $ = x(
+  ({
+    url: e,
+    loading: t = "lazy",
+    autoplay: s,
+    showPreview: r,
+    showAnnotations: i,
+    showCaptions: a,
+    showControls: o,
+    allowFullscreen: n,
+    keyboard: c,
+    children: l,
+    privacyEnhancedMode: d,
+    inline: h = !1,
+    ...m
+  }, b) => {
+    const [f, g] = p("initial"), [w, C] = p(), { renderer: k } = S(A), I = d ?? !0 ? U : V, v = D(
+      {
+        ...m,
+        inline: h,
+        url: e,
+        keyboard: c,
+        showAnnotations: i,
+        showCaptions: a,
+        allowFullscreen: n,
+        showControls: o,
+        autoplay: s,
+        enablejsapi: !1
+      },
+      I
+    );
+    return /* @__PURE__ */ u(
+      N.Provider,
+      {
+        value: {
+          status: f,
+          previewImageUrl: w,
+          onInitPlayer() {
+            k !== "canvas" && g("loading");
+          }
+        },
+        children: /* @__PURE__ */ u("div", { ...m, ref: b, children: v ? /* @__PURE__ */ E(O, { children: [
+          l,
+          /* @__PURE__ */ u(
+            M,
+            {
+              title: m.title,
+              autoplay: s,
+              videoUrl: v,
+              previewImageUrl: w,
+              loading: t,
+              inline: h,
+              showPreview: r,
+              renderer: k,
+              status: f,
+              onStatusChange: g,
+              onPreviewImageUrlChange: C
+            }
+          )
+        ] }) : /* @__PURE__ */ u(K, {}) })
+      }
+    );
+  }
+);
+$.displayName = "YouTube";
+export {
+  $ as YouTube
+};

package/lib/youtube.template.js

@@ -0,0 +1,98 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { SpinnerIcon as r, PlayIcon as l } from "@webstudio-is/icons/svg";
+import { $ as t, css as o, ws as a } from "@webstudio-is/template";
+const d = {
+  label: "YouTube",
+  category: "media",
+  order: 1,
+  description: "Add a video to your page that is hosted on YouTube. Paste a YouTube URL and configure the video in the Settings tab.",
+  template: /* @__PURE__ */ i(
+    t.YouTube,
+    {
+      "ws:label": "YouTube",
+      "ws:style": o`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `,
+      children: [
+        /* @__PURE__ */ e(
+          t.VimeoPreviewImage,
+          {
+            "ws:label": "Preview Image",
+            "ws:style": o`
+          position: absolute;
+          object-fit: cover;
+          object-position: center;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        `,
+            alt: "YouTube video preview image",
+            sizes: "100vw",
+            optimize: !0
+          }
+        ),
+        /* @__PURE__ */ e(
+          t.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__ */ e(t.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+          }
+        ),
+        /* @__PURE__ */ e(
+          t.VimeoPlayButton,
+          {
+            "ws:label": "Play Button",
+            "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__ */ e(
+              a.element,
+              {
+                "ws:tag": "div",
+                "ws:label": "Play Icon",
+                "ws:style": o`
+            width: 60px;
+            height: 60px;
+          `,
+                "aria-hidden": !0,
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Play SVG", code: l })
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  d as meta
+};

package/lib/youtube.ws.js

@@ -0,0 +1,45 @@
+import { YoutubeIcon as e } from "@webstudio-is/icons/svg";
+import { div as o } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/youtube.props.js";
+const n = [
+  "id",
+  "className",
+  "url",
+  "privacyEnhancedMode",
+  "title",
+  "loading",
+  "showPreview",
+  "autoplay",
+  "showControls",
+  "showRelatedVideos",
+  "keyboard",
+  "loop",
+  "inline",
+  "allowFullscreen",
+  "showCaptions",
+  "showAnnotations",
+  "startTime",
+  "endTime",
+  "disableKeyboard",
+  "referrer",
+  "listType",
+  "listId",
+  "origin",
+  "captionLanguage",
+  "language",
+  "color",
+  "playlist"
+], s = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: ["VimeoSpinner", "VimeoPlayButton", "VimeoPreviewImage"]
+  },
+  presetStyle: { div: o },
+  initialProps: n,
+  props: i
+};
+export {
+  s as meta
+};