@betterstart/cli 0.1.43 → 0.1.45

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) => `                    <div className="flex items-center space-x-2">
+          (opt) => `                    <label 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}" />
-                      <Label htmlFor="${name}-${opt.value}">${escapeJsx(opt.label)}</Label>
-                    </div>`
+                      <span>${escapeJsx(opt.label)}</span>
+                    </label>`
         ).join("\n");
         return `        <FormField
           control={form.control}
@@ -2359,7 +2367,7 @@ function generateFieldJSX(field) {
             <FormItem className="space-y-3">
               <FormLabel>${label}${requiredStar}</FormLabel>
               <FormControl>
-                <RadioGroup onValueChange={field.onChange} defaultValue={field.value} className="flex flex-col space-y-1">
+                <RadioGroup onValueChange={field.onChange} defaultValue={field.value} className="flex items-center space-x-2">
 ${radioItems}
                 </RadioGroup>
               </FormControl>${hintJSX}
@@ -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}
@@ -2565,7 +2572,6 @@ ${fieldsJSX}
   const buttonImport = resolveUiImport(cwd, "button");
   const formImport = resolveUiImport(cwd, "form");
   const inputImport = resolveUiImport(cwd, "input");
-  const labelImport = resolveUiImport(cwd, "label");
   const textareaImport = resolveUiImport(cwd, "textarea");
   const selectImport = resolveUiImport(cwd, "select");
   const radioGroupImport = resolveUiImport(cwd, "radio-group");
@@ -2578,7 +2584,6 @@ ${fieldsJSX}
     buttonImport,
     formImport,
     inputImport,
-    labelImport,
     textareaImport,
     selectImport,
     radioGroupImport,
@@ -2629,7 +2634,6 @@ import {
   FormMessage,
 } from '${p7.formImport}'
 import { Input } from '${p7.inputImport}'
-import { Label } from '${p7.labelImport}'
 import { Progress } from '${p7.progressImport}'${p7.hasRadio ? `
 import { RadioGroup, RadioGroupItem } from '${p7.radioGroupImport}'` : ""}
 import { Textarea } from '${p7.textareaImport}'
@@ -2818,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'`;
@@ -2829,7 +2834,6 @@ ${buildFieldArrayDecls(listFields)}
   const buttonImport = resolveUiImport(cwd, "button");
   const formImport = resolveUiImport(cwd, "form");
   const inputImport = resolveUiImport(cwd, "input");
-  const labelImport = resolveUiImport(cwd, "label");
   const textareaImport = resolveUiImport(cwd, "textarea");
   const selectImport = resolveUiImport(cwd, "select");
   const radioGroupImport = resolveUiImport(cwd, "radio-group");
@@ -2850,8 +2854,7 @@ import {
   FormLabel,
   FormMessage,
 } from '${formImport}'
-import { Input } from '${inputImport}'
-import { Label } from '${labelImport}'${hasRadio ? `
+import { Input } from '${inputImport}'${hasRadio ? `
 import { RadioGroup, RadioGroupItem } from '${radioGroupImport}'` : ""}
 import { Textarea } from '${textareaImport}'
 import {