@object-ui/components 3.3.0 → 3.3.1

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

@@ -1,275 +0,0 @@
-/**
- * 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 - Batch 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 track pending changes across multiple cells', async () => {
-    const onRowSave = vi.fn();
-    
-    const schema: DataTableSchema = {
-      type: 'data-table',
-      columns: mockColumns,
-      data: mockData,
-      editable: true,
-      pagination: false,
-      searchable: false,
-      rowActions: true,
-      onRowSave,
-    };
-
-    const DataTableRenderer = ComponentRegistry.get('data-table');
-    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
-
-    const { container } = render(<DataTableRenderer schema={schema} />);
-    
-    // Edit first cell in row
-    const nameCell = screen.getByText('John Doe').closest('td');
-    if (nameCell) {
-      fireEvent.doubleClick(nameCell);
-      
-      await waitFor(() => {
-        const input = nameCell.querySelector('input');
-        expect(input).toBeInTheDocument();
-      });
-      
-      const input = nameCell.querySelector('input');
-      if (input) {
-        fireEvent.change(input, { target: { value: 'John Smith' } });
-        fireEvent.keyDown(input, { key: 'Enter' });
-      }
-    }
-
-    // Wait for the edit to be saved to pending changes
-    await waitFor(() => {
-      const modifiedIndicator = screen.getByText(/1 row modified/i);
-      expect(modifiedIndicator).toBeInTheDocument();
-    });
-
-    // Edit second cell in same row - find by searching through all cells
-    const emailCell = Array.from(container.querySelectorAll('td')).find(el => 
-      el.textContent?.includes('john@example.com')
-    );
-    
-    expect(emailCell).toBeInTheDocument();
-    if (emailCell) {
-      fireEvent.doubleClick(emailCell);
-
-      await waitFor(() => {
-        const input = emailCell.querySelector('input');
-        expect(input).toBeInTheDocument();
-      });
-      
-      const input = emailCell.querySelector('input');
-      if (input) {
-        fireEvent.change(input, { target: { value: 'johnsmith@example.com' } });
-        fireEvent.keyDown(input, { key: 'Enter' });
-      }
-    }
-
-    // Row should still show as modified (still just 1 row)
-    await waitFor(() => {
-      const modifiedIndicator = screen.getByText(/1 row modified/i);
-      expect(modifiedIndicator).toBeInTheDocument();
-    });
-  });
-
-  it('should save a single row with multiple changes', async () => {
-    const onRowSave = vi.fn().mockResolvedValue(undefined);
-    
-    const schema: DataTableSchema = {
-      type: 'data-table',
-      columns: mockColumns,
-      data: mockData,
-      editable: true,
-      pagination: false,
-      searchable: false,
-      rowActions: true,
-      onRowSave,
-    };
-
-    const DataTableRenderer = ComponentRegistry.get('data-table');
-    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
-
-    render(<DataTableRenderer schema={schema} />);
-    
-    // Edit name
-    const nameCell = screen.getByText('John Doe').closest('td');
-    if (nameCell) {
-      fireEvent.doubleClick(nameCell);
-      await waitFor(() => {
-        const input = nameCell.querySelector('input');
-        expect(input).toBeInTheDocument();
-      });
-      
-      const input = nameCell.querySelector('input');
-      if (input) {
-        fireEvent.change(input, { target: { value: 'John Smith' } });
-        fireEvent.keyDown(input, { key: 'Enter' });
-      }
-    }
-
-    // Find and click save button for row
-    await waitFor(() => {
-      const saveButtons = screen.getAllByTitle('Save row');
-      expect(saveButtons.length).toBeGreaterThan(0);
-      fireEvent.click(saveButtons[0]);
-    });
-
-    // Verify callback was called with correct data
-    await waitFor(() => {
-      expect(onRowSave).toHaveBeenCalledWith(
-        0,
-        { name: 'John Smith' },
-        mockData[0]
-      );
-    });
-  });
-
-  it('should save all modified rows with batch save', async () => {
-    const onBatchSave = vi.fn().mockResolvedValue(undefined);
-    
-    const schema: DataTableSchema = {
-      type: 'data-table',
-      columns: mockColumns,
-      data: mockData,
-      editable: true,
-      pagination: false,
-      searchable: false,
-      onBatchSave,
-    };
-
-    const DataTableRenderer = ComponentRegistry.get('data-table');
-    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
-
-    render(<DataTableRenderer schema={schema} />);
-    
-    // Edit row 1
-    const nameCell1 = screen.getByText('John Doe').closest('td');
-    if (nameCell1) {
-      fireEvent.doubleClick(nameCell1);
-      await waitFor(() => {
-        const input = nameCell1.querySelector('input');
-        expect(input).toBeInTheDocument();
-      });
-      
-      const input = nameCell1.querySelector('input');
-      if (input) {
-        fireEvent.change(input, { target: { value: 'John Smith' } });
-        fireEvent.keyDown(input, { key: 'Enter' });
-      }
-    }
-
-    // Edit row 2
-    await waitFor(() => {
-      const nameCell2 = screen.getByText('Jane Smith').closest('td');
-      expect(nameCell2).toBeInTheDocument();
-    });
-
-    const nameCell2 = screen.getByText('Jane Smith').closest('td');
-    if (nameCell2) {
-      fireEvent.doubleClick(nameCell2);
-      await waitFor(() => {
-        const input = nameCell2.querySelector('input');
-        expect(input).toBeInTheDocument();
-      });
-      
-      const input = nameCell2.querySelector('input');
-      if (input) {
-        fireEvent.change(input, { target: { value: 'Jane Doe' } });
-        fireEvent.keyDown(input, { key: 'Enter' });
-      }
-    }
-
-    // Click save all button
-    await waitFor(() => {
-      const saveAllButton = screen.getByText(/Save All \(2\)/i);
-      expect(saveAllButton).toBeInTheDocument();
-      fireEvent.click(saveAllButton);
-    });
-
-    // Verify callback was called
-    await waitFor(() => {
-      expect(onBatchSave).toHaveBeenCalledWith([
-        { rowIndex: 0, changes: { name: 'John Smith' }, row: mockData[0] },
-        { rowIndex: 1, changes: { name: 'Jane Doe' }, row: mockData[1] },
-      ]);
-    });
-  });
-
-  it('should cancel all changes', async () => {
-    const onBatchSave = vi.fn();
-    
-    const schema: DataTableSchema = {
-      type: 'data-table',
-      columns: mockColumns,
-      data: mockData,
-      editable: true,
-      pagination: false,
-      searchable: false,
-      onBatchSave,
-    };
-
-    const DataTableRenderer = ComponentRegistry.get('data-table');
-    if (!DataTableRenderer) throw new Error('DataTableRenderer not found');
-
-    render(<DataTableRenderer schema={schema} />);
-    
-    // Edit a cell
-    const nameCell = screen.getByText('John Doe').closest('td');
-    if (nameCell) {
-      fireEvent.doubleClick(nameCell);
-      await waitFor(() => {
-        const input = nameCell.querySelector('input');
-        expect(input).toBeInTheDocument();
-      });
-      
-      const input = nameCell.querySelector('input');
-      if (input) {
-        fireEvent.change(input, { target: { value: 'John Smith' } });
-        fireEvent.keyDown(input, { key: 'Enter' });
-      }
-    }
-
-    // Click cancel all button
-    await waitFor(() => {
-      const cancelButton = screen.getByText(/Cancel All/i);
-      expect(cancelButton).toBeInTheDocument();
-      fireEvent.click(cancelButton);
-    });
-
-    // Verify changes indicator is gone
-    await waitFor(() => {
-      const modifiedIndicator = screen.queryByText(/row modified/i);
-      expect(modifiedIndicator).not.toBeInTheDocument();
-    });
-
-    // Original value should be restored
-    expect(screen.getByText('John Doe')).toBeInTheDocument();
-  });
-});

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

@@ -1,120 +0,0 @@
-/**
- * Data Table - Custom Cell Renderer Tests
- *
- * Tests that data-table respects col.cell() function for custom cell rendering.
- */
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-import { SchemaRenderer } from '@object-ui/react';
-
-// Import data-table to ensure it's registered
-import '../data-table';
-
-describe('Data Table: col.cell() custom renderer', () => {
-  it('should invoke col.cell function to render cell content', async () => {
-    const cellFn = vi.fn((value: any, _row: any) => (
-      <span data-testid="custom-cell">{`Custom: ${value}`}</span>
-    ));
-
-    const schema = {
-      type: 'data-table',
-      columns: [
-        { header: 'Name', accessorKey: 'name', cell: cellFn },
-        { header: 'Email', accessorKey: 'email' },
-      ],
-      data: [
-        { name: 'Alice', email: 'alice@test.com' },
-        { name: 'Bob', email: 'bob@test.com' },
-      ],
-      pagination: false,
-      searchable: false,
-    };
-
-    render(<SchemaRenderer schema={schema} />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Custom: Alice')).toBeInTheDocument();
-    });
-
-    expect(screen.getByText('Custom: Bob')).toBeInTheDocument();
-    expect(cellFn).toHaveBeenCalledTimes(2);
-
-    // Non-custom cell should render value directly
-    expect(screen.getByText('alice@test.com')).toBeInTheDocument();
-  });
-
-  it('should pass both value and row to cell function', async () => {
-    const cellFn = vi.fn((value: any, row: any) => (
-      <span data-testid="combo-cell">{`${value} (${row.email})`}</span>
-    ));
-
-    const schema = {
-      type: 'data-table',
-      columns: [
-        { header: 'Name', accessorKey: 'name', cell: cellFn },
-      ],
-      data: [
-        { name: 'Alice', email: 'alice@test.com' },
-      ],
-      pagination: false,
-      searchable: false,
-    };
-
-    render(<SchemaRenderer schema={schema} />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice (alice@test.com)')).toBeInTheDocument();
-    });
-
-    expect(cellFn).toHaveBeenCalledWith('Alice', expect.objectContaining({ name: 'Alice', email: 'alice@test.com' }));
-  });
-
-  it('should render raw value when no cell function is provided', async () => {
-    const schema = {
-      type: 'data-table',
-      columns: [
-        { header: 'Name', accessorKey: 'name' },
-      ],
-      data: [
-        { name: 'Alice' },
-      ],
-      pagination: false,
-      searchable: false,
-    };
-
-    render(<SchemaRenderer schema={schema} />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Alice')).toBeInTheDocument();
-    });
-  });
-
-  it('should prefer editing state over cell function when in edit mode', async () => {
-    // The editing state should take precedence over custom cell renderer
-    // This test verifies the rendering priority: editing > cell > raw value
-    const cellFn = vi.fn((value: any) => (
-      <span>{`Custom: ${value}`}</span>
-    ));
-
-    const schema = {
-      type: 'data-table',
-      columns: [
-        { header: 'Name', accessorKey: 'name', cell: cellFn },
-      ],
-      data: [
-        { name: 'Alice' },
-      ],
-      pagination: false,
-      searchable: false,
-      editable: false,
-    };
-
-    render(<SchemaRenderer schema={schema} />);
-
-    await waitFor(() => {
-      expect(screen.getByText('Custom: Alice')).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,221 +0,0 @@
-/**
- * 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/__tests__/data-table.test.ts

@@ -1,76 +0,0 @@
-/**
- * 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, beforeAll } from 'vitest';
-import { ComponentRegistry } from '@object-ui/core';
-
-// Import the component to ensure it's registered
-import '../data-table';
-
-describe('Data Table Component', () => {
-  it('should register data-table component', () => {
-    expect(ComponentRegistry.has('data-table')).toBe(true);
-  });
-
-  it('should have correct component metadata', () => {
-    const config = ComponentRegistry.getConfig('data-table');
-    expect(config).toBeDefined();
-    expect(config?.label).toBe('Data Table');
-    expect(config?.inputs).toBeDefined();
-    expect(config?.defaultProps).toBeDefined();
-  });
-
-  it('should have required inputs defined', () => {
-    const config = ComponentRegistry.getConfig('data-table');
-    const inputNames = config?.inputs?.map(input => input.name) || [];
-    
-    expect(inputNames).toContain('columns');
-    expect(inputNames).toContain('data');
-    expect(inputNames).toContain('pagination');
-    expect(inputNames).toContain('searchable');
-    expect(inputNames).toContain('selectable');
-    expect(inputNames).toContain('sortable');
-    expect(inputNames).toContain('exportable');
-    expect(inputNames).toContain('rowActions');
-  });
-
-  it('should have default props with sample data', () => {
-    const config = ComponentRegistry.getConfig('data-table');
-    expect(config?.defaultProps).toBeDefined();
-    expect(config?.defaultProps?.columns).toBeDefined();
-    expect(Array.isArray(config?.defaultProps?.columns)).toBe(true);
-    expect(config?.defaultProps?.data).toBeDefined();
-    expect(Array.isArray(config?.defaultProps?.data)).toBe(true);
-  });
-
-  it('should have correct default feature flags', () => {
-    const config = ComponentRegistry.getConfig('data-table');
-    expect(config?.defaultProps?.pagination).toBe(true);
-    expect(config?.defaultProps?.searchable).toBe(true);
-    expect(config?.defaultProps?.selectable).toBe(true);
-    expect(config?.defaultProps?.sortable).toBe(true);
-    expect(config?.defaultProps?.exportable).toBe(true);
-    expect(config?.defaultProps?.rowActions).toBe(true);
-  });
-
-  it('should have showAddRow and onAddRecord properties in schema', () => {
-    const config = ComponentRegistry.getConfig('data-table');
-    expect(config).toBeDefined();
-    // Verify the DataTableSchema type supports add-record properties
-    // by checking that the component accepts these props without error
-    const testSchema: import('@object-ui/types').DataTableSchema = {
-      type: 'data-table',
-      columns: [],
-      data: [],
-      showAddRow: true,
-      onAddRecord: () => {},
-    };
-    expect(testSchema.showAddRow).toBe(true);
-    expect(typeof testSchema.onAddRecord).toBe('function');
-  });
-});