@webstudio-is/sdk-components-react 0.0.1-c87cdba.0

package/lib/vimeo-spinner.ws.js

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

package/lib/vimeo.js

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

package/lib/vimeo.template.js

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

package/lib/vimeo.ws.js

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

@@ -0,0 +1,127 @@
+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",
+  label: "Webhook Form",
+  description: "Collect user data and send it to any webhook.",
+  order: 1,
+  icon: a,
+  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,
+  initialProps: ["id", "className", "state", "action"]
+};
+export {
+  c as meta,
+  i as propsMeta
+};

package/lib/xml-node.js

@@ -0,0 +1,44 @@
+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(
+      ([t]) => t.startsWith("data-") === !1 && t.startsWith("aria-") === !1
+    ).filter(([t]) => t !== "tabIndex").filter(([, t]) => typeof t != "function");
+    if (f === void 0) {
+      const t = Object.fromEntries(s);
+      return u(i, 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)}`
+    );
+    return /* @__PURE__ */ n("div", { ...o, children: [
+      /* @__PURE__ */ n("span", { style: { color: "rgb(16, 23, 233)" }, children: [
+        "<",
+        [a, ...d].join(" "),
+        ">"
+      ] }),
+      r.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: [
+        "</",
+        a,
+        ">"
+      ] })
+    ] });
+  }
+);
+x.displayName = "XmlNode";
+export {
+  x as XmlNode
+};

package/lib/xml-node.ws.js

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

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@webstudio-is/sdk-components-react",
+  "version": "0.0.1-c87cdba.0",
+  "description": "Webstudio default library for react",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "license": "AGPL-3.0-or-later",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "lib/*",
+    "!*.{test,stories}.*"
+  ],
+  "exports": {
+    ".": {
+      "webstudio": "./src/components.ts",
+      "types": "./lib/types/components.d.ts",
+      "import": "./lib/components.js"
+    },
+    "./metas": {
+      "webstudio": "./src/metas.ts",
+      "types": "./lib/types/metas.d.ts",
+      "import": "./lib/metas.js"
+    },
+    "./props": {
+      "webstudio": "./src/props.ts",
+      "types": "./lib/types/props.d.ts",
+      "import": "./lib/props.js"
+    },
+    "./hooks": {
+      "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": {
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318"
+  },
+  "dependencies": {
+    "@react-aria/utils": "^3.26.0",
+    "await-interaction-response": "^0.0.2",
+    "colord": "^2.9.3",
+    "micromark": "^4.0.1",
+    "micromark-extension-gfm-table": "^2.1.0",
+    "@webstudio-is/icons": "0.0.1-c87cdba.0",
+    "@webstudio-is/sdk": "0.0.1-c87cdba.0",
+    "@webstudio-is/image": "0.0.1-c87cdba.0",
+    "@webstudio-is/react-sdk": "0.0.1-c87cdba.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.2.2",
+    "@types/react": "^18.2.70",
+    "@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",
+    "@webstudio-is/template": "0.0.1-c87cdba.0",
+    "@webstudio-is/tsconfig": "1.0.8-c87cdba.0",
+    "@webstudio-is/generate-arg-types": "0.0.1-c87cdba.0"
+  },
+  "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\"",
+    "dts": "tsc --project tsconfig.dts.json",
+    "test": "vitest run",
+    "typecheck": "tsc"
+  }
+}