terrazzo 0.6.0 → 0.7.0

data/lib/generators/terrazzo/views/templates/components/ResourceTable.jsx

@@ -0,0 +1,172 @@
+import React, { useContext, useState } from "react";
+import { NavigationContext } from "@thoughtbot/superglue";
+
+import { SortableHeader as DefaultSortableHeader } from "./SortableHeader";
+import { CollectionItemActions as DefaultCollectionItemActions } from "./CollectionItemActions";
+import { CollectionToolbarActions as DefaultCollectionToolbarActions } from "./CollectionToolbarActions";
+import { getComponent, cn } from "terrazzo";
+import { FieldRenderer } from "../fields";
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "./ui";
+
+export function ResourceTable({ headers = [], rows = [], emptyState, showActions = true, bulkActions = [] }) {
+  const { visit } = useContext(NavigationContext);
+  const SortableHeader = getComponent("SortableHeader") || DefaultSortableHeader;
+  const CollectionItemActions = getComponent("CollectionItemActions") || DefaultCollectionItemActions;
+  const CollectionToolbarActions = getComponent("CollectionToolbarActions") || DefaultCollectionToolbarActions;
+  const safeHeaders = Array.isArray(headers) ? headers : [];
+  const safeRows = Array.isArray(rows) ? rows : [];
+  const safeBulkActions = Array.isArray(bulkActions) ? bulkActions : [];
+  const selectable = safeBulkActions.length > 0 && safeRows.length > 0;
+  const rowIds = safeRows.map((row) => String(row.id));
+  const [selectedIds, setSelectedIds] = useState(() => new Set());
+  const selectedRowIds = rowIds.filter((id) => selectedIds.has(id));
+  const selectedCount = selectedRowIds.length;
+  const allSelected = selectable && selectedCount === rowIds.length;
+  const someSelected = selectedCount > 0 && !allSelected;
+  const columnCount = safeHeaders.length + (showActions ? 1 : 0) + (selectable ? 1 : 0);
+
+  const handleRowClick = (e, showPath) => {
+    if (!showPath) return;
+    if (e.target.closest("a, button, form, input, label")) return;
+    if (window.getSelection().toString()) return;
+    visit(showPath, {});
+  };
+
+  const toggleRow = (id, checked) => {
+    setSelectedIds((current) => {
+      const next = new Set(current);
+      if (checked) {
+        next.add(id);
+      } else {
+        next.delete(id);
+      }
+      return next;
+    });
+  };
+
+  const toggleAllRows = (checked) => {
+    setSelectedIds((current) => {
+      const next = new Set(current);
+      rowIds.forEach((id) => {
+        if (checked) {
+          next.add(id);
+        } else {
+          next.delete(id);
+        }
+      });
+      return next;
+    });
+  };
+
+  return (
+    <div className="rounded-md border">
+      {selectable && (
+        <div className="flex flex-col gap-2 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-sm text-muted-foreground">
+            {selectedCount} {selectedCount === 1 ? "row" : "rows"} selected
+          </p>
+          <div className="flex flex-wrap gap-2">
+            <CollectionToolbarActions
+              actions={safeBulkActions}
+              selectedIds={selectedRowIds}
+              disabled={selectedCount === 0}
+            />
+          </div>
+        </div>
+      )}
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {selectable && (
+              <TableHead className="w-10">
+                <input
+                  type="checkbox"
+                  aria-label="Select all rows"
+                  checked={allSelected}
+                  ref={(element) => {
+                    if (element) element.indeterminate = someSelected;
+                  }}
+                  onChange={(event) => toggleAllRows(event.target.checked)}
+                  className="h-4 w-4 rounded border"
+                />
+              </TableHead>
+            )}
+            {safeHeaders.map((header) => (
+              <SortableHeader key={header.attribute} {...header} />
+            ))}
+            {showActions && (
+              <TableHead className="w-10">
+                <span className="sr-only">Actions</span>
+              </TableHead>
+            )}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {safeRows.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={columnCount} className="h-32 text-center">
+                <div className="mx-auto flex max-w-sm flex-col items-center gap-1">
+                  <p className="text-sm font-medium">{emptyState?.title ?? "No records found"}</p>
+                  {emptyState?.description && (
+                    <p className="text-sm text-muted-foreground">{emptyState.description}</p>
+                  )}
+                </div>
+              </TableCell>
+            </TableRow>
+          ) : safeRows.map((row) => (
+            <TableRow
+              key={row.id}
+              className={cn(
+                row.showPath && "cursor-pointer",
+                row.rowOptions?.className || row.rowOptions?.class_name
+              )}
+              onClick={(e) => handleRowClick(e, row.showPath)}
+            >
+              {selectable && (
+                <TableCell>
+                  <input
+                    type="checkbox"
+                    aria-label={`Select row ${row.id}`}
+                    checked={selectedIds.has(String(row.id))}
+                    onChange={(event) => toggleRow(String(row.id), event.target.checked)}
+                    className="h-4 w-4 rounded border"
+                  />
+                </TableCell>
+              )}
+              {(Array.isArray(row.cells) ? row.cells : []).map((cell) => {
+                const cellClassName = cell.cellOptions?.className || cell.cellOptions?.class_name;
+                return (
+                  <TableCell key={cell.attribute} className={cellClassName}>
+                    {cell.showPath ? (
+                      <a
+                        href={cell.showPath}
+                        data-sg-visit
+                        className="hover:underline"
+                      >
+                        <FieldRenderer mode="index" {...cell} />
+                      </a>
+                    ) : (
+                      <FieldRenderer mode="index" {...cell} />
+                    )}
+                  </TableCell>
+                );
+              })}
+              {showActions && (
+                <TableCell>
+                  <CollectionItemActions actions={row.collectionItemActions} />
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

data/lib/generators/terrazzo/views/templates/components/SearchBar.jsx

@@ -1,20 +1,28 @@
 import React, { useRef, useContext } from "react";
 import { NavigationContext } from "@thoughtbot/superglue";
 
-import { Input } from "terrazzo/ui";
+import { Input } from "./ui";
 import { Search } from "lucide-react";
 
-export function SearchBar({ searchTerm, searchPath }) {
+export function SearchBar({ searchTerm, searchPath, perPage }) {
   const { visit } = useContext(NavigationContext);
   const inputRef = useRef(null);
 
   const handleSubmit = (e) => {
     e.preventDefault();
     const search = inputRef.current?.value ?? "";
-    const params = new URLSearchParams();
-    params.set("search", search);
-    const url = `${searchPath}?${params.toString()}`;
-    visit(url, {});
+    const url = new URL(window.location.href);
+    url.pathname = searchPath;
+    url.searchParams.delete("_page");
+    if (perPage != null) url.searchParams.set("per_page", String(perPage));
+
+    if (search.trim()) {
+      url.searchParams.set("search", search);
+    } else {
+      url.searchParams.delete("search");
+    }
+
+    visit(url.pathname + url.search, {});
   };
 
   return (

data/lib/generators/terrazzo/views/templates/components/SortableHeader.jsx

@@ -1,18 +1,20 @@
 import React from "react";
 import { ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react";
 
-import { TableHead } from "terrazzo/ui";
+import { TableHead } from "./ui";
+
+export function SortableHeader({ label, sortable, sortUrl, sortDirection, headerOptions }) {
+  const headerClassName = headerOptions?.className || headerOptions?.class_name;
 
-export function SortableHeader({ label, sortable, sortUrl, sortDirection }) {
   if (!sortable) {
-    return <TableHead>{label}</TableHead>;
+    return <TableHead className={headerClassName}>{label}</TableHead>;
   }
 
   return (
-    <TableHead>
+    <TableHead className={headerClassName}>
       <a
         href={sortUrl}
-        data-sg-remote
+        data-sg-visit
         className="inline-flex items-center gap-1 hover:text-foreground">
 
         {label}

data/lib/generators/terrazzo/views/templates/components/app-sidebar.jsx

@@ -11,7 +11,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "terrazzo/ui";
+} from "./ui";
 
 export function AppSidebar({
   navigation,

data/lib/generators/terrazzo/views/templates/components/site-header.jsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Separator } from "terrazzo/ui";
-import { SidebarTrigger } from "terrazzo/ui";
+import { Separator } from "./ui";
+import { SidebarTrigger } from "./ui";
 
 export function SiteHeader({ title, actions }) {
   return (

data/lib/generators/terrazzo/views/templates/fields/asset/FormField.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { Label, Input } from "../../components/ui";
+
+export function FormField({ value, label, input, required }) {
+  return (
+    <div className="space-y-2">
+      {label && <Label htmlFor={input?.id}>{label}{required && <span> *</span>}</Label>}
+      {value?.filename && (
+        <p className="text-sm text-muted-foreground">Current: {value.filename}</p>
+      )}
+      <Input type="file" {...input} />
+    </div>
+  );
+}

data/lib/generators/terrazzo/views/templates/fields/asset/IndexField.jsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export function IndexField({ value }) {
+  return <span className="text-sm">{value ?? "\u2014"}</span>;
+}

data/lib/generators/terrazzo/views/templates/fields/asset/ShowField.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+function formatBytes(bytes) {
+  if (bytes == null || bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
+}
+
+export function ShowField({ value }) {
+  if (!value) return <span className="text-muted-foreground">No file</span>;
+  return <span>{value.filename} ({formatBytes(value.byteSize)})</span>;
+}

data/lib/generators/terrazzo/views/templates/fields/belongs_to/FormField.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Label } from "terrazzo/ui";
+import { Label } from "../../components/ui";
 
 export function FormField({ value, label, input, options, required }) {
   const resourceOptions = options?.resourceOptions ?? [];

data/lib/generators/terrazzo/views/templates/fields/boolean/FormField.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Label } from "terrazzo/ui";
+import { Label } from "../../components/ui";
 
 export function FormField({ value, label, input, required }) {
   return (

data/lib/generators/terrazzo/views/templates/fields/boolean/IndexField.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Badge } from "terrazzo/ui";
+import { Badge } from "../../components/ui";
 
 export function IndexField({ value }) {
   if (value == null) return <span className="text-muted-foreground">-</span>;

data/lib/generators/terrazzo/views/templates/fields/has_many/FormField.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useCallback } from "react";
 import { X, Check } from "lucide-react";
 
-import { Label } from "terrazzo/ui";
-import { Badge } from "terrazzo/ui";
-import { Popover, PopoverTrigger, PopoverContent } from "terrazzo/ui";
+import { Label } from "../../components/ui";
+import { Badge } from "../../components/ui";
+import { Popover, PopoverTrigger, PopoverContent } from "../../components/ui";
 import { cn } from "terrazzo";
 
 export function FormField({ value, label, input, options, required }) {

data/lib/generators/terrazzo/views/templates/fields/has_many/IndexField.jsx

@@ -1,8 +1,9 @@
 import React from "react";
 
-import { Badge } from "terrazzo/ui";
+import { Badge } from "../../components/ui";
 
 export function IndexField({ value }) {
-  const count = typeof value === "number" ? value : 0;
-  return <Badge variant="secondary">{count}</Badge>;
+  const count = value?.count ?? 0;
+  const label = value?.label ?? "";
+  return <Badge variant="secondary">{count} {label}</Badge>;
 }

data/lib/generators/terrazzo/views/templates/fields/has_many/ShowField.jsx

@@ -1,25 +1,30 @@
-import React, { useState } from "react";
+import React from "react";
 
-import { ResourceTable } from "terrazzo/components";
-import { Badge } from "terrazzo/ui";
-import { Button } from "terrazzo/ui";
+import { ResourceTable, HasManyPagination } from "../../components";
+import { Badge } from "../../components/ui";
 
-export function ShowField({ value, hasManyRowExtras, options }) {
+export function ShowField({ value, hasManyRowExtras, paginationPaths, options }) {
   if (!value) return <span className="text-muted-foreground">None</span>;
 
-  const { rows, headers, total, initialLimit, items } = value;
-  const [expanded, setExpanded] = useState(false);
+  const { rows, headers, items, total, currentPage, totalPages } = value;
+
+  const pagination = (
+    <HasManyPagination
+      currentPage={currentPage}
+      totalPages={totalPages}
+      total={total}
+      nextPagePath={paginationPaths?.nextPagePath}
+      prevPagePath={paginationPaths?.prevPagePath}
+    />
+  );
 
   // Table mode: collection_attributes specified
   if (headers && rows) {
-    if (rows.length === 0) {
+    if (rows.length === 0 && total === 0) {
       return <span className="text-muted-foreground">None</span>;
     }
 
-    const hasMore = initialLimit && initialLimit > 0 && total > initialLimit;
-    const visibleRows = expanded || !hasMore ? rows : rows.slice(0, initialLimit);
-
-    const enrichedRows = visibleRows.map((row) => {
+    const enrichedRows = rows.map((row) => {
       const extras = hasManyRowExtras?.[String(row.id)] || {};
       return {
         ...row,
@@ -31,31 +36,20 @@ export function ShowField({ value, hasManyRowExtras, options }) {
     return (
       <div>
         <ResourceTable headers={headers} rows={enrichedRows} showActions={options?.renderActions !== false} />
-        {hasMore && (
-          <Button
-            variant="link"
-            size="sm"
-            className="mt-2 px-0"
-            onClick={() => setExpanded(!expanded)}>
-            {expanded ? "Show less" : `Show ${total - initialLimit} more`}
-          </Button>
-        )}
+        {pagination}
       </div>
     );
   }
 
   // Simple list mode (no collection_attributes)
-  if (!items || items.length === 0) {
+  if ((!items || items.length === 0) && total === 0) {
     return <span className="text-muted-foreground">None</span>;
   }
 
-  const hasMore = initialLimit && initialLimit > 0 && total > initialLimit;
-  const visibleItems = expanded || !hasMore ? items : items.slice(0, initialLimit);
-
   return (
     <div>
       <div className="flex flex-wrap items-center gap-1.5">
-        {visibleItems.map((item) => {
+        {(items || []).map((item) => {
           const showPath = hasManyRowExtras?.[String(item.id)]?.showPath;
           return showPath ? (
             <a key={item.id} href={showPath} data-sg-visit>
@@ -65,16 +59,8 @@ export function ShowField({ value, hasManyRowExtras, options }) {
             <Badge key={item.id} variant="secondary">{item.display}</Badge>
           );
         })}
-        {hasMore && (
-          <Button
-            variant="link"
-            size="sm"
-            className="px-0"
-            onClick={() => setExpanded(!expanded)}>
-            {expanded ? "Show less" : `Show ${total - initialLimit} more`}
-          </Button>
-        )}
       </div>
+      {pagination}
     </div>
   );
 }

data/lib/generators/terrazzo/views/templates/fields/has_one/FormField.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Label } from "terrazzo/ui";
+import { Label } from "../../components/ui";
 
 export function FormField({ value, label, input, options, required }) {
   const resourceOptions = options?.resourceOptions ?? [];

data/lib/generators/terrazzo/views/templates/fields/hstore/FormField.jsx

@@ -1,10 +1,10 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef } from "react";
 
-import { Input } from "terrazzo/ui";
-import { Button } from "terrazzo/ui";
-import { Label } from "terrazzo/ui";
+import { Input } from "../../components/ui";
+import { Button } from "../../components/ui";
+import { Label } from "../../components/ui";
 
-export function FormField({ value, label, input, options, required }) {
+export function FormField({ value, label, input, required }) {
   const initialPairs = () => {
     if (value && typeof value === "object" && Object.keys(value).length > 0) {
       return Object.entries(value).map(([k, v], i) => ({ id: i, key: k, value: v ?? "" }));

data/lib/generators/terrazzo/views/templates/fields/hstore/IndexField.jsx

@@ -1,7 +1,5 @@
 import React from "react";
 
-import { Badge } from "terrazzo/ui";
-
 export function IndexField({ value }) {
   if (value == null || value === "") {
     return <span className="text-muted-foreground">-</span>;

data/lib/generators/terrazzo/views/templates/fields/hstore/ShowField.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Badge } from "terrazzo/ui";
+import { Badge } from "../../components/ui";
 
 export function ShowField({ value }) {
   if (value == null || Object.keys(value).length === 0) {

data/lib/generators/terrazzo/views/templates/fields/number/IndexField.jsx

@@ -5,5 +5,5 @@ export function IndexField({ value, options }) {
   const suffix = options?.suffix ?? "";
   const decimals = options?.decimals;
   const formatted = decimals != null && value != null ? Number(value).toFixed(decimals) : String(value ?? "");
-  return <span className="text-sm tabular-nums">{prefix}{formatted}{suffix}</span>;
+  return <span className="text-sm tabular-nums">{prefix}{formatted}{suffix && ` ${suffix}`}</span>;
 }

data/lib/generators/terrazzo/views/templates/fields/number/ShowField.jsx

@@ -5,5 +5,5 @@ export function ShowField({ value, options }) {
   const suffix = options?.suffix ?? "";
   const decimals = options?.decimals;
   const formatted = decimals != null && value != null ? Number(value).toFixed(decimals) : String(value ?? "");
-  return <span className="tabular-nums">{prefix}{formatted}{suffix}</span>;
+  return <span className="tabular-nums">{prefix}{formatted}{suffix && ` ${suffix}`}</span>;
 }

data/lib/generators/terrazzo/views/templates/fields/polymorphic/FormField.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { Label } from "terrazzo/ui";
+import { Label } from "../../components/ui";
 
 export function FormField({ value, label, input, options, required }) {
   const groupedOptions = options?.groupedOptions ?? {};
@@ -13,7 +13,8 @@ export function FormField({ value, label, input, options, required }) {
 
   const filteredItems = selectedType ? groupedOptions[selectedType] ?? [] : [];
 
-  const { typeName: _typeName, ...idInputProps } = inputProps ?? {};
+  const idInputProps = { ...(inputProps ?? {}) };
+  delete idInputProps.typeName;
 
   return (
     <div className="space-y-2">

data/lib/generators/terrazzo/views/templates/fields/rich_text/FormField.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { Textarea } from "terrazzo/ui";
-import { Label } from "terrazzo/ui";
+import { Textarea } from "../../components/ui";
+import { Label } from "../../components/ui";
 
 export function FormField({ value, label, input, required }) {
   return (

data/lib/generators/terrazzo/views/templates/fields/select/FormField.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Label } from "terrazzo/ui";
+import { Label } from "../../components/ui";
 
 export function FormField({ value, label, input, options, required }) {
   const selectableOptions = options?.selectableOptions ?? [];

data/lib/generators/terrazzo/views/templates/fields/select/IndexField.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { Badge } from "terrazzo/ui";
+import { Badge } from "../../components/ui";
 
 export function IndexField({ value }) {
   if (value == null) return <span className="text-muted-foreground">-</span>;

data/lib/generators/terrazzo/views/templates/fields/shared/TextInputFormField.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { Input } from "terrazzo/ui";
-import { Label } from "terrazzo/ui";
+import { Input } from "../../components/ui";
+import { Label } from "../../components/ui";
 
 export function TextInputFormField({ type = "text", value, label, input, required, defaultValue, ...inputProps }) {
   const resolvedDefault = defaultValue !== undefined ? defaultValue : String(value ?? "");

data/lib/generators/terrazzo/views/templates/fields/text/FormField.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import { Textarea } from "terrazzo/ui";
-import { Label } from "terrazzo/ui";
+import { Textarea } from "../../components/ui";
+import { Label } from "../../components/ui";
 
 export function FormField({ value, label, input, required }) {
   return (

data/lib/generators/terrazzo/views/templates/pages/_collection.jsx

@@ -1,11 +1,13 @@
 import React from "react";
 
-import { ResourceTable } from "terrazzo/components";
+import { ResourceTable } from "../components";
+
+export function AdminCollection({ table = {}, emptyState, bulkActions = [] }) {
+  const { headers = [], rows = [] } = table || {};
 
-export function AdminCollection({ table }) {
   return (
     <div className="overflow-x-auto">
-      <ResourceTable headers={table.headers} rows={table.rows} />
+      <ResourceTable headers={headers} rows={rows} emptyState={emptyState} bulkActions={bulkActions} />
     </div>
   );
 }