@codeyam/codeyam-cli 0.1.0-staging.8df382d → 0.1.0-staging.a890816

package/codeyam-cli/templates/isolation-route/next-pages.tsx.template

@@ -0,0 +1,79 @@
+/**
+ * CodeYam Isolation Route — Next.js Pages Router
+ *
+ * Place this file at: pages/__codeyam__/[component]/[scenario].tsx
+ *
+ * This route dynamically imports a component and renders it with mock data
+ * from the specified scenario, enabling isolated component preview.
+ *
+ * Usage: http://localhost:3000/__codeyam__/TaskCard/Default
+ */
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+interface ScenarioData {
+  mockData: Record<string, unknown>;
+}
+
+export default function CodeYamIsolationPage() {
+  const router = useRouter();
+  const { component: componentName, scenario: scenarioSlug } = router.query;
+
+  const [Component, setComponent] = useState<React.ComponentType<any> | null>(null);
+  const [mockData, setMockData] = useState<Record<string, unknown> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!componentName || !scenarioSlug) return;
+
+    async function loadComponent() {
+      try {
+        // Fetch scenario data from CodeYam API
+        const res = await fetch(
+          `http://localhost:${process.env.NEXT_PUBLIC_CODEYAM_PORT || '3111'}/api/editor-scenario-data?component=${componentName}&scenario=${scenarioSlug}`
+        );
+        if (res.ok) {
+          const data: ScenarioData = await res.json();
+          setMockData(data.mockData);
+        }
+
+        // Try to dynamically import the component
+        // Claude should update this mapping when adding new components
+        const componentModules: Record<string, () => Promise<any>> = {
+          // Example: 'TaskCard': () => import('../components/TaskCard'),
+        };
+
+        const loader = componentModules[componentName as string];
+        if (loader) {
+          const mod = await loader();
+          setComponent(() => mod.default || mod[componentName as string]);
+        } else {
+          setError(`Component "${componentName}" not registered in isolation route`);
+        }
+      } catch (err) {
+        setError(`Failed to load component: ${err}`);
+      }
+    }
+
+    void loadComponent();
+  }, [componentName, scenarioSlug]);
+
+  if (error) {
+    return (
+      <div style={{ padding: 24, fontFamily: 'monospace', color: '#e74c3c' }}>
+        <h2>CodeYam Isolation Error</h2>
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  if (!Component || !mockData) {
+    return (
+      <div style={{ padding: 24, fontFamily: 'monospace', color: '#666' }}>
+        Loading {componentName} / {scenarioSlug}...
+      </div>
+    );
+  }
+
+  return <Component {...mockData} />;
+}

package/codeyam-cli/templates/isolation-route/vite-react.tsx.template

@@ -0,0 +1,78 @@
+/**
+ * CodeYam Isolation Route — Vite + React
+ *
+ * Add this route to your React Router config.
+ * For example, in your router setup:
+ *   { path: '/__codeyam__/:component/:scenario', element: <CodeYamIsolation /> }
+ *
+ * Usage: http://localhost:5173/__codeyam__/TaskCard/Default
+ */
+import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+
+interface ScenarioData {
+  mockData: Record<string, unknown>;
+}
+
+export default function CodeYamIsolation() {
+  const { component: componentName, scenario: scenarioSlug } = useParams();
+
+  const [Component, setComponent] = useState<React.ComponentType<any> | null>(null);
+  const [mockData, setMockData] = useState<Record<string, unknown> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!componentName || !scenarioSlug) return;
+
+    async function loadComponent() {
+      try {
+        // Fetch scenario data from CodeYam API
+        const codeyamPort = import.meta.env.VITE_CODEYAM_PORT || '3111';
+        const res = await fetch(
+          `http://localhost:${codeyamPort}/api/editor-scenario-data?component=${componentName}&scenario=${scenarioSlug}`
+        );
+        if (res.ok) {
+          const data: ScenarioData = await res.json();
+          setMockData(data.mockData);
+        }
+
+        // Try to dynamically import the component
+        // Claude should update this mapping when adding new components
+        const componentModules: Record<string, () => Promise<any>> = {
+          // Example: 'TaskCard': () => import('./components/TaskCard'),
+        };
+
+        const loader = componentModules[componentName];
+        if (loader) {
+          const mod = await loader();
+          setComponent(() => mod.default || mod[componentName]);
+        } else {
+          setError(`Component "${componentName}" not registered in isolation route`);
+        }
+      } catch (err) {
+        setError(`Failed to load component: ${err}`);
+      }
+    }
+
+    void loadComponent();
+  }, [componentName, scenarioSlug]);
+
+  if (error) {
+    return (
+      <div style={{ padding: 24, fontFamily: 'monospace', color: '#e74c3c' }}>
+        <h2>CodeYam Isolation Error</h2>
+        <p>{error}</p>
+      </div>
+    );
+  }
+
+  if (!Component || !mockData) {
+    return (
+      <div style={{ padding: 24, fontFamily: 'monospace', color: '#666' }}>
+        Loading {componentName} / {scenarioSlug}...
+      </div>
+    );
+  }
+
+  return <Component {...mockData} />;
+}

package/codeyam-cli/templates/msw/browser-setup.ts.template

@@ -0,0 +1,47 @@
+/**
+ * MSW Browser Setup — CodeYam Editor Mode
+ *
+ * This file sets up Mock Service Worker in the browser.
+ * Import this in your app's entry point (e.g., main.tsx or layout.tsx).
+ *
+ * Usage:
+ *   import { startMSW } from './__codeyam-msw__/browser';
+ *   await startMSW();
+ */
+import { setupWorker } from 'msw/browser';
+import { getHandlers } from './index';
+
+let started = false;
+
+export async function startMSW() {
+  if (started) return;
+  if (typeof window === 'undefined') return;
+
+  try {
+    // Read active scenario from CodeYam
+    let scenarioSlug = 'Default';
+    try {
+      const res = await fetch('/.codeyam/active-scenario.json');
+      if (res.ok) {
+        const data = await res.json();
+        scenarioSlug = data.scenarioSlug || 'Default';
+      }
+    } catch {
+      // Use default
+    }
+
+    const handlers = getHandlers(scenarioSlug);
+    if (handlers.length === 0) return;
+
+    const worker = setupWorker(...handlers);
+    await worker.start({
+      onUnhandledRequest: 'bypass',
+      quiet: true,
+    });
+
+    started = true;
+    console.log(`[CodeYam MSW] Browser mocking started (scenario: ${scenarioSlug})`);
+  } catch (error) {
+    console.warn('[CodeYam MSW] Failed to start browser mocking:', error);
+  }
+}

package/codeyam-cli/templates/msw/handler-router.ts.template

@@ -0,0 +1,47 @@
+/**
+ * MSW Handler Router — CodeYam Editor Mode
+ *
+ * Central router that collects handlers from all scenario handler files.
+ * Handler files live in `.codeyam/msw-handlers/{ScenarioSlug}.ts`.
+ *
+ * This file should be placed at `src/__codeyam-msw__/index.ts` in the user's project.
+ */
+import type { RequestHandler } from 'msw';
+
+// Map of scenario slugs to their handler modules.
+// Claude adds imports here as scenarios are created.
+// Example:
+//   import * as Dashboard_Default from '../../.codeyam/msw-handlers/Dashboard_Default';
+//   import * as TaskCard_Empty from '../../.codeyam/msw-handlers/TaskCard_Empty';
+
+const handlerModules: Record<string, { handlers: () => RequestHandler[] }> = {
+  // Claude registers handler modules here:
+  // 'Dashboard_Default': Dashboard_Default,
+  // 'TaskCard_Empty': TaskCard_Empty,
+};
+
+/**
+ * Get MSW handlers for a specific scenario.
+ * Falls back to 'Default' if the requested scenario doesn't have handlers.
+ */
+export function getHandlers(scenarioSlug: string): RequestHandler[] {
+  const module = handlerModules[scenarioSlug];
+  if (module) {
+    return module.handlers();
+  }
+
+  // Try to find a default handler
+  const defaultModule = handlerModules['Default'];
+  if (defaultModule) {
+    return defaultModule.handlers();
+  }
+
+  return [];
+}
+
+/**
+ * Get all available scenario slugs that have MSW handlers.
+ */
+export function getAvailableScenarios(): string[] {
+  return Object.keys(handlerModules);
+}

package/codeyam-cli/templates/msw/server-setup.ts.template

@@ -0,0 +1,52 @@
+/**
+ * MSW Server Setup — CodeYam Editor Mode
+ *
+ * This file sets up Mock Service Worker for server-side interception (Node.js).
+ * For Next.js: import in `instrumentation.ts`.
+ * For Vite SSR: import in the server entry.
+ *
+ * Usage:
+ *   import { startMSWServer } from './__codeyam-msw__/server';
+ *   startMSWServer();
+ */
+import { setupServer } from 'msw/node';
+import { getHandlers } from './index';
+import * as fs from 'fs';
+import * as path from 'path';
+
+let started = false;
+
+export function startMSWServer() {
+  if (started) return;
+
+  try {
+    // Read active scenario from .codeyam/active-scenario.json
+    let scenarioSlug = 'Default';
+    try {
+      const activeScenarioPath = path.join(
+        process.cwd(),
+        '.codeyam',
+        'active-scenario.json',
+      );
+      if (fs.existsSync(activeScenarioPath)) {
+        const data = JSON.parse(fs.readFileSync(activeScenarioPath, 'utf8'));
+        scenarioSlug = data.scenarioSlug || 'Default';
+      }
+    } catch {
+      // Use default
+    }
+
+    const handlers = getHandlers(scenarioSlug);
+    if (handlers.length === 0) return;
+
+    const server = setupServer(...handlers);
+    server.listen({
+      onUnhandledRequest: 'bypass',
+    });
+
+    started = true;
+    console.log(`[CodeYam MSW] Server mocking started (scenario: ${scenarioSlug})`);
+  } catch (error) {
+    console.warn('[CodeYam MSW] Failed to start server mocking:', error);
+  }
+}

package/codeyam-cli/templates/nextjs-prisma-sqlite/PRISMA_SETUP.md

@@ -0,0 +1,84 @@
+# Prisma 7 + SQLite Setup
+
+This project uses Prisma 7 with SQLite via the `better-sqlite3` driver adapter.
+
+## How it works
+
+Prisma 7 requires a **driver adapter** — you cannot use `new PrismaClient()` alone.
+Every file that creates a PrismaClient must use this pattern:
+
+```typescript
+import { PrismaClient } from '@prisma/client';
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+
+const adapter = new PrismaBetterSqlite3({ url: 'file:./dev.db' });
+const prisma = new PrismaClient({ adapter });
+```
+
+The singleton in `app/lib/prisma.ts` is already configured. Import it in your code:
+
+```typescript
+import { prisma } from '@/app/lib/prisma';
+```
+
+## Important: do NOT change these settings
+
+- **Generator must be `prisma-client-js`** (not `prisma-client`). The `prisma-client`
+  generator requires a custom output path that breaks Turbopack import resolution.
+- **Do NOT add an `output` field** to the generator. The default output to
+  `node_modules/@prisma/client` works with standard imports everywhere.
+- **Do NOT add `url` to the datasource block** in `schema.prisma`. Prisma 7
+  moved the URL to `prisma.config.ts`. Adding it to the schema causes a validation error.
+- **Keep `serverExternalPackages: ["better-sqlite3"]`** in `next.config.ts`.
+  Without it, Next.js tries to bundle the native module and fails.
+- **Keep `turbopack: { root: "." }`** in `next.config.ts`. Without it,
+  Turbopack may infer a parent directory as root and break imports.
+- **Database file is at project root** (`./dev.db`), not in `prisma/`.
+- **Always run `npx prisma generate`** after `npx prisma db push` (or use
+  `npm run db:push` which does both). Without this, the client module is missing.
+
+## Common tasks
+
+```bash
+# Edit your schema
+vim prisma/schema.prisma
+
+# Push schema changes to the database (also regenerates client)
+npm run db:push
+
+# Seed the database
+npx tsx prisma/seed.ts
+# or: npm run db:seed
+
+# Reset the database (delete + recreate + seed)
+npm run db:reset
+
+# Open Prisma Studio (database browser)
+npx prisma studio
+```
+
+## Writing seed scripts
+
+Seed scripts run outside of Next.js, so they must create their own PrismaClient
+with the adapter (they cannot import from `@/app/lib/prisma`). See `prisma/seed.ts`
+for the correct pattern.
+
+## Writing API routes
+
+```typescript
+// app/api/todos/route.ts
+import { prisma } from '@/app/lib/prisma';
+
+export async function GET() {
+  const todos = await prisma.todo.findMany({
+    orderBy: { createdAt: 'desc' },
+  });
+  return Response.json(todos);
+}
+
+export async function POST(request: Request) {
+  const { title } = await request.json();
+  const todo = await prisma.todo.create({ data: { title } });
+  return Response.json(todo);
+}
+```

package/codeyam-cli/templates/nextjs-prisma-sqlite/app/api/todos/route.ts

@@ -0,0 +1,17 @@
+// Example API route using Prisma.
+// Import prisma from the singleton — do NOT create a new PrismaClient here.
+
+import { prisma } from '@/app/lib/prisma';
+
+export async function GET() {
+  const todos = await prisma.todo.findMany({
+    orderBy: { createdAt: 'desc' },
+  });
+  return Response.json(todos);
+}
+
+export async function POST(request: Request) {
+  const { title } = await request.json();
+  const todo = await prisma.todo.create({ data: { title } });
+  return Response.json(todo);
+}

package/codeyam-cli/templates/nextjs-prisma-sqlite/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

package/codeyam-cli/templates/nextjs-prisma-sqlite/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'CodeYam App',
+  description: 'Built with CodeYam Editor',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/codeyam-cli/templates/nextjs-prisma-sqlite/app/lib/prisma.ts

@@ -0,0 +1,19 @@
+// Prisma 7 requires a driver adapter for database access.
+// This file uses better-sqlite3 for SQLite.
+//
+// Usage in API routes and server components:
+//   import { prisma } from "@/app/lib/prisma";
+//   const items = await prisma.todo.findMany();
+
+import { PrismaClient } from '@prisma/client';
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
+
+const adapter = new PrismaBetterSqlite3({ url: 'file:./dev.db' });
+
+export const prisma = globalForPrisma.prisma ?? new PrismaClient({ adapter });
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;
+
+export default prisma;

package/codeyam-cli/templates/nextjs-prisma-sqlite/app/page.tsx

@@ -0,0 +1,10 @@
+export default function Home() {
+  return (
+    <main className="min-h-screen flex items-center justify-center">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">Welcome</h1>
+        <p className="text-gray-600">Your app is ready. Start building!</p>
+      </div>
+    </main>
+  );
+}

package/codeyam-cli/templates/nextjs-prisma-sqlite/eslint.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+]);
+
+export default eslintConfig;

package/codeyam-cli/templates/nextjs-prisma-sqlite/gitignore

@@ -0,0 +1,43 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# database
+dev.db
+dev.db-journal

package/codeyam-cli/templates/nextjs-prisma-sqlite/next.config.ts

@@ -0,0 +1,14 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  // Required: better-sqlite3 is a native module that can't be bundled
+  serverExternalPackages: ['better-sqlite3'],
+
+  turbopack: {
+    // Required: prevents Turbopack from inferring a parent directory as root
+    // when .codeyam/ exists above the project (which breaks import resolution)
+    root: '.',
+  },
+};
+
+export default nextConfig;

package/codeyam-cli/templates/nextjs-prisma-sqlite/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "codeyam-project",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "db:push": "npx prisma db push && npx prisma generate",
+    "db:seed": "npx tsx prisma/seed.ts",
+    "db:reset": "rm -f dev.db && npm run db:push && npx tsx prisma/seed.ts"
+  },
+  "dependencies": {
+    "@prisma/adapter-better-sqlite3": "^7.4.1",
+    "@prisma/client": "^7.4.1",
+    "better-sqlite3": "^12.6.2",
+    "next": "^15.3.3",
+    "prisma": "^7.4.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "^15.3.3",
+    "tailwindcss": "^4",
+    "tsx": "^4.19.4",
+    "typescript": "^5"
+  }
+}

package/codeyam-cli/templates/nextjs-prisma-sqlite/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/codeyam-cli/templates/nextjs-prisma-sqlite/prisma/schema.prisma

@@ -0,0 +1,27 @@
+// Prisma 7 with SQLite via better-sqlite3 driver adapter.
+//
+// IMPORTANT: Use "prisma-client-js" (NOT "prisma-client").
+// The "prisma-client" generator requires a custom output path which
+// breaks Turbopack import resolution and seed script imports.
+// "prisma-client-js" outputs to node_modules/@prisma/client which
+// works everywhere with standard imports.
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+}
+
+// ──────────────────────────────────────────────
+// Replace these placeholder models with your own.
+// After editing, run: npx prisma db push
+// ──────────────────────────────────────────────
+
+model Todo {
+  id        Int      @id @default(autoincrement())
+  title     String
+  completed Boolean  @default(false)
+  createdAt DateTime @default(now())
+}

package/codeyam-cli/templates/nextjs-prisma-sqlite/prisma/seed.ts

@@ -0,0 +1,37 @@
+// Seed script for populating the database with demo data.
+//
+// Run with: npx tsx prisma/seed.ts
+// Or:       npm run db:seed
+//
+// IMPORTANT: This file must use the same adapter pattern as app/lib/prisma.ts.
+// Do NOT use `new PrismaClient()` without the adapter — Prisma 7 requires it.
+
+import { PrismaClient } from '@prisma/client';
+import { PrismaBetterSqlite3 } from '@prisma/adapter-better-sqlite3';
+
+const adapter = new PrismaBetterSqlite3({ url: 'file:./dev.db' });
+const prisma = new PrismaClient({ adapter });
+
+async function main() {
+  // Clear existing data
+  await prisma.todo.deleteMany();
+
+  // Seed with demo data
+  await prisma.todo.createMany({
+    data: [
+      { title: 'Set up the project', completed: true },
+      { title: 'Build the first feature' },
+      { title: 'Add more scenarios' },
+    ],
+  });
+
+  const count = await prisma.todo.count();
+  console.log(`Seeded ${count} todos`);
+}
+
+main()
+  .then(() => prisma.$disconnect())
+  .catch((e) => {
+    console.error(e);
+    process.exit(1);
+  });