@webstudio-is/sdk-components-react 0.194.0 → 0.196.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.194.0",
+  "version": "0.196.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": {
@@ -43,10 +48,10 @@
     "colord": "^2.9.3",
     "micromark": "^4.0.0",
     "await-interaction-response": "^0.0.2",
-    "@webstudio-is/icons": "0.194.0",
-    "@webstudio-is/image": "0.194.0",
-    "@webstudio-is/sdk": "0.194.0",
-    "@webstudio-is/react-sdk": "0.194.0"
+    "@webstudio-is/icons": "0.196.0",
+    "@webstudio-is/image": "0.196.0",
+    "@webstudio-is/react-sdk": "0.196.0",
+    "@webstudio-is/sdk": "0.196.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",
@@ -55,8 +60,9 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^2.1.8",
+    "@webstudio-is/tsconfig": "1.0.7",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/template": "0.196.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",

package/lib/rich-text-link.js

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