@object-ui/components 0.5.0 → 2.0.0

package/src/renderers/complex/__tests__/data-table-editing.test.tsx

@@ -0,0 +1,221 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import type { DataTableSchema } from '@object-ui/types';
+
+// Import the component
+import '../data-table';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('Data Table - Inline Editing', () => {
+  const mockData = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 35 },
+  ];
+
+  const mockColumns = [
+    { header: 'ID', accessorKey: 'id', editable: false },
+    { header: 'Name', accessorKey: 'name' },
+    { header: 'Email', accessorKey: 'email' },
+    { header: 'Age', accessorKey: 'age' },
+  ];
+
+  it('should render table with editable cells when editable is true', () => {
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Check that cells are rendered
+    expect(screen.getByText('John Doe')).toBeInTheDocument();
+    expect(screen.getByText('jane@example.com')).toBeInTheDocument();
+    
+    // Editable cells should have tabindex
+    const cells = container.querySelectorAll('td[tabindex="0"]');
+    expect(cells.length).toBeGreaterThan(0);
+  });
+
+  it('should call onCellChange when cell value is edited', async () => {
+    const onCellChange = vi.fn();
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false, // Disable search to avoid confusion with edit input
+      onCellChange,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Find the first editable cell (name column)
+    const nameCell = screen.getByText('John Doe').closest('td');
+    expect(nameCell).toBeInTheDocument();
+    
+    // Double-click to enter edit mode
+    if (nameCell) {
+      fireEvent.doubleClick(nameCell);
+      
+      // Wait for input to appear inside the cell
+      await waitFor(() => {
+        const input = nameCell.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = nameCell.querySelector('input');
+      if (input) {
+        // Change the value
+        fireEvent.change(input, { target: { value: 'John Smith' } });
+        
+        // Press Enter to save
+        fireEvent.keyDown(input, { key: 'Enter' });
+        
+        // Verify onCellChange was called
+        await waitFor(() => {
+          expect(onCellChange).toHaveBeenCalledWith(
+            0, // row index
+            'name', // column key
+            'John Smith', // new value
+            mockData[0] // row data
+          );
+        });
+      }
+    }
+  });
+
+  it('should not allow editing when editable is false', () => {
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: false,
+      pagination: false,
+      searchable: false, // Disable search to avoid confusion
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Find a cell
+    const nameCell = screen.getByText('John Doe').closest('td');
+    expect(nameCell).toBeInTheDocument();
+    
+    // Double-click should not trigger edit mode
+    if (nameCell) {
+      fireEvent.doubleClick(nameCell);
+      
+      // Input should not appear in the cell
+      const input = nameCell?.querySelector('input');
+      expect(input).not.toBeInTheDocument();
+    }
+  });
+
+  it('should respect column-level editable flag', () => {
+    const onCellChange = vi.fn();
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false, // Disable search to avoid confusion
+      onCellChange,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Try to edit ID column (which has editable: false)
+    const idCell = screen.getByText('1').closest('td');
+    expect(idCell).toBeInTheDocument();
+    
+    if (idCell) {
+      fireEvent.doubleClick(idCell);
+      
+      // Input should not appear for non-editable column
+      const input = idCell.querySelector('input');
+      expect(input).not.toBeInTheDocument();
+    }
+  });
+
+  it('should cancel edit on Escape key', async () => {
+    const onCellChange = vi.fn();
+    
+    const schema: DataTableSchema = {
+      type: 'data-table',
+      columns: mockColumns,
+      data: mockData,
+      editable: true,
+      pagination: false,
+      searchable: false, // Disable search to avoid confusion
+      onCellChange,
+    };
+
+    const DataTableRenderer = ComponentRegistry.get('data-table');
+    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
+
+    const { container } = render(<DataTableRenderer schema={schema} />);
+    
+    // Find the first editable cell
+    const nameCell = screen.getByText('John Doe').closest('td');
+    expect(nameCell).toBeInTheDocument();
+    
+    // Double-click to enter edit mode
+    if (nameCell) {
+      fireEvent.doubleClick(nameCell);
+      
+      // Wait for input to appear
+      await waitFor(() => {
+        const input = nameCell.querySelector('input');
+        expect(input).toBeInTheDocument();
+      });
+      
+      const input = nameCell.querySelector('input');
+      if (input) {
+        // Change the value
+        fireEvent.change(input, { target: { value: 'John Smith' } });
+        
+        // Press Escape to cancel
+        fireEvent.keyDown(input, { key: 'Escape' });
+        
+        // Verify onCellChange was NOT called
+        await waitFor(() => {
+          expect(onCellChange).not.toHaveBeenCalled();
+        });
+        
+        // Input should be removed
+        expect(nameCell.querySelector('input')).not.toBeInTheDocument();
+        
+        // Original value should be preserved
+        expect(screen.getByText('John Doe')).toBeInTheDocument();
+      }
+    }
+  });
+});

package/src/renderers/complex/data-table.tsx

@@ -44,6 +44,8 @@ import {
   ChevronsLeft,
   ChevronsRight,
   GripVertical,
+  Save,
+  X,
 } from 'lucide-react';
 
 type SortDirection = 'asc' | 'desc' | null;
@@ -97,6 +99,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     rowActions = false,
     resizableColumns = true,
     reorderableColumns = true,
+    editable = false,
     className,
   } = schema;
 
@@ -120,11 +123,17 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
   const [draggedColumn, setDraggedColumn] = useState<number | null>(null);
   const [dragOverColumn, setDragOverColumn] = useState<number | null>(null);
+  const [editingCell, setEditingCell] = useState<{ rowIndex: number; columnKey: string } | null>(null);
+  const [editValue, setEditValue] = useState<any>('');
+  // Track pending changes for multi-cell editing: rowIndex -> { columnKey -> newValue }
+  const [pendingChanges, setPendingChanges] = useState<Map<number, Record<string, any>>>(new Map());
+  const [isSaving, setIsSaving] = useState(false);
   
   // Refs for column resizing
   const resizingColumn = useRef<string | null>(null);
   const startX = useRef<number>(0);
   const startWidth = useRef<number>(0);
+  const editInputRef = useRef<HTMLInputElement>(null);
 
   // Update columns when schema changes
   useEffect(() => {
@@ -340,6 +349,141 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     setDragOverColumn(null);
   };
 
+  // Cell editing handlers
+  const startEdit = (rowIndex: number, columnKey: string) => {
+    if (!editable) return;
+    
+    const column = columns.find(col => col.accessorKey === columnKey);
+    if (column?.editable === false) return;
+    
+    setEditingCell({ rowIndex, columnKey });
+    
+    // Check if there's a pending change for this cell, otherwise use current data value
+    const rowChanges = pendingChanges.get(rowIndex);
+    const currentValue = paginatedData[rowIndex][columnKey];
+    const valueToEdit = rowChanges?.[columnKey] ?? currentValue ?? '';
+    setEditValue(valueToEdit);
+  };
+
+  const saveEdit = (force: boolean = false) => {
+    if (!editingCell) return;
+    
+    // Don't save if we're in cancelled state (unless forced)
+    if (!force && editingCell === null) return;
+    
+    const { rowIndex, columnKey } = editingCell;
+    const globalIndex = (currentPage - 1) * pageSize + rowIndex;
+    const row = sortedData[globalIndex];
+    
+    // Update pending changes
+    const newPendingChanges = new Map(pendingChanges);
+    const rowChanges = newPendingChanges.get(rowIndex) || {};
+    rowChanges[columnKey] = editValue;
+    newPendingChanges.set(rowIndex, rowChanges);
+    setPendingChanges(newPendingChanges);
+    
+    // Call the legacy onCellChange callback if provided
+    if (schema.onCellChange) {
+      schema.onCellChange(globalIndex, columnKey, editValue, row);
+    }
+    
+    setEditingCell(null);
+    setEditValue('');
+  };
+
+  const cancelEdit = () => {
+    setEditingCell(null);
+    setEditValue('');
+  };
+
+  const saveRow = async (rowIndex: number) => {
+    const globalIndex = (currentPage - 1) * pageSize + rowIndex;
+    const row = sortedData[globalIndex];
+    const rowChanges = pendingChanges.get(rowIndex);
+    
+    if (!rowChanges || Object.keys(rowChanges).length === 0) return;
+    
+    setIsSaving(true);
+    try {
+      if (schema.onRowSave) {
+        await schema.onRowSave(globalIndex, rowChanges, row);
+      }
+      
+      // Clear pending changes for this row
+      const newPendingChanges = new Map(pendingChanges);
+      newPendingChanges.delete(rowIndex);
+      setPendingChanges(newPendingChanges);
+    } catch (error) {
+      console.error('Failed to save row:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const cancelRowChanges = (rowIndex: number) => {
+    const newPendingChanges = new Map(pendingChanges);
+    newPendingChanges.delete(rowIndex);
+    setPendingChanges(newPendingChanges);
+  };
+
+  const saveBatch = async () => {
+    if (pendingChanges.size === 0) return;
+    
+    setIsSaving(true);
+    try {
+      const changesToSave = Array.from(pendingChanges.entries()).map(([rowIndex, changes]) => {
+        const globalIndex = (currentPage - 1) * pageSize + rowIndex;
+        const row = sortedData[globalIndex];
+        return { rowIndex: globalIndex, changes, row };
+      });
+      
+      if (schema.onBatchSave) {
+        await schema.onBatchSave(changesToSave);
+      }
+      
+      // Clear all pending changes
+      setPendingChanges(new Map());
+    } catch (error) {
+      console.error('Failed to save batch:', error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const cancelAllChanges = () => {
+    setPendingChanges(new Map());
+  };
+
+  const handleCellKeyDown = (e: React.KeyboardEvent, rowIndex: number, columnKey: string) => {
+    if (!editable) return;
+    
+    const column = columns.find(col => col.accessorKey === columnKey);
+    if (column?.editable === false) return;
+    
+    if (e.key === 'Enter' && !editingCell) {
+      e.preventDefault();
+      startEdit(rowIndex, columnKey);
+    }
+  };
+
+  const handleEditKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      saveEdit(true);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      cancelEdit();
+    }
+  };
+
+  // Auto-focus on edit input when entering edit mode
+  useEffect(() => {
+    if (editingCell && editInputRef.current) {
+      editInputRef.current.focus();
+      editInputRef.current.select();
+    }
+  }, [editingCell]);
+
   // Cleanup on unmount
   useEffect(() => {
     return () => {
@@ -361,7 +505,8 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     return selectedRowIds.has(rowId);
   }) && !allPageRowsSelected;
 
-  const showToolbar = searchable || exportable || (selectable && selectedRowIds.size > 0);
+  const hasPendingChanges = pendingChanges.size > 0;
+  const showToolbar = searchable || exportable || (selectable && selectedRowIds.size > 0) || hasPendingChanges;
 
   return (
     <div className={`flex flex-col h-full gap-4 ${className || ''}`}>
@@ -386,6 +531,32 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
           </div>
           
           <div className="flex items-center gap-2">
+            {hasPendingChanges && (
+              <>
+                <div className="text-sm text-muted-foreground">
+                  {pendingChanges.size} row{pendingChanges.size > 1 ? 's' : ''} modified
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={cancelAllChanges}
+                  disabled={isSaving}
+                >
+                  <X className="h-4 w-4 mr-2" />
+                  Cancel All
+                </Button>
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={saveBatch}
+                  disabled={isSaving}
+                >
+                  <Save className="h-4 w-4 mr-2" />
+                  Save All ({pendingChanges.size})
+                </Button>
+              </>
+            )}
+            
             {exportable && (
               <Button
                 variant="outline"
@@ -485,24 +656,24 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                   const globalIndex = (currentPage - 1) * pageSize + rowIndex;
                   const rowId = getRowId(row, globalIndex);
                   const isSelected = selectedRowIds.has(rowId);
+                  const rowHasChanges = pendingChanges.has(rowIndex);
+                  const rowChanges = pendingChanges.get(rowIndex) || {};
                   
                   return (
                     <TableRow 
                       key={rowId} 
                       data-state={isSelected ? 'selected' : undefined}
                       className={cn(
-                        // @ts-expect-error - onRowClick might not be in schema type definition
-                        schema.onRowClick && "cursor-pointer"
+                        schema.onRowClick && "cursor-pointer",
+                        rowHasChanges && "bg-amber-50 dark:bg-amber-950/20"
                       )}
                       onClick={(e) => {
-                        // @ts-expect-error - onRowClick might not be in schema type definition
                         if (schema.onRowClick && !e.defaultPrevented) {
                            // Simple heuristic to avoid triggering on interactive elements if they didn't stop propagation
                            const target = e.target as HTMLElement;
                            if (target.closest('button') || target.closest('[role="checkbox"]') || target.closest('a')) {
                              return;
                            }
-                           // @ts-expect-error - onRowClick might not be in schema type definition
                            schema.onRowClick(row);
                         }
                       }}
@@ -517,37 +688,87 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       )}
                       {columns.map((col, colIndex) => {
                         const columnWidth = columnWidths[col.accessorKey] || col.width;
+                        const originalValue = row[col.accessorKey];
+                        const hasPendingChange = rowChanges[col.accessorKey] !== undefined;
+                        const cellValue = hasPendingChange ? rowChanges[col.accessorKey] : originalValue;
+                        const isEditing = editingCell?.rowIndex === rowIndex && editingCell?.columnKey === col.accessorKey;
+                        const isEditable = editable && col.editable !== false;
+                        
                         return (
                           <TableCell 
                             key={colIndex} 
-                            className={col.cellClassName}
+                            className={cn(
+                              col.cellClassName,
+                              isEditable && !isEditing && "cursor-text hover:bg-muted/50",
+                              hasPendingChange && "font-semibold text-amber-700 dark:text-amber-400"
+                            )}
                             style={{
                               width: columnWidth,
                               minWidth: columnWidth,
                               maxWidth: columnWidth
                             }}
+                            onDoubleClick={() => isEditable && startEdit(rowIndex, col.accessorKey)}
+                            onKeyDown={(e) => handleCellKeyDown(e, rowIndex, col.accessorKey)}
+                            tabIndex={0}
                           >
-                            {row[col.accessorKey]}
+                            {isEditing ? (
+                              <Input
+                                ref={editInputRef}
+                                value={editValue}
+                                onChange={(e) => setEditValue(e.target.value)}
+                                onKeyDown={handleEditKeyDown}
+                                className="h-8 px-2 py-1"
+                              />
+                            ) : typeof col.cell === 'function' ? (
+                              col.cell(cellValue, row)
+                            ) : (
+                              cellValue
+                            )}
                           </TableCell>
                         );
                       })}
                       {rowActions && (
                         <TableCell className="text-right">
                           <div className="flex items-center justify-end gap-1">
-                            <Button
-                              variant="ghost"
-                              size="icon-sm"
-                              onClick={() => schema.onRowEdit?.(row)}
-                            >
-                              <Edit className="h-4 w-4" />
-                            </Button>
-                            <Button
-                              variant="ghost"
-                              size="icon-sm"
-                              onClick={() => schema.onRowDelete?.(row)}
-                            >
-                              <Trash2 className="h-4 w-4 text-destructive" />
-                            </Button>
+                            {rowHasChanges && (schema.onRowSave || schema.onBatchSave) ? (
+                              <>
+                                <Button
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => cancelRowChanges(rowIndex)}
+                                  disabled={isSaving}
+                                  title="Cancel changes"
+                                >
+                                  <X className="h-4 w-4" />
+                                </Button>
+                                <Button
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => saveRow(rowIndex)}
+                                  disabled={isSaving}
+                                  title="Save row"
+                                >
+                                  <Save className="h-4 w-4 text-green-600" />
+                                </Button>
+                              </>
+                            ) : (
+                              <>
+                                <Button
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => schema.onRowEdit?.(row)}
+                                >
+                                  <Edit className="h-4 w-4" />
+                                </Button>
+                                <Button
+                                  variant="ghost"
+                                  size="icon-sm"
+                                  onClick={() => schema.onRowDelete?.(row)}
+                                >
+                                  <Trash2 className="h-4 w-4 text-destructive" />
+                                </Button>
+                              </>
+                            )}
                           </div>
                         </TableCell>
                       )}

package/src/renderers/form/form.tsx

@@ -228,9 +228,17 @@ ComponentRegistry.register('form',
                   disabled: fieldDisabled = false,
                   validation = {},
                   condition,
+                  colSpan,
+                  hidden,
+                  widget,
+                  visibleOn,
+                  readonly,
                   ...fieldProps
                 } = field;
 
+                // Skip hidden fields
+                if (hidden) return null;
+
                 // Handle conditional rendering with null/undefined safety
                 if (condition) {
                   const watchField = condition.field;
@@ -264,6 +272,17 @@ ComponentRegistry.register('form',
                 // Use field.id or field.name for stable keys (never use index alone)
                 const fieldKey = field.id ?? name;
 
+                // Resolve the component type: prefer widget override, fallback to field type
+                const resolvedType = widget || type;
+
+                // colSpan classes for grid layout
+                const colSpanClass = colSpan && colSpan > 1
+                  ? colSpan === 2 ? 'col-span-2'
+                  : colSpan === 3 ? 'col-span-3'
+                  : colSpan >= 4 ? 'col-span-4'
+                  : ''
+                  : '';
+
                 return (
                   <FormField
                     key={fieldKey}
@@ -271,7 +290,7 @@ ComponentRegistry.register('form',
                     name={name}
                     rules={rules}
                     render={({ field: formField }) => (
-                      <FormItem>
+                      <FormItem className={colSpanClass || undefined}>
                         {label && (
                           <FormLabel>
                             {label}
@@ -283,8 +302,8 @@ ComponentRegistry.register('form',
                           </FormLabel>
                         )}
                         <FormControl>
-                          {/* Render the actual field component based on type */}
-                          {renderFieldComponent(type, {
+                          {/* Render the actual field component based on resolved type */}
+                          {renderFieldComponent(resolvedType, {
                             ...fieldProps,
                             // specialized fields needs raw metadata, but we should traverse down if it exists
                             // field is the field configuration loop variable
@@ -293,7 +312,7 @@ ComponentRegistry.register('form',
                             inputType: fieldProps.inputType,
                             options: fieldProps.options,
                             placeholder: fieldProps.placeholder,
-                            disabled: disabled || fieldDisabled || isSubmitting,
+                            disabled: disabled || fieldDisabled || readonly || isSubmitting,
                           })}
                         </FormControl>
                         {description && (

package/src/renderers/index.ts

@@ -15,3 +15,4 @@ import './feedback';
 import './overlay';
 import './disclosure';
 import './complex';
+import './action';