@object-ui/plugin-grid 3.1.5 → 3.3.1

package/src/__tests__/useGroupedData.test.ts

@@ -1,165 +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 } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useGroupedData } from '../useGroupedData';
-
-const sampleData = [
-  { category: 'A', priority: 'High', amount: 10 },
-  { category: 'A', priority: 'Low', amount: 20 },
-  { category: 'B', priority: 'High', amount: 30 },
-  { category: 'B', priority: 'Medium', amount: 40 },
-  { category: 'C', priority: 'Low', amount: 50 },
-];
-
-describe('useGroupedData – collapsed state management', () => {
-  it('returns isGrouped=false when config is undefined', () => {
-    const { result } = renderHook(() => useGroupedData(undefined, sampleData));
-    expect(result.current.isGrouped).toBe(false);
-    expect(result.current.groups).toEqual([]);
-  });
-
-  it('returns isGrouped=false when config has empty fields', () => {
-    const { result } = renderHook(() => useGroupedData({ fields: [] }, sampleData));
-    expect(result.current.isGrouped).toBe(false);
-    expect(result.current.groups).toEqual([]);
-  });
-
-  it('groups data correctly with single field', () => {
-    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
-    const { result } = renderHook(() => useGroupedData(config, sampleData));
-
-    expect(result.current.isGrouped).toBe(true);
-    expect(result.current.groups).toHaveLength(3);
-    expect(result.current.groups[0].key).toBe('A');
-    expect(result.current.groups[0].rows).toHaveLength(2);
-    expect(result.current.groups[1].key).toBe('B');
-    expect(result.current.groups[1].rows).toHaveLength(2);
-    expect(result.current.groups[2].key).toBe('C');
-    expect(result.current.groups[2].rows).toHaveLength(1);
-  });
-
-  it('all groups default to expanded when collapsed=false', () => {
-    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
-    const { result } = renderHook(() => useGroupedData(config, sampleData));
-
-    result.current.groups.forEach((group) => {
-      expect(group.collapsed).toBe(false);
-    });
-  });
-
-  it('all groups default to collapsed when collapsed=true', () => {
-    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: true }] };
-    const { result } = renderHook(() => useGroupedData(config, sampleData));
-
-    result.current.groups.forEach((group) => {
-      expect(group.collapsed).toBe(true);
-    });
-  });
-
-  it('toggleGroup toggles a group from expanded to collapsed', () => {
-    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
-    const { result } = renderHook(() => useGroupedData(config, sampleData));
-
-    // Initially all expanded
-    expect(result.current.groups[0].collapsed).toBe(false);
-
-    // Toggle group A
-    act(() => {
-      result.current.toggleGroup('A');
-    });
-
-    expect(result.current.groups[0].collapsed).toBe(true);
-    // Other groups remain expanded
-    expect(result.current.groups[1].collapsed).toBe(false);
-    expect(result.current.groups[2].collapsed).toBe(false);
-  });
-
-  it('toggleGroup toggles a group from collapsed back to expanded', () => {
-    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
-    const { result } = renderHook(() => useGroupedData(config, sampleData));
-
-    // Toggle twice: expand -> collapse -> expand
-    act(() => {
-      result.current.toggleGroup('A');
-    });
-    expect(result.current.groups[0].collapsed).toBe(true);
-
-    act(() => {
-      result.current.toggleGroup('A');
-    });
-    expect(result.current.groups[0].collapsed).toBe(false);
-  });
-
-  it('toggleGroup expands a group that defaults to collapsed', () => {
-    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: true }] };
-    const { result } = renderHook(() => useGroupedData(config, sampleData));
-
-    // Initially all collapsed
-    expect(result.current.groups[0].collapsed).toBe(true);
-
-    // Toggle group A to expand
-    act(() => {
-      result.current.toggleGroup('A');
-    });
-
-    expect(result.current.groups[0].collapsed).toBe(false);
-    // Other groups remain collapsed
-    expect(result.current.groups[1].collapsed).toBe(true);
-  });
-
-  it('sorts groups in descending order when configured', () => {
-    const config = { fields: [{ field: 'category', order: 'desc' as const, collapsed: false }] };
-    const { result } = renderHook(() => useGroupedData(config, sampleData));
-
-    expect(result.current.groups[0].key).toBe('C');
-    expect(result.current.groups[1].key).toBe('B');
-    expect(result.current.groups[2].key).toBe('A');
-  });
-
-  it('builds correct labels for groups', () => {
-    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
-    const { result } = renderHook(() => useGroupedData(config, sampleData));
-
-    expect(result.current.groups[0].label).toBe('A');
-    expect(result.current.groups[1].label).toBe('B');
-    expect(result.current.groups[2].label).toBe('C');
-  });
-
-  it('shows (empty) label for rows with missing grouping field', () => {
-    const data = [
-      { category: 'A', amount: 10 },
-      { amount: 20 }, // no category
-      { category: '', amount: 30 }, // empty category
-    ];
-    const config = { fields: [{ field: 'category', order: 'asc' as const, collapsed: false }] };
-    const { result } = renderHook(() => useGroupedData(config, data));
-
-    const emptyGroup = result.current.groups.find((g) => g.label === '(empty)');
-    expect(emptyGroup).toBeDefined();
-    expect(emptyGroup!.rows).toHaveLength(2);
-  });
-
-  it('supports multi-field grouping', () => {
-    const config = {
-      fields: [
-        { field: 'category', order: 'asc' as const, collapsed: false },
-        { field: 'priority', order: 'asc' as const, collapsed: false },
-      ],
-    };
-    const { result } = renderHook(() => useGroupedData(config, sampleData));
-
-    expect(result.current.isGrouped).toBe(true);
-    // Each unique combination of category + priority should be a group
-    expect(result.current.groups.length).toBeGreaterThanOrEqual(4);
-    // Check label format is "A / High"
-    const firstGroup = result.current.groups[0];
-    expect(firstGroup.label).toContain(' / ');
-  });
-});

package/src/__tests__/view-states.test.tsx

@@ -1,203 +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.
- */
-
-/**
- * P3.3 Plugin View Robustness - Grid View States
- *
- * Tests empty, loading, error states for VirtualGrid component,
- * and edge cases like single-row data, many columns, and missing fields.
- */
-
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen, cleanup } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-import type { VirtualGridColumn, VirtualGridProps } from '../VirtualGrid';
-
-// Mock @tanstack/react-virtual
-vi.mock('@tanstack/react-virtual', () => ({
-  useVirtualizer: (opts: any) => {
-    const count: number = opts.count;
-    const size: number = opts.estimateSize();
-    const items = [];
-    for (let i = 0; i < count; i++) {
-      items.push({ index: i, key: String(i), start: i * size, size });
-    }
-    return {
-      getVirtualItems: () => items,
-      getTotalSize: () => count * size,
-    };
-  },
-}));
-
-const defaultColumns: VirtualGridColumn[] = [
-  { header: 'Name', accessorKey: 'name' },
-  { header: 'Email', accessorKey: 'email' },
-  { header: 'Status', accessorKey: 'status' },
-];
-
-type VirtualGridComponent = React.FC<VirtualGridProps>;
-let VirtualGrid: VirtualGridComponent;
-
-beforeEach(async () => {
-  cleanup();
-  vi.resetModules();
-  const mod = await import('../VirtualGrid');
-  VirtualGrid = mod.VirtualGrid;
-});
-
-function renderGrid(overrides: Partial<VirtualGridProps> = {}) {
-  return render(
-    <VirtualGrid
-      data={[]}
-      columns={defaultColumns}
-      {...overrides}
-    />
-  );
-}
-
-describe('P3.3 Grid View States', () => {
-  // ---------------------------------------------------------------
-  // Empty state
-  // ---------------------------------------------------------------
-  describe('empty state', () => {
-    it('renders column headers with empty data', () => {
-      renderGrid({ data: [] });
-      expect(screen.getByText('Name')).toBeInTheDocument();
-      expect(screen.getByText('Email')).toBeInTheDocument();
-      expect(screen.getByText('Status')).toBeInTheDocument();
-    });
-
-    it('shows 0 rows in footer for empty data', () => {
-      renderGrid({ data: [] });
-      expect(screen.getByText(/Showing 0 of 0 rows/)).toBeInTheDocument();
-    });
-
-    it('does not render any data cells for empty data', () => {
-      renderGrid({ data: [] });
-      expect(screen.queryByText('Alice')).not.toBeInTheDocument();
-    });
-
-    it('renders with empty columns array', () => {
-      const { container } = renderGrid({ data: [], columns: [] });
-      expect(container.firstElementChild).toBeInTheDocument();
-    });
-  });
-
-  // ---------------------------------------------------------------
-  // Normal data rendering
-  // ---------------------------------------------------------------
-  describe('normal data rendering', () => {
-    const sampleData = [
-      { name: 'Alice', email: 'alice@test.com', status: 'active' },
-      { name: 'Bob', email: 'bob@test.com', status: 'inactive' },
-    ];
-
-    it('renders all rows', () => {
-      renderGrid({ data: sampleData });
-      expect(screen.getByText('Alice')).toBeInTheDocument();
-      expect(screen.getByText('Bob')).toBeInTheDocument();
-    });
-
-    it('shows correct row count', () => {
-      renderGrid({ data: sampleData });
-      expect(screen.getByText(/Showing 2 of 2 rows/)).toBeInTheDocument();
-    });
-
-    it('renders all column values', () => {
-      renderGrid({ data: sampleData });
-      expect(screen.getByText('alice@test.com')).toBeInTheDocument();
-      expect(screen.getByText('active')).toBeInTheDocument();
-    });
-  });
-
-  // ---------------------------------------------------------------
-  // Edge cases
-  // ---------------------------------------------------------------
-  describe('edge cases', () => {
-    it('renders single row', () => {
-      renderGrid({ data: [{ name: 'Solo', email: 'solo@test.com', status: 'ok' }] });
-      expect(screen.getByText('Solo')).toBeInTheDocument();
-      expect(screen.getByText(/Showing 1 of 1 rows/)).toBeInTheDocument();
-    });
-
-    it('handles row with missing fields gracefully', () => {
-      renderGrid({
-        data: [{ name: 'Partial' }],
-      });
-      expect(screen.getByText('Partial')).toBeInTheDocument();
-      // Missing email and status should not crash
-    });
-
-    it('handles many columns', () => {
-      const cols: VirtualGridColumn[] = Array.from({ length: 20 }, (_, i) => ({
-        header: `Col${i}`,
-        accessorKey: `field${i}`,
-      }));
-      const data = [Object.fromEntries(cols.map((c, i) => [c.accessorKey, `val${i}`]))];
-
-      renderGrid({ columns: cols, data });
-      expect(screen.getByText('Col0')).toBeInTheDocument();
-      expect(screen.getByText('Col19')).toBeInTheDocument();
-      expect(screen.getByText('val0')).toBeInTheDocument();
-      expect(screen.getByText('val19')).toBeInTheDocument();
-    });
-
-    it('handles data with null/undefined field values', () => {
-      renderGrid({
-        data: [{ name: null, email: undefined, status: 'ok' }],
-      });
-      expect(screen.getByText('ok')).toBeInTheDocument();
-    });
-
-    it('handles data with numeric values', () => {
-      const cols: VirtualGridColumn[] = [
-        { header: 'ID', accessorKey: 'id' },
-        { header: 'Score', accessorKey: 'score' },
-      ];
-      renderGrid({
-        columns: cols,
-        data: [{ id: 1, score: 99.5 }],
-      });
-      expect(screen.getByText('1')).toBeInTheDocument();
-      expect(screen.getByText('99.5')).toBeInTheDocument();
-    });
-
-    it('handles data with boolean values', () => {
-      const cols: VirtualGridColumn[] = [
-        { header: 'Name', accessorKey: 'name' },
-        { header: 'Active', accessorKey: 'active' },
-      ];
-      renderGrid({
-        columns: cols,
-        data: [{ name: 'Test', active: true }],
-      });
-      expect(screen.getByText('Test')).toBeInTheDocument();
-    });
-  });
-
-  // ---------------------------------------------------------------
-  // Custom className support
-  // ---------------------------------------------------------------
-  describe('className support in states', () => {
-    it('applies className to empty grid', () => {
-      const { container } = renderGrid({ data: [], className: 'my-grid' });
-      const root = container.firstElementChild as HTMLElement;
-      expect(root).toHaveClass('my-grid');
-    });
-
-    it('applies className to populated grid', () => {
-      const { container } = renderGrid({
-        data: [{ name: 'A', email: 'a@t.com', status: 'ok' }],
-        className: 'styled-grid',
-      });
-      const root = container.firstElementChild as HTMLElement;
-      expect(root).toHaveClass('styled-grid');
-    });
-  });
-});

package/src/components/BulkActionBar.tsx

@@ -1,66 +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 React from 'react';
-import { Button } from '@object-ui/components';
-import { formatActionLabel } from './RowActionMenu';
-
-export interface BulkActionBarProps {
-  /** Array of selected row records */
-  selectedRows: any[];
-  /** Bulk/batch action identifiers */
-  actions: string[];
-  /** Callback when a bulk action button is clicked */
-  onAction?: (action: string, selectedRows: any[]) => void;
-  /** Callback to clear selection */
-  onClearSelection?: () => void;
-}
-
-export const BulkActionBar: React.FC<BulkActionBarProps> = ({
-  selectedRows,
-  actions,
-  onAction,
-  onClearSelection,
-}) => {
-  if (!actions || actions.length === 0 || selectedRows.length === 0) {
-    return null;
-  }
-
-  return (
-    <div
-      className="border-t px-4 py-1.5 flex items-center gap-2 text-xs bg-primary/5 shrink-0"
-      data-testid="bulk-actions-bar"
-    >
-      <span className="text-muted-foreground font-medium">
-        {selectedRows.length} selected
-      </span>
-      <div className="flex items-center gap-1 ml-2">
-        {actions.map(action => (
-          <Button
-            key={action}
-            variant="outline"
-            size="sm"
-            className="h-6 px-2 text-xs"
-            onClick={() => onAction?.(action, selectedRows)}
-            data-testid={`bulk-action-${action}`}
-          >
-            {formatActionLabel(action)}
-          </Button>
-        ))}
-      </div>
-      <Button
-        variant="ghost"
-        size="sm"
-        className="h-6 px-2 text-xs ml-auto"
-        onClick={onClearSelection}
-      >
-        Clear
-      </Button>
-    </div>
-  );
-};

package/src/components/RowActionMenu.tsx

@@ -1,91 +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 React from 'react';
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@object-ui/components';
-import { Edit, Trash2, MoreVertical } from 'lucide-react';
-
-/**
- * Format an action identifier string into a human-readable label.
- * e.g., 'send_email' → 'Send Email'
- */
-export function formatActionLabel(action: string): string {
-  return action.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-}
-
-export interface RowActionMenuProps {
-  /** The row data record */
-  row: any;
-  /** Custom row action identifiers */
-  rowActions?: string[];
-  /** Whether edit operation is available */
-  canEdit?: boolean;
-  /** Whether delete operation is available */
-  canDelete?: boolean;
-  /** Callback when edit is clicked */
-  onEdit?: (row: any) => void;
-  /** Callback when delete is clicked */
-  onDelete?: (row: any) => void;
-  /** Callback when a custom row action is clicked */
-  onAction?: (action: string, row: any) => void;
-}
-
-export const RowActionMenu: React.FC<RowActionMenuProps> = ({
-  row,
-  rowActions,
-  canEdit,
-  canDelete,
-  onEdit,
-  onDelete,
-  onAction,
-}) => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="h-8 w-8 min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0"
-          data-testid="row-action-trigger"
-        >
-          <MoreVertical className="h-4 w-4" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        {canEdit && onEdit && (
-          <DropdownMenuItem onClick={() => onEdit(row)}>
-            <Edit className="mr-2 h-4 w-4" />
-            Edit
-          </DropdownMenuItem>
-        )}
-        {canDelete && onDelete && (
-          <DropdownMenuItem onClick={() => onDelete(row)}>
-            <Trash2 className="mr-2 h-4 w-4" />
-            Delete
-          </DropdownMenuItem>
-        )}
-        {rowActions?.map(action => (
-          <DropdownMenuItem
-            key={action}
-            onClick={() => onAction?.(action, row)}
-            data-testid={`row-action-${action}`}
-          >
-            {formatActionLabel(action)}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

package/src/index.test.tsx

@@ -1,29 +0,0 @@
-import { vi, describe, it, expect, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import { SchemaRendererProvider } from '@object-ui/react';
-import * as ObjectGridModule from './ObjectGrid';
-import { ObjectGridRenderer } from './index';
-
-describe('Plugin Grid Registration', () => {
-  it('renderer passes dataSource from context', async () => {
-    // Spy and mock implementation
-    vi.spyOn(ObjectGridModule, 'ObjectGrid').mockImplementation(
-      (({ dataSource }: any) => (
-        <div data-testid="grid-mock">
-            {dataSource ? `DataSource: ${dataSource.type}` : 'No DataSource'}
-        </div>
-      )) as any
-    );
-
-    render(
-      <SchemaRendererProvider dataSource={{ type: 'mock-datasource' } as any}>
-        <ObjectGridRenderer schema={{ type: 'object-grid' }} />
-      </SchemaRendererProvider>
-    );
-    
-    // Use findByTestId for async safety
-    const element = await screen.findByTestId('grid-mock', {}, { timeout: 5000 });
-    expect(element).toHaveTextContent('DataSource: mock-datasource');
-  });
-});

package/src/index.tsx

@@ -1,99 +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 React from 'react';
-import { ComponentRegistry } from '@object-ui/core';
-import { useSchemaContext } from '@object-ui/react';
-import { ObjectGrid } from './ObjectGrid';
-import { VirtualGrid } from './VirtualGrid';
-import { ImportWizard } from './ImportWizard';
-
-export { ObjectGrid, VirtualGrid, ImportWizard };
-export { InlineEditing } from './InlineEditing';
-export { useRowColor } from './useRowColor';
-export { useGroupedData } from './useGroupedData';
-export { GroupRow } from './GroupRow';
-export { RowActionMenu, formatActionLabel } from './components/RowActionMenu';
-export { BulkActionBar } from './components/BulkActionBar';
-export { useCellClipboard } from './useCellClipboard';
-export { useGradientColor } from './useGradientColor';
-export { useGroupReorder } from './useGroupReorder';
-export { useColumnSummary } from './useColumnSummary';
-export { FormulaBar } from './FormulaBar';
-export { SplitPaneGrid } from './SplitPaneGrid';
-export type { ObjectGridProps } from './ObjectGrid';
-export type { VirtualGridProps, VirtualGridColumn } from './VirtualGrid';
-export type { InlineEditingProps } from './InlineEditing';
-export type { ImportWizardProps, ImportResult } from './ImportWizard';
-export type { GroupEntry, UseGroupedDataResult, AggregationType, AggregationConfig, AggregationResult } from './useGroupedData';
-export type { GroupRowProps } from './GroupRow';
-export type { RowActionMenuProps } from './components/RowActionMenu';
-export type { BulkActionBarProps } from './components/BulkActionBar';
-export type { CellRange, UseCellClipboardOptions, UseCellClipboardResult } from './useCellClipboard';
-export type { GradientStop, UseGradientColorOptions } from './useGradientColor';
-export type { UseGroupReorderOptions, UseGroupReorderResult } from './useGroupReorder';
-export type { ColumnSummaryConfig, ColumnSummaryResult } from './useColumnSummary';
-export type { FormulaBarProps } from './FormulaBar';
-export type { SplitPaneGridProps } from './SplitPaneGrid';
-
-// Register object-grid component
-export const ObjectGridRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, ...props }) => {
-  const { dataSource } = useSchemaContext() || {};
-  return <ObjectGrid schema={schema} dataSource={dataSource} {...props} />;
-};
-
-ComponentRegistry.register('object-grid', ObjectGridRenderer, {
-  namespace: 'plugin-grid',
-  label: 'Object Grid',
-  category: 'plugin',
-  inputs: [
-    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
-    { name: 'columns', type: 'array', label: 'Columns' },
-    { name: 'filters', type: 'array', label: 'Filters' },
-  ]
-});
-
-// Alias for view namespace - this allows using { type: 'view:grid' } in schemas
-// which is semantically meaningful for data display components
-ComponentRegistry.register('grid', ObjectGridRenderer, {
-  namespace: 'view',
-  label: 'Data Grid',
-  category: 'view',
-  inputs: [
-    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
-    { name: 'columns', type: 'array', label: 'Columns' },
-    { name: 'filters', type: 'array', label: 'Filters' },
-  ]
-});
-
-// Register import-wizard component
-const ImportWizardRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, ...props }) => {
-  const { dataSource } = useSchemaContext() || {};
-  return (
-    <ImportWizard
-      objectName={schema.objectName}
-      objectLabel={schema.objectLabel}
-      fields={schema.fields ?? []}
-      dataSource={dataSource}
-      {...props}
-    />
-  );
-};
-
-ComponentRegistry.register('import-wizard', ImportWizardRenderer, {
-  namespace: 'plugin-grid',
-  label: 'Import Wizard',
-  category: 'plugin',
-  inputs: [
-    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
-    { name: 'fields', type: 'array', label: 'Fields', required: true },
-  ]
-});
-
-// Note: 'grid' type is handled by @object-ui/components Grid layout component
-// This plugin only handles 'object-grid' which integrates with ObjectQL/ObjectStack