@object-ui/components 0.3.1 → 2.0.0

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

@@ -8,6 +8,7 @@
 
 // Enterprise-level DataTable Component (Airtable-like)
 import React, { useState, useMemo, useRef, useEffect } from 'react';
+import { cn } from '../../lib/utils';
 import { ComponentRegistry } from '@object-ui/core';
 import type { DataTableSchema } from '@object-ui/types';
 import { 
@@ -43,6 +44,8 @@ import {
   ChevronsLeft,
   ChevronsRight,
   GripVertical,
+  Save,
+  X,
 } from 'lucide-react';
 
 type SortDirection = 'asc' | 'desc' | null;
@@ -96,6 +99,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     rowActions = false,
     resizableColumns = true,
     reorderableColumns = true,
+    editable = false,
     className,
   } = schema;
 
@@ -119,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(() => {
@@ -339,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 () => {
@@ -360,55 +505,87 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
     return selectedRowIds.has(rowId);
   }) && !allPageRowsSelected;
 
+  const hasPendingChanges = pendingChanges.size > 0;
+  const showToolbar = searchable || exportable || (selectable && selectedRowIds.size > 0) || hasPendingChanges;
+
   return (
-    <div className={`space-y-4 ${className || ''}`}>
+    <div className={`flex flex-col h-full gap-4 ${className || ''}`}>
       {/* Toolbar */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-2 flex-1">
-          {searchable && (
-            <div className="relative max-w-sm flex-1">
-              <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input
-                placeholder="Search..."
-                value={searchQuery}
-                onChange={(e) => {
-                  setSearchQuery(e.target.value);
-                  setCurrentPage(1);
-                }}
-                className="pl-8"
-              />
-            </div>
-          )}
-        </div>
-        
-        <div className="flex items-center gap-2">
-          {exportable && (
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={handleExport}
-              disabled={sortedData.length === 0}
-            >
-              <Download className="h-4 w-4 mr-2" />
-              Export CSV
-            </Button>
-          )}
+      {showToolbar && (
+        <div className="flex items-center justify-between gap-4 flex-none">
+          <div className="flex items-center gap-2 flex-1">
+            {searchable && (
+              <div className="relative max-w-sm flex-1">
+                <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => {
+                    setSearchQuery(e.target.value);
+                    setCurrentPage(1);
+                  }}
+                  className="pl-8"
+                />
+              </div>
+            )}
+          </div>
           
-          {selectable && selectedRowIds.size > 0 && (
-            <div className="text-sm text-muted-foreground">
-              {selectedRowIds.size} selected
-            </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"
+                size="sm"
+                onClick={handleExport}
+                disabled={sortedData.length === 0}
+              >
+                <Download className="h-4 w-4 mr-2" />
+                Export CSV
+              </Button>
+            )}
+            
+            {selectable && selectedRowIds.size > 0 && (
+              <div className="text-sm text-muted-foreground">
+                {selectedRowIds.size} selected
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Table */}
-      <Table>
+      <div className="rounded-md border flex-1 min-h-0 overflow-auto relative bg-background">
+        <Table>
           {caption && <TableCaption>{caption}</TableCaption>}
-          <TableHeader>
+          <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
             <TableRow>
               {selectable && (
-                <TableHead className="w-12">
+                <TableHead className="w-12 bg-background">
                   <Checkbox
                     checked={allPageRowsSelected ? true : somePageRowsSelected ? 'indeterminate' : false}
                     onCheckedChange={handleSelectAll}
@@ -423,7 +600,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 return (
                   <TableHead
                     key={col.accessorKey}
-                    className={`${col.className || ''} ${sortable && col.sortable !== false ? 'cursor-pointer select-none' : ''} ${isDragging ? 'opacity-50' : ''} ${isDragOver ? 'border-l-2 border-primary' : ''} relative group`}
+                    className={`${col.className || ''} ${sortable && col.sortable !== false ? 'cursor-pointer select-none' : ''} ${isDragging ? 'opacity-50' : ''} ${isDragOver ? 'border-l-2 border-primary' : ''} relative group bg-background`}
                     style={{ 
                       width: columnWidth,
                       minWidth: columnWidth 
@@ -455,7 +632,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 );
               })}
               {rowActions && (
-                <TableHead className="w-24 text-right">Actions</TableHead>
+                <TableHead className="w-24 text-right bg-background">Actions</TableHead>
               )}
             </TableRow>
           </TableHeader>
@@ -464,69 +641,151 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
               <TableRow>
                 <TableCell
                   colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)}
-                  className="h-24 text-center text-muted-foreground"
+                  className="h-96 text-center text-muted-foreground"
                 >
-                  No data available
+                  <div className="flex flex-col items-center justify-center gap-2">
+                    <Search className="h-8 w-8 text-muted-foreground/50" />
+                    <p>No results found</p>
+                    <p className="text-xs text-muted-foreground/50">Try adjusting your filters or search query.</p>
+                  </div>
                 </TableCell>
               </TableRow>
             ) : (
-              paginatedData.map((row, rowIndex) => {
-                const globalIndex = (currentPage - 1) * pageSize + rowIndex;
-                const rowId = getRowId(row, globalIndex);
-                const isSelected = selectedRowIds.has(rowId);
-                
-                return (
-                  <TableRow key={rowId} data-state={isSelected ? 'selected' : undefined}>
-                    {selectable && (
-                      <TableCell>
-                        <Checkbox
-                          checked={isSelected}
-                          onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
-                        />
-                      </TableCell>
-                    )}
-                    {columns.map((col, colIndex) => {
-                      const columnWidth = columnWidths[col.accessorKey] || col.width;
-                      return (
-                        <TableCell 
-                          key={colIndex} 
-                          className={col.cellClassName}
-                          style={{
-                            width: columnWidth,
-                            minWidth: columnWidth,
-                            maxWidth: columnWidth
-                          }}
-                        >
-                          {row[col.accessorKey]}
+              <>
+                {paginatedData.map((row, rowIndex) => {
+                  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(
+                        schema.onRowClick && "cursor-pointer",
+                        rowHasChanges && "bg-amber-50 dark:bg-amber-950/20"
+                      )}
+                      onClick={(e) => {
+                        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;
+                           }
+                           schema.onRowClick(row);
+                        }
+                      }}
+                    >
+                      {selectable && (
+                        <TableCell>
+                          <Checkbox
+                            checked={isSelected}
+                            onCheckedChange={(checked) => handleSelectRow(rowId, checked as boolean)}
+                          />
                         </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)}
+                      )}
+                      {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={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}
                           >
-                            <Trash2 className="h-4 w-4 text-destructive" />
-                          </Button>
-                        </div>
-                      </TableCell>
-                    )}
+                            {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">
+                            {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>
+                      )}
+                    </TableRow>
+                  );
+                })}
+                {/* Filler rows to maintain height consistency */}
+                {paginatedData.length > 0 && Array.from({ length: Math.max(0, pageSize - paginatedData.length) }).map((_, i) => (
+                  <TableRow key={`empty-${i}`} className="hover:bg-transparent">
+                    <TableCell colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} className="h-[52px] p-0" />
                   </TableRow>
-                );
-              })
+                ))}
+              </>
             )}
           </TableBody>
         </Table>
+      </div>
 
       {/* Pagination */}
       {pagination && sortedData.length > 0 && (
@@ -600,6 +859,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
 
 // Register the component
 ComponentRegistry.register('data-table', DataTableRenderer, {
+  namespace: 'ui',
   label: 'Data Table',
   icon: 'table',
   inputs: [

package/src/renderers/complex/filter-builder.tsx

@@ -8,7 +8,7 @@
 
 import { ComponentRegistry } from '@object-ui/core';
 import type { FilterBuilderSchema, FilterGroup } from '@object-ui/types';
-import { FilterBuilder } from '../../ui/filter-builder';
+import { FilterBuilder } from '../../custom/filter-builder';
 
 ComponentRegistry.register('filter-builder', 
   ({ schema, className, onChange, ...props }: { schema: FilterBuilderSchema; className?: string; onChange?: (event: any) => void; [key: string]: any }) => {
@@ -39,6 +39,7 @@ ComponentRegistry.register('filter-builder',
     );
   },
   {
+    namespace: 'ui',
     label: 'Filter Builder',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },

package/src/renderers/complex/resizable.tsx

@@ -19,7 +19,7 @@ import { renderChildren } from '../../lib/utils';
 ComponentRegistry.register('resizable', 
   ({ schema, className, ...props }: { schema: ResizableSchema; className?: string; [key: string]: any }) => (
     <ResizablePanelGroup 
-        direction={schema.direction || 'horizontal'} 
+        orientation={(schema.direction || 'horizontal') as "horizontal" | "vertical"}
         className={className} 
         {...props}
         style={{ minHeight: schema.minHeight || '200px' }}
@@ -35,6 +35,7 @@ ComponentRegistry.register('resizable',
     </ResizablePanelGroup>
   ),
   {
+    namespace: 'ui',
     label: 'Resizable Panel Group',
     inputs: [
       { name: 'direction', type: 'enum', enum: ['horizontal', 'vertical'], defaultValue: 'horizontal', label: 'Direction' },

package/src/renderers/complex/scroll-area.tsx

@@ -12,26 +12,44 @@ import { ScrollArea, ScrollBar } from '../../ui';
 import { renderChildren } from '../../lib/utils';
 
 ComponentRegistry.register('scroll-area', 
-  ({ schema, className, ...props }: { schema: ScrollAreaSchema; className?: string; [key: string]: any }) => (
-    <ScrollArea className={className} style={{ height: schema.height, width: schema.width }} {...props}>
-      {renderChildren(schema.content || schema.children)}
-      {schema.orientation === 'horizontal' && <ScrollBar orientation="horizontal" />}
+  ({ schema, className, ...props }: { schema: ScrollAreaSchema; className?: string; [key: string]: any }) => {
+    // Extract designer-related props
+    const { 
+        'data-obj-id': dataObjId, 
+        'data-obj-type': dataObjType,
+        style, 
+        ...scrollAreaProps 
+    } = props;
+
+    const orientation = schema.orientation || 'vertical';
+
+    return (
+    <ScrollArea 
+        className={className} 
+        style={{ height: schema.height, width: schema.width, ...style }} 
+        {...scrollAreaProps}
+        data-obj-id={dataObjId}
+        data-obj-type={dataObjType}
+    >
+      {renderChildren(schema.children)}
+      {(orientation === 'horizontal' || orientation === 'both') && <ScrollBar orientation="horizontal" />}
+      {(orientation === 'vertical' || orientation === 'both') && <ScrollBar orientation="vertical" />}
     </ScrollArea>
-  ),
+  )},
   {
+    namespace: 'ui',
     label: 'Scroll Area',
     inputs: [
       { name: 'height', type: 'string', label: 'Height (e.g. 200px)' },
       { name: 'width', type: 'string', label: 'Width' },
       { name: 'orientation', type: 'enum', enum: ['vertical', 'horizontal', 'both'], defaultValue: 'vertical', label: 'Orientation' },
-      { name: 'content', type: 'slot', label: 'Content' },
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],
     defaultProps: {
       height: '200px',
       width: '100%',
       orientation: 'vertical',
-      content: [
+      children: [
         { type: 'div', className: 'p-4', body: [{ type: 'text', content: 'Scrollable content goes here. Add more content to see scrolling behavior.' }] }
       ],
       className: 'rounded-md border'

package/src/renderers/complex/table.tsx

@@ -59,6 +59,7 @@ ComponentRegistry.register('table',
     </Table>
   ),
   {
+    namespace: 'ui',
     label: 'Table',
     inputs: [
       { name: 'caption', type: 'string', label: 'Caption' },

package/src/renderers/data-display/alert.tsx

@@ -23,6 +23,7 @@ ComponentRegistry.register('alert',
     </Alert>
   ),
   {
+    namespace: 'ui',
     label: 'Alert',
     inputs: [
       { name: 'title', type: 'string', label: 'Title', required: true },

package/src/renderers/data-display/avatar.tsx

@@ -22,6 +22,7 @@ ComponentRegistry.register('avatar',
     </Avatar>
   ),
   {
+    namespace: 'ui',
     label: 'Avatar',
     inputs: [
       { name: 'src', type: 'string', label: 'Image URL' },

package/src/renderers/data-display/badge.tsx

@@ -34,6 +34,7 @@ ComponentRegistry.register('badge',
   );
   },
   {
+    namespace: 'ui',
     label: 'Badge',
     inputs: [
       { name: 'label', type: 'string', label: 'Label' },