@jmruthers/pace-core 0.5.136 → 0.5.137

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

@@ -0,0 +1,311 @@
+/**
+ * @file DataTable State Manager
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Architecture/Managers
+ * @since 0.3.0
+ */
+
+import type { StateManager, DataTableState, DataTableObserver, Observable, UIState } from './interfaces';
+import type { DataRecord } from '../types';
+
+/**
+ * State manager implementation with observer pattern
+ * Responsible only for state management
+ */
+export class StateManagerImpl<TData extends DataRecord> implements StateManager<TData>, Observable<TData> {
+  private state: DataTableState<TData>;
+  private observers: Map<string, DataTableObserver<TData>> = new Map();
+  private observerIdCounter = 0;
+
+  constructor(initialState?: Partial<DataTableState<TData>>) {
+    this.state = this.createInitialState(initialState);
+  }
+
+  /**
+   * Get current state
+   */
+  getState(): DataTableState<TData> {
+    return { ...this.state };
+  }
+
+  /**
+   * Set state with updater function
+   */
+  setState(updater: (state: DataTableState<TData>) => DataTableState<TData>): void {
+    const newState = updater(this.getState());
+    const oldState = this.state;
+    this.state = newState;
+
+    // Notify observers of state changes
+    this.notifyStateChange(oldState, newState);
+  }
+
+  /**
+   * Subscribe to state changes
+   */
+  subscribe(observer: DataTableObserver<TData> | ((state: DataTableState<TData>) => void)): () => void {
+    const observerId = `observer-${++this.observerIdCounter}`;
+    
+    let dataTableObserver: DataTableObserver<TData>;
+    
+    if (typeof observer === 'function') {
+      dataTableObserver = {
+        id: observerId,
+        onStateChange: observer,
+      };
+    } else {
+      dataTableObserver = observer;
+    }
+
+    this.observers.set(observerId, dataTableObserver);
+    
+    // Return unsubscribe function
+    return () => this.unsubscribe(observerId);
+  }
+
+  /**
+   * Subscribe to specific state changes
+   */
+  subscribeToObserver(observer: DataTableObserver<TData>): () => void {
+    this.observers.set(observer.id, observer);
+    return () => this.unsubscribe(observer.id);
+  }
+
+  /**
+   * Unsubscribe observer
+   */
+  unsubscribe(observerId: string): void {
+    this.observers.delete(observerId);
+  }
+
+  /**
+   * Notify all observers of an event
+   */
+  notify(event: string, data: any): void {
+    this.observers.forEach(observer => {
+      switch (event) {
+        case 'dataChange':
+          observer.onDataChange?.(data);
+          break;
+        case 'columnChange':
+          observer.onColumnChange?.(data);
+          break;
+        case 'stateChange':
+          observer.onStateChange?.(data);
+          break;
+        case 'error':
+          observer.onError?.(data);
+          break;
+      }
+    });
+  }
+
+  /**
+   * Update data and notify observers
+   */
+  updateData(data: TData[]): void {
+    const oldData = this.state.data;
+    this.setState(state => ({ ...state, data }));
+    
+    if (oldData !== data) {
+      this.notify('dataChange', data);
+    }
+  }
+
+  /**
+   * Update columns and notify observers
+   */
+  updateColumns(columns: any[]): void {
+    const oldColumns = this.state.columns;
+    this.setState(state => ({ ...state, columns }));
+    
+    if (oldColumns !== columns) {
+      this.notify('columnChange', columns);
+    }
+  }
+
+  /**
+   * Update actions and notify observers
+   */
+  updateActions(actions: any[]): void {
+    this.setState(state => ({ ...state, actions }));
+  }
+
+  /**
+   * Update UI state
+   */
+  updateUI(uiUpdates: Partial<UIState>): void {
+    this.setState(state => ({
+      ...state,
+      ui: { ...state.ui, ...uiUpdates }
+    }));
+  }
+
+  /**
+   * Update global filter
+   */
+  updateGlobalFilter(filter: string): void {
+    this.updateUI({ globalFilter: filter });
+  }
+
+  /**
+   * Update column filters
+   */
+  updateColumnFilters(filters: Array<{ id: string; value: any }>): void {
+    this.updateUI({ columnFilters: filters });
+  }
+
+  /**
+   * Update sorting
+   */
+  updateSorting(sorting: Array<{ id: string; desc: boolean }>): void {
+    this.updateUI({ sorting });
+  }
+
+  /**
+   * Update grouping
+   */
+  updateGrouping(grouping: string[]): void {
+    this.updateUI({ grouping });
+  }
+
+  /**
+   * Update pagination
+   */
+  updatePagination(pagination: { pageIndex: number; pageSize: number }): void {
+    this.updateUI({ pagination });
+  }
+
+  /**
+   * Update row selection
+   */
+  updateRowSelection(selection: Record<string, boolean>): void {
+    this.updateUI({ rowSelection: selection });
+  }
+
+  /**
+   * Update editing state
+   */
+  updateEditing(editing: DataTableState<TData>['ui']['editing']): void {
+    this.updateUI({ editing });
+  }
+
+  /**
+   * Update modal state
+   */
+  updateModals(modals: DataTableState<TData>['ui']['modals']): void {
+    this.updateUI({ modals });
+  }
+
+  /**
+   * Update feature state
+   */
+  updateFeatureState(featureName: string, state: any): void {
+    this.setState(currentState => ({
+      ...currentState,
+      features: new Map(currentState.features).set(featureName, state)
+    }));
+  }
+
+  /**
+   * Update plugin state
+   */
+  updatePluginState(pluginName: string, state: any): void {
+    this.setState(currentState => ({
+      ...currentState,
+      plugins: new Map(currentState.plugins).set(pluginName, state)
+    }));
+  }
+
+  /**
+   * Set loading state
+   */
+  setLoading(loading: boolean): void {
+    this.setState(state => ({ ...state, isLoading: loading }));
+  }
+
+  /**
+   * Set error state
+   */
+  setError(error: Error | null): void {
+    this.setState(state => ({ ...state, error }));
+    
+    if (error) {
+      this.notify('error', error);
+    }
+  }
+
+  /**
+   * Reset state to initial values
+   */
+  reset(): void {
+    this.state = this.createInitialState();
+    this.notify('stateChange', this.state);
+  }
+
+  /**
+   * Get observer count
+   */
+  getObserverCount(): number {
+    return this.observers.size;
+  }
+
+  /**
+   * Create initial state
+   */
+  private createInitialState(overrides?: Partial<DataTableState<TData>>): DataTableState<TData> {
+    const defaultState: DataTableState<TData> = {
+      data: [],
+      isLoading: false,
+      error: null,
+      columns: [],
+      columnVisibility: {},
+      actions: [],
+      ui: {
+        globalFilter: '',
+        columnFilters: [],
+        sorting: [],
+        grouping: [],
+        expanded: {},
+        pagination: {
+          pageIndex: 0,
+          pageSize: 10,
+        },
+        rowSelection: {},
+        editing: {
+          rowId: null,
+          data: {},
+          isCreating: false,
+          creationData: {},
+        },
+        modals: {
+          import: false,
+          export: false,
+          view: false,
+          viewData: null,
+        },
+      },
+      features: new Map(),
+      plugins: new Map(),
+    };
+
+    return { ...defaultState, ...overrides };
+  }
+
+  /**
+   * Notify observers of state changes
+   */
+  private notifyStateChange(oldState: DataTableState<TData>, newState: DataTableState<TData>): void {
+    // Check for specific changes and notify accordingly
+    if (oldState.data !== newState.data) {
+      this.notify('dataChange', newState.data);
+    }
+    
+    if (oldState.columns !== newState.columns) {
+      this.notify('columnChange', newState.columns);
+    }
+    
+    // Always notify of state change
+    this.notify('stateChange', newState);
+  }
+} 

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

@@ -0,0 +1,338 @@
+/**
+ * @file DataTable Architecture Interfaces
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Architecture
+ * @since 0.3.0
+ */
+
+import React from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import type { DataRecord, DataTableAction } from '../types';
+
+// ============================================================================
+// CORE RESPONSIBILITY INTERFACES (SRP)
+// ============================================================================
+
+/**
+ * Data management responsibility
+ */
+export interface DataTableDataManager<TData extends DataRecord> {
+  getData(): TData[];
+  updateData(id: string, data: Partial<TData>): Promise<void>;
+  deleteData(id: string): Promise<void>;
+  createData(data: Partial<TData>): Promise<TData>;
+  isLoading(): boolean;
+  getError(): Error | null;
+}
+
+/**
+ * Column management responsibility
+ */
+export interface ColumnManager<TData extends DataRecord> {
+  getColumns(): ColumnDef<TData>[];
+  addColumn(column: ColumnDef<TData>): void;
+  removeColumn(id: string): void;
+  updateColumn(id: string, column: Partial<ColumnDef<TData>>): void;
+  getColumn(id: string): ColumnDef<TData> | undefined;
+}
+
+/**
+ * Action management responsibility
+ */
+export interface ActionManager<TData extends DataRecord> {
+  getActions(): DataTableAction<TData>[];
+  addAction(action: DataTableAction<TData>): void;
+  removeAction(id: string): void;
+  updateAction(id: string, action: Partial<DataTableAction<TData>>): void;
+}
+
+/**
+ * State management responsibility
+ */
+export interface StateManager<TData extends DataRecord> {
+  getState(): DataTableState<TData>;
+  setState(updater: (state: DataTableState<TData>) => DataTableState<TData>): void;
+  subscribe(callback: (state: DataTableState<TData>) => void): () => void;
+  
+  // Additional methods for convenience
+  updateData(data: TData[]): void;
+  updateColumns(columns: any[]): void;
+  updateActions(actions: any[]): void;
+  updateUI(uiUpdates: Partial<UIState>): void;
+  updateGlobalFilter(filter: string): void;
+  updateColumnFilters(filters: Array<{ id: string; value: any }>): void;
+  updateSorting(sorting: Array<{ id: string; desc: boolean }>): void;
+  updateGrouping(grouping: string[]): void;
+  updatePagination(pagination: { pageIndex: number; pageSize: number }): void;
+  updateRowSelection(selection: Record<string, boolean>): void;
+  updateEditing(editing: DataTableState<TData>['ui']['editing']): void;
+  updateModals(modals: DataTableState<TData>['ui']['modals']): void;
+  updateFeatureState(featureName: string, state: any): void;
+  updatePluginState(pluginName: string, state: any): void;
+  setLoading(loading: boolean): void;
+  setError(error: Error | null): void;
+  reset(): void;
+}
+
+// ============================================================================
+// FEATURE STRATEGY INTERFACES (OCP)
+// ============================================================================
+
+/**
+ * Feature strategy interface for extensible features
+ */
+export interface DataTableFeature<TData extends DataRecord = DataRecord> {
+  name: string;
+  priority: number;
+  isEnabled(): boolean;
+  initialize(context: DataTableContext<TData>): void;
+  render(): React.ReactNode;
+  cleanup(): void;
+  getState(): any;
+}
+
+/**
+ * Feature configuration
+ */
+export interface FeatureConfig {
+  enabled: boolean;
+  options?: Record<string, any>;
+}
+
+// ============================================================================
+// PLUGIN ARCHITECTURE INTERFACES
+// ============================================================================
+
+/**
+ * Plugin interface for extensible functionality
+ */
+export interface DataTablePlugin<TData extends DataRecord = DataRecord> {
+  name: string;
+  version: string;
+  priority: number;
+  dependencies?: string[];
+  
+  initialize(context: DataTableContext<TData>): Promise<void>;
+  render(): React.ReactNode;
+  cleanup(): Promise<void>;
+  
+  onDataChange?(data: TData[]): void;
+  onColumnChange?(columns: ColumnDef<TData>[]): void;
+  onStateChange?(state: Partial<DataTableState<TData>>): void;
+}
+
+/**
+ * Plugin registry for managing plugins
+ */
+export interface PluginRegistry<TData extends DataRecord = DataRecord> {
+  register(plugin: DataTablePlugin<TData>): void;
+  unregister(name: string): void;
+  getPlugin(name: string): DataTablePlugin<TData> | undefined;
+  getEnabledPlugins(): DataTablePlugin<TData>[];
+  getDependencyOrder(): DataTablePlugin<TData>[];
+}
+
+// ============================================================================
+// ADAPTER PATTERN INTERFACES (DIP)
+// ============================================================================
+
+/**
+ * Data adapter interface for different data sources
+ */
+export interface DataAdapter<TData extends DataRecord = DataRecord> {
+  name: string;
+  
+  fetchData(options: FetchOptions): Promise<TData[]>;
+  updateData(id: string, data: Partial<TData>): Promise<void>;
+  deleteData(id: string): Promise<void>;
+  createData(data: Partial<TData>): Promise<TData>;
+  exportData(format: ExportFormat, options?: ExportOptions): Promise<string>;
+  importData(data: TData[]): Promise<void>;
+  
+  isConnected(): boolean;
+  getError(): Error | null;
+}
+
+/**
+ * Fetch options for data adapters
+ */
+export interface FetchOptions {
+  page?: number;
+  pageSize?: number;
+  sortBy?: string;
+  sortDirection?: 'asc' | 'desc';
+  filters?: Record<string, any>;
+  search?: string;
+}
+
+/**
+ * Export options
+ */
+export interface ExportOptions {
+  filename?: string;
+  includeHeaders?: boolean;
+  dateFormat?: string;
+}
+
+/**
+ * Export format types
+ */
+export type ExportFormat = 'csv' | 'json' | 'xlsx';
+
+// ============================================================================
+// OBSERVER PATTERN INTERFACES
+// ============================================================================
+
+/**
+ * Observer interface for state changes
+ */
+export interface DataTableObserver<TData extends DataRecord = DataRecord> {
+  id: string;
+  onDataChange?(data: TData[]): void;
+  onColumnChange?(columns: ColumnDef<TData>[]): void;
+  onStateChange?(state: Partial<DataTableState<TData>>): void;
+  onError?(error: Error): void;
+}
+
+/**
+ * Observable interface for state management
+ */
+export interface Observable<TData extends DataRecord = DataRecord> {
+  subscribe(observer: DataTableObserver<TData> | ((state: DataTableState<TData>) => void)): () => void;
+  unsubscribe(observerId: string): void;
+  notify(event: string, data: any): void;
+}
+
+// ============================================================================
+// STATE INTERFACES
+// ============================================================================
+
+/**
+ * Core DataTable state
+ */
+export interface DataTableState<TData extends DataRecord = DataRecord> {
+  // Data state
+  data: TData[];
+  isLoading: boolean;
+  error: Error | null;
+  
+  // Column state
+  columns: ColumnDef<TData>[];
+  columnVisibility: Record<string, boolean>;
+  
+  // Action state
+  actions: DataTableAction<TData>[];
+  
+  // UI state
+  ui: UIState;
+  
+  // Feature state
+  features: Map<string, any>;
+  
+  // Plugin state
+  plugins: Map<string, any>;
+}
+
+/**
+ * UI-specific state
+ */
+export interface UIState {
+  // Filtering
+  globalFilter: string;
+  columnFilters: Array<{ id: string; value: any }>;
+  
+  // Sorting
+  sorting: Array<{ id: string; desc: boolean }>;
+  
+  // Grouping
+  grouping: string[];
+  expanded: Record<string, boolean>;
+  
+  // Pagination
+  pagination: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  
+  // Selection
+  rowSelection: Record<string, boolean>;
+  
+  // Editing
+  editing: {
+    rowId: string | null;
+    data: Record<string, any>;
+    isCreating: boolean;
+    creationData: Record<string, any>;
+  };
+  
+  // Modals
+  modals: {
+    import: boolean;
+    export: boolean;
+    view: boolean;
+    viewData: any;
+  };
+}
+
+// ============================================================================
+// CONTEXT INTERFACES
+// ============================================================================
+
+/**
+ * DataTable context for sharing state and managers
+ */
+export interface DataTableContext<TData extends DataRecord = DataRecord> {
+  // Core managers
+  dataManager: DataTableDataManager<TData>;
+  columnManager: ColumnManager<TData>;
+  actionManager: ActionManager<TData>;
+  stateManager: StateManager<TData>;
+  
+  // Architecture components
+  pluginRegistry: PluginRegistry<TData>;
+  adapter: DataAdapter<TData>;
+  observable: Observable<TData>;
+  
+  // Configuration
+  config: DataTableConfig<TData>;
+  
+  // Utilities
+  utils: DataTableUtils<TData>;
+}
+
+/**
+ * DataTable configuration
+ */
+export interface DataTableConfig<TData extends DataRecord = DataRecord> {
+  // Core settings
+  title?: string;
+  description?: string;
+  className?: string;
+  variant?: 'default' | 'compact' | 'spacious';
+  
+  // Feature flags
+  features: Record<string, FeatureConfig>;
+  
+  // Performance settings
+  enableVirtualization: boolean;
+  enableCaching: boolean;
+  cacheTimeout: number;
+  
+  // Accessibility settings
+  enableKeyboardNavigation: boolean;
+  enableScreenReaderSupport: boolean;
+  
+  // Event handlers
+  onDataChange?: (data: TData[]) => void;
+  onError?: (error: Error) => void;
+}
+
+/**
+ * DataTable utilities
+ */
+export interface DataTableUtils<TData extends DataRecord = DataRecord> {
+  getRowId: (row: TData, index: number) => string;
+  formatValue: (value: any, column: ColumnDef<TData>) => string;
+  validateData: (data: Partial<TData>) => string[] | null;
+  debounce: <T extends (...args: any[]) => any>(func: T, delay: number) => T;
+} 

package/src/components/DataTable/styles.ts

@@ -148,12 +148,33 @@ export const getTableClasses = (options: {
 } = {}) => {
   const { isFixed = false, variant = 'default', className } = options;
   
-  return cn(
-    isFixed ? tableStyles.tableFixed : tableStyles.table,
-    variant === 'compact' && 'text-sm',
-    variant === 'spacious' && 'text-base',
-    className
-  );
+  if (isFixed) {
+    // For fixed tables, use tableFixed and add variant-specific text size
+    return cn(
+      tableStyles.tableFixed,
+      variant === 'compact' && 'text-sm',
+      variant === 'spacious' && 'text-base',
+      className
+    );
+  }
+  
+  // For regular tables, build classes based on variant
+  // tableStyles.table includes 'text-sm', so we need to handle variants carefully
+  if (variant === 'compact') {
+    // Compact uses text-sm (same as default), so just use base table styles
+    return cn(tableStyles.table, className);
+  }
+  
+  if (variant === 'spacious') {
+    // Spacious uses text-base, so replace text-sm with text-base
+    return cn(
+      tableStyles.table.replace('text-sm', 'text-base'),
+      className
+    );
+  }
+  
+  // Default variant
+  return cn(tableStyles.table, className);
 };
 
 /**