ruact 0.0.4 → 0.0.6

data/lib/generators/ruact/scaffold/templates/components/List.tsx.tt

@@ -0,0 +1,338 @@
+"use client";
+
+<% unless typescript? -%>
+// Generated with --javascript: this .jsx file forfeits the FR99 typed server
+// boundary and the FR100 call-site contract (both TS-only). Re-run without
+// --javascript for the typed .tsx variant.
+<% end -%>
+<% if shadcn_missing? -%>
+// ⚠️ GENERATED WITH --skip-shadcn-check — shadcn/ui is not fully set up.
+// The @/components/ui/* imports below will NOT resolve until you install them
+// (the Vite dev server fails the build with an import error — loud by design):
+//   <%= shadcn_banner_add_command %>
+// (If you have not set up shadcn at all, run `npx shadcn@latest init` first.)
+<% end -%>
+// <%= class_name %> list — a shadcn `table` primitive (a styled HTML table) plus a
+// small GENERATED client-side sort. There is NO table-engine dependency: the
+// scaffold stays dep-free (no react-table runtime), matching the dep-free
+// Form and the native date inputs. The collection arrives as a SERVER-RENDERED
+// prop (`posts`); there is no client query for the initial render. A query only
+// enters when the *client* drives the read: the search box calls
+// useQuery(<%= js_search_alias %>, { q }) and swaps in filtered rows as you type.
+// Per-row delete drives a controlled <%= class_name %>DeleteDialog (DELETE
+// /<%= plural_name %>/:id via the destroy<%= class_name %> action); on `{ ok: true }` the row is
+// removed from the displayed rows IN PLACE (no reload, no URL built). Column
+// sorting is CLIENT-ONLY — the dataset is the index payload; server-side
+// sort/pagination is Phase-3 territory.
+//
+// The `@/components/ui/table` primitive (and the Badge/Button/DropdownMenu
+// primitives below) is installed by Story 10.5 (`npx shadcn add table`). A
+// freshly scaffolded app will not resolve these until 10.5 lands; that is
+// expected (the end-to-end live demo is Story 10.7).
+import { useState } from "react";
+import { search as <%= js_search_alias %>, destroy<%= class_name %>, useQuery } from "@/.ruact/server-functions";
+import { <%= class_name %>DeleteDialog } from "./<%= class_name %>DeleteDialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+<% if typescript? -%>
+
+type <%= class_name %>Row = { <%= ts_row_fields %> };
+
+// FR100 — opt-in call-site contract: `posts` is required. The index view passes
+// `<<%= class_name %>List posts={rows} />` (satisfied); a call site that omits it
+// fails at preprocess time, not as a silent `undefined` in the browser.
+export const __ruactContract = {
+  props: { posts: "required" },
+};
+<% end -%>
+
+// Columns whose values are date/datetime strings: the sort compares these by
+// epoch time (`new Date(value).getTime()`) rather than lexically, so they order
+// chronologically. Generated from the model's date/datetime attributes.
+const DATE_KEYS = new Set<% if typescript? %><string><% end %>([<%= scaffold_attributes.select(&:date?).map { |attr| %("#{attr.column_name}") }.join(", ") %>]);
+
+// Generated client-side comparator (no table engine). Sorts a COPY of the rows
+// by the active key + direction: `null`/`undefined` always sort LAST (so a blank
+// cell never jumps to the top, regardless of direction); date columns compare by
+// time, numbers numerically, booleans false-before-true, everything else via a
+// locale-aware string compare. The direction flip is applied AFTER the null
+// handling, never to it.
+function compareRows(
+  a<% if typescript? %>: <%= class_name %>Row<% end %>,
+  b<% if typescript? %>: <%= class_name %>Row<% end %>,
+  sort<% if typescript? %>: { key: string; dir: "asc" | "desc" }<% end %>,
+)<% if typescript? %>: number<% end %> {
+  const av = a[sort.key<% if typescript? %> as keyof <%= class_name %>Row<% end %>];
+  const bv = b[sort.key<% if typescript? %> as keyof <%= class_name %>Row<% end %>];
+  if (av == null && bv == null) return 0;
+  if (av == null) return 1;
+  if (bv == null) return -1;
+
+  let result<% if typescript? %>: number<% end %>;
+  if (DATE_KEYS.has(sort.key)) {
+    result = new Date(String(av)).getTime() - new Date(String(bv)).getTime();
+  } else if (typeof av === "number" && typeof bv === "number") {
+    result = av - bv;
+  } else if (typeof av === "boolean" && typeof bv === "boolean") {
+    result = Number(av) - Number(bv);
+  } else {
+    result = String(av).localeCompare(String(bv));
+  }
+  return sort.dir === "desc" ? -result : result;
+}
+
+// Pull a human-readable message out of the failed-delete result. A thrown
+// RuactActionError (non-2xx) carries the parsed structured-error body, whose
+// `message` the gem shapes per env (the exception message in development, the
+// generic server message in production); a resolved soft-failure may carry a
+// top-level `error`/`message`. Returns undefined when none is present, so the
+// dialog can fall back to its own generic copy.
+function deleteErrorMessage(error<% if typescript? %>: unknown<% end %>)<% if typescript? %>: string | undefined<% end %> {
+  if (error != null && typeof error === "object") {
+    const carrier = error<% if typescript? %> as { body?: unknown; error?: unknown; message?: unknown }<% end %>;
+    if (carrier.body != null && typeof carrier.body === "object") {
+      const message = (carrier.body<% if typescript? %> as { message?: unknown }<% end %>).message;
+      if (typeof message === "string" && message.length > 0) return message;
+    }
+    if (typeof carrier.error === "string" && carrier.error.length > 0) return carrier.error;
+    if (typeof carrier.message === "string" && carrier.message.length > 0) return carrier.message;
+  }
+  return undefined;
+}
+
+// A resolved delete is a SUCCESS only on the server-owned success shapes: the
+// in-list default `{ ok: true }`, or the delete-from-show `$redirect` the
+// accessor already followed (which resolves to `null`). Any other resolved shape
+// (e.g. an explicit `{ ok: false }`) is a non-success the dialog surfaces.
+function deleteSucceeded(result<% if typescript? %>: unknown<% end %>)<% if typescript? %>: boolean<% end %> {
+  if (result === null) return true;
+  return (
+    typeof result === "object" &&
+    (result<% if typescript? %> as { ok?: unknown }<% end %>).ok === true
+  );
+}
+
+// Per-row actions (AC5) — Edit + a Delete TRIGGER that opens the controlled
+// AlertDialog. Each row owns its OWN dialog `open` state (one independent
+// useState), so the dialog opens for exactly one row. `onConfirm` calls
+// destroy<%= class_name %> and, on a server-owned success, asks the List to drop the row
+// in place via `onDeleted`. The same component renders BOTH the inline (≥ md) and
+// the overflow-menu (< md) layouts. The trigger is never unmounted, so Radix
+// returns focus to it on close.
+function RowActions({ record, onDeleted }<% if typescript? %>: {
+  record: <%= class_name %>Row;
+  onDeleted: (id: number) => void;
+}<% end %>) {
+  const [open, setOpen] = useState(false);
+  // The overflow menu is CONTROLLED so the Delete item can close it explicitly
+  // and open the dialog in the same batch — preventing Radix's default
+  // close-autofocus from pulling focus back to the trigger as the dialog mounts.
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  async function onConfirm()<% if typescript? %>: Promise<{ ok: boolean; error?: string }><% end %> {
+    try {
+      const result = await destroy<%= class_name %>({ id: record.id });
+      if (deleteSucceeded(result)) {
+        onDeleted(record.id);
+        setOpen(false);
+        return { ok: true };
+      }
+      // Resolved but not a success shape → keep the dialog open with the message.
+      return { ok: false, error: deleteErrorMessage(result) };
+    } catch (error) {
+      // Failure (non-2xx structured error) → keep the dialog open, message inline.
+      return { ok: false, error: deleteErrorMessage(error) };
+    }
+  }
+
+  return (
+    <div className="flex justify-end">
+      {/* ≥ md (768px): inline actions */}
+      <div className="hidden items-center gap-2 md:flex">
+        <Button variant="ghost" asChild>
+          <a href={`/<%= plural_name %>/${record.id}/edit`}>Edit</a>
+        </Button>
+        <Button variant="ghost" className="text-destructive" onClick={() => setOpen(true)}>
+          Delete
+        </Button>
+      </div>
+      {/* < md: collapse into a … overflow menu so actions never break layout */}
+      <div className="md:hidden">
+        <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" aria-label="Open actions menu">…</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem asChild>
+              <a href={`/<%= plural_name %>/${record.id}/edit`}>Edit</a>
+            </DropdownMenuItem>
+            {/* Close the menu and open the AlertDialog together: preventDefault
+                stops the default close (whose autofocus would fight the dialog),
+                then we close the menu and open the dialog deterministically. */}
+            <DropdownMenuItem
+              className="text-destructive"
+              onSelect={(event) => {
+                event.preventDefault();
+                setMenuOpen(false);
+                setOpen(true);
+              }}
+            >
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <<%= class_name %>DeleteDialog
+        open={open}
+        onOpenChange={setOpen}
+        <%= singular_name %>={record}
+        onConfirm={onConfirm}
+      />
+    </div>
+  );
+}
+
+export function <%= class_name %>List({
+  posts = [],
+  emptyLabel = "No <%= plural_name %> yet — create one.",
+}<% if typescript? %>: { posts?: <%= class_name %>Row[]; emptyLabel?: string }<% end %>) {
+  const [q, setQ] = useState("");
+  const searching = q.trim().length > 0;
+
+  // Ids deleted IN PLACE — a single tombstone list (not a second row cache)
+  // applied to whichever source is displayed, so a delete removes the row
+  // immediately whether it happened on the server-rendered list OR on the live
+  // search results.
+  const [removedIds, setRemovedIds] = useState<% if typescript? %><number[]><% end %>([]);
+
+  // Sort state (AC2) — the active column key + direction, or null when unsorted
+  // (server/insertion order). A new key sorts ascending; clicking the same key
+  // again flips asc↔desc.
+  const [sort, setSort] = useState<% if typescript? %><{ key: string; dir: "asc" | "desc" } | null><% end %>(null);
+
+  // Client-driven read (AC5) — only meaningful while searching. When q is blank
+  // the box is idle and we fall back to the server-rendered rows.
+  const { data: searchData, loading: searchLoading } = useQuery<% if typescript? %><<%= class_name %>Row[]><% end %>(<%= js_search_alias %>, { q: q.trim() });
+
+  const source = searching ? searchData ?? [] : posts;
+  const rows = removedIds.length === 0 ? source : source.filter((row) => !removedIds.includes(row.id));
+  // Always sort a COPY — never mutate the prop/source array.
+  const sortedRows = sort ? [...rows].sort((a, b) => compareRows(a, b, sort)) : rows;
+
+  const onDeleted = (id<% if typescript? %>: number<% end %>) =>
+    setRemovedIds((current) => (current.includes(id) ? current : [...current, id]));
+
+  // Set the sort to a new key (ascending), or flip the direction when the active
+  // key is clicked again.
+  function toggleSort(key<% if typescript? %>: string<% end %>) {
+    setSort((current) =>
+      current && current.key === key
+        ? { key, dir: current.dir === "asc" ? "desc" : "asc" }
+        : { key, dir: "asc" },
+    );
+  }
+
+  return (
+    <section className="mx-auto max-w-4xl px-4 py-8">
+      <div className="mb-4 flex items-center justify-between gap-4">
+        <h1 className="text-2xl font-semibold tracking-tight"><%= human_name.pluralize %></h1>
+        <Button asChild>
+          <a href="/<%= plural_name %>/new">+ New <%= human_name.downcase %></a>
+        </Button>
+      </div>
+
+      <input
+        type="search"
+        value={q}
+        onChange={(e) => setQ(e.target.value)}
+        placeholder="Search <%= plural_name %>…"
+        className="mb-4 w-full rounded-md border px-3 py-2 text-sm"
+      />
+
+      {searching && searchLoading && <p className="text-sm text-muted-foreground">Searching…</p>}
+      {!searching && rows.length === 0 && <p className="text-sm text-muted-foreground">{emptyLabel}</p>}
+      {searching && !searchLoading && rows.length === 0 && (
+        <p className="text-sm text-muted-foreground">No <%= plural_name %> match “{q.trim()}”.</p>
+      )}
+
+      {sortedRows.length > 0 && (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>
+                <Button variant="ghost" onClick={() => toggleSort("id")}>ID</Button>
+              </TableHead>
+<% scaffold_attributes.each do |attr| -%>
+<% if attr.column_kind == :numeric -%>
+              <TableHead>
+                <div className="text-right">
+                  <Button variant="ghost" onClick={() => toggleSort("<%= attr.column_name %>")}>
+                    <%= attr.column_name.humanize %>
+                  </Button>
+                </div>
+              </TableHead>
+<% else -%>
+              <TableHead>
+                <Button variant="ghost" onClick={() => toggleSort("<%= attr.column_name %>")}>
+                  <%= attr.column_name.humanize %>
+                </Button>
+              </TableHead>
+<% end -%>
+<% end -%>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedRows.map((row) => (
+              <TableRow key={row.id}>
+                <TableCell>
+                  <a href={`/<%= plural_name %>/${row.id}`} className="font-medium underline-offset-4 hover:underline">
+                    {row.id}
+                  </a>
+                </TableCell>
+<% scaffold_attributes.each do |attr| -%>
+<% kind = attr.column_kind -%>
+<% if kind == :numeric -%>
+                <TableCell>
+                  <div className="text-right tabular-nums">{String(row.<%= attr.column_name %> ?? "")}</div>
+                </TableCell>
+<% elsif kind == :badge -%>
+                <TableCell>
+                  <Badge variant={row.<%= attr.column_name %> ? "default" : "secondary"}>{row.<%= attr.column_name %> ? "Yes" : "No"}</Badge>
+                </TableCell>
+<% elsif kind == :date -%>
+                <TableCell>
+                  <span>{row.<%= attr.column_name %> ? new Date(String(row.<%= attr.column_name %>)).toLocaleString() : ""}</span>
+                </TableCell>
+<% else -%>
+                <TableCell>
+                  <span>{String(row.<%= attr.column_name %> ?? "")}</span>
+                </TableCell>
+<% end -%>
+<% end -%>
+                <TableCell>
+                  <RowActions record={row} onDeleted={onDeleted} />
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </section>
+  );
+}

data/lib/generators/ruact/scaffold/templates/components/agnostic/DeleteDialog.tsx.tt

@@ -0,0 +1,92 @@
+"use client";
+
+<% unless typescript? -%>
+// Generated with --javascript: this .jsx file forfeits the FR99 typed server
+// boundary and the FR100 call-site contract (both TS-only). Re-run without
+// --javascript for the typed .tsx variant.
+<% end -%>
+// <%= class_name %> delete confirmation — a CONTROLLED, DESIGN-SYSTEM-AGNOSTIC
+// dialog (Story 14.4 / FR103) built on the native HTML <dialog> element — NO
+// shadcn/ui, NO Radix, NO Tailwind. The PARENT owns `open` and provides
+// `onConfirm`; this component owns only its local submit/error state and drives
+// the native modal off the `open` prop (`showModal()`/`close()`). `onConfirm`
+// performs the destroy<%= class_name %> call (DELETE /<%= plural_name %>/:id) and reports `{ ok, error? }`:
+//
+//   - on success the parent closes the dialog (in-list removal of the row, or the
+//     server-driven `$redirect` the runtime follows) — no URL is built here;
+//   - on failure the dialog STAYS OPEN and shows the message inline (the gem's
+//     structured-error shape: the exception message in development, the generic
+//     server message in production).
+//
+// There is no Rails `method=delete` fallback — the destroy<%= class_name %> action is the
+// only path. Cancel closes via `onOpenChange(false)`; Escape fires the native
+// `close` event, which we forward to `onOpenChange(false)` to keep the parent
+// state in sync. (The shadcn AlertDialog styling is the opt-in `--shadcn` path —
+// Story 14.5.)
+import { useEffect, useRef, useState } from "react";
+<% if typescript? -%>
+
+type <%= class_name %>Row = { <%= ts_row_fields %> };
+
+// FR100 — opt-in call-site contract. INERT for this component: it is rendered
+// only from <%= class_name %>List.tsx (JSX), never from an ERB `<Component>` tag,
+// so the 13.5 preprocess validator never runs against it. Retained for uniformity
+// with the List/Form.
+export const __ruactContract = {
+  props: { <%= singular_name %>: "required" },
+};
+<% end -%>
+
+export function <%= class_name %>DeleteDialog({
+  open,
+  onOpenChange,
+  <%= singular_name %>,
+  onConfirm,
+}<% if typescript? %>: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  <%= singular_name %>: <%= class_name %>Row;
+  onConfirm: () => Promise<{ ok: boolean; error?: string }>;
+}<% end %>) {
+  const dialogRef = useRef<% if typescript? %><HTMLDialogElement | null><% end %>(null);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<% if typescript? %><string | null><% end %>(null);
+
+  // Drive the native <dialog> modal state off the controlled `open` prop.
+  useEffect(() => {
+    const node = dialogRef.current;
+    if (!node) return;
+    if (open && !node.open) node.showModal();
+    if (!open && node.open) node.close();
+  }, [open]);
+
+  async function handleConfirm(event<% if typescript? %>: { preventDefault: () => void }<% end %>) {
+    // The PARENT closes the dialog (via onOpenChange) only after a successful
+    // delete; a failure leaves it open with the message.
+    event.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    const res = await onConfirm();
+    setSubmitting(false);
+    if (!res.ok) {
+      setError(res.error ?? "Could not delete this <%= human_name.downcase %>");
+    }
+  }
+
+  return (
+    <dialog ref={dialogRef} onClose={() => onOpenChange(false)}>
+      <h2>Delete “{String(<%= singular_name %>.<%= display_attribute %> ?? "")}”?</h2>
+      <p>This action cannot be undone.</p>
+      {error && <p>{error}</p>}
+      <p>
+        <button type="button" onClick={() => onOpenChange(false)} disabled={submitting}>
+          Cancel
+        </button>
+        {" "}
+        <button type="button" onClick={handleConfirm} disabled={submitting}>
+          {submitting ? "Deleting…" : "Delete"}
+        </button>
+      </p>
+    </dialog>
+  );
+}

data/lib/generators/ruact/scaffold/templates/components/agnostic/Form.tsx.tt

@@ -0,0 +1,174 @@
+"use client";
+
+<% unless typescript? -%>
+// Generated with --javascript: this .jsx file forfeits the FR99 typed server
+// boundary and the FR100 call-site contract (both TS-only). Re-run without
+// --javascript for the typed .tsx variant.
+<% end -%>
+// <%= class_name %> form — shared by `new` (initial == null) and `edit` (initial
+// == the serialized record). DESIGN-SYSTEM-AGNOSTIC (Story 14.4 / FR103): every
+// field renders a plain, native HTML control mapped to its attribute type
+// (input / textarea / checkbox / select), labelled, with the FR98 server error
+// surfaced inline beneath it — NO shadcn/ui, NO Tailwind, browser-default styling.
+// Submits through the v2 action accessors: create<%= class_name %> (POST /<%= plural_name %>) or
+// update<%= class_name %> (PATCH /<%= plural_name %>/:id). On success the controller drives navigation
+// SERVER-SIDE via `redirect_to` (the `$redirect` the runtime follows) — there is
+// no client URL building here. On a validation failure the SAME response carries
+// the FR98 attribute-keyed `errors` map, surfaced inline per field (the client
+// stays on the form). (The richer shadcn controls are the opt-in `--shadcn` path
+// — Story 14.5.)
+//
+// Client-side validation is intentionally NOT here — it is server-only with a
+// full round-trip. The controlled `useState` keeps this dependency-free.
+import { useState<% if typescript? %>, type FormEvent<% end %> } from "react";
+import { create<%= class_name %>, update<%= class_name %> } from "@/.ruact/server-functions";
+<% if typescript? -%>
+
+type <%= class_name %>Row = { <%= ts_row_fields %> };
+
+// FR100 — opt-in call-site contract: `initial` is OPTIONAL (`new` omits it,
+// `edit` passes the serialized record); each `references` field adds an
+// optional `<name>Options` prop the new/edit views pass. A typo'd prop name
+// fails at preprocess time instead of silently arriving as `undefined`.
+export const __ruactContract = {
+  props: <%= form_contract_props %>,
+};
+<% end -%>
+
+export function <%= class_name %>Form({ <%= form_props_params.join(", ") %> }<% if typescript? %>: <%= form_props_type %><% end %>) {
+<% scaffold_attributes.each do |attr| -%>
+<% if attr.boolean? -%>
+  const [<%= attr.js_var %>, <%= attr.js_setter %>] = useState(Boolean(initial?.<%= attr.column_name %> ?? false));
+<% else -%>
+  // String-valued state: native controls bind `string` (numbers + refs arrive on
+  // the row as numbers, so coerce here). The controller re-coerces.
+  const [<%= attr.js_var %>, <%= attr.js_setter %>] = useState(String(initial?.<%= attr.column_name %> ?? ""));
+<% end -%>
+<% end -%>
+  // FR98 — keyed { [attr]: string[] }; `{}` means "no errors" (always present).
+  const [errors, setErrors] = useState<% if typescript? %><Record<string, string[]>><% end %>({});
+  const [saving, setSaving] = useState(false);
+
+  async function handleSubmit(event<% if typescript? %>: FormEvent<% end %>) {
+    event.preventDefault();
+    setSaving(true);
+    setErrors({});
+
+    const payload = {
+<% scaffold_attributes.each do |attr| -%>
+      <%= attr.column_name %>: <%= attr.js_var %>,
+<% end -%>
+    };
+
+    // On success the server returns a `$redirect` and the runtime navigates
+    // away (the code below does not run); on a validation failure we get the
+    // keyed `errors` map back instead.
+    const result = (initial != null
+      ? await update<%= class_name %>({ id: initial.id, ...payload })
+      : await create<%= class_name %>(payload))<% if typescript? %> as { errors?: Record<string, string[]> } | null<% end %>;
+
+    setSaving(false);
+    if (result && result.errors) {
+      setErrors(result.errors);
+    }
+  }
+
+  const errorsFor = (attr<% if typescript? %>: string<% end %>) => errors[attr] ?? [];
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h1>{initial != null ? `Edit <%= human_name %> #${initial.id}` : "New <%= human_name %>"}</h1>
+
+      {errorsFor("base").length > 0 && (
+        <ul>
+          {errorsFor("base").map((message, i) => (
+            <li key={i}>{message}</li>
+          ))}
+        </ul>
+      )}
+<% scaffold_attributes.each do |attr| -%>
+<% if attr.reference? -%>
+
+      <p>
+        <label htmlFor="<%= attr.column_name %>"><%= attr.name.humanize %></label>
+        {/* Eager native <select> of controller-provided options (ivar → `<%= attr.options_prop %>`
+            prop). For a parent set larger than the generator's REFERENCE_OPTIONS_LIMIT,
+            swap this for a server-search combobox backed by a parent-options read
+            query (opt-in follow-up — that query is out of this scaffold's scope
+            since the parent model isn't scaffolded here). */}
+        <select
+          id="<%= attr.column_name %>"
+          value={<%= attr.js_var %>}
+          onChange={(e) => <%= attr.js_setter %>(e.target.value)}
+          disabled={saving}
+        >
+          <option value="">Select <%= attr.name.humanize.downcase %></option>
+          {<%= attr.options_prop %>.map((option) => (
+            <option key={option.id} value={String(option.id)}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        {errorsFor("<%= attr.column_name %>").map((message, i) => (
+          <span key={i}>{message}</span>
+        ))}
+      </p>
+<% elsif attr.control == :checkbox -%>
+
+      <p>
+        <label htmlFor="<%= attr.column_name %>">
+          <input
+            id="<%= attr.column_name %>"
+            type="checkbox"
+            checked={<%= attr.js_var %>}
+            onChange={(e) => <%= attr.js_setter %>(e.target.checked)}
+            disabled={saving}
+          />
+          {" "}<%= attr.column_name.humanize %>
+        </label>
+        {errorsFor("<%= attr.column_name %>").map((message, i) => (
+          <span key={i}>{message}</span>
+        ))}
+      </p>
+<% elsif attr.control == :textarea -%>
+
+      <p>
+        <label htmlFor="<%= attr.column_name %>"><%= attr.column_name.humanize %></label>
+        <textarea
+          id="<%= attr.column_name %>"
+          value={<%= attr.js_var %>}
+          onChange={(e) => <%= attr.js_setter %>(e.target.value)}
+          disabled={saving}
+        />
+        {errorsFor("<%= attr.column_name %>").map((message, i) => (
+          <span key={i}>{message}</span>
+        ))}
+      </p>
+<% else -%>
+
+      <p>
+        <label htmlFor="<%= attr.column_name %>"><%= attr.column_name.humanize %></label>
+        <input
+          id="<%= attr.column_name %>"
+          type="<%= native_input_type(attr) %>"
+          value={<%= attr.js_var %>}
+          onChange={(e) => <%= attr.js_setter %>(e.target.value)}
+          disabled={saving}
+        />
+        {errorsFor("<%= attr.column_name %>").map((message, i) => (
+          <span key={i}>{message}</span>
+        ))}
+      </p>
+<% end -%>
+<% end -%>
+
+      <p>
+        <button type="submit" disabled={saving}>
+          {saving ? "Saving…" : initial != null ? "Update <%= human_name.downcase %>" : "Create <%= human_name.downcase %>"}
+        </button>
+        {" "}
+        <a href={initial != null ? `/<%= plural_name %>/${initial.id}` : "/<%= plural_name %>"}>Cancel</a>
+      </p>
+    </form>
+  );
+}