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

package/lib/vimeo.template.js

@@ -1,5 +1,5 @@
 import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { SpinnerIcon as r, PlayIcon as a } from "@webstudio-is/icons/svg";
+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",
@@ -20,7 +20,7 @@ const p = {
             "ws:style": o`
           position: absolute;
           object-fit: cover;
-          object-position: cover;
+          object-position: center;
           width: 100%;
           height: 100%;
           border-radius: 20px;
@@ -79,7 +79,7 @@ const p = {
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: a })
+                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: n })
               }
             )
           }

package/lib/xml-node.js

@@ -1,48 +1,60 @@
-import { jsxs as n, jsx as p } from "react/jsx-runtime";
-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"), r = a.replace(/^[^\p{L}_]+/u, "").replaceAll(/[^\p{L}\p{N}\-._:]+/gu, "").trim();
-    if (f === void 0) {
-      const t = Object.fromEntries(s);
-      return b(
-        `${r}${g}`,
-        t,
-        e
+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 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: [
-        "<",
-        [r, ...m].join(" "),
-        ">"
+    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: ">" })
       ] }),
-      i.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: [
-        "</",
-        r,
-        ">"
+      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,
+          ">"
+        ] })
       ] })
     ] });
   }
 );
-N.displayName = "XmlNode";
+j.displayName = "XmlNode";
 export {
-  N as XmlNode
+  j as XmlNode
 };

package/lib/youtube.template.js

@@ -1,6 +1,6 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+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 t } from "@webstudio-is/template";
+import { $ as e, css as o } from "@webstudio-is/template";
 const p = {
   label: "YouTube",
   category: "media",
@@ -10,34 +10,34 @@ const p = {
     e.YouTube,
     {
       "ws:label": "YouTube",
-      "ws:style": t`
+      "ws:style": o`
         position: relative;
         aspect-ratio: 640/360;
         width: 100%;
       `,
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           e.VimeoPreviewImage,
           {
             "ws:label": "Preview Image",
-            "ws:style": t`
+            "ws:style": o`
           position: absolute;
           object-fit: cover;
-          object-position: cover;
+          object-position: center;
           width: 100%;
           height: 100%;
           border-radius: 20px;
         `,
-            alt: "Vimeo video preview image",
+            alt: "YouTube video preview image",
             sizes: "100vw",
             optimize: !0
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           e.VimeoSpinner,
           {
             "ws:label": "Spinner",
-            "ws:style": t`
+            "ws:style": o`
           position: absolute;
           top: 50%;
           left: 50%;
@@ -46,14 +46,14 @@ const p = {
           margin-top: -35px;
           margin-left: -35px;
         `,
-            children: /* @__PURE__ */ o(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
+            children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Spinner SVG", code: r })
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           e.VimeoPlayButton,
           {
             "ws:label": "Play Button",
-            "ws:style": t`
+            "ws:style": o`
           position: absolute;
           width: 140px;
           height: 80px;
@@ -74,16 +74,16 @@ const p = {
           }
         `,
             "aria-label": "Play button",
-            children: /* @__PURE__ */ o(
+            children: /* @__PURE__ */ t(
               e.Box,
               {
                 "ws:label": "Play Icon",
-                "ws:style": t`
+                "ws:style": o`
             width: 60px;
             height: 60px;
           `,
                 "aria-hidden": !0,
-                children: /* @__PURE__ */ o(e.HtmlEmbed, { "ws:label": "Play SVG", code: l })
+                children: /* @__PURE__ */ t(e.HtmlEmbed, { "ws:label": "Play SVG", code: l })
               }
             )
           }

package/lib/youtube.ws.js

@@ -1,4 +1,4 @@
-import { Youtube1cIcon as o } from "@webstudio-is/icons/svg";
+import { YoutubeIcon 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.197.0",
+  "version": "0.199.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -49,10 +49,10 @@
     "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"
+    "@webstudio-is/icons": "0.199.0",
+    "@webstudio-is/react-sdk": "0.199.0",
+    "@webstudio-is/image": "0.199.0",
+    "@webstudio-is/sdk": "0.199.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",
@@ -60,14 +60,16 @@
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "vitest": "^2.1.8",
+    "vitest": "^3.0.2",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/template": "0.197.0",
+    "@webstudio-is/sdk-cli": "0.94.0",
+    "@webstudio-is/template": "0.199.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 !./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"