refactor: rewrite webhook form template with jsx

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -131,17 +131,21 @@ const $componentOptions = computed(
       });
     }
     for (const [name, meta] of templates) {
-      const label = getInstanceLabel({ component: name }, meta);
       if (meta.category === "hidden" || meta.category === "internal") {
         continue;
       }
+      const componentMeta = metas.get(name);
+      const label =
+        meta.label ??
+        componentMeta?.label ??
+        getInstanceLabel({ component: name }, meta);
       componentOptions.push({
         tokens: ["components", label, meta.category],
         type: "component",
         component: name,
         label,
         category: meta.category,
-        icon: meta.icon ?? metas.get(name)?.icon ?? "",
+        icon: meta.icon ?? componentMeta?.icon ?? "",
         order: meta.order,
       });
     }

apps/builder/app/builder/features/components/components.tsx

@@ -68,13 +68,17 @@ const $metas = computed(
       });
     }
     for (const [name, templateMeta] of templates) {
+      const componentMeta = componentMetas.get(name);
       metas.push({
         name,
         category: templateMeta.category ?? "hidden",
         order: templateMeta.order,
-        label: getInstanceLabel({ component: name }, templateMeta),
+        label:
+          templateMeta.label ??
+          componentMeta?.label ??
+          getInstanceLabel({ component: name }, templateMeta),
         description: templateMeta.description,
-        icon: templateMeta.icon ?? componentMetas.get(name)?.icon ?? "",
+        icon: templateMeta.icon ?? componentMeta?.icon ?? "",
       });
     }
     const metasByCategory = mapGroupBy(metas, (meta) => meta.category);

packages/sdk-components-react/src/templates.ts

@@ -5,6 +5,7 @@ export { meta as Heading } from "./heading.template";
 export { meta as Paragraph } from "./paragraph.template";
 export { meta as Link } from "./link.template";
 export { meta as Button } from "./button.template";
+export { meta as Form } from "./webhook-form.template";
 export { meta as Blockquote } from "./blockquote.template";
 export { meta as List } from "./list.template";
 export { meta as ListItem } from "./list-item.template";

packages/sdk-components-react/src/webhook-form.template.tsx

@@ -0,0 +1,47 @@
+import {
+  $,
+  ActionValue,
+  expression,
+  PlaceholderValue,
+  Variable,
+  type TemplateMeta,
+} from "@webstudio-is/template";
+
+const formState = new Variable("formState", "initial");
+
+export const meta: TemplateMeta = {
+  category: "data",
+  order: 1,
+  description: "Collect user data and send it to any webhook.",
+  template: (
+    <$.Form
+      state={expression`${formState}`}
+      onStateChange={
+        new ActionValue(["state"], expression`${formState} = state`)
+      }
+    >
+      <$.Box
+        ws:label="Form Content"
+        ws:show={expression`${formState} === 'initial' || ${formState} === 'error'`}
+      >
+        <$.Label>{new PlaceholderValue("Name")}</$.Label>
+        <$.Input name="name" />
+        <$.Label>{new PlaceholderValue("Email")}</$.Label>
+        <$.Input name="email" />
+        <$.Button>{new PlaceholderValue("Submit")}</$.Button>
+      </$.Box>
+      <$.Box
+        ws:label="Success Message"
+        ws:show={expression`${formState} === 'success'`}
+      >
+        {new PlaceholderValue("Thank you for getting in touch!")}
+      </$.Box>
+      <$.Box
+        ws:label="Error Message"
+        ws:show={expression`${formState} === 'error'`}
+      >
+        {new PlaceholderValue("Sorry, something went wrong.")}
+      </$.Box>
+    </$.Form>
+  ),
+};

packages/sdk-components-react/src/webhook-form.ws.ts

@@ -1,126 +1,23 @@
 import { WebhookFormIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
-import { showAttribute } from "@webstudio-is/react-sdk";
+import { form } from "@webstudio-is/sdk/normalize.css";
 import { props } from "./__generated__/webhook-form.props";
-import { meta as baseMeta } from "./form.ws";
 
 export const meta: WsComponentMeta = {
-  ...baseMeta,
-  category: "data",
   label: "Webhook Form",
-  description: "Collect user data and send it to any webhook.",
-  order: 1,
   icon: WebhookFormIcon,
+  type: "container",
+  constraints: {
+    relation: "ancestor",
+    component: { $nin: ["Form", "Button", "Link"] },
+  },
+  presetStyle: {
+    form,
+  },
   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: showAttribute,
-              code: "formState === 'initial' || formState === 'error'",
-            },
-          ],
-          children: [
-            {
-              type: "instance",
-              component: "Label",
-              children: [{ type: "text", value: "Name", placeholder: true }],
-            },
-            {
-              type: "instance",
-              component: "Input",
-              props: [{ type: "string", name: "name", value: "name" }],
-              children: [],
-            },
-            {
-              type: "instance",
-              component: "Label",
-              children: [{ type: "text", value: "Email", placeholder: true }],
-            },
-            {
-              type: "instance",
-              component: "Input",
-              props: [{ type: "string", name: "name", value: "email" }],
-              children: [],
-            },
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Submit", placeholder: true }],
-            },
-          ],
-        },
-
-        {
-          type: "instance",
-          label: "Success Message",
-          component: "Box",
-          props: [
-            {
-              type: "expression",
-              name: showAttribute,
-              code: "formState === 'success'",
-            },
-          ],
-          children: [
-            {
-              type: "text",
-              value: "Thank you for getting in touch!",
-              placeholder: true,
-            },
-          ],
-        },
-
-        {
-          type: "instance",
-          label: "Error Message",
-          component: "Box",
-          props: [
-            {
-              type: "expression",
-              name: showAttribute,
-              code: "formState === 'error'",
-            },
-          ],
-          children: [
-            {
-              type: "text",
-              value: "Sorry, something went wrong.",
-              placeholder: true,
-            },
-          ],
-        },
-      ],
-    },
-  ],
 };
 
 export const propsMeta: WsComponentPropsMeta = {

packages/template/package.json

@@ -19,6 +19,7 @@
     "@webstudio-is/css-data": "workspace:*",
     "@webstudio-is/css-engine": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",
+    "@webstudio-is/react-sdk": "workspace:*",
     "react": "18.3.0-canary-14898b6a9-20240318"
   },
   "devDependencies": {