grit expose form / table — surfacing resources outside the admin

# A form that creates new records
$grit expose form Contact --to apps/web/app/contact-us/page.tsx
# A paginated list of existing records
$grit expose table Contact --to apps/web/app/contacts/page.tsx

grit expose form Contact --to apps/web/app/contact-us/page.tsx --force
└──┬──┘ └──┬──┘ └─┬──┘ └─┬──┘  └────────────────┬───────────────┘ └──┬──┘
   │       │       │      │                      │                   │
   │       │       │      │                      │                   └── Optional. Overwrite an existing
   │       │       │      │                      │                       file at --to. Safety-off; useful
   │       │       │      │                      │                       in CI but ask before using locally.
   │       │       │      │                      │
   │       │       │      │                      └── Destination .tsx. Must end in .tsx. Parent dirs
   │       │       │      │                          are created if missing. Convention: pick a path
   │       │       │      │                          inside apps/web/app/... matching the URL you want.
   │       │       │      │
   │       │       │      └── Required flag. Distinguishes from positional args.
   │       │       │
   │       │       └── Resource name. PascalCase. Must match an existing model at
   │       │           apps/api/internal/models/contact.go (i.e. Contact must be
   │       │           generated already; the page is derived from its struct).
   │       │
   │       └── Subcommand. "form" emits a Create page; "table" emits a List page.
   │
   └── Top-level expose verb. Parent for both form + table.

"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { useCreateContact } from "@/hooks/use-contacts";

export default function ContactFormPage() {
  const [done, setDone] = useState(false);
  const { mutate: create, isPending, error: serverError } = useCreateContact();
  const { register, handleSubmit, reset } = useForm<Record<string, unknown>>();

  const onSubmit = (input: Record<string, unknown>) => {
    create(input, { onSuccess: () => { setDone(true); reset(); } });
  };

  if (done) return <SuccessCard />;

  return (
    <main className="flex min-h-screen items-center justify-center bg-slate-50 p-4">
      <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 ...">
        <label>Name<input {...register("name")} /></label>
        <label>Email<input {...register("email")} /></label>
        <label>Phone<input {...register("phone")} /></label>
        {/* ... */}
        <button type="submit">{isPending ? "Sending…" : "Submit"}</button>
      </form>
    </main>
  );
}

"use client";

import { useState } from "react";
import { useContacts } from "@/hooks/use-contacts";

export default function ContactTablePage() {
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const { data, isLoading } = useContacts({ search, page, pageSize: 20 });

  const rows = (data?.data ?? []) as unknown as Record<string, unknown>[];
  const pages = data?.meta?.pages ?? 1;

  return (
    <main className="mx-auto min-h-screen max-w-5xl bg-slate-50 p-4">
      <header className="flex items-center justify-between">
        <h1>Contacts</h1>
        <input value={search} onChange={(e) => { setSearch(e.target.value); setPage(1); }} />
      </header>

      <table>
        <thead>
          <tr>
            <th>Name</th><th>Email</th><th>Phone</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr key={(row.id as string) ?? i}>
              <td>{String(row.name ?? "")}</td>
              <td>{String(row.email ?? "")}</td>
              <td>{String(row.phone ?? "")}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {/* prev / next pagination */}
    </main>
  );
}

// AUTO-GENERATED by `grit expose form Contact`. Safe to edit — this file
// is not re-emitted by sync. Re-run grit expose form to overwrite.

# Top-level marketing page
--to apps/web/app/contact-us/page.tsx          → /contact-us

# Nested
--to apps/web/app/products/new/page.tsx        → /products/new

# In a route group (no URL impact)
--to apps/web/app/(marketing)/contact/page.tsx → /contact

# Dynamic segment (less common — you'd typically embed in a parent layout instead)
--to apps/web/app/forms/contact/page.tsx       → /forms/contact

✓ Wrote apps/web/app/contact-us/page.tsx

  Next steps:
    cd apps/web && pnpm dev
    open http://localhost:3000/contact-us

$grit expose form Contact \
$  --to apps/web/app/contact-us/page.tsx \
$  --public-share \
$  --token 9CkLh7gJZQrPeNwMo3F8x_iVjA8U2nXt

$grit expose form Contact \
$  --to apps/web/app/contact-us/page.tsx \
$  --public-share
# Then in apps/web/.env.local:
$NEXT_PUBLIC_FORM_TOKEN=9CkLh7gJZ...
# Or in your CI / deploy config:
# staging:    NEXT_PUBLIC_FORM_TOKEN=staging-share-token
# production: NEXT_PUBLIC_FORM_TOKEN=prod-share-token