@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.3 → 0.1.5

package/src/components/ui/data-display/data-grid.tsx

@@ -0,0 +1,680 @@
+import React, { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { 
+  DataGridProps, 
+  DataGridColumnProps, 
+  SortableColumn, 
+  FilterConfig 
+} from './types';
+
+// Simple icon components
+const ChevronUpIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
+  </svg>
+);
+
+const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+  </svg>
+);
+
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+  </svg>
+);
+
+const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.207A1 1 0 013 6.5V4z" />
+  </svg>
+);
+
+const MenuIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+  </svg>
+);
+
+// const DragIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+//   <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+//     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M8 9l3 3-3 3m5 0h3" />
+//   </svg>
+// ); // TODO: Implement drag functionality
+
+const GroupIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={`data-grid__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+  </svg>
+);
+
+// Resizable Column Header Component
+const DataGridColumn: React.FC<DataGridColumnProps> = ({
+  column,
+  // index, // TODO: Use for column ordering
+  onSort,
+  onResize,
+  sortConfig,
+  // theme,
+  size,
+  resizable
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+  
+  const [isResizing, setIsResizing] = useState(false);
+  const [startX, setStartX] = useState(0);
+  const [startWidth, setStartWidth] = useState(0);
+  const headerRef = useRef<HTMLTableHeaderCellElement>(null);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!resizable) return;
+    
+    e.preventDefault();
+    setIsResizing(true);
+    setStartX(e.clientX);
+    setStartWidth(headerRef.current?.offsetWidth || 0);
+  }, [resizable]);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (!isResizing) return;
+    
+    const diff = e.clientX - startX;
+    const newWidth = Math.max(50, startWidth + diff); // Minimum width of 50px
+    onResize(newWidth);
+  }, [isResizing, startX, startWidth, onResize]);
+
+  const handleMouseUp = useCallback(() => {
+    setIsResizing(false);
+  }, []);
+
+  useEffect(() => {
+    if (isResizing) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isResizing, handleMouseMove, handleMouseUp]);
+
+
+  const isSorted = sortConfig?.key === column.key;
+
+  return (
+    <th
+      ref={headerRef}
+      className={`data-grid__header data-grid__header--${size} data-grid__header--${column.align || 'left'} ${isSorted ? 'data-grid__header--sorted' : ''}`}
+      style={{
+        width: column.width,
+      }}
+      onClick={onSort}
+    >
+      <div className={`data-grid__header-content data-grid__header-content--${column.align || 'left'}`}>
+        <span>{column.label}</span>
+        {column.sortable && isSorted && (
+          sortConfig?.direction === 'asc' ? (
+            <ChevronUpIcon className="data-grid__sort-icon" />
+          ) : (
+            <ChevronDownIcon className="data-grid__sort-icon" />
+          )
+        )}
+      </div>
+      
+      {resizable && (
+        <div
+          className={`data-grid__resize-handle ${isResizing ? 'data-grid__resize-handle--active' : ''}`}
+          onMouseDown={handleMouseDown}
+        />
+      )}
+    </th>
+  );
+};
+
+// Column Management Panel
+const ColumnPanel: React.FC<{
+  columns: SortableColumn[];
+  groups?: string[];
+  onGroupChange?: (groups: string[]) => void;
+  onColumnToggle?: (columnKey: string, visible: boolean) => void;
+  theme: 'stan-design' | 'enterprise' | 'harvey';
+  size: 'sm' | 'md' | 'lg';
+  onClose: () => void;
+}> = ({ columns, groups = [], onGroupChange, onColumnToggle, size, onClose }) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  const handleGroupToggle = (columnKey: string) => {
+    if (!onGroupChange) return;
+    
+    const newGroups = groups.includes(columnKey)
+      ? groups.filter(g => g !== columnKey)
+      : [...groups, columnKey];
+    
+    onGroupChange(newGroups);
+  };
+
+  return (
+    <div className="data-grid__column-panel">
+      <div className="data-grid__column-panel-header">
+        <h3 className={`data-grid__column-panel-title data-grid__column-panel-title--${size}`}>
+          Column Settings
+        </h3>
+        <button
+          onClick={onClose}
+          className="data-grid__column-panel-close"
+        >
+          ×
+        </button>
+      </div>
+
+      <div className="data-grid__column-panel-section">
+        <h4 className={`data-grid__column-panel-subtitle data-grid__column-panel-subtitle--${size}`}>
+          Group By
+        </h4>
+        {columns.map(column => (
+          <label
+            key={`group-${column.key}`}
+            className="data-grid__column-panel-item"
+          >
+            <input
+              type="checkbox"
+              checked={groups.includes(column.key)}
+              onChange={() => handleGroupToggle(column.key)}
+              className="data-grid__column-panel-checkbox"
+            />
+            <span className={`data-grid__column-panel-label data-grid__column-panel-label--${size}`}>
+              {column.label}
+            </span>
+          </label>
+        ))}
+      </div>
+
+      <div className="data-grid__column-panel-section">
+        <h4 className={`data-grid__column-panel-subtitle data-grid__column-panel-subtitle--${size}`}>
+          Visible Columns
+        </h4>
+        {columns.map(column => (
+          <label
+            key={`visible-${column.key}`}
+            className="data-grid__column-panel-item"
+          >
+            <input
+              type="checkbox"
+              checked={true} // All columns are visible by default for this demo
+              onChange={(e) => onColumnToggle?.(column.key, e.target.checked)}
+              className="data-grid__column-panel-checkbox"
+            />
+            <span className={`data-grid__column-panel-label data-grid__column-panel-label--${size}`}>
+              {column.label}
+            </span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// Advanced Search and Filter Bar
+const DataGridToolbar: React.FC<{
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  filterable?: boolean;
+  filters?: FilterConfig[];
+  onFiltersChange?: (filters: FilterConfig[]) => void;
+  groupable?: boolean;
+  groups?: string[];
+  onGroupChange?: (groups: string[]) => void;
+  columns: SortableColumn[];
+  theme: 'stan-design' | 'enterprise' | 'harvey';
+  size: 'sm' | 'md' | 'lg';
+}> = ({ 
+  searchable, 
+  searchValue, 
+  onSearchChange, 
+  filterable,
+  filters = [],
+  onFiltersChange,
+  groupable,
+  groups = [],
+  onGroupChange,
+  columns,
+  theme,
+  size
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+  
+  const [showColumnPanel, setShowColumnPanel] = useState(false);
+  const [filterColumn, setFilterColumn] = useState('');
+  const [filterValue, setFilterValue] = useState('');
+
+  const addFilter = () => {
+    if (!filterColumn || !filterValue || !onFiltersChange) return;
+    
+    const newFilter: FilterConfig = {
+      key: filterColumn,
+      value: filterValue,
+      operator: 'contains'
+    };
+    
+    onFiltersChange([...filters, newFilter]);
+    setFilterColumn('');
+    setFilterValue('');
+  };
+
+  const removeFilter = (index: number) => {
+    if (!onFiltersChange) return;
+    const newFilters = filters.filter((_, i) => i !== index);
+    onFiltersChange(newFilters);
+  };
+
+  return (
+    <div className={`data-grid__toolbar data-grid__toolbar--${size}`}>
+      {/* Top Row - Search and Actions */}
+      <div className="data-grid__toolbar-row">
+        {searchable && (
+          <div className="data-grid__search-container">
+            <div className="data-grid__search-icon">
+              <SearchIcon />
+            </div>
+            <input
+              type="text"
+              placeholder="Search..."
+              value={searchValue || ''}
+              onChange={(e) => onSearchChange?.(e.target.value)}
+              className={`data-grid__search-input data-grid__search-input--${size}`}
+            />
+          </div>
+        )}
+
+        <div className="data-grid__toolbar-actions">
+          {filterable && (
+            <button
+              className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
+              onClick={() => {/* TODO: Open filter dialog */}}
+            >
+              <FilterIcon className="data-grid__toolbar-icon" />
+              <span>Filter ({filters.length})</span>
+            </button>
+          )}
+          
+          {groupable && (
+            <button
+              className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
+              onClick={() => {/* TODO: Open group dialog */}}
+            >
+              <GroupIcon className="data-grid__toolbar-icon" />
+              <span>Group ({groups.length})</span>
+            </button>
+          )}
+
+          <div className="data-grid__toolbar-dropdown">
+            <button
+              className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
+              onClick={() => setShowColumnPanel(!showColumnPanel)}
+            >
+              <MenuIcon className="data-grid__toolbar-icon" />
+              <span>Columns</span>
+            </button>
+            
+            {showColumnPanel && (
+              <ColumnPanel
+                columns={columns}
+                groups={groups}
+                onGroupChange={onGroupChange}
+                theme={theme}
+                size={size}
+                onClose={() => setShowColumnPanel(false)}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Active Filters */}
+      {filters.length > 0 && (
+        <div className="data-grid__active-filters">
+          <span className={`data-grid__active-filters-label data-grid__active-filters-label--${size}`}>
+            Active Filters:
+          </span>
+          {filters.map((filter, index) => (
+            <div
+              key={index}
+              className={`data-grid__filter-tag data-grid__filter-tag--${size}`}
+            >
+              <span>{filter.key}: {String(filter.value)}</span>
+              <button
+                onClick={() => removeFilter(index)}
+                className="data-grid__filter-tag-remove"
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Quick Filter Add */}
+      {filterable && (
+        <div className="data-grid__filter-add">
+          <select
+            value={filterColumn}
+            onChange={(e) => setFilterColumn(e.target.value)}
+            className={`data-grid__filter-select data-grid__filter-select--${size}`}
+          >
+            <option value="">Select column...</option>
+            {columns.map(column => (
+              <option key={column.key} value={column.key}>
+                {column.label}
+              </option>
+            ))}
+          </select>
+          
+          <input
+            type="text"
+            placeholder="Filter value..."
+            value={filterValue}
+            onChange={(e) => setFilterValue(e.target.value)}
+            className={`data-grid__filter-input data-grid__filter-input--${size}`}
+          />
+          
+          <button
+            onClick={addFilter}
+            disabled={!filterColumn || !filterValue}
+            className={`data-grid__filter-add-button data-grid__filter-add-button--${size} ${(!filterColumn || !filterValue) ? 'data-grid__filter-add-button--disabled' : ''}`}
+          >
+            Add Filter
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Main DataGrid Component
+export const DataGrid: React.FC<DataGridProps> = ({
+  columns,
+  data,
+  sortable = true,
+  filterable = true,
+  groupable = true,
+  resizable = true,
+  // reorderable = false, // TODO: Implement column reordering
+  onSort,
+  onFiltersChange,
+  onGroupChange,
+  onColumnResize,
+  // onColumnReorder, // TODO: Implement column reordering
+  sortConfig,
+  filters = [],
+  groups = [],
+  columnWidths = {},
+  // columnOrder = [], // TODO: Implement column ordering
+  pagination,
+  onPageChange,
+  // onPageSizeChange, // TODO: Implement page size change
+  searchable = true,
+  searchValue,
+  onSearchChange,
+  rowKey = 'id',
+  selectable = false,
+  onSelectionChange,
+  selectedKeys = [],
+  loading = false,
+  error = null,
+  emptyMessage = 'No data available',
+  className = '',
+  theme = 'stan-design',
+  size = 'md',
+  variant = 'default'
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  // Internal state for selection
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>(selectedKeys);
+
+  // Update internal state when props change
+  React.useEffect(() => {
+    setInternalSelectedKeys(selectedKeys);
+  }, [selectedKeys]);
+
+  // Enhanced columns with widths
+  const enhancedColumns = useMemo(() => {
+    return columns.map(column => ({
+      ...column,
+      width: columnWidths[column.key] || column.width || 150
+    }));
+  }, [columns, columnWidths]);
+
+  // Get row key function
+  const getRowKey = (row: Record<string, any>, index: number): string => {
+    if (typeof rowKey === 'function') {
+      return rowKey(row);
+    }
+    return row[rowKey] || `row-${index}`;
+  };
+
+  // Handle column resize
+  const handleColumnResize = useCallback((columnKey: string, newWidth: number) => {
+    onColumnResize?.(columnKey, newWidth);
+  }, [onColumnResize]);
+
+  // Handle sorting
+  const handleSort = useCallback((column: SortableColumn) => {
+    if (!sortable || !onSort || !column.sortable) return;
+    
+    const newDirection = sortConfig?.key === column.key && sortConfig.direction === 'asc' ? 'desc' : 'asc';
+    onSort({ key: column.key, direction: newDirection });
+  }, [sortable, onSort, sortConfig]);
+
+  // Handle row selection
+  const handleRowSelect = useCallback((row: Record<string, any>, checked: boolean) => {
+    const key = typeof rowKey === 'function' ? rowKey(row) : row[rowKey] || `row-0`;
+    let newSelectedKeys: string[];
+
+    if (checked) {
+      newSelectedKeys = [...internalSelectedKeys, key];
+    } else {
+      newSelectedKeys = internalSelectedKeys.filter(k => k !== key);
+    }
+
+    setInternalSelectedKeys(newSelectedKeys);
+    onSelectionChange?.(newSelectedKeys);
+  }, [internalSelectedKeys, onSelectionChange, rowKey]);
+
+  // Handle select all
+  const handleSelectAll = useCallback((checked: boolean) => {
+    const newSelectedKeys = checked ? data.map((row, index) => {
+      if (typeof rowKey === 'function') {
+        return rowKey(row);
+      }
+      return row[rowKey] || `row-${index}`;
+    }) : [];
+    setInternalSelectedKeys(newSelectedKeys);
+    onSelectionChange?.(newSelectedKeys);
+  }, [data, onSelectionChange, rowKey]);
+
+  // Check if all rows are selected
+  const allSelected = data.length > 0 && internalSelectedKeys.length === data.length;
+
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className={`data-grid__container ${className || ''}`}>
+        <div className="data-grid__loading">
+          <div className={`data-grid__loading-text data-grid__loading-text--${size}`}>
+            Loading...
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className={`data-grid__container ${className || ''}`}>
+        <div className="data-grid__error">
+          <div className={`data-grid__error-text data-grid__error-text--${size}`}>
+            Error: {error}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (data.length === 0) {
+    return (
+      <div className={`data-grid__container ${className || ''}`}>
+        <DataGridToolbar
+          searchable={searchable}
+          searchValue={searchValue}
+          onSearchChange={onSearchChange}
+          filterable={filterable}
+          filters={filters}
+          onFiltersChange={onFiltersChange}
+          groupable={groupable}
+          groups={groups}
+          onGroupChange={onGroupChange}
+          columns={enhancedColumns}
+          theme={theme}
+          size={size}
+        />
+        <div className="data-grid__empty">
+          <div className={`data-grid__empty-text data-grid__empty-text--${size}`}>
+            {emptyMessage}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`data-grid__container ${className || ''}`}>
+      <DataGridToolbar
+        searchable={searchable}
+        searchValue={searchValue}
+        onSearchChange={onSearchChange}
+        filterable={filterable}
+        filters={filters}
+        onFiltersChange={onFiltersChange}
+        groupable={groupable}
+        groups={groups}
+        onGroupChange={onGroupChange}
+        columns={enhancedColumns}
+        theme={theme}
+        size={size}
+      />
+      
+      <div className="data-grid__table-wrapper">
+        <table className={`data-grid__table data-grid__table--${variant} data-grid__table--${size}`}>
+          <thead>
+            <tr>
+              {selectable && (
+                <th className={`data-grid__select-header data-grid__select-header--${size}`}>
+                  <input
+                    type="checkbox"
+                    checked={allSelected}
+                    onChange={(e) => handleSelectAll(e.target.checked)}
+                    className="data-grid__select-checkbox"
+                  />
+                </th>
+              )}
+              {enhancedColumns.map((column, index) => (
+                <DataGridColumn
+                  key={column.key}
+                  column={column}
+                  index={index}
+                  onSort={() => handleSort(column)}
+                  onResize={(width) => handleColumnResize(column.key, width)}
+                  sortConfig={sortConfig}
+                  theme={theme}
+                  size={size}
+                  resizable={resizable}
+                />
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row, index) => {
+              const key = getRowKey(row, index);
+              const isSelected = internalSelectedKeys.includes(key);
+              
+              return (
+                <tr
+                  key={key}
+                  className={`data-grid__row data-grid__row--${size} ${isSelected ? 'data-grid__row--selected' : ''} ${variant === 'striped' && index % 2 === 1 ? 'data-grid__row--striped' : ''}`}
+                >
+                  {selectable && (
+                    <td className={`data-grid__select-cell data-grid__select-cell--${size}`}>
+                      <input
+                        type="checkbox"
+                        checked={isSelected}
+                        onChange={(e) => handleRowSelect(row, e.target.checked)}
+                        onClick={(e) => e.stopPropagation()}
+                        className="data-grid__select-checkbox"
+                      />
+                    </td>
+                  )}
+                  {enhancedColumns.map((column) => (
+                    <td
+                      key={column.key}
+                      className={`data-grid__cell data-grid__cell--${size} data-grid__cell--${column.align || 'left'}`}
+                      style={{ width: column.width }}
+                    >
+                      {String(row[column.key] || '')}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+      
+      {pagination && (
+        <div className={`data-grid__pagination data-grid__pagination--${size}`}>
+          <div className={`data-grid__pagination-info data-grid__pagination-info--${size}`}>
+            Showing {((pagination.currentPage - 1) * pagination.pageSize) + 1}-{Math.min(pagination.currentPage * pagination.pageSize, pagination.totalItems)} of {pagination.totalItems} items
+          </div>
+          
+          <div className="data-grid__pagination-controls">
+            <button
+              onClick={() => onPageChange?.(pagination.currentPage - 1)}
+              disabled={pagination.currentPage === 1}
+              className={`data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage === 1 ? 'data-grid__pagination-button--disabled' : ''}`}
+            >
+              Previous
+            </button>
+            
+            <span className="data-grid__pagination-status">
+              Page {pagination.currentPage} of {Math.ceil(pagination.totalItems / pagination.pageSize)}
+            </span>
+            
+            <button
+              onClick={() => onPageChange?.(pagination.currentPage + 1)}
+              disabled={pagination.currentPage >= Math.ceil(pagination.totalItems / pagination.pageSize)}
+              className={`data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage >= Math.ceil(pagination.totalItems / pagination.pageSize) ? 'data-grid__pagination-button--disabled' : ''}`}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DataGrid;