@demokit-ai/next 0.0.2 → 0.2.0

package/README.md

@@ -0,0 +1,193 @@
+# @demokit-ai/next
+
+![Tests](https://img.shields.io/badge/tests-130%20passing-brightgreen)
+![Coverage](https://img.shields.io/badge/coverage-7%25-red)
+
+Next.js adapter for DemoKit - App Router, middleware, and API route mocking for demo mode.
+
+## Installation
+
+```bash
+npm install @demokit-ai/next @demokit-ai/core @demokit-ai/react
+```
+
+## Features
+
+- Demo-aware middleware for URL parameter and cookie handling
+- Server-side demo context with AsyncLocalStorage
+- Client-side hooks for demo mode state
+- API route interceptors for fixture responses
+- Scenario-based demo configurations
+- Full TypeScript support
+
+## Usage
+
+### Middleware Setup
+
+Add demo mode detection to your middleware:
+
+```ts
+// middleware.ts
+import { createDemoMiddleware } from '@demokit-ai/next/middleware'
+
+export const middleware = createDemoMiddleware({
+  cookieName: 'demo-mode',
+  paramName: 'demo',
+  scenarios: {
+    default: { users: 'standard' },
+    enterprise: { users: 'enterprise', features: 'all' },
+  },
+})
+
+export const config = {
+  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
+}
+```
+
+### Server Components
+
+Access demo mode in Server Components:
+
+```tsx
+// app/users/page.tsx
+import { getServerDemoContext, isServerDemoMode } from '@demokit-ai/next/server'
+
+export default async function UsersPage() {
+  const isDemo = isServerDemoMode()
+  const context = getServerDemoContext()
+
+  if (isDemo) {
+    return <UserList users={context.fixtures.users} />
+  }
+
+  const users = await fetchRealUsers()
+  return <UserList users={users} />
+}
+```
+
+### Client Components
+
+Use the client-side hook:
+
+```tsx
+'use client'
+import { useNextDemoMode } from '@demokit-ai/next/client'
+
+export function DemoToggle() {
+  const { enabled, toggle, scenario, setScenario } = useNextDemoMode()
+
+  return (
+    <div>
+      <button onClick={toggle}>
+        Demo: {enabled ? 'ON' : 'OFF'}
+      </button>
+      {enabled && (
+        <select value={scenario} onChange={(e) => setScenario(e.target.value)}>
+          <option value="default">Default</option>
+          <option value="enterprise">Enterprise</option>
+        </select>
+      )}
+    </div>
+  )
+}
+```
+
+### API Route Interception
+
+Create demo-aware API routes:
+
+```ts
+// app/api/users/route.ts
+import { createServerInterceptor } from '@demokit-ai/next/server'
+
+const interceptor = createServerInterceptor({
+  fixtures: {
+    GET: [
+      { id: '1', name: 'Demo User' },
+      { id: '2', name: 'Another User' },
+    ],
+    POST: (request) => ({
+      id: '3',
+      name: request.body.name,
+      created: true,
+    }),
+  },
+})
+
+export async function GET(request: Request) {
+  return interceptor(request, async () => {
+    // Real implementation
+    const users = await db.users.findMany()
+    return Response.json(users)
+  })
+}
+```
+
+### Configuration
+
+Define demo scenarios and fixtures:
+
+```ts
+// demo.config.ts
+import { createDemoConfig, defineFixtures, defineScenarios } from '@demokit-ai/next'
+
+export const demoConfig = createDemoConfig({
+  fixtures: defineFixtures({
+    users: [
+      { id: '1', name: 'Demo User', plan: 'free' },
+      { id: '2', name: 'Pro User', plan: 'pro' },
+    ],
+    products: [
+      { id: '1', name: 'Widget', price: 9.99 },
+    ],
+  }),
+  scenarios: defineScenarios({
+    default: {},
+    enterprise: {
+      users: [
+        { id: '1', name: 'Enterprise User', plan: 'enterprise' },
+      ],
+    },
+  }),
+})
+```
+
+## API Reference
+
+### Middleware
+
+#### `createDemoMiddleware(options)`
+
+Options:
+- `cookieName` - Cookie name for demo state (default: 'demo-mode')
+- `paramName` - URL parameter for demo activation (default: 'demo')
+- `scenarios` - Scenario configurations
+- `defaultScenario` - Default scenario name
+
+### Server
+
+#### `isServerDemoMode()`
+
+Returns `true` if demo mode is active in the current request.
+
+#### `getServerDemoContext()`
+
+Returns the demo context including fixtures and scenario.
+
+#### `createServerInterceptor(options)`
+
+Creates an interceptor for API routes.
+
+### Client
+
+#### `useNextDemoMode()`
+
+Returns:
+- `enabled` - Demo mode state
+- `toggle()` - Toggle demo mode
+- `scenario` - Current scenario
+- `setScenario(name)` - Switch scenario
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demokit-ai/next",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "Next.js adapter for DemoKit - App Router, middleware, and API route mocking",
   "type": "module",
   "main": "./dist/index.cjs",