Merge pull request #265 from objectstack-ai/copilot/switch-components-to-msw-mode

Author: hotlong

.storybook/mocks.ts

@@ -17,5 +17,6 @@ export const handlers = [
     // - /api/v1/data/:object (GET, POST)
     // - /api/v1/data/:object/:id (GET, PUT, DELETE)
     // - /api/v1/metadata/*
+    // - /api/v1/index.json (for ObjectStackClient.connect())
     // - /api/bootstrap
 ];

.storybook/msw-browser.ts

@@ -45,6 +45,17 @@ export async function startMockServer() {
         baseUrl: '/api/v1', 
         logRequests: true,
         customHandlers: [
+            // Handle /api/v1/index.json for ObjectStackClient.connect()
+            http.get('/api/v1/index.json', async () => {
+                return HttpResponse.json({
+                    version: '1.0',
+                    objects: ['contact', 'opportunity', 'account'],
+                    endpoints: {
+                        data: '/api/v1/data',
+                        metadata: '/api/v1/metadata'
+                    }
+                });
+            }),
             // Explicitly handle all metadata requests to prevent pass-through
             http.get('/api/v1/metadata/*', async () => {
                  return HttpResponse.json({});

packages/components/src/stories-json/object-gantt.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
 import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
 
 const meta = {
   title: 'Views/Gantt',
@@ -20,7 +21,14 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+// Create a DataSource instance that connects to MSW
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
 
 export const ProjectSchedule: Story = {
   render: renderStory,

packages/components/src/stories-json/object-map.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '../SchemaRenderer';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
 import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
 
 const meta = {
   title: 'Views/Map',
@@ -20,7 +21,14 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+// Create a DataSource instance that connects to MSW
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
 
 export const StoreLocations: Story = {
   render: renderStory,

packages/components/src/stories-json/object-view.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
 import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
 
 const meta = {
   title: 'Views/Object View',
@@ -17,8 +18,11 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+// Create a DataSource instance that connects to MSW
+const dataSource = createStorybookDataSource();
+
 const renderStory = (args: any) => (
-  <SchemaRendererProvider dataSource={{}}>
+  <SchemaRendererProvider dataSource={dataSource}>
     <SchemaRenderer schema={args as unknown as BaseSchema} />
   </SchemaRendererProvider>
 );