@compilr-dev/factory 0.1.6 → 0.1.7

package/dist/toolkits/react-node/api.js

@@ -4,7 +4,7 @@
  * Generates: server/index.ts, server/routes/{entity}.ts, server/data/{entity}.ts
  */
 import { toCamelCase, toKebabCase } from '../../model/naming.js';
-import { tsType, fkFieldName, belongsToRels } from './helpers.js';
+import { tsType, fkFieldName, belongsToRels, hasManyRels } from './helpers.js';
 import { generateSeedData } from './seed.js';
 export function generateApiFiles(model) {
     return [
@@ -71,6 +71,23 @@ function generateDataStore(model, entity) {
     }
     typeFields.push('  createdAt: string;');
     typeFields.push('  updatedAt: string;');
+    // Collect searchable fields (string + enum types)
+    const searchableFields = entity.fields
+        .filter((f) => f.type === 'string' || f.type === 'enum')
+        .map((f) => `item.${f.name}`);
+    const searchFilter = searchableFields.length > 0
+        ? `    const q = options.search.toLowerCase();
+    result = result.filter((item) =>
+      [${searchableFields.join(', ')}].some((v) =>
+        v !== undefined && String(v).toLowerCase().includes(q),
+      ),
+    );`
+        : `    const q = options.search.toLowerCase();
+    result = result.filter((item) =>
+      Object.values(item).some((v) =>
+        v !== undefined && String(v).toLowerCase().includes(q),
+      ),
+    );`;
     const seedData = generateSeedData(model, entity);
     return {
         path: `server/data/${fileName}.ts`,
@@ -80,6 +97,11 @@ export interface ${typeName}Record {
 ${typeFields.join('\n')}
 }
 
+export interface QueryOptions {
+  search?: string;
+  filters?: Record<string, string>;
+}
+
 ${seedData}
 
 let items: ${typeName}Record[] = [...${varName}SeedData];
@@ -93,6 +115,21 @@ export function getById(id: number): ${typeName}Record | undefined {
   return items.find((item) => item.id === id);
 }
 
+export function query(options: QueryOptions): { data: ${typeName}Record[]; total: number } {
+  let result = items;
+  if (options.search) {
+${searchFilter}
+  }
+  if (options.filters) {
+    for (const [field, value] of Object.entries(options.filters)) {
+      result = result.filter((item) =>
+        String((item as Record<string, unknown>)[field]) === value,
+      );
+    }
+  }
+  return { data: result, total: result.length };
+}
+
 export function create(data: Omit<${typeName}Record, 'id' | 'createdAt' | 'updatedAt'>): ${typeName}Record {
   const now = new Date().toISOString();
   const item = { ...data, id: nextId++, createdAt: now, updatedAt: now };
@@ -124,6 +161,7 @@ function generateRoutes(model, entity) {
     const varName = toCamelCase(entity.pluralName) + 'Router';
     const dataImport = fileName;
     const btoRels = belongsToRels(entity);
+    const hmRels = hasManyRels(entity);
     // Populate belongsTo entities
     const populateImports = btoRels
         .map((rel) => {
@@ -135,6 +173,17 @@ function generateRoutes(model, entity) {
     })
         .filter(Boolean)
         .join('\n');
+    // Aliased getAll imports for hasMany targets (used by ?include=)
+    const hasManyImports = hmRels
+        .map((rel) => {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        if (!targetEntity)
+            return '';
+        const targetFile = toKebabCase(targetEntity.pluralName).toLowerCase();
+        return `import { getAll as getAll${targetEntity.pluralName} } from '../data/${targetFile}.js';`;
+    })
+        .filter(Boolean)
+        .join('\n');
     const populateLogic = btoRels.length > 0
         ? `
 function populate(item: Record<string, unknown>): Record<string, unknown> {
@@ -151,30 +200,64 @@ ${btoRels
 `
         : '';
     const getListReturn = btoRels.length > 0
-        ? 'res.json(items.map((item) => populate(item as unknown as Record<string, unknown>)));'
-        : 'res.json(items);';
-    const getByIdReturn = btoRels.length > 0
-        ? 'res.json(populate(item as unknown as Record<string, unknown>));'
-        : 'res.json(item);';
+        ? 'res.json({ data: result.data.map((item) => populate(item as unknown as Record<string, unknown>)), total: result.total });'
+        : 'res.json({ data: result.data, total: result.total });';
+    // GET by ID with optional ?include= for hasMany
+    let getByIdBody;
+    if (hmRels.length > 0) {
+        const includeChecks = hmRels
+            .map((rel) => {
+            const targetEntity = model.entities.find((e) => e.name === rel.target);
+            if (!targetEntity)
+                return '';
+            const targetVar = toCamelCase(targetEntity.pluralName);
+            const fkRel = targetEntity.relationships.find((r) => r.type === 'belongsTo' && r.target === entity.name) ?? { type: 'belongsTo', target: entity.name };
+            const fk = fkFieldName(fkRel);
+            return `  if (include.includes('${targetVar}')) {
+    result.${targetVar} = getAll${targetEntity.pluralName}().filter((r) => r.${fk} === item.id);
+  }`;
+        })
+            .filter(Boolean)
+            .join('\n');
+        const populateExpr = btoRels.length > 0 ? 'populate(item as unknown as Record<string, unknown>)' : '{ ...item }';
+        getByIdBody = `  const item = getById(Number(req.params.id));
+  if (!item) return res.status(404).json({ error: 'Not found' });
+  const include = (req.query.include as string ?? '').split(',').filter(Boolean);
+  const result: Record<string, unknown> = ${populateExpr};
+${includeChecks}
+  res.json(result);`;
+    }
+    else {
+        const getByIdReturn = btoRels.length > 0
+            ? 'res.json(populate(item as unknown as Record<string, unknown>));'
+            : 'res.json(item);';
+        getByIdBody = `  const item = getById(Number(req.params.id));
+  if (!item) return res.status(404).json({ error: 'Not found' });
+  ${getByIdReturn}`;
+    }
     return {
         path: `server/routes/${fileName}.ts`,
         content: `import { Router } from 'express';
-import { getAll, getById, create, update, remove } from '../data/${dataImport}.js';
-${populateImports}
+import { getAll, getById, query, create, update, remove } from '../data/${dataImport}.js';
+${populateImports}${hasManyImports ? '\n' + hasManyImports : ''}
 
 export const ${varName} = Router();
 ${populateLogic}
 // GET all
-${varName}.get('/', (_req, res) => {
-  const items = getAll();
+${varName}.get('/', (req, res) => {
+  const search = req.query.search as string | undefined;
+  const filters: Record<string, string> = {};
+  for (const [key, value] of Object.entries(req.query)) {
+    const match = key.match(/^filter\\[(.+)\\]$/);
+    if (match && typeof value === 'string') filters[match[1]] = value;
+  }
+  const result = query({ search, filters });
   ${getListReturn}
 });
 
 // GET by ID
 ${varName}.get('/:id', (req, res) => {
-  const item = getById(Number(req.params.id));
-  if (!item) return res.status(404).json({ error: 'Not found' });
-  ${getByIdReturn}
+${getByIdBody}
 });
 
 // POST create

package/dist/toolkits/react-node/entity.js

@@ -26,7 +26,12 @@ function generateListPage(model, entity) {
     const hasFilters = enumFields.length > 0;
     const tableHeaders = entity.fields
         .slice(0, 5)
-        .map((f) => `              <th className="px-4 py-2 text-left text-sm font-medium text-gray-500 dark:text-gray-400">${f.label}</th>`)
+        .map((f) => `              <th
+                className="cursor-pointer select-none px-4 py-2 text-left text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                onClick={() => handleSort('${f.name}')}
+              >
+                ${f.label}{sortField === '${f.name}' ? (sortDirection === 'asc' ? ' ↑' : ' ↓') : ''}
+              </th>`)
         .join('\n');
     const tableCells = entity.fields
         .slice(0, 5)
@@ -45,16 +50,27 @@ ${hasFilters ? `const filterOptions = [\n${filterDefs}\n];\n` : ''}
 export default function ${entity.name}List() {
   const [items, setItems] = useState<${entity.name}[]>([]);
   const [view, setView] = useState<'card' | 'list'>('card');
-  const [search, setSearch] = useState('');${hasFilters ? '\n  const [filters, setFilters] = useState<Record<string, string>>({});' : ''}
+  const [search, setSearch] = useState('');
+  const [sortField, setSortField] = useState<string>('');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');${hasFilters ? '\n  const [filters, setFilters] = useState<Record<string, string>>({});' : ''}
 
   useEffect(() => {
     fetch('${api}')
       .then((r) => r.json())
-      .then((data: ${entity.name}[]) => setItems(data));
+      .then((res: { data: ${entity.name}[]; total: number }) => setItems(res.data));
   }, []);
 
   const onSearch = useCallback((q: string) => setSearch(q), []);
 
+  const handleSort = useCallback((field: string) => {
+    if (sortField === field) {
+      setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDirection('asc');
+    }
+  }, [sortField]);
+
   const filtered = items.filter((item) => {
     if (search) {
       const q = search.toLowerCase();
@@ -71,6 +87,14 @@ export default function ${entity.name}List() {
     return true;
   });
 
+  const sorted = [...filtered].sort((a, b) => {
+    if (!sortField) return 0;
+    const aVal = (a as Record<string, unknown>)[sortField];
+    const bVal = (b as Record<string, unknown>)[sortField];
+    const cmp = String(aVal ?? '').localeCompare(String(bVal ?? ''), undefined, { numeric: true });
+    return sortDirection === 'asc' ? cmp : -cmp;
+  });
+
   return (
     <div>
       <div className="mb-6 flex items-center justify-between">
@@ -93,7 +117,7 @@ export default function ${entity.name}List() {
 
       {view === 'card' ? (
         <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-          {filtered.map((item) => (
+          {sorted.map((item) => (
             <${entity.name}Card key={item.id} item={item} />
           ))}
         </div>
@@ -105,7 +129,7 @@ ${tableHeaders}
             </tr>
           </thead>
           <tbody>
-            {filtered.map((item) => (
+            {sorted.map((item) => (
               <tr key={item.id} className="border-b border-gray-100 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-800/50">
 ${tableCells}
                 <td className="px-4 py-2">
@@ -160,22 +184,44 @@ function generateDetailPage(model, entity) {
   const [${stateVar}, set${targetEntity.pluralName}] = useState<${rel.target}[]>([]);`;
     })
         .join('');
-    const hasManyFetches = hmRels
+    // Build ?include= param for hasMany targets
+    const includeTargets = hmRels
+        .map((rel) => {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        return targetEntity ? toCamelCase(targetEntity.pluralName) : '';
+    })
+        .filter(Boolean);
+    const includeParam = includeTargets.length > 0 ? `?include=${includeTargets.join(',')}` : '';
+    const hasManySetters = hmRels
         .map((rel) => {
         const targetEntity = model.entities.find((e) => e.name === rel.target);
         if (!targetEntity)
             return '';
-        const fetchApi = apiPath(targetEntity);
-        const fk = fkFieldName(targetEntity.relationships.find((r) => r.type === 'belongsTo' && r.target === entity.name) ?? {
-            type: 'belongsTo',
-            target: entity.name,
-        });
-        return `
-      fetch('${fetchApi}')
-        .then((r) => r.json())
-        .then((data: ${rel.target}[]) => set${targetEntity.pluralName}(data.filter((d) => d.${fk} === Number(id))));`;
+        const varName = toCamelCase(targetEntity.pluralName);
+        return `      set${targetEntity.pluralName}(data.${varName} ?? []);`;
     })
-        .join('');
+        .join('\n');
+    // Build the useEffect block
+    let useEffectBlock;
+    if (hmRels.length > 0) {
+        useEffectBlock =
+            '  useEffect(() => {\n' +
+                `    fetch(\`${api}/\${id as string}${includeParam}\`)\n` +
+                '      .then((r) => r.json())\n' +
+                '      .then((data: Record<string, unknown>) => {\n' +
+                `        setItem(data as unknown as ${entity.name});\n` +
+                hasManySetters +
+                '\n      });\n' +
+                '  }, [id]);';
+    }
+    else {
+        useEffectBlock =
+            '  useEffect(() => {\n' +
+                `    fetch(\`${api}/\${id as string}\`)\n` +
+                '      .then((r) => r.json())\n' +
+                `      .then((data: ${entity.name}) => setItem(data));\n` +
+                '  }, [id]);';
+    }
     const hasManyImports = hmRels.map((rel) => rel.target).join(', ');
     const hasManyTypeImport = hmRels.length > 0 ? `, ${hasManyImports}` : '';
     const hasManyRender = hmRels
@@ -217,11 +263,7 @@ export default function ${entity.name}Detail() {
   const navigate = useNavigate();
   const [item, setItem] = useState<${entity.name} | null>(null);${hasManySection}
 
-  useEffect(() => {
-    fetch(\`${api}/\${id as string}\`)
-      .then((r) => r.json())
-      .then((data: ${entity.name}) => setItem(data));${hasManyFetches}
-  }, [id]);
+${useEffectBlock}
 
   if (!item) return <div className="p-6">Loading...</div>;
 
@@ -330,7 +372,7 @@ function generateForm(model, entity) {
         if (!targetEntity)
             return '';
         const targetApi = apiPath(targetEntity);
-        return `    fetch('${targetApi}').then((r) => r.json()).then((d: ${rel.target}[]) => set${rel.target}Options(d));`;
+        return `    fetch('${targetApi}').then((r) => r.json()).then((res: { data: ${rel.target}[]; total: number }) => set${rel.target}Options(res.data));`;
     })
         .join('\n');
     const relTypeImports = btoRels.map((r) => r.target);

package/dist/toolkits/react-node/types-gen.js

@@ -4,8 +4,34 @@
  * Generates src/types/index.ts with interfaces for each entity.
  */
 import { tsType, fkFieldName, belongsToRels } from './helpers.js';
+const SHARED_TYPES = `// --- Shared API Types ---
+
+export interface PaginatedResponse<T> {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+  totalPages: number;
+}
+
+export interface ApiResponse<T> {
+  data: T;
+  error?: string;
+}
+
+export interface ApiListResponse<T> {
+  data: T[];
+  total: number;
+}
+
+export interface SortParams {
+  field: string;
+  direction: 'asc' | 'desc';
+}`;
 export function generateTypesFile(model) {
     const lines = ['// Auto-generated TypeScript types from Application Model', ''];
+    lines.push(SHARED_TYPES);
+    lines.push('');
     for (const entity of model.entities) {
         lines.push(generateInterface(entity));
         lines.push('');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compilr-dev/factory",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "AI-driven application scaffolder for the compilr-dev ecosystem",
   "type": "module",
   "main": "dist/index.js",