@flaredev/cli 0.4.0 → 0.5.0

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

@@ -1,61 +1,64 @@
-import { notFound } from "next/navigation";
-import { formatValue, storedFields, type Resource } from "@flaredev/core";
-import { resourcePath, allResources, dashboardStore, requireAccess } from "@/lib/dashboard";
-import type { RelationMeta } from "./fields/field-widget";
-import { PageHeader } from "./page-header";
-import { ResourceForm } from "./resource-form";
-
-/** Server wrapper for create/edit pages: loads the record and relation titles, renders the heading and form. */
-export async function ResourceFormPage({ resource, id }: { resource: Resource; id?: string }) {
-  await requireAccess(resource, id ? "update" : "create");
-  let record: Record<string, unknown> | null = null;
-  if (id) {
-    const result = await dashboardStore(resource.name).get(id);
-    if (!result.ok) notFound();
-    record = result.data;
-  }
-
-  const byName = new Map(allResources().map((r) => [r.name, r]));
-  const relations: Record<string, RelationMeta & { initialTitle?: string }> = {};
-  for (const [key, def] of storedFields(resource)) {
-    if (def.kind !== "belongsTo") continue;
-    const target = byName.get(def.target);
-    if (!target) continue;
-    const value = record?.[key];
-    const titles = typeof value === "string" ? await dashboardStore(target.name).titles([value]) : {};
-    relations[key] = {
-      name: target.name,
-      label: target.label,
-      pluralLabel: target.pluralLabel,
-      slug: target.slug,
-      titleField: target.titleField,
-      initialTitle: typeof value === "string" ? titles[value] : undefined,
-    };
-  }
-
-  const titleDef = resource.fields[resource.titleField];
-  const title =
-    record && titleDef && titleDef.kind !== "hasMany" ? formatValue(titleDef, record[resource.titleField]) : `New ${resource.label.toLowerCase()}`;
-
-  return (
-    <div className="flex flex-col gap-6">
-      <PageHeader
-        title={title}
-        description={record ? `Edit this ${resource.label.toLowerCase()}.` : `Add a ${resource.label.toLowerCase()} to ${resource.pluralLabel.toLowerCase()}.`}
-        crumbs={[
-          { label: "Dashboard", href: "/dashboard" },
-          { label: resource.pluralLabel, href: resourcePath(resource) },
-          { label: record ? "Edit" : "New" },
-        ]}
-      />
-      <ResourceForm
-        resource={resource}
-        mode={record ? "edit" : "create"}
-        id={id}
-        record={record}
-        relations={relations}
-        listHref={resourcePath(resource)}
-      />
-    </div>
-  );
-}
+import { notFound } from "next/navigation";
+import { clientResource, formatValue, storedFields, type Resource } from "@flaredev/core";
+import { resourcePath, allResources, dashboardStore, requireAccess } from "@/lib/dashboard";
+import type { RelationMeta } from "./fields/field-widget";
+import { PageHeader } from "./page-header";
+import { ResourceForm } from "./resource-form";
+
+/** Server wrapper for create/edit pages: loads the record and relation titles, renders the heading and form. */
+export async function ResourceFormPage({ resource, id }: { resource: Resource; id?: string }) {
+  await requireAccess(resource, id ? "update" : "create");
+  // Hooks and computed values are functions, and a function can't be sent to the browser.
+  // This is the same resource without them, for the client components below.
+  const forClient = clientResource(resource);
+  let record: Record<string, unknown> | null = null;
+  if (id) {
+    const result = await dashboardStore(resource.name).get(id);
+    if (!result.ok) notFound();
+    record = result.data;
+  }
+
+  const byName = new Map(allResources().map((r) => [r.name, r]));
+  const relations: Record<string, RelationMeta & { initialTitle?: string }> = {};
+  for (const [key, def] of storedFields(resource)) {
+    if (def.kind !== "belongsTo") continue;
+    const target = byName.get(def.target);
+    if (!target) continue;
+    const value = record?.[key];
+    const titles = typeof value === "string" ? await dashboardStore(target.name).titles([value]) : {};
+    relations[key] = {
+      name: target.name,
+      label: target.label,
+      pluralLabel: target.pluralLabel,
+      slug: target.slug,
+      titleField: target.titleField,
+      initialTitle: typeof value === "string" ? titles[value] : undefined,
+    };
+  }
+
+  const titleDef = resource.fields[resource.titleField];
+  const title =
+    record && titleDef && titleDef.kind !== "hasMany" ? formatValue(titleDef, record[resource.titleField]) : `New ${resource.label.toLowerCase()}`;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title={title}
+        description={record ? `Edit this ${resource.label.toLowerCase()}.` : `Add a ${resource.label.toLowerCase()} to ${resource.pluralLabel.toLowerCase()}.`}
+        crumbs={[
+          { label: "Dashboard", href: "/dashboard" },
+          { label: resource.pluralLabel, href: resourcePath(resource) },
+          { label: record ? "Edit" : "New" },
+        ]}
+      />
+      <ResourceForm
+        resource={forClient}
+        mode={record ? "edit" : "create"}
+        id={id}
+        record={record}
+        relations={relations}
+        listHref={resourcePath(resource)}
+      />
+    </div>
+  );
+}

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>
+      }
+    />
+  );
+}