fix: Issue with empty validations

Author: iduspara

src/components/form-builder/dialogs/generate-code-dialog.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Pre } from "@/components/ui/pre";
-import { Download, Copy, Check } from "lucide-react";
+import { Copy, Check } from "lucide-react";
 import { useEffect, useState } from "react";
 import * as prettier from "prettier/standalone";
 import * as parserTypescript from "prettier/parser-typescript";

src/components/form-builder/form-components/form-checkbox.tsx

@@ -42,7 +42,7 @@ export function getReactCode(component: FormComponentModel): ReactCode {
       key="${component.id}"
       className="${escapeHtml(cn(asCardClasses, "flex items-start space-x-2"))}"
     >
-      <Checkbox id="${escapeHtml(component.getField("attributes.id"))}" />
+      <Checkbox id="${escapeHtml(component.getField("attributes.id"))}" {...field} />
       <div className="grid gap-1.5 leading-none">
         <Label htmlFor="${escapeHtml(component.getField("attributes.id"))}">
           ${escapeHtml(component.getField("label"))}

src/components/form-builder/form-components/form-radio.tsx

@@ -44,9 +44,8 @@ export function getReactCode(component: FormComponentModel): ReactCode {
     <RadioGroup
       key="${component.id}"
       id="${escapeHtml(component.getField("attributes.id"))}"
-      name="${escapeHtml(component.getField("attributes.name"))}"
       className="${escapeHtml(component.getField("attributes.class"))}"
-      value="${escapeHtml(String(component.value))}"
+      {...field}
     > 
       ${component.options?.map((option) => `
         <div key="${escapeHtml(option.value)}" className="flex items-center space-x-2">

src/components/form-builder/form-components/form-select.tsx

@@ -47,10 +47,9 @@ export function getReactCode(component: FormComponentModel): ReactCode {
     <Select
       key="${component.id}"
       id="${escapeHtml(component.getField("attributes.id"))}"
-      name="${escapeHtml(component.getField("attributes.name"))}"
       className="${escapeHtml(component.getField("attributes.class"))}"
-      value="${escapeHtml(component.value as string)}"
-    >
+      {...field}
+      >
       <SelectTrigger>
         <SelectValue placeholder="${escapeHtml(component.getField("attributes.placeholder"))}" />
       </SelectTrigger>

src/components/form-builder/form-components/form-switch.tsx

@@ -50,7 +50,7 @@ export function getReactCode(component: FormComponentModel): ReactCode {
           ${escapeHtml(component.getField("label_description"))}
         </p>
       </div>
-      <Switch id="${escapeHtml(component.getField("attributes.id"))}" />
+      <Switch id="${escapeHtml(component.getField("attributes.id"))}" {...field} />
     </div>
     `,
     dependencies: {

src/components/form-builder/form-components/form-textarea.tsx

@@ -34,10 +34,9 @@ export function getReactCode(component: FormComponentModel): ReactCode {
     <Textarea
       key="${component.id}"
       id="${escapeHtml(component.getField("attributes.id"))}"
-      name="${escapeHtml(component.getField("attributes.name"))}"
       placeholder="${escapeHtml(component.getField("attributes.placeholder"))}"
       className="${escapeHtml(component.getField("attributes.class"))}"
-      defaultValue="${escapeHtml(String(component.value))}"
+      {...field}
     />
     `,
     dependencies: {

src/components/form-builder/helpers/generate-react-code.tsx

@@ -74,7 +74,13 @@ const generateZodSchemaForComponent = (
   const validations = component.getField("validations");
   const isRequired = shouldForceRequired(validations);
 
-  if (!validations) return "";
+  if (!validations) {
+    if (component.type === "number") {
+      return `z.coerce.number()`;
+    }
+
+    return `z.string()`;
+  };
 
   if (component.type === "number") {
     return `z.coerce.number()${isRequired ? '.min(1, { message: "This field is required" })' : ""}${validations.min ? `.min(${validations.min}, { message: "Must be at least ${validations.min}" })` : ""}${validations.max ? `.max(${validations.max}, { message: "Must be at most ${validations.max}" })` : ""}`;