@betterstart/cli 0.1.51 → 0.1.53

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);
@@ -2600,7 +2605,6 @@ ${fieldsJSX}
   const textareaImport = resolveUiImport(cwd, "textarea");
   const selectImport = resolveUiImport(cwd, "select");
   const radioGroupImport = resolveUiImport(cwd, "radio-group");
-  const progressImport = resolveUiImport(cwd, "progress");
   const mediaUploadImport = resolveUiImport(cwd, "media-upload-field");
   const content = buildComponentSource({
     pascal,
@@ -2614,7 +2618,6 @@ ${fieldsJSX}
     textareaImport,
     selectImport,
     radioGroupImport,
-    progressImport,
     mediaUploadImport,
     zodFields,
     defaults,
@@ -2661,8 +2664,8 @@ export function ${p7.pascal}Form() {
   return `'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Check, ChevronLeft, ChevronRight } from 'lucide-react'
-import { parseAsInteger, parseAsArrayOf, useQueryState } from 'nuqs'
+import { ChevronLeft, ChevronRight${hasListFields ? ", Trash2" : ""} } from 'lucide-react'
+import { parseAsInteger, useQueryState } from 'nuqs'
 import { useState } from 'react'
 ${p7.rhfImport}
 import { z } from 'zod/v3'${queryClientImport}
@@ -2679,8 +2682,8 @@ import {
 } from '${p7.formImport}'
 import { Input } from '${p7.inputImport}'${p7.hasFileUpload ? `
 import { MediaUploadField } from '${p7.mediaUploadImport}'` : ""}
-import { Progress } from '${p7.progressImport}'${p7.hasRadio ? `
-import { RadioGroup, RadioGroupItem } from '${p7.radioGroupImport}'` : ""}
+${p7.hasRadio ? `import { RadioGroup, RadioGroupItem } from '${p7.radioGroupImport}'
+` : ""}
 import { Textarea } from '${p7.textareaImport}'
 import {
   Select,
@@ -2700,8 +2703,6 @@ ${p7.stepsConst}
 
 ${formComponentDecl}() {
   const [currentStep, setCurrentStep] = useQueryState('step', parseAsInteger.withDefault(0))
-  const [completedStepsArr, setCompletedStepsArr] = useQueryState('completed', parseAsArrayOf(parseAsInteger).withDefault([]))
-  const completedSteps = new Set(completedStepsArr)
   const [submitted, setSubmitted] = useState(false)
   const [submitting, setSubmitting] = useState(false)
 
@@ -2718,9 +2719,6 @@ ${p7.fieldArraySetup}${p7.watchSetup}
       STEPS[currentStep].fields as (keyof FormValues)[]
     )
     if (isValid) {
-      if (!completedSteps.has(currentStep)) {
-        setCompletedStepsArr([...completedStepsArr, currentStep])
-      }
       setCurrentStep(currentStep + 1)
     }
   }
@@ -2729,12 +2727,6 @@ ${p7.fieldArraySetup}${p7.watchSetup}
     setCurrentStep(currentStep - 1)
   }
 
-  function handleStepClick(index: number) {
-    if (index < currentStep || completedSteps.has(index)) {
-      setCurrentStep(index)
-    }
-  }
-
   async function onSubmit(values: FormValues) {
     setSubmitting(true)
     try {
@@ -2763,48 +2755,6 @@ ${p7.fieldArraySetup}${p7.watchSetup}
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        {/* Mobile step indicator */}
-        <div className="md:hidden space-y-2">
-          <p className="text-sm text-muted-foreground">
-            Step {currentStep + 1} of {STEPS.length} &mdash; {STEPS[currentStep].label}
-          </p>
-          <Progress value={((currentStep + 1) / STEPS.length) * 100} />
-        </div>
-
-        {/* Desktop step indicator */}
-        <nav className="hidden md:flex items-center justify-center" aria-label="Form progress">
-          {STEPS.map((step, index) => (
-            <div key={step.name} className="flex items-center">
-              <button
-                type="button"
-                onClick={() => handleStepClick(index)}
-                disabled={index > currentStep && !completedSteps.has(index)}
-                aria-current={index === currentStep ? 'step' : undefined}
-                className={\`flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium transition-colors \${
-                  completedSteps.has(index)
-                    ? 'bg-primary text-primary-foreground cursor-pointer'
-                    : index === currentStep
-                      ? 'border-2 border-primary text-primary'
-                      : 'border-2 border-muted text-muted-foreground'
-                }\`}
-              >
-                {completedSteps.has(index) ? (
-                  <Check className="h-4 w-4" />
-                ) : (
-                  index + 1
-                )}
-              </button>
-              {index < STEPS.length - 1 && (
-                <div
-                  className={\`h-0.5 w-8 mx-1 \${
-                    completedSteps.has(index) ? 'bg-primary' : 'bg-muted'
-                  }\`}
-                />
-              )}
-            </div>
-          ))}
-        </nav>
-
         {/* Step header */}
         <div>
           <h3 className="text-lg font-semibold">{STEPS[currentStep].label}</h3>
@@ -2868,14 +2818,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 +2852,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 +15557,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;
   }