@webstudio-is/sdk-components-react 0.196.0 → 0.198.0

package/lib/webhook-form.ws.js

@@ -1,127 +1,26 @@
-import { meta as t } from "./form.ws.js";
-import { showAttribute as e } from "@webstudio-is/react-sdk";
-import { props as o } from "./__generated__/webhook-form.props.js";
-import { WebhookFormIcon as a } from "@webstudio-is/icons/svg";
-const c = {
-  ...t,
-  category: "data",
+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",
-  description: "Collect user data and send it to any webhook.",
-  order: 1,
-  icon: a,
+  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" }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Form",
-      variables: {
-        formState: { initialValue: "initial" }
-      },
-      props: [
-        {
-          type: "expression",
-          name: "state",
-          code: "formState"
-        },
-        {
-          type: "action",
-          name: "onStateChange",
-          value: [
-            { type: "execute", args: ["state"], code: "formState = state" }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          label: "Form Content",
-          component: "Box",
-          props: [
-            {
-              type: "expression",
-              name: e,
-              code: "formState === 'initial' || formState === 'error'"
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "Label",
-              children: [{ type: "text", value: "Name", placeholder: !0 }]
-            },
-            {
-              type: "instance",
-              component: "Input",
-              props: [{ type: "string", name: "name", value: "name" }],
-              children: []
-            },
-            {
-              type: "instance",
-              component: "Label",
-              children: [{ type: "text", value: "Email", placeholder: !0 }]
-            },
-            {
-              type: "instance",
-              component: "Input",
-              props: [{ type: "string", name: "name", value: "email" }],
-              children: []
-            },
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Submit", placeholder: !0 }]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          label: "Success Message",
-          component: "Box",
-          props: [
-            {
-              type: "expression",
-              name: e,
-              code: "formState === 'success'"
-            }
-          ],
-          children: [
-            {
-              type: "text",
-              value: "Thank you for getting in touch!",
-              placeholder: !0
-            }
-          ]
-        },
-        {
-          type: "instance",
-          label: "Error Message",
-          component: "Box",
-          props: [
-            {
-              type: "expression",
-              name: e,
-              code: "formState === 'error'"
-            }
-          ],
-          children: [
-            {
-              type: "text",
-              value: "Sorry, something went wrong.",
-              placeholder: !0
-            }
-          ]
-        }
-      ]
-    }
   ]
-}, i = {
-  props: o,
+}, c = {
+  props: e,
   initialProps: ["id", "className", "state", "action"]
 };
 export {
-  c as meta,
-  i as propsMeta
+  n as meta,
+  c as propsMeta
 };

package/lib/xml-node.js

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

package/lib/xml-node.ws.js

@@ -1,18 +1,17 @@
 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 = {
+const p = {
   category: "xml",
   order: 6,
   type: "container",
   icon: o,
   stylable: !1,
   description: "XML Node"
-}, a = {
+}, i = {
   props: t,
   initialProps: ["tag"]
 };
 export {
-  i as meta,
-  a as propsMeta
+  p as meta,
+  i as propsMeta
 };

package/lib/xml-time.ws.js

@@ -1,18 +1,17 @@
 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 = {
+const r = {
   category: "xml",
   type: "container",
   description: "Converts machine-readable date and time to ISO format.",
   icon: t,
   stylable: !1,
   order: 7
-}, n = {
+}, i = {
   props: e,
   initialProps: ["datetime", "dateStyle"]
 };
 export {
-  i as meta,
-  n as propsMeta
+  r as meta,
+  i as propsMeta
 };

package/lib/youtube.js

@@ -0,0 +1,200 @@
+import { jsx as u, jsxs as _, Fragment as R } from "react/jsx-runtime";
+import { forwardRef as C, useState as f, useContext as I, useEffect as y } from "react";
+import { ReactSdkContext as L } from "@webstudio-is/react-sdk/runtime";
+import { VimeoContext as E } from "./vimeo.js";
+const O = "https://www.youtube-nocookie.com", x = "https://www.youtube.com", w = "https://img.youtube.com", k = (e) => {
+  if (e)
+    try {
+      const a = new URL(e);
+      return a.hostname === "youtu.be" ? a.pathname.slice(1) : a.searchParams.get("v") || a.pathname.split("/").pop();
+    } catch {
+      return e;
+    }
+}, S = (e, a) => {
+  var r, s;
+  const o = k(e.url);
+  if (!o)
+    return;
+  const c = new URL(`${a}/embed/${o}`), l = Object.keys(e), t = {};
+  for (const n of l)
+    switch (n) {
+      case "autoplay":
+        t.autoplay = e.autoplay ? "1" : "0", e.autoplay && e.muted === void 0 && (t.mute = "1");
+        break;
+      case "muted":
+        t.mute = e.muted ? "1" : "0";
+        break;
+      case "showControls":
+        t.controls = e.showControls ? "1" : "0";
+        break;
+      case "showRelatedVideos":
+        t.rel = e.showRelatedVideos ? "1" : "0";
+        break;
+      case "keyboard":
+        t.keyboard = e.keyboard ? "1" : "0";
+        break;
+      case "loop":
+        t.loop = e.loop ? "1" : "0", e.loop && (e.playlist ?? "").trim() === "" && (t.playlist = o);
+        break;
+      case "inline":
+        t.playsinline = e.inline ? "1" : "0";
+        break;
+      case "allowFullscreen":
+        t.fs = e.allowFullscreen ? "1" : "0";
+        break;
+      case "captionLanguage":
+        t.cc_lang_pref = e.captionLanguage;
+        break;
+      case "showCaptions":
+        t.cc_load_policy = e.showCaptions ? "1" : "0";
+        break;
+      case "showAnnotations":
+        t.iv_load_policy = e.showAnnotations ? "1" : "3";
+        break;
+      case "startTime":
+        t.start = (r = e.startTime) == null ? void 0 : r.toString();
+        break;
+      case "endTime":
+        t.end = (s = e.endTime) == null ? void 0 : s.toString();
+        break;
+      case "disableKeyboard":
+        t.disablekb = e.disableKeyboard ? "1" : "0";
+        break;
+      case "language":
+        t.hl = e.language;
+        break;
+      case "listId":
+        t.list = e.listId;
+        break;
+      case "listType":
+        t.listType = e.listType;
+        break;
+      case "color":
+        t.color = e.color;
+        break;
+      case "origin":
+        t.origin = e.origin;
+        break;
+      case "referrer":
+        t.widget_referrer = e.referrer;
+        break;
+      case "playlist":
+        t.playlist = e.playlist;
+        break;
+    }
+  return Object.entries(t).forEach(([n, i]) => {
+    i !== void 0 && c.searchParams.append(n, i.toString());
+  }), c.toString();
+}, h = (e) => {
+  const a = document.createElement("link");
+  a.rel = "preconnect", a.href = e, a.crossOrigin = "true", document.head.appendChild(a);
+};
+let g = !1;
+const T = (e) => {
+  if (!(g || window.matchMedia("(hover: none)").matches)) {
+    try {
+      const a = new URL(e);
+      h(a.origin);
+    } catch {
+    }
+    h(w), g = !0;
+  }
+}, j = (e) => new URL(`${w}/vi/${e}/maxresdefault.jpg`), A = () => /* @__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' }), N = ({
+  title: e,
+  status: a,
+  loading: o,
+  videoUrl: c,
+  previewImageUrl: l,
+  autoplay: t,
+  renderer: r,
+  showPreview: s,
+  onStatusChange: n,
+  onPreviewImageUrlChange: i
+}) => {
+  const [m, b] = f(0);
+  return y(() => {
+    t && r !== "canvas" && a === "initial" && n("loading");
+  }, [t, a, r, n]), y(() => {
+    r !== "canvas" && T(c);
+  }, [r, c]), y(() => {
+    const d = k(c);
+    if (!d || !s) {
+      i(void 0);
+      return;
+    }
+    l || i(j(d));
+  }, [i, s, c, l]), r === "canvas" || a === "initial" ? null : /* @__PURE__ */ u(
+    "iframe",
+    {
+      title: e,
+      src: c,
+      loading: o,
+      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: () => {
+        n("ready"), b(1);
+      }
+    }
+  );
+}, P = C(
+  ({
+    url: e,
+    loading: a = "lazy",
+    autoplay: o,
+    showPreview: c,
+    children: l,
+    privacyEnhancedMode: t,
+    ...r
+  }, s) => {
+    const [n, i] = f("initial"), [m, b] = f(), { renderer: d } = I(L), v = t ?? !0 ? O : x, p = S(
+      {
+        ...r,
+        url: e,
+        autoplay: !0
+      },
+      v
+    );
+    return /* @__PURE__ */ u(
+      E.Provider,
+      {
+        value: {
+          status: n,
+          previewImageUrl: m,
+          onInitPlayer() {
+            d !== "canvas" && i("loading");
+          }
+        },
+        children: /* @__PURE__ */ u("div", { ...r, ref: s, children: p ? /* @__PURE__ */ _(R, { children: [
+          l,
+          /* @__PURE__ */ u(
+            N,
+            {
+              title: r.title,
+              autoplay: o,
+              videoUrl: p,
+              previewImageUrl: m,
+              loading: a,
+              showPreview: c,
+              renderer: d,
+              status: n,
+              onStatusChange: i,
+              onPreviewImageUrlChange: b
+            }
+          )
+        ] }) : /* @__PURE__ */ u(A, {}) })
+      }
+    );
+  }
+);
+P.displayName = "YouTube";
+export {
+  P as YouTube
+};

package/lib/youtube.template.js

@@ -0,0 +1,97 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { SpinnerIcon as r, PlayIcon as l } from "@webstudio-is/icons/svg";
+import { $ as e, css as o } from "@webstudio-is/template";
+const p = {
+  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(
+    e.YouTube,
+    {
+      "ws:label": "YouTube",
+      "ws:style": o`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `,
+      children: [
+        /* @__PURE__ */ t(
+          e.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__ */ 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: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__ */ 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: l })
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  p as meta
+};

package/lib/youtube.ws.js

@@ -0,0 +1,51 @@
+import { Youtube1cIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { div as e } from "@webstudio-is/sdk/normalize.css";
+import { props as n } from "./__generated__/youtube.props.js";
+const i = {
+  div: e
+}, c = {
+  type: "container",
+  icon: o,
+  states: t,
+  presetStyle: i,
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link", "Heading"] }
+  }
+}, a = [
+  "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"
+], d = {
+  props: n,
+  initialProps: a
+};
+export {
+  c as meta,
+  d as propsMeta
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.196.0",
+  "version": "0.198.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -44,14 +44,15 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "@react-aria/utils": "^3.25.3",
-    "colord": "^2.9.3",
-    "micromark": "^4.0.0",
+    "@react-aria/utils": "^3.26.0",
     "await-interaction-response": "^0.0.2",
-    "@webstudio-is/icons": "0.196.0",
-    "@webstudio-is/image": "0.196.0",
-    "@webstudio-is/react-sdk": "0.196.0",
-    "@webstudio-is/sdk": "0.196.0"
+    "colord": "^2.9.3",
+    "micromark": "^4.0.1",
+    "micromark-extension-gfm-table": "^2.1.0",
+    "@webstudio-is/icons": "0.198.0",
+    "@webstudio-is/react-sdk": "0.198.0",
+    "@webstudio-is/sdk": "0.198.0",
+    "@webstudio-is/image": "0.198.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",
@@ -60,13 +61,15 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^2.1.8",
-    "@webstudio-is/tsconfig": "1.0.7",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/template": "0.196.0"
+    "@webstudio-is/sdk-cli": "0.94.0",
+    "@webstudio-is/template": "0.198.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",
-    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.test.{ts,tsx} !./src/*.ws.ts' && prettier --write \"**/*.props.ts\"",
+    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.test.{ts,tsx} !./src/*.ws.ts !./src/*.ws.ts !./src/*.template.tsx' && prettier --write \"**/*.props.ts\"",
+    "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",
     "test": "vitest run",
     "typecheck": "tsc"