feat: add MSW integration for API mocking and define data protocol with sample handlers

Author: hotlong

.storybook/main.ts

@@ -4,6 +4,7 @@ import path from 'path';
 
 const config: StorybookConfig = {
   stories: ["../packages/**/src/**/*.mdx", "../packages/**/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  staticDirs: ['../public'],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

.storybook/mocks.ts

@@ -0,0 +1,75 @@
+// .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' });
+})();
+
+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 });
+    })
+];

.storybook/preview.ts

@@ -1,8 +1,15 @@
 import type { Preview } from '@storybook/react-vite'
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import { handlers } from './mocks';
 import '../packages/components/src/index.css';
 import { ComponentRegistry } from '@object-ui/core';
 import * as components from '../packages/components/src/index';
 
+// Initialize MSW
+initialize({
+  onUnhandledRequest: 'bypass'
+});
+
 // Register all base components for Storybook
 Object.values(components);
 
@@ -24,7 +31,11 @@ import '@object-ui/plugin-timeline';
 import '@object-ui/plugin-view';
 
 const preview: Preview = {
+  loaders: [mswLoader],
   parameters: {
+    msw: {
+       handlers: handlers
+    },
     options: {
       storySort: {
         method: 'alphabetical',

package.json

@@ -50,6 +50,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
     "@eslint/js": "^9.39.1",
+    "@objectstack/plugin-msw": "^0.6.1",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/addon-links": "^8.6.15",
@@ -74,6 +75,8 @@
     "globals": "^17.1.0",
     "happy-dom": "^20.3.9",
     "jsdom": "^27.4.0",
+    "msw": "^2.12.7",
+    "msw-storybook-addon": "^2.0.6",
     "playwright": "^1.58.0",
     "prettier": "^3.8.1",
     "react": "19.2.3",

packages/components/src/stories/MockedData.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import { PageSchema } from '@object-ui/types';
+
+// Define a schema that binds to fetched data
+const contactDetailSchema: PageSchema = {
+    type: "page",
+    props: { title: "Contact Details (Mocked)" },
+    children: [
+        {
+            type: "page:header",
+            props: {
+                title: "${data.name}", 
+                description: "${data.title} at ${data.company}"
+            }
+        },
+        {
+            type: "view:simple", 
+            props: { columns: 2, className: "mt-4 border p-4 rounded" },
+            children: [
+                { type: "field:text", bind: "name", props: { label: "Full Name", readonly: true } },
+                { type: "field:email", bind: "email", props: { label: "Email", readonly: true } },
+                { type: "field:text", bind: "status", props: { label: "Status", readonly: true } }
+            ]
+        }
+    ]
+};
+
+// A wrapper component that fetches data from the MSW mock
+const DataFetcher = () => {
+    const [data, setData] = useState<any>(null);
+
+    useEffect(() => {
+        // Fetch from the mocked API
+        fetch('/api/v1/data/contact/1')
+            .then(res => res.json())
+            .then(setData)
+            .catch(e => console.error("Fetch failed", e));
+    }, []);
+
+    if (!data) return <div className="p-4">Loading data from MSW...</div>;
+
+    return (
+        <SchemaRendererProvider dataSource={data}>
+            <SchemaRenderer schema={contactDetailSchema} />
+        </SchemaRendererProvider>
+    );
+};
+
+const meta: Meta = {
+  title: 'Guide/Mocked Data',
+  component: DataFetcher,
+  parameters: {
+      // We can also override handlers per story here if needed
+      // msw: { handlers: [...] }
+  }
+};
+
+export default meta;
+
+export const Default: StoryObj = {};