@jmruthers/pace-core 0.4.1 → 0.5.1

package/src/components/DataTable/components/ViewRowModal.tsx

@@ -0,0 +1,68 @@
+/**
+ * @file View Row Modal Component
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.2.0
+ */
+
+import React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../Dialog/Dialog';
+import { Button } from '../../Button/Button';
+import { X } from 'lucide-react';
+
+interface ViewRowModalProps<TData extends Record<string, any>> {
+  isOpen: boolean;
+  onClose: () => void;
+  data: TData | null;
+  title?: string;
+}
+
+export function ViewRowModal<TData extends Record<string, any>>({
+  isOpen,
+  onClose,
+  data,
+  title = "Row Details"
+}: ViewRowModalProps<TData>) {
+  if (!data) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center justify-between">
+            {title}
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClose}
+              className="h-6 w-6 p-0"
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </DialogTitle>
+        </DialogHeader>
+        
+        <div className="mt-4">
+          <div className="grid gap-4">
+            {Object.entries(data).map(([key, value]) => (
+              <div key={key} className="grid grid-cols-1 md:grid-cols-3 gap-2">
+                <div className="font-medium text-sm text-app-sec-600 capitalize">
+                  {key.replace(/([A-Z])/g, ' $1').trim()}:
+                </div>
+                <div className="md:col-span-2 text-sm">
+                  {value instanceof Date ? value.toLocaleDateString() : 
+                   typeof value === 'object' && value !== null ? JSON.stringify(value, null, 2) :
+                   String(value || '')}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        
+        <div className="flex justify-end mt-6">
+          <Button onClick={onClose}>Close</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/DataTable/components/VirtualizedDataTable.tsx

@@ -0,0 +1,513 @@
+/**
+ * @file Virtualized DataTable Component
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/VirtualizedDataTable
+ * @since 0.3.0
+ */
+
+import React, { useMemo, useRef, useCallback, memo, useLayoutEffect, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { flexRender, type Table as TanStackTable } from '@tanstack/react-table';
+import { cn } from '../../../utils/cn';
+import type { DataRecord } from '../types';
+
+export interface VirtualizedDataTableProps<TData extends DataRecord> {
+  table: TanStackTable<TData>;
+  height?: number;
+  overscan?: number;
+  className?: string;
+  onVisibilityChange?: (visibleRange: { start: number; end: number }) => void;
+}
+
+/**
+ * Memoized cell component for performance
+ */
+const MemoizedCell = memo(({ cell, style }: { cell: any; style?: React.CSSProperties }) => {
+  return (
+    <td
+      key={cell.id}
+      className={cn(
+        "px-4 py-2 text-sm border-b border-gray-200 overflow-hidden",
+        cell.column?.getCanSort && cell.column.getCanSort() && "cursor-pointer select-none"
+      )}
+      style={style}
+    >
+      {flexRender(cell.column?.columnDef?.cell, cell.getContext?.() || {})}
+    </td>
+  );
+});
+
+MemoizedCell.displayName = 'MemoizedCell';
+
+/**
+ * Memoized row component for performance
+ */
+const MemoizedRow = memo(({ row, style }: { 
+  row: any; 
+  style: React.CSSProperties;
+}) => {
+  return (
+    <tr
+      key={row.id}
+      className={cn(
+              "hover:bg-app-sec-50 transition-colors",
+      row.getIsSelected && row.getIsSelected() && "bg-app-main-50"
+      )}
+      style={style}
+      data-testid={`data-table-row-${row.id}`}
+    >
+      {row.getVisibleCells && row.getVisibleCells().map((cell: any) => (
+        <MemoizedCell
+          key={cell.id} 
+          cell={cell}
+          style={{}}
+        />
+      ))}
+    </tr>
+  );
+});
+
+MemoizedRow.displayName = 'MemoizedRow';
+
+/**
+ * High-performance virtualized DataTable component with fixed column alignment
+ */
+export function VirtualizedDataTable<TData extends DataRecord>({
+  table,
+  height = 400,
+  overscan = 5,
+  className,
+  onVisibilityChange
+}: VirtualizedDataTableProps<TData>) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLTableElement>(null);
+  const bodyRef = useRef<HTMLTableElement>(null);
+  const rows = table.getRowModel().rows;
+
+  // Virtual scrolling setup
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40, // Estimated row height
+    overscan,
+  });
+
+  const virtualRows = virtualizer.getVirtualItems();
+
+  // Get table headers
+  const headerGroups = table.getHeaderGroups();
+
+
+  // Notify parent of visibility changes
+  const handleVisibilityChange = useCallback(() => {
+    if (virtualRows.length > 0 && onVisibilityChange) {
+      const start = virtualRows[0].index;
+      const end = virtualRows[virtualRows.length - 1].index;
+      onVisibilityChange({ start, end });
+    }
+  }, [virtualRows, onVisibilityChange]);
+
+  // Call visibility change handler when virtual rows change
+  React.useEffect(() => {
+    handleVisibilityChange();
+  }, [handleVisibilityChange]);
+
+  // Calculate total size for proper scrollbar
+  const totalSize = virtualizer.getTotalSize();
+
+  // Handle empty state
+  if (rows.length === 0) {
+    return (
+      <div className={cn("border rounded-lg overflow-hidden", className)}>
+        {/* Fixed Header */}
+        <div className="bg-app-sec-50 border-b">
+          <table ref={headerRef} className="w-full table-fixed">
+            <thead>
+              {headerGroups.map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <th
+                      key={header.id}
+                      className={cn(
+                                              "px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider",
+                      header.column?.getCanSort && header.column.getCanSort() && "cursor-pointer select-none hover:bg-app-sec-100"
+                      )}
+                      style={{}}
+                      onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
+                    >
+                      <div className="flex items-center space-x-1">
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}
+                        {header.column?.getCanSort && header.column.getCanSort() && (
+                          <span className="ml-1">
+                            {{
+                              asc: '↑',
+                              desc: '↓',
+                            }[header.column?.getIsSorted ? header.column.getIsSorted() as string : ''] ?? '↕'}
+                          </span>
+                        )}
+                      </div>
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+          </table>
+        </div>
+        
+        {/* Empty State */}
+        <div className="flex items-center justify-center py-12">
+          <div className="text-center">
+            <div className="text-app-sec-400 text-lg mb-2">📊</div>
+            <p className="text-app-sec-500">No data available</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("border rounded-lg overflow-hidden", className)}>
+      {/* Fixed Header */}
+      <div className="bg-app-sec-50 border-b sticky top-0 z-10">
+        <table ref={headerRef} className="w-full table-fixed">
+          <thead>
+            {headerGroups.map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    className={cn(
+                      "px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider",
+                      header.column?.getCanSort && header.column.getCanSort() && "cursor-pointer select-none hover:bg-app-sec-100"
+                    )}
+                    style={{}}
+                    onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
+                  >
+                    <div className="flex items-center space-x-1">
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}
+                      {header.column?.getCanSort && header.column.getCanSort() && (
+                        <span className="ml-1">
+                          {{
+                            asc: '↑',
+                            desc: '↓',
+                          }[header.column?.getIsSorted ? header.column.getIsSorted() as string : ''] ?? '↕'}
+                        </span>
+                      )}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+        </table>
+      </div>
+
+      {/* Virtualized Body */}
+      <div
+        ref={parentRef}
+        className="overflow-auto"
+        style={{ height: `${height}px` }}
+      >
+        <div
+          style={{
+            height: `${totalSize}px`,
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          <table ref={bodyRef} className="w-full table-fixed">
+            <tbody>
+              {virtualRows.map((virtualRow) => {
+                const row = rows[virtualRow.index];
+                if (!row) return null;
+                
+                return (
+                  <MemoizedRow
+                    key={row.id}
+                    row={row}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      height: `${virtualRow.size}px`,
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }}
+                  />
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Footer with row count */}
+      <div className="bg-app-sec-50 border-t px-4 py-2">
+        <div className="flex items-center justify-between text-sm text-app-sec-500">
+          <span>
+            Showing {virtualRows.length > 0 ? virtualRows[0].index + 1 : 0} to{' '}
+            {virtualRows.length > 0 ? virtualRows[virtualRows.length - 1].index + 1 : 0} of{' '}
+            {rows.length} rows
+          </span>
+          <span>
+            Virtual rows: {virtualRows.length} / {rows.length}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Performance-optimized virtualized table with additional features
+ */
+export interface EnhancedVirtualizedDataTableProps<TData extends DataRecord> 
+  extends VirtualizedDataTableProps<TData> {
+  enableRowSelection?: boolean;
+  enableHover?: boolean;
+  stickyHeader?: boolean;
+  loadingRows?: number;
+  isLoading?: boolean;
+  emptyMessage?: string;
+  // Additional props for DataTable integration
+  variant?: 'default' | 'compact' | 'spacious';
+  enableGrouping?: boolean;
+  actions?: any[];
+  enableEditing?: boolean;
+  enableDeletion?: boolean;
+  onEditRow?: (row: TData, data: Partial<TData>) => void;
+  onDeleteRow?: (row: TData) => void;
+  getRowId?: (row: any) => string;
+}
+
+export function EnhancedVirtualizedDataTable<TData extends DataRecord>({
+  table,
+  height = 400,
+  overscan = 5,
+  className,
+  enableRowSelection = false,
+  enableHover = true,
+  stickyHeader = true,
+  loadingRows = 10,
+  isLoading = false,
+  emptyMessage = "No data available",
+  onVisibilityChange,
+  // Additional props for DataTable integration
+  variant = 'default',
+  enableGrouping = false,
+  actions = [],
+  enableEditing = false,
+  enableDeletion = false,
+  onEditRow,
+  onDeleteRow,
+  getRowId
+}: EnhancedVirtualizedDataTableProps<TData>) {
+  const parentRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLTableElement>(null);
+  const bodyRef = useRef<HTMLTableElement>(null);
+  const rows = table.getRowModel().rows;
+
+  // Show loading skeleton if loading
+  const displayRows = useMemo(() => {
+    if (isLoading) {
+      return Array.from({ length: loadingRows }, (_, index) => ({
+        id: `loading-${index}`,
+        isLoading: true,
+      }));
+    }
+    return rows;
+  }, [isLoading, loadingRows, rows]);
+
+  const virtualizer = useVirtualizer({
+    count: displayRows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40,
+    overscan,
+  });
+
+  const virtualRows = virtualizer.getVirtualItems();
+  const headerGroups = table.getHeaderGroups();
+  const totalSize = virtualizer.getTotalSize();
+
+
+  // Handle visibility changes
+  React.useEffect(() => {
+    if (virtualRows.length > 0 && onVisibilityChange && !isLoading) {
+      const start = virtualRows[0].index;
+      const end = virtualRows[virtualRows.length - 1].index;
+      onVisibilityChange({ start, end });
+    }
+  }, [virtualRows, onVisibilityChange, isLoading]);
+
+  // Loading row component
+  const LoadingRow = memo(({ style }: { style: React.CSSProperties }) => (
+    <tr style={style} className="animate-pulse">
+      {headerGroups[0]?.headers.map((header) => (
+        <td 
+          key={header.id} 
+          className="px-4 py-2 border-b border-app-sec-200"
+          style={{}}
+        >
+          <div className="h-4 bg-app-sec-200 rounded"></div>
+        </td>
+      ))}
+    </tr>
+  ));
+
+  LoadingRow.displayName = 'LoadingRow';
+
+  // Empty state
+  if (!isLoading && rows.length === 0) {
+    return (
+      <div className={cn("border rounded-lg overflow-hidden", className)} data-testid="enhanced-virtualized-table">
+        <div className="bg-app-sec-50 border-b">
+          <table ref={headerRef} className="w-full table-fixed">
+            <thead>
+              {headerGroups.map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <th
+                      key={header.id}
+                      className="px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider"
+                      style={{}}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+          </table>
+        </div>
+        <div className="flex items-center justify-center py-12">
+          <div className="text-center">
+            <div className="text-app-sec-400 text-lg mb-2">📊</div>
+            <p className="text-app-sec-500">{emptyMessage}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("border rounded-lg overflow-hidden", className)} data-testid="enhanced-virtualized-table">
+      {/* Sticky Header */}
+      <div className={cn("bg-app-sec-50 border-b", stickyHeader && "sticky top-0 z-10")}>
+        <table ref={headerRef} className="w-full table-fixed">
+          <thead>
+            {headerGroups.map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <th
+                    key={header.id}
+                    className={cn(
+                      "px-4 py-3 text-left text-xs font-medium text-app-sec-500 uppercase tracking-wider",
+                      header.column?.getCanSort && header.column.getCanSort() && "cursor-pointer select-none hover:bg-app-sec-100"
+                    )}
+                    style={{}}
+                    onClick={header.column?.getToggleSortingHandler ? header.column.getToggleSortingHandler() : undefined}
+                  >
+                    <div className="flex items-center space-x-1">
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column?.columnDef?.header, header.getContext?.() || {})}
+                      {header.column?.getCanSort && header.column.getCanSort() && (
+                        <span className="ml-1">
+                          {{
+                            asc: '↑',
+                            desc: '↓',
+                          }[header.column?.getIsSorted ? header.column.getIsSorted() as string : ''] ?? '↕'}
+                        </span>
+                      )}
+                    </div>
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+        </table>
+      </div>
+
+      {/* Virtualized Body */}
+      <div
+        ref={parentRef}
+        className="overflow-auto"
+        style={{ height: `${height}px` }}
+      >
+        <div
+          style={{
+            height: `${totalSize}px`,
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          <table ref={bodyRef} className="w-full table-fixed">
+            <tbody>
+              {virtualRows.map((virtualRow) => {
+                const displayRow = displayRows[virtualRow.index];
+                
+                if ('isLoading' in displayRow) {
+                  return (
+                    <LoadingRow
+                      key={displayRow.id}
+                      style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        width: '100%',
+                        height: `${virtualRow.size}px`,
+                        transform: `translateY(${virtualRow.start}px)`,
+                      }}
+                    />
+                  );
+                }
+
+                const row = displayRow as any;
+                return (
+                  <MemoizedRow
+                    key={row.id}
+                    row={row}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      height: `${virtualRow.size}px`,
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }}
+                  />
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Performance Footer */}
+      <div className="bg-app-sec-50 border-t px-4 py-2">
+        <div className="flex items-center justify-between text-sm text-app-sec-500">
+          <span>
+            {isLoading ? (
+              "Loading..."
+            ) : (
+              <>
+                Showing {virtualRows.length > 0 ? virtualRows[0].index + 1 : 0} to{' '}
+                {virtualRows.length > 0 ? virtualRows[virtualRows.length - 1].index + 1 : 0} of{' '}
+                {rows.length} rows
+              </>
+            )}
+          </span>
+          <span>
+            Virtual: {virtualRows.length} / {displayRows.length}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+} 

package/src/components/DataTable/components/index.ts

@@ -0,0 +1,16 @@
+export { ActionButtons } from './ActionButtons';
+export { BulkOperationsDropdown } from './BulkOperationsDropdown';
+export { ColumnVisibilityDropdown } from './ColumnVisibilityDropdown';
+// DataTableBody functionality is now consolidated into UnifiedTableBody
+export { UnifiedTableBody } from './UnifiedTableBody';
+export { DataTableToolbar } from './DataTableToolbar';
+export { DataTableModals } from './DataTableModals';
+export { ImportModal } from './ImportModal';
+export type { ImportModalConfig } from './ImportModal';
+export { GroupHeader } from './GroupHeader';
+export { GroupingDropdown } from './GroupingDropdown';
+export { DataTableErrorBoundary } from './DataTableErrorBoundary';
+export { EditableRow } from './EditableRow';
+export { PaginationControls } from './PaginationControls';
+export { LoadingState } from './LoadingState';
+export { EmptyState } from './EmptyState';

package/src/components/DataTable/context/DataTableContext.tsx

@@ -0,0 +1,97 @@
+/**
+ * @file DataTable Context Provider
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Context
+ * @since 0.4.0
+ * 
+ * Context provider for DataTable state and actions.
+ * This provides a clean way to share state between DataTable components.
+ */
+
+import React, { createContext, useContext, useMemo } from 'react';
+import type { DataRecord } from '../types';
+import { useDataTableState as useDataTableStateHook } from '../hooks/useDataTableState';
+import type { 
+  DataTableState, 
+  UseDataTableStateOptions
+} from '../hooks/useDataTableState';
+
+// ============================================================================
+// CONTEXT INTERFACE
+// ============================================================================
+
+export interface DataTableContextValue<TData extends DataRecord> {
+  state: DataTableState<TData>;
+  actions: ReturnType<typeof useDataTableStateHook<TData>>['actions'];
+  computed: ReturnType<typeof useDataTableStateHook<TData>>['computed'];
+  clearFilters: () => void;
+}
+
+// ============================================================================
+// CONTEXT CREATION
+// ============================================================================
+
+const DataTableContext = createContext<DataTableContextValue<any> | null>(null);
+
+// ============================================================================
+// PROVIDER COMPONENT
+// ============================================================================
+
+export interface DataTableProviderProps<TData extends DataRecord> {
+  children: React.ReactNode;
+  options?: UseDataTableStateOptions<TData>;
+}
+
+export function DataTableProvider<TData extends DataRecord>({
+  children,
+  options = {}
+}: DataTableProviderProps<TData>) {
+  const { state, actions, computed, clearFilters } = useDataTableStateHook<TData>(options);
+
+  const contextValue = useMemo(() => ({
+    state,
+    actions,
+    computed,
+    clearFilters
+  }), [state, actions, computed, clearFilters]);
+
+  return (
+    <DataTableContext.Provider value={contextValue}>
+      {children}
+    </DataTableContext.Provider>
+  );
+}
+
+// ============================================================================
+// HOOKS
+// ============================================================================
+
+export function useDataTableContext<TData extends DataRecord>(): DataTableContextValue<TData> {
+  const context = useContext(DataTableContext);
+  
+  if (!context) {
+    throw new Error('useDataTableContext must be used within a DataTableProvider');
+  }
+  
+  return context as DataTableContextValue<TData>;
+}
+
+export function useDataTableState<TData extends DataRecord>() {
+  const { state } = useDataTableContext<TData>();
+  return state;
+}
+
+export function useDataTableActions<TData extends DataRecord>() {
+  const { actions } = useDataTableContext<TData>();
+  return actions;
+}
+
+export function useDataTableComputed<TData extends DataRecord>() {
+  const { computed } = useDataTableContext<TData>();
+  return computed;
+}
+
+export function useDataTableClearFilters<TData extends DataRecord>() {
+  const { clearFilters } = useDataTableContext<TData>();
+  return clearFilters;
+}