@webstudio-is/sdk-components-react 0.195.0 → 0.197.0

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 o } from "react/jsx-runtime";
+import { SpinnerIcon as r, PlayIcon as l } from "@webstudio-is/icons/svg";
+import { $ as e, css as t } 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": t`
+        position: relative;
+        aspect-ratio: 640/360;
+        width: 100%;
+      `,
+      children: [
+        /* @__PURE__ */ o(
+          e.VimeoPreviewImage,
+          {
+            "ws:label": "Preview Image",
+            "ws:style": t`
+          position: absolute;
+          object-fit: cover;
+          object-position: cover;
+          width: 100%;
+          height: 100%;
+          border-radius: 20px;
+        `,
+            alt: "Vimeo video preview image",
+            sizes: "100vw",
+            optimize: !0
+          }
+        ),
+        /* @__PURE__ */ o(
+          e.VimeoSpinner,
+          {
+            "ws:label": "Spinner",
+            "ws:style": t`
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          width: 70px;
+          height: 70px;
+          margin-top: -35px;
+          margin-left: -35px;
+        `,
+            children: /* @__PURE__ */ o(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+          }
+        ),
+        /* @__PURE__ */ o(
+          e.VimeoPlayButton,
+          {
+            "ws:label": "Play Button",
+            "ws:style": t`
+          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__ */ o(
+              e.Box,
+              {
+                "ws:label": "Play Icon",
+                "ws:style": t`
+            width: 60px;
+            height: 60px;
+          `,
+                "aria-hidden": !0,
+                children: /* @__PURE__ */ o(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.195.0",
+  "version": "0.197.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -32,6 +32,11 @@
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",
       "import": "./lib/hooks.js"
+    },
+    "./templates": {
+      "webstudio": "./src/templates.ts",
+      "types": "./lib/types/templates.d.ts",
+      "import": "./lib/templates.js"
     }
   },
   "peerDependencies": {
@@ -39,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/image": "0.195.0",
-    "@webstudio-is/icons": "0.195.0",
-    "@webstudio-is/sdk": "0.195.0",
-    "@webstudio-is/react-sdk": "0.195.0"
+    "colord": "^2.9.3",
+    "micromark": "^4.0.1",
+    "micromark-extension-gfm-table": "^2.1.0",
+    "@webstudio-is/icons": "0.197.0",
+    "@webstudio-is/react-sdk": "0.197.0",
+    "@webstudio-is/image": "0.197.0",
+    "@webstudio-is/sdk": "0.197.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",
@@ -56,11 +62,12 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^2.1.8",
     "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/template": "0.197.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\"",
     "dts": "tsc --project tsconfig.dts.json",
     "test": "vitest run",
     "typecheck": "tsc"

package/lib/content-embed.ws.js

@@ -1,77 +0,0 @@
-import { ContentEmbedIcon as n } from "@webstudio-is/icons/svg";
-import { imagePlaceholderDataUrl as l } from "@webstudio-is/image";
-import { descendantComponent as a } from "@webstudio-is/react-sdk";
-const i = `
-<h1>Styling HTML with Content Embed</h1>
-<p>Content Embed allows styling of HTML, which primarily comes from external data.</p>
-<h2>How to Use Content Embed</h2>
-<ul>
-  <li>Every element is shown in the Navigator.</li>
-  <li>Apply styles and Tokens to each element.</li>
-  <li>Adjustments to elements apply universally within this embed, ensuring consistency across your content.</li>
-</ul>
-<hr>
-<h2>This sample text contains all the elements that can be styled.</h2>
-<p>Any elements that were not used above are used below.</p>
-<h3>Heading 3</h3>
-<h4>Heading 4</h4>
-<h5>Heading 5</h5>
-<h6>Heading 6</h6>
-<p><a href="#">Links</a> connect your content to relevant resources.</p>
-<p><strong>Bold text</strong> makes your important points stand out.</p>
-<p><em>Italic text</em> is great for emphasizing terms.</p>
-<ol>
-  <li>First Step</li>
-  <li>Second Step</li>
-</ol>
-<img src="${l}">
-<blockquote>Capture attention with a powerful quote.</blockquote>
-<p>Using <code>console.log("Hello World");</code> will log to the console.</p>
-`.trim(), e = (t, o) => ({
-  type: "instance",
-  component: a,
-  label: t,
-  props: [{ type: "string", name: "selector", value: ` ${o}` }],
-  children: []
-}), p = {
-  category: "data",
-  type: "control",
-  description: "Content Embed allows styling of HTML, which can be provided via the Code property statically or loaded dynamically from any Resource, for example, from a CMS.",
-  icon: n,
-  order: 3,
-  template: [
-    {
-      type: "instance",
-      component: "HtmlEmbed",
-      label: "Content Embed",
-      props: [
-        {
-          name: "code",
-          type: "string",
-          value: i
-        }
-      ],
-      children: [
-        e("Paragraph", "p"),
-        e("Heading 1", "h1"),
-        e("Heading 2", "h2"),
-        e("Heading 3", "h3"),
-        e("Heading 4", "h4"),
-        e("Heading 5", "h5"),
-        e("Heading 6", "h6"),
-        e("Bold", ":where(strong, b)"),
-        e("Italic", ":where(em, i)"),
-        e("Link", "a"),
-        e("Image", "img"),
-        e("Blockquote", "blockquote"),
-        e("Code Text", "code"),
-        e("List", ":where(ul, ol)"),
-        e("List Item", "li"),
-        e("Separator", "hr")
-      ]
-    }
-  ]
-};
-export {
-  p as meta
-};

package/lib/types/__generated__/local-date.props.d.ts

@@ -1,2 +0,0 @@
-import type { PropMeta } from "@webstudio-is/react-sdk";
-export declare const props: Record<string, PropMeta>;

package/lib/types/content-embed.ws.d.ts

@@ -1,2 +0,0 @@
-import { type WsComponentMeta } from "@webstudio-is/react-sdk";
-export declare const meta: WsComponentMeta;