Update object-grid and object-form stories to use MSW runtime

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

.storybook/datasource.ts

@@ -0,0 +1,19 @@
+/**
+ * DataSource Helper for Storybook
+ * 
+ * Creates an ObjectStack data source adapter that connects to the 
+ * MSW-backed API endpoints running in Storybook.
+ */
+
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+
+/**
+ * Create a DataSource for use in Storybook stories.
+ * This DataSource connects to the MSW mock server at /api/v1.
+ */
+export function createStorybookDataSource() {
+  return new ObjectStackAdapter({
+    baseUrl: '/api/v1',
+    // No token needed for MSW
+  });
+}

packages/components/src/stories-json/object-form.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/datasource';
 
 const meta = {
   title: 'Views/Object Form',
@@ -17,7 +18,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 BasicSchema: Story = {
   render: renderStory,
@@ -76,3 +84,47 @@ export const ComplexFields: Story = {
     className: 'w-full max-w-2xl'
   } as any,
 };
+
+/**
+ * Contact Form - Uses MSW-backed schema from ObjectStack runtime
+ * 
+ * This story demonstrates integration with the MSW plugin runtime mode.
+ * The form schema is fetched from /api/v1/metadata/contact via the ObjectStack kernel.
+ */
+export const ContactForm: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'contact',
+    fields: [
+      { name: 'name', label: 'Name', type: 'text', required: true },
+      { name: 'email', label: 'Email', type: 'email', required: true },
+      { name: 'phone', label: 'Phone', type: 'tel' },
+      { name: 'title', label: 'Title', type: 'text' },
+      { name: 'company', label: 'Company', type: 'text' },
+      { name: 'status', label: 'Status', type: 'select', options: ['Active', 'Lead', 'Customer'] }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+/**
+ * Opportunity Form - Uses MSW-backed schema from ObjectStack runtime
+ * 
+ * This story demonstrates creating/editing opportunity records via MSW runtime.
+ */
+export const OpportunityForm: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'opportunity',
+    fields: [
+      { name: 'name', label: 'Opportunity Name', type: 'text', required: true },
+      { name: 'amount', label: 'Amount', type: 'number', required: true },
+      { name: 'stage', label: 'Stage', type: 'select', options: ['Prospecting', 'Qualification', 'Proposal', 'Negotiation', 'Closed Won', 'Closed Lost'] },
+      { name: 'closeDate', label: 'Close Date', type: 'date' },
+      { name: 'description', label: 'Description', type: 'textarea', rows: 4 }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};

packages/components/src/stories-json/object-grid.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/datasource';
 
 const meta = {
   title: 'Views/Object Grid',
@@ -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>
 );
@@ -97,3 +101,57 @@ export const WithActions: Story = {
     className: 'w-full'
   } as any,
 };
+
+/**
+ * Contacts Grid - Uses MSW-backed data from ObjectStack runtime
+ * 
+ * This story demonstrates integration with the MSW plugin runtime mode.
+ * Data is fetched from /api/v1/data/contact via the ObjectStack kernel.
+ */
+export const ContactsGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'contact',
+    data: {
+      provider: 'object',
+      object: 'contact',
+    },
+    columns: [
+      { field: 'name', header: 'Name', sortable: true, filterable: true },
+      { field: 'email', header: 'Email', sortable: true, filterable: true },
+      { field: 'title', header: 'Title', sortable: true },
+      { field: 'company', header: 'Company', sortable: true },
+      { field: 'status', header: 'Status', sortable: true }
+    ],
+    pagination: true,
+    pageSize: 10,
+    className: 'w-full'
+  } as any,
+};
+
+/**
+ * Opportunities Grid - Uses MSW-backed data from ObjectStack runtime
+ * 
+ * This story demonstrates fetching opportunity data from the MSW runtime.
+ */
+export const OpportunitiesGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'opportunity',
+    data: {
+      provider: 'object',
+      object: 'opportunity',
+    },
+    columns: [
+      { field: 'name', header: 'Name', sortable: true, filterable: true },
+      { field: 'amount', header: 'Amount', sortable: true, type: 'currency' },
+      { field: 'stage', header: 'Stage', sortable: true },
+      { field: 'closeDate', header: 'Close Date', sortable: true, type: 'date' }
+    ],
+    pagination: true,
+    pageSize: 10,
+    className: 'w-full'
+  } as any,
+};