@betterstart/cli 0.1.35 → 0.1.37

package/dist/cli.js

@@ -353,7 +353,7 @@ import path3 from "path";
 
 // src/utils/string.ts
 function toPascalCase(str) {
-  return str.split(/[-_\s]+/).map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join("");
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").split(/[-_\s]+/).map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join("");
 }
 function toCamelCase(str) {
   const p7 = toPascalCase(str);
@@ -448,7 +448,8 @@ function generateEmailTemplate(schema, cwd, cmsDir, options = {}) {
   const pascal = toPascalCase(formName);
   const fields = getAllFormSchemaFields(schema).filter((f) => f.name);
   const includeDynamic = hasDynamicFields(schema);
-  const filePath = path3.join(cwd, cmsDir, "lib", "emails", `${formName}-submission.tsx`);
+  const kebab = toKebabCase(formName);
+  const filePath = path3.join(cwd, cmsDir, "lib", "emails", `${kebab}-submission.tsx`);
   const dir = path3.dirname(filePath);
   if (!fs3.existsSync(dir)) fs3.mkdirSync(dir, { recursive: true });
   if (fs3.existsSync(filePath) && !options.force) {
@@ -815,7 +816,7 @@ function DeleteAction({ id }: { id: number }) {
         <AlertDialogFooter>
           <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
           <AlertDialogAction
-            onClick={(e) => { e.preventDefault(); handleDelete() }}
+            onClick={(e: React.MouseEvent) => { e.preventDefault(); handleDelete() }}
             disabled={isPending}
             className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
           >
@@ -833,14 +834,14 @@ export const columns: ColumnDef<${pascal}SubmissionData>[] = [
     header: ({ table }) => (
       <Checkbox
         checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        onCheckedChange={(value: boolean) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
       />
     ),
     cell: ({ row }) => (
       <Checkbox
         checked={row.getIsSelected()}
-        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        onCheckedChange={(value: boolean) => row.toggleSelected(!!value)}
         aria-label="Select row"
       />
     ),
@@ -989,7 +990,7 @@ export function ${pascal}SubmissionsPageContent<TValue>({
                 <AlertDialogFooter>
                   <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
                   <AlertDialogAction
-                    onClick={(e) => { e.preventDefault(); handleBulkDelete() }}
+                    onClick={(e: React.MouseEvent) => { e.preventDefault(); handleBulkDelete() }}
                     disabled={isPending}
                     className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                   >
@@ -1424,6 +1425,20 @@ function generateViewPage(pascal, kebab, fields, label, includeDynamic) {
             </p>
           </div>`;
     }
+    if (f.type === "list" || f.type === "multiselect") {
+      return `          <div className="space-y-1">
+            <p className="text-sm font-medium text-muted-foreground">${lbl}</p>
+            <div className="text-sm">
+              {Array.isArray(submission.${name}) && submission.${name}.length > 0 ? (
+                <ul className="list-disc list-inside space-y-1">
+                  {submission.${name}.map((item: Record<string, unknown>, idx: number) => (
+                    <li key={idx}>{typeof item === 'string' ? item : Object.entries(item).map(([k, v]) => \`\${k}: \${v}\`).join(', ')}</li>
+                  ))}
+                </ul>
+              ) : '-'}
+            </div>
+          </div>`;
+    }
     return `          <div className="space-y-1">
             <p className="text-sm font-medium text-muted-foreground">${lbl}</p>
             <p className="text-sm">{submission.${name} ?? '-'}</p>
@@ -1727,7 +1742,8 @@ function generateFormActions(schema, cwd, actionsDir, options) {
       return { success: false, error: '${f.label} is required' }
     }`
   ).join("\n    ");
-  const filePath = path6.join(cwd, actionsDir, `${formName}-form.ts`);
+  const kebab = toKebabCase(formName);
+  const filePath = path6.join(cwd, actionsDir, `${kebab}-form.ts`);
   const dir = path6.dirname(filePath);
   if (!fs6.existsSync(dir)) fs6.mkdirSync(dir, { recursive: true });
   if (fs6.existsSync(filePath) && !options.force) {
@@ -1821,7 +1837,7 @@ export async function create${pascal}Submission(
     // Resolve notification emails from form settings or env var
     const settings = await getFormSettings('${formName}')
     const notificationEmails = settings?.notificationEmails
-      ? settings.notificationEmails.split(',').map((e) => e.trim()).filter(Boolean)
+      ? settings.notificationEmails.split(',').map((e: string) => e.trim()).filter(Boolean)
       : process.env.NOTIFICATION_EMAIL
         ? [process.env.NOTIFICATION_EMAIL]
         : []
@@ -1889,7 +1905,7 @@ export async function export${pascal}SubmissionsCSV(): Promise<string> {
   const headers = Object.keys(submissions[0]).join(',')
   const rows = submissions.map((sub) =>
     Object.values(sub)
-      .map((val) => {
+      .map((val: unknown) => {
         if (val === null || val === undefined) return ''
         const str = String(val)
         if (str.includes(',') || str.includes('"') || str.includes('\\n')) {
@@ -2128,7 +2144,7 @@ function formFieldToZodType(field, options = {}) {
       }
       return isRequired ? `z.string().min(1, '${label} is required')` : "z.string().optional()";
     case "checkbox":
-      return isRequired ? `z.literal(true, { message: '${label} is required' })` : "z.boolean().optional()";
+      return isRequired ? `z.boolean().refine(val => val === true, { message: '${label} is required' })` : "z.boolean().optional()";
     case "multiselect":
       return isRequired ? `z.array(z.string()).min(1, '${label} is required')` : "z.array(z.string()).optional()";
     case "timezone":
@@ -2210,6 +2226,9 @@ function toTypeScriptType(field, mode = "output") {
 }
 
 // src/generators/form-pipeline/form-component.ts
+function escapeJsx(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 function generateFormComponent(schema, cwd, cmsDir, options) {
   const formName = schema.name;
   const pascal = toPascalCase(formName);
@@ -2226,22 +2245,31 @@ function generateFormComponent(schema, cwd, cmsDir, options) {
     if (f.type === "checkbox") return `    ${f.name}: false`;
     if (f.type === "number") return `    ${f.name}: undefined`;
     if (f.type === "multiselect" || f.type === "list") return `    ${f.name}: []`;
+    if (f.type === "select" || f.type === "radio") return `    ${f.name}: undefined`;
     if (f.defaultValue !== void 0) return `    ${f.name}: '${f.defaultValue}'`;
     return `    ${f.name}: ''`;
   }).join(",\n");
+  const listFields = fields.filter(
+    (f) => f.name && f.type === "list" && f.fields && f.fields.length > 0
+  );
+  const hasListFields = listFields.length > 0;
+  const fieldArrayDecls = listFields.map(
+    (f) => `  const ${f.name}FieldArray = useFieldArray({ control: form.control, name: '${f.name}' })`
+  ).join("\n");
   const fieldJSX = fields.filter((f) => f.name && !f.hidden).map((f) => generateFieldJSX(f)).join("\n\n");
   const submitText = schema.submitButtonText || "Submit";
-  const successMessage = (schema.successMessage || "Form submitted successfully!").replace(
-    /'/g,
-    "\\'"
-  );
+  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 ? `
+${fieldArrayDecls}
+` : "";
   const content = `'use client'
 
 import { zodResolver } from '@hookform/resolvers/zod'
 import { useState } from 'react'
-import { useForm } from 'react-hook-form'
+${rhfImport}
 import { z } from 'zod/v3'
-import { create${pascal}Submission } from '@cms/actions/${formName}-form'
+import { create${pascal}Submission } from '@cms/actions/${kebab}-form'
 import { Button } from '@cms/components/ui/button'
 import {
   Form,
@@ -2278,7 +2306,7 @@ export function ${pascal}Form() {
 ${defaults}
     },
   })
-
+${fieldArraySetup}
   async function onSubmit(values: FormValues) {
     setSubmitting(true)
     try {
@@ -2326,11 +2354,11 @@ ${fieldJSX}
 }
 function generateFieldJSX(field) {
   const name = field.name || "";
-  const label = field.label;
+  const label = escapeJsx(field.label);
   const placeholder = field.placeholder || "";
   const hint = field.hint || "";
   const hintJSX = hint ? `
-                  <FormDescription>${hint}</FormDescription>` : "";
+                  <FormDescription>${escapeJsx(hint)}</FormDescription>` : "";
   const requiredStar = field.required ? ' <span className="text-destructive">*</span>' : "";
   switch (field.type) {
     case "textarea":
@@ -2351,7 +2379,7 @@ function generateFieldJSX(field) {
     case "radio":
       if (field.options && field.options.length > 0) {
         const optionItems = field.options.map(
-          (opt) => `                    <SelectItem value="${opt.value}">${opt.label}</SelectItem>`
+          (opt) => `                    <SelectItem value="${opt.value}">${escapeJsx(opt.label)}</SelectItem>`
         ).join("\n");
         return `        <FormField
           control={form.control}
@@ -2427,6 +2455,11 @@ ${optionItems}
         requiredStar,
         "tel"
       );
+    case "file":
+    case "upload":
+      return generateTextFieldJSX(name, label, placeholder, hintJSX, requiredStar, "file");
+    case "list":
+      return generateListFieldJSX(field, name, label, hintJSX, requiredStar);
     default:
       return generateTextFieldJSX(name, label, placeholder, hintJSX, requiredStar, "text");
   }
@@ -2446,6 +2479,81 @@ function generateTextFieldJSX(name, label, placeholder, hintJSX, requiredStar, i
           )}
         />`;
 }
+function generateListFieldJSX(field, name, label, hintJSX, requiredStar) {
+  if (!field.fields || field.fields.length === 0) {
+    return generateTextFieldJSX(name, label, field.placeholder || "", hintJSX, requiredStar, "text");
+  }
+  const singularLabel = singularize(label);
+  const nestedFieldsJSX = field.fields.map((nf) => {
+    const nfLabel = escapeJsx(nf.label || nf.name || "");
+    const nfPlaceholder = nf.placeholder || "";
+    if (nf.type === "select" && nf.options && nf.options.length > 0) {
+      const selectItems = nf.options.map(
+        (opt) => `                          <SelectItem value="${opt.value}">${escapeJsx(opt.label)}</SelectItem>`
+      ).join("\n");
+      return `                    <FormField
+                      control={form.control}
+                      name={\`${name}.\${index}.${nf.name}\`}
+                      render={({ field: formField }) => (
+                        <FormItem className="flex-1">
+                          <FormLabel>${nfLabel}</FormLabel>
+                          <Select onValueChange={formField.onChange} defaultValue={formField.value}>
+                            <FormControl>
+                              <SelectTrigger>
+                                <SelectValue placeholder="${nf.placeholder || "Select..."}" />
+                              </SelectTrigger>
+                            </FormControl>
+                            <SelectContent>
+${selectItems}
+                            </SelectContent>
+                          </Select>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />`;
+    }
+    return `                    <FormField
+                      control={form.control}
+                      name={\`${name}.\${index}.${nf.name}\`}
+                      render={({ field: formField }) => (
+                        <FormItem className="flex-1">
+                          <FormLabel>${nfLabel}</FormLabel>
+                          <FormControl>
+                            <Input type="text" placeholder="${nfPlaceholder}" {...formField} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />`;
+  }).join("\n");
+  const defaultObj = field.fields.map((nf) => {
+    if (nf.type === "select" || nf.type === "radio") return `${nf.name}: undefined`;
+    if (nf.type === "checkbox") return `${nf.name}: false`;
+    if (nf.type === "number") return `${nf.name}: undefined`;
+    return `${nf.name}: ''`;
+  }).join(", ");
+  return `        <div className="space-y-4">
+          <FormLabel>${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">
+${nestedFieldsJSX}
+              </div>
+              <Button type="button" variant="ghost" size="sm" onClick={() => ${name}FieldArray.remove(index)}>
+                Remove
+              </Button>
+            </div>
+          ))}
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => ${name}FieldArray.append({ ${defaultObj} })}
+          >
+            Add ${singularLabel}
+          </Button>
+        </div>`;
+}
 
 // src/generators/form-pipeline/form-database.ts
 import fs8 from "fs";
@@ -2514,7 +2622,8 @@ function generateFormHook(schema, cwd, hooksDir, options) {
   const formName = schema.name;
   const pascal = toPascalCase(formName);
   const camel = toCamelCase(formName);
-  const filePath = path9.join(cwd, hooksDir, `use-${toKebabCase(formName)}-form.ts`);
+  const kebab = toKebabCase(formName);
+  const filePath = path9.join(cwd, hooksDir, `use-${kebab}-form.ts`);
   const dir = path9.dirname(filePath);
   if (!fs9.existsSync(dir)) fs9.mkdirSync(dir, { recursive: true });
   if (fs9.existsSync(filePath) && !options.force) {
@@ -2528,8 +2637,8 @@ function generateFormHook(schema, cwd, hooksDir, options) {
   export${pascal}SubmissionsJSON,
   get${pascal}Submission,
   get${pascal}Submissions,
-} from '@cms/actions/${formName}-form'
-import type { Create${pascal}SubmissionInput } from '@cms/actions/${formName}-form'
+} from '@cms/actions/${kebab}-form'
+import type { Create${pascal}SubmissionInput } from '@cms/actions/${kebab}-form'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'