@jmruthers/pace-core 0.5.135 → 0.5.137

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

@@ -0,0 +1,181 @@
+/**
+ * @file DataTable Context
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Architecture
+ * @since 0.3.0
+ */
+
+import React, { createContext, useContext, useMemo, useCallback, useRef, useEffect } from 'react';
+import { useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel } from '@tanstack/react-table';
+import { ChevronDown, ChevronUp, ChevronsUpDown, Filter, MoreHorizontal, Plus, Search, Settings, Trash2, Upload, Download, Eye, Edit, Copy } from 'lucide-react';
+import { Button } from '../../Button/Button';
+import { Input } from '../../Input/Input';
+import { Checkbox } from '../../Checkbox/Checkbox';
+// DropdownMenu components have been merged into Select components
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../../Dialog/Dialog';
+import type { DataTableContext as IDataTableContext, DataTableConfig, DataTableUtils } from './interfaces';
+import type { DataRecord } from '../types';
+import { DataManager } from './DataManager';
+import { ColumnManagerImpl } from './ColumnManager';
+import { ActionManagerImpl } from './ActionManager';
+import { StateManagerImpl } from './StateManager';
+import { PluginRegistryImpl } from './PluginRegistry';
+import { LocalDataAdapter } from './LocalDataAdapter';
+
+// Create the context
+const DataTableContext = createContext<IDataTableContext<any> | null>(null);
+
+/**
+ * DataTable provider component
+ */
+export interface DataTableProviderProps<TData extends DataRecord> {
+  children: React.ReactNode;
+  config: DataTableConfig<TData>;
+  data?: TData[];
+  columns?: any[];
+  actions?: any[];
+  pageSize?: number;
+}
+
+export function DataTableProvider<TData extends DataRecord>({
+  children,
+  config,
+  data = [],
+  columns = [],
+  actions = [],
+  pageSize = 10,
+}: DataTableProviderProps<TData>) {
+  // Create managers
+  const adapter = useMemo(() => new LocalDataAdapter<TData>(data), [data]);
+  const dataManager = useMemo(() => new DataManager<TData>(adapter), [adapter]);
+  const columnManager = useMemo(() => new ColumnManagerImpl<TData>(columns), [columns]);
+  const actionManager = useMemo(() => new ActionManagerImpl<TData>(actions), [actions]);
+  const stateManager = useMemo(() => new StateManagerImpl<TData>({
+    ui: {
+      globalFilter: '',
+      columnFilters: [],
+      sorting: [],
+      grouping: [],
+      expanded: {},
+      pagination: {
+        pageIndex: 0,
+        pageSize: pageSize,
+      },
+      rowSelection: {},
+      editing: {
+        rowId: null,
+        data: {},
+        isCreating: false,
+        creationData: {},
+      },
+      modals: {
+        import: false,
+        export: false,
+        view: false,
+        viewData: null,
+      },
+    }
+  }), [pageSize]);
+  const pluginRegistry = useMemo(() => new PluginRegistryImpl<TData>(), []);
+
+  // Create utilities
+  const utils: DataTableUtils<TData> = useMemo(() => ({
+    getRowId: (row: TData, index: number) => (row as any).id || String(index),
+    formatValue: (value: any, column: any) => String(value),
+    validateData: (data: Partial<TData>) => null,
+    debounce: <T extends (...args: any[]) => any>(func: T, delay: number) => {
+      let timeoutId: NodeJS.Timeout;
+      return ((...args: any[]) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func(...args), delay);
+      }) as T;
+    },
+  }), []);
+
+  // Create context value
+  const contextValue: IDataTableContext<TData> = useMemo(() => ({
+    dataManager,
+    columnManager,
+    actionManager,
+    stateManager,
+    pluginRegistry,
+    adapter,
+    observable: stateManager,
+    config,
+    utils,
+  }), [dataManager, columnManager, actionManager, stateManager, pluginRegistry, adapter, config, utils]);
+
+  // Initialize data
+  useEffect(() => {
+    // Update the adapter with new data
+    adapter.setData(data);
+    
+    if (data.length > 0) {
+      stateManager.updateData(data);
+    } else {
+      // Handle empty data case
+      stateManager.updateData([]);
+    }
+  }, [data, dataManager, stateManager, adapter]);
+
+  // Initialize columns
+  useEffect(() => {
+    if (columns.length > 0) {
+      columnManager.setColumns(columns);
+      stateManager.updateColumns(columns);
+    }
+  }, [columns, columnManager, stateManager]);
+
+  // Initialize actions
+  useEffect(() => {
+    if (actions.length > 0) {
+      actionManager.setActions(actions);
+      stateManager.updateActions(actions);
+    }
+  }, [actions, actionManager, stateManager]);
+
+  return (
+    <DataTableContext.Provider value={contextValue}>
+      {children}
+    </DataTableContext.Provider>
+  );
+}
+
+/**
+ * Hook to use DataTable context
+ */
+export function useDataTableContext<TData extends DataRecord = DataRecord>(): IDataTableContext<TData> {
+  const context = useContext(DataTableContext);
+  if (!context) {
+    throw new Error('useDataTableContext must be used within a DataTableProvider');
+  }
+  return context as IDataTableContext<TData>;
+}
+
+/**
+ * Hook to use specific managers
+ */
+export function useDataManager<TData extends DataRecord = DataRecord>() {
+  const context = useDataTableContext<TData>();
+  return context.dataManager;
+}
+
+export function useColumnManager<TData extends DataRecord = DataRecord>() {
+  const context = useDataTableContext<TData>();
+  return context.columnManager;
+}
+
+export function useActionManager<TData extends DataRecord = DataRecord>() {
+  const context = useDataTableContext<TData>();
+  return context.actionManager;
+}
+
+export function useStateManager<TData extends DataRecord = DataRecord>() {
+  const context = useDataTableContext<TData>();
+  return context.stateManager;
+}
+
+export function usePluginRegistry<TData extends DataRecord = DataRecord>() {
+  const context = useDataTableContext<TData>();
+  return context.pluginRegistry;
+} 

package/src/components/DataTable/core/LocalDataAdapter.ts

@@ -0,0 +1,273 @@
+/**
+ * @file Local Data Adapter
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Architecture/Adapters
+ * @since 0.3.0
+ */
+
+import type { DataAdapter, FetchOptions, ExportFormat, ExportOptions } from './interfaces';
+import type { DataRecord } from '../types';
+import { generateCSVContent } from '../utils/exportUtils';
+
+/**
+ * Local data adapter for in-memory data operations
+ * Implements DataAdapter interface for local data management
+ */
+export class LocalDataAdapter<TData extends DataRecord = DataRecord> implements DataAdapter<TData> {
+  public name = 'local';
+  private data: TData[] = [];
+  private error: Error | null = null;
+
+  constructor(initialData: TData[] = []) {
+    this.data = [...initialData];
+  }
+
+  /**
+   * Fetch data with filtering, sorting, and pagination
+   */
+  async fetchData(options: FetchOptions = {}): Promise<TData[]> {
+    try {
+      this.error = null;
+      let result = [...this.data];
+
+      // Apply search filter
+      if (options.search) {
+        const searchTerm = options.search.toLowerCase();
+        result = result.filter(item =>
+          Object.values(item).some(value =>
+            String(value).toLowerCase().includes(searchTerm)
+          )
+        );
+      }
+
+      // Apply column filters
+      if (options.filters) {
+        result = result.filter(item => {
+          return Object.entries(options.filters!).every(([key, value]) => {
+            const itemValue = item[key];
+            if (value === null || value === undefined) return true;
+            if (typeof value === 'string') {
+              return String(itemValue).toLowerCase().includes(value.toLowerCase());
+            }
+            return itemValue === value;
+          });
+        });
+      }
+
+      // Apply sorting
+      if (options.sortBy) {
+        result.sort((a, b) => {
+          const aValue = a[options.sortBy!];
+          const bValue = b[options.sortBy!];
+          
+          // Handle null/undefined values
+          if (aValue == null && bValue == null) return 0;
+          if (aValue == null) return 1;
+          if (bValue == null) return -1;
+          
+          // Compare values - convert to comparable types
+          const aComparable = typeof aValue === 'string' ? aValue.toLowerCase() : aValue;
+          const bComparable = typeof bValue === 'string' ? bValue.toLowerCase() : bValue;
+          
+          if (aComparable < bComparable) return options.sortDirection === 'desc' ? 1 : -1;
+          if (aComparable > bComparable) return options.sortDirection === 'desc' ? -1 : 1;
+          return 0;
+        });
+      }
+
+      // Apply pagination
+      if (options.page !== undefined && options.pageSize) {
+        const start = options.page * options.pageSize;
+        const end = start + options.pageSize;
+        result = result.slice(start, end);
+      }
+
+      return result;
+    } catch (error) {
+      this.error = error as Error;
+      throw error;
+    }
+  }
+
+  /**
+   * Update a data item
+   */
+  async updateData(id: string, data: Partial<TData>): Promise<void> {
+    try {
+      this.error = null;
+      const index = this.data.findIndex(item => this.getRowId(item) === id);
+      
+      if (index === -1) {
+        throw new Error(`Item with ID "${id}" not found`);
+      }
+
+      this.data[index] = { ...this.data[index], ...data };
+    } catch (error) {
+      this.error = error as Error;
+      throw error;
+    }
+  }
+
+  /**
+   * Delete a data item
+   */
+  async deleteData(id: string): Promise<void> {
+    try {
+      this.error = null;
+      const index = this.data.findIndex(item => this.getRowId(item) === id);
+      
+      if (index === -1) {
+        throw new Error(`Item with ID "${id}" not found`);
+      }
+
+      this.data.splice(index, 1);
+    } catch (error) {
+      this.error = error as Error;
+      throw error;
+    }
+  }
+
+  /**
+   * Create a new data item
+   */
+  async createData(data: Partial<TData>): Promise<TData> {
+    try {
+      this.error = null;
+      const newItem = {
+        id: this.generateId(),
+        ...data,
+      } as unknown as TData;
+
+      this.data.push(newItem);
+      return newItem;
+    } catch (error) {
+      this.error = error as Error;
+      throw error;
+    }
+  }
+
+  /**
+   * Export data in specified format
+   */
+  async exportData(format: ExportFormat, options: ExportOptions = {}): Promise<string> {
+    try {
+      this.error = null;
+      
+      switch (format) {
+        case 'csv':
+          return this.exportToCSV(options);
+        case 'json':
+          return this.exportToJSON(options);
+        case 'xlsx':
+          return this.exportToXLSX(options);
+        default:
+          throw new Error(`Unsupported export format: ${format}`);
+      }
+    } catch (error) {
+      this.error = error as Error;
+      throw error;
+    }
+  }
+
+  /**
+   * Import data
+   */
+  async importData(data: TData[]): Promise<void> {
+    try {
+      this.error = null;
+      this.data = [...data];
+    } catch (error) {
+      this.error = error as Error;
+      throw error;
+    }
+  }
+
+  /**
+   * Check if adapter is connected
+   */
+  isConnected(): boolean {
+    return true; // Local adapter is always connected
+  }
+
+  /**
+   * Get current error
+   */
+  getError(): Error | null {
+    return this.error;
+  }
+
+  /**
+   * Set data directly
+   */
+  setData(data: TData[]): void {
+    this.data = [...data];
+  }
+
+  /**
+   * Get all data without filtering
+   */
+  getAllData(): TData[] {
+    return [...this.data];
+  }
+
+  /**
+   * Get data count
+   */
+  getDataCount(): number {
+    return this.data.length;
+  }
+
+  /**
+   * Clear all data
+   */
+  clearData(): void {
+    this.data = [];
+  }
+
+  /**
+   * Get row ID from data item
+   */
+  private getRowId(item: TData): string {
+    return (item as any).id || (item as any).key || JSON.stringify(item);
+  }
+
+  /**
+   * Generate unique ID
+   */
+  private generateId(): string {
+    return `id-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  /**
+   * Export to CSV format
+   */
+  private exportToCSV(options: ExportOptions): string {
+    if (this.data.length === 0) return '';
+
+    // Create column definitions from data keys
+    const columns = Object.keys(this.data[0]).map(key => ({
+      accessorKey: key,
+      header: key
+    }));
+
+    return generateCSVContent(this.data, columns, {
+      includeHeaders: options.includeHeaders
+    });
+  }
+
+  /**
+   * Export to JSON format
+   */
+  private exportToJSON(options: ExportOptions): string {
+    return JSON.stringify(this.data, null, 2);
+  }
+
+  /**
+   * Export to XLSX format (simplified - returns JSON for now)
+   */
+  private exportToXLSX(options: ExportOptions): string {
+    // In a real implementation, you would use a library like xlsx
+    // For now, return JSON format
+    return this.exportToJSON(options);
+  }
+} 

package/src/components/DataTable/core/PluginRegistry.ts

@@ -0,0 +1,229 @@
+/**
+ * @file DataTable Plugin Registry
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Architecture
+ * @since 0.3.0
+ */
+
+import type { PluginRegistry, DataTablePlugin, DataTableContext } from './interfaces';
+import type { DataRecord } from '../types';
+
+/**
+ * Plugin registry implementation
+ * Manages plugin registration, dependency resolution, and lifecycle
+ */
+export class PluginRegistryImpl<TData extends DataRecord = DataRecord> implements PluginRegistry<TData> {
+  private plugins = new Map<string, DataTablePlugin<TData>>();
+  private initializedPlugins = new Set<string>();
+
+  /**
+   * Register a plugin
+   */
+  register(plugin: DataTablePlugin<TData>): void {
+    if (this.plugins.has(plugin.name)) {
+      throw new Error(`Plugin "${plugin.name}" is already registered`);
+    }
+
+    this.plugins.set(plugin.name, plugin);
+  }
+
+  /**
+   * Unregister a plugin
+   */
+  unregister(name: string): void {
+    const plugin = this.plugins.get(name);
+    if (!plugin) {
+      throw new Error(`Plugin "${name}" is not registered`);
+    }
+
+    // Cleanup if initialized
+    if (this.initializedPlugins.has(name)) {
+      plugin.cleanup().catch(error => {
+        console.error(`Error cleaning up plugin "${name}":`, error);
+      });
+      this.initializedPlugins.delete(name);
+    }
+
+    this.plugins.delete(name);
+  }
+
+  /**
+   * Get a plugin by name
+   */
+  getPlugin(name: string): DataTablePlugin<TData> | undefined {
+    return this.plugins.get(name);
+  }
+
+  /**
+   * Get all enabled plugins
+   */
+  getEnabledPlugins(): DataTablePlugin<TData>[] {
+    return Array.from(this.plugins.values());
+  }
+
+  /**
+   * Get plugins in dependency order
+   */
+  getDependencyOrder(): DataTablePlugin<TData>[] {
+    const sorted: DataTablePlugin<TData>[] = [];
+    const visited = new Set<string>();
+    const visiting = new Set<string>();
+
+    const visit = (pluginName: string) => {
+      if (visiting.has(pluginName)) {
+        throw new Error(`Circular dependency detected: ${pluginName}`);
+      }
+
+      if (visited.has(pluginName)) {
+        return;
+      }
+
+      const plugin = this.plugins.get(pluginName);
+      if (!plugin) {
+        throw new Error(`Plugin "${pluginName}" not found`);
+      }
+
+      visiting.add(pluginName);
+
+      // Visit dependencies first
+      if (plugin.dependencies) {
+        for (const dependency of plugin.dependencies) {
+          visit(dependency);
+        }
+      }
+
+      visiting.delete(pluginName);
+      visited.add(pluginName);
+      sorted.push(plugin);
+    };
+
+    // Visit all plugins
+    for (const pluginName of this.plugins.keys()) {
+      if (!visited.has(pluginName)) {
+        visit(pluginName);
+      }
+    }
+
+    return sorted;
+  }
+
+  /**
+   * Initialize all plugins
+   */
+  async initializePlugins(context: DataTableContext<TData>): Promise<void> {
+    const plugins = this.getDependencyOrder();
+
+    for (const plugin of plugins) {
+      try {
+        await plugin.initialize(context);
+        this.initializedPlugins.add(plugin.name);
+      } catch (error) {
+        console.error(`Failed to initialize plugin "${plugin.name}":`, error);
+        throw error;
+      }
+    }
+  }
+
+  /**
+   * Cleanup all plugins
+   */
+  async cleanupPlugins(): Promise<void> {
+    const plugins = this.getDependencyOrder().reverse(); // Reverse for cleanup order
+
+    for (const plugin of plugins) {
+      if (this.initializedPlugins.has(plugin.name)) {
+        try {
+          await plugin.cleanup();
+          this.initializedPlugins.delete(plugin.name);
+        } catch (error) {
+          console.error(`Error cleaning up plugin "${plugin.name}":`, error);
+        }
+      }
+    }
+  }
+
+  /**
+   * Render all plugins
+   */
+  renderPlugins(): React.ReactNode[] {
+    return this.getEnabledPlugins()
+      .filter(plugin => this.initializedPlugins.has(plugin.name))
+      .map(plugin => plugin.render());
+  }
+
+  /**
+   * Check if plugin is initialized
+   */
+  isPluginInitialized(name: string): boolean {
+    return this.initializedPlugins.has(name);
+  }
+
+  /**
+   * Get plugin count
+   */
+  getPluginCount(): number {
+    return this.plugins.size;
+  }
+
+  /**
+   * Get initialized plugin count
+   */
+  getInitializedPluginCount(): number {
+    return this.initializedPlugins.size;
+  }
+
+  /**
+   * Check if plugin has dependencies
+   */
+  hasDependencies(name: string): boolean {
+    const plugin = this.plugins.get(name);
+    return plugin ? !!(plugin.dependencies && plugin.dependencies.length > 0) : false;
+  }
+
+  /**
+   * Get plugin dependencies
+   */
+  getPluginDependencies(name: string): string[] {
+    const plugin = this.plugins.get(name);
+    return plugin?.dependencies || [];
+  }
+
+  /**
+   * Check if all dependencies are satisfied
+   */
+  areDependenciesSatisfied(name: string): boolean {
+    const dependencies = this.getPluginDependencies(name);
+    return dependencies.every(dep => this.plugins.has(dep));
+  }
+
+  /**
+   * Get plugins that depend on a specific plugin
+   */
+  getDependents(name: string): DataTablePlugin<TData>[] {
+    return Array.from(this.plugins.values()).filter(plugin => 
+      plugin.dependencies?.includes(name)
+    );
+  }
+
+  /**
+   * Validate plugin dependencies
+   */
+  validateDependencies(): { valid: boolean; errors: string[] } {
+    const errors: string[] = [];
+
+    for (const [name, plugin] of this.plugins) {
+      if (plugin.dependencies) {
+        for (const dependency of plugin.dependencies) {
+          if (!this.plugins.has(dependency)) {
+            errors.push(`Plugin "${name}" depends on "${dependency}" which is not registered`);
+          }
+        }
+      }
+    }
+
+    return {
+      valid: errors.length === 0,
+      errors
+    };
+  }
+}