@demokit-ai/remix 0.0.2 → 0.2.0

package/README.md

@@ -0,0 +1,203 @@
+# @demokit-ai/remix
+
+![Tests](https://img.shields.io/badge/tests-119%20passing-brightgreen)
+![Coverage](https://img.shields.io/badge/coverage-17%25-red)
+
+Remix adapter for DemoKit - demo-aware loader and action mocking for Remix applications.
+
+## Installation
+
+```bash
+npm install @demokit-ai/remix @demokit-ai/core @demokit-ai/react
+```
+
+## Features
+
+- **Demo Loaders** - Wrap loaders to return fixtures in demo mode
+- **Demo Actions** - Wrap actions with method-specific fixtures
+- **Route Configuration** - Apply demo mode to entire route trees
+- **Provider Pattern** - Centralized fixture management
+- **Server-Side Support** - Works with Remix server rendering
+- Full TypeScript support
+
+## Usage
+
+### Wrap Individual Loaders
+
+```ts
+// app/routes/users.tsx
+import { createDemoLoader } from '@demokit-ai/remix'
+
+export const loader = createDemoLoader({
+  loader: async () => {
+    return db.users.findMany()
+  },
+  isEnabled: () => process.env.DEMO_MODE === 'true',
+  fixture: [
+    { id: '1', name: 'Demo User', email: 'demo@example.com' },
+    { id: '2', name: 'Another User', email: 'another@example.com' },
+  ],
+  delay: 100,
+})
+```
+
+### Wrap Individual Actions
+
+```ts
+// app/routes/users.$id.tsx
+import { createDemoAction } from '@demokit-ai/remix'
+
+export const action = createDemoAction({
+  action: async ({ request, params }) => {
+    const formData = await request.formData()
+    return db.users.update({
+      where: { id: params.id },
+      data: Object.fromEntries(formData),
+    })
+  },
+  isEnabled: () => process.env.DEMO_MODE === 'true',
+  fixture: {
+    PUT: ({ params, formData }) => ({
+      id: params.id,
+      ...Object.fromEntries(formData!),
+      updated: true,
+    }),
+    DELETE: ({ params }) => ({
+      id: params.id,
+      deleted: true,
+    }),
+  },
+})
+```
+
+### Route Configuration Wrapping
+
+```ts
+// app/root.tsx
+import { createDemoRoutes, defineLoaderFixtures, defineActionFixtures } from '@demokit-ai/remix'
+
+const loaders = defineLoaderFixtures({
+  '/users': [
+    { id: '1', name: 'Demo User' },
+    { id: '2', name: 'Another User' },
+  ],
+  '/users/:id': ({ params }) => ({
+    id: params.id,
+    name: 'Demo User',
+    email: 'demo@example.com',
+  }),
+})
+
+const actions = defineActionFixtures({
+  '/users/:id': {
+    PUT: ({ formData }) => ({ updated: true }),
+    DELETE: ({ params }) => ({ deleted: true, id: params.id }),
+  },
+})
+
+// Apply to routes
+const routes = createDemoRoutes(originalRoutes, {
+  isEnabled: () => process.env.DEMO_MODE === 'true',
+  loaders,
+  actions,
+  delay: 100,
+})
+```
+
+### Provider Pattern
+
+```tsx
+// app/root.tsx
+import { DemoRemixProvider, useDemoRemix } from '@demokit-ai/remix'
+
+export default function App() {
+  return (
+    <DemoRemixProvider
+      enabled={process.env.DEMO_MODE === 'true'}
+      loaders={{
+        '/users': [{ id: '1', name: 'Demo User' }],
+      }}
+      actions={{
+        '/users': ({ formData }) => ({ id: '1', ...Object.fromEntries(formData!) }),
+      }}
+    >
+      <Outlet />
+    </DemoRemixProvider>
+  )
+}
+
+function DemoControls() {
+  const { enabled, toggle, setLoader } = useDemoRemix()
+
+  return (
+    <div>
+      <button onClick={toggle}>Demo: {enabled ? 'ON' : 'OFF'}</button>
+      <button onClick={() => setLoader('/custom', () => ({ custom: true }))}>
+        Add Custom
+      </button>
+    </div>
+  )
+}
+```
+
+### Server-Side Demo Detection
+
+```ts
+// app/routes/api.users.tsx
+import { isDemoRequest, getDemoScenario } from '@demokit-ai/remix/server'
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  if (isDemoRequest(request)) {
+    const scenario = getDemoScenario(request)
+    return json(demoFixtures[scenario])
+  }
+
+  return json(await db.users.findMany())
+}
+```
+
+## API Reference
+
+### `createDemoLoader(options)`
+
+Create a demo-aware loader function.
+
+Options:
+- `loader` - The real loader function
+- `isEnabled` - Function to check if demo mode is enabled
+- `fixture` - Demo fixture (static value or function)
+- `delay` - Simulated delay in milliseconds
+- `onDemo` - Callback when demo mode is used
+
+### `createDemoAction(options)`
+
+Create a demo-aware action function.
+
+Options:
+- `action` - The real action function
+- `isEnabled` - Function to check if demo mode is enabled
+- `fixture` - Demo fixture (static, function, or method-specific handlers)
+- `delay` - Simulated delay in milliseconds
+- `onDemo` - Callback when demo mode is used
+
+### `DemoRemixProvider`
+
+Props:
+- `enabled` - Whether demo mode is enabled
+- `loaders` - Loader fixtures by path
+- `actions` - Action fixtures by path
+- `delay` - Default delay in milliseconds
+
+### `useDemoRemix()`
+
+Returns:
+- `enabled` - Whether demo mode is enabled
+- `toggle()` - Toggle demo mode
+- `setLoader(path, handler)` - Set a loader fixture
+- `removeLoader(path)` - Remove a loader fixture
+- `setAction(path, handler)` - Set an action fixture
+- `removeAction(path)` - Remove an action fixture
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demokit-ai/remix",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "Remix adapter for DemoKit - demo-aware loader and action mocking",
   "type": "module",
   "main": "./dist/index.cjs",