@flaredev/cli 0.4.1 → 0.5.0

package/templates/app/components/dashboard/fields/field-widget.tsx

@@ -1,186 +1,237 @@
-"use client";
-
-import { normalizeDomain, optionLabel, slugify, type FileField as FileFieldDef, type MultiSelectField as MultiSelectDef, type StoredField } from "@flaredev/core";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { Textarea } from "@/components/ui/textarea";
-import { DateField, DateTimeField } from "./date-field";
-import { CountryField } from "./country-field";
-import { FileField } from "./file-field";
-import { MultiSelectField } from "./multi-select-field";
-import { PhoneField } from "./phone-field";
-import { RelationField } from "./relation-field";
-
-export interface RelationMeta {
-  name: string;
-  label: string;
-  pluralLabel: string;
-  slug: string;
-  titleField: string;
-}
-
-export interface WidgetProps {
-  id: string;
-  name: string;
-  /** Resource name and field key, for upload actions. */
-  resourceName: string;
-  fieldKey: string;
-  field: StoredField & { label: string };
-  value: string | boolean;
-  onChange: (value: string | boolean) => void;
-  invalid: boolean;
-  disabled?: boolean;
-  /** belongsTo: the related resource and the current value's title. */
-  relation?: RelationMeta & { initialTitle?: string };
-}
-
-const NONE = "__none__";
-
-/** The input for a field, chosen from its kind in the descriptor. */
-export function FieldWidget(props: WidgetProps) {
-  const { id, name, field, value, onChange, invalid, disabled, relation, resourceName, fieldKey } = props;
-  const text = typeof value === "string" ? value : "";
-  const common = { id, name, disabled, "aria-invalid": invalid || undefined, placeholder: field.placeholder };
-
-  switch (field.kind) {
-    case "text":
-      return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
-
-    case "int":
-    case "float":
-      return (
-        <Input
-          {...common}
-          type="text"
-          inputMode={field.kind === "int" ? "numeric" : "decimal"}
-          className="tabular-nums"
-          value={text}
-          onChange={(event) => onChange(event.target.value)}
-        />
-      );
-
-    case "boolean":
-      return (
-        <Switch
-          id={id}
-          name={name}
-          disabled={disabled}
-          aria-invalid={invalid || undefined}
-          checked={value === true}
-          onCheckedChange={(checked) => onChange(checked)}
-        />
-      );
-
-    case "enum":
-      if (field.widget === "radio") {
-        return (
-          <RadioGroup id={id} name={name} value={text} onValueChange={onChange} disabled={disabled} aria-invalid={invalid || undefined} className="flex flex-wrap gap-x-5 gap-y-2.5">
-            {field.options.map((option) => (
-              <div key={option} className="flex items-center gap-2">
-                <RadioGroupItem id={`${id}-${option}`} value={option} aria-invalid={invalid || undefined} />
-                <Label htmlFor={`${id}-${option}`} className="font-normal">
-                  {optionLabel(field, option)}
-                </Label>
-              </div>
-            ))}
-          </RadioGroup>
-        );
-      }
-      return (
-        // No selection is `undefined`, so the placeholder shows; "None" clears an optional value.
-        <Select value={text || undefined} onValueChange={(next) => onChange(next === NONE ? "" : next)} disabled={disabled} name={name}>
-          <SelectTrigger id={id} aria-invalid={invalid || undefined} className="w-full">
-            <SelectValue placeholder={field.placeholder ?? `Choose ${field.label.toLowerCase()}`} />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              {!field.required && <SelectItem value={NONE}>None</SelectItem>}
-              {field.options.map((option) => (
-                <SelectItem key={option} value={option}>
-                  {optionLabel(field, option)}
-                </SelectItem>
-              ))}
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      );
-
-    case "multiselect":
-      return (
-        <MultiSelectField id={id} field={field as MultiSelectDef & { label: string }} value={text} onChange={onChange} invalid={invalid} disabled={disabled} />
-      );
-
-    case "date":
-      return (
-        <DateField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
-      );
-
-    case "datetime":
-      return (
-        <DateTimeField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
-      );
-
-    case "belongsTo":
-      return relation ? (
-        <RelationField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} relation={relation} />
-      ) : (
-        <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />
-      );
-
-    case "file":
-      return (
-        <FileField
-          id={id}
-          value={text}
-          onChange={onChange}
-          invalid={invalid}
-          disabled={disabled}
-          field={field as FileFieldDef & { label: string }}
-          resourceName={resourceName}
-          fieldKey={fieldKey}
-        />
-      );
-
-    case "string":
-      switch (field.format) {
-        case "tel":
-          return <PhoneField id={id} name={name} label={field.label} value={text} onChange={onChange} invalid={invalid} disabled={disabled} placeholder={field.placeholder} />;
-        case "country":
-          return <CountryField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />;
-        case "color":
-          return (
-            <div className="flex items-center gap-2">
-              <input
-                type="color"
-                aria-label={`${field.label} picker`}
-                value={/^#[0-9a-f]{6}$/i.test(text) ? text : "#000000"}
-                onChange={(event) => onChange(event.target.value)}
-                disabled={disabled}
-                className="h-9 w-11 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1"
-              />
-              <Input {...common} className="font-mono" placeholder={field.placeholder ?? "#f2541d"} value={text} onChange={(event) => onChange(event.target.value)} />
-            </div>
-          );
-        case "slug":
-          return (
-            <Input {...common} className="font-mono" placeholder={field.placeholder ?? "my-first-post"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(slugify(text))} />
-          );
-        case "domain":
-          return (
-            <Input {...common} inputMode="url" autoCapitalize="none" spellCheck={false} placeholder={field.placeholder ?? "example.com"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(normalizeDomain(text))} />
-          );
-        case "email":
-          return <Input {...common} type="email" autoComplete="email" value={text} onChange={(event) => onChange(event.target.value)} />;
-        case "url":
-          return <Input {...common} type="url" placeholder={field.placeholder ?? "https://"} value={text} onChange={(event) => onChange(event.target.value)} />;
-        default:
-          return <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />;
-      }
-
-    default:
-      return <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />;
-  }
-}
+"use client";
+
+import { normalizeDomain, optionLabel, slugify, type FileField as FileFieldDef, type MultiSelectField as MultiSelectDef, type StoredField } from "@flaredev/core";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { groupDigits, ungroup } from "@/lib/number";
+import { DateField, DateTimeField } from "./date-field";
+import { CountryField } from "./country-field";
+import { FileField } from "./file-field";
+import { MultiSelectField } from "./multi-select-field";
+import { PhoneField } from "./phone-field";
+import { RelationField } from "./relation-field";
+
+export interface RelationMeta {
+  name: string;
+  label: string;
+  pluralLabel: string;
+  slug: string;
+  titleField: string;
+}
+
+export interface WidgetProps {
+  id: string;
+  name: string;
+  /** Resource name and field key, for upload actions. */
+  resourceName: string;
+  fieldKey: string;
+  field: StoredField & { label: string };
+  value: string | boolean;
+  onChange: (value: string | boolean) => void;
+  invalid: boolean;
+  disabled?: boolean;
+  /** belongsTo: the related resource and the current value's title. */
+  relation?: RelationMeta & { initialTitle?: string };
+  /**
+   * A value this field can make up for itself — a SKU, a slug, a reference. Given for
+   * unique codes, where typing one by hand is busywork, and shown as a button beside
+   * the input so whatever it suggests can still be typed over.
+   */
+  suggest?: () => string;
+}
+
+const NONE = "__none__";
+
+/** The input for a field, chosen from its kind in the descriptor. */
+export function FieldWidget(props: WidgetProps) {
+  const { id, name, field, value, onChange, invalid, disabled, relation, resourceName, fieldKey, suggest } = props;
+  const text = typeof value === "string" ? value : "";
+  const common = { id, name, disabled, "aria-invalid": invalid || undefined, placeholder: field.placeholder };
+
+  switch (field.kind) {
+    case "text":
+      return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
+
+    case "int":
+    case "float":
+      // Shown grouped (2,000) and stored plain (2000), so a price can be read at a glance
+      // and nothing downstream has to strip a comma back out.
+      return (
+        <Input
+          {...common}
+          type="text"
+          inputMode={field.kind === "int" ? "numeric" : "decimal"}
+          className="tabular-nums"
+          value={groupDigits(text)}
+          onChange={(event) => onChange(ungroup(event.target.value, field.kind === "float"))}
+        />
+      );
+
+    case "boolean":
+      return (
+        <Switch
+          id={id}
+          name={name}
+          disabled={disabled}
+          aria-invalid={invalid || undefined}
+          checked={value === true}
+          onCheckedChange={(checked) => onChange(checked)}
+        />
+      );
+
+    case "enum":
+      if (field.widget === "radio") {
+        return (
+          <RadioGroup id={id} name={name} value={text} onValueChange={onChange} disabled={disabled} aria-invalid={invalid || undefined} className="flex flex-wrap gap-x-5 gap-y-2.5">
+            {field.options.map((option) => (
+              <div key={option} className="flex items-center gap-2">
+                <RadioGroupItem id={`${id}-${option}`} value={option} aria-invalid={invalid || undefined} />
+                <Label htmlFor={`${id}-${option}`} className="font-normal">
+                  {optionLabel(field, option)}
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        );
+      }
+      return (
+        // No selection is `undefined`, so the placeholder shows; "None" clears an optional value.
+        <Select value={text || undefined} onValueChange={(next) => onChange(next === NONE ? "" : next)} disabled={disabled} name={name}>
+          <SelectTrigger id={id} aria-invalid={invalid || undefined} className="w-full">
+            <SelectValue placeholder={field.placeholder ?? `Choose ${field.label.toLowerCase()}`} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {!field.required && <SelectItem value={NONE}>None</SelectItem>}
+              {field.options.map((option) => (
+                <SelectItem key={option} value={option}>
+                  {optionLabel(field, option)}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+
+    case "multiselect":
+      return (
+        <MultiSelectField id={id} field={field as MultiSelectDef & { label: string }} value={text} onChange={onChange} invalid={invalid} disabled={disabled} />
+      );
+
+    case "date":
+      return (
+        <DateField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
+      );
+
+    case "datetime":
+      return (
+        <DateTimeField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />
+      );
+
+    case "belongsTo":
+      return relation ? (
+        <RelationField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} relation={relation} />
+      ) : (
+        <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />
+      );
+
+    case "file":
+      return (
+        <FileField
+          id={id}
+          value={text}
+          onChange={onChange}
+          invalid={invalid}
+          disabled={disabled}
+          field={field as FileFieldDef & { label: string }}
+          resourceName={resourceName}
+          fieldKey={fieldKey}
+        />
+      );
+
+    case "string":
+      switch (field.format) {
+        case "tel":
+          return <PhoneField id={id} name={name} label={field.label} value={text} onChange={onChange} invalid={invalid} disabled={disabled} placeholder={field.placeholder} />;
+        case "country":
+          return <CountryField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} required={field.required} placeholder={field.placeholder} />;
+        case "color":
+          return (
+            <div className="flex items-center gap-2">
+              <input
+                type="color"
+                aria-label={`${field.label} picker`}
+                value={/^#[0-9a-f]{6}$/i.test(text) ? text : "#000000"}
+                onChange={(event) => onChange(event.target.value)}
+                disabled={disabled}
+                className="h-9 w-11 shrink-0 cursor-pointer rounded-md border border-input bg-transparent p-1"
+              />
+              <Input {...common} className="font-mono" placeholder={field.placeholder ?? "#f2541d"} value={text} onChange={(event) => onChange(event.target.value)} />
+            </div>
+          );
+        case "slug":
+          return (
+            <WithSuggestion suggest={suggest} disabled={disabled} onChange={onChange}>
+              <InputGroupInput {...common} className="font-mono" placeholder={field.placeholder ?? "my-first-post"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(slugify(text))} />
+            </WithSuggestion>
+          );
+        case "domain":
+          return (
+            <Input {...common} inputMode="url" autoCapitalize="none" spellCheck={false} placeholder={field.placeholder ?? "example.com"} value={text} onChange={(event) => onChange(event.target.value)} onBlur={() => text && onChange(normalizeDomain(text))} />
+          );
+        case "email":
+          return <Input {...common} type="email" autoComplete="email" value={text} onChange={(event) => onChange(event.target.value)} />;
+        case "url":
+          return <Input {...common} type="url" placeholder={field.placeholder ?? "https://"} value={text} onChange={(event) => onChange(event.target.value)} />;
+        default:
+          return (
+            <WithSuggestion suggest={suggest} disabled={disabled} onChange={onChange}>
+              <InputGroupInput {...common} value={text} onChange={(event) => onChange(event.target.value)} />
+            </WithSuggestion>
+          );
+      }
+
+    default:
+      return <Input {...common} value={text} onChange={(event) => onChange(event.target.value)} />;
+  }
+}
+
+/**
+ * An input with a "Generate" button, when the form offered one for this field.
+ *
+ * Without a suggestion it stays an ordinary input, so the same branch serves a field
+ * that can make up its own value and one that can't.
+ */
+function WithSuggestion({
+  suggest,
+  disabled,
+  onChange,
+  children,
+}: {
+  suggest?: () => string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+  children: React.ReactElement;
+}) {
+  if (!suggest) {
+    // InputGroupInput outside an InputGroup would lose its border; hand back a plain one.
+    const { className, ...rest } = children.props as { className?: string } & Record<string, unknown>;
+    return <Input {...rest} className={className} />;
+  }
+  return (
+    <InputGroup>
+      {children}
+      <InputGroupAddon align="inline-end">
+        <Button type="button" variant="ghost" size="sm" disabled={disabled} onClick={() => onChange(suggest())}>
+          Generate
+        </Button>
+      </InputGroupAddon>
+    </InputGroup>
+  );
+}

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

@@ -18,7 +18,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
-import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
+import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
 
 interface Props {
   resource: ClientResource;
@@ -29,12 +29,12 @@ interface Props {
   editHref: string;
   canUpdate: boolean;
   canDelete: boolean;
-  /** Whether editing opens a dialog (site.dashboard.forms) or goes to the form page. */
-  modalForms: boolean;
+  /** Whether editing opens a sheet (site.dashboard.forms) or goes to the form page. */
+  overlayForms: boolean;
 }
 
 /** Edit and delete, at the top of a record's own page. Deleting goes back to the list. */
-export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, modalForms }: Props) {
+export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, overlayForms }: Props) {
   const router = useRouter();
   const [editing, setEditing] = useState(false);
   const [confirming, setConfirming] = useState(false);
@@ -57,7 +57,7 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
   return (
     <>
       {canUpdate &&
-        (modalForms ? (
+        (overlayForms ? (
           <Button variant="outline" onClick={() => setEditing(true)}>
             <PencilIcon data-icon="inline-start" />
             Edit
@@ -77,8 +77,8 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
         </Button>
       )}
 
-      {canUpdate && modalForms && (
-        <ResourceFormDialog
+      {canUpdate && overlayForms && (
+        <ResourceFormSheet
           resource={resource}
           relations={relations}
           listHref={listHref}

package/templates/app/components/dashboard/record-detail.tsx

@@ -92,7 +92,7 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
             editHref={resourcePath(resource, id, "edit")}
             canUpdate={permissions.update}
             canDelete={permissions.delete}
-            modalForms={site.dashboard.forms === "modal"}
+            overlayForms={site.dashboard.forms === "sheet"}
           />
         }
       />

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

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { PlusIcon } from "lucide-react";
+import type { ClientResource } from "@flaredev/core";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import type { RelationMeta } from "./fields/field-widget";
+import { ResourceForm } from "./resource-form";
+
+export type FormRelations = Record<string, RelationMeta & { initialTitle?: string }>;
+
+interface Props {
+  resource: ClientResource;
+  relations: FormRelations;
+  listHref: string;
+  mode: "create" | "edit";
+  /** Edit: the record and its id. */
+  id?: string;
+  record?: Record<string, unknown> | null;
+  /** Controlled use (a row menu opens it); otherwise pass `trigger`. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+}
+
+/**
+ * The create/edit form in a sheet, so adding a record doesn't lose the list, its filters
+ * or the place in it.
+ *
+ * A sheet rather than a centred dialog: a form is a column of fields, and a panel down
+ * the side of the screen has room for them without the page underneath jumping about or
+ * the fields being squeezed into a box. Apps that would rather have a page set
+ * `site.dashboard.forms` to "page" (lib/site.ts) and get the same form full width.
+ */
+export function ResourceFormSheet({ resource, relations, listHref, mode, id, record, open, onOpenChange, trigger }: Props) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = open ?? internalOpen;
+  const setOpen = onOpenChange ?? setInternalOpen;
+  const noun = resource.label.toLowerCase();
+
+  return (
+    <Sheet open={isOpen} onOpenChange={setOpen}>
+      {trigger && <SheetTrigger asChild>{trigger}</SheetTrigger>}
+      <SheetContent side="right" className="flex w-full flex-col gap-0 p-0 sm:max-w-xl">
+        <SheetHeader className="border-b">
+          <SheetTitle>{mode === "create" ? `New ${noun}` : `Edit ${noun}`}</SheetTitle>
+          <SheetDescription>{mode === "create" ? "Fill this in and it appears in the list." : "Changes save straight away."}</SheetDescription>
+        </SheetHeader>
+        {/* Remounting on open clears whatever was typed and abandoned last time. */}
+        {isOpen && (
+          <div className="flex min-h-0 flex-1 flex-col p-4">
+            <ResourceForm
+              key={`${mode}-${id ?? "new"}`}
+              resource={resource}
+              mode={mode}
+              id={id}
+              record={record}
+              relations={relations}
+              listHref={listHref}
+              onDone={() => setOpen(false)}
+            />
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+/** The list's "New …" button, with the sheet it opens. */
+export function NewRecordButton({ resource, relations, listHref }: { resource: ClientResource; relations: FormRelations; listHref: string }) {
+  return (
+    <ResourceFormSheet
+      resource={resource}
+      relations={relations}
+      listHref={listHref}
+      mode="create"
+      trigger={
+        <Button>
+          <PlusIcon data-icon="inline-start" />
+          New {resource.label.toLowerCase()}
+        </Button>
+      }
+    />
+  );
+}