terrazzo 0.6.0 → 0.7.0

data/lib/generators/terrazzo/views/page_mapping_helper.rb

@@ -2,26 +2,149 @@ module Terrazzo
   module Generators
     module Views
       module PageMappingHelper
+        GENERATED_IMPORT_MARKER = "// Terrazzo generated page imports end"
+        GENERATED_MAPPING_MARKER = "  // Terrazzo generated page mappings end"
+
         private
 
+        def ensure_page_barrels
+          ensure_barrel("app/views/#{namespace_name}/fields/index.js", 'export * from "terrazzo/fields";')
+          ensure_barrel("app/views/#{namespace_name}/components/index.js", 'export * from "terrazzo/components";')
+          ensure_barrel("app/views/#{namespace_name}/components/ui/index.js", 'export * from "terrazzo/ui";')
+        end
+
         def register_page_mapping(action)
-          mapping_path = File.join(destination_root, "app/javascript/#{namespace_name}/page_to_page_mapping.js")
-          return unless File.exist?(mapping_path)
+          mapping_path = "app/javascript/#{namespace_name}/generated_page_mapping.js"
+          mapping_file = File.join(destination_root, mapping_path)
+
+          unless File.exist?(mapping_file)
+            create_file mapping_path, <<~JS
+              // Resource-specific page mappings generated by Terrazzo.
+              // Add manual custom pages to custom_page_mapping.js instead.
 
-          component_name = "#{resource.gsub('::', '')}#{action.capitalize}"
+              // Terrazzo generated page imports start
+              // Terrazzo generated page imports end
+
+              export const generatedPageMapping = {
+                // Terrazzo generated page mappings start
+                // Terrazzo generated page mappings end
+              }
+            JS
+          end
+
+          component_name = generated_page_component_name(action)
           import_path = "../../views/#{namespace_name}/#{resource_path}/#{action}"
           key = "'#{namespace_name}/#{resource_path}/#{action}'"
 
-          content = File.read(mapping_path)
+          content = File.read(mapping_file)
+          ensure_generated_mapping_loaded
           return if content.include?(key)
 
-          # Add import before the pages object declaration
           import_line = "import #{component_name} from \"#{import_path}\";\n"
-          inject_into_file mapping_path, import_line, before: "\nconst pages"
+          insert_generated_import(mapping_path, content, import_line, component_name)
 
-          # Add mapping entry inside the pages object (before its closing brace)
           entry_line = "  #{key}: #{component_name},\n"
-          inject_into_file mapping_path, entry_line, before: "}\n\n//"
+          insert_generated_mapping_entry(mapping_path, File.read(mapping_file), entry_line, key)
+        end
+
+        def ensure_generated_mapping_loaded
+          main_mapping_path = "app/javascript/#{namespace_name}/page_to_page_mapping.js"
+          main_mapping_file = File.join(destination_root, main_mapping_path)
+          return unless File.exist?(main_mapping_file)
+
+          content = File.read(main_mapping_file)
+
+          unless imports_generated_mapping?(content)
+            import_line = %(import { generatedPageMapping } from "./generated_page_mapping";\n)
+            if content.include?(%(import { customPageMapping } from "./custom_page_mapping";))
+              inject_into_file main_mapping_path, import_line,
+                before: %(import { customPageMapping } from "./custom_page_mapping";)
+            else
+              prepend_to_file main_mapping_path, import_line
+            end
+            content = File.read(main_mapping_file)
+          end
+
+          return if generated_mapping_used_in_code?(content)
+
+          generated_spread = "  ...generatedPageMapping,\n"
+          if content.include?("  ...customPageMapping,")
+            inject_into_file main_mapping_path, generated_spread, before: "  ...customPageMapping,"
+          elsif content.include?("...customPageMapping")
+            gsub_file main_mapping_path, "...customPageMapping", "...generatedPageMapping, ...customPageMapping"
+          elsif content.include?("const pages = {\n")
+            inject_into_file main_mapping_path, generated_spread, after: "const pages = {\n"
+          else
+            raise Thor::Error,
+              "#{main_mapping_path} imports generated_page_mapping.js but Terrazzo could not find the pages object to merge it automatically."
+          end
+        end
+
+        def imports_generated_mapping?(content)
+          content.match?(/^import\s+\{\s*generatedPageMapping\s*\}\s+from\s+["']\.\/generated_page_mapping["'];?\s*$/)
+        end
+
+        def generated_mapping_used_in_code?(content)
+          executable_content = content
+            .gsub(/^import\s+.*\n/, "")
+            .gsub(%r{//.*$}, "")
+            .gsub(%r{/\*.*?\*/}m, "")
+
+          executable_content.match?(/\bgeneratedPageMapping\b/)
+        end
+
+        def resource_class_name
+          resource.to_s.camelize
+        end
+
+        def resource_path
+          resource_class_name.underscore.pluralize
+        end
+
+        def generated_page_component_name(action)
+          resource_class_name.split("::").map(&:camelize).join("__") + action.camelize
+        end
+
+        def insert_generated_import(mapping_path, content, import_line, component_name)
+          if content.include?(GENERATED_IMPORT_MARKER)
+            inject_into_file mapping_path, import_line, before: GENERATED_IMPORT_MARKER
+          elsif content.include?("export const generatedPageMapping")
+            prepend_to_file mapping_path, import_line
+            say_status :warning,
+              "#{mapping_path} is missing #{GENERATED_IMPORT_MARKER.inspect}; prepended #{component_name} import.",
+              :yellow
+          else
+            raise Thor::Error,
+              "#{mapping_path} must export generatedPageMapping so Terrazzo can register resource-specific pages."
+          end
+        end
+
+        def insert_generated_mapping_entry(mapping_path, content, entry_line, key)
+          if content.include?(GENERATED_MAPPING_MARKER)
+            inject_into_file mapping_path, entry_line, before: GENERATED_MAPPING_MARKER
+          elsif content.include?("export const generatedPageMapping = {\n")
+            inject_into_file mapping_path, entry_line, after: "export const generatedPageMapping = {\n"
+            say_status :warning,
+              "#{mapping_path} is missing #{GENERATED_MAPPING_MARKER.strip.inspect}; inserted #{key} at the start of generatedPageMapping.",
+              :yellow
+          else
+            raise Thor::Error,
+              "#{mapping_path} must export generatedPageMapping so Terrazzo can register #{key}."
+          end
+        end
+
+        def ensure_barrel(barrel_path, package_export)
+          barrel_file = File.join(destination_root, barrel_path)
+
+          unless File.exist?(barrel_file)
+            create_file barrel_path, "#{package_export}\n"
+            return
+          end
+
+          content = File.read(barrel_file)
+          return if content.include?(package_export)
+
+          prepend_to_file barrel_path, "#{package_export}\n"
         end
       end
     end

data/lib/generators/terrazzo/views/show_generator.rb

@@ -1,10 +1,12 @@
 require "rails/generators"
+require_relative "generated_defaults_helper"
 require_relative "page_mapping_helper"
 
 module Terrazzo
   module Generators
     module Views
       class ShowGenerator < Rails::Generators::Base
+        include GeneratedDefaultsHelper
         include PageMappingHelper
 
         source_root File.expand_path("templates", __dir__)
@@ -16,12 +18,15 @@ module Terrazzo
           desc: "Admin namespace"
 
         def copy_show_template
+          ensure_page_barrels
+
           if resource.present?
             eject_json_props
-            copy_file "pages/show.jsx", "app/views/#{namespace_name}/#{resource_path}/show.jsx"
+            copy_resource_page_file "pages/show.jsx", "app/views/#{namespace_name}/#{resource_path}/show.jsx"
             register_page_mapping("show")
           else
-            copy_file "pages/show.jsx", "app/views/#{namespace_name}/application/show.jsx"
+            copy_file_over_generated "pages/show.jsx", "app/views/#{namespace_name}/application/show.jsx",
+              generated_content: generated_page_stub("show")
           end
         end
 
@@ -35,10 +40,6 @@ module Terrazzo
           RUBY
         end
 
-        def resource_path
-          resource.underscore.pluralize
-        end
-
         def namespace_name
           options[:namespace]
         end

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

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Button } from "./ui";
+
+export function CollectionFilters({ active, allUrl, options }) {
+  if (!options || options.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button asChild variant={active ? "outline" : "secondary"} size="sm">
+        <a href={allUrl} data-sg-visit>All</a>
+      </Button>
+      {options.map((option) => (
+        <Button
+          key={option.value}
+          asChild
+          variant={option.active ? "secondary" : "outline"}
+          size="sm"
+        >
+          <a href={option.url} data-sg-visit>{option.label}</a>
+        </Button>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { MoreHorizontal } from "lucide-react";
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui";
+import { csrfToken } from "terrazzo";
+
+export function CollectionItemActions({ actions }) {
+  if (!actions || actions.length === 0) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Open row actions">
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+      {actions.map((action, index) => {
+        const method = String(action.method || "get").toLowerCase();
+
+        if (method !== "get") {
+          const isDestructive = method === "delete";
+          return (
+            <DropdownMenuItem key={index} asChild>
+              <form
+                action={action.url}
+                method="post"
+                {...(action.sg_visit !== false && { "data-sg-visit": true })}
+                onSubmit={(e) => {
+                  if (action.confirm && !window.confirm(action.confirm)) {
+                    e.preventDefault();
+                  }
+                }}
+              >
+                {method !== "post" && (
+                  <input type="hidden" name="_method" value={method} />
+                )}
+                <input
+                  type="hidden"
+                  name="authenticity_token"
+                  value={csrfToken()}
+                />
+                <button type="submit" className={`w-full text-left ${isDestructive ? "text-destructive" : ""}`}>
+                  {action.label}
+                </button>
+              </form>
+            </DropdownMenuItem>
+          );
+        }
+
+        return (
+          <DropdownMenuItem key={index} asChild>
+            <a href={action.url} {...(action.sg_visit !== false && { "data-sg-visit": true })}>
+              {action.label}
+            </a>
+          </DropdownMenuItem>
+        );
+      })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,60 @@
+import React from "react";
+
+import { Button } from "./ui";
+import { csrfToken } from "terrazzo";
+
+export function CollectionToolbarActions({ actions, selectedIds, disabled = false }) {
+  if (!actions || actions.length === 0) return null;
+  const selectedValues = Array.isArray(selectedIds) ? selectedIds : null;
+
+  return actions.map((action, index) => {
+    const method = String(action.method || "get").toLowerCase();
+    const rendersSelectedIds = selectedValues !== null;
+
+    if (method !== "get" || rendersSelectedIds) {
+      const isDestructive = method === "delete";
+      const variant = action.variant || (isDestructive ? "destructive" : "outline");
+      const formMethod = method === "get" ? "get" : "post";
+      const selectedParamName = action.paramName || action.param_name || "ids[]";
+
+      return (
+        <form
+          key={index}
+          action={action.url}
+          method={formMethod}
+          {...(action.sg_visit !== false && { "data-sg-visit": true })}
+          onSubmit={(e) => {
+            if (action.confirm && !window.confirm(action.confirm)) {
+              e.preventDefault();
+            }
+          }}
+        >
+          {method !== "get" && method !== "post" && (
+            <input type="hidden" name="_method" value={method} />
+          )}
+          {method !== "get" && (
+            <input
+              type="hidden"
+              name="authenticity_token"
+              value={csrfToken()}
+            />
+          )}
+          {selectedValues?.map((id) => (
+            <input key={id} type="hidden" name={selectedParamName} value={id} />
+          ))}
+          <Button type="submit" variant={variant} size="sm" disabled={disabled}>
+            {action.label}
+          </Button>
+        </form>
+      );
+    }
+
+    return (
+      <Button key={index} asChild variant={action.variant || "outline"} size="sm">
+        <a href={action.url} {...(action.sg_visit !== false && { "data-sg-visit": true })}>
+          {action.label}
+        </a>
+      </Button>
+    );
+  });
+}

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "./ui";
+
+export function HasManyPagination({ currentPage, totalPages, total, nextPagePath, prevPagePath }) {
+  if (totalPages <= 1) return null;
+
+  const updateUrl = (path) => () => {
+    const url = new URL(path, window.location.origin);
+    url.searchParams.delete("props_at");
+    window.history.replaceState(window.history.state, "", url.pathname + url.search);
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 pt-2 text-sm text-muted-foreground">
+      <span>Page {currentPage} of {totalPages} &middot; {total} total</span>
+      <div className="flex items-center gap-1">
+        {prevPagePath ? (
+          <Button asChild variant="outline" size="sm">
+            <a href={prevPagePath} data-sg-remote onClick={updateUrl(prevPagePath)}><ChevronLeft className="h-4 w-4" /> Prev</a>
+          </Button>
+        ) : (
+          <Button variant="outline" size="sm" disabled><ChevronLeft className="h-4 w-4" /> Prev</Button>
+        )}
+        {nextPagePath ? (
+          <Button asChild variant="outline" size="sm">
+            <a href={nextPagePath} data-sg-remote onClick={updateUrl(nextPagePath)}>Next <ChevronRight className="h-4 w-4" /></a>
+          </Button>
+        ) : (
+          <Button variant="outline" size="sm" disabled>Next <ChevronRight className="h-4 w-4" /></Button>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,11 +1,16 @@
 import React from "react";
 
-import { AppSidebar } from "./app-sidebar";
-import { SiteHeader } from "./site-header";
-import { FlashMessages } from "./FlashMessages";
-import { SidebarProvider, SidebarInset } from "terrazzo/ui";
+import { getComponent } from "terrazzo";
+import { AppSidebar as DefaultAppSidebar } from "./app-sidebar";
+import { SiteHeader as DefaultSiteHeader } from "./site-header";
+import { FlashMessages as DefaultFlashMessages } from "./FlashMessages";
+import { SidebarProvider, SidebarInset } from "./ui";
 
 export function Layout({ navigation, title, actions, children }) {
+  const AppSidebar = getComponent("AppSidebar") || DefaultAppSidebar;
+  const SiteHeader = getComponent("SiteHeader") || DefaultSiteHeader;
+  const FlashMessages = getComponent("FlashMessages") || DefaultFlashMessages;
+
   return (
     <SidebarProvider>
       <AppSidebar variant="inset" navigation={navigation} />

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

@@ -1,14 +1,14 @@
 import React, { useContext } from "react";
 import { NavigationContext } from "@thoughtbot/superglue";
 
-import { Field, FieldLabel } from "terrazzo/ui";
+import { Field, FieldLabel } from "./ui";
 import {
   Pagination as PaginationRoot,
   PaginationContent,
   PaginationItem,
   PaginationNext,
   PaginationPrevious,
-} from "terrazzo/ui";
+} from "./ui";
 import {
   Select,
   SelectContent,
@@ -16,48 +16,56 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "terrazzo/ui";
+} from "./ui";
 
 export function Pagination({ currentPage, totalPages, totalCount, perPage, nextPagePath, prevPagePath }) {
-  const { remote, pageKey } = useContext(NavigationContext);
+  const { visit } = useContext(NavigationContext);
+  const page = Math.max(Number(currentPage) || 1, 1);
+  const pages = Math.max(Number(totalPages) || 1, 1);
+  const count = Math.max(Number(totalCount) || 0, 0);
 
   const handlePerPageChange = (value) => {
     const url = new URL(window.location.href);
     url.searchParams.set("per_page", value);
     url.searchParams.delete("_page");
-    remote(url.pathname + url.search, { pageKey });
+    visit(url.pathname + url.search, {});
   };
 
   return (
-    <div className="flex items-center justify-between gap-4 py-4">
-      <Field orientation="horizontal" className="w-fit">
-        <FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>
-        <Select value={String(perPage)} onValueChange={handlePerPageChange}>
-          <SelectTrigger className="w-20" id="select-rows-per-page">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent align="start">
-            <SelectGroup>
-              <SelectItem value="10">10</SelectItem>
-              <SelectItem value="25">25</SelectItem>
-              <SelectItem value="50">50</SelectItem>
-              <SelectItem value="100">100</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      </Field>
+    <div className="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
+        <Field orientation="horizontal" className="w-fit">
+          <FieldLabel htmlFor="select-rows-per-page">Rows per page</FieldLabel>
+          <Select value={String(perPage)} onValueChange={handlePerPageChange}>
+            <SelectTrigger className="w-20" id="select-rows-per-page">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent align="start">
+              <SelectGroup>
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="25">25</SelectItem>
+                <SelectItem value="50">50</SelectItem>
+                <SelectItem value="100">100</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </Field>
+        <p className="text-sm text-muted-foreground" aria-live="polite">
+          Page {page} of {pages} - {count.toLocaleString()} total
+        </p>
+      </div>
       <PaginationRoot className="mx-0 w-auto">
         <PaginationContent>
           <PaginationItem>
             {prevPagePath ? (
-              <PaginationPrevious href={prevPagePath} data-sg-remote />
+              <PaginationPrevious href={prevPagePath} data-sg-visit />
             ) : (
               <PaginationPrevious className="pointer-events-none opacity-50" />
             )}
           </PaginationItem>
           <PaginationItem>
             {nextPagePath ? (
-              <PaginationNext href={nextPagePath} data-sg-remote />
+              <PaginationNext href={nextPagePath} data-sg-visit />
             ) : (
               <PaginationNext className="pointer-events-none opacity-50" />
             )}