@object-ui/components 0.5.0 → 2.0.0

package/src/renderers/action/action-menu.tsx

@@ -0,0 +1,203 @@
+/**
+ * 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.
+ */
+
+/**
+ * action:menu — Dropdown menu for overflow actions.
+ *
+ * Renders a Shadcn DropdownMenu populated from ActionSchema[].
+ * Each menu item triggers the corresponding action via ActionRunner.
+ */
+
+import React, { forwardRef, useCallback, useMemo, useState } from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import type { ActionSchema } from '@object-ui/types';
+import { useAction } from '@object-ui/react';
+import { useCondition } from '@object-ui/react';
+import { Button } from '../../ui';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../ui';
+import { cn } from '../../lib/utils';
+import { Loader2, MoreHorizontal } from 'lucide-react';
+import { resolveIcon } from './resolve-icon';
+
+export interface ActionMenuSchema {
+  type: 'action:menu';
+  /** Menu trigger label (defaults to icon-only) */
+  label?: string;
+  /** Menu trigger icon (defaults to more-horizontal) */
+  icon?: string;
+  /** Actions to render as menu items */
+  actions?: ActionSchema[];
+  /** Trigger variant */
+  variant?: string;
+  /** Trigger size */
+  size?: string;
+  /** Visibility condition */
+  visible?: string;
+  /** Custom CSS class */
+  className?: string;
+  [key: string]: any;
+}
+
+const ActionMenuItem: React.FC<{
+  action: ActionSchema;
+  onExecute: (action: ActionSchema) => Promise<void>;
+}> = ({ action, onExecute }) => {
+  const isVisible = useCondition(action.visible ? `\${${action.visible}}` : undefined);
+  const isEnabled = useCondition(action.enabled ? `\${${action.enabled}}` : undefined);
+
+  const iconElement = useMemo(() => {
+    const Icon = resolveIcon(action.icon);
+    // eslint-disable-next-line react-hooks/static-components -- Icon is resolved from a stable icon registry
+    return Icon ? <Icon className="mr-2 h-4 w-4" /> : null;
+  }, [action.icon]);
+
+  if (action.visible && !isVisible) return null;
+
+  return (
+    <DropdownMenuItem
+      disabled={action.enabled ? !isEnabled : false}
+      onSelect={(e) => {
+        e.preventDefault();
+        onExecute(action);
+      }}
+      className={cn(
+        (action.variant as string) === 'destructive' && 'text-destructive focus:text-destructive',
+        action.className,
+      )}
+    >
+      {iconElement}
+      <span>{action.label || action.name}</span>
+    </DropdownMenuItem>
+  );
+};
+
+ActionMenuItem.displayName = 'ActionMenuItem';
+
+const ActionMenuRenderer = forwardRef<HTMLButtonElement, { schema: ActionMenuSchema; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    const {
+      'data-obj-id': dataObjId,
+      'data-obj-type': dataObjType,
+      style,
+      ...rest
+    } = props;
+
+    const { execute } = useAction();
+    const [loading, setLoading] = useState(false);
+
+    const isVisible = useCondition(schema.visible ? `\${${schema.visible}}` : undefined);
+
+    const TriggerIcon = resolveIcon(schema.icon) || MoreHorizontal;
+    const variant = schema.variant || 'ghost';
+    const size = schema.size || 'icon';
+
+    const handleExecute = useCallback(
+      async (action: ActionSchema) => {
+        setLoading(true);
+        try {
+          await execute({
+            type: action.type,
+            name: action.name,
+            target: action.target,
+            execute: action.execute,
+            endpoint: action.endpoint,
+            method: action.method,
+            params: action.params as Record<string, any> | undefined,
+            confirmText: action.confirmText,
+            successMessage: action.successMessage,
+            errorMessage: action.errorMessage,
+            refreshAfter: action.refreshAfter,
+            toast: action.toast,
+          });
+        } finally {
+          setLoading(false);
+        }
+      },
+      [execute],
+    );
+
+    if (schema.visible && !isVisible) return null;
+
+    const actions = schema.actions || [];
+    if (actions.length === 0) return null;
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            ref={ref}
+            type="button"
+            variant={variant as any}
+            size={size as any}
+            className={cn(
+              size === 'icon' && 'h-8 w-8',
+              schema.className,
+              className,
+            )}
+            disabled={loading}
+            aria-label={schema.label || 'More actions'}
+            {...rest}
+            {...{ 'data-obj-id': dataObjId, 'data-obj-type': dataObjType, style }}
+          >
+            {loading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <>
+                <TriggerIcon className={cn('h-4 w-4', schema.label && 'mr-2')} />
+                {schema.label && <span>{schema.label}</span>}
+              </>
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent align="end">
+          {actions.map((action, index) => {
+            // Render separator for actions tagged with 'separator-before'
+            const showSeparator = action.tags?.includes('separator-before') && index > 0;
+            return (
+              <React.Fragment key={action.name || index}>
+                {showSeparator && <DropdownMenuSeparator />}
+                <ActionMenuItem action={action} onExecute={handleExecute} />
+              </React.Fragment>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  },
+);
+
+ActionMenuRenderer.displayName = 'ActionMenuRenderer';
+
+ComponentRegistry.register('action:menu', ActionMenuRenderer, {
+  namespace: 'action',
+  label: 'Action Menu',
+  inputs: [
+    { name: 'label', type: 'string', label: 'Trigger Label' },
+    { name: 'icon', type: 'string', label: 'Trigger Icon' },
+    { name: 'actions', type: 'object', label: 'Actions' },
+    {
+      name: 'variant',
+      type: 'enum',
+      label: 'Trigger Variant',
+      enum: ['default', 'secondary', 'outline', 'ghost'],
+      defaultValue: 'ghost',
+    },
+    { name: 'className', type: 'string', label: 'CSS Class', advanced: true },
+  ],
+  defaultProps: {
+    variant: 'ghost',
+    actions: [],
+  },
+});

package/src/renderers/action/index.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+/**
+ * Action renderers — Smart action components driven by ActionSchema.
+ *
+ * Registers: action:button, action:icon, action:menu, action:group
+ */
+
+import './action-button';
+import './action-icon';
+import './action-menu';
+import './action-group';

package/src/renderers/action/resolve-icon.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 { icons, type LucideIcon } from 'lucide-react';
+
+/**
+ * Convert a kebab-case icon name to PascalCase (e.g., "arrow-right" -> "ArrowRight").
+ */
+function toPascalCase(str: string): string {
+  return str
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+}
+
+/** Map of renamed icons in lucide-react */
+const iconNameMap: Record<string, string> = {
+  Home: 'House',
+};
+
+/**
+ * Resolve a Lucide icon by its kebab-case name.
+ * Returns null if not found.
+ */
+export function resolveIcon(name: string | undefined): LucideIcon | null {
+  if (!name) return null;
+  const pascalName = toPascalCase(name);
+  const mapped = iconNameMap[pascalName] || pascalName;
+  return (icons as Record<string, LucideIcon>)[mapped] ?? null;
+}

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();
+    });
+  });
+});