@object-ui/plugin-grid 3.3.0 → 3.3.1

package/src/SplitPaneGrid.tsx

@@ -1,120 +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, { useRef, useCallback, useState } from 'react';
-import { cn } from '@object-ui/components';
-import { GripVertical } from 'lucide-react';
-
-export interface SplitPaneGridProps {
-  /** Initial width (px) of the frozen (left) pane. */
-  frozenWidth: number;
-  /** Called with the new frozen width while the user drags the divider. */
-  onResize?: (frozenWidth: number) => void;
-  /** Minimum width (px) allowed for the frozen pane. */
-  minFrozenWidth?: number;
-  /** Minimum width (px) allowed for the scrollable pane. */
-  minScrollableWidth?: number;
-  /** Content rendered in the frozen (left) pane. */
-  left: React.ReactNode;
-  /** Content rendered in the scrollable (right) pane. */
-  right: React.ReactNode;
-  /** Additional class names for the outer container. */
-  className?: string;
-}
-
-/**
- * Split-pane wrapper that places a resizable vertical divider between a frozen
- * (left) area and a scrollable (right) area.  Drag the handle to resize.
- */
-export function SplitPaneGrid({
-  frozenWidth: frozenWidthProp,
-  onResize,
-  minFrozenWidth = 100,
-  minScrollableWidth = 200,
-  left,
-  right,
-  className,
-}: SplitPaneGridProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [localWidth, setLocalWidth] = useState(frozenWidthProp);
-  const dragging = useRef(false);
-  const startX = useRef(0);
-  const startWidth = useRef(0);
-
-  const frozenWidth = onResize ? frozenWidthProp : localWidth;
-
-  const handlePointerDown = useCallback(
-    (e: React.PointerEvent) => {
-      e.preventDefault();
-      dragging.current = true;
-      startX.current = e.clientX;
-      startWidth.current = frozenWidth;
-
-      const onPointerMove = (ev: PointerEvent) => {
-        if (!dragging.current || !containerRef.current) return;
-        const containerWidth = containerRef.current.offsetWidth;
-        const delta = ev.clientX - startX.current;
-        let newWidth = startWidth.current + delta;
-
-        // Enforce constraints.
-        newWidth = Math.max(newWidth, minFrozenWidth);
-        newWidth = Math.min(newWidth, containerWidth - minScrollableWidth);
-
-        if (onResize) {
-          onResize(newWidth);
-        } else {
-          setLocalWidth(newWidth);
-        }
-      };
-
-      const onPointerUp = () => {
-        dragging.current = false;
-        document.removeEventListener('pointermove', onPointerMove);
-        document.removeEventListener('pointerup', onPointerUp);
-      };
-
-      document.addEventListener('pointermove', onPointerMove);
-      document.addEventListener('pointerup', onPointerUp);
-    },
-    [frozenWidth, minFrozenWidth, minScrollableWidth, onResize],
-  );
-
-  return (
-    <div
-      ref={containerRef}
-      className={cn('flex h-full w-full overflow-hidden', className)}
-    >
-      {/* Frozen (left) pane */}
-      <div
-        className="shrink-0 overflow-auto"
-        style={{ width: frozenWidth }}
-      >
-        {left}
-      </div>
-
-      {/* Resizable divider */}
-      <div
-        role="separator"
-        aria-orientation="vertical"
-        onPointerDown={handlePointerDown}
-        className={cn(
-          'flex w-2 cursor-col-resize items-center justify-center',
-          'border-x border-border bg-muted/50 hover:bg-muted',
-          'transition-colors',
-        )}
-      >
-        <GripVertical className="h-4 w-4 text-muted-foreground" />
-      </div>
-
-      {/* Scrollable (right) pane */}
-      <div className="min-w-0 flex-1 overflow-auto">
-        {right}
-      </div>
-    </div>
-  );
-}

package/src/VirtualGrid.tsx

@@ -1,183 +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.
- */
-
-/**
- * VirtualGrid Component
- * 
- * Implements virtual scrolling using @tanstack/react-virtual for efficient
- * rendering of large datasets. Only renders visible rows, dramatically improving
- * performance with datasets of 1000+ items.
- * 
- * Features:
- * - Virtual scrolling for rows
- * - Configurable row height
- * - Overscan for smooth scrolling
- * - Minimal DOM nodes (only visible items)
- */
-
-import React, { useRef } from 'react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-
-export interface VirtualGridColumn {
-  header: string;
-  accessorKey: string;
-  cell?: (value: any, row: any) => React.ReactNode;
-  width?: number | string;
-  align?: 'left' | 'center' | 'right';
-}
-
-export interface VirtualGridProps {
-  data: any[];
-  columns: VirtualGridColumn[];
-  rowHeight?: number;
-  height?: number | string;
-  className?: string;
-  headerClassName?: string;
-  rowClassName?: string | ((row: any, index: number) => string);
-  onRowClick?: (row: any, index: number) => void;
-  overscan?: number;
-}
-
-/**
- * Virtual scrolling grid component
- * 
- * @example
- * ```tsx
- * <VirtualGrid
- *   data={items}
- *   columns={[
- *     { header: 'Name', accessorKey: 'name' },
- *     { header: 'Age', accessorKey: 'age' },
- *   ]}
- *   rowHeight={40}
- * />
- * ```
- */
-export const VirtualGrid: React.FC<VirtualGridProps> = ({
-  data,
-  columns,
-  rowHeight = 40,
-  height = 600,
-  className = '',
-  headerClassName = '',
-  rowClassName,
-  onRowClick,
-  overscan = 5,
-}) => {
-  const parentRef = useRef<HTMLDivElement>(null);
-
-  const virtualizer = useVirtualizer({
-    count: data.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => rowHeight,
-    overscan,
-  });
-
-  const items = virtualizer.getVirtualItems();
-
-  return (
-    <div className={className}>
-      {/* Header */}
-      <div
-        className={`grid border-b sticky top-0 bg-muted/30 z-10 ${headerClassName}`}
-        style={{
-          gridTemplateColumns: columns
-            .map((col) => col.width || '1fr')
-            .join(' '),
-        }}
-      >
-        {columns.map((column, index) => (
-          <div
-            key={index}
-            className={`px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 ${
-              column.align === 'center'
-                ? 'text-center'
-                : column.align === 'right'
-                ? 'text-right'
-                : 'text-left'
-            }`}
-          >
-            {column.header}
-          </div>
-        ))}
-      </div>
-
-      {/* Virtual scrolling container */}
-      <div
-        ref={parentRef}
-        className="overflow-auto"
-        style={{ 
-          height: typeof height === 'number' ? `${height}px` : height,
-          contain: 'strict' 
-        }}
-      >
-        <div
-          style={{
-            height: `${virtualizer.getTotalSize()}px`,
-            width: '100%',
-            position: 'relative',
-          }}
-        >
-          {items.map((virtualRow) => {
-            const row = data[virtualRow.index];
-            const rowClasses =
-              typeof rowClassName === 'function'
-                ? rowClassName(row, virtualRow.index)
-                : rowClassName || '';
-
-            return (
-              <div
-                key={virtualRow.key}
-                className={`grid border-b hover:bg-muted/50 cursor-pointer ${rowClasses}`}
-                style={{
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: '100%',
-                  height: `${virtualRow.size}px`,
-                  transform: `translateY(${virtualRow.start}px)`,
-                  gridTemplateColumns: columns
-                    .map((col) => col.width || '1fr')
-                    .join(' '),
-                }}
-                onClick={() => onRowClick?.(row, virtualRow.index)}
-              >
-                {columns.map((column, colIndex) => {
-                  const value = row[column.accessorKey];
-                  const cellContent = column.cell
-                    ? column.cell(value, row)
-                    : (value != null && typeof value === 'object' ? String(value) : value);
-
-                  return (
-                    <div
-                      key={colIndex}
-                      className={`px-4 py-2 text-sm flex items-center ${
-                        column.align === 'center'
-                          ? 'text-center justify-center'
-                          : column.align === 'right'
-                          ? 'text-right justify-end'
-                          : 'text-left justify-start'
-                      }`}
-                    >
-                      {cellContent}
-                    </div>
-                  );
-                })}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-
-      {/* Footer info */}
-      <div className="px-4 py-2 text-xs text-muted-foreground border-t">
-        Showing {items.length} of {data.length} rows (virtual scrolling enabled)
-      </div>
-    </div>
-  );
-};

package/src/__tests__/GroupRow.test.tsx

@@ -1,206 +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 } from '@testing-library/react';
-import React from 'react';
-import { GroupRow } from '../GroupRow';
-
-describe('GroupRow', () => {
-  it('renders group label and count', () => {
-    render(
-      <GroupRow
-        groupKey="electronics"
-        label="Electronics"
-        count={5}
-        collapsed={false}
-        onToggle={() => {}}
-      >
-        <div>Content</div>
-      </GroupRow>,
-    );
-
-    expect(screen.getByText('Electronics')).toBeInTheDocument();
-    expect(screen.getByText('(5)')).toBeInTheDocument();
-  });
-
-  it('renders children when not collapsed', () => {
-    render(
-      <GroupRow
-        groupKey="tools"
-        label="Tools"
-        count={3}
-        collapsed={false}
-        onToggle={() => {}}
-      >
-        <div data-testid="group-content">Group Content</div>
-      </GroupRow>,
-    );
-
-    expect(screen.getByTestId('group-content')).toBeInTheDocument();
-  });
-
-  it('hides children when collapsed', () => {
-    render(
-      <GroupRow
-        groupKey="tools"
-        label="Tools"
-        count={3}
-        collapsed={true}
-        onToggle={() => {}}
-      >
-        <div data-testid="group-content">Group Content</div>
-      </GroupRow>,
-    );
-
-    expect(screen.queryByTestId('group-content')).not.toBeInTheDocument();
-  });
-
-  it('shows ChevronDown when expanded', () => {
-    render(
-      <GroupRow
-        groupKey="tools"
-        label="Tools"
-        count={3}
-        collapsed={false}
-        onToggle={() => {}}
-      >
-        <div>Content</div>
-      </GroupRow>,
-    );
-
-    // Lucide renders SVGs with class 'lucide-chevron-down'
-    const button = screen.getByRole('button');
-    expect(button.querySelector('.lucide-chevron-down')).toBeInTheDocument();
-    expect(button.querySelector('.lucide-chevron-right')).not.toBeInTheDocument();
-  });
-
-  it('shows ChevronRight when collapsed', () => {
-    render(
-      <GroupRow
-        groupKey="tools"
-        label="Tools"
-        count={3}
-        collapsed={true}
-        onToggle={() => {}}
-      >
-        <div>Content</div>
-      </GroupRow>,
-    );
-
-    const button = screen.getByRole('button');
-    expect(button.querySelector('.lucide-chevron-right')).toBeInTheDocument();
-    expect(button.querySelector('.lucide-chevron-down')).not.toBeInTheDocument();
-  });
-
-  it('calls onToggle with groupKey when header is clicked', () => {
-    const onToggle = vi.fn();
-    render(
-      <GroupRow
-        groupKey="electronics"
-        label="Electronics"
-        count={5}
-        collapsed={false}
-        onToggle={onToggle}
-      >
-        <div>Content</div>
-      </GroupRow>,
-    );
-
-    fireEvent.click(screen.getByRole('button'));
-    expect(onToggle).toHaveBeenCalledWith('electronics');
-    expect(onToggle).toHaveBeenCalledTimes(1);
-  });
-
-  it('sets aria-expanded=true when expanded', () => {
-    render(
-      <GroupRow
-        groupKey="tools"
-        label="Tools"
-        count={3}
-        collapsed={false}
-        onToggle={() => {}}
-      >
-        <div>Content</div>
-      </GroupRow>,
-    );
-
-    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('sets aria-expanded=false when collapsed', () => {
-    render(
-      <GroupRow
-        groupKey="tools"
-        label="Tools"
-        count={3}
-        collapsed={true}
-        onToggle={() => {}}
-      >
-        <div>Content</div>
-      </GroupRow>,
-    );
-
-    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('renders aggregation summary when provided', () => {
-    const aggregations = [
-      { field: 'amount', type: 'sum' as const, value: 150 },
-      { field: 'amount', type: 'avg' as const, value: 37.5 },
-    ];
-    render(
-      <GroupRow
-        groupKey="electronics"
-        label="Electronics"
-        count={4}
-        collapsed={false}
-        aggregations={aggregations}
-        onToggle={() => {}}
-      >
-        <div>Content</div>
-      </GroupRow>,
-    );
-
-    expect(screen.getByText(/sum: 150/)).toBeInTheDocument();
-    expect(screen.getByText(/avg: 37.50/)).toBeInTheDocument();
-  });
-
-  it('does not render aggregation section when aggregations is empty', () => {
-    render(
-      <GroupRow
-        groupKey="electronics"
-        label="Electronics"
-        count={4}
-        collapsed={false}
-        aggregations={[]}
-        onToggle={() => {}}
-      >
-        <div>Content</div>
-      </GroupRow>,
-    );
-
-    expect(screen.queryByText(/sum:/)).not.toBeInTheDocument();
-  });
-
-  it('renders data-testid with group key', () => {
-    render(
-      <GroupRow
-        groupKey="electronics"
-        label="Electronics"
-        count={5}
-        collapsed={false}
-        onToggle={() => {}}
-      >
-        <div>Content</div>
-      </GroupRow>,
-    );
-
-    expect(screen.getByTestId('group-row-electronics')).toBeInTheDocument();
-  });
-});

package/src/__tests__/ImportPreview.test.tsx

@@ -1,171 +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, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import React from 'react';
-
-// Mock lucide-react icons used by ImportWizard
-vi.mock('lucide-react', () => ({
-  Upload: () => <span>Upload</span>,
-  FileSpreadsheet: () => <span>FileSpreadsheet</span>,
-  CheckCircle2: () => <span>✓</span>,
-  AlertCircle: () => <span>⚠</span>,
-  X: () => <span>×</span>,
-  ArrowRight: () => <span>→</span>,
-  ArrowLeft: () => <span>←</span>,
-}));
-
-// Mock @object-ui/components with table primitives
-vi.mock('@object-ui/components', () => ({
-  cn: (...classes: any[]) => classes.filter(Boolean).join(' '),
-  Button: ({ children, onClick, disabled, ...props }: any) => (
-    <button onClick={onClick} disabled={disabled} {...props}>{children}</button>
-  ),
-  Badge: ({ children, ...props }: any) => <span {...props}>{children}</span>,
-  Progress: ({ value }: any) => <div role="progressbar" aria-valuenow={value} />,
-  Dialog: ({ children, open }: any) => open ? <div data-testid="dialog">{children}</div> : null,
-  DialogContent: ({ children }: any) => <div>{children}</div>,
-  DialogHeader: ({ children }: any) => <div>{children}</div>,
-  DialogFooter: ({ children }: any) => <div>{children}</div>,
-  DialogTitle: ({ children }: any) => <h2>{children}</h2>,
-  DialogDescription: ({ children }: any) => <p>{children}</p>,
-  Select: ({ children, value, onValueChange }: any) => <div data-value={value}>{children}</div>,
-  SelectContent: ({ children }: any) => <div>{children}</div>,
-  SelectItem: ({ children, value }: any) => <option value={value}>{children}</option>,
-  SelectTrigger: ({ children }: any) => <div>{children}</div>,
-  SelectValue: () => <span />,
-  Table: ({ children }: any) => <table>{children}</table>,
-  TableBody: ({ children }: any) => <tbody>{children}</tbody>,
-  TableCell: ({ children, className, title }: any) => <td className={className} title={title}>{children}</td>,
-  TableHead: ({ children, className }: any) => <th className={className}>{children}</th>,
-  TableHeader: ({ children }: any) => <thead>{children}</thead>,
-  TableRow: ({ children, className }: any) => <tr className={className}>{children}</tr>,
-}));
-
-import { ImportWizard } from '../ImportWizard';
-
-const sampleFields = [
-  { name: 'name', label: 'Name', type: 'string', required: true },
-  { name: 'email', label: 'Email', type: 'string', required: true },
-  { name: 'age', label: 'Age', type: 'number' },
-];
-
-const mockDataSource = {
-  find: vi.fn().mockResolvedValue([]),
-  findOne: vi.fn(),
-  create: vi.fn().mockResolvedValue({}),
-  update: vi.fn(),
-  delete: vi.fn(),
-};
-
-// Helper: Build a CSV string from an array of row arrays
-function buildCSV(headers: string[], rows: string[][]): string {
-  return [headers.join(','), ...rows.map(r => r.join(','))].join('\n');
-}
-
-// Helper: Create a File object from a CSV string
-function createCSVFile(csvContent: string, filename = 'test.csv'): File {
-  return new File([csvContent], filename, { type: 'text/csv' });
-}
-
-describe('ImportWizard – preview step', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('preview shows up to 10 rows (not 5)', async () => {
-    // Generate 15 data rows
-    const headers = ['name', 'email', 'age'];
-    const dataRows = Array.from({ length: 15 }, (_, i) => [
-      `Person${i + 1}`,
-      `person${i + 1}@test.com`,
-      String(20 + i),
-    ]);
-    const csvContent = buildCSV(headers, dataRows);
-
-    // We test the component renders. The wizard needs to progress to preview step.
-    // Since we can't easily simulate file upload + step navigation in a unit test,
-    // we verify the hardcoded preview limit by checking the source logic.
-    // The ImportWizard uses `rows.slice(0, 10)` for the preview.
-    // We verify the constant is 10 by testing the component's internal preview logic.
-
-    // Verify slice(0, 10) produces exactly 10 rows
-    const previewRows = dataRows.slice(0, 10);
-    expect(previewRows).toHaveLength(10);
-    expect(previewRows[0][0]).toBe('Person1');
-    expect(previewRows[9][0]).toBe('Person10');
-
-    // Verify more than 10 rows exist in full data
-    expect(dataRows).toHaveLength(15);
-  });
-
-  it('validation errors are detected for invalid data', () => {
-    // Simulate the validation logic that ImportWizard applies
-    // Required field empty → error
-    // Invalid number → error
-    const validateValue = (raw: string, type: string): boolean => {
-      switch (type) {
-        case 'number': return !isNaN(Number(raw));
-        case 'boolean': return ['true', 'false', '1', '0'].includes(raw.toLowerCase());
-        default: return true;
-      }
-    };
-
-    const mappedCols = [
-      { csvIdx: 0, field: { name: 'name', label: 'Name', type: 'string', required: true } },
-      { csvIdx: 1, field: { name: 'email', label: 'Email', type: 'string', required: true } },
-      { csvIdx: 2, field: { name: 'age', label: 'Age', type: 'number', required: false } },
-    ];
-
-    const rows = [
-      ['Alice', 'alice@test.com', '30'],     // valid
-      ['', 'bob@test.com', '25'],             // name required → error
-      ['Charlie', 'charlie@test.com', 'abc'], // age invalid number → error
-    ];
-
-    const rowValidations = rows.map(row => {
-      const errs: Record<number, string> = {};
-      for (const col of mappedCols) {
-        const raw = row[col.csvIdx] ?? '';
-        if (col.field.required && !raw) errs[col.csvIdx] = 'Required';
-        else if (raw && !validateValue(raw, col.field.type)) errs[col.csvIdx] = `Invalid ${col.field.type}`;
-      }
-      return errs;
-    });
-
-    // Row 0: no errors
-    expect(Object.keys(rowValidations[0])).toHaveLength(0);
-
-    // Row 1: name is required but empty
-    expect(rowValidations[1][0]).toBe('Required');
-
-    // Row 2: age is "abc" which is invalid for number type
-    expect(rowValidations[2][2]).toBe('Invalid number');
-
-    // Error count: 2 rows have errors
-    const errorCount = rowValidations.filter(e => Object.keys(e).length > 0).length;
-    expect(errorCount).toBe(2);
-  });
-
-  it('ImportWizard component renders when opened', () => {
-    render(
-      <ImportWizard
-        objectName="contacts"
-        objectLabel="Contacts"
-        fields={sampleFields}
-        dataSource={mockDataSource}
-        open={true}
-      />,
-    );
-
-    // The wizard should show the upload step initially
-    expect(screen.getByText(/import/i)).toBeInTheDocument();
-  });
-});