@object-ui/components 0.5.0 → 3.0.0

package/src/stories-json/object-aggrid-advanced.stories.tsx

@@ -0,0 +1,389 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '../SchemaRenderer';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Plugins/Data Views/Object AgGrid Advanced',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+// Mock data source for demonstration
+const createMockDataSource = (objectName: string, data: any[]) => {
+  const mockSchema = {
+    name: objectName,
+    label: objectName.charAt(0).toUpperCase() + objectName.slice(1),
+    fields: {} as any
+  };
+
+  // Infer fields from data
+  if (data.length > 0) {
+    const firstRow = data[0];
+    Object.keys(firstRow).forEach(key => {
+      let type = 'text';
+      const value = firstRow[key];
+      
+      if (typeof value === 'number') type = 'number';
+      else if (typeof value === 'boolean') type = 'boolean';
+      else if (key.includes('email')) type = 'email';
+      else if (key.includes('phone')) type = 'phone';
+      else if (key.includes('url') || key.includes('website')) type = 'url';
+      else if (key.includes('date')) type = 'date';
+      else if (key.includes('price') || key.includes('cost') || key.includes('amount') || key.includes('salary')) type = 'currency';
+      else if (key.includes('percent') || key.includes('rate')) type = 'percent';
+      
+      mockSchema.fields[key] = {
+        name: key,
+        label: key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' '),
+        type,
+        sortable: true,
+        filterable: true,
+        editable: key !== 'id' // All fields except ID are editable
+      };
+    });
+  }
+
+  return {
+    find: async () => ({
+      data,
+      total: data.length,
+      page: 1,
+      pageSize: data.length,
+      hasMore: false
+    }),
+    getObjectSchema: async () => mockSchema
+  };
+};
+
+// Sample data for advanced examples
+const employeesData = [
+  { 
+    id: '1', 
+    name: 'Alice Johnson', 
+    email: 'alice.j@company.com', 
+    department: 'Engineering',
+    position: 'Senior Developer',
+    salary: 95000,
+    start_date: '2020-01-15',
+    status: 'Active'
+  },
+  { 
+    id: '2', 
+    name: 'Bob Smith', 
+    email: 'bob.s@company.com', 
+    department: 'Marketing',
+    position: 'Marketing Manager',
+    salary: 72000,
+    start_date: '2021-03-20',
+    status: 'Active'
+  },
+  { 
+    id: '3', 
+    name: 'Carol Davis', 
+    email: 'carol.d@company.com', 
+    department: 'Sales',
+    position: 'Sales Representative',
+    salary: 68000,
+    start_date: '2021-06-10',
+    status: 'Active'
+  },
+  { 
+    id: '4', 
+    name: 'David Wilson', 
+    email: 'david.w@company.com', 
+    department: 'Engineering',
+    position: 'Lead Engineer',
+    salary: 102000,
+    start_date: '2019-08-01',
+    status: 'Active'
+  },
+  { 
+    id: '5', 
+    name: 'Eve Brown', 
+    email: 'eve.b@company.com', 
+    department: 'HR',
+    position: 'HR Specialist',
+    salary: 65000,
+    start_date: '2022-02-14',
+    status: 'On Leave'
+  },
+  { 
+    id: '6', 
+    name: 'Frank Miller', 
+    email: 'frank.m@company.com', 
+    department: 'Engineering',
+    position: 'Software Engineer',
+    salary: 88000,
+    start_date: '2021-11-03',
+    status: 'Active'
+  },
+  { 
+    id: '7', 
+    name: 'Grace Lee', 
+    email: 'grace.l@company.com', 
+    department: 'Marketing',
+    position: 'Content Writer',
+    salary: 58000,
+    start_date: '2022-05-22',
+    status: 'Active'
+  },
+  { 
+    id: '8', 
+    name: 'Henry Clark', 
+    email: 'henry.c@company.com', 
+    department: 'Sales',
+    position: 'Sales Manager',
+    salary: 85000,
+    start_date: '2020-09-15',
+    status: 'Active'
+  },
+];
+
+const ordersData = [
+  { 
+    id: 'ORD-001', 
+    customer: 'Acme Corp',
+    product: 'Enterprise License',
+    quantity: 10,
+    amount: 15750,
+    date: '2024-01-15',
+    status: 'Delivered'
+  },
+  { 
+    id: 'ORD-002', 
+    customer: 'TechStart Inc',
+    product: 'Professional Plan',
+    quantity: 5,
+    amount: 8500,
+    date: '2024-01-18',
+    status: 'Shipped'
+  },
+  { 
+    id: 'ORD-003', 
+    customer: 'Global Solutions',
+    product: 'Enterprise License',
+    quantity: 15,
+    amount: 22300,
+    date: '2024-01-20',
+    status: 'Processing'
+  },
+  { 
+    id: 'ORD-004', 
+    customer: 'Innovation Labs',
+    product: 'Professional Plan',
+    quantity: 8,
+    amount: 12100,
+    date: '2024-01-22',
+    status: 'Delivered'
+  },
+  { 
+    id: 'ORD-005', 
+    customer: 'Future Systems',
+    product: 'Starter Plan',
+    quantity: 20,
+    amount: 9800,
+    date: '2024-01-25',
+    status: 'Shipped'
+  },
+];
+
+// Advanced Stories
+
+export const WithStatusBarAndAggregations: Story = {
+  render: renderStory,
+  name: 'Status Bar & Aggregations',
+  args: {
+    type: 'object-aggrid',
+    objectName: 'employees',
+    dataSource: createMockDataSource('employees', employeesData),
+    pagination: true,
+    pageSize: 10,
+    theme: 'quartz',
+    height: 550,
+    rowSelection: 'multiple',
+    statusBar: {
+      enabled: true,
+      aggregations: ['count', 'sum', 'avg', 'min', 'max']
+    },
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};
+
+export const WithContextMenu: Story = {
+  render: renderStory,
+  name: 'Context Menu',
+  args: {
+    type: 'object-aggrid',
+    objectName: 'employees',
+    dataSource: createMockDataSource('employees', employeesData),
+    pagination: true,
+    pageSize: 10,
+    theme: 'quartz',
+    height: 500,
+    contextMenu: {
+      enabled: true,
+      items: ['copy', 'copyWithHeaders', 'separator', 'export', 'autoSizeAll']
+    },
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};
+
+export const InlineEditingWithSelection: Story = {
+  render: renderStory,
+  name: 'Inline Editing + Row Selection',
+  args: {
+    type: 'object-aggrid',
+    objectName: 'orders',
+    dataSource: createMockDataSource('orders', ordersData),
+    editable: true,
+    singleClickEdit: true,
+    pagination: true,
+    pageSize: 10,
+    theme: 'alpine',
+    height: 500,
+    rowSelection: 'multiple',
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};
+
+export const FullFeatured: Story = {
+  render: renderStory,
+  name: 'Full Featured (All Options)',
+  args: {
+    type: 'object-aggrid',
+    objectName: 'employees',
+    dataSource: createMockDataSource('employees', employeesData),
+    editable: true,
+    singleClickEdit: false,
+    pagination: true,
+    pageSize: 5,
+    theme: 'quartz',
+    height: 600,
+    rowSelection: 'multiple',
+    animateRows: true,
+    enableRangeSelection: true,
+    exportConfig: {
+      enabled: true,
+      fileName: 'employees.csv'
+    },
+    statusBar: {
+      enabled: true,
+      aggregations: ['count', 'sum', 'avg']
+    },
+    contextMenu: {
+      enabled: true,
+      items: ['copy', 'copyWithHeaders', 'separator', 'export', 'autoSizeAll']
+    },
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};
+
+export const AlpineThemeFullFeatured: Story = {
+  render: renderStory,
+  name: 'Alpine Theme (Full Featured)',
+  args: {
+    type: 'object-aggrid',
+    objectName: 'orders',
+    dataSource: createMockDataSource('orders', ordersData),
+    editable: true,
+    singleClickEdit: true,
+    pagination: true,
+    pageSize: 5,
+    theme: 'alpine',
+    height: 550,
+    rowSelection: 'multiple',
+    exportConfig: {
+      enabled: true,
+      fileName: 'orders.csv'
+    },
+    statusBar: {
+      enabled: true,
+      aggregations: ['count', 'sum']
+    },
+    contextMenu: {
+      enabled: true,
+      items: ['copy', 'export', 'autoSizeAll']
+    },
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};
+
+export const BalhamThemeWithExport: Story = {
+  render: renderStory,
+  name: 'Balham Theme + Export',
+  args: {
+    type: 'object-aggrid',
+    objectName: 'employees',
+    dataSource: createMockDataSource('employees', employeesData),
+    pagination: true,
+    pageSize: 10,
+    theme: 'balham',
+    height: 500,
+    rowSelection: 'multiple',
+    exportConfig: {
+      enabled: true,
+      fileName: 'employees-balham.csv',
+      onlySelected: true
+    },
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};
+
+export const MaterialThemeWithStatusBar: Story = {
+  render: renderStory,
+  name: 'Material Theme + Status Bar',
+  args: {
+    type: 'object-aggrid',
+    objectName: 'orders',
+    dataSource: createMockDataSource('orders', ordersData),
+    pagination: true,
+    pageSize: 10,
+    theme: 'material',
+    height: 550,
+    rowSelection: 'multiple',
+    statusBar: {
+      enabled: true,
+      aggregations: ['count', 'sum', 'avg']
+    },
+    columnConfig: {
+      resizable: true,
+      sortable: true,
+      filterable: true
+    }
+  } as any,
+};

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

@@ -4,7 +4,7 @@ import type { BaseSchema } from '@object-ui/types';
 import { ObjectStackAdapter } from '@object-ui/data-objectstack';
 
 const meta = {
-  title: 'Views/Object Data Grid (ObjectAgGrid)',
+  title: 'Plugins/Data Views/Object AgGrid',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

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

@@ -4,7 +4,7 @@ import type { BaseSchema } from '@object-ui/types';
 import { createStorybookDataSource } from '@storybook-config/datasource';
 
 const meta = {
-  title: 'Views/Object Form',
+  title: 'Plugins/Forms/Object Form',
   component: SchemaRenderer,
   parameters: {
     layout: 'centered',

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

@@ -4,7 +4,7 @@ import type { BaseSchema } from '@object-ui/types';
 import { createStorybookDataSource } from '@storybook-config/datasource';
 
 const meta = {
-  title: 'Views/Gantt',
+  title: 'Plugins/Scheduling/Gantt',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

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

@@ -4,7 +4,7 @@ import type { BaseSchema } from '@object-ui/types';
 import { createStorybookDataSource } from '@storybook-config/datasource';
 
 const meta = {
-  title: 'Views/Object Grid',
+  title: 'Plugins/Data Views/Object Grid',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',
@@ -155,3 +155,161 @@ export const OpportunitiesGrid: Story = {
     className: 'w-full'
   } as any,
 };
+
+/**
+ * Editable Grid - Simple Inline Cell Editing
+ * 
+ * This story demonstrates basic inline editing capabilities:
+ * - Double-click or press Enter to edit a cell
+ * - Press Enter to save, Escape to cancel
+ * - ID column is read-only (editable: false)
+ * - Changes are immediately reported via onCellChange callback
+ */
+export const EditableGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'User',
+    columns: [
+      { field: 'id', header: 'ID', width: 80, editable: false },
+      { field: 'name', header: 'Name', sortable: true },
+      { field: 'email', header: 'Email', sortable: 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' },
+      { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'User', status: 'Active' }
+    ],
+    editable: true,
+    pagination: false,
+    className: 'w-full',
+    onCellChange: (rowIndex: number, columnKey: string, newValue: any, row: any) => {
+      console.log('Cell changed:', { rowIndex, columnKey, newValue, row });
+      alert(`✓ Cell updated immediately:\n${columnKey} = "${newValue}"`);
+    }
+  } as any,
+};
+
+/**
+ * Batch Edit Grid - Multi-Row Editing with Batch Save
+ * 
+ * **💡 How to use:**
+ * 1. Double-click any cell (except SKU) to start editing
+ * 2. Press Enter to confirm the edit (cell becomes highlighted in amber)
+ * 3. Edit more cells across different rows
+ * 4. Watch the toolbar appear showing "X rows modified" with Save/Cancel buttons
+ * 5. Row-level save buttons (✓) appear in the Actions column for edited rows
+ * 6. Click "Save All" to batch save, or click row save buttons individually
+ * 
+ * **Features demonstrated:**
+ * - Edit multiple cells across multiple rows
+ * - Modified rows are highlighted with amber background
+ * - Modified cells shown in bold amber text
+ * - Row-level save/cancel buttons appear after editing
+ * - Batch save all changes at once using "Save All" button
+ * - Cancel changes per row or all at once
+ * - Toolbar shows count of modified rows
+ */
+export const BatchEditGrid: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Product',
+    columns: [
+      { field: 'sku', header: 'SKU', width: 120, editable: false },
+      { field: 'name', header: 'Product Name', sortable: true },
+      { field: 'category', header: 'Category', sortable: true },
+      { field: 'price', header: 'Price', sortable: true },
+      { field: 'stock', header: 'Stock', sortable: true }
+    ],
+    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: 'Keyboard', category: 'Accessories', price: '$79.99', stock: 45 },
+      { sku: 'PROD-004', name: 'Monitor', category: 'Electronics', price: '$399.99', stock: 22 },
+      { sku: 'PROD-005', name: 'USB Cable', category: 'Accessories', price: '$12.99', stock: 200 }
+    ],
+    editable: true,
+    pagination: false,
+    rowActions: true,
+    className: 'w-full',
+    onRowSave: async (rowIndex: number, changes: Record<string, any>, row: any) => {
+      console.log('Saving row:', { rowIndex, changes, row });
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 500));
+      const changeList = Object.entries(changes).map(([k, v]) => `  ${k}: "${v}"`).join('\n');
+      alert(`✓ Saved changes for "${row.name}":\n\n${changeList}`);
+    },
+    onBatchSave: async (allChanges: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => {
+      console.log('Batch saving:', allChanges);
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      const summary = allChanges.map(c => 
+        `${c.row.name}: ${Object.keys(c.changes).join(', ')}`
+      ).join('\n');
+      alert(`✓ Batch saved ${allChanges.length} rows:\n\n${summary}`);
+    }
+  } as any,
+};
+
+/**
+ * Advanced Batch Editing - Real-World Inventory Management
+ * 
+ * **💡 Instructions:**
+ * - Double-click any cell (except ID and SKU which are read-only)
+ * - Make edits across multiple rows and pages
+ * - Save buttons appear in Actions column after editing
+ * - Batch save toolbar appears when there are pending changes
+ * 
+ * **Complete workflow demonstration:**
+ * - Large dataset with pagination
+ * - Multiple editable fields
+ * - Read-only columns (ID, SKU)
+ * - Both row-level and batch save operations
+ * - Search and filter capabilities
+ */
+export const AdvancedBatchEdit: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-grid',
+    objectName: 'Inventory',
+    columns: [
+      { field: 'id', header: 'ID', width: 60, editable: false },
+      { field: 'sku', header: 'SKU', width: 100, editable: false },
+      { field: 'name', header: 'Product Name', sortable: true },
+      { field: 'category', header: 'Category', sortable: true },
+      { field: 'price', header: 'Price ($)', sortable: true },
+      { field: 'stock', header: 'Stock', sortable: true },
+      { field: 'reorderLevel', header: 'Reorder At', sortable: true }
+    ],
+    data: [
+      { id: 1, sku: 'ELEC-001', name: 'Wireless Mouse', category: 'Electronics', price: '29.99', stock: 45, reorderLevel: 20 },
+      { id: 2, sku: 'ELEC-002', name: 'USB Keyboard', category: 'Electronics', price: '49.99', stock: 32, reorderLevel: 15 },
+      { id: 3, sku: 'FURN-001', name: 'Desk Lamp', category: 'Furniture', price: '34.99', stock: 18, reorderLevel: 10 },
+      { id: 4, sku: 'ELEC-003', name: 'Webcam HD', category: 'Electronics', price: '79.99', stock: 12, reorderLevel: 10 },
+      { id: 5, sku: 'ACC-001', name: 'HDMI Cable', category: 'Accessories', price: '15.99', stock: 150, reorderLevel: 50 },
+      { id: 6, sku: 'FURN-002', name: 'Monitor Stand', category: 'Furniture', price: '45.99', stock: 28, reorderLevel: 12 },
+      { id: 7, sku: 'ELEC-004', name: 'USB Hub', category: 'Electronics', price: '24.99', stock: 65, reorderLevel: 25 },
+      { id: 8, sku: 'ACC-002', name: 'Mouse Pad', category: 'Accessories', price: '9.99', stock: 200, reorderLevel: 75 }
+    ],
+    editable: true,
+    pagination: true,
+    pageSize: 5,
+    rowActions: true,
+    className: 'w-full',
+    onRowSave: async (rowIndex: number, changes: Record<string, any>, row: any) => {
+      console.log('Saving inventory row:', { rowIndex, changes, row });
+      await new Promise(resolve => setTimeout(resolve, 600));
+      alert(`✓ Updated inventory for "${row.name}"\n\nChanges:\n${JSON.stringify(changes, null, 2)}`);
+    },
+    onBatchSave: async (allChanges: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => {
+      console.log('Batch updating inventory:', allChanges);
+      await new Promise(resolve => setTimeout(resolve, 1200));
+      alert(`✓ Batch updated ${allChanges.length} inventory items\n\nProcessed successfully!`);
+    }
+  } as any,
+};
+

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

@@ -4,7 +4,7 @@ import type { BaseSchema } from '@object-ui/types';
 import { createStorybookDataSource } from '@storybook-config/datasource';
 
 const meta = {
-  title: 'Views/Map',
+  title: 'Plugins/Rich Content/Map',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

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

@@ -4,7 +4,7 @@ import type { BaseSchema } from '@object-ui/types';
 import { createStorybookDataSource } from '@storybook-config/datasource';
 
 const meta = {
-  title: 'Views/Object View',
+  title: 'Plugins/Data Views/Object View',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',

package/src/stories-json/overlay_extras.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SchemaRenderer } from '../SchemaRenderer';
 
 const meta: Meta = {
-  title: 'Components/Overlay Extras',
+  title: 'Primitives/Overlay/Extras',
   component: SchemaRenderer,
   tags: ['autodocs'],
   argTypes: {

package/src/stories-json/overlay_others.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Overlay Others',
+  title: 'Primitives/Overlay/Others',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

package/src/stories-json/resizable.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Resizable',
+  title: 'Primitives/Layout/Resizable',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

package/src/stories-json/select.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Select',
+  title: 'Primitives/Data Entry/Select',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

package/src/stories-json/separator.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Separator',
+  title: 'Primitives/General/Separator',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

package/src/stories-json/statistic.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Statistic',
+  title: 'Primitives/Data Display/Statistic',
   component: SchemaRenderer,
   parameters: { layout: 'centered' },
   tags: ['autodocs'],

package/src/stories-json/tabs.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Tabs',
+  title: 'Primitives/Navigation/Tabs',
   component: SchemaRenderer,
   parameters: { layout: 'padded' },
   tags: ['autodocs'],

package/src/stories-json/timeline.stories.tsx

@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
 import type { BaseSchema } from '@object-ui/types';
 
 const meta = {
-  title: 'Components/Timeline',
+  title: 'Primitives/Data Display/Timeline',
   component: SchemaRenderer,
   parameters: {
     layout: 'padded',