terrazzo 0.1.0

data/lib/generators/terrazzo/views/templates/components/ui/table.jsx

@@ -0,0 +1,83 @@
+import * as React from "react"
+
+import { cn } from "terrazzo"
+
+const Table = React.forwardRef(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props} />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props} />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props} />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props} />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props} />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props} />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props} />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

data/lib/generators/terrazzo/views/templates/components/ui/textarea.jsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "terrazzo"
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props} />
+  );
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

data/lib/generators/terrazzo/views/templates/components/ui/tooltip.jsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "terrazzo"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+      className
+    )}
+    {...props} />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

data/lib/generators/terrazzo/views/templates/fields/FieldRenderer.jsx

@@ -0,0 +1,103 @@
+import React from "react";
+
+import { IndexField as StringIndex } from "./string/IndexField";
+import { ShowField as StringShow } from "./string/ShowField";
+import { FormField as StringForm } from "./string/FormField";
+
+import { IndexField as TextIndex } from "./text/IndexField";
+import { ShowField as TextShow } from "./text/ShowField";
+import { FormField as TextForm } from "./text/FormField";
+
+import { IndexField as NumberIndex } from "./number/IndexField";
+import { ShowField as NumberShow } from "./number/ShowField";
+import { FormField as NumberForm } from "./number/FormField";
+
+import { IndexField as BooleanIndex } from "./boolean/IndexField";
+import { ShowField as BooleanShow } from "./boolean/ShowField";
+import { FormField as BooleanForm } from "./boolean/FormField";
+
+import { IndexField as DateIndex } from "./date/IndexField";
+import { ShowField as DateShow } from "./date/ShowField";
+import { FormField as DateForm } from "./date/FormField";
+
+import { IndexField as DateTimeIndex } from "./date_time/IndexField";
+import { ShowField as DateTimeShow } from "./date_time/ShowField";
+import { FormField as DateTimeForm } from "./date_time/FormField";
+
+import { IndexField as TimeIndex } from "./time/IndexField";
+import { ShowField as TimeShow } from "./time/ShowField";
+import { FormField as TimeForm } from "./time/FormField";
+
+import { IndexField as EmailIndex } from "./email/IndexField";
+import { ShowField as EmailShow } from "./email/ShowField";
+import { FormField as EmailForm } from "./email/FormField";
+
+import { IndexField as UrlIndex } from "./url/IndexField";
+import { ShowField as UrlShow } from "./url/ShowField";
+import { FormField as UrlForm } from "./url/FormField";
+
+import { IndexField as PasswordIndex } from "./password/IndexField";
+import { ShowField as PasswordShow } from "./password/ShowField";
+import { FormField as PasswordForm } from "./password/FormField";
+
+import { IndexField as SelectIndex } from "./select/IndexField";
+import { ShowField as SelectShow } from "./select/ShowField";
+import { FormField as SelectForm } from "./select/FormField";
+
+import { IndexField as HstoreIndex } from "./hstore/IndexField";
+import { ShowField as HstoreShow } from "./hstore/ShowField";
+import { FormField as HstoreForm } from "./hstore/FormField";
+
+import { IndexField as RichTextIndex } from "./rich_text/IndexField";
+import { ShowField as RichTextShow } from "./rich_text/ShowField";
+import { FormField as RichTextForm } from "./rich_text/FormField";
+
+import { IndexField as BelongsToIndex } from "./belongs_to/IndexField";
+import { ShowField as BelongsToShow } from "./belongs_to/ShowField";
+import { FormField as BelongsToForm } from "./belongs_to/FormField";
+
+import { IndexField as HasManyIndex } from "./has_many/IndexField";
+import { ShowField as HasManyShow } from "./has_many/ShowField";
+import { FormField as HasManyForm } from "./has_many/FormField";
+
+import { IndexField as HasOneIndex } from "./has_one/IndexField";
+import { ShowField as HasOneShow } from "./has_one/ShowField";
+import { FormField as HasOneForm } from "./has_one/FormField";
+
+import { IndexField as PolymorphicIndex } from "./polymorphic/IndexField";
+import { ShowField as PolymorphicShow } from "./polymorphic/ShowField";
+import { FormField as PolymorphicForm } from "./polymorphic/FormField";
+
+const fieldMap = {
+  string: { index: StringIndex, show: StringShow, form: StringForm },
+  text: { index: TextIndex, show: TextShow, form: TextForm },
+  number: { index: NumberIndex, show: NumberShow, form: NumberForm },
+  boolean: { index: BooleanIndex, show: BooleanShow, form: BooleanForm },
+  date: { index: DateIndex, show: DateShow, form: DateForm },
+  date_time: { index: DateTimeIndex, show: DateTimeShow, form: DateTimeForm },
+  time: { index: TimeIndex, show: TimeShow, form: TimeForm },
+  email: { index: EmailIndex, show: EmailShow, form: EmailForm },
+  url: { index: UrlIndex, show: UrlShow, form: UrlForm },
+  password: { index: PasswordIndex, show: PasswordShow, form: PasswordForm },
+  select: { index: SelectIndex, show: SelectShow, form: SelectForm },
+  hstore: { index: HstoreIndex, show: HstoreShow, form: HstoreForm },
+  rich_text: { index: RichTextIndex, show: RichTextShow, form: RichTextForm },
+  belongs_to: { index: BelongsToIndex, show: BelongsToShow, form: BelongsToForm },
+  has_many: { index: HasManyIndex, show: HasManyShow, form: HasManyForm },
+  has_one: { index: HasOneIndex, show: HasOneShow, form: HasOneForm },
+  polymorphic: { index: PolymorphicIndex, show: PolymorphicShow, form: PolymorphicForm }
+};
+
+// Allow consumers to register custom field components
+export function registerFieldType(
+fieldType,
+components)
+{
+  fieldMap[fieldType] = { ...fieldMap[fieldType], ...components };
+}
+
+export function FieldRenderer({ mode, fieldType, ...rest }) {
+  const Component = fieldMap[fieldType]?.[mode];
+  if (!Component) return <span>{String(rest.value ?? "")}</span>;
+  return <Component {...rest} />;
+}

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

@@ -0,0 +1,29 @@
+import React from "react";
+
+import { Label } from "../../components/ui/label";
+
+export function FormField({ value, label, input, options, required }) {
+  const resourceOptions = options?.resourceOptions ?? [];
+
+  return (
+    <div className="space-y-2">
+      {label &&
+      <Label htmlFor={input?.id}>
+          {label}{required && <span className="text-destructive"> *</span>}
+        </Label>
+      }
+      <select
+        defaultValue={value != null ? String(value) : ""}
+        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        {...input}>
+
+        <option value="">Select...</option>
+        {resourceOptions.map(([display, id]) =>
+        <option key={id} value={id}>
+            {display}
+          </option>
+        )}
+      </select>
+    </div>);
+
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+export function IndexField({ value }) {
+  const assoc = value;
+  if (!assoc) return <span className="text-muted-foreground">-</span>;
+  return <span className="text-sm">{assoc.display}</span>;
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+export function ShowField({ value }) {
+  const assoc = value;
+  if (!assoc) return <span className="text-muted-foreground">-</span>;
+  return <span>{assoc.display}</span>;
+}

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

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { Label } from "../../components/ui/label";
+
+export function FormField({ value, label, input, required }) {
+  return (
+    <div className="flex items-center space-x-2">
+      <input
+        type="checkbox"
+        defaultChecked={!!value}
+        className="h-4 w-4 rounded border-gray-300"
+        {...input} />
+
+      {label &&
+      <Label htmlFor={input?.id}>
+          {label}{required && <span className="text-destructive"> *</span>}
+        </Label>
+      }
+    </div>);
+
+}

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

@@ -0,0 +1,12 @@
+import React from "react";
+
+import { Badge } from "../../components/ui/badge";
+
+export function IndexField({ value }) {
+  if (value == null) return <span className="text-muted-foreground">-</span>;
+  return (
+    <Badge variant={value ? "default" : "secondary"}>
+      {value ? "Yes" : "No"}
+    </Badge>);
+
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+
+export function ShowField({ value }) {
+  if (value == null) return <span className="text-muted-foreground">-</span>;
+  return <span>{value ? "Yes" : "No"}</span>;
+}

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

@@ -0,0 +1,8 @@
+import React from "react";
+
+import { TextInputFormField } from "../shared/TextInputFormField";
+
+export function FormField({ value, ...props }) {
+  const defaultValue = value ? String(value).split("T")[0] : "";
+  return <TextInputFormField type="date" defaultValue={defaultValue} {...props} />;
+}

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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { formatDate } from "terrazzo";
+
+export function ShowField({ value }) {
+  return <span>{formatDate(value)}</span>;
+}

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

@@ -0,0 +1,8 @@
+import React from "react";
+
+import { TextInputFormField } from "../shared/TextInputFormField";
+
+export function FormField({ value, ...props }) {
+  const defaultValue = value ? String(value).slice(0, 16) : "";
+  return <TextInputFormField type="datetime-local" defaultValue={defaultValue} {...props} />;
+}

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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { formatDateTime } from "terrazzo";
+
+export function ShowField({ value }) {
+  return <span>{formatDateTime(value)}</span>;
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { TextInputFormField } from "../shared/TextInputFormField";
+
+export function FormField(props) {
+  return <TextInputFormField type="email" {...props} />;
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+
+export function IndexField({ value }) {
+  if (!value) return <span className="text-muted-foreground">-</span>;
+  return (
+    <a href={`mailto:${value}`} className="text-sm text-primary hover:underline">
+      {String(value)}
+    </a>);
+
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+
+export function ShowField({ value }) {
+  if (!value) return <span className="text-muted-foreground">-</span>;
+  return (
+    <a href={`mailto:${value}`} className="text-primary hover:underline">
+      {String(value)}
+    </a>);
+
+}

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

@@ -0,0 +1,151 @@
+import React, { useState, useRef, useCallback } from "react";
+import { X, Check } from "lucide-react";
+
+import { Label } from "../../components/ui/label";
+import { Badge } from "../../components/ui/badge";
+import { Popover, PopoverTrigger, PopoverContent } from "../../components/ui/popover";
+import { cn } from "terrazzo";
+
+export function FormField({ value, label, input, options, required }) {
+  const resourceOptions = options?.resourceOptions ?? [];
+  const initialIds = value ?? [];
+
+  const [selectedIds, setSelectedIds] = useState(() => new Set(initialIds));
+  const [search, setSearch] = useState("");
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef(null);
+
+  const inputProps = input;
+  const inputName = inputProps?.name;
+  const inputId = inputProps?.id;
+
+  const toggleOption = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+    setSearch("");
+  }, []);
+
+  const removeOption = useCallback((id, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  const selectedOptions = resourceOptions.filter(([, id]) => selectedIds.has(id));
+  const filteredOptions = resourceOptions.filter(([display]) =>
+  display.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="space-y-2">
+      {label &&
+      <Label htmlFor={inputId}>
+          {label}{required && <span className="text-destructive"> *</span>}
+        </Label>
+      }
+
+      {/* Hidden inputs for form submission */}
+      {inputName && <input type="hidden" name={inputName} value="" />}
+      {selectedIds.size > 0 && inputName &&
+      Array.from(selectedIds).map((id) =>
+      <input key={id} type="hidden" name={inputName} value={id} />
+      )
+      }
+
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <button
+            type="button"
+            role="combobox"
+            aria-expanded={open}
+            id={inputId}
+            className={cn(
+              "flex min-h-10 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "hover:bg-accent/50 cursor-pointer"
+            )}>
+
+            {selectedOptions.length > 0 ?
+            selectedOptions.map(([display, id]) =>
+            <Badge key={id} variant="secondary" className="gap-1">
+                  {display}
+                  <span
+                role="button"
+                tabIndex={0}
+                className="ml-0.5 rounded-full outline-none hover:bg-muted-foreground/20 focus:bg-muted-foreground/20"
+                onPointerDown={(e) => removeOption(id, e)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    removeOption(id, e);
+                  }
+                }}>
+
+                    <X className="h-3 w-3" />
+                  </span>
+                </Badge>
+            ) :
+
+            <span className="text-muted-foreground">Select {label?.toLowerCase() ?? "items"}...</span>
+            }
+          </button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="p-0"
+          onOpenAutoFocus={(e) => {
+            e.preventDefault();
+            inputRef.current?.focus();
+          }}>
+
+          <div className="p-2 border-b">
+            <input
+              ref={inputRef}
+              type="text"
+              className="flex h-8 w-full rounded-md bg-transparent px-2 py-1 text-sm outline-none placeholder:text-muted-foreground"
+              placeholder={`Search ${label?.toLowerCase() ?? "items"}...`}
+              value={search}
+              onChange={(e) => setSearch(e.target.value)} />
+
+          </div>
+          <div className="max-h-60 overflow-y-auto p-1">
+            {filteredOptions.length === 0 ?
+            <div className="px-2 py-4 text-center text-sm text-muted-foreground">
+                No results found.
+              </div> :
+
+            filteredOptions.map(([display, id]) => {
+              const isSelected = selectedIds.has(id);
+              return (
+                <button
+                  key={id}
+                  type="button"
+                  className={cn(
+                    "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer",
+                    "outline-none hover:bg-accent hover:text-accent-foreground",
+                    "focus:bg-accent focus:text-accent-foreground"
+                  )}
+                  onClick={() => toggleOption(id)}>
+
+                    <Check className={cn("h-4 w-4 shrink-0", isSelected ? "opacity-100" : "opacity-0")} />
+                    {display}
+                  </button>);
+
+            })
+            }
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>);
+
+}

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

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

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

@@ -0,0 +1,72 @@
+import React from "react";
+
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from "../../components/ui/table";
+import { FieldRenderer } from "../FieldRenderer";
+
+export function ShowField({ value }) {
+  if (!value) return <span className="text-muted-foreground">None</span>;
+
+  const { items, headers, total, hasMore } = value;
+
+  if (!items || items.length === 0) {
+    return <span className="text-muted-foreground">None</span>;
+  }
+
+  // Table mode: collection_attributes specified
+  if (headers) {
+    return (
+      <div>
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                {headers.map((header) =>
+                  <TableHead key={header.attribute}>{header.label}</TableHead>
+                )}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {items.map((item) =>
+                <TableRow key={item.id}>
+                  {item.columns.map((col) =>
+                    <TableCell key={col.attribute}>
+                      <FieldRenderer mode="index" {...col} />
+                    </TableCell>
+                  )}
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </div>
+        {hasMore && (
+          <p className="text-sm text-muted-foreground mt-2">
+            Showing {items.length} of {total}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // Simple list mode
+  return (
+    <div>
+      <ul className="list-disc pl-5 space-y-1">
+        {items.map((item) =>
+          <li key={item.id}>{item.display}</li>
+        )}
+      </ul>
+      {hasMore && (
+        <p className="text-sm text-muted-foreground mt-2">
+          Showing {items.length} of {total}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { Label } from "../../components/ui/label";
+
+export function FormField({ value, label, input, options, required }) {
+  const resourceOptions = options?.resourceOptions ?? [];
+
+  return (
+    <div className="space-y-2">
+      {label &&
+      <Label htmlFor={input?.id}>
+          {label}{required && <span className="text-destructive"> *</span>}
+        </Label>
+      }
+      <select
+        defaultValue={value != null ? String(value) : ""}
+        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        {...input}>
+
+        <option value="">Select...</option>
+        {resourceOptions.map(([display, id]) =>
+        <option key={id} value={id}>
+            {display}
+          </option>
+        )}
+      </select>
+    </div>);
+}