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

package/lib/vimeo.ws.js

@@ -1,311 +1,23 @@
-import { VimeoIcon as e, SpinnerIcon as t, PlayIcon as p } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { VimeoIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
 import { div as r } from "@webstudio-is/sdk/normalize.css";
-import { props as a } from "./__generated__/vimeo.props.js";
+import { props as i } from "./__generated__/vimeo.props.js";
 const n = {
   div: r
-}, s = {
-  category: "media",
+}, c = {
   type: "container",
-  description: "Add a video to your page that is hosted on Vimeo. Paste a Vimeo URL and configure the video in the Settings tab.",
-  order: 1,
-  icon: e,
-  states: o,
+  icon: o,
+  states: t,
   presetStyle: n,
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
-  },
-  template: [
-    {
-      type: "instance",
-      component: "Vimeo",
-      styles: [
-        {
-          property: "position",
-          value: { type: "keyword", value: "relative" }
-        },
-        {
-          property: "aspectRatio",
-          value: { type: "keyword", value: "640/360" }
-        },
-        {
-          property: "width",
-          value: { type: "unit", value: 100, unit: "%" }
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "VimeoPreviewImage",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "objectFit",
-              value: { type: "keyword", value: "cover" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 100, unit: "%" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 20, unit: "px" }
-            },
-            {
-              property: "objectPosition",
-              value: { type: "keyword", value: "cover" }
-            }
-          ],
-          children: [],
-          props: [
-            {
-              type: "string",
-              name: "alt",
-              value: "Vimeo video preview image"
-            },
-            {
-              type: "string",
-              name: "sizes",
-              value: "100vw"
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoSpinner",
-          label: "Spinner",
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 70, unit: "px" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -35, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -35, unit: "px" }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Spinner SVG",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: t
-                }
-              ],
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "VimeoPlayButton",
-          props: [
-            {
-              type: "string",
-              name: "aria-label",
-              value: "Play button"
-            }
-          ],
-          styles: [
-            {
-              property: "position",
-              value: { type: "keyword", value: "absolute" }
-            },
-            {
-              property: "width",
-              value: { type: "unit", value: 140, unit: "px" }
-            },
-            {
-              property: "height",
-              value: { type: "unit", value: 80, unit: "px" }
-            },
-            {
-              property: "top",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "left",
-              value: { type: "unit", value: 50, unit: "%" }
-            },
-            {
-              property: "marginTop",
-              value: { type: "unit", value: -40, unit: "px" }
-            },
-            {
-              property: "marginLeft",
-              value: { type: "unit", value: -70, unit: "px" }
-            },
-            {
-              property: "display",
-              value: { type: "keyword", value: "flex" }
-            },
-            {
-              property: "alignItems",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "justifyContent",
-              value: { type: "keyword", value: "center" }
-            },
-            {
-              property: "borderTopStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderRightStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderBottomStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderLeftStyle",
-              value: { type: "keyword", value: "none" }
-            },
-            {
-              property: "borderTopLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderTopRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomLeftRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "borderBottomRightRadius",
-              value: { type: "unit", value: 5, unit: "px" }
-            },
-            {
-              property: "cursor",
-              value: { type: "keyword", value: "pointer" }
-            },
-            {
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 18,
-                g: 18,
-                b: 18,
-                alpha: 1
-              }
-            },
-            {
-              property: "color",
-              value: {
-                type: "rgb",
-                r: 255,
-                g: 255,
-                b: 255,
-                alpha: 1
-              }
-            },
-            {
-              state: ":hover",
-              property: "backgroundColor",
-              value: {
-                type: "rgb",
-                r: 0,
-                g: 173,
-                b: 239,
-                alpha: 1
-              }
-            }
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "Box",
-              label: "Play Icon",
-              styles: [
-                {
-                  property: "width",
-                  value: { type: "unit", value: 60, unit: "px" }
-                },
-                {
-                  property: "height",
-                  value: { type: "unit", value: 60, unit: "px" }
-                }
-              ],
-              props: [
-                {
-                  type: "string",
-                  name: "aria-hidden",
-                  value: "true"
-                }
-              ],
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Play SVG",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: p
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}, u = [
+  }
+}, e = [
   "id",
   "className",
   "url",
+  "title",
   "quality",
   "loading",
   "showPreview",
@@ -318,11 +30,11 @@ const n = {
   "showTitle",
   "showControls",
   "controlsColor"
-], d = {
-  props: a,
-  initialProps: u
+], m = {
+  props: i,
+  initialProps: e
 };
 export {
-  s as meta,
-  d as propsMeta
+  c as meta,
+  m as propsMeta
 };

package/lib/webhook-form.template.js

@@ -0,0 +1,49 @@
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { Variable as s, $ as e, expression as o, ActionValue as i, PlaceholderValue as a } from "@webstudio-is/template";
+const n = new s("formState", "initial"), w = {
+  category: "data",
+  order: 1,
+  description: "Collect user data and send it to any webhook.",
+  template: /* @__PURE__ */ r(
+    e.Form,
+    {
+      state: o`${n}`,
+      onStateChange: new i(["state"], o`${n} = state`),
+      children: [
+        /* @__PURE__ */ r(
+          e.Box,
+          {
+            "ws:label": "Form Content",
+            "ws:show": o`${n} === 'initial' || ${n} === 'error'`,
+            children: [
+              /* @__PURE__ */ t(e.Label, { children: new a("Name") }),
+              /* @__PURE__ */ t(e.Input, { name: "name" }),
+              /* @__PURE__ */ t(e.Label, { children: new a("Email") }),
+              /* @__PURE__ */ t(e.Input, { name: "email" }),
+              /* @__PURE__ */ t(e.Button, { children: new a("Submit") })
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.Box,
+          {
+            "ws:label": "Success Message",
+            "ws:show": o`${n} === 'success'`,
+            children: new a("Thank you for getting in touch!")
+          }
+        ),
+        /* @__PURE__ */ t(
+          e.Box,
+          {
+            "ws:label": "Error Message",
+            "ws:show": o`${n} === 'error'`,
+            children: new a("Sorry, something went wrong.")
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  w as meta
+};

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
 };