Add MSW browser setup and update Storybook configuration

Copilot · hotlong · Copilot · commit a7832e4886cc · 2026-01-29T12:52:45.000Z
Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -27,6 +27,8 @@ const config: StorybookConfig = {
           '@object-ui/components': path.resolve(__dirname, '../packages/components/src/index.ts'),
           '@object-ui/fields': path.resolve(__dirname, '../packages/fields/src/index.tsx'),
           '@object-ui/layout': path.resolve(__dirname, '../packages/layout/src/index.ts'),
+          // Alias example packages for Storybook to resolve them from workspace
+          '@object-ui/example-crm': path.resolve(__dirname, '../examples/crm/src/index.ts'),
           // Alias plugin packages for Storybook to resolve them from workspace
           '@object-ui/plugin-aggrid': path.resolve(__dirname, '../packages/plugin-aggrid/src/index.tsx'),
           '@object-ui/plugin-calendar': path.resolve(__dirname, '../packages/plugin-calendar/src/index.tsx'),
diff --git a/.storybook/mocks.ts b/.storybook/mocks.ts
@@ -1,75 +1,21 @@
 // .storybook/mocks.ts
 import { http, HttpResponse } from 'msw';
-import { ObjectStackServer } from '@objectstack/plugin-msw';
 
-export const protocol = {
-  objects: [
-    {
-      name: "contact",
-      fields: {
-        name: { type: "text" },
-        email: { type: "email" },
-        title: { type: "text" },
-        company: { type: "text" },
-        status: { type: "select", options: ["Active", "Lead", "Customer"] }
-      }
-    },
-    {
-      name: "opportunity",
-      fields: {
-        name: { type: "text" },
-        amount: { type: "currency" },
-        stage: { type: "select" },
-        closeDate: { type: "date" },
-        accountId: { type: "lookup", reference_to: "account" }
-      }
-    },
-    {
-        name: "account",
-        fields: {
-            name: { type: "text" },
-            industry: { type: "text" }
-        }
-    }
-  ]
-};
-
-// Initialize the mock server
-// @ts-ignore
-ObjectStackServer.init(protocol);
-
-// Seed basic data
-(async () => {
-    await ObjectStackServer.createData('contact', { id: '1', name: 'John Doe', title: 'Developer', company: 'Tech', status: 'Active' });
-    await ObjectStackServer.createData('contact', { id: '2', name: 'Jane Smith', title: 'Manager', company: 'Corp', status: 'Customer' });
-    await ObjectStackServer.createData('account', { id: '1', name: 'Big Corp', industry: 'Finance' });
-    await ObjectStackServer.createData('opportunity', { id: '1', name: 'Big Deal', amount: 50000, stage: 'Negotiation', accountId: '1' });
-})();
+/**
+ * MSW Handlers for Storybook
+ * 
+ * Note: The main MSW runtime with ObjectStack kernel is initialized in msw-browser.ts
+ * These handlers are additional story-specific handlers that can be used 
+ * via the msw parameter in individual stories.
+ * 
+ * The ObjectStack kernel handles standard CRUD operations automatically via MSWPlugin.
+ */
 
 export const handlers = [
-    // Standard CRUD handlers using ObjectStackServer
-    http.get('/api/v1/data/:object', async ({ params }) => {
-        const { object } = params;
-        const result = await ObjectStackServer.findData(object as string);
-        return HttpResponse.json({ value: result.data });
-    }),
-    
-    http.get('/api/v1/data/:object/:id', async ({ params }) => {
-        const { object, id } = params;
-        const result = await ObjectStackServer.getData(object as string, id as string);
-        return HttpResponse.json(result.data);
-    }),
-
-    http.post('/api/v1/data/:object', async ({ params, request }) => {
-        const { object } = params;
-        const body = await request.json();
-        const result = await ObjectStackServer.createData(object as string, body);
-        return HttpResponse.json(result.data);
-    }),
-
-    // Custom bootstrap if needed
-    http.get('/api/bootstrap', async () => {
-        const contacts = (await ObjectStackServer.findData('contact')).data;
-        return HttpResponse.json({ contacts });
-    })
+    // Additional custom handlers can be added here for specific story needs
+    // The ObjectStack MSW runtime already handles:
+    // - /api/v1/data/:object (GET, POST)
+    // - /api/v1/data/:object/:id (GET, PUT, DELETE)
+    // - /api/v1/metadata/*
+    // - /api/bootstrap
 ];
diff --git a/.storybook/msw-browser.ts b/.storybook/msw-browser.ts
@@ -0,0 +1,97 @@
+/**
+ * MSW Browser Setup for Storybook
+ * 
+ * This file integrates the ObjectStack runtime with MSW in browser mode
+ * for use within Storybook stories. Based on the pattern from examples/crm-app.
+ */
+
+import { ObjectKernel, DriverPlugin, AppPlugin } from '@objectstack/runtime';
+import { ObjectQLPlugin } from '@objectstack/objectql';
+import { InMemoryDriver } from '@objectstack/driver-memory';
+import { MSWPlugin } from '@objectstack/plugin-msw';
+import { config as crmConfig } from '@object-ui/example-crm';
+import { http, HttpResponse } from 'msw';
+
+let kernel: ObjectKernel | null = null;
+
+export async function startMockServer() {
+  if (kernel) return kernel;
+
+  console.log('[Storybook MSW] Starting ObjectStack Runtime (Browser Mode)...');
+  console.log('[Storybook MSW] Loaded Config:', crmConfig ? 'Found' : 'Missing', crmConfig?.apps?.length);
+
+  if (crmConfig && crmConfig.objects) {
+    console.log('[Storybook MSW] Objects in Config:', crmConfig.objects.map(o => o.name));
+  } else {
+    console.error('[Storybook MSW] No objects found in config!');
+  }
+
+  const driver = new InMemoryDriver();
+  kernel = new ObjectKernel();
+
+  try {
+    kernel
+        .use(new ObjectQLPlugin())
+        .use(new DriverPlugin(driver, 'memory'));
+
+    if (crmConfig) {
+        kernel.use(new AppPlugin(crmConfig));
+    } else {
+        console.error('❌ CRM Config is missing! Skipping AppPlugin.');
+    }
+
+    kernel.use(new MSWPlugin({
+        enableBrowser: true,
+        baseUrl: '/api/v1', 
+        logRequests: true,
+        customHandlers: [
+            // Explicitly handle all metadata requests to prevent pass-through
+            http.get('/api/v1/metadata/*', async () => {
+                 return HttpResponse.json({});
+            }),
+            http.get('/api/bootstrap', async () => {
+                const contacts = await driver.find('contact', { object: 'contact' });
+                const stats = { revenue: 125000, leads: 45, deals: 12 };
+                return HttpResponse.json({
+                    user: { name: "Demo User", role: "admin" },
+                    stats,
+                    contacts: contacts || []
+                });
+            })
+        ]
+    }));
+    
+    console.log('[Storybook MSW] Bootstrapping kernel...');
+    await kernel.bootstrap();
+    console.log('[Storybook MSW] Bootstrap Complete');
+
+    // Seed Data
+    if (crmConfig) {
+        await initializeMockData(driver);
+    }
+  } catch (err: any) {
+    console.error('❌ Storybook Mock Server Start Failed:', err);
+    throw err;
+  }
+  
+  return kernel;
+}
+
+// Helper to seed data into the in-memory driver
+async function initializeMockData(driver: InMemoryDriver) {
+    console.log('[Storybook MSW] Initializing mock data...');
+    // @ts-ignore
+    const manifest = crmConfig.manifest;
+    if (manifest && manifest.data) {
+        for (const dataSet of manifest.data) {
+            console.log(`[Storybook MSW] Seeding ${dataSet.object}...`);
+            if (dataSet.records) {
+                for (const record of dataSet.records) {
+                    await driver.create(dataSet.object, record);
+                }
+            }
+        }
+    }
+}
+
+export { kernel };
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,6 +1,7 @@
 import type { Preview } from '@storybook/react-vite'
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import { handlers } from './mocks';
+import { startMockServer } from './msw-browser';
 import '../packages/components/src/index.css';
 import { ComponentRegistry } from '@object-ui/core';
 import * as components from '../packages/components/src/index';
@@ -10,6 +11,14 @@ initialize({
   onUnhandledRequest: 'bypass'
 });
 
+// Start MSW runtime with ObjectStack kernel
+// This must be called during Storybook initialization
+if (typeof window !== 'undefined') {
+  startMockServer().catch(err => {
+    console.error('Failed to start MSW runtime:', err);
+  });
+}
+
 // Register all base components for Storybook
 Object.values(components);
 
diff --git a/package.json b/package.json
@@ -50,7 +50,11 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@eslint/js": "^9.39.1",
+    "@objectstack/core": "^0.6.1",
+    "@objectstack/driver-memory": "^0.6.1",
+    "@objectstack/objectql": "^0.6.1",
     "@objectstack/plugin-msw": "^0.6.1",
+    "@objectstack/runtime": "^0.6.1",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-links": "^8.6.15",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
