@betterstart/cli 0.1.44 → 0.1.46

package/dist/cli.js

@@ -2261,13 +2261,6 @@ function resolveUiImport(cwd, componentName) {
 function escapeJsx(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-function flattenFormFields(fields) {
-  return fields.flatMap((field) => {
-    if (field.type === "dynamicFields") return [];
-    if (field.type === "group" && field.fields) return flattenFormFields(field.fields);
-    return field.type === "group" ? [] : [field];
-  });
-}
 function buildZodFields(fields) {
   return fields.filter((f) => f.name).map((f) => `  ${f.name}: ${formFieldToZodType(f)}`).join(",\n");
 }
@@ -2305,6 +2298,21 @@ function getListFields(fields) {
     (f) => f.name && f.type === "list" && f.fields && f.fields.length > 0
   );
 }
+function renderFieldsJSX(fields) {
+  return fields.filter((f) => !f.hidden).map((f) => {
+    if (f.type === "dynamicFields") return "";
+    if (f.type === "group" && f.fields) {
+      const cols = f.columns || 2;
+      const innerJSX = renderFieldsJSX(f.fields);
+      const groupJSX = `        <div className="grid grid-cols-1 md:grid-cols-${cols} gap-4">
+${innerJSX}
+        </div>`;
+      return f.showWhen ? wrapShowWhen(f, groupJSX) : groupJSX;
+    }
+    if (!f.name) return "";
+    return wrapShowWhen(f, generateFieldJSX(f));
+  }).filter(Boolean).join("\n\n");
+}
 function wrapShowWhen(field, jsx) {
   if (!field.showWhen) return jsx;
   const watchVar = `${field.showWhen.field}Value`;
@@ -2347,10 +2355,10 @@ function generateFieldJSX(field) {
     case "radio":
       if (field.options && field.options.length > 0) {
         const radioItems = field.options.map(
-          (opt) => `                    <label htmlFor="${name}-${opt.value}" className="flex items-center space-x-2 text-sm font-medium leading-none">
+          (opt) => `                    <FormLabel htmlFor="${name}-${opt.value}" className="flex items-center space-x-2 text-sm font-medium leading-none">
                       <RadioGroupItem value="${opt.value}" id="${name}-${opt.value}" />
                       <span>${escapeJsx(opt.label)}</span>
-                    </label>`
+                    </FormLabel>`
         ).join("\n");
         return `        <FormField
           control={form.control}
@@ -2505,7 +2513,7 @@ ${selectItems}
     return `${nf.name}: ''`;
   }).join(", ");
   return `        <div className="space-y-4">
-          <label className="text-sm font-medium leading-none">${label}${requiredStar}</label>${hintJSX}
+          <FormLabel className="text-sm font-medium leading-none">${label}${requiredStar}</FormLabel>${hintJSX}
           {${name}FieldArray.fields.map((item, index) => (
             <div key={item.id} className="flex items-end gap-2 rounded-lg border p-4">
               <div className="flex-1 space-y-4">
@@ -2551,8 +2559,7 @@ ${buildFieldArrayDecls(listFields)}
 ` : "";
   const stepsConst = buildStepsConstant(steps, schema);
   const stepContentBlocks = steps.map((step, index) => {
-    const stepFields = flattenFormFields(step.fields);
-    const fieldsJSX = stepFields.filter((f) => f.name && !f.hidden).map((f) => wrapShowWhen(f, generateFieldJSX(f))).join("\n\n");
+    const fieldsJSX = renderFieldsJSX(step.fields);
     return `          {currentStep === ${index} && (
             <>
 ${fieldsJSX}
@@ -2815,7 +2822,8 @@ function generateSingleStepForm(schema, cwd, cmsDir, options) {
   const listFields = getListFields(fields);
   const hasListFields = listFields.length > 0;
   const { setup: watchSetup } = buildWatchDecls(fields);
-  const fieldJSX = fields.filter((f) => f.name && !f.hidden).map((f) => wrapShowWhen(f, generateFieldJSX(f))).join("\n\n");
+  const rawFields = schema.fields || [];
+  const fieldJSX = renderFieldsJSX(rawFields);
   const submitText = schema.submitButtonText || "Submit";
   const successMessage = escapeJsx(schema.successMessage || "Form submitted successfully!");
   const rhfImport = hasListFields ? `import { useFieldArray, useForm } from 'react-hook-form'` : `import { useForm } from 'react-hook-form'`;