@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.8 → 0.2.10

package/dist/components/ui/data-display/table.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>
     );

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

@@ -7,7 +7,7 @@ import {
 } from './types';
 
 // Simple icon components (inline SVG)
-const CalendarIcon}> = ({ className = '' }) => (
+const CalendarIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`timeline__icon ${className}`}
     fill="none"
@@ -18,7 +18,7 @@ const CalendarIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const ClockIcon}> = ({ className = '' }) => (
+const ClockIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`timeline__icon ${className}`}
     fill="none"
@@ -29,7 +29,7 @@ const ClockIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const UserIcon}> = ({ className = '' }) => (
+const UserIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`timeline__icon ${className}`}
     fill="none"
@@ -40,7 +40,7 @@ const UserIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const BellIcon}> = ({ className = '' }) => (
+const BellIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`timeline__icon ${className}`}
     fill="none"
@@ -51,7 +51,7 @@ const BellIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const SearchIcon}> = ({ className = '' }) => (
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`timeline__icon ${className}`}
     fill="none"
@@ -62,7 +62,7 @@ const SearchIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const FilterIcon}> = ({ className = '' }) => (
+const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`timeline__icon ${className}`}
     fill="none"
@@ -73,7 +73,7 @@ const FilterIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const DotsIcon}> = ({ className = '' }) => (
+const DotsIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`timeline__icon ${className}`}
     fill="none"
@@ -85,12 +85,13 @@ const DotsIcon}> = ({ className = '' }) => (
 );
 
 // Timeline Search and Filter Bar
-const TimelineSearchFilterBar;
-  searchValue;
-  onSearchChange) => void;
-  filterable;
-  theme;
-  size;
+const TimelineSearchFilterBar: React.FC<{
+  searchable: boolean;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  filterable: boolean;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
 }> = ({
   searchable,
   searchValue,
@@ -129,10 +130,11 @@ const TimelineSearchFilterBar;
 };
 
 // Timeline Item Actions Component
-const TimelineItemActions];
-  item;
-  theme;
-  size;
+const TimelineItemActions: React.FC<{
+  actions: TimelineAction[];
+  item: TimelineItem;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
 }> = ({ actions, item, size }) => {
   const [showMenu, setShowMenu] = useState(false);
 
@@ -147,7 +149,7 @@ const TimelineItemActions];
           e.stopPropagation();
           action.onClick(item);
         }}
-        className={`timeline__action-button timeline__action-button--${size} ${action.variant === 'danger' ? 'timeline__action-button--danger' }`}
+        className={`timeline__action-button timeline__action-button--${size} ${action.variant === 'danger' ? 'timeline__action-button--danger' : ''}`}
         title={action.label}
       >
         {action.icon || <DotsIcon className="timeline__action-icon" />}
@@ -186,7 +188,7 @@ const TimelineItemActions];
                   action.onClick(item);
                   setShowMenu(false);
                 }}
-                className={`timeline__action-menu-item ${action.variant === 'danger' ? 'timeline__action-menu-item--danger' }`}
+                className={`timeline__action-menu-item ${action.variant === 'danger' ? 'timeline__action-menu-item--danger' : ''}`}
               >
                 {action.icon && <span className="timeline__action-menu-icon">{action.icon}</span>}
                 {action.label}
@@ -200,7 +202,7 @@ const TimelineItemActions];
 };
 
 // Individual Timeline Item Component
-const TimelineItemComponent= ({
+const TimelineItemComponent: React.FC<TimelineItemProps> = ({
   item,
   position,
   isLast,
@@ -224,15 +226,15 @@ const TimelineItemComponent= ({
     }
     
     switch (item.type) {
-      case 'event'="timeline__dot-icon" />;
-      case 'task'="timeline__dot-icon" />;
-      case 'user'="timeline__dot-icon" />;
-      case 'system'="timeline__dot-icon" />;
-      default;
+      case 'event': return <CalendarIcon className="timeline__dot-icon" />;
+      case 'task': return <ClockIcon className="timeline__dot-icon" />;
+      case 'user': return <UserIcon className="timeline__dot-icon" />;
+      case 'system': return <BellIcon className="timeline__dot-icon" />;
+      default: return null;
     }
   };
 
-  const formatTimestamp = (timestamp) => {
+  const formatTimestamp = (timestamp: string) => {
     const date = new Date(timestamp);
     return date.toLocaleString();
   };
@@ -241,8 +243,8 @@ const TimelineItemComponent= ({
     <div className={`timeline__item timeline__item--${mode} timeline__item--${position} timeline__item--${size}`}>
       {/* Content */}
       <div
-        className={`timeline__item-content timeline__item-content--${size} timeline__item-content--${variant} ${isClickable ? 'timeline__item-content--clickable' }`}
-        onClick={isClickable ? () => onClick(item) }
+        className={`timeline__item-content timeline__item-content--${size} timeline__item-content--${variant} ${isClickable ? 'timeline__item-content--clickable' : ''}`}
+        onClick={isClickable ? () => onClick(item) : undefined}
       >
         <div className={`timeline__item-content-wrapper timeline__item-content-wrapper--${position}`}>
           {/* Header */}
@@ -325,7 +327,7 @@ const TimelineItemComponent= ({
 };
 
 // Main Timeline Component
-export const Timeline= ({
+export const Timeline: React.FC<TimelineProps> = ({
   items,
   mode = 'left',
   reverse = false,
@@ -335,7 +337,9 @@ export const Timeline= ({
   searchValue = '',
   onSearchChange,
   filterable = false,
-  // filters = [], // TODO, // TODO= true,
+  // filters = [], // TODO: Implement filter functionality
+  // onFiltersChange, // TODO: Implement filter functionality
+  showConnector = true,
   loading = false,
   error = null,
   emptyMessage = 'No timeline items',
@@ -364,7 +368,7 @@ export const Timeline= ({
     const sorted = [...filteredItems].sort((a, b) => {
       const dateA = new Date(a.timestamp).getTime();
       const dateB = new Date(b.timestamp).getTime();
-      return reverse ? dateB - dateA ;
+      return reverse ? dateB - dateA : dateA - dateB;
     });
     
     return sorted;
@@ -404,11 +408,12 @@ export const Timeline= ({
           <div className="timeline__empty">
             {emptyMessage}
           </div>
-        ) ="timeline__items">
+        ) : (
+          <div className="timeline__items">
             {sortedItems.map((item, index) => {
               const position = mode === 'alternate' 
-                ? (index % 2 === 0 ? 'left' )
-                ;
+                ? (index % 2 === 0 ? 'left' : 'right')
+                : mode;
               
               return (
                 <TimelineItemComponent