@object-ui/components 0.3.1 → 0.5.0

package/src/stories-json/object-form.stories.tsx

@@ -0,0 +1,130 @@
+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 Form',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+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={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const BasicSchema: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'User',
+    customFields: [
+      { name: 'firstName', label: 'First Name', type: 'text', required: true },
+      { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+      { name: 'email', label: 'Email', type: 'email', required: true },
+      { name: 'age', label: 'Age', type: 'number' }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+export const WithSections: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Employee',
+    sections: [
+      {
+        title: 'Schema/Plugins/Personal Information',
+        fields: [
+          { name: 'firstName', label: 'First Name', type: 'text', required: true },
+          { name: 'lastName', label: 'Last Name', type: 'text', required: true },
+          { name: 'dateOfBirth', label: 'Date of Birth', type: 'date' }
+        ]
+      },
+      {
+        title: 'Schema/Plugins/Contact Details',
+        fields: [
+          { name: 'email', label: 'Email', type: 'email', required: true },
+          { name: 'phone', label: 'Phone', type: 'tel' },
+          { name: 'address', label: 'Address', type: 'textarea' }
+        ]
+      }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+export const ComplexFields: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-form',
+    objectName: 'Product',
+    customFields: [
+      { name: 'name', label: 'Product Name', type: 'text', required: true },
+      { name: 'category', label: 'Category', type: 'select', options: ['Electronics', 'Clothing', 'Food'], required: true },
+      { name: 'price', label: 'Price', type: 'number', required: true },
+      { name: 'inStock', label: 'In Stock', type: 'checkbox' },
+      { name: 'description', label: 'Description', type: 'textarea', rows: 4 }
+    ],
+    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',
+    customFields: [
+      { 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',
+    customFields: [
+      { 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,
+};

package/src/stories-json/object-gantt.stories.tsx

@@ -0,0 +1,114 @@
+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/Gantt',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+    test: {
+       timeout: 60000,
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+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={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const ProjectSchedule: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-gantt',
+    objectName: 'Task',
+    gantt: {
+      startDateField: 'startDate',
+      endDateField: 'endDate',
+      titleField: 'name',
+      progressField: 'progress',
+      dependenciesField: 'dependencies'
+    },
+    tasks: [
+      {
+        id: '1',
+        name: 'Project Planning',
+        startDate: '2024-01-01',
+        endDate: '2024-01-15',
+        progress: 100
+      },
+      {
+        id: '2',
+        name: 'Design Phase',
+        startDate: '2024-01-10',
+        endDate: '2024-02-15',
+        progress: 75,
+        dependencies: ['1']
+      },
+      {
+        id: '3',
+        name: 'Development',
+        startDate: '2024-02-01',
+        endDate: '2024-04-30',
+        progress: 30,
+        dependencies: ['2']
+      },
+      {
+        id: '4',
+        name: 'Testing',
+        startDate: '2024-04-15',
+        endDate: '2024-05-15',
+        progress: 0,
+        dependencies: ['3']
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};
+
+export const SimpleGantt: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-gantt',
+    objectName: 'Milestone',
+    gantt: {
+      startDateField: 'start',
+      endDateField: 'end',
+      titleField: 'title'
+    },
+    tasks: [
+      {
+        id: '1',
+        title: 'Schema/Plugins/Q1 Goals',
+        start: '2024-01-01',
+        end: '2024-03-31'
+      },
+      {
+        id: '2',
+        title: 'Schema/Plugins/Q2 Goals',
+        start: '2024-04-01',
+        end: '2024-06-30'
+      },
+      {
+        id: '3',
+        title: 'Schema/Plugins/Q3 Goals',
+        start: '2024-07-01',
+        end: '2024-09-30'
+      }
+    ],
+    className: 'w-full'
+  } as any,
+};

package/src/stories-json/object-grid.stories.tsx

@@ -0,0 +1,157 @@
+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 Grid',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+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={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const UserGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'User',
+    columns: [
+      { field: 'id', header: 'ID', width: 80 },
+      { field: 'name', header: 'Name', sortable: true, filterable: true },
+      { field: 'email', header: 'Email', sortable: true, filterable: true },
+      { field: 'role', header: 'Role', sortable: true },
+      { field: 'status', header: 'Status', sortable: true }
+    ],
+    data: [
+      { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+      { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
+      { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' }
+    ],
+    pagination: true,
+    pageSize: 10,
+    className: 'w-full'
+  } as any,
+};
+
+export const ProductGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Product',
+    columns: [
+      { field: 'sku', header: 'SKU', width: 120 },
+      { field: 'name', header: 'Product Name', sortable: true, filterable: true },
+      { field: 'category', header: 'Category', sortable: true, filterable: true },
+      { field: 'price', header: 'Price', sortable: true, type: 'currency' },
+      { field: 'stock', header: 'In Stock', sortable: true, type: 'number' }
+    ],
+    data: [
+      { sku: 'PROD-001', name: 'Laptop', category: 'Electronics', price: 1299.99, stock: 15 },
+      { sku: 'PROD-002', name: 'Mouse', category: 'Electronics', price: 29.99, stock: 120 },
+      { sku: 'PROD-003', name: 'Desk Chair', category: 'Furniture', price: 249.99, stock: 8 },
+      { sku: 'PROD-004', name: 'Monitor', category: 'Electronics', price: 399.99, stock: 22 }
+    ],
+    pagination: true,
+    pageSize: 5,
+    className: 'w-full'
+  } as any,
+};
+
+export const WithActions: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Order',
+    columns: [
+      { field: 'orderId', header: 'Order ID', width: 120 },
+      { field: 'customer', header: 'Customer', sortable: true },
+      { field: 'date', header: 'Order Date', sortable: true, type: 'date' },
+      { field: 'total', header: 'Total', sortable: true, type: 'currency' },
+      { field: 'status', header: 'Status', sortable: true }
+    ],
+    actions: [
+      { label: 'View', action: 'view' },
+      { label: 'Edit', action: 'edit' },
+      { label: 'Delete', action: 'delete', variant: 'destructive' }
+    ],
+    data: [
+      { orderId: 'ORD-1001', customer: 'Alice Brown', date: '2024-01-15', total: 159.99, status: 'Completed' },
+      { orderId: 'ORD-1002', customer: 'Charlie Davis', date: '2024-01-18', total: 89.50, status: 'Processing' },
+      { orderId: 'ORD-1003', customer: 'Eve Wilson', date: '2024-01-20', total: 299.99, status: 'Shipped' }
+    ],
+    pagination: true,
+    pageSize: 10,
+    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,
+};

package/src/stories-json/object-map.stories.tsx

@@ -0,0 +1,116 @@
+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/Map',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+    test: {
+      timeout: 60000,
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+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={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const StoreLocations: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-map',
+    objectName: 'Store',
+    map: {
+      latitudeField: 'latitude',
+      longitudeField: 'longitude',
+      titleField: 'name',
+      descriptionField: 'address'
+    },
+    locations: [
+      {
+        id: '1',
+        name: 'Downtown Store',
+        address: '123 Main St',
+        latitude: 40.7128,
+        longitude: -74.0060
+      },
+      {
+        id: '2',
+        name: 'Uptown Branch',
+        address: '456 Park Ave',
+        latitude: 40.7589,
+        longitude: -73.9851
+      },
+      {
+        id: '3',
+        name: 'Suburban Location',
+        address: '789 Oak Rd',
+        latitude: 40.6782,
+        longitude: -73.9442
+      }
+    ],
+    center: {
+      latitude: 40.7128,
+      longitude: -74.0060
+    },
+    zoom: 12,
+    className: 'w-full h-[500px]'
+  } as any,
+};
+
+export const DeliveryRoutes: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-map',
+    objectName: 'Delivery',
+    map: {
+      latitudeField: 'lat',
+      longitudeField: 'lng',
+      titleField: 'address'
+    },
+    locations: [
+      {
+        id: '1',
+        address: 'Customer A - 100 First St',
+        lat: 37.7749,
+        lng: -122.4194,
+        status: 'Delivered'
+      },
+      {
+        id: '2',
+        address: 'Customer B - 200 Second Ave',
+        lat: 37.7849,
+        lng: -122.4094,
+        status: 'In Transit'
+      },
+      {
+        id: '3',
+        address: 'Customer C - 300 Third Blvd',
+        lat: 37.7649,
+        lng: -122.4294,
+        status: 'Pending'
+      }
+    ],
+    center: {
+      latitude: 37.7749,
+      longitude: -122.4194
+    },
+    zoom: 13,
+    className: 'w-full h-[500px]'
+  } as any,
+};

package/src/stories-json/object-view.stories.tsx

@@ -0,0 +1,118 @@
+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',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+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={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const UserProfile: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-view',
+    objectName: 'User',
+    layout: 'card',
+    data: {
+      id: 1,
+      name: 'John Doe',
+      email: 'john.doe@example.com',
+      role: 'Administrator',
+      status: 'Active',
+      joinedDate: '2023-01-15',
+      department: 'Engineering'
+    },
+    fields: [
+      { name: 'id', label: 'User ID', type: 'text' },
+      { name: 'name', label: 'Full Name', type: 'text' },
+      { name: 'email', label: 'Email Address', type: 'email' },
+      { name: 'role', label: 'Role', type: 'text' },
+      { name: 'status', label: 'Status', type: 'badge' },
+      { name: 'joinedDate', label: 'Joined Date', type: 'date' },
+      { name: 'department', label: 'Department', type: 'text' }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};
+
+export const ProductDetails: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-view',
+    objectName: 'Product',
+    layout: 'table',
+    data: {
+      sku: 'PROD-12345',
+      name: 'Professional Laptop',
+      category: 'Electronics',
+      brand: 'TechCorp',
+      price: 1299.99,
+      stock: 45,
+      description: 'High-performance laptop for professionals',
+      rating: 4.5,
+      reviews: 128
+    },
+    fields: [
+      { name: 'sku', label: 'SKU', type: 'text' },
+      { name: 'name', label: 'Product Name', type: 'text' },
+      { name: 'category', label: 'Category', type: 'text' },
+      { name: 'brand', label: 'Brand', type: 'text' },
+      { name: 'price', label: 'Price', type: 'currency' },
+      { name: 'stock', label: 'In Stock', type: 'number' },
+      { name: 'description', label: 'Description', type: 'textarea' },
+      { name: 'rating', label: 'Rating', type: 'number' },
+      { name: 'reviews', label: 'Reviews', type: 'number' }
+    ],
+    className: 'w-full max-w-3xl'
+  } as any,
+};
+
+export const OrderSummary: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-view',
+    objectName: 'Order',
+    layout: 'card',
+    data: {
+      orderId: 'ORD-98765',
+      customer: 'Alice Johnson',
+      orderDate: '2024-01-20',
+      total: 456.78,
+      status: 'Processing',
+      shippingAddress: '456 Oak Street, San Francisco, CA 94102',
+      items: 3,
+      trackingNumber: 'TRK123456789'
+    },
+    fields: [
+      { name: 'orderId', label: 'Order ID', type: 'text' },
+      { name: 'customer', label: 'Customer Name', type: 'text' },
+      { name: 'orderDate', label: 'Order Date', type: 'date' },
+      { name: 'total', label: 'Total Amount', type: 'currency' },
+      { name: 'status', label: 'Status', type: 'badge' },
+      { name: 'shippingAddress', label: 'Shipping Address', type: 'textarea' },
+      { name: 'items', label: 'Number of Items', type: 'number' },
+      { name: 'trackingNumber', label: 'Tracking Number', type: 'text' }
+    ],
+    className: 'w-full max-w-2xl'
+  } as any,
+};