@object-ui/plugin-grid 0.5.0 → 2.0.0

package/src/ListColumnSchema.test.ts

@@ -0,0 +1,88 @@
+/**
+ * ListColumn Zod Schema Tests
+ *
+ * Verifies that the ListColumnSchema Zod definition includes link and action properties.
+ */
+import { describe, it, expect } from 'vitest';
+import { ListColumnSchema } from '@object-ui/types/zod';
+
+describe('ListColumnSchema (Zod)', () => {
+  it('should accept link property', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+      link: true,
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.link).toBe(true);
+    }
+  });
+
+  it('should accept action property', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'status',
+      action: 'toggleStatus',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.action).toBe('toggleStatus');
+    }
+  });
+
+  it('should accept all properties together', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+      label: 'Full Name',
+      width: 200,
+      align: 'left',
+      hidden: false,
+      sortable: true,
+      resizable: true,
+      wrap: false,
+      type: 'text',
+      link: true,
+      action: 'viewDetail',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.link).toBe(true);
+      expect(result.data.action).toBe('viewDetail');
+    }
+  });
+
+  it('should make link optional', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.link).toBeUndefined();
+    }
+  });
+
+  it('should make action optional', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.action).toBeUndefined();
+    }
+  });
+
+  it('should reject non-boolean link', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+      link: 'yes',
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it('should reject non-string action', () => {
+    const result = ListColumnSchema.safeParse({
+      field: 'name',
+      action: 42,
+    });
+    expect(result.success).toBe(false);
+  });
+});

package/src/ObjectGrid.msw.test.tsx

@@ -30,6 +30,26 @@ const mockData = {
 // --- MSW Setup ---
 
 const handlers = [
+  // .well-known discovery endpoint (used by client.connect())
+  http.get(`${BASE_URL}/.well-known/objectstack`, () => {
+    return HttpResponse.json({
+      name: 'ObjectStack API',
+      version: '1.0',
+      endpoints: {
+        data: '/api/v1/data',
+        metadata: '/api/v1/meta'
+      },
+      capabilities: {
+        graphql: false,
+        search: false,
+        websockets: false,
+        files: true,
+        analytics: false,
+        hub: false
+      }
+    });
+  }),
+
   // OPTIONS handler for CORS preflight
   http.options(`${BASE_URL}/*`, () => {
     return new HttpResponse(null, {
@@ -47,7 +67,10 @@ const handlers = [
     return HttpResponse.json({ status: 'ok', version: '1.0.0' });
   }),
 
-  // Schema: /api/v1/meta/object/:name
+  // Schema: /api/v1/metadata/object/:name and /api/v1/meta/object/:name (client uses /meta)
+  http.get(`${BASE_URL}/api/v1/metadata/object/contact`, () => {
+    return HttpResponse.json(mockSchema);
+  }),
   http.get(`${BASE_URL}/api/v1/meta/object/contact`, () => {
     return HttpResponse.json(mockSchema);
   }),

package/src/ObjectGrid.tsx

@@ -23,9 +23,9 @@
 
 import React, { useEffect, useState, useCallback } from 'react';
 import type { ObjectGridSchema, DataSource, ListColumn, ViewData } from '@object-ui/types';
-import { SchemaRenderer, useDataScope } from '@object-ui/react';
+import { SchemaRenderer, useDataScope, useNavigationOverlay, useAction } from '@object-ui/react';
 import { getCellRenderer } from '@object-ui/fields';
-import { Button } from '@object-ui/components';
+import { Button, NavigationOverlay } from '@object-ui/components';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -42,7 +42,9 @@ export interface ObjectGridProps {
   onEdit?: (record: any) => void;
   onDelete?: (record: any) => void;
   onBulkDelete?: (records: any[]) => void;
-  onCellChange?: (rowIndex: number, columnKey: string, newValue: any) => void;
+  onCellChange?: (rowIndex: number, columnKey: string, newValue: any, row: any) => void;
+  onRowSave?: (rowIndex: number, changes: Record<string, any>, row: any) => void | Promise<void>;
+  onBatchSave?: (changes: Array<{ rowIndex: number; changes: Record<string, any>; row: any }>) => void | Promise<void>;
   onRowSelect?: (selectedRows: any[]) => void;
 }
 
@@ -109,6 +111,9 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   onDelete,
   onRowSelect,
   onRowClick,
+  onCellChange,
+  onRowSave,
+  onBatchSave,
   ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
@@ -146,6 +151,20 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   
   const hasInlineData = dataConfig?.provider === 'value';
 
+  // Extract stable primitive/reference-stable values from schema for dependency arrays.
+  // This prevents infinite re-render loops when schema is a new object on each render
+  // (e.g. when rendered through SchemaRenderer which creates a fresh evaluatedSchema).
+  const objectName = dataConfig?.provider === 'object' && dataConfig && 'object' in dataConfig
+    ? (dataConfig as any).object
+    : schema.objectName;
+  const schemaFields = schema.fields;
+  const schemaColumns = schema.columns;
+  const schemaFilter = schema.filter;
+  const schemaSort = schema.sort;
+  const schemaPagination = schema.pagination;
+  const schemaPageSize = schema.pageSize;
+
+  // --- Inline data effect (synchronous, no fetch needed) ---
   useEffect(() => {
     if (hasInlineData && dataConfig?.provider === 'value') {
        // Only update if data is different to avoid infinite loop
@@ -160,42 +179,116 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     }
   }, [hasInlineData, dataConfig]);
 
+  // --- Unified async data loading effect ---
+  // Combines schema fetch + data fetch into a single async flow with AbortController.
+  // This avoids the fragile "chained effects" pattern where Effect 1 sets objectSchema,
+  // triggering Effect 2 to call fetchData — a pattern prone to infinite loops when
+  // fetchData's reference is unstable.
   useEffect(() => {
-    const fetchObjectSchema = async () => {
+    if (hasInlineData) return;
+
+    let cancelled = false;
+
+    const loadSchemaAndData = async () => {
+      setLoading(true);
+      setError(null);
       try {
-        if (!dataSource) {
+        // --- Step 1: Resolve object schema ---
+        let resolvedSchema: any = null;
+        const cols = normalizeColumns(schemaColumns) || schemaFields;
+
+        if (cols && objectName) {
+          // We have explicit columns — use a minimal schema stub
+          resolvedSchema = { name: objectName, fields: {} };
+        } else if (objectName && dataSource) {
+          // Fetch full schema from DataSource
+          const schemaData = await dataSource.getObjectSchema(objectName);
+          if (cancelled) return;
+          resolvedSchema = schemaData;
+        } else if (!objectName) {
+          throw new Error('Object name required for data fetching');
+        } else {
           throw new Error('DataSource required');
         }
-        
-        // For object provider, get the object name
-        const objectName = dataConfig?.provider === 'object' && 'object' in dataConfig
-          ? dataConfig.object 
-          : schema.objectName;
-          
-        if (!objectName) {
-          throw new Error('Object name required for object provider');
+
+        if (!cancelled) {
+          setObjectSchema(resolvedSchema);
+        }
+
+        // --- Step 2: Fetch data ---
+        if (dataSource && objectName) {
+          const getSelectFields = () => {
+            if (schemaFields) return schemaFields;
+            if (schemaColumns && Array.isArray(schemaColumns)) {
+              return schemaColumns.map((c: any) => typeof c === 'string' ? c : c.field);
+            }
+            return undefined;
+          };
+
+          const params: any = {
+            $select: getSelectFields(),
+            $top: (schemaPagination as any)?.pageSize || schemaPageSize || 50,
+          };
+
+          // Support new filter format
+          if (schemaFilter && Array.isArray(schemaFilter)) {
+            params.$filter = schemaFilter;
+          } else if (schema.defaultFilters) {
+            // Legacy support
+            params.$filter = schema.defaultFilters;
+          }
+
+          // Support new sort format
+          if (schemaSort) {
+            if (typeof schemaSort === 'string') {
+              params.$orderby = schemaSort;
+            } else if (Array.isArray(schemaSort)) {
+              params.$orderby = schemaSort
+                .map((s: any) => `${s.field} ${s.order}`)
+                .join(', ');
+            }
+          } else if (schema.defaultSort) {
+            // Legacy support
+            params.$orderby = `${(schema.defaultSort as any).field} ${(schema.defaultSort as any).order}`;
+          }
+
+          const result = await dataSource.find(objectName, params);
+          if (cancelled) return;
+          setData(result.data || []);
         }
-        
-        const schemaData = await dataSource.getObjectSchema(objectName);
-        setObjectSchema(schemaData);
       } catch (err) {
-        setError(err as Error);
+        if (!cancelled) {
+          setError(err as Error);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
       }
     };
 
-    // Normalize columns (support both legacy 'fields' and new 'columns')
-    const cols = normalizeColumns(schema.columns) || schema.fields;
-    
-    if (hasInlineData && cols) {
-      setObjectSchema({ name: schema.objectName, fields: {} });
-    } else if (schema.objectName && !hasInlineData && dataSource) {
-      fetchObjectSchema();
-    }
-  }, [schema.objectName, schema.columns, schema.fields, dataSource, hasInlineData, dataConfig]);
+    loadSchemaAndData();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [objectName, schemaFields, schemaColumns, schemaFilter, schemaSort, schemaPagination, schemaPageSize, dataSource, hasInlineData, dataConfig]);
+
+  // --- NavigationConfig support ---
+  // Must be called before any early returns to satisfy React hooks rules
+  const navigation = useNavigationOverlay({
+    navigation: schema.navigation,
+    objectName: schema.objectName,
+    onNavigate: schema.onNavigate,
+    onRowClick,
+  });
+
+  // --- Action support for action columns ---
+  const { execute: executeAction } = useAction();
 
   const generateColumns = useCallback(() => {
     // Use normalized columns (support both new and legacy)
-    const cols = normalizeColumns(schema.columns);
+    const cols = normalizeColumns(schemaColumns);
     
     if (cols) {
       // Check if columns are already in data-table format (have 'accessorKey')
@@ -208,17 +301,97 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
           return cols;
         }
         
-        // ListColumn format - convert to data-table format
+        // ListColumn format - convert to data-table format with full feature support
         if ('field' in firstCol) {
           return (cols as ListColumn[])
-            .filter((col) => col?.field && typeof col.field === 'string') // Filter out invalid column objects
-            .map((col) => ({
-              header: col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' '),
-              accessorKey: col.field,
-              ...(col.width && { width: col.width }),
-              ...(col.align && { align: col.align }),
-              sortable: col.sortable !== false,
-            }));
+            .filter((col) => col?.field && typeof col.field === 'string' && !col.hidden)
+            .map((col) => {
+              const header = col.label || col.field.charAt(0).toUpperCase() + col.field.slice(1).replace(/_/g, ' ');
+
+              // Build custom cell renderer based on column configuration
+              let cellRenderer: ((value: any, row: any) => React.ReactNode) | undefined;
+
+              // Type-based cell renderer (e.g., "currency", "date", "boolean")
+              const CellRenderer = col.type ? getCellRenderer(col.type) : null;
+
+              if (col.link && col.action) {
+                // Both link and action: link takes priority for navigation, action executes on secondary interaction
+                cellRenderer = (value: any, row: any) => {
+                  const displayContent = CellRenderer
+                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                    : String(value ?? '');
+                  return (
+                    <button
+                      type="button"
+                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigation.handleClick(row);
+                      }}
+                    >
+                      {displayContent}
+                    </button>
+                  );
+                };
+              } else if (col.link) {
+                // Link column: clicking navigates to the record detail
+                cellRenderer = (value: any, row: any) => {
+                  const displayContent = CellRenderer
+                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                    : String(value ?? '');
+                  return (
+                    <button
+                      type="button"
+                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        navigation.handleClick(row);
+                      }}
+                    >
+                      {displayContent}
+                    </button>
+                  );
+                };
+              } else if (col.action) {
+                // Action column: clicking executes the registered action
+                cellRenderer = (value: any, row: any) => {
+                  const displayContent = CellRenderer
+                    ? <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                    : String(value ?? '');
+                  return (
+                    <button
+                      type="button"
+                      className="text-primary underline-offset-4 hover:underline cursor-pointer bg-transparent border-none p-0 text-left font-inherit"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        executeAction({
+                          type: col.action!,
+                          params: { record: row, field: col.field, value },
+                        });
+                      }}
+                    >
+                      {displayContent}
+                    </button>
+                  );
+                };
+              } else if (CellRenderer) {
+                // Type-only cell renderer (no link/action)
+                cellRenderer = (value: any) => (
+                  <CellRenderer value={value} field={{ name: col.field, type: col.type || 'text' } as any} />
+                );
+              }
+
+              return {
+                header,
+                accessorKey: col.field,
+                ...(col.width && { width: col.width }),
+                ...(col.align && { align: col.align }),
+                sortable: col.sortable !== false,
+                ...(col.resizable !== undefined && { resizable: col.resizable }),
+                ...(col.wrap !== undefined && { wrap: col.wrap }),
+                ...(cellRenderer && { cell: cellRenderer }),
+              };
+            });
         }
       }
       
@@ -238,7 +411,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     if (hasInlineData) {
       const inlineData = dataConfig?.provider === 'value' ? dataConfig.items as any[] : [];
       if (inlineData.length > 0) {
-        const fieldsToShow = schema.fields || Object.keys(inlineData[0]);
+        const fieldsToShow = schemaFields || Object.keys(inlineData[0]);
         return fieldsToShow.map((fieldName) => ({
           header: fieldName.charAt(0).toUpperCase() + fieldName.slice(1).replace(/_/g, ' '),
           accessorKey: fieldName,
@@ -249,7 +422,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     if (!objectSchema) return [];
 
     const generatedColumns: any[] = [];
-    const fieldsToShow = schema.fields || Object.keys(objectSchema.fields || {});
+    const fieldsToShow = schemaFields || Object.keys(objectSchema.fields || {});
     
     fieldsToShow.forEach((fieldName) => {
       const field = objectSchema.fields?.[fieldName];
@@ -267,74 +440,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     });
 
     return generatedColumns;
-  }, [objectSchema, schema.fields, schema.columns, dataConfig, hasInlineData]);
-
-  const fetchData = useCallback(async () => {
-    if (hasInlineData || !dataSource) return;
-
-    setLoading(true);
-    try {
-      // Get object name from data config or schema
-      const objectName = dataConfig?.provider === 'object' && 'object' in dataConfig
-        ? dataConfig.object 
-        : schema.objectName;
-        
-      if (!objectName) {
-        throw new Error('Object name required for data fetching');
-      }
-      
-      // Helper to get select fields
-      const getSelectFields = () => {
-        if (schema.fields) return schema.fields;
-        if (schema.columns && Array.isArray(schema.columns)) {
-          return schema.columns.map(c => typeof c === 'string' ? c : c.field);
-        }
-        return undefined;
-      };
-      
-      const params: any = {
-        $select: getSelectFields(),
-        $top: schema.pagination?.pageSize || schema.pageSize || 50,
-      };
-
-      // Support new filter format
-      if (schema.filter && Array.isArray(schema.filter)) {
-        params.$filter = schema.filter;
-      } else if ('defaultFilters' in schema && schema.defaultFilters) {
-        // Legacy support
-        params.$filter = schema.defaultFilters;
-      }
-
-      // Support new sort format
-      if (schema.sort) {
-        if (typeof schema.sort === 'string') {
-          // Legacy string format
-          params.$orderby = schema.sort;
-        } else if (Array.isArray(schema.sort)) {
-          // New array format
-          params.$orderby = schema.sort
-            .map(s => `${s.field} ${s.order}`)
-            .join(', ');
-        }
-      } else if ('defaultSort' in schema && schema.defaultSort) {
-        // Legacy support
-        params.$orderby = `${schema.defaultSort.field} ${schema.defaultSort.order}`;
-      }
-
-      const result = await dataSource.find(objectName, params);
-      setData(result.data || []);
-    } catch (err) {
-      setError(err as Error);
-    } finally {
-      setLoading(false);
-    }
-  }, [schema, dataSource, hasInlineData, dataConfig]);
-
-  useEffect(() => {
-    if (objectSchema || hasInlineData) {
-      fetchData();
-    }
-  }, [objectSchema, hasInlineData, fetchData]);
+  }, [objectSchema, schemaFields, schemaColumns, dataConfig, hasInlineData, navigation.handleClick, executeAction]);
 
   if (error) {
     return (
@@ -357,7 +463,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   const columns = generateColumns();
   const operations = 'operations' in schema ? schema.operations : undefined;
   const hasActions = operations && (operations.update || operations.delete);
-  
+
   const columnsWithActions = hasActions ? [
     ...columns,
     {
@@ -428,10 +534,68 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
     rowActions: hasActions,
     resizableColumns: schema.resizable ?? schema.resizableColumns ?? true,
     reorderableColumns: schema.reorderableColumns ?? false,
+    editable: schema.editable ?? false,
     className: schema.className,
     onSelectionChange: onRowSelect,
-    onRowClick: onRowClick,
+    onRowClick: navigation.handleClick,
+    onCellChange: onCellChange,
+    onRowSave: onRowSave,
+    onBatchSave: onBatchSave,
   };
 
-  return <SchemaRenderer schema={dataTableSchema} />;
+  // Build record detail title
+  const detailTitle = schema.label
+    ? `${schema.label} Detail`
+    : schema.objectName
+      ? `${schema.objectName.charAt(0).toUpperCase() + schema.objectName.slice(1)} Detail`
+      : 'Record Detail';
+
+  // For split mode, wrap the grid in the ResizablePanelGroup
+  if (navigation.isOverlay && navigation.mode === 'split') {
+    return (
+      <NavigationOverlay
+        {...navigation}
+        title={detailTitle}
+        mainContent={<SchemaRenderer schema={dataTableSchema} />}
+      >
+        {(record) => (
+          <div className="space-y-3">
+            {Object.entries(record).map(([key, value]) => (
+              <div key={key} className="flex flex-col">
+                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                  {key.replace(/_/g, ' ')}
+                </span>
+                <span className="text-sm">{String(value ?? '—')}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </NavigationOverlay>
+    );
+  }
+
+  return (
+    <>
+      <SchemaRenderer schema={dataTableSchema} />
+      {navigation.isOverlay && (
+        <NavigationOverlay
+          {...navigation}
+          title={detailTitle}
+        >
+          {(record) => (
+            <div className="space-y-3">
+              {Object.entries(record).map(([key, value]) => (
+                <div key={key} className="flex flex-col">
+                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                    {key.replace(/_/g, ' ')}
+                  </span>
+                  <span className="text-sm">{String(value ?? '—')}</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </NavigationOverlay>
+      )}
+    </>
+  );
 };