@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.16

package/dist/components/ui/data-display/table.d.ts

@@ -1,472 +0,0 @@
-// 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;