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

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

@@ -0,0 +1,482 @@
+import React, { useState, useCallback } from 'react';
+import { 
+  TableProps, 
+  TableRowProps, 
+  SortableColumn, 
+  SortConfig, 
+  PaginationConfig,
+  FilterConfig 
+} from './types';
+
+// Simple icon components
+const ChevronUpIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={`table__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={`table__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 ChevronRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={`table__icon ${className}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+  </svg>
+);
+
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg className={`table__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={`table__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>
+);
+
+// Table Header Component
+const TableHeader: React.FC<{
+  columns: SortableColumn[];
+  sortable?: boolean;
+  sortConfig?: SortConfig;
+  onSort?: (config: SortConfig) => void;
+  selectable?: boolean;
+  onSelectAll?: (checked: boolean) => void;
+  allSelected?: boolean;
+  theme: 'stan-design' | 'enterprise' | 'harvey';
+  size: 'sm' | 'md' | 'lg';
+  variant: 'default' | 'bordered' | 'striped' | 'compact';
+}> = ({ 
+  columns, 
+  sortable, 
+  sortConfig, 
+  onSort, 
+  selectable, 
+  onSelectAll, 
+  allSelected,
+  size
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  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]);
+
+  return (
+    <thead className="table__head">
+      <tr className="table__header-row">
+        {selectable && (
+          <th className={`table__header table__header--select table__header--${size}`}>
+            <input
+              type="checkbox"
+              checked={allSelected}
+              onChange={(e) => onSelectAll?.(e.target.checked)}
+              className="table__select-checkbox"
+            />
+          </th>
+        )}
+        {columns.map((column) => (
+          <th
+            key={column.key}
+            className={`table__header table__header--${size} table__header--${column.align || 'left'} ${sortable && column.sortable ? 'table__header--sortable' : ''} ${sortConfig?.key === column.key ? 'table__header--sorted' : ''}`}
+            style={{ width: column.width }}
+            onClick={() => handleSort(column)}
+          >
+            <div className={`table__header-content table__header-content--${column.align || 'left'}`}>
+              <span>{column.label}</span>
+              {sortable && column.sortable && sortConfig?.key === column.key && (
+                sortConfig.direction === 'asc' ? (
+                  <ChevronUpIcon className="table__sort-icon" />
+                ) : (
+                  <ChevronDownIcon className="table__sort-icon" />
+                )
+              )}
+            </div>
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+};
+
+// Table Row Component
+const TableRow: React.FC<TableRowProps> = ({
+  row,
+  index,
+  columns,
+  selected,
+  expanded,
+  onSelect,
+  onExpand,
+  onClick,
+  size,
+  variant
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  return (
+    <tr
+      className={`table__row table__row--${size} table__row--${variant} ${selected ? 'table__row--selected' : ''} ${variant === 'striped' && index % 2 === 1 ? 'table__row--striped' : ''}`}
+      onClick={onClick}
+    >
+      <td className={`table__cell table__cell--select table__cell--${size}`}>
+        <input
+          type="checkbox"
+          checked={selected}
+          onChange={(e) => onSelect(e.target.checked)}
+          onClick={(e) => e.stopPropagation()}
+          className="table__select-checkbox"
+        />
+      </td>
+      {columns.map((column) => (
+        <td
+          key={column.key}
+          className={`table__cell table__cell--${size} table__cell--${column.align || 'left'}`}
+          style={{ width: column.width }}
+        >
+          {column.key === 'expand' ? (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onExpand();
+              }}
+              className="table__expand-button"
+            >
+              <div className={`table__expand-icon ${expanded ? 'table__expand-icon--expanded' : ''}`}>
+                <ChevronRightIcon className="table__expand-chevron" />
+              </div>
+            </button>
+          ) : (
+            String(row[column.key] || '')
+          )}
+        </td>
+      ))}
+    </tr>
+  );
+};
+
+// Search and Filter Bar Component
+const SearchFilterBar: React.FC<{
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  filters?: FilterConfig[];
+  theme: 'stan-design' | 'enterprise' | 'harvey';
+  size: 'sm' | 'md' | 'lg';
+}> = ({ 
+  searchable, 
+  searchValue, 
+  onSearchChange, 
+  filters, 
+  size
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  if (!searchable && (!filters || filters.length === 0)) return null;
+
+  return (
+    <div className={`table__search-filter-bar table__search-filter-bar--${size}`}>
+      {searchable && (
+        <div className="table__search-container">
+          <div className="table__search-icon">
+            <SearchIcon />
+          </div>
+          <input
+            type="text"
+            placeholder="Search..."
+            value={searchValue || ''}
+            onChange={(e) => onSearchChange?.(e.target.value)}
+            className={`table__search-input table__search-input--${size}`}
+          />
+        </div>
+      )}
+      
+      {filters && filters.length > 0 && (
+        <div className="table__filters">
+          <div className="table__filter-icon">
+            <FilterIcon />
+          </div>
+          <span className={`table__filter-text table__filter-text--${size}`}>
+            Filters: {filters.length}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Pagination Component
+const TablePagination: React.FC<{
+  pagination?: PaginationConfig;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+  theme: 'stan-design' | 'enterprise' | 'harvey';
+  size: 'sm' | 'md' | 'lg';
+}> = ({ pagination, onPageChange, onPageSizeChange, size }) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  if (!pagination) return null;
+
+  const { currentPage, pageSize, totalItems, pageSizeOptions = [10, 20, 50, 100] } = pagination;
+  const totalPages = Math.ceil(totalItems / pageSize);
+  const startItem = (currentPage - 1) * pageSize + 1;
+  const endItem = Math.min(currentPage * pageSize, totalItems);
+
+  return (
+    <div className={`table__pagination table__pagination--${size}`}>
+      <div className={`table__pagination-info table__pagination-info--${size}`}>
+        <span>
+          Showing {startItem}-{endItem} of {totalItems} items
+        </span>
+        <div className="table__pagination-size">
+          <span>Items per page:</span>
+          <select
+            value={pageSize}
+            onChange={(e) => onPageSizeChange?.(Number(e.target.value))}
+            className={`table__pagination-select table__pagination-select--${size}`}
+          >
+            {pageSizeOptions.map(option => (
+              <option key={option} value={option}>{option}</option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="table__pagination-controls">
+        <button
+          onClick={() => onPageChange?.(1)}
+          disabled={currentPage === 1}
+          className={`table__pagination-button table__pagination-button--${size} ${currentPage === 1 ? 'table__pagination-button--disabled' : ''}`}
+        >
+          First
+        </button>
+        <button
+          onClick={() => onPageChange?.(currentPage - 1)}
+          disabled={currentPage === 1}
+          className={`table__pagination-button table__pagination-button--${size} ${currentPage === 1 ? 'table__pagination-button--disabled' : ''}`}
+        >
+          Previous
+        </button>
+        
+        <span className={`table__pagination-status table__pagination-status--${size}`}>
+          Page {currentPage} of {totalPages}
+        </span>
+        
+        <button
+          onClick={() => onPageChange?.(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className={`table__pagination-button table__pagination-button--${size} ${currentPage === totalPages ? 'table__pagination-button--disabled' : ''}`}
+        >
+          Next
+        </button>
+        <button
+          onClick={() => onPageChange?.(totalPages)}
+          disabled={currentPage === totalPages}
+          className={`table__pagination-button table__pagination-button--${size} ${currentPage === totalPages ? 'table__pagination-button--disabled' : ''}`}
+        >
+          Last
+        </button>
+      </div>
+    </div>
+  );
+};
+
+// Main Table Component
+export const Table: React.FC<TableProps> = ({
+  columns,
+  data,
+  sortable = false,
+  selectable = false,
+  onSort,
+  onSelectionChange,
+  onRowClick,
+  onRowExpand,
+  selectedKeys = [],
+  expandedKeys = [],
+  sortConfig,
+  pagination,
+  onPageChange,
+  onPageSizeChange,
+  filters,
+  // onFiltersChange, // TODO: Implement filters change handler
+  searchable = false,
+  searchValue,
+  onSearchChange,
+  rowKey = 'id',
+  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 and expansion
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState<string[]>(selectedKeys || []);
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState<string[]>(expandedKeys || []);
+
+  // Use internal state for uncontrolled behavior, props for controlled
+  const currentSelectedKeys = selectedKeys || internalSelectedKeys;
+  const currentExpandedKeys = expandedKeys || internalExpandedKeys;
+
+  // Get row key function
+  const getRowKey = useCallback((row: Record<string, any>, index: number): string => {
+    if (typeof rowKey === 'function') {
+      return rowKey(row);
+    }
+    return row[rowKey] || `row-${index}`;
+  }, [rowKey]);
+
+  // Handle row selection
+  const handleRowSelect = useCallback((row: Record<string, any>, checked: boolean) => {
+    const key = getRowKey(row, 0);
+    let newSelectedKeys: string[];
+    
+    if (checked) {
+      newSelectedKeys = [...currentSelectedKeys, key];
+    } else {
+      newSelectedKeys = currentSelectedKeys.filter(k => k !== key);
+    }
+    
+    setInternalSelectedKeys(newSelectedKeys);
+    onSelectionChange?.(newSelectedKeys);
+  }, [currentSelectedKeys, onSelectionChange, getRowKey]);
+
+  // Handle select all
+  const handleSelectAll = useCallback((checked: boolean) => {
+    const newSelectedKeys = checked ? data.map((row, index) => getRowKey(row, index)) : [];
+    setInternalSelectedKeys(newSelectedKeys);
+    onSelectionChange?.(newSelectedKeys);
+  }, [data, onSelectionChange, getRowKey]);
+
+  // Handle row expansion
+  const handleRowExpand = useCallback((row: Record<string, any>) => {
+    const key = getRowKey(row, 0);
+    const expanded = currentExpandedKeys.includes(key);
+    const newExpandedKeys = expanded 
+      ? currentExpandedKeys.filter(k => k !== key)
+      : [...currentExpandedKeys, key];
+    
+    setInternalExpandedKeys(newExpandedKeys);
+    onRowExpand?.(row, !expanded);
+  }, [currentExpandedKeys, onRowExpand, getRowKey]);
+
+  // Handle row click
+  const handleRowClick = useCallback((row: Record<string, any>, index: number) => {
+    onRowClick?.(row, index);
+  }, [onRowClick]);
+
+  // Check if all rows are selected
+  const allSelected = data.length > 0 && currentSelectedKeys.length === data.length;
+
+  // Loading state
+  if (loading) {
+    return (
+      <div className="table__loading">
+        <div className={`table__loading-text table__loading-text--${size}`}>
+          Loading...
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="table__error">
+        <div className={`table__error-text table__error-text--${size}`}>
+          Error: {error}
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (data.length === 0) {
+    return (
+      <div className="table__empty">
+        <div className={`table__empty-text table__empty-text--${size}`}>
+          {emptyMessage}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`table__container ${className || ''}`}>
+      <SearchFilterBar
+        searchable={searchable}
+        searchValue={searchValue}
+        onSearchChange={onSearchChange}
+        filters={filters}
+        theme={theme}
+        size={size}
+      />
+      
+      <div className="table__wrapper">
+        <table className={`table__table table__table--${variant} table__table--${size}`}>
+          <TableHeader
+            columns={columns}
+            sortable={sortable}
+            sortConfig={sortConfig}
+            onSort={onSort}
+            selectable={selectable}
+            onSelectAll={handleSelectAll}
+            allSelected={allSelected}
+            theme={theme}
+            size={size}
+            variant={variant}
+          />
+          <tbody className="table__body">
+            {data.map((row, index) => (
+              <TableRow
+                key={getRowKey(row, index)}
+                row={row}
+                index={index}
+                columns={columns}
+                selected={currentSelectedKeys.includes(getRowKey(row, index))}
+                expanded={currentExpandedKeys.includes(getRowKey(row, index))}
+                onSelect={(checked) => handleRowSelect(row, checked)}
+                onExpand={() => handleRowExpand(row)}
+                onClick={() => handleRowClick(row, index)}
+                theme={theme}
+                size={size}
+                variant={variant}
+              />
+            ))}
+          </tbody>
+        </table>
+      </div>
+      
+      <TablePagination
+        pagination={pagination}
+        onPageChange={onPageChange}
+        onPageSizeChange={onPageSizeChange}
+        theme={theme}
+        size={size}
+      />
+    </div>
+  );
+};
+
+export default Table;