@betterstart/cli 0.1.70 → 0.1.72

package/dist/cli.js

@@ -84,7 +84,7 @@ function walkFields(fields, callback, options = DEFAULT_WALK_OPTIONS) {
   function walk(fieldsToWalk, depth, parent) {
     for (const field of fieldsToWalk) {
       callback(field, depth, parent);
-      if (options.includeGroups && field.type === "group" && field.fields) {
+      if (options.includeGroups && (field.type === "group" || field.type === "section") && field.fields) {
         walk(field.fields, depth + 1, field);
       }
       if (options.includeLists && field.type === "list" && field.fields) {
@@ -140,7 +140,7 @@ function flattenFields(fields) {
 function flattenFieldsWithoutIdCheck(fields) {
   const flattened = [];
   for (const field of fields) {
-    if (field.type === "group" && field.fields) {
+    if ((field.type === "group" || field.type === "section") && field.fields) {
       flattened.push(...flattenFieldsWithoutIdCheck(field.fields));
     } else if (field.type === "tabs" && field.tabs) {
       for (const tab of field.tabs) {
@@ -3353,12 +3353,12 @@ var FIELD_TYPES = {
   TABS: "tabs",
   LIST: "list",
   SEPARATOR: "separator",
-  BREAK: "break",
+  SECTION: "section",
   SELECT: "select",
   RELATIONSHIP: "relationship",
   CURRICULUM: "curriculum"
 };
-var LAYOUT_FIELD_TYPES = [FIELD_TYPES.SEPARATOR, FIELD_TYPES.BREAK];
+var LAYOUT_FIELD_TYPES = [FIELD_TYPES.SEPARATOR];
 var NESTED_FIELD_TYPES = [FIELD_TYPES.GROUP, FIELD_TYPES.TABS, FIELD_TYPES.LIST];
 var RICH_TEXT_FIELD_TYPES = [FIELD_TYPES.MARKDOWN, FIELD_TYPES.TEXT];
 var LONG_TEXT_FIELD_TYPES = [
@@ -6139,7 +6139,7 @@ function generateFieldJSXCore(field, indent = "          ") {
   const fieldType = getFormFieldType(field);
   const label = field.label || field.name;
   const hintJSX = field.hint ? `${indent}      <FormDescription>${field.hint}</FormDescription>` : "";
-  if (field.type === "group" && field.fields) return renderGroupField(field, indent, label);
+  if ((field.type === "group" || field.type === "section") && field.fields) return renderGroupField(field, indent, label);
   if (field.type === "separator") return renderSeparatorField(field, indent);
   if (field.type === "boolean") return renderBooleanField(field, indent, label, hintJSX);
   if (field.type === "image") return renderImageField(field, indent, label, hintJSX);
@@ -6969,6 +6969,184 @@ ${hasDraft ? `            <Button
 // src/generators/form/form-single.ts
 import fs21 from "fs";
 import path21 from "path";
+function parseCardGroups(allFormFields, schemaLabel) {
+  const sections = allFormFields.filter((f) => f.type === "section" && f.fields);
+  const nonSections = allFormFields.filter((f) => f.type !== "section" && !isLayoutField(f.type));
+  if (sections.length === 0) {
+    const title = nonSections[0]?.label || nonSections[0]?.name || schemaLabel;
+    return [
+      {
+        title,
+        description: "",
+        varPrefix: toCamelCase(nonSections[0]?.name || "form"),
+        componentName: `${toPascalCase(nonSections[0]?.name || "form")}Card`,
+        fields: nonSections,
+        flatFields: flattenFields(nonSections).filter((f) => !isLayoutField(f.type))
+      }
+    ];
+  }
+  const groups = [];
+  for (const section of sections) {
+    const innerFields = section.fields || [];
+    groups.push({
+      title: section.label || section.name,
+      description: section.description || section.hint || "",
+      varPrefix: toCamelCase(section.name),
+      componentName: `${toPascalCase(section.name)}Card`,
+      fields: innerFields,
+      flatFields: flattenFields(innerFields).filter((f) => !isLayoutField(f.type))
+    });
+  }
+  if (nonSections.length > 0) {
+    const title = nonSections[0]?.label || nonSections[0]?.name || "General";
+    groups.unshift({
+      title,
+      description: "",
+      varPrefix: toCamelCase(nonSections[0]?.name || "general"),
+      componentName: `${toPascalCase(nonSections[0]?.name || "General")}Card`,
+      fields: nonSections,
+      flatFields: flattenFields(nonSections).filter((f) => !isLayoutField(f.type))
+    });
+  }
+  return groups;
+}
+function analyzeGroup(fields) {
+  const tabFieldNames = /* @__PURE__ */ new Set();
+  for (const f of fields) {
+    if (f.type === "tabs" && f.tabs) {
+      for (const tab of f.tabs) {
+        if (tab.fields) for (const tf of tab.fields) tabFieldNames.add(tf.name);
+      }
+    }
+  }
+  const relFields = collectRelationshipFields(fields, tabFieldNames);
+  const listFieldsWithNested = [];
+  function collectLists(flds) {
+    for (const f of flds) {
+      if (f.type === "list" && f.fields && f.fields.length > 0 && !f.hidden) {
+        listFieldsWithNested.push(f);
+      }
+      if (f.type === "group" && f.fields) collectLists(f.fields);
+      if (f.type === "tabs" && f.tabs) {
+        for (const tab of f.tabs) {
+          if (tab.fields) collectLists(tab.fields);
+        }
+      }
+    }
+  }
+  collectLists(fields);
+  const hasTabsField = fields.some((f) => f.type === "tabs");
+  const tabsField = fields.find((f) => f.type === "tabs");
+  const firstTabName = tabsField?.tabs?.[0]?.name || "";
+  return { relFields, listFieldsWithNested, hasTabsField, firstTabName, tabFieldNames };
+}
+function buildGroupFieldsJSX(group3, analysis, skipLabel) {
+  const indent = "            ";
+  return group3.fields.map((f) => {
+    if (f.type === "tabs" && f.tabs) {
+      const tabsList = f.tabs.map((t) => `              <TabsTrigger value="${t.name}">${t.label}</TabsTrigger>`).join("\n");
+      const tabsContent = f.tabs.map((t) => {
+        const tabFields = (t.fields || []).map((tf) => generateFieldJSX2(tf, "                ")).join("\n");
+        return `              <TabsContent value="${t.name}" className="space-y-6">
+${tabFields}
+              </TabsContent>`;
+      }).join("\n");
+      return `${indent}<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList>
+${tabsList}
+              </TabsList>
+${tabsContent}
+${indent}</Tabs>`;
+    }
+    if (analysis.tabFieldNames.has(f.name)) return "";
+    return generateFieldJSX2(f, indent, { skipLabel });
+  }).filter(Boolean).join("\n");
+}
+function buildGroupRelState(analysis) {
+  return analysis.relFields.map((f) => {
+    const relPlural = toPascalCase(pluralize(f.relationship || ""));
+    return `  const [${f.name}Open, set${toPascalCase(f.name)}Open] = React.useState(false)
+  const { data: ${f.relationship}Data } = use${relPlural}()`;
+  }).filter((v, i, a) => a.indexOf(v) === i).join("\n");
+}
+function buildGroupFieldArrayHooks(analysis) {
+  return analysis.listFieldsWithNested.map((field) => {
+    const pascalFieldName = toPascalCase(field.name);
+    return `  const [${field.name}Expanded, set${pascalFieldName}Expanded] = React.useState<string | undefined>(undefined)
+  const ${field.name}FieldArray = useFieldArray({
+    control: form.control,
+    name: '${field.name}'
+  })`;
+  }).join("\n");
+}
+function generateCardComponent(group3, schema, analysis) {
+  const singular = singularize(schema.name);
+  const Singular = toPascalCase(singular);
+  const zodFields = buildZodFields2(group3.flatFields);
+  const defaultValues = buildDefaultValues2(group3.flatFields);
+  const isSingleField = group3.fields.length === 1 && group3.title === (group3.fields[0].label || group3.fields[0].name);
+  const fieldsJSX = buildGroupFieldsJSX(group3, analysis, isSingleField);
+  const relState = buildGroupRelState(analysis);
+  const fieldArrayHooks = buildGroupFieldArrayHooks(analysis);
+  const descriptionLine = group3.description ? `
+            <CardDescription>${group3.description}</CardDescription>` : "";
+  return `const ${group3.varPrefix}Schema = z.object({
+${zodFields}
+})
+
+function ${group3.componentName}({ initialData }: { initialData?: ${Singular}Data | null }) {
+  const queryClient = useQueryClient()${analysis.hasTabsField ? `
+  const [activeTab, setActiveTab] = useQueryState('tab', { defaultValue: '${analysis.firstTabName}' })` : ""}${relState ? `
+${relState}` : ""}
+
+  const mutation = useMutation({
+    mutationFn: (data: Upsert${Singular}Input) => upsert${Singular}(data),
+    onSuccess: () => {
+      toast.success('${group3.title} saved')
+      queryClient.invalidateQueries({ queryKey: ['${schema.name}'] })
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'Failed to save')
+    }
+  })
+
+  const isPending = mutation.isPending
+
+  const form = useForm<z.infer<typeof ${group3.varPrefix}Schema>>({
+    resolver: zodResolver(${group3.varPrefix}Schema),
+    defaultValues: {
+${defaultValues}
+    }
+  })
+${fieldArrayHooks ? `
+${fieldArrayHooks}
+` : ""}
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit((values) => {
+        const cleaned = Object.fromEntries(
+          Object.entries(values).map(([key, value]) => [key, value === undefined ? '' : value])
+        )
+        mutation.mutate(cleaned as Upsert${Singular}Input)
+      })}>
+        <Card className="material-sm!">
+          <CardHeader>
+            <CardTitle>${group3.title}</CardTitle>${descriptionLine}
+          </CardHeader>
+          <CardContent className="space-y-6">
+${fieldsJSX}
+          </CardContent>
+          <CardFooter>
+            <Button type="submit" disabled={isPending} size="sm">
+              {isPending ? 'Saving...' : 'Save'}
+            </Button>
+          </CardFooter>
+        </Card>
+      </form>
+    </Form>
+  )
+}`;
+}
 function generateSingleForm(schema, cwd, pagesDir, options = {}) {
   const entityDir = path21.join(cwd, pagesDir, schema.name);
   const formFilePath = path21.join(entityDir, `${schema.name}-form.tsx`);
@@ -6980,15 +7158,7 @@ function generateSingleForm(schema, cwd, pagesDir, options = {}) {
   const allFormFields = schema.fields.filter(
     (f) => !f.primaryKey && f.name !== "createdAt" && f.name !== "updatedAt"
   );
-  const flatFields = flattenFields(allFormFields);
-  const tabFieldNames = /* @__PURE__ */ new Set();
-  for (const f of schema.fields) {
-    if (f.type === "tabs" && f.tabs) {
-      for (const tab of f.tabs) {
-        if (tab.fields) for (const tf of tab.fields) tabFieldNames.add(tf.name);
-      }
-    }
-  }
+  const cardGroups = parseCardGroups(allFormFields, schema.label);
   const hasBoolean = hasFieldType(schema.fields, "boolean");
   const hasImage = hasFieldType(schema.fields, "image");
   const hasVideo = hasFieldType(schema.fields, "video");
@@ -7003,48 +7173,20 @@ function generateSingleForm(schema, cwd, pagesDir, options = {}) {
   const hasSeparator = hasFieldType(schema.fields, "separator");
   const hasRelationship = hasFieldType(schema.fields, "relationship");
   const hasTabsField = schema.fields.some((f) => f.type === "tabs");
-  const tabsField = schema.fields.find((f) => f.type === "tabs");
-  const firstTabName = tabsField?.tabs?.[0]?.name || "";
-  const mainRelFields = collectRelationshipFields(schema.fields, tabFieldNames);
-  const listFieldsWithNested = [];
-  function collectListFieldsSingle(fields) {
-    for (const f of fields) {
-      if (f.type === "list" && f.fields && f.fields.length > 0 && !f.hidden) {
-        listFieldsWithNested.push(f);
-      }
-      if (f.type === "group" && f.fields) collectListFieldsSingle(f.fields);
-      if (f.type === "tabs" && f.tabs) {
-        for (const tab of f.tabs) {
-          if (tab.fields) collectListFieldsSingle(tab.fields);
-        }
-      }
-    }
-  }
-  collectListFieldsSingle(allFormFields);
+  const flatFields = flattenFields(allFormFields);
   const hasList = hasFieldType(schema.fields, "list");
-  const hasNestedList = listFieldsWithNested.length > 0;
+  const hasNestedList = cardGroups.some((g) => analyzeGroup(g.fields).listFieldsWithNested.length > 0);
   const hasSimpleList = hasList && flatFields.some((f) => f.type === "list" && (!f.fields || f.fields.length === 0));
-  const zodFields = buildZodFields2(flatFields);
-  const defaultValues = buildDefaultValues2(flatFields);
-  const formFieldsJSX = allFormFields.map((f) => {
-    if (f.type === "tabs" && f.tabs) {
-      const tabsList = f.tabs.map((t) => `            <TabsTrigger value="${t.name}">${t.label}</TabsTrigger>`).join("\n");
-      const tabsContent = f.tabs.map((t) => {
-        const tabFields = (t.fields || []).map((tf) => generateFieldJSX2(tf, "              ")).join("\n");
-        return `            <TabsContent value="${t.name}" className="space-y-6 p-6 rounded-2xl border bg-card">
-${tabFields}
-            </TabsContent>`;
-      }).join("\n");
-      return `          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-            <TabsList>
-${tabsList}
-            </TabsList>
-${tabsContent}
-          </Tabs>`;
+  const allRelFields = [];
+  for (const g of cardGroups) {
+    const a = analyzeGroup(g.fields);
+    for (const rf of a.relFields) {
+      if (!allRelFields.some((e) => e.relationship === rf.relationship)) {
+        allRelFields.push(rf);
+      }
     }
-    if (tabFieldNames.has(f.name)) return "";
-    return generateFieldJSX2(f);
-  }).filter(Boolean).join("\n");
+  }
+  const needsReact = allRelFields.length > 0 || hasNestedList;
   const uiImports = buildUiImports({
     hasBoolean,
     hasTextarea,
@@ -7063,30 +7205,29 @@ ${tabsContent}
     hasSimpleList,
     hasNestedList
   });
+  uiImports.push(`import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle
+} from '@cms/components/ui/card'`);
   const lucideIcons = [];
   if (hasRelationship) lucideIcons.push("Check", "ChevronsUpDown");
   if (hasNestedList) {
     if (!lucideIcons.includes("Plus")) lucideIcons.push("Plus");
     if (!lucideIcons.includes("X")) lucideIcons.push("X");
   }
-  const relHookImports = mainRelFields.map((f) => {
+  const relHookImports = allRelFields.map((f) => {
     const relPlural = toPascalCase(pluralize(f.relationship || ""));
     return `import { use${relPlural} } from '@cms/hooks/use-${f.relationship}'`;
   }).filter((v, i, a) => a.indexOf(v) === i).join("\n");
-  const relState = mainRelFields.map((f) => {
-    const relPlural = toPascalCase(pluralize(f.relationship || ""));
-    return `  const [${f.name}Open, set${toPascalCase(f.name)}Open] = React.useState(false)
-  const { data: ${f.relationship}Data } = use${relPlural}()`;
-  }).filter((v, i, a) => a.indexOf(v) === i).join("\n");
-  const fieldArrayHooks = listFieldsWithNested.map((field) => {
-    const pascalFieldName = toPascalCase(field.name);
-    return `  const [${field.name}Expanded, set${pascalFieldName}Expanded] = React.useState<string | undefined>(undefined)
-  const ${field.name}FieldArray = useFieldArray({
-    control: form.control,
-    name: '${field.name}'
-  })`;
-  }).join("\n");
-  const needsReact = mainRelFields.length > 0 || hasNestedList;
+  const cardComponents = cardGroups.map((group3) => {
+    const analysis = analyzeGroup(group3.fields);
+    return generateCardComponent(group3, schema, analysis);
+  });
+  const cardRenders = cardGroups.map((g) => `        <${g.componentName} initialData={initialData} />`).join("\n");
   const content = `'use client'
 ${needsReact ? "\nimport * as React from 'react'" : ""}
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -7103,75 +7244,17 @@ import type {
 } from '@cms/actions/${schema.name}'
 import { upsert${Singular} } from '@cms/actions/${schema.name}'
 
-const formSchema = z.object({
-${zodFields}
-})
-
-export type FormValues = z.infer<typeof formSchema>
+${cardComponents.join("\n\n")}
 
 interface ${Singular}FormProps {
   initialData?: ${Singular}Data | null
 }
 
 export function ${Singular}Form({ initialData }: ${Singular}FormProps) {
-  const queryClient = useQueryClient()${hasTabsField ? `
-  const [activeTab, setActiveTab] = useQueryState('tab', { defaultValue: '${firstTabName}' })` : ""}${relState ? `
-${relState}` : ""}
-
-  const upsertMutation = useMutation({
-    mutationFn: (data: Upsert${Singular}Input) => upsert${Singular}(data),
-    onSuccess: () => {
-      toast.success('${schema.label} saved successfully')
-      queryClient.invalidateQueries({ queryKey: ['${schema.name}'] })
-    },
-    onError: (error: Error) => {
-      toast.error(error.message || 'Failed to save ${schema.label.toLowerCase()}')
-    }
-  })
-
-  const isPending = upsertMutation.isPending
-
-  const form = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-${defaultValues}
-    }
-  })
-${fieldArrayHooks ? `
-${fieldArrayHooks}
-` : ""}
-  function onSubmit(values: FormValues) {
-    const cleanedValues = Object.fromEntries(
-      Object.entries(values).map(([key, value]) => [key, value === undefined ? '' : value])
-    ) as FormValues
-
-    upsertMutation.mutate(cleanedValues as Upsert${Singular}Input)
-  }
-
   return (
-    <Form {...form}>
-      <form id="${schema.name}-form" onSubmit={form.handleSubmit(onSubmit, (errors) => {
-        console.error('Form validation errors:', errors)
-        const firstError = Object.values(errors)[0]
-        if (firstError?.message) {
-          toast.error(String(firstError.message))
-        } else {
-          toast.error('Please fix the form errors before submitting')
-        }
-      })} className="space-y-6">
-        <div className="space-y-6 p-6 rounded-2xl border bg-card">
-${formFieldsJSX}
-        </div>
-
-        <div className="flex items-center fixed bottom-0 md:left-[calc(var(--sidebar-width))] w-screen md:w-[calc(100svw-var(--sidebar-width)-4px)] right-0 bg-secondary border-t">
-          <div className="flex mx-auto py-4 w-full max-w-5xl items-center justify-end gap-2">
-            <Button type="submit" disabled={isPending} size="lg">
-              {isPending ? 'Saving...' : 'Save'}
-            </Button>
-          </div>
-        </div>
-      </form>
-    </Form>
+    <div className="space-y-6">
+${cardRenders}
+    </div>
   )
 }
 `;
@@ -9998,14 +10081,28 @@ function defaultSettingsSchema() {
       name: "settings",
       type: "single",
       label: "Settings",
-      description: "General site settings",
+      description: "General Settings",
       icon: "Settings",
       fields: [
-        { name: "siteName", type: "string", label: "Site Name", default: "BetterStart" },
-        { name: "tagline", type: "string", label: "Tagline" },
-        { name: "separator1", type: "separator" },
-        { name: "logo", type: "image", label: "Logo" },
-        { name: "favicon", type: "image", label: "Favicon" }
+        {
+          type: "section",
+          name: "siteSettings",
+          label: "Site Settings",
+          description: "General settings for the site",
+          fields: [
+            { name: "appName", type: "string", label: "App Name", hint: "Displayed in the sidebar and throughout the dashboard", default: "BetterStart" },
+            { name: "appDescription", type: "text", label: "App Description", hint: "A brief description of the application" }
+          ]
+        },
+        {
+          type: "section",
+          name: "branding",
+          label: "Branding",
+          description: "Logo and visual identity",
+          fields: [
+            { name: "logo", type: "image", label: "Logo" }
+          ]
+        }
       ]
     },
     null,