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

package/lib/html-embed.js

@@ -0,0 +1,112 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as R, useContext as S, useState as b, useSyncExternalStore as x, useRef as f, useMemo as E, useEffect as k } from "react";
+import { mergeRefs as T } from "@react-aria/utils";
+import { ReactSdkContext as g } from "@webstudio-is/react-sdk/runtime";
+import { patchDomEvents as L, executeDomEvents as _ } from "./html-embed-patchers.js";
+const C = {
+  scriptTestIdPrefix: "client-"
+}, w = (e) => new Promise((t, n) => {
+  const r = document.createElement("script"), s = e.hasAttribute("src"), a = e.type === "module";
+  for (const { name: c, value: o } of e.attributes)
+    r.setAttribute(c, o);
+  if (r.dataset.testid !== void 0 && (r.dataset.testid = `${C.scriptTestIdPrefix}${r.dataset.testid}`), s)
+    r.addEventListener("load", () => {
+      t();
+    }), r.addEventListener("error", n);
+  else {
+    if (a) {
+      const c = new Blob([e.innerText], {
+        type: "text/javascript"
+      }), o = URL.createObjectURL(c);
+      import(
+        /* @vite-ignore */
+        o
+      ).then(t).catch(n).finally(() => {
+        URL.revokeObjectURL(o);
+      });
+      return;
+    }
+    r.textContent = e.innerText;
+  }
+  e.replaceWith(r), s === !1 && t();
+}), l = [];
+let d = !1;
+const O = async (e) => {
+  if (l.push(...e), await Promise.resolve(), !d) {
+    for (L(), d = !0; l.length > 0; )
+      await l.shift()();
+    _(), d = !1;
+  }
+}, H = (e) => {
+  const t = e.querySelectorAll("script"), n = [], r = [];
+  t.forEach((s) => {
+    (s.hasAttribute("async") ? r : n).push(() => w(s));
+  });
+  for (const s of r)
+    s();
+  O(n);
+}, I = (e) => {
+  const { code: t, innerRef: n, ...r } = e;
+  return /* @__PURE__ */ i("div", { ref: n, ...r, style: { display: "block", padding: 20 }, children: 'Open the "Settings" panel to insert HTML code.' });
+}, h = () => x(
+  () => () => {
+  },
+  () => !1,
+  () => !0
+), u = (e) => {
+  if (!h())
+    return e.children;
+}, m = (e) => {
+  const { code: t, innerRef: n, ...r } = e, s = f(null), a = f(!0), c = E(
+    () => ({
+      __html: t ?? ""
+    }),
+    [t]
+  );
+  return k(() => {
+    const o = s.current;
+    o && a.current && (a.current = !1, H(o));
+  }, []), /* @__PURE__ */ i(
+    "div",
+    {
+      ...r,
+      ref: T(n, s),
+      dangerouslySetInnerHTML: c
+    }
+  );
+}, p = (e) => {
+  const { code: t, innerRef: n, ...r } = e;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ...r,
+      ref: n,
+      dangerouslySetInnerHTML: { __html: t ?? "" }
+    }
+  );
+}, M = p, P = R(
+  (e, t) => {
+    const { code: n, executeScriptOnCanvas: r, clientOnly: s, children: a, ...c } = e, { renderer: o } = S(g), v = h(), [y] = b(v);
+    return n === void 0 || String(n).trim().length === 0 ? /* @__PURE__ */ i(I, { innerRef: t, ...c }) : y ? s !== !0 ? /* @__PURE__ */ i(p, { innerRef: t, code: n, ...c }) : /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(m, { innerRef: t, code: n, ...c }) }) : o === "canvas" && r !== !0 ? /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(
+      M,
+      {
+        innerRef: t,
+        code: n,
+        ...c
+      }
+    ) }) : /* @__PURE__ */ i(u, { children: /* @__PURE__ */ i(
+      m,
+      {
+        innerRef: t,
+        code: n,
+        ...c
+      },
+      n
+    ) });
+  }
+);
+P.displayName = "HtmlEmbed";
+export {
+  P as HtmlEmbed,
+  C as __testing__
+};

package/lib/html-embed.ws.js

@@ -0,0 +1,46 @@
+import { EmbedIcon as t } from "@webstudio-is/icons/svg";
+import { props as e } from "./__generated__/html-embed.props.js";
+const i = {
+  div: [
+    {
+      property: "display",
+      value: { type: "keyword", value: "contents" }
+    },
+    {
+      property: "whiteSpaceCollapse",
+      value: { type: "keyword", value: "collapse" }
+    }
+  ]
+}, a = {
+  category: "general",
+  type: "embed",
+  label: "HTML Embed",
+  description: "Used to add HTML code to the page, such as an SVG or script.",
+  icon: t,
+  presetStyle: i,
+  order: 8
+}, r = {
+  props: {
+    ...e,
+    clientOnly: {
+      ...e.clientOnly,
+      description: "Activate it for any scripts that can mutate the DOM or introduce interactivity. This only affects the published site."
+    },
+    executeScriptOnCanvas: {
+      ...e.executeScriptOnCanvas,
+      label: "Run scripts on canvas",
+      description: "Dangerously allow script execution on canvas without switching to preview mode. This only affects build mode, but may result in unwanted side effects inside builder!"
+    },
+    code: {
+      required: !0,
+      control: "code",
+      language: "html",
+      type: "string"
+    }
+  },
+  initialProps: ["className", "clientOnly", "executeScriptOnCanvas"]
+};
+export {
+  a as meta,
+  r as propsMeta
+};

package/lib/image.js

@@ -0,0 +1,38 @@
+import { jsx as g } from "react/jsx-runtime";
+import { forwardRef as l, useContext as u } from "react";
+import { Image as v } from "@webstudio-is/image";
+import { ReactSdkContext as x } from "@webstudio-is/react-sdk/runtime";
+const y = l(
+  ({
+    loading: a = "lazy",
+    width: e,
+    height: r,
+    optimize: m = !0,
+    decoding: c,
+    // @todo: it's a hack made for the builder and should't be in the runtime at all.
+    $webstudio$canvasOnly$assetId: d,
+    ...s
+  }, f) => {
+    const o = String(s.src ?? ""), { imageLoader: i, renderer: N } = u(x);
+    let n = c, t = o;
+    return N === "canvas" && (a = "eager", n = "sync", t = d ?? o, e !== void 0 && r !== void 0 && Number.isNaN(e) && Number.isNaN(r) && (m = !1, e = void 0, r = void 0)), /* @__PURE__ */ g(
+      v,
+      {
+        loading: a,
+        decoding: n,
+        optimize: m,
+        width: e,
+        height: r,
+        ...s,
+        loader: i,
+        src: o,
+        ref: f
+      },
+      t
+    );
+  }
+);
+y.displayName = "Image";
+export {
+  y as Image
+};

package/lib/image.ws.js

@@ -0,0 +1,60 @@
+import { ImageIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { img as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/image.props.js";
+const a = {
+  img: [
+    ...o,
+    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
+    {
+      property: "maxWidth",
+      value: { type: "unit", unit: "%", value: 100 }
+    },
+    // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    },
+    // Set image height to "auto" to reduce layout shift, improving compatibility across browsers like Safari.
+    // Unlike "fit-content," "auto" preserves the aspect ratio when the width exceeds max-width. (in Safari)
+    // See https://web.dev/articles/optimize-cls#best_practice_for_setting_image_dimensions
+    {
+      property: "height",
+      value: { type: "keyword", value: "auto" }
+    }
+  ]
+}, l = {
+  category: "media",
+  type: "embed",
+  description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
+  icon: e,
+  states: t,
+  presetStyle: a,
+  order: 0
+}, d = {
+  props: {
+    ...r,
+    // Automatically generated props don't have the right control.
+    src: {
+      type: "string",
+      control: "file",
+      label: "Source",
+      required: !1
+    }
+  },
+  initialProps: [
+    "id",
+    "className",
+    "src",
+    "width",
+    "height",
+    "alt",
+    "loading",
+    "optimize"
+  ]
+};
+export {
+  l as meta,
+  d as propsMeta
+};

package/lib/input.js

@@ -0,0 +1,17 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+const a = n(
+  ({ children: d, type: t = "text", value: r, defaultValue: e, ...o }, p) => /* @__PURE__ */ i(
+    "input",
+    {
+      ...o,
+      defaultValue: r ?? e,
+      type: t,
+      ref: p
+    }
+  )
+);
+a.displayName = "Input";
+export {
+  a as Input
+};

package/lib/input.ws.js

@@ -0,0 +1,54 @@
+import { FormTextFieldIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { input as o } from "@webstudio-is/sdk/normalize.css";
+import { props as l } from "./__generated__/input.props.js";
+const r = {
+  input: [
+    ...o,
+    {
+      property: "display",
+      value: { type: "keyword", value: "block" }
+    }
+  ]
+}, p = {
+  category: "forms",
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  type: "control",
+  label: "Text Input",
+  description: "A single-line text input for collecting string data from your users.",
+  icon: e,
+  presetStyle: r,
+  order: 3,
+  states: [
+    ...t,
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" }
+    // Additional states will go into submenu
+    //{ selector: ":disabled", label: "Disabled" },
+    //{ selector: ":enabled", label: "Enabled" },
+    //{ selector: ":read-only", label: "Read Only" },
+    //{ selector: ":read-write", label: "Read Write" },
+  ]
+}, c = {
+  props: l,
+  initialProps: [
+    "id",
+    "className",
+    "name",
+    "value",
+    "type",
+    "placeholder",
+    "required",
+    "autoFocus"
+  ]
+};
+export {
+  p as meta,
+  c as propsMeta
+};

package/lib/italic.js

@@ -0,0 +1,7 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+const a = t((o, r) => /* @__PURE__ */ i("i", { ...o, ref: r }));
+a.displayName = "Italic";
+export {
+  a as Italic
+};

package/lib/italic.ws.js

@@ -0,0 +1,26 @@
+import { TextItalicIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
+import { i as o } from "@webstudio-is/sdk/normalize.css";
+import { props as i } from "./__generated__/italic.props.js";
+const r = {
+  i: [
+    ...o,
+    {
+      property: "fontStyle",
+      value: { type: "keyword", value: "italic" }
+    }
+  ]
+}, c = {
+  type: "rich-text-child",
+  label: "Italic Text",
+  icon: t,
+  states: e,
+  presetStyle: r
+}, m = {
+  props: i,
+  initialProps: ["id", "className"]
+};
+export {
+  c as meta,
+  m as propsMeta
+};

package/lib/label.js

@@ -0,0 +1,7 @@
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const l = e((o, r) => /* @__PURE__ */ a("label", { ...o, ref: r }));
+l.displayName = "Label";
+export {
+  l as Label
+};

package/lib/label.template.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import { $ as r, PlaceholderValue as o } from "@webstudio-is/template";
+const a = {
+  category: "forms",
+  order: 2,
+  template: /* @__PURE__ */ e(r.Label, { children: new o("Form Label") })
+};
+export {
+  a as meta
+};

package/lib/label.ws.js

@@ -0,0 +1,27 @@
+import { LabelIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { label as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/label.props.js";
+const a = {
+  label: [
+    ...e,
+    { property: "display", value: { type: "keyword", value: "block" } }
+  ]
+}, i = {
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  type: "container",
+  label: "Input Label",
+  icon: t,
+  states: o,
+  presetStyle: a
+}, m = {
+  props: r,
+  initialProps: ["id", "className", "htmlFor"]
+};
+export {
+  i as meta,
+  m as propsMeta
+};

package/lib/link.js

@@ -0,0 +1,15 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+const a = n((e, o) => {
+  const {
+    children: s,
+    // @todo: it's a hack made for Image component for the builder and should't be in the runtime at all.
+    $webstudio$canvasOnly$assetId: i,
+    ...r
+  } = e;
+  return /* @__PURE__ */ t("a", { ...r, href: r.href ?? "#", ref: o, children: s });
+});
+a.displayName = "Link";
+export {
+  a as Link
+};

package/lib/link.template.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { $ as o } from "@webstudio-is/template";
+const n = {
+  category: "general",
+  description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
+  order: 1,
+  template: /* @__PURE__ */ e(o.Link, {})
+};
+export {
+  n as meta
+};

package/lib/link.ws.js

@@ -0,0 +1,47 @@
+import { LinkIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { a as r } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/link.props.js";
+const a = {
+  a: [
+    ...r,
+    {
+      property: "display",
+      value: { type: "keyword", value: "inline-block" }
+    }
+  ]
+}, l = {
+  type: "container",
+  icon: e,
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Button", "Link"] }
+  },
+  presetStyle: a,
+  states: [
+    ...t,
+    {
+      selector: ":visited",
+      label: "Visited"
+    },
+    {
+      category: "component-states",
+      selector: "[aria-current=page]",
+      label: "Current page"
+    }
+  ]
+}, c = {
+  props: {
+    ...o,
+    href: {
+      type: "string",
+      control: "url",
+      required: !1
+    }
+  },
+  initialProps: ["id", "className", "href", "target", "prefetch", "download"]
+};
+export {
+  l as meta,
+  c as propsMeta
+};

package/lib/list-item.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+const i = e(
+  ({ children: r, ...t }, m) => /* @__PURE__ */ o("li", { ...t, ref: m, children: r })
+);
+i.displayName = "ListItem";
+export {
+  i as ListItem
+};

package/lib/list-item.template.js

@@ -0,0 +1,11 @@
+import { jsx as t } from "react/jsx-runtime";
+import { $ as e } from "@webstudio-is/template";
+const i = {
+  category: "typography",
+  description: "Adds a new item to an existing list.",
+  order: 5,
+  template: /* @__PURE__ */ t(e.ListItem, {})
+};
+export {
+  i as meta
+};

package/lib/list-item.ws.js

@@ -0,0 +1,26 @@
+import { ListItemIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { li as e } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/list-item.props.js";
+const s = {
+  li: e
+}, m = {
+  type: "container",
+  constraints: {
+    // cannot use parent relation here
+    // because list item can be put inside of collection or slot
+    // perhaps can be eventually fixed with tag matchers
+    relation: "ancestor",
+    component: { $eq: "List" }
+  },
+  icon: t,
+  states: o,
+  presetStyle: s
+}, c = {
+  props: r,
+  initialProps: ["id", "className"]
+};
+export {
+  m as meta,
+  c as propsMeta
+};

package/lib/list.js

@@ -0,0 +1,6 @@
+import { forwardRef as o, createElement as a } from "react";
+const s = "ul", n = "ol", d = o(({ ordered: e = !1, ...t }, r) => a(e ? n : s, { ...t, ref: r }));
+d.displayName = "List";
+export {
+  d as List
+};

package/lib/list.template.js

@@ -0,0 +1,15 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { $ as e, PlaceholderValue as i } from "@webstudio-is/template";
+const s = {
+  category: "typography",
+  description: "Groups content, like links in a menu or steps in a recipe.",
+  order: 4,
+  template: /* @__PURE__ */ n(e.List, { children: [
+    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") }),
+    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") }),
+    /* @__PURE__ */ t(e.ListItem, { children: new i("List Item text you can edit") })
+  ] })
+};
+export {
+  s as meta
+};

package/lib/list.ws.js

@@ -0,0 +1,48 @@
+import { ListIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as r } from "@webstudio-is/react-sdk";
+import { ol as t, ul as o } from "@webstudio-is/sdk/normalize.css";
+import { props as p } from "./__generated__/list.props.js";
+const a = {
+  ol: [
+    ...t,
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
+    }
+  ],
+  ul: [
+    ...o,
+    {
+      property: "marginTop",
+      value: { type: "keyword", value: "0" }
+    },
+    {
+      property: "marginBottom",
+      value: { type: "keyword", value: "10px" }
+    },
+    {
+      property: "paddingLeft",
+      value: { type: "keyword", value: "40px" }
+    }
+  ]
+}, d = {
+  type: "container",
+  icon: e,
+  states: r,
+  presetStyle: a
+}, s = {
+  props: p,
+  initialProps: ["id", "className", "ordered", "start", "reversed"]
+};
+export {
+  d as meta,
+  s as propsMeta
+};

package/lib/markdown-embed.js

@@ -0,0 +1,19 @@
+import { jsx as n } from "react/jsx-runtime";
+import { micromark as s } from "micromark";
+import { gfmTable as l, gfmTableHtml as i } from "micromark-extension-gfm-table";
+import { forwardRef as a, useMemo as f } from "react";
+const h = /* @__PURE__ */ a((r, e) => {
+  const { code: o, children: c, ...t } = r, m = f(
+    // support data uri protocol in images
+    () => s(o ?? "", {
+      allowDangerousProtocol: !0,
+      extensions: [l()],
+      htmlExtensions: [i()]
+    }),
+    [o]
+  );
+  return /* @__PURE__ */ n("div", { ...t, ref: e, dangerouslySetInnerHTML: { __html: m } });
+});
+export {
+  h as MarkdownEmbed
+};