@compilr-dev/factory 0.1.1

package/dist/toolkits/react-node/helpers.d.ts

@@ -0,0 +1,27 @@
+/**
+ * React+Node Toolkit — Shared Helpers
+ *
+ * Utility functions used across generators.
+ */
+import type { Entity, Field, Relationship } from '../../model/types.js';
+/** Indent every line of a multi-line string. */
+export declare function indent(text: string, spaces: number): string;
+/** Map a model FieldType to a TypeScript type string. */
+export declare function tsType(field: Field): string;
+/** Get the FK field name for a belongsTo relationship. */
+export declare function fkFieldName(rel: Relationship): string;
+/** Get belongsTo relationships for an entity. */
+export declare function belongsToRels(entity: Entity): readonly Relationship[];
+/** Get hasMany relationships for an entity. */
+export declare function hasManyRels(entity: Entity): readonly Relationship[];
+/** Generate a route path from entity plural name. */
+export declare function routePath(entity: Entity): string;
+/** Generate an API path from entity plural name. */
+export declare function apiPath(entity: Entity): string;
+/** Map a model FieldType to an HTML input type. */
+export declare function inputType(field: Field): string;
+/** Generate import statement lines. */
+export declare function generateImports(imports: Array<{
+    from: string;
+    names: string[];
+}>): string;

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

@@ -0,0 +1,71 @@
+/**
+ * React+Node Toolkit — Shared Helpers
+ *
+ * Utility functions used across generators.
+ */
+import { toCamelCase, toKebabCase } from '../../model/naming.js';
+/** Indent every line of a multi-line string. */
+export function indent(text, spaces) {
+    const pad = ' '.repeat(spaces);
+    return text
+        .split('\n')
+        .map((line) => (line.trim() === '' ? '' : pad + line))
+        .join('\n');
+}
+/** Map a model FieldType to a TypeScript type string. */
+export function tsType(field) {
+    switch (field.type) {
+        case 'string':
+        case 'enum':
+            return 'string';
+        case 'number':
+            return 'number';
+        case 'boolean':
+            return 'boolean';
+        case 'date':
+            return 'string'; // ISO date string
+        default:
+            return 'string';
+    }
+}
+/** Get the FK field name for a belongsTo relationship. */
+export function fkFieldName(rel) {
+    return rel.fieldName ?? toCamelCase(rel.target) + 'Id';
+}
+/** Get belongsTo relationships for an entity. */
+export function belongsToRels(entity) {
+    return entity.relationships.filter((r) => r.type === 'belongsTo');
+}
+/** Get hasMany relationships for an entity. */
+export function hasManyRels(entity) {
+    return entity.relationships.filter((r) => r.type === 'hasMany');
+}
+/** Generate a route path from entity plural name. */
+export function routePath(entity) {
+    return '/' + toKebabCase(entity.pluralName).toLowerCase();
+}
+/** Generate an API path from entity plural name. */
+export function apiPath(entity) {
+    return '/api/' + toKebabCase(entity.pluralName).toLowerCase();
+}
+/** Map a model FieldType to an HTML input type. */
+export function inputType(field) {
+    switch (field.type) {
+        case 'string':
+            return 'text';
+        case 'number':
+            return 'number';
+        case 'boolean':
+            return 'checkbox';
+        case 'date':
+            return 'date';
+        case 'enum':
+            return 'select';
+        default:
+            return 'text';
+    }
+}
+/** Generate import statement lines. */
+export function generateImports(imports) {
+    return imports.map((i) => `import { ${i.names.join(', ')} } from '${i.from}';`).join('\n');
+}

package/dist/toolkits/react-node/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React+Node Toolkit
+ *
+ * Generates a full-stack MVP: React 18 + Vite + Tailwind + Express.
+ * Deterministic: same ApplicationModel → same output files.
+ */
+import type { FactoryToolkit } from '../types.js';
+export declare const reactNodeToolkit: FactoryToolkit;

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

@@ -0,0 +1,52 @@
+/**
+ * React+Node Toolkit
+ *
+ * Generates a full-stack MVP: React 18 + Vite + Tailwind + Express.
+ * Deterministic: same ApplicationModel → same output files.
+ */
+import { generateConfigFiles } from './config.js';
+import { generateStaticFiles } from './static.js';
+import { generateShellFiles } from './shell.js';
+import { generateSharedComponents } from './shared.js';
+import { generateDashboard } from './dashboard.js';
+import { generateEntityFiles } from './entity.js';
+import { generateRouter } from './router.js';
+import { generateApiFiles } from './api.js';
+import { generateTypesFile } from './types-gen.js';
+export const reactNodeToolkit = {
+    id: 'react-node',
+    name: 'React + Node',
+    description: 'React 18 + Vite + Tailwind CSS + Express — full-stack MVP scaffold',
+    requiredSections: ['identity', 'entities', 'layout', 'features', 'theme'],
+    generate(model) {
+        const warnings = [];
+        const allFiles = [];
+        // Collect files from all generators
+        const generators = [
+            generateConfigFiles(model),
+            generateStaticFiles(model),
+            generateTypesFile(model),
+            generateShellFiles(model),
+            generateSharedComponents(),
+            generateDashboard(model),
+            generateEntityFiles(model),
+            generateRouter(model),
+            generateApiFiles(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: 'react-node',
+            warnings,
+        };
+    },
+};

package/dist/toolkits/react-node/router.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React+Node Toolkit — Router Generator
+ *
+ * Generates src/router.tsx with React Router v6 routes.
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateRouter(model: ApplicationModel): FactoryFile[];

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

@@ -0,0 +1,49 @@
+/**
+ * React+Node Toolkit — Router Generator
+ *
+ * Generates src/router.tsx with React Router v6 routes.
+ */
+import { toKebabCase } from '../../model/naming.js';
+export function generateRouter(model) {
+    const imports = [];
+    const routes = [];
+    // Layout import
+    imports.push("import Layout from './components/layout/Layout';");
+    // Dashboard
+    if (model.features.dashboard) {
+        imports.push("import Dashboard from './pages/Dashboard';");
+        routes.push('      { index: true, element: <Dashboard /> },');
+    }
+    // Entity routes
+    for (const entity of model.entities) {
+        const routeBase = toKebabCase(entity.pluralName).toLowerCase();
+        imports.push(`import ${entity.name}List from './pages/${entity.name}List';`);
+        imports.push(`import ${entity.name}Detail from './pages/${entity.name}Detail';`);
+        imports.push(`import ${entity.name}Form from './components/${routeBase}/${entity.name}Form';`);
+        if (!model.features.dashboard && entity === model.entities[0]) {
+            routes.push(`      { index: true, element: <${entity.name}List /> },`);
+        }
+        routes.push(`      { path: '${routeBase}', element: <${entity.name}List /> },`);
+        routes.push(`      { path: '${routeBase}/new', element: <${entity.name}Form /> },`);
+        routes.push(`      { path: '${routeBase}/:id', element: <${entity.name}Detail /> },`);
+        routes.push(`      { path: '${routeBase}/:id/edit', element: <${entity.name}Form /> },`);
+    }
+    return [
+        {
+            path: 'src/router.tsx',
+            content: `import { createBrowserRouter } from 'react-router-dom';
+${imports.join('\n')}
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+${routes.join('\n')}
+    ],
+  },
+]);
+`,
+        },
+    ];
+}

package/dist/toolkits/react-node/seed.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React+Node Toolkit — Seed Data Generator
+ *
+ * Generates realistic mock data based on field semantics.
+ * Deterministic: same input → same output (uses index-based logic, not Math.random).
+ */
+import type { ApplicationModel, Entity } from '../../model/types.js';
+declare const SEED_COUNT = 8;
+/** Generate seed data items for a single entity. */
+export declare function generateSeedData(model: ApplicationModel, entity: Entity): string;
+export { SEED_COUNT };

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

@@ -0,0 +1,144 @@
+/**
+ * React+Node Toolkit — Seed Data Generator
+ *
+ * Generates realistic mock data based on field semantics.
+ * Deterministic: same input → same output (uses index-based logic, not Math.random).
+ */
+import { toCamelCase } from '../../model/naming.js';
+import { belongsToRels, fkFieldName } from './helpers.js';
+const PERSON_NAMES = [
+    'Alice Johnson',
+    'Bob Smith',
+    'Carol Davis',
+    'David Lee',
+    'Eva Martinez',
+    'Frank Wilson',
+    'Grace Chen',
+    'Henry Brown',
+    'Iris Kim',
+    'Jack Taylor',
+];
+const COMPANY_NAMES = [
+    'Acme Corp',
+    'TechVista Inc',
+    'BlueSky Solutions',
+    'Greenfield LLC',
+    'Summit Dynamics',
+    'Cascade Systems',
+    'Meridian Labs',
+    'Atlas Ventures',
+];
+const PRODUCT_NAMES = [
+    'Premium Widget',
+    'Standard Package',
+    'Enterprise Suite',
+    'Starter Kit',
+    'Pro Bundle',
+    'Deluxe Edition',
+    'Basic Plan',
+    'Advanced Toolkit',
+];
+const DESCRIPTIONS = [
+    'A comprehensive solution for modern needs.',
+    'Designed for efficiency and reliability.',
+    'Built with quality and care.',
+    'Perfect for teams of any size.',
+    'Streamlined for maximum productivity.',
+    'Industry-leading performance.',
+    'Trusted by thousands of users.',
+    'Next-generation technology.',
+];
+const EMAILS = [
+    'alice@example.com',
+    'bob@example.com',
+    'carol@example.com',
+    'david@example.com',
+    'eva@example.com',
+    'frank@example.com',
+    'grace@example.com',
+    'henry@example.com',
+];
+const SEED_COUNT = 8;
+function generateFieldValue(field, index, entityName) {
+    const lowerName = field.name.toLowerCase();
+    const lowerEntity = entityName.toLowerCase();
+    switch (field.type) {
+        case 'string':
+            if (lowerName.includes('email'))
+                return `'${EMAILS[index % EMAILS.length]}'`;
+            if (lowerName.includes('name') || lowerName === 'title') {
+                if (lowerEntity.includes('customer') ||
+                    lowerEntity.includes('user') ||
+                    lowerEntity.includes('person') ||
+                    lowerEntity.includes('employee')) {
+                    return `'${PERSON_NAMES[index % PERSON_NAMES.length]}'`;
+                }
+                if (lowerEntity.includes('company') || lowerEntity.includes('organization')) {
+                    return `'${COMPANY_NAMES[index % COMPANY_NAMES.length]}'`;
+                }
+                return `'${PRODUCT_NAMES[index % PRODUCT_NAMES.length]}'`;
+            }
+            if (lowerName.includes('description') ||
+                lowerName.includes('note') ||
+                lowerName.includes('comment')) {
+                return `'${DESCRIPTIONS[index % DESCRIPTIONS.length]}'`;
+            }
+            if (lowerName.includes('phone'))
+                return `'555-010${String(index)}'`;
+            if (lowerName.includes('address'))
+                return `'${String(100 + index * 10)} Main St'`;
+            return `'${field.label} ${String(index + 1)}'`;
+        case 'number':
+            if (lowerName.includes('price') || lowerName.includes('cost') || lowerName.includes('amount'))
+                return String(10 + index * 15 + 0.99);
+            if (lowerName.includes('quantity') || lowerName.includes('count'))
+                return String(1 + (index % 10));
+            if (lowerName.includes('age'))
+                return String(22 + index * 5);
+            if (lowerName.includes('size') || lowerName.includes('capacity'))
+                return String(2 + (index % 8));
+            return String(index + 1);
+        case 'boolean':
+            return index % 2 === 0 ? 'true' : 'false';
+        case 'date': {
+            const base = new Date('2025-06-15');
+            base.setDate(base.getDate() + (index * 3 - 10));
+            return `'${base.toISOString().split('T')[0]}'`;
+        }
+        case 'enum': {
+            const values = field.enumValues ?? [];
+            if (values.length === 0)
+                return "''";
+            return `'${values[index % values.length]}'`;
+        }
+        default:
+            return `'${field.label} ${String(index + 1)}'`;
+    }
+}
+/** Generate seed data items for a single entity. */
+export function generateSeedData(model, entity) {
+    const varName = toCamelCase(entity.pluralName);
+    const rels = belongsToRels(entity);
+    const lines = [];
+    lines.push(`export const ${varName}SeedData = [`);
+    for (let i = 0; i < SEED_COUNT; i++) {
+        lines.push('  {');
+        lines.push(`    id: ${String(i + 1)},`);
+        for (const field of entity.fields) {
+            const value = generateFieldValue(field, i, entity.name);
+            lines.push(`    ${field.name}: ${value},`);
+        }
+        // FK fields from belongsTo relationships
+        for (const rel of rels) {
+            const fk = fkFieldName(rel);
+            // Assign FK cycling through target's seed data
+            const targetEntity = model.entities.find((e) => e.name === rel.target);
+            const targetCount = targetEntity ? SEED_COUNT : SEED_COUNT;
+            lines.push(`    ${fk}: ${String((i % targetCount) + 1)},`);
+        }
+        lines.push('  },');
+    }
+    lines.push('];');
+    return lines.join('\n');
+}
+export { SEED_COUNT };

package/dist/toolkits/react-node/shared.d.ts

@@ -0,0 +1,7 @@
+/**
+ * React+Node Toolkit — Shared Components Generator
+ *
+ * Generates: ViewToggle.tsx, SearchBar.tsx, FilterBar.tsx
+ */
+import type { FactoryFile } from '../types.js';
+export declare function generateSharedComponents(): FactoryFile[];

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

@@ -0,0 +1,119 @@
+/**
+ * React+Node Toolkit — Shared Components Generator
+ *
+ * Generates: ViewToggle.tsx, SearchBar.tsx, FilterBar.tsx
+ */
+export function generateSharedComponents() {
+    return [generateViewToggle(), generateSearchBar(), generateFilterBar()];
+}
+function generateViewToggle() {
+    return {
+        path: 'src/components/shared/ViewToggle.tsx',
+        content: `interface ViewToggleProps {
+  view: 'card' | 'list';
+  onChange: (view: 'card' | 'list') => void;
+}
+
+export default function ViewToggle({ view, onChange }: ViewToggleProps) {
+  return (
+    <div className="flex rounded-lg border border-gray-300 dark:border-gray-600">
+      <button
+        onClick={() => onChange('card')}
+        className={\`px-3 py-1 text-sm \${view === 'card' ? 'bg-primary text-white' : 'text-gray-600 dark:text-gray-300'}\`}
+      >
+        Grid
+      </button>
+      <button
+        onClick={() => onChange('list')}
+        className={\`px-3 py-1 text-sm \${view === 'list' ? 'bg-primary text-white' : 'text-gray-600 dark:text-gray-300'}\`}
+      >
+        List
+      </button>
+    </div>
+  );
+}
+`,
+    };
+}
+function generateSearchBar() {
+    return {
+        path: 'src/components/shared/SearchBar.tsx',
+        content: `import { useState, useEffect } from 'react';
+
+interface SearchBarProps {
+  onSearch: (query: string) => void;
+  placeholder?: string;
+}
+
+export default function SearchBar({ onSearch, placeholder = 'Search...' }: SearchBarProps) {
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    const timer = setTimeout(() => onSearch(value), 300);
+    return () => clearTimeout(timer);
+  }, [value, onSearch]);
+
+  return (
+    <div className="relative">
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder={placeholder}
+        className="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-primary focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+      />
+      {value && (
+        <button
+          onClick={() => setValue('')}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+        >
+          ×
+        </button>
+      )}
+    </div>
+  );
+}
+`,
+    };
+}
+function generateFilterBar() {
+    return {
+        path: 'src/components/shared/FilterBar.tsx',
+        content: `interface FilterOption {
+  label: string;
+  field: string;
+  values: string[];
+}
+
+interface FilterBarProps {
+  filters: FilterOption[];
+  active: Record<string, string>;
+  onChange: (field: string, value: string) => void;
+}
+
+export default function FilterBar({ filters, active, onChange }: FilterBarProps) {
+  if (filters.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {filters.map((filter) => (
+        <select
+          key={filter.field}
+          value={active[filter.field] ?? ''}
+          onChange={(e) => onChange(filter.field, e.target.value)}
+          className="rounded-lg border border-gray-300 px-3 py-1 text-sm dark:border-gray-600 dark:bg-gray-800 dark:text-white"
+        >
+          <option value="">{filter.label}: All</option>
+          {filter.values.map((v) => (
+            <option key={v} value={v}>
+              {v}
+            </option>
+          ))}
+        </select>
+      ))}
+    </div>
+  );
+}
+`,
+    };
+}

package/dist/toolkits/react-node/shell.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React+Node Toolkit — Shell Generator
+ *
+ * Generates: App.tsx, Layout.tsx, Sidebar.tsx, Header.tsx
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateShellFiles(model: ApplicationModel): FactoryFile[];

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

@@ -0,0 +1,152 @@
+/**
+ * React+Node Toolkit — Shell Generator
+ *
+ * Generates: App.tsx, Layout.tsx, Sidebar.tsx, Header.tsx
+ */
+import { toKebabCase } from '../../model/naming.js';
+export function generateShellFiles(model) {
+    return [generateApp(model), generateLayout(model), generateSidebar(model), generateHeader(model)];
+}
+function generateApp(_model) {
+    return {
+        path: 'src/App.tsx',
+        content: `import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+
+export default function App() {
+  return <RouterProvider router={router} />;
+}
+`,
+    };
+}
+function generateLayout(model) {
+    const hasSidebar = model.layout.shell === 'sidebar-header';
+    if (hasSidebar) {
+        return {
+            path: 'src/components/layout/Layout.tsx',
+            content: `import { Outlet } from 'react-router-dom';
+import Sidebar from './Sidebar';
+import Header from './Header';
+
+export default function Layout() {
+  return (
+    <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
+`,
+        };
+    }
+    return {
+        path: 'src/components/layout/Layout.tsx',
+        content: `import { Outlet } from 'react-router-dom';
+import Header from './Header';
+
+export default function Layout() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <Header />
+      <main className="mx-auto max-w-7xl p-6">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+`,
+    };
+}
+function generateSidebar(model) {
+    const navItems = model.entities
+        .map((e) => {
+        const path = '/' + toKebabCase(e.pluralName).toLowerCase();
+        return `  { label: '${e.icon} ${e.pluralName}', path: '${path}' },`;
+    })
+        .join('\n');
+    return {
+        path: 'src/components/layout/Sidebar.tsx',
+        content: `import { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+const navItems = [
+${navItems}
+];
+
+export default function Sidebar() {
+  const [collapsed, setCollapsed] = useState(false);
+  const location = useLocation();
+
+  return (
+    <aside
+      className={\`\${collapsed ? 'w-16' : 'w-64'} flex flex-col border-r border-gray-200 bg-white transition-all dark:border-gray-700 dark:bg-gray-800\`}
+    >
+      <div className="flex h-14 items-center justify-between px-4">
+        {!collapsed && (
+          <span className="text-lg font-bold text-gray-900 dark:text-white">
+            ${model.identity.name}
+          </span>
+        )}
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          className="rounded p-1 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700"
+        >
+          {collapsed ? '→' : '←'}
+        </button>
+      </div>
+      <nav className="flex-1 space-y-1 px-2 py-4">
+        {navItems.map((item) => (
+          <Link
+            key={item.path}
+            to={item.path}
+            className={\`flex items-center rounded-lg px-3 py-2 text-sm font-medium \${
+              location.pathname.startsWith(item.path)
+                ? 'bg-primary/10 text-primary'
+                : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+            }\`}
+          >
+            {collapsed ? item.label.slice(0, 2) : item.label}
+          </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-700"
+        >
+          🌓
+        </button>`
+        : '';
+    return {
+        path: 'src/components/layout/Header.tsx',
+        content: `import { useLocation } from 'react-router-dom';
+
+export default function Header() {
+  const location = useLocation();
+  const path = location.pathname.split('/').filter(Boolean);
+  const breadcrumb = path.length > 0 ? path.join(' / ') : 'Home';
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-gray-200 bg-white px-6 dark:border-gray-700 dark:bg-gray-800">
+      <span className="text-sm text-gray-500 dark:text-gray-400">{breadcrumb}</span>
+      <div className="flex items-center gap-2">${darkModeToggle}
+      </div>
+    </header>
+  );
+}
+`,
+    };
+}

package/dist/toolkits/react-node/static.d.ts

@@ -0,0 +1,8 @@
+/**
+ * React+Node Toolkit — Static Files Generator
+ *
+ * Generates: .gitignore, .env.example, README.md, index.html, src/main.tsx, src/index.css
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateStaticFiles(model: ApplicationModel): FactoryFile[];