@betterstart/cli 0.1.51 → 0.1.52

package/dist/cli.js

@@ -2539,13 +2539,18 @@ ${selectItems}
   return `        <div className="space-y-4">
           <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">
+            <div key={item.id} className="relative rounded-lg border p-4">
+              <button
+                type="button"
+                onClick={() => ${name}FieldArray.remove(index)}
+                className="absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+              >
+                <Trash2 className="h-4 w-4" />
+                <span className="sr-only">Remove</span>
+              </button>
+              <div className="space-y-4 pr-8">
 ${nestedFieldsJSX}
               </div>
-              <Button type="button" variant="ghost" size="sm" onClick={() => ${name}FieldArray.remove(index)}>
-                Remove
-              </Button>
             </div>
           ))}
           <Button
@@ -2575,10 +2580,10 @@ function generateMultiStepForm(schema, cwd, cmsDir, options) {
   const zodFields = buildZodFields(allFields);
   const defaults = buildDefaultValues(allFields);
   const listFields = getListFields(allFields);
-  const hasListFields = listFields.length > 0;
+  const hasListFields2 = listFields.length > 0;
   const { setup: watchSetup } = buildWatchDecls(allFields);
-  const rhfImport = hasListFields ? `import { useFieldArray, useForm } from 'react-hook-form'` : `import { useForm } from 'react-hook-form'`;
-  const fieldArraySetup = hasListFields ? `
+  const rhfImport = hasListFields2 ? `import { useFieldArray, useForm } from 'react-hook-form'` : `import { useForm } from 'react-hook-form'`;
+  const fieldArraySetup = hasListFields2 ? `
 ${buildFieldArrayDecls(listFields)}
 ` : "";
   const stepsConst = buildStepsConstant(steps, schema);
@@ -2661,7 +2666,7 @@ export function ${p7.pascal}Form() {
   return `'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Check, ChevronLeft, ChevronRight } from 'lucide-react'
+import { Check, ChevronLeft, ChevronRight${hasListFields ? ", Trash2" : ""} } from 'lucide-react'
 import { parseAsInteger, parseAsArrayOf, useQueryState } from 'nuqs'
 import { useState } from 'react'
 ${p7.rhfImport}
@@ -2868,14 +2873,14 @@ function generateSingleStepForm(schema, cwd, cmsDir, options) {
   const zodFields = buildZodFields(fields);
   const defaults = buildDefaultValues(fields);
   const listFields = getListFields(fields);
-  const hasListFields = listFields.length > 0;
+  const hasListFields2 = listFields.length > 0;
   const { setup: watchSetup } = buildWatchDecls(fields);
   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'`;
-  const fieldArraySetup = hasListFields ? `
+  const rhfImport = hasListFields2 ? `import { useFieldArray, useForm } from 'react-hook-form'` : `import { useForm } from 'react-hook-form'`;
+  const fieldArraySetup = hasListFields2 ? `
 ${buildFieldArrayDecls(listFields)}
 ` : "";
   const hasRadio = fields.some((f) => f.type === "radio");
@@ -2902,9 +2907,11 @@ export function ${pascal}Form() {
   )
 }
 ` : "";
+  const lucideImport = hasListFields2 ? `
+import { Trash2 } from 'lucide-react'` : "";
   const content = `'use client'
 
-import { zodResolver } from '@hookform/resolvers/zod'
+import { zodResolver } from '@hookform/resolvers/zod'${lucideImport}
 import { useState } from 'react'
 ${rhfImport}
 import { z } from 'zod/v3'${queryClientImport}
@@ -15605,9 +15612,28 @@ var updateComponentCommand = new Command7("update-component").description("Updat
     const all = getAllComponentNames();
     clack2.intro("Available components");
     const uiComponents = getStaticUiComponents();
-    clack2.log.info(`UI components (${uiComponents.length}): ${uiComponents.join(", ")}`);
-    clack2.log.info(`Template components (${Object.keys(TEMPLATE_REGISTRY).length}): ${Object.keys(TEMPLATE_REGISTRY).sort().join(", ")}`);
-    clack2.log.info("Special: tiptap (updates entire tiptap editor)");
+    const templateKeys = Object.keys(TEMPLATE_REGISTRY).sort();
+    console.log();
+    console.log(`  UI Components (${uiComponents.length})`);
+    console.log(`  ${"\u2500".repeat(50)}`);
+    console.log(`  ${"Name".padEnd(28)} ${"Path"}`);
+    console.log(`  ${"\u2500".repeat(50)}`);
+    for (const name of uiComponents) {
+      console.log(`  ${name.padEnd(28)} components/ui/${name}.tsx`);
+    }
+    console.log();
+    console.log(`  Template Components (${templateKeys.length})`);
+    console.log(`  ${"\u2500".repeat(56)}`);
+    console.log(`  ${"Name".padEnd(28)} ${"Path"}`);
+    console.log(`  ${"\u2500".repeat(56)}`);
+    for (const name of templateKeys) {
+      console.log(`  ${name.padEnd(28)} ${TEMPLATE_REGISTRY[name].relPath}`);
+    }
+    console.log();
+    console.log(`  Special`);
+    console.log(`  ${"\u2500".repeat(56)}`);
+    console.log(`  ${"tiptap".padEnd(28)} components/ui/tiptap/ (all files)`);
+    console.log();
     clack2.outro(`${all.length} components available`);
     return;
   }