@object-ui/components 0.3.1 → 2.0.0

package/src/renderers/basic/div.tsx

@@ -13,6 +13,16 @@ import { forwardRef } from 'react';
 
 const DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?: string; [key: string]: any }>(
   ({ schema, className, ...props }, ref) => {
+    // Deprecation warning
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        '[ObjectUI] The "div" component is deprecated. Please use Shadcn components instead:\n' +
+        '  - For containers: use "card", "flex", or semantic layout components\n' +
+        '  - For simple wrappers: use layout components like "container", "stack", or "grid"\n' +
+        'See documentation at https://www.objectui.org/docs/components for alternatives.'
+      );
+    }
+    
     // Extract designer-related props
     const { 
         'data-obj-id': dataObjId, 
@@ -38,7 +48,8 @@ const DivRenderer = forwardRef<HTMLDivElement, { schema: DivSchema; className?:
 ComponentRegistry.register('div', 
   DivRenderer,
   {
-    label: 'Container',
+    namespace: 'ui',
+    label: 'Container (Deprecated)',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],

package/src/renderers/basic/html.tsx

@@ -34,6 +34,7 @@ ComponentRegistry.register('html',
     );
   },
   {
+    namespace: 'ui',
     label: 'HTML Content',
     inputs: [
       { name: 'html', type: 'string', label: 'HTML', description: 'Raw HTML content' }

package/src/renderers/basic/icon.tsx

@@ -75,6 +75,7 @@ IconRenderer.displayName = 'IconRenderer';
 ComponentRegistry.register('icon',
   IconRenderer,
   {
+    namespace: 'ui',
     label: 'Icon',
     icon: 'smile',
     category: 'basic',

package/src/renderers/basic/image.tsx

@@ -33,6 +33,7 @@ ComponentRegistry.register('image',
   );
   },
   {
+    namespace: 'ui',
     label: 'Image',
     icon: 'image',
     category: 'basic',

package/src/renderers/basic/navigation-menu.tsx

@@ -66,6 +66,7 @@ ComponentRegistry.register('navigation-menu',
     );
   },
   {
+    namespace: 'ui',
     label: 'Navigation Menu',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }

package/src/renderers/basic/pagination.tsx

@@ -9,6 +9,7 @@
 import { ComponentRegistry } from '@object-ui/core';
 import type { PaginationSchema } from '@object-ui/types';
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from '../../ui/pagination';
+import React from 'react';
 
 ComponentRegistry.register('pagination', 
   ({ schema, ...props }: { schema: PaginationSchema; [key: string]: any }) => {
@@ -16,13 +17,23 @@ ComponentRegistry.register('pagination',
         'data-obj-id': dataObjId, 
         'data-obj-type': dataObjType,
         style,
+        onPageChange,
         ...paginationProps
     } = props;
     
     const currentPage = schema.currentPage || schema.page || 1;
     const totalPages = schema.totalPages || 1;
-    const showEllipsis = totalPages > 7;
     
+    const handlePageChange = (page: number, e: React.MouseEvent) => {
+      e.preventDefault();
+      if (page === currentPage) return;
+      if (page < 1 || page > totalPages) return;
+      
+      if (onPageChange) {
+        onPageChange(page);
+      }
+    };
+
     const getPageNumbers = () => {
       if (totalPages <= 7) {
         return Array.from({ length: totalPages }, (_, i) => i + 1);
@@ -47,27 +58,43 @@ ComponentRegistry.register('pagination',
       >
         <PaginationContent>
           <PaginationItem>
-            <PaginationPrevious href="#" />
+            <PaginationPrevious 
+              href="#" 
+              onClick={(e) => handlePageChange(currentPage - 1, e)}
+              className={currentPage <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              aria-disabled={currentPage <= 1}
+            />
           </PaginationItem>
           {getPageNumbers().map((page, idx) => (
             <PaginationItem key={idx}>
               {page === -1 ? (
                 <PaginationEllipsis />
               ) : (
-                <PaginationLink href="#" isActive={page === currentPage}>
+                <PaginationLink 
+                  href="#" 
+                  isActive={page === currentPage}
+                  onClick={(e) => handlePageChange(page, e)}
+                  className="cursor-pointer"
+                >
                   {page}
                 </PaginationLink>
               )}
             </PaginationItem>
           ))}
           <PaginationItem>
-            <PaginationNext href="#" />
+            <PaginationNext 
+              href="#" 
+              onClick={(e) => handlePageChange(currentPage + 1, e)}
+              className={currentPage >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+              aria-disabled={currentPage >= totalPages}
+            />
           </PaginationItem>
         </PaginationContent>
       </Pagination>
     );
   },
   {
+    namespace: 'ui',
     label: 'Pagination',
     inputs: [
       { name: 'currentPage', type: 'number', label: 'Current Page', defaultValue: 1 },

package/src/renderers/basic/separator.tsx

@@ -37,6 +37,7 @@ const SeparatorRenderer = forwardRef<HTMLDivElement, { schema: SeparatorSchema;
 ComponentRegistry.register('separator', 
   SeparatorRenderer,
   {
+    namespace: 'ui',
     label: 'Separator',
     inputs: [
       { 

package/src/renderers/basic/span.tsx

@@ -13,6 +13,16 @@ import { forwardRef } from 'react';
 
 const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className?: string; [key: string]: any }>(
   ({ schema, className, ...props }, ref) => {
+    // Deprecation warning
+    if (process.env.NODE_ENV !== 'production') {
+      console.warn(
+        '[ObjectUI] The "span" component is deprecated. Please use Shadcn components instead:\n' +
+        '  - For badges/labels: use "badge" component\n' +
+        '  - For inline text emphasis: use "text" component with appropriate className\n' +
+        'See documentation at https://www.objectui.org/docs/components for alternatives.'
+      );
+    }
+    
     // Extract designer-related props
     const { 
         'data-obj-id': dataObjId, 
@@ -38,7 +48,8 @@ const SpanRenderer = forwardRef<HTMLSpanElement, { schema: SpanSchema; className
 ComponentRegistry.register('span', 
   SpanRenderer,
   {
-    label: 'Inline Container',
+    namespace: 'ui',
+    label: 'Inline Container (Deprecated)',
     inputs: [
       { name: 'className', type: 'string', label: 'CSS Class' }
     ],

package/src/renderers/basic/text.tsx

@@ -22,13 +22,14 @@ ComponentRegistry.register('text',
         ...rest 
     } = props;
 
-    // If we have designer props, we must wrap it to make it selectable
-    if (dataObjId) {
+    // If we have designer props or className, we must wrap it to make it selectable and styleable
+    if (dataObjId || schema.className || rest.className) {
         return (
             <span 
                 data-obj-id={dataObjId}
                 data-obj-type={dataObjType}
                 style={style}
+                className={schema.className || rest.className}
                 {...rest}
             >
                 {schema.content || schema.value}
@@ -39,6 +40,7 @@ ComponentRegistry.register('text',
     return <>{schema.content || schema.value}</>;
   },
   {
+    namespace: 'ui',
     label: 'Text',
     inputs: [
       { name: 'content', type: 'string', label: 'Content', required: true }

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

@@ -0,0 +1,275 @@
+/**
+ * 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

@@ -0,0 +1,120 @@
+/**
+ * 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();
+    });
+  });
+});