@compilr-dev/factory 0.1.7 → 0.1.8

package/dist/toolkits/next-prisma/entity-pages.js

@@ -0,0 +1,348 @@
+/**
+ * Next.js + Prisma Toolkit — Entity Pages Generator
+ *
+ * For each entity generates:
+ *   app/[route]/page.tsx       — List page (Server + Client)
+ *   app/[route]/[id]/page.tsx  — Detail page (Server Component)
+ *   app/[route]/new/page.tsx   — New form wrapper
+ *   app/[route]/[id]/edit/page.tsx — Edit form wrapper
+ */
+import { toCamelCase } from '../../model/naming.js';
+import { belongsToRels, hasManyRels, appRoutePath } from './helpers.js';
+export function generateEntityPages(model) {
+    return model.entities.flatMap((entity) => [
+        generateListPage(model, entity),
+        generateDetailPage(model, entity),
+        generateNewPage(entity),
+        generateEditPage(model, entity),
+    ]);
+}
+// =============================================================================
+// List Page — Server Component + Client Component for filtering
+// =============================================================================
+function generateListPage(model, entity) {
+    const route = appRoutePath(entity);
+    const camel = toCamelCase(entity.name);
+    const enumFields = entity.fields.filter((f) => f.type === 'enum' && f.enumValues?.length);
+    const hasFilters = enumFields.length > 0;
+    const filterDefs = hasFilters
+        ? enumFields
+            .map((f) => `  { label: '${f.label}', field: '${f.name}', values: [${(f.enumValues ?? []).map((v) => `'${v}'`).join(', ')}] },`)
+            .join('\n')
+        : '';
+    const tableHeaders = entity.fields
+        .slice(0, 5)
+        .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)
+        .map((f) => `              <td className="px-4 py-2 text-sm text-gray-700 dark:text-gray-300">{String(item.${f.name})}</td>`)
+        .join('\n');
+    return {
+        path: `app/${route}/page.tsx`,
+        content: `import { prisma } from '@/lib/prisma';
+import ${entity.name}ListClient from './${entity.name}ListClient';
+
+export default async function ${entity.name}Page() {
+  const items = await prisma.${camel}.findMany({
+    orderBy: { createdAt: 'desc' },
+  });
+
+  return <${entity.name}ListClient items={JSON.parse(JSON.stringify(items))} />;
+}
+
+// --- Client Component ---
+// This is in the same file for simplicity; can be extracted to a separate file.
+
+'use client';
+
+import { useState, useCallback } from 'react';
+import Link from 'next/link';
+import ViewToggle from '@/components/shared/ViewToggle';
+import SearchBar from '@/components/shared/SearchBar';${hasFilters ? "\nimport FilterBar from '@/components/shared/FilterBar';" : ''}
+import ${entity.name}Card from '@/components/${route}/${entity.name}Card';
+
+${hasFilters ? `const filterOptions = [\n${filterDefs}\n];\n` : ''}interface ${entity.name}ListClientProps {
+  items: Array<Record<string, unknown>>;
+}
+
+function ${entity.name}ListClient({ items: initialItems }: ${entity.name}ListClientProps) {
+  const [view, setView] = useState<'card' | 'list'>('card');
+  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>>({});' : ''}
+
+  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 = initialItems.filter((item) => {
+    if (search) {
+      const q = search.toLowerCase();
+      const match = Object.values(item).some((v) =>
+        String(v).toLowerCase().includes(q),
+      );
+      if (!match) return false;
+    }${hasFilters
+            ? `
+    for (const [field, value] of Object.entries(filters)) {
+      if (value && String(item[field]) !== value) return false;
+    }`
+            : ''}
+    return true;
+  });
+
+  const sorted = [...filtered].sort((a, b) => {
+    if (!sortField) return 0;
+    const aVal = a[sortField];
+    const bVal = b[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">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">${entity.icon} ${entity.pluralName}</h1>
+        <div className="flex items-center gap-3">
+          <ViewToggle view={view} onChange={setView} />
+          <Link
+            href="/${route}/new"
+            className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+          >
+            + New ${entity.name}
+          </Link>
+        </div>
+      </div>
+
+      <div className="mb-4 flex flex-wrap items-center gap-3">
+        <div className="w-64">
+          <SearchBar onSearch={onSearch} placeholder="Search ${entity.pluralName.toLowerCase()}..." />${hasFilters ? '\n        </div>\n        <FilterBar filters={filterOptions} active={filters} onChange={(f, v) => setFilters({ ...filters, [f]: v })} />' : '\n        </div>'}
+      </div>
+
+      {view === 'card' ? (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {sorted.map((item) => (
+            <${entity.name}Card key={String(item.id)} item={item} />
+          ))}
+        </div>
+      ) : (
+        <table className="w-full border-collapse">
+          <thead>
+            <tr className="border-b border-gray-200 dark:border-gray-700">
+${tableHeaders}
+            </tr>
+          </thead>
+          <tbody>
+            {sorted.map((item) => (
+              <tr key={String(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">
+                  <Link href={\`/${route}/\${String(item.id)}\`} className="text-sm text-primary hover:underline">View</Link>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}
+`,
+    };
+}
+// =============================================================================
+// Detail Page — Server Component
+// =============================================================================
+function generateDetailPage(model, entity) {
+    const route = appRoutePath(entity);
+    const camel = toCamelCase(entity.name);
+    const fieldRows = entity.fields
+        .map((f) => `          <div>
+            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">${f.label}</dt>
+            <dd className="mt-1 text-gray-900 dark:text-white">{String(item.${f.name}${f.required ? '' : " ?? '—'"})}</dd>
+          </div>`)
+        .join('\n');
+    const btoRels = belongsToRels(entity);
+    const hmRels = hasManyRels(entity);
+    // Build include object for belongsTo and hasMany
+    const includeEntries = [];
+    for (const rel of btoRels) {
+        const relField = toCamelCase(rel.target);
+        includeEntries.push(`      ${relField}: true,`);
+    }
+    for (const rel of hmRels) {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        if (!targetEntity)
+            continue;
+        const relField = toCamelCase(targetEntity.pluralName);
+        includeEntries.push(`      ${relField}: true,`);
+    }
+    const includeClause = includeEntries.length > 0 ? `\n    include: {\n${includeEntries.join('\n')}\n    },` : '';
+    const relLinks = btoRels
+        .map((rel) => {
+        const relField = toCamelCase(rel.target);
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        const targetRoute = targetEntity ? appRoutePath(targetEntity) : toCamelCase(rel.target);
+        return `          <div>
+            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">${rel.target}</dt>
+            <dd className="mt-1">
+              {item.${relField} && (
+                <Link href={\`/${targetRoute}/\${String(item.${relField}.id)}\`} className="text-primary hover:underline">
+                  View ${rel.target}
+                </Link>
+              )}
+            </dd>
+          </div>`;
+    })
+        .join('\n');
+    const hasManyRender = hmRels
+        .map((rel) => {
+        const targetEntity = model.entities.find((e) => e.name === rel.target);
+        if (!targetEntity)
+            return '';
+        const targetRoute = appRoutePath(targetEntity);
+        const relField = toCamelCase(targetEntity.pluralName);
+        const firstField = targetEntity.fields[0]?.name ?? 'id';
+        return `
+      <div className="mt-8">
+        <h2 className="mb-4 text-lg font-bold text-gray-900 dark:text-white">${targetEntity.icon} ${targetEntity.pluralName}</h2>
+        <div className="space-y-2">
+          {item.${relField}.map((rel: Record<string, unknown>) => (
+            <Link
+              key={String(rel.id)}
+              href={\`/${targetRoute}/\${String(rel.id)}\`}
+              className="block rounded-lg border border-gray-200 p-3 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
+            >
+              {String(rel.${firstField})}
+            </Link>
+          ))}
+          {item.${relField}.length === 0 && (
+            <p className="text-sm text-gray-500">No ${targetEntity.pluralName.toLowerCase()} found.</p>
+          )}
+        </div>
+      </div>`;
+    })
+        .join('');
+    return {
+        path: `app/${route}/[id]/page.tsx`,
+        content: `import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import { prisma } from '@/lib/prisma';
+import ${entity.name}DeleteButton from './${entity.name}DeleteButton';
+
+export default async function ${entity.name}Detail({ params }: { params: { id: string } }) {
+  const item = await prisma.${camel}.findUnique({
+    where: { id: Number(params.id) },${includeClause}
+  }) as Record<string, unknown> | null;
+
+  if (!item) notFound();
+
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">${entity.icon} ${entity.name} Detail</h1>
+        <div className="flex gap-2">
+          <Link
+            href={\`/${route}/\${String(params.id)}/edit\`}
+            className="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+          >
+            Edit
+          </Link>
+          <${entity.name}DeleteButton id={Number(params.id)} />
+        </div>
+      </div>
+
+      <dl className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+${fieldRows}
+          <div>
+            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Created</dt>
+            <dd className="mt-1 text-gray-900 dark:text-white">{new Date(item.createdAt as string).toLocaleString()}</dd>
+          </div>
+          <div>
+            <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">Last Updated</dt>
+            <dd className="mt-1 text-gray-900 dark:text-white">{new Date(item.updatedAt as string).toLocaleString()}</dd>
+          </div>
+${relLinks}
+      </dl>${hasManyRender}
+    </div>
+  );
+}
+
+// --- Delete Button (Client Component) ---
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+function ${entity.name}DeleteButton({ id }: { id: number }) {
+  const router = useRouter();
+
+  const handleDelete = async () => {
+    if (!confirm('Are you sure you want to delete this ${entity.name.toLowerCase()}?')) return;
+    await fetch(\`/api/${route}/\${String(id)}\`, { method: 'DELETE' });
+    router.push('/${route}');
+  };
+
+  return (
+    <button
+      onClick={handleDelete}
+      className="rounded-lg bg-red-500 px-4 py-2 text-sm font-medium text-white hover:opacity-90"
+    >
+      Delete
+    </button>
+  );
+}
+`,
+    };
+}
+// =============================================================================
+// New Page
+// =============================================================================
+function generateNewPage(entity) {
+    const route = appRoutePath(entity);
+    return {
+        path: `app/${route}/new/page.tsx`,
+        content: `import ${entity.name}Form from '@/components/${route}/${entity.name}Form';
+
+export default function New${entity.name}Page() {
+  return <${entity.name}Form />;
+}
+`,
+    };
+}
+// =============================================================================
+// Edit Page — Server Component that fetches data and passes to Client Form
+// =============================================================================
+function generateEditPage(model, entity) {
+    const route = appRoutePath(entity);
+    const camel = toCamelCase(entity.name);
+    return {
+        path: `app/${route}/[id]/edit/page.tsx`,
+        content: `import { notFound } from 'next/navigation';
+import { prisma } from '@/lib/prisma';
+import ${entity.name}Form from '@/components/${route}/${entity.name}Form';
+
+export default async function Edit${entity.name}Page({ params }: { params: { id: string } }) {
+  const item = await prisma.${camel}.findUnique({
+    where: { id: Number(params.id) },
+  });
+
+  if (!item) notFound();
+
+  return <${entity.name}Form initialData={JSON.parse(JSON.stringify(item))} />;
+}
+`,
+    };
+}

package/dist/toolkits/next-prisma/helpers.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Next.js + Prisma Toolkit — Helpers
+ *
+ * Toolkit-specific helper functions for the next-prisma generator.
+ */
+import type { Entity, Field } from '../../model/types.js';
+export { indent, tsType, fkFieldName, belongsToRels, hasManyRels, inputType, } from '../shared/helpers.js';
+/** Map a model FieldType to a Prisma schema type. */
+export declare function prismaFieldType(field: Field): string;
+/** Get the PascalCase model name for Prisma. */
+export declare function prismaModelName(entity: Entity): string;
+/** Get the kebab-case route segment for App Router file paths. */
+export declare function appRoutePath(entity: Entity): string;

package/dist/toolkits/next-prisma/helpers.js

@@ -0,0 +1,37 @@
+/**
+ * Next.js + Prisma Toolkit — Helpers
+ *
+ * Toolkit-specific helper functions for the next-prisma generator.
+ */
+import { toPascalCase, toKebabCase } from '../../model/naming.js';
+// Re-export shared helpers for convenience
+export { indent, tsType, fkFieldName, belongsToRels, hasManyRels, inputType, } from '../shared/helpers.js';
+/** Map a model FieldType to a Prisma schema type. */
+export function prismaFieldType(field) {
+    switch (field.type) {
+        case 'string':
+        case 'enum':
+            return 'String';
+        case 'number': {
+            const lower = field.name.toLowerCase();
+            if (lower.includes('price') || lower.includes('cost') || lower.includes('amount')) {
+                return 'Float';
+            }
+            return 'Int';
+        }
+        case 'boolean':
+            return 'Boolean';
+        case 'date':
+            return 'DateTime';
+        default:
+            return 'String';
+    }
+}
+/** Get the PascalCase model name for Prisma. */
+export function prismaModelName(entity) {
+    return toPascalCase(entity.name);
+}
+/** Get the kebab-case route segment for App Router file paths. */
+export function appRoutePath(entity) {
+    return toKebabCase(entity.pluralName).toLowerCase();
+}

package/dist/toolkits/next-prisma/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Next.js + Prisma Toolkit
+ *
+ * Generates a full-stack app: Next.js 14 App Router + Prisma ORM + Tailwind CSS.
+ * Server Components for data fetching, Client Components for interactivity.
+ * Deterministic: same ApplicationModel → same output files.
+ */
+import type { FactoryToolkit } from '../types.js';
+export declare const nextPrismaToolkit: FactoryToolkit;

package/dist/toolkits/next-prisma/index.js

@@ -0,0 +1,57 @@
+/**
+ * Next.js + Prisma Toolkit
+ *
+ * Generates a full-stack app: Next.js 14 App Router + Prisma ORM + Tailwind CSS.
+ * Server Components for data fetching, Client Components for interactivity.
+ * Deterministic: same ApplicationModel → same output files.
+ */
+import { generateConfigFiles } from './config.js';
+import { generatePrismaFiles } from './prisma.js';
+import { generateTypesFile } from './types-gen.js';
+import { generateStaticFiles } from './static.js';
+import { generateSharedComponents } from '../shared/components.js';
+import { generateLayoutFiles } from './layout.js';
+import { generateDashboard } from './dashboard.js';
+import { generateEntityPages } from './entity-pages.js';
+import { generateEntityComponents } from './entity-components.js';
+import { generateApiRoutes } from './api-routes.js';
+import { generateSeedFile } from './seed.js';
+export const nextPrismaToolkit = {
+    id: 'next-prisma',
+    name: 'Next.js + Prisma',
+    description: 'Next.js 14 App Router + Prisma ORM + Tailwind CSS — production-ready full-stack',
+    requiredSections: ['identity', 'entities', 'layout', 'features', 'theme'],
+    generate(model) {
+        const warnings = [];
+        const allFiles = [];
+        // Collect files from all generators
+        const generators = [
+            generateConfigFiles(model),
+            generatePrismaFiles(model),
+            generateTypesFile(model),
+            generateStaticFiles(model),
+            generateSharedComponents(),
+            generateLayoutFiles(model),
+            generateDashboard(model),
+            generateEntityPages(model),
+            generateEntityComponents(model),
+            generateApiRoutes(model),
+            generateSeedFile(model),
+        ];
+        for (const files of generators) {
+            allFiles.push(...files);
+        }
+        // Check for potential issues
+        if (model.entities.length === 0) {
+            warnings.push('No entities defined — generated app will have minimal functionality.');
+        }
+        if (model.entities.length > 10) {
+            warnings.push('Large number of entities — generated sidebar may be crowded.');
+        }
+        return {
+            files: allFiles,
+            toolkit: 'next-prisma',
+            warnings,
+        };
+    },
+};

package/dist/toolkits/next-prisma/layout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Next.js + Prisma Toolkit — Layout Generator
+ *
+ * Generates: app/layout.tsx, app/globals.css,
+ * components/layout/Sidebar.tsx, components/layout/Header.tsx
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateLayoutFiles(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/next-prisma/layout.js

@@ -0,0 +1,157 @@
+/**
+ * Next.js + Prisma Toolkit — Layout Generator
+ *
+ * Generates: app/layout.tsx, app/globals.css,
+ * components/layout/Sidebar.tsx, components/layout/Header.tsx
+ */
+import { appRoutePath } from './helpers.js';
+export function generateLayoutFiles(model) {
+    return [
+        generateRootLayout(model),
+        generateGlobalCss(),
+        generateSidebar(model),
+        generateHeader(model),
+    ];
+}
+function generateRootLayout(model) {
+    return {
+        path: 'app/layout.tsx',
+        content: `import type { Metadata } from 'next';
+import './globals.css';
+import Sidebar from '@/components/layout/Sidebar';
+import Header from '@/components/layout/Header';
+
+export const metadata: Metadata = {
+  title: '${model.identity.name}',
+  description: '${model.identity.description}',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100">
+        <div className="flex h-screen">
+          <Sidebar />
+          <div className="flex flex-1 flex-col overflow-hidden">
+            <Header />
+            <main className="flex-1 overflow-y-auto p-6">{children}</main>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}
+`,
+    };
+}
+function generateGlobalCss() {
+    return {
+        path: 'app/globals.css',
+        content: `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+`,
+    };
+}
+function generateSidebar(model) {
+    const navItems = model.entities
+        .map((e) => {
+        const path = appRoutePath(e);
+        return `    { name: '${e.pluralName}', icon: '${e.icon}', href: '/${path}' },`;
+    })
+        .join('\n');
+    return {
+        path: 'components/layout/Sidebar.tsx',
+        content: `'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const navItems = [
+    { name: 'Dashboard', icon: '🏠', href: '/' },
+${navItems}
+];
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <aside
+      className={\`flex flex-col border-r border-gray-200 bg-white transition-all dark:border-gray-800 dark:bg-gray-900 \${collapsed ? 'w-16' : 'w-64'}\`}
+    >
+      <div className="flex h-14 items-center justify-between border-b border-gray-200 px-4 dark:border-gray-800">
+        {!collapsed && (
+          <span className="text-lg font-bold text-gray-900 dark:text-white">${model.identity.name}</span>
+        )}
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+        >
+          {collapsed ? '→' : '←'}
+        </button>
+      </div>
+      <nav className="flex-1 space-y-1 p-2">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href || (item.href !== '/' && pathname.startsWith(item.href));
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={\`flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors \${
+                isActive
+                  ? 'bg-primary/10 text-primary font-medium'
+                  : 'text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'
+              }\`}
+            >
+              <span className="text-lg">{item.icon}</span>
+              {!collapsed && <span>{item.name}</span>}
+            </Link>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
+`,
+    };
+}
+function generateHeader(model) {
+    const darkModeToggle = model.features.darkMode
+        ? `
+      <button
+        onClick={() => document.documentElement.classList.toggle('dark')}
+        className="rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+      >
+        🌓
+      </button>`
+        : '';
+    return {
+        path: 'components/layout/Header.tsx',
+        content: `'use client';
+
+import { usePathname } from 'next/navigation';
+
+export default function Header() {
+  const pathname = usePathname();
+  const segments = pathname.split('/').filter(Boolean);
+  const title = segments.length > 0
+    ? segments[segments.length - 1].replace(/-/g, ' ').replace(/\\b\\w/g, (c) => c.toUpperCase())
+    : 'Dashboard';
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-6 dark:border-gray-800 dark:bg-gray-900">
+      <h1 className="text-lg font-semibold text-gray-900 dark:text-white">{title}</h1>
+      <div className="flex items-center gap-2">${darkModeToggle}
+      </div>
+    </header>
+  );
+}
+`,
+    };
+}

package/dist/toolkits/next-prisma/prisma.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Next.js + Prisma Toolkit — Prisma Schema Generator
+ *
+ * Generates: prisma/schema.prisma, lib/prisma.ts
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generatePrismaFiles(model: ApplicationModel): FactoryFile[];