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

package/dist/components/ui/data-display/list.js

@@ -7,7 +7,7 @@ import {
 } from './types';
 
 // Simple icon components (inline SVG)
-const ChevronRightIcon}> = ({ className = '' }) => (
+const ChevronRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -18,7 +18,7 @@ const ChevronRightIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const SearchIcon}> = ({ className = '' }) => (
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -29,7 +29,7 @@ const SearchIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const FilterIcon}> = ({ className = '' }) => (
+const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -40,7 +40,7 @@ const FilterIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const DotsIcon}> = ({ className = '' }) => (
+const DotsIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -51,7 +51,7 @@ const DotsIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const CheckIcon}> = ({ className = '' }) => (
+const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`list__icon ${className}`}
     fill="none"
@@ -63,14 +63,15 @@ const CheckIcon}> = ({ className = '' }) => (
 );
 
 // List Search and Filter Bar
-const ListSearchFilterBar;
-  searchValue;
-  onSearchChange) => void;
-  filterable;
-  filters];
-  onFiltersChange?]) => void;
-  theme;
-  size;
+const ListSearchFilterBar: React.FC<{
+  searchable: boolean;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  filterable: boolean;
+  filters: ListFilter[];
+  onFiltersChange?: (filters: ListFilter[]) => void;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
 }> = ({
   searchable,
   searchValue,
@@ -84,9 +85,10 @@ const ListSearchFilterBar;
   // const colors = themeConfig?.colors || getDefaultColors();
 
   // const sizeClasses = {
-  //   sm,
-  //   md,
-  //   lg};
+  //   sm: 'h-8 text-sm px-3',
+  //   md: 'h-10 text-base px-4',
+  //   lg: 'h-12 text-lg px-5'
+  // };
 
   if (!searchable && !filterable) return null;
 
@@ -123,10 +125,11 @@ const ListSearchFilterBar;
 };
 
 // List Item Action Component
-const ListItemActions];
-  item;
-  theme;
-  size;
+const ListItemActions: React.FC<{
+  actions: ListAction[];
+  item: ListItem;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
 }> = ({ actions, item, size }) => {
   // const { getTheme } = useTheme();
   // const themeConfig = getTheme(theme);
@@ -135,9 +138,10 @@ const ListItemActions];
   const [showMenu, setShowMenu] = useState(false);
 
   // const sizeClasses = {
-  //   sm,
-  //   md,
-  //   lg};
+  //   sm: 'p-1',
+  //   md: 'p-1.5',
+  //   lg: 'p-2'
+  // };
 
   if (actions.length === 0) return null;
 
@@ -150,7 +154,7 @@ const ListItemActions];
           e.stopPropagation();
           action.onClick(item);
         }}
-        className={`list__action-button list__action-button--${size} ${action.variant === 'danger' ? 'list__action-button--danger' }`}
+        className={`list__action-button list__action-button--${size} ${action.variant === 'danger' ? 'list__action-button--danger' : ''}`}
         title={action.label}
       >
         {action.icon || <DotsIcon className="list__action-icon" />}
@@ -189,7 +193,7 @@ const ListItemActions];
                   action.onClick(item);
                   setShowMenu(false);
                 }}
-                className={`list__action-menu-item ${action.variant === 'danger' ? 'list__action-menu-item--danger' }`}
+                className={`list__action-menu-item ${action.variant === 'danger' ? 'list__action-menu-item--danger' : ''}`}
               >
                 {action.icon && <span className="list__action-menu-icon">{action.icon}</span>}
                 {action.label}
@@ -203,17 +207,18 @@ const ListItemActions];
 };
 
 // Individual List Item Component
-const ListItemComponent;
-  index;
-  selectable;
-  selected;
-  onSelectionChange?) => void;
-  onClick?, index) => void;
-  actions];
-  showDivider;
-  theme;
-  size;
-  variant;
+const ListItemComponent: React.FC<{
+  item: ListItem;
+  index: number;
+  selectable: boolean;
+  selected: boolean;
+  onSelectionChange?: (selected: boolean) => void;
+  onClick?: (item: ListItem, index: number) => void;
+  actions: ListAction[];
+  showDivider: boolean;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+  variant: 'default' | 'bordered' | 'striped';
 }> = ({
   item,
   index,
@@ -232,8 +237,8 @@ const ListItemComponent;
 
   return (
     <div
-      className={`list__item list__item--${size} list__item--${variant} ${isClickable ? 'list__item--clickable' } ${index % 2 === 1 && variant === 'striped' ? 'list__item--striped' }`}
-      onClick={isClickable ? () => onClick(item, index) }
+      className={`list__item list__item--${size} list__item--${variant} ${isClickable ? 'list__item--clickable' : ''} ${index % 2 === 1 && variant === 'striped' ? 'list__item--striped' : ''}`}
+      onClick={isClickable ? () => onClick(item, index) : undefined}
     >
       {/* Selection Checkbox */}
       {selectable && (
@@ -243,7 +248,7 @@ const ListItemComponent;
         >
           <button
             onClick={() => onSelectionChange?.(!selected)}
-            className={`list__item-checkbox ${selected ? 'list__item-checkbox--selected' }`}
+            className={`list__item-checkbox ${selected ? 'list__item-checkbox--selected' : ''}`}
           >
             {selected && <CheckIcon className="list__item-checkbox-icon" />}
           </button>
@@ -259,7 +264,8 @@ const ListItemComponent;
               alt={item.title}
               className="list__item-avatar-image"
             />
-          ) ="list__item-avatar-placeholder">
+          ) : (
+            <div className="list__item-avatar-placeholder">
               {item.avatar}
             </div>
           )}
@@ -334,7 +340,7 @@ const ListItemComponent;
 };
 
 // Main List Component
-export const List= ({
+export const List: React.FC<ListProps> = ({
   items,
   selectable = false,
   selectedKeys = [],
@@ -346,7 +352,8 @@ export const List= ({
   onSearchChange,
   filterable = false,
   filters = [],
-  // onFiltersChange, // TODO= false,
+  // onFiltersChange, // TODO: Implement filter functionality
+  loading = false,
   error = null,
   emptyMessage = 'No items found',
   showDividers = true,
@@ -371,12 +378,12 @@ export const List= ({
     );
   }, [items, searchable, searchValue]);
 
-  const handleSelectionChange = useCallback((itemKey, selected) => {
+  const handleSelectionChange = useCallback((itemKey: string, selected: boolean) => {
     if (!onSelectionChange) return;
 
     const newSelectedKeys = selected 
       ? [...selectedKeys, itemKey]
-      => key !== itemKey);
+      : selectedKeys.filter(key => key !== itemKey);
     
     onSelectionChange(newSelectedKeys);
   }, [selectedKeys, onSelectionChange]);
@@ -417,7 +424,8 @@ export const List= ({
           <div className="list__empty">
             {emptyMessage}
           </div>
-        ) , index) => {
+        ) : (
+          filteredItems.map((item, index) => {
             const itemKey = item.key || item.id || index.toString();
             const isSelected = selectedKeys.includes(itemKey);
             const shouldShowDivider = showDividers && index < filteredItems.length - 1;

package/dist/components/ui/data-display/table.esm.js

@@ -9,47 +9,48 @@ import {
 } from './types';
 
 // Simple icon components
-const ChevronUpIcon}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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];
-  sortable?;
-  sortConfig?;
-  onSort?) => void;
-  selectable?;
-  onSelectAll?) => void;
-  allSelected?;
-  theme;
-  size;
-  variant;
+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, 
@@ -64,11 +65,11 @@ const TableHeader];
   // const themeConfig = getTheme(theme);
   // const colors = themeConfig?.colors || getDefaultColors();
 
-  const handleSort = useCallback((column) => {
+  const handleSort = useCallback((column: SortableColumn) => {
     if (!sortable || !onSort || !column.sortable) return;
     
-    const newDirection = sortConfig?.key === column.key && sortConfig.direction === 'asc' ? 'desc' ;
-    onSort({ key, direction});
+    const newDirection = sortConfig?.key === column.key && sortConfig.direction === 'asc' ? 'desc' : 'asc';
+    onSort({ key: column.key, direction: newDirection });
   }, [sortable, onSort, sortConfig]);
 
   return (
@@ -87,8 +88,8 @@ const TableHeader];
         {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}}
+            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'}`}>
@@ -96,7 +97,8 @@ const TableHeader];
               {sortable && column.sortable && sortConfig?.key === column.key && (
                 sortConfig.direction === 'asc' ? (
                   <ChevronUpIcon className="table__sort-icon" />
-                ) ="table__sort-icon" />
+                ) : (
+                  <ChevronDownIcon className="table__sort-icon" />
                 )
               )}
             </div>
@@ -108,7 +110,7 @@ const TableHeader];
 };
 
 // Table Row Component
-const TableRow= ({
+const TableRow: React.FC<TableRowProps> = ({
   row,
   index,
   columns,
@@ -126,7 +128,7 @@ const TableRow= ({
 
   return (
     <tr
-      className={`table__row table__row--${size} table__row--${variant} ${selected ? 'table__row--selected' } ${variant === 'striped' && index % 2 === 1 ? 'table__row--striped' }`}
+      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}`}>
@@ -142,7 +144,7 @@ const TableRow= ({
         <td
           key={column.key}
           className={`table__cell table__cell--${size} table__cell--${column.align || 'left'}`}
-          style={{ width}}
+          style={{ width: column.width }}
         >
           {column.key === 'expand' ? (
             <button
@@ -152,11 +154,12 @@ const TableRow= ({
               }}
               className="table__expand-button"
             >
-              <div className={`table__expand-icon ${expanded ? 'table__expand-icon--expanded' }`}>
+              <div className={`table__expand-icon ${expanded ? 'table__expand-icon--expanded' : ''}`}>
                 <ChevronRightIcon className="table__expand-chevron" />
               </div>
             </button>
-          ) ] || '')
+          ) : (
+            String(row[column.key] || '')
           )}
         </td>
       ))}
@@ -165,12 +168,13 @@ const TableRow= ({
 };
 
 // Search and Filter Bar Component
-const SearchFilterBar;
-  searchValue?;
-  onSearchChange?) => void;
-  filters?];
-  theme;
-  size;
+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, 
@@ -207,7 +211,7 @@ const SearchFilterBar;
             <FilterIcon />
           </div>
           <span className={`table__filter-text table__filter-text--${size}`}>
-            Filters}
+            Filters: {filters.length}
           </span>
         </div>
       )}
@@ -216,11 +220,12 @@ const SearchFilterBar;
 };
 
 // Pagination Component
-const TablePagination;
-  onPageChange?) => void;
-  onPageSizeChange?) => void;
-  theme;
-  size;
+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);
@@ -240,7 +245,9 @@ const TablePagination;
           Showing {startItem}-{endItem} of {totalItems} items
         </span>
         <div className="table__pagination-size">
-          <span>Items per page={pageSize}
+          <span>Items per page:</span>
+          <select
+            value={pageSize}
             onChange={(e) => onPageSizeChange?.(Number(e.target.value))}
             className={`table__pagination-select table__pagination-select--${size}`}
           >
@@ -255,14 +262,14 @@ const TablePagination;
         <button
           onClick={() => onPageChange?.(1)}
           disabled={currentPage === 1}
-          className={`table__pagination-button table__pagination-button--${size} ${currentPage === 1 ? 'table__pagination-button--disabled' }`}
+          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' }`}
+          className={`table__pagination-button table__pagination-button--${size} ${currentPage === 1 ? 'table__pagination-button--disabled' : ''}`}
         >
           Previous
         </button>
@@ -274,14 +281,14 @@ const TablePagination;
         <button
           onClick={() => onPageChange?.(currentPage + 1)}
           disabled={currentPage === totalPages}
-          className={`table__pagination-button table__pagination-button--${size} ${currentPage === totalPages ? 'table__pagination-button--disabled' }`}
+          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' }`}
+          className={`table__pagination-button table__pagination-button--${size} ${currentPage === totalPages ? 'table__pagination-button--disabled' : ''}`}
         >
           Last
         </button>
@@ -291,7 +298,7 @@ const TablePagination;
 };
 
 // Main Table Component
-export const Table= ({
+export const Table: React.FC<TableProps> = ({
   columns,
   data,
   sortable = false,
@@ -307,7 +314,8 @@ export const Table= ({
   onPageChange,
   onPageSizeChange,
   filters,
-  // onFiltersChange, // TODO= false,
+  // onFiltersChange, // TODO: Implement filters change handler
+  searchable = false,
   searchValue,
   onSearchChange,
   rowKey = 'id',
@@ -332,7 +340,7 @@ export const Table= ({
   const currentExpandedKeys = expandedKeys || internalExpandedKeys;
 
   // Get row key function
-  const getRowKey = useCallback((row, any>, index)=> {
+  const getRowKey = useCallback((row: Record<string, any>, index: number): string => {
     if (typeof rowKey === 'function') {
       return rowKey(row);
     }
@@ -340,9 +348,9 @@ export const Table= ({
   }, [rowKey]);
 
   // Handle row selection
-  const handleRowSelect = useCallback((row, any>, checked) => {
+  const handleRowSelect = useCallback((row: Record<string, any>, checked: boolean) => {
     const key = getRowKey(row, 0);
-    let newSelectedKeys];
+    let newSelectedKeys: string[];
     
     if (checked) {
       newSelectedKeys = [...currentSelectedKeys, key];
@@ -355,26 +363,26 @@ export const Table= ({
   }, [currentSelectedKeys, onSelectionChange, getRowKey]);
 
   // Handle select all
-  const handleSelectAll = useCallback((checked) => {
-    const newSelectedKeys = checked ? data.map((row, index) => getRowKey(row, index)) ];
+  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, any>) => {
+  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)
-      , key];
+      : [...currentExpandedKeys, key];
     
     setInternalExpandedKeys(newExpandedKeys);
     onRowExpand?.(row, !expanded);
   }, [currentExpandedKeys, onRowExpand, getRowKey]);
 
   // Handle row click
-  const handleRowClick = useCallback((row, any>, index) => {
+  const handleRowClick = useCallback((row: Record<string, any>, index: number) => {
     onRowClick?.(row, index);
   }, [onRowClick]);
 
@@ -397,7 +405,7 @@ export const Table= ({
     return (
       <div className="table__error">
         <div className={`table__error-text table__error-text--${size}`}>
-          Error}
+          Error: {error}
         </div>
       </div>
     );