@kematjaya/crud-ui-generator 0.2.0 → 0.3.0

package/README.md

@@ -56,9 +56,19 @@ Appended to (multi-entity, idempotent — each entity gets one marker-guarded bl
 ## Assumptions / caveats
 
 - **Id type comes from the spec's `idType`** (`uuid`/`int`/`string`, written by `ApiCrudRenderer::detectIdType()` off the entity's actual id column) — `validId()` in the generated `[id]/route.ts` and the `is{Entity}` type guard in `api-shapes.ts` are generated to match. Older spec files without `idType` default to `uuid`.
-- **The list search box only searches one field.** If more than one field is marked
-  `searchable` in the spec, the list view (backed by ApiPlatform's `SearchFilter`, one query
-  param per property) only wires up the first one. The export endpoint ORs across all of them.
+- **The list filter panel covers every `searchable` field except `textarea`.**
+  `naming.ts`'s `filterableFields()` renders one control per such field — text/number inputs
+  (ApiPlatform `SearchFilter` `'partial'`/`'exact'` strategy) and a boolean Any/Yes/No select
+  (`'exact'`) — all AND-combined into the same list query (one query param per property, backed
+  by a single `#[ApiFilter(SearchFilter::class, properties: [...])]` on the entity). The table's
+  collapsible Filter button toggles a `crud-filter-collapse` panel around the generated
+  `FilterPanel` component, and only appears when at least one field is filterable.
+  `searchable` `textarea` fields are excluded (same exclusion as table/CSV columns) — `cli.ts`
+  prints a next-steps note when that applies.
+- **CSV export ("Export all") only reflects the first filterable field's current value**, sent as
+  a single OR-search `search` param the backend matches across *every* `searchable` field
+  (textarea included) server-side — a separate, broader contract from the list's precise
+  AND-per-property filtering. The other filter panel fields don't currently narrow the export.
 - **The table/CSV export skip `textarea` fields** (long text), mirroring the hand-written Notes
   feature (shows `title`, not `body`). Everything else (`text`/`number`/`boolean`) becomes a
   column.

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { join, resolve } from 'node:path';
 import { loadSpec } from './spec.js';
-import { namesFromSpec, searchField, searchableFields } from './naming.js';
+import { filterableFields, namesFromSpec } from './naming.js';
 import { appendBlock, appendBlockWithImport, newLog, writeIfMissing, writeNewFile } from './write.js';
 import * as shared from './templates/sharedComponents.js';
 import { editPage, listPage, newPage } from './templates/pages.js';
@@ -71,8 +71,8 @@ function main() {
     writeIfMissing(join(cruddir, 'BulkActionsBar.tsx'), shared.bulkActionsBar, log);
     writeIfMissing(join(cruddir, 'PaginationBar.tsx'), shared.paginationBar, log);
     writeIfMissing(join(cruddir, 'ExportAllButton.tsx'), shared.exportAllButton, log);
-    if (null !== searchField(spec)) {
-        writeIfMissing(join(cruddir, 'SearchPanel.tsx'), shared.searchPanel, log);
+    if (filterableFields(spec).length > 0) {
+        writeIfMissing(join(cruddir, 'FilterPanel.tsx'), shared.filterPanel, log);
     }
     const dashDir = join(src, 'app', 'dashboard', names.entitiesKebab);
     writeNewFile(join(dashDir, 'page.tsx'), listPage(names), log);
@@ -99,8 +99,9 @@ function main() {
     console.log(`  1. Run the backend maker's printed next-steps (ApiResource/ApiFilter attributes, permission keys, rate limiter config).`);
     console.log(`  2. Run "npm run api:types" in the frontend project so src/types/api.ts's paths/components lookups resolve.`);
     console.log(`  3. Confirm the OpenAPI collection path is "/api/${names.entitiesKebab}" — if the entity's #[ApiResource] uses a custom uriTemplate, fix the "paths[...]" lookups in the appended src/types/api.ts block by hand.`);
-    if (searchableFields(spec).length > 1) {
-        console.log(`  4. Note: multiple searchable fields were configured (${searchableFields(spec).join(', ')}); the list view's single search box only queries by "${searchField(spec)}" (ApiPlatform SearchFilter's per-property param convention doesn't support one box matching several properties). The export endpoint does OR across all of them.`);
+    const excludedTextareaFields = spec.fields.filter((f) => f.searchable && f.type === 'textarea').map((f) => f.name);
+    if (excludedTextareaFields.length > 0) {
+        console.log(`  4. Note: "${excludedTextareaFields.join(', ')}" ${excludedTextareaFields.length > 1 ? 'are' : 'is'} marked searchable but excluded from the generated Filter panel (long text isn't a sensible filter input) — same exclusion as table/CSV columns.`);
     }
     console.log(`  Id type: "${spec.idType}" (from the spec's "idType") — validId() in the generated app/api/${names.entitiesKebab}/[id]/route.ts was generated to match.`);
     console.log(`  Run "npm run format" afterwards — generated files aren't pre-formatted to this project's Prettier config.`);

package/dist/naming.js

@@ -13,13 +13,16 @@ export function namesFromSpec(spec) {
     const entitiesCamel = entitiesPascal.charAt(0).toLowerCase() + entitiesPascal.slice(1);
     return { entityPascal, entityCamel, entitiesKebab, entitiesPascal, entitiesCamel };
 }
-/** The single field used for the search box / list-view SearchFilter query param, if any. */
-export function searchField(spec) {
-    return spec.fields.find((f) => f.searchable)?.name ?? null;
-}
-/** All searchable field names, used by the export endpoint's OR-search. */
-export function searchableFields(spec) {
-    return spec.fields.filter((f) => f.searchable).map((f) => f.name);
+/**
+ * Fields rendered as controls in the list view's Filter panel: every `searchable` field except
+ * `textarea` (long text doesn't make a sensible filter input), mirroring `displayFields()`'s
+ * exclusion. All of these are wired into the list query and AND-combined. The CSV export
+ * endpoint's OR-search (against every `searchable` field, textarea included) is a separate,
+ * server-side-only concept — it reuses this list's first filterable field's current value as
+ * its convenience search text (see `useExport.ts` / `bffRoutes.ts`'s `exportRoute`).
+ */
+export function filterableFields(spec) {
+    return spec.fields.filter((f) => f.searchable && f.type !== 'textarea');
 }
 /** "createdAt" -> "Created At", "TestArticle" -> "Test Article". */
 export function humanize(identifier) {

package/dist/templates/bffRoutes.js

@@ -1,4 +1,4 @@
-import { displayFields, searchField } from '../naming.js';
+import { displayFields, filterableFields } from '../naming.js';
 function tsType(field) {
     if (field.type === 'number')
         return 'number';
@@ -90,7 +90,9 @@ export const revalidate = 0;
 }
 export function exportRoute(spec, names) {
     const { entityPascal, entitiesPascal, entitiesKebab } = names;
-    const field = searchField(spec);
+    // Reuses the filter panel's first field as the export endpoint's OR-search convenience
+    // text — it must be a property that actually exists on `{Entities}Query`.
+    const field = filterableFields(spec)[0]?.name ?? null;
     const cols = displayFields(spec).map((f) => f.name);
     if (null !== spec.timestampField && !cols.includes(spec.timestampField)) {
         cols.push(spec.timestampField);
@@ -152,7 +154,7 @@ ${field ? `    const params = new URLSearchParams();
 
 export async function GET(request: NextRequest): Promise<Response> {
     try {
-${field ? `        const { search } = parse${entitiesPascal}Query(request.nextUrl.searchParams);
+${field ? `        const { ${field}: search } = parse${entitiesPascal}Query(request.nextUrl.searchParams);
         const response = await authedBackend(buildExportPath(search));` : `        const response = await authedBackend(buildExportPath());`}
         if (!response.ok) return response;
 

package/dist/templates/hook.js

@@ -1,11 +1,11 @@
-import { lowerWords, searchField } from '../naming.js';
+import { filterableFields, lowerWords } from '../naming.js';
 export function entityHook(spec, names) {
     const { entityPascal, entitiesPascal, entitiesKebab } = names;
-    const field = searchField(spec);
+    const filters = filterableFields(spec);
     const pluralNoun = lowerWords(entitiesPascal);
-    const hasSearchLine = field
-        ? `    const hasSearch = Boolean(query.search);\n`
-        : `    const hasSearch = false;\n`;
+    const hasFiltersLine = filters.length > 0
+        ? `    const hasFilters = [${filters.map((f) => `query.${f.name}`).join(', ')}].some(Boolean);\n`
+        : `    const hasFilters = false;\n`;
     return `import { useRouter, useSearchParams } from 'next/navigation';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { is${entityPascal}Collection } from '@/lib/api-shapes';
@@ -118,8 +118,8 @@ export function use${entitiesPascal}() {
         router.push(build${entitiesPascal}Href(nextQuery));
     }
 
-${hasSearchLine}    const trueEmpty = !loading && !error && !hasSearch && totalItems === 0;
-    const filteredEmpty = !loading && !error && hasSearch && totalItems === 0;
+${hasFiltersLine}    const trueEmpty = !loading && !error && !hasFilters && totalItems === 0;
+    const filteredEmpty = !loading && !error && hasFilters && totalItems === 0;
     const hasItems = !loading && items.length > 0;
     const selectedItems = useMemo(
         () => items.filter((item) => selectedIds.has(item.id)),
@@ -237,7 +237,7 @@ ${hasSearchLine}    const trueEmpty = !loading && !error && !hasSearch && totalI
         totalItems,
         loading,
         error,
-        hasSearch,
+        hasFilters,
         trueEmpty,
         filteredEmpty,
         hasItems,

package/dist/templates/queryLib.js

@@ -1,13 +1,20 @@
-import { searchField } from '../naming.js';
+import { filterableFields } from '../naming.js';
 export function queryLib(spec, names) {
     const { entitiesKebab, entitiesPascal, entitiesCamel } = names;
-    const field = searchField(spec);
+    const fields = filterableFields(spec);
     const constPrefix = entitiesCamel.toUpperCase();
+    const typeFields = fields.map((f) => `    ${f.name}: string;`).join('\n');
+    const parseFields = fields
+        .map((f) => `        ${f.name}: searchParams.get('${f.name}')?.trim() ?? '',`)
+        .join('\n');
+    const paramFields = fields
+        .map((f) => `    if (state.${f.name}) params.set('${f.name}', state.${f.name});`)
+        .join('\n');
     return `export const ${constPrefix}_PAGE_SIZES = [10, 20, 30, 50] as const;
 export const ${constPrefix}_DEFAULT_PAGE_SIZE = 30;
 
 export type ${entitiesPascal}Query = {
-${field !== null ? '    search: string;\n' : ''}    page: number;
+${typeFields ? typeFields + '\n' : ''}    page: number;
     itemsPerPage: number;
 };
 
@@ -25,7 +32,7 @@ function isAllowedPageSize(
 
 export function parse${entitiesPascal}Query(searchParams: URLSearchParams): ${entitiesPascal}Query {
     const state: ${entitiesPascal}Query = {
-${field !== null ? `        search: searchParams.get('${field}')?.trim() ?? '',\n` : ''}        page: parsePositiveInteger(searchParams.get('page')) ?? 1,
+${parseFields ? parseFields + '\n' : ''}        page: parsePositiveInteger(searchParams.get('page')) ?? 1,
         itemsPerPage: ${constPrefix}_DEFAULT_PAGE_SIZE
     };
     const pageSize = parsePositiveInteger(searchParams.get('itemsPerPage'));
@@ -36,7 +43,7 @@ ${field !== null ? `        search: searchParams.get('${field}')?.trim() ?? '',\
 
 function buildParams(state: ${entitiesPascal}Query): URLSearchParams {
     const params = new URLSearchParams();
-${field !== null ? `    if (state.search) params.set('${field}', state.search);\n` : ''}    if (state.page !== 1) params.set('page', String(state.page));
+${paramFields ? paramFields + '\n' : ''}    if (state.page !== 1) params.set('page', String(state.page));
     if (state.itemsPerPage !== ${constPrefix}_DEFAULT_PAGE_SIZE) {
         params.set('itemsPerPage', String(state.itemsPerPage));
     }

package/dist/templates/sharedComponents.js

@@ -4,6 +4,10 @@
  * ExportAllButton — all under src/components/notes/). Written once per frontend project into
  * src/components/crud/ (skipped on repeat runs / for later entities) so N generated entities
  * don't each carry a byte-identical copy.
+ *
+ * `filterPanel` is the generalization of `searchPanel` to N AND-combined fields (text/number/
+ * boolean) — `cli.ts` now writes `filterPanel` for any entity with a filterable field.
+ * `searchPanel` is kept as a standalone primitive (no longer auto-written) rather than deleted.
  */
 export const deleteConfirmModal = `'use client';
 
@@ -413,3 +417,143 @@ export function SearchPanel({
     );
 }
 `;
+export const filterPanel = `import { useId } from 'react';
+import { Button } from '@kematjaya/bootstrap-ui-kit';
+
+type FilterFieldDef =
+    | { name: string; label: string; kind: 'text' }
+    | { name: string; label: string; kind: 'number' }
+    | { name: string; label: string; kind: 'boolean' };
+
+type Props = {
+    fields: FilterFieldDef[];
+    values: Record<string, string>;
+    totalItems: number;
+    pluralNoun: string;
+    pending: boolean;
+    disabled: boolean;
+    onApply: (values: Record<string, string>) => void;
+    onClear: () => void;
+};
+
+function summary(totalItems: number, pluralNoun: string, filtered: boolean) {
+    return filtered
+        ? \`\${totalItems} \${pluralNoun} match your filters\`
+        : \`\${totalItems} \${pluralNoun} total\`;
+}
+
+export function FilterPanel({
+    fields,
+    values,
+    totalItems,
+    pluralNoun,
+    pending,
+    disabled,
+    onApply,
+    onClear
+}: Props) {
+    const idPrefix = useId();
+    const activeFields = fields.filter((field) => values[field.name]);
+    const isFiltered = activeFields.length > 0;
+    const controlsDisabled = pending || disabled;
+
+    return (
+        <div className="crud-search-panel">
+            <form
+                className="crud-toolbar"
+                method="get"
+                onSubmit={(event) => {
+                    event.preventDefault();
+                    const formData = new FormData(event.currentTarget);
+                    const next: Record<string, string> = {};
+                    for (const field of fields) {
+                        next[field.name] =
+                            formData.get(field.name)?.toString().trim() ?? '';
+                    }
+                    onApply(next);
+                }}
+            >
+                {fields.map((field) => (
+                    <div className="crud-search-field" key={field.name}>
+                        <label
+                            htmlFor={\`\${idPrefix}-\${field.name}\`}
+                            className="form-label mb-1"
+                        >
+                            {field.label}
+                        </label>
+                        {field.kind === 'boolean' ? (
+                            <select
+                                id={\`\${idPrefix}-\${field.name}\`}
+                                className="form-select"
+                                name={field.name}
+                                defaultValue={values[field.name] ?? ''}
+                                disabled={controlsDisabled}
+                            >
+                                <option value="">Any</option>
+                                <option value="true">Yes</option>
+                                <option value="false">No</option>
+                            </select>
+                        ) : (
+                            <input
+                                id={\`\${idPrefix}-\${field.name}\`}
+                                type={field.kind === 'number' ? 'number' : 'text'}
+                                className="form-control"
+                                name={field.name}
+                                defaultValue={values[field.name] ?? ''}
+                                placeholder={field.label}
+                                autoComplete="off"
+                                disabled={controlsDisabled}
+                            />
+                        )}
+                    </div>
+                ))}
+                <div className="crud-toolbar-actions">
+                    <Button type="submit" disabled={controlsDisabled}>
+                        Apply filters
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={(event) => {
+                            event.preventDefault();
+                            onClear();
+                        }}
+                        aria-label="Clear all filters"
+                        disabled={!isFiltered || pending}
+                    >
+                        Clear
+                    </Button>
+                </div>
+            </form>
+            <div className="crud-search-meta">
+                <p
+                    className="dash-card-subtitle m-0"
+                    role="status"
+                    aria-live="polite"
+                    aria-busy={pending}
+                >
+                    {pending ? 'Loading...' : summary(totalItems, pluralNoun, isFiltered)}
+                </p>
+                {isFiltered && (
+                    <div
+                        className="crud-filter-chip"
+                        aria-label="Active filters"
+                    >
+                        <span>
+                            {activeFields.length} filter
+                            {activeFields.length === 1 ? '' : 's'} active
+                        </span>
+                        <button
+                            type="button"
+                            className="btn btn-sm btn-link p-0"
+                            onClick={onClear}
+                            disabled={pending}
+                        >
+                            Clear all filters
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+`;

package/dist/templates/table.js

@@ -1,4 +1,4 @@
-import { displayFields, humanize, labelField, lowerWords, searchField } from '../naming.js';
+import { displayFields, filterableFields, humanize, labelField, lowerWords } from '../naming.js';
 function columnCell(fieldName, timestampField) {
     if (fieldName === timestampField) {
         return `                                    <td>
@@ -9,6 +9,13 @@ function columnCell(fieldName, timestampField) {
     }
     return `                                    <td>{String(item.${fieldName})}</td>`;
 }
+function filterFieldKind(type) {
+    if (type === 'number')
+        return 'number';
+    if (type === 'boolean')
+        return 'boolean';
+    return 'text';
+}
 export function table(spec, names) {
     const { entityPascal, entitiesPascal, entitiesCamel, entitiesKebab } = names;
     const prefix = entitiesKebab;
@@ -19,39 +26,65 @@ export function table(spec, names) {
     const label = labelField(spec);
     const noun = lowerWords(entityPascal);
     const pluralNoun = lowerWords(entitiesPascal);
-    const field = searchField(spec);
+    const filters = filterableFields(spec);
     const constPrefix = entitiesCamel.toUpperCase();
+    const hasFilter = filters.length > 0;
+    const filterPanelId = `${noun}-filter-panel`;
     const headCells = cols.map((c) => `                                <th>${humanize(c)}</th>`).join('\n');
     const bodyCells = cols.map((c) => columnCell(c, spec.timestampField)).join('\n');
-    const searchPanelBlock = field
-        ? `            <SearchPanel
-                key={query.search}
-                label="Search by ${humanize(field)}"
-                value={query.search}
-                totalItems={totalItems}
-                pluralNoun="${pluralNoun}"
-                pending={loading}
-                disabled={trueEmpty}
-                onSearch={(search) =>
-                    navigateTo({ ...query, page: 1, search })
-                }
-                onClear={() =>
-                    navigateTo({ ...query, page: 1, search: '' })
-                }
-            />
+    const filterButtonBlock = hasFilter
+        ? `                    <Button
+                        variant="outline"
+                        icon={filterOpen ? 'bi-chevron-up' : 'bi-funnel'}
+                        aria-expanded={filterOpen}
+                        aria-controls="${filterPanelId}"
+                        onClick={() => setFilterOpen((open) => !open)}
+                    >
+                        Filter
+                    </Button>
+`
+        : '';
+    const filterFieldsLiteral = filters
+        .map((f) => `{ name: '${f.name}', label: '${humanize(f.name)}', kind: '${filterFieldKind(f.type)}' }`)
+        .join(',\n                        ');
+    const filterValuesLiteral = filters.map((f) => `${f.name}: query.${f.name}`).join(', ');
+    const clearedValuesLiteral = filters.map((f) => `${f.name}: ''`).join(', ');
+    const filterKeyExpr = filters.map((f) => '${query.' + f.name + '}').join('|');
+    const filterPanelBlock = hasFilter
+        ? `            <div
+                id="${filterPanelId}"
+                className={\`crud-filter-collapse collapse\${filterOpen ? ' show' : ''}\`}
+            >
+                <FilterPanel
+                    key={\`${filterKeyExpr}\`}
+                    fields={[
+                        ${filterFieldsLiteral}
+                    ]}
+                    values={{ ${filterValuesLiteral} }}
+                    totalItems={totalItems}
+                    pluralNoun="${pluralNoun}"
+                    pending={loading}
+                    disabled={trueEmpty}
+                    onApply={(values) =>
+                        navigateTo({ ...query, page: 1, ...values })
+                    }
+                    onClear={() =>
+                        navigateTo({ ...query, page: 1, ${clearedValuesLiteral} })
+                    }
+                />
+            </div>
 
 `
         : '';
     return `'use client';
 
 import { Button, EmptyState, LinkButton, ListPageCard, Toast } from '@kematjaya/bootstrap-ui-kit';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef${hasFilter ? ', useState' : ''} } from 'react';
 import { usePermissions } from '@kematjaya/access-control-ui';
 import { BulkActionsBar } from '@/components/crud/BulkActionsBar';
 import { DeleteConfirmModal } from '@/components/crud/DeleteConfirmModal';
 import { ExportAllButton } from '@/components/crud/ExportAllButton';
-import { PaginationBar } from '@/components/crud/PaginationBar';
-import { SearchPanel } from '@/components/crud/SearchPanel';
+${hasFilter ? "import { FilterPanel } from '@/components/crud/FilterPanel';\n" : ''}import { PaginationBar } from '@/components/crud/PaginationBar';
 import {
     ${constPrefix}_PAGE_SIZES,
     build${entitiesPascal}Href,
@@ -66,7 +99,7 @@ export function ${entityPascal}Table() {
         totalItems,
         loading,
         error,
-        hasSearch,
+        hasFilters,
         trueEmpty,
         filteredEmpty,
         hasItems,
@@ -94,7 +127,7 @@ export function ${entityPascal}Table() {
     } = use${entitiesPascal}();
     const { has: hasPermission, loading: permissionsLoading } = usePermissions();
     const selectAllRef = useRef<HTMLInputElement>(null);
-
+${hasFilter ? '    const [filterOpen, setFilterOpen] = useState(false);\n' : ''}
     useEffect(() => {
         if (selectAllRef.current) {
             selectAllRef.current.indeterminate =
@@ -108,10 +141,10 @@ export function ${entityPascal}Table() {
             error={error}
             action={
                 <div className="crud-card-actions">
-                    {(permissionsLoading || hasPermission('${prefix}.export_all')) && (
+${filterButtonBlock}                    {(permissionsLoading || hasPermission('${prefix}.export_all')) && (
                         <ExportAllButton
                             totalItems={totalItems}
-                            filtered={hasSearch}
+                            filtered={hasFilters}
                             exporting={exportingAll}
                             disabled={loading || exportingAll || 0 === totalItems}
                             onExport={() => void handleExportAll()}
@@ -125,7 +158,7 @@ export function ${entityPascal}Table() {
                 </div>
             }
         >
-${searchPanelBlock}            {trueEmpty && (
+${filterPanelBlock}            {trueEmpty && (
                 <EmptyState
                     title="No ${pluralNoun} yet"
                     description="Create your first ${noun} to get started."
@@ -141,16 +174,16 @@ ${searchPanelBlock}            {trueEmpty && (
 
             {filteredEmpty && (
                 <EmptyState
-                    title="No ${pluralNoun} match your search"
-                    description="Try a different search or clear it to see all ${pluralNoun}."
+                    title="No ${pluralNoun} match your filters"
+                    description="Try different filters or clear them to see all ${pluralNoun}."
                     action={
                         <Button
                             variant="outline"
                             onClick={() =>
-                                navigateTo({ ...query, page: 1${field ? ", search: ''" : ''} })
+                                navigateTo({ ...query, page: 1${hasFilter ? `, ${clearedValuesLiteral}` : ''} })
                             }
                         >
-                            Clear search
+                            Clear filters
                         </Button>
                     }
                 />

package/dist/templates/typesApi.js

@@ -1,13 +1,17 @@
 import { displayFields } from '../naming.js';
 /**
  * Fresh-file bootstrap, only used when src/types/api.ts doesn't exist yet. In the boilerplate
- * app this file already exists (written for the Notes feature) with these same JsonLd/Json
- * helpers and the `paths`/`components` import from the OpenAPI-generated `./api.generated` —
- * this header is only a fallback for a from-scratch project that hasn't set that up yet.
+ * app this file already exists (written for the Notes feature) with this same Json helper
+ * and the `paths`/`components` import from the OpenAPI-generated `./api.generated` — this
+ * header is only a fallback for a from-scratch project that hasn't set that up yet.
+ *
+ * Extracts the `application/json` (not `application/ld+json`/Hydra) response shape, matching
+ * how `lib/bff.ts`'s `authedBackend()` calls the API Platform backend — plain JSON, so
+ * collections come back as `{ totalItems, member }` rather than a Hydra-wrapped `hydra:member`.
  */
 export const typesApiFileHeader = `import type { components, paths } from './api.generated';
 
-type JsonLd<T> = T extends { 'application/ld+json': infer V } ? V : never;
+type Json<T> = T extends { 'application/json': infer V } ? V : never;
 `;
 export function typesApiMarker(entityPascal) {
     return `export type ${entityPascal} =`;
@@ -28,9 +32,9 @@ export function typesApiBlock(spec, names) {
     return `
 type ${entitiesPascal}CollectionResponses = paths['/api/${entitiesKebab}']['get']['responses'];
 type ${entityPascal}PostResponses = paths['/api/${entitiesKebab}']['post']['responses'];
-type Generated${entityPascal} = NonNullable<JsonLd<${entityPascal}PostResponses[201]['content']>>;
+type Generated${entityPascal} = NonNullable<Json<${entityPascal}PostResponses[201]['content']>>;
 type Generated${entitiesPascal}Collection = NonNullable<
-    JsonLd<${entitiesPascal}CollectionResponses[200]['content']>
+    Json<${entitiesPascal}CollectionResponses[200]['content']>
 >;
 
 export type ${entityPascal}Input = components['schemas']['${entityPascal}.${entityPascal}Input'];

package/dist/templates/useExport.js

@@ -1,7 +1,9 @@
-import { searchField } from '../naming.js';
+import { filterableFields } from '../naming.js';
 export function useExportHook(spec, names) {
     const { entityPascal, entitiesPascal, entitiesCamel, entitiesKebab } = names;
-    const field = searchField(spec);
+    // Reuses the filter panel's first field as the export endpoint's OR-search convenience
+    // text — it must be a property that actually exists on `{Entities}Query`.
+    const field = filterableFields(spec)[0]?.name ?? null;
     return `import { useState } from 'react';
 import { build${entitiesPascal}Csv } from '@/lib/${entitiesKebab}-csv';
 import type { ${entitiesPascal}Query } from '@/lib/${entitiesKebab}-query';
@@ -92,7 +94,7 @@ export function use${entitiesPascal}Export() {
     async function exportAll(query: ${entitiesPascal}Query): Promise<ExportResult> {
         setExportingAll(true);
         const params = new URLSearchParams();
-${field !== null ? "        if ('' !== query.search) params.set('search', query.search);\n" : ''}        const path = params.size
+${field !== null ? `        if ('' !== query.${field}) params.set('search', query.${field});\n` : ''}        const path = params.size
             ? \`/api/${entitiesKebab}/export?\${params.toString()}\`
             : '/api/${entitiesKebab}/export';
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kematjaya/crud-ui-generator",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "Next.js CRUD frontend generator that reads crud-specs/{Entity}.json sidecars written by kematjaya/crud-maker-bundle's make:kmj-api-crud and generates pages, components, and BFF routes matching the boilerplate's hand-written Notes feature.",
     "type": "module",
     "license": "MIT",