Forms fixes (#1610)

Closes #84 

## Description

1. Fixed a bug in form template (`email=email` instead of `name=email`)
2. Changed labels of components
3. Moved Button back to Forms category

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
- [ ] hi @istarkov, I need you to do
  - conceptual review (architecture, feature-correctness)
  
## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

packages/react-sdk/src/app/custom-components/form.ws.tsx

@@ -45,7 +45,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: [],
     },
     {

packages/react-sdk/src/components/button.ws.tsx

@@ -14,7 +14,7 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "general",
+  category: "forms",
   type: "container",
   label: "Button",
   Icon: ButtonElementIcon,

packages/react-sdk/src/components/checkbox-field.ws.tsx

@@ -19,7 +19,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
-  label: "Checkbox Field",
+  label: "Checkbox",
   Icon: CheckboxCheckedIcon,
   states: defaultStates,
   presetStyle,
@@ -28,6 +28,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Checkbox Label",
       props: [],
       children: [{ type: "text", value: "Checkbox" }],
     },

packages/react-sdk/src/components/checkbox.ws.tsx

@@ -21,7 +21,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   type: "control",
-  label: "Checkbox",
+  label: "Checkbox Input",
   Icon: CheckboxCheckedIcon,
   presetStyle,
   states: [

packages/react-sdk/src/components/form.ws.tsx

@@ -43,7 +43,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: [],
     },
     {

packages/react-sdk/src/components/input.ws.tsx

@@ -16,7 +16,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "control",
-  label: "Text Field",
+  label: "Text Input",
   Icon: FormTextFieldIcon,
   presetStyle,
   states: [

packages/react-sdk/src/components/radio-button-field.ws.tsx

@@ -19,7 +19,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
-  label: "Radio Button Field",
+  label: "Radio",
   Icon: RadioCheckedIcon,
   states: defaultStates,
   presetStyle,
@@ -28,6 +28,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Radio Label",
       props: [],
       children: [{ type: "text", value: "Radio" }],
     },

packages/react-sdk/src/components/radio-button.ws.tsx

@@ -21,7 +21,7 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   type: "control",
-  label: "Radio Button",
+  label: "Radio Input",
   Icon: RadioCheckedIcon,
   presetStyle,
   states: [

packages/react-sdk/src/embed-template.ts

@@ -54,6 +54,7 @@ export type EmbedTemplateStyleDecl = z.infer<typeof EmbedTemplateStyleDecl>;
 export type EmbedTemplateInstance = {
   type: "instance";
   component: string;
+  label?: string;
   props?: EmbedTemplateProp[];
   styles?: EmbedTemplateStyleDecl[];
   children: Array<EmbedTemplateInstance | EmbedTemplateText>;
@@ -64,6 +65,7 @@ export const EmbedTemplateInstance: z.ZodType<EmbedTemplateInstance> = z.lazy(
     z.object({
       type: z.literal("instance"),
       component: z.string(),
+      label: z.optional(z.string()),
       props: z.optional(z.array(EmbedTemplateProp)),
       styles: z.optional(z.array(EmbedTemplateStyleDecl)),
       children: WsEmbedTemplate,
@@ -127,6 +129,7 @@ const createInstancesFromTemplate = (
       const instance: Instance = {
         type: "instance",
         id: instanceId,
+        label: item.label,
         component: item.component,
         children: [],
       };