@flaredev/cli 0.4.1 → 0.5.0

package/templates/app/components/dashboard/resource-form.tsx

@@ -2,8 +2,8 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useMemo, useState, useTransition, type FormEvent } from "react";
-import { createValidators, formValuesToInput, initialFormValues, issuesByField, storedFields, type ClientResource } from "@flaredev/core";
+import { useMemo, useState, useTransition, type FormEvent, type MouseEvent } from "react";
+import { createValidators, formValuesToInput, initialFormValues, issuesByField, storedFields, type ClientResource, type StoredField } from "@flaredev/core";
 import { toast } from "sonner";
 import { createRecordAction, updateRecordAction } from "@/app/dashboard/actions";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -11,6 +11,8 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field";
 import { Spinner } from "@/components/ui/spinner";
+import { canSuggest, suggestValue } from "@/lib/suggest";
+import { cn } from "@/lib/utils";
 import { FieldWidget, type RelationMeta } from "./fields/field-widget";
 
 export interface ResourceFormProps {
@@ -23,12 +25,33 @@ export interface ResourceFormProps {
   relations?: Record<string, RelationMeta & { initialTitle?: string }>;
   /** Where Cancel and a successful save go, when the form owns the page. */
   listHref: string;
-  /** In a dialog: close it instead of navigating, and drop the card around the fields. */
+  /** In a sheet: close it instead of navigating, and drop the card around the fields. */
   onDone?: () => void;
 }
 
 const WIDE = new Set(["text", "file"]);
 
+/**
+ * More fields than this and the form is split into steps.
+ *
+ * Six inputs in one column is where a form starts to read as a chore rather than a
+ * question, and a step at a time also means the first error appears before everything
+ * else has been filled in.
+ */
+const FIELDS_PER_STEP = 5;
+
+type Entry = [string, StoredField & { label: string }];
+
+/** Fields in declaration order, cut into steps of at most {@link FIELDS_PER_STEP}. */
+function toSteps(fields: Entry[]): Entry[][] {
+  if (fields.length <= FIELDS_PER_STEP) return [fields];
+  const steps: Entry[][] = [];
+  for (let index = 0; index < fields.length; index += FIELDS_PER_STEP) {
+    steps.push(fields.slice(index, index + FIELDS_PER_STEP));
+  }
+  return steps;
+}
+
 /**
  * Create/edit form rendered from field metadata. Values are validated in the browser
  * with the descriptor's zod schemas, then again on the server by the same store the
@@ -38,28 +61,63 @@ export function ResourceForm({ resource, mode, id, record, relations = {}, listH
   const router = useRouter();
   const validators = useMemo(() => createValidators(resource), [resource]);
   const fields = useMemo(() => storedFields(resource), [resource]);
+  const steps = useMemo(() => toSteps(fields), [fields]);
+  const [step, setStep] = useState(0);
   const [values, setValues] = useState(() => initialFormValues(resource, record));
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [pending, startTransition] = useTransition();
 
+  const last = step === steps.length - 1;
+  const visible = steps[step] ?? [];
+
   const setValue = (key: string, value: string | boolean) => {
     setValues((current) => ({ ...current, [key]: value }));
     if (errors[key]) setErrors(({ [key]: _removed, ...rest }) => rest);
   };
 
-  function focusFirstError(fieldErrors: Record<string, string>) {
-    const first = fields.find(([key]) => fieldErrors[key]);
+  function focusFirstError(fieldErrors: Record<string, string>, within: Entry[] = fields) {
+    const first = within.find(([key]) => fieldErrors[key]);
     if (first) document.getElementById(`field-${first[0]}`)?.focus();
   }
 
+  /** Everything the descriptor objects to, whichever step it is on. */
+  function validate(): Record<string, string> {
+    const input = formValuesToInput(resource, values, mode);
+    const parsed = (mode === "create" ? validators.create : validators.update).safeParse(input);
+    return parsed.success ? {} : issuesByField(parsed.error.issues);
+  }
+
+  /**
+   * Move on only when this step is right; problems further on can wait their turn.
+   *
+   * The click is cancelled first. This button and the submit button on the last step are
+   * the same node to the browser, and React has already turned this one into the submit
+   * button by the time the click's default action runs — without this, going to the last
+   * step also saves the record.
+   */
+  function next(event: MouseEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    const found = validate();
+    const here = Object.fromEntries(Object.entries(found).filter(([key]) => visible.some(([field]) => field === key)));
+    if (Object.keys(here).length > 0) {
+      setErrors(here);
+      focusFirstError(here, visible);
+      return;
+    }
+    setErrors({});
+    setStep((current) => Math.min(current + 1, steps.length - 1));
+  }
+
   function onSubmit(event: FormEvent) {
     event.preventDefault();
     const input = formValuesToInput(resource, values, mode);
-    const parsed = (mode === "create" ? validators.create : validators.update).safeParse(input);
-    if (!parsed.success) {
-      const fieldErrors = issuesByField(parsed.error.issues);
-      setErrors(fieldErrors);
-      focusFirstError(fieldErrors);
+    const found = validate();
+    if (Object.keys(found).length > 0) {
+      setErrors(found);
+      // Send them to the step that holds the problem, not just to the field.
+      const broken = steps.findIndex((entries) => entries.some(([key]) => found[key]));
+      if (broken >= 0 && broken !== step) setStep(broken);
+      focusFirstError(found, broken >= 0 ? steps[broken]! : fields);
       return;
     }
 
@@ -74,17 +132,20 @@ export function ResourceForm({ resource, mode, id, record, relations = {}, listH
       }
       const fieldErrors = result.issues ? issuesByField(result.issues) : result.field ? { [result.field]: result.error } : { _form: result.error };
       setErrors(fieldErrors);
-      focusFirstError(fieldErrors);
+      const broken = steps.findIndex((entries) => entries.some(([key]) => fieldErrors[key]));
+      if (broken >= 0 && broken !== step) setStep(broken);
+      focusFirstError(fieldErrors, broken >= 0 ? steps[broken]! : fields);
     });
   }
 
-  const Frame = onDone ? DialogFrame : Card;
-  const Body = onDone ? DialogBody : CardContent;
-  const Footer = onDone ? DialogFooterRow : CardFooter;
+  const Frame = onDone ? SheetFrame : Card;
+  const Body = onDone ? SheetBody : CardContent;
+  const Footer = onDone ? SheetFooterRow : CardFooter;
 
   return (
-    <form onSubmit={onSubmit} noValidate>
+    <form onSubmit={onSubmit} noValidate className={onDone ? "flex min-h-0 flex-1 flex-col" : undefined}>
       <Frame>
+        {steps.length > 1 && <Steps count={steps.length} current={step} onGo={setStep} />}
         <Body>
           {errors._form && (
             <Alert variant="destructive" className="mb-6">
@@ -92,16 +153,12 @@ export function ResourceForm({ resource, mode, id, record, relations = {}, listH
             </Alert>
           )}
           <FieldGroup className="grid gap-6 md:grid-cols-2">
-            {fields.map(([key, def]) => {
+            {visible.map(([key, def]) => {
               const error = errors[key];
               const widgetId = `field-${key}`;
               const horizontal = def.kind === "boolean";
               return (
-                <Field
-                  key={key}
-                  data-invalid={error ? true : undefined}
-                  className={WIDE.has(def.kind) ? "md:col-span-2" : undefined}
-                >
+                <Field key={key} data-invalid={error ? true : undefined} className={WIDE.has(def.kind) ? "md:col-span-2" : undefined}>
                   <FieldLabel htmlFor={widgetId}>
                     {def.label}
                     {def.required && def.kind !== "boolean" && (
@@ -122,6 +179,7 @@ export function ResourceForm({ resource, mode, id, record, relations = {}, listH
                       invalid={Boolean(error)}
                       disabled={pending}
                       relation={relations[key]}
+                      suggest={canSuggest(def) ? () => suggestValue(key, def, String(values[resource.titleField] ?? "")) : undefined}
                     />
                   </div>
                   {def.helpText && <FieldDescription>{def.helpText}</FieldDescription>}
@@ -131,8 +189,12 @@ export function ResourceForm({ resource, mode, id, record, relations = {}, listH
             })}
           </FieldGroup>
         </Body>
-        <Footer className="flex justify-end gap-2 border-t pt-4">
-          {onDone ? (
+        <Footer className="flex items-center justify-end gap-2 border-t pt-4">
+          {step > 0 ? (
+            <Button type="button" variant="outline" onClick={() => setStep((current) => current - 1)} disabled={pending}>
+              Back
+            </Button>
+          ) : onDone ? (
             <Button type="button" variant="outline" onClick={onDone} disabled={pending}>
               Cancel
             </Button>
@@ -141,25 +203,59 @@ export function ResourceForm({ resource, mode, id, record, relations = {}, listH
               <Link href={listHref}>Cancel</Link>
             </Button>
           )}
-          <Button type="submit" disabled={pending}>
-            {pending && <Spinner data-icon="inline-start" />}
-            {mode === "create" ? `Create ${resource.label.toLowerCase()}` : "Save changes"}
-          </Button>
+          {last ? (
+            <Button key="submit" type="submit" disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              {mode === "create" ? `Create ${resource.label.toLowerCase()}` : "Save changes"}
+            </Button>
+          ) : (
+            <Button key="next" type="button" onClick={next} disabled={pending}>
+              Next
+            </Button>
+          )}
         </Footer>
       </Frame>
     </form>
   );
 }
 
-/** Plain wrappers so the same form works in a page (a card) and in a dialog (no card). */
-function DialogFrame({ children }: { children: React.ReactNode }) {
-  return <div className="flex flex-col gap-4">{children}</div>;
+/** Where you are in a multi-step form, and a way back to a step already passed. */
+function Steps({ count, current, onGo }: { count: number; current: number; onGo: (step: number) => void }) {
+  return (
+    <div className="flex items-center gap-3 pb-4">
+      <div className="flex flex-1 gap-1.5" role="presentation">
+        {Array.from({ length: count }, (_, index) => (
+          <button
+            key={index}
+            type="button"
+            aria-label={`Step ${index + 1} of ${count}`}
+            aria-current={index === current ? "step" : undefined}
+            disabled={index > current}
+            onClick={() => onGo(index)}
+            className={cn(
+              "h-1 flex-1 rounded-full transition-colors",
+              index <= current ? "bg-primary" : "bg-muted",
+              index < current && "cursor-pointer",
+            )}
+          />
+        ))}
+      </div>
+      <span className="text-xs text-muted-foreground tabular-nums">
+        Step {current + 1} of {count}
+      </span>
+    </div>
+  );
+}
+
+/** Plain wrappers so the same form works in a page (a card) and in a sheet (no card). */
+function SheetFrame({ children }: { children: React.ReactNode }) {
+  return <div className="flex min-h-0 flex-1 flex-col gap-4">{children}</div>;
 }
 
-function DialogBody({ children }: { children: React.ReactNode }) {
-  return <div className="max-h-[60vh] overflow-y-auto px-1">{children}</div>;
+function SheetBody({ children }: { children: React.ReactNode }) {
+  return <div className="min-h-0 flex-1 overflow-y-auto px-1">{children}</div>;
 }
 
-function DialogFooterRow({ children, className }: { children: React.ReactNode; className?: string }) {
+function SheetFooterRow({ children, className }: { children: React.ReactNode; className?: string }) {
   return <div className={className}>{children}</div>;
 }

package/templates/app/components/dashboard/resource-icon.tsx

@@ -1,85 +1,87 @@
-import {
-  BellIcon,
-  BookIcon,
-  BoxIcon,
-  BriefcaseIcon,
-  Building2Icon,
-  CalendarIcon,
-  ChartBarIcon,
-  ClipboardListIcon,
-  CreditCardIcon,
-  DatabaseIcon,
-  DollarSignIcon,
-  FileTextIcon,
-  FolderIcon,
-  GlobeIcon,
-  HeartIcon,
-  ImageIcon,
-  LayersIcon,
-  MailIcon,
-  MapPinIcon,
-  MessageSquareIcon,
-  PackageIcon,
-  PhoneIcon,
-  ReceiptIcon,
-  SettingsIcon,
-  ShieldAlertIcon,
-  RadioIcon,
-  ShieldIcon,
-  ShoppingCartIcon,
-  StarIcon,
-  TagIcon,
-  TicketIcon,
-  TruckIcon,
-  UserIcon,
-  UsersIcon,
-  WrenchIcon,
-  type LucideIcon,
-} from "lucide-react";
-
-/**
- * Icons a resource descriptor can name (`icon: "users"`). Imported by name so unused
- * ones are tree-shaken; add the lucide icons your app needs.
- */
-export const RESOURCE_ICONS: Record<string, LucideIcon> = {
-  bell: BellIcon,
-  book: BookIcon,
-  box: BoxIcon,
-  briefcase: BriefcaseIcon,
-  building: Building2Icon,
-  calendar: CalendarIcon,
-  chart: ChartBarIcon,
-  clipboard: ClipboardListIcon,
-  "credit-card": CreditCardIcon,
-  database: DatabaseIcon,
-  dollar: DollarSignIcon,
-  file: FileTextIcon,
-  folder: FolderIcon,
-  globe: GlobeIcon,
-  heart: HeartIcon,
-  image: ImageIcon,
-  layers: LayersIcon,
-  mail: MailIcon,
-  "map-pin": MapPinIcon,
-  message: MessageSquareIcon,
-  package: PackageIcon,
-  phone: PhoneIcon,
-  receipt: ReceiptIcon,
-  settings: SettingsIcon,
-  radio: RadioIcon,
-  shield: ShieldIcon,
-  "shield-alert": ShieldAlertIcon,
-  cart: ShoppingCartIcon,
-  star: StarIcon,
-  tag: TagIcon,
-  ticket: TicketIcon,
-  truck: TruckIcon,
-  user: UserIcon,
-  users: UsersIcon,
-  wrench: WrenchIcon,
-};
-
-/** The icon for a resource, falling back to a generic document icon. */
-export function resourceIcon(name: string | undefined): LucideIcon {
-  return (name && RESOURCE_ICONS[name]) || FileTextIcon;
-}
+import {
+  BellIcon,
+  BookIcon,
+  WalletIcon,
+  BoxIcon,
+  BriefcaseIcon,
+  Building2Icon,
+  CalendarIcon,
+  ChartBarIcon,
+  ClipboardListIcon,
+  CreditCardIcon,
+  DatabaseIcon,
+  DollarSignIcon,
+  FileTextIcon,
+  FolderIcon,
+  GlobeIcon,
+  HeartIcon,
+  ImageIcon,
+  LayersIcon,
+  MailIcon,
+  MapPinIcon,
+  MessageSquareIcon,
+  PackageIcon,
+  PhoneIcon,
+  ReceiptIcon,
+  SettingsIcon,
+  ShieldAlertIcon,
+  RadioIcon,
+  ShieldIcon,
+  ShoppingCartIcon,
+  StarIcon,
+  TagIcon,
+  TicketIcon,
+  TruckIcon,
+  UserIcon,
+  UsersIcon,
+  WrenchIcon,
+  type LucideIcon,
+} from "lucide-react";
+
+/**
+ * Icons a resource descriptor can name (`icon: "users"`). Imported by name so unused
+ * ones are tree-shaken; add the lucide icons your app needs.
+ */
+export const RESOURCE_ICONS: Record<string, LucideIcon> = {
+  bell: BellIcon,
+  book: BookIcon,
+  wallet: WalletIcon,
+  box: BoxIcon,
+  briefcase: BriefcaseIcon,
+  building: Building2Icon,
+  calendar: CalendarIcon,
+  chart: ChartBarIcon,
+  clipboard: ClipboardListIcon,
+  "credit-card": CreditCardIcon,
+  database: DatabaseIcon,
+  dollar: DollarSignIcon,
+  file: FileTextIcon,
+  folder: FolderIcon,
+  globe: GlobeIcon,
+  heart: HeartIcon,
+  image: ImageIcon,
+  layers: LayersIcon,
+  mail: MailIcon,
+  "map-pin": MapPinIcon,
+  message: MessageSquareIcon,
+  package: PackageIcon,
+  phone: PhoneIcon,
+  receipt: ReceiptIcon,
+  settings: SettingsIcon,
+  radio: RadioIcon,
+  shield: ShieldIcon,
+  "shield-alert": ShieldAlertIcon,
+  cart: ShoppingCartIcon,
+  star: StarIcon,
+  tag: TagIcon,
+  ticket: TicketIcon,
+  truck: TruckIcon,
+  user: UserIcon,
+  users: UsersIcon,
+  wrench: WrenchIcon,
+};
+
+/** The icon for a resource, falling back to a generic document icon. */
+export function resourceIcon(name: string | undefined): LucideIcon {
+  return (name && RESOURCE_ICONS[name]) || FileTextIcon;
+}

package/templates/app/components/dashboard/resource-stats.tsx

@@ -1,5 +1,5 @@
 import { storedFields, optionLabel, type Resource } from "@flaredev/core";
-import { recentCounts, recordCount, trend, valueCounts } from "@/lib/dashboard";
+import { resourceStats, trend } from "@/lib/dashboard";
 import { resourceIcon } from "./resource-icon";
 import { StatCards, type Stat } from "./stat-card";
 
@@ -11,7 +11,10 @@ import { StatCards, type Stat } from "./stat-card";
  * in practice is the status of the thing — a deal's stage, an invoice's state.
  */
 export async function ResourceStats({ resource }: { resource: Resource }) {
-  const [total, recent] = await Promise.all([recordCount(resource.name), recentCounts(resource.name)]);
+  // The status split is asked for up front so the totals, the trend and the split all
+  // come from the one grouped query rather than three.
+  const statusField = storedFields(resource).find(([, def]) => def.kind === "enum" && def.filterable !== false);
+  const { total, current, previous, values } = await resourceStats(resource.name, statusField?.[0]);
 
   const stats: Stat[] = [
     {
@@ -21,20 +24,18 @@ export async function ResourceStats({ resource }: { resource: Resource }) {
     },
     {
       label: "New this week",
-      value: recent.current,
-      change: trend(recent.current, recent.previous),
-      hint: `${recent.previous.toLocaleString()} the week before`,
+      value: current,
+      change: trend(current, previous),
+      hint: `${previous.toLocaleString()} the week before`,
     },
   ];
 
-  const statusField = storedFields(resource).find(([, def]) => def.kind === "enum" && def.filterable !== false);
   if (statusField && total > 0) {
-    const [key, def] = statusField;
+    const [, def] = statusField;
     if (def.kind === "enum") {
-      const counts = await valueCounts(resource.name, key);
       // Two options at most: a strip of eight cards is a wall, not a summary.
       for (const option of def.options.slice(0, 2)) {
-        const value = counts[option] ?? 0;
+        const value = values[option] ?? 0;
         stats.push({
           label: optionLabel(def, option),
           value,

package/templates/app/components/dashboard/resource-table.tsx

@@ -26,7 +26,7 @@ import type { RelationMeta } from "./fields/field-widget";
 import { ImportDialog } from "./import-dialog";
 import { LocalTime } from "./local-time";
 import { hrefWith, toSearchParams, type SearchParams } from "./query";
-import { NewRecordButton } from "./resource-form-dialog";
+import { NewRecordButton } from "./resource-form-sheet";
 import { ResourceTableToolbar } from "./resource-table-toolbar";
 import { SaveViewButton } from "./save-view-button";
 import { RowActions } from "./row-actions";
@@ -90,7 +90,7 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
     relations[key] = { name: target.name, label: target.label, pluralLabel: target.pluralLabel, slug: target.slug, titleField: target.titleField };
   }
 
-  const modalForms = site.dashboard.forms === "modal";
+  const overlayForms = site.dashboard.forms === "sheet";
   const rowIds = rows.map((row) => String(row.id));
   const exportColumns = [{ key: "id", label: "Id" }, ...fields.filter(([, def]) => def.kind !== "file").map(([key, def]) => ({ key, label: def.label }))];
 
@@ -112,7 +112,7 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
           <ExportButton resourceName={resource.name} pluralLabel={resource.pluralLabel} />
           {permissions.create && <ImportDialog resource={forClient} />}
           {permissions.create &&
-            (modalForms ? (
+            (overlayForms ? (
               <NewRecordButton resource={forClient} relations={relations} listHref={basePath} />
             ) : (
               <Button asChild>
@@ -286,7 +286,7 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                       <RowActions
                         resource={forClient}
                         id={id}
-                        record={modalForms ? row : undefined}
+                        record={overlayForms ? row : undefined}
                         relations={relations}
                         listHref={basePath}
                         editHref={resourcePath(resource, id, "edit")}

package/templates/app/components/dashboard/row-actions.tsx

@@ -26,11 +26,11 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Spinner } from "@/components/ui/spinner";
-import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
+import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
 
 /**
  * Edit and delete for one row. Edit opens a dialog when the row's record came with it
- * (site.dashboard.forms is "modal"), and otherwise goes to the form page.
+ * (site.dashboard.forms is "sheet"), and otherwise goes to the form page.
  */
 export function RowActions({
   resource,
@@ -124,7 +124,7 @@ export function RowActions({
       </DropdownMenu>
 
       {record && canUpdate && (
-        <ResourceFormDialog
+        <ResourceFormSheet
           resource={resource}
           relations={relations}
           listHref={listHref}