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

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

@@ -7,50 +7,53 @@ import {
 } from './types';
 
 // Simple icon components
-const ChevronUpIcon}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+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}> = ({ className = '' }) => (
+// 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}> = ({ className = '' }) => (
+// ); // 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= ({
+const DataGridColumn: React.FC<DataGridColumnProps> = ({
   column,
-  // index, // TODO,
+  // index, // TODO: Use for column ordering
+  onSort,
   onResize,
   sortConfig,
   // theme,
@@ -66,7 +69,7 @@ const DataGridColumn= ({
   const [startWidth, setStartWidth] = useState(0);
   const headerRef = useRef<HTMLTableHeaderCellElement>(null);
 
-  const handleMouseDown = useCallback((e) => {
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
     if (!resizable) return;
     
     e.preventDefault();
@@ -75,7 +78,7 @@ const DataGridColumn= ({
     setStartWidth(headerRef.current?.offsetWidth || 0);
   }, [resizable]);
 
-  const handleMouseMove = useCallback((e) => {
+  const handleMouseMove = useCallback((e: MouseEvent) => {
     if (!isResizing) return;
     
     const diff = e.clientX - startX;
@@ -105,9 +108,9 @@ const DataGridColumn= ({
   return (
     <th
       ref={headerRef}
-      className={`data-grid__header data-grid__header--${size} data-grid__header--${column.align || 'left'} ${isSorted ? 'data-grid__header--sorted' }`}
+      className={`data-grid__header data-grid__header--${size} data-grid__header--${column.align || 'left'} ${isSorted ? 'data-grid__header--sorted' : ''}`}
       style={{
-        width,
+        width: column.width,
       }}
       onClick={onSort}
     >
@@ -116,14 +119,15 @@ const DataGridColumn= ({
         {column.sortable && isSorted && (
           sortConfig?.direction === 'asc' ? (
             <ChevronUpIcon className="data-grid__sort-icon" />
-          ) ="data-grid__sort-icon" />
+          ) : (
+            <ChevronDownIcon className="data-grid__sort-icon" />
           )
         )}
       </div>
       
       {resizable && (
         <div
-          className={`data-grid__resize-handle ${isResizing ? 'data-grid__resize-handle--active' }`}
+          className={`data-grid__resize-handle ${isResizing ? 'data-grid__resize-handle--active' : ''}`}
           onMouseDown={handleMouseDown}
         />
       )}
@@ -132,24 +136,25 @@ const DataGridColumn= ({
 };
 
 // Column Management Panel
-const ColumnPanel];
-  groups?];
-  onGroupChange?]) => void;
-  onColumnToggle?, visible) => void;
-  theme;
-  size;
-  onClose) => void;
+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) => {
+  const handleGroupToggle = (columnKey: string) => {
     if (!onGroupChange) return;
     
     const newGroups = groups.includes(columnKey)
       ? groups.filter(g => g !== columnKey)
-      , columnKey];
+      : [...groups, columnKey];
     
     onGroupChange(newGroups);
   };
@@ -216,18 +221,19 @@ const ColumnPanel];
 };
 
 // Advanced Search and Filter Bar
-const DataGridToolbar;
-  searchValue?;
-  onSearchChange?) => void;
-  filterable?;
-  filters?];
-  onFiltersChange?]) => void;
-  groupable?;
-  groups?];
-  onGroupChange?]) => void;
-  columns];
-  theme;
-  size;
+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, 
@@ -253,17 +259,18 @@ const DataGridToolbar;
   const addFilter = () => {
     if (!filterColumn || !filterValue || !onFiltersChange) return;
     
-    const newFilter= {
-      key,
-      value,
-      operator};
+    const newFilter: FilterConfig = {
+      key: filterColumn,
+      value: filterValue,
+      operator: 'contains'
+    };
     
     onFiltersChange([...filters, newFilter]);
     setFilterColumn('');
     setFilterValue('');
   };
 
-  const removeFilter = (index) => {
+  const removeFilter = (index: number) => {
     if (!onFiltersChange) return;
     const newFilters = filters.filter((_, i) => i !== index);
     onFiltersChange(newFilters);
@@ -292,7 +299,7 @@ const DataGridToolbar;
           {filterable && (
             <button
               className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
-              onClick={() => {/* TODO}}
+              onClick={() => {/* TODO: Open filter dialog */}}
             >
               <FilterIcon className="data-grid__toolbar-icon" />
               <span>Filter ({filters.length})</span>
@@ -302,7 +309,7 @@ const DataGridToolbar;
           {groupable && (
             <button
               className={`data-grid__toolbar-button data-grid__toolbar-button--${size}`}
-              onClick={() => {/* TODO}}
+              onClick={() => {/* TODO: Open group dialog */}}
             >
               <GroupIcon className="data-grid__toolbar-icon" />
               <span>Group ({groups.length})</span>
@@ -336,12 +343,14 @@ const DataGridToolbar;
       {filters.length > 0 && (
         <div className="data-grid__active-filters">
           <span className={`data-grid__active-filters-label data-grid__active-filters-label--${size}`}>
-            Active Filters, index) => (
+            Active Filters:
+          </span>
+          {filters.map((filter, index) => (
             <div
               key={index}
               className={`data-grid__filter-tag data-grid__filter-tag--${size}`}
             >
-              <span>{filter.key})}</span>
+              <span>{filter.key}: {String(filter.value)}</span>
               <button
                 onClick={() => removeFilter(index)}
                 className="data-grid__filter-tag-remove"
@@ -380,7 +389,7 @@ const DataGridToolbar;
           <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' }`}
+            className={`data-grid__filter-add-button data-grid__filter-add-button--${size} ${(!filterColumn || !filterValue) ? 'data-grid__filter-add-button--disabled' : ''}`}
           >
             Add Filter
           </button>
@@ -391,24 +400,28 @@ const DataGridToolbar;
 };
 
 // Main DataGrid Component
-export const DataGrid= ({
+export const DataGrid: React.FC<DataGridProps> = ({
   columns,
   data,
   sortable = true,
   filterable = true,
   groupable = true,
   resizable = true,
-  // reorderable = false, // TODO,
+  // reorderable = false, // TODO: Implement column reordering
+  onSort,
   onFiltersChange,
   onGroupChange,
   onColumnResize,
-  // onColumnReorder, // TODO,
+  // onColumnReorder, // TODO: Implement column reordering
+  sortConfig,
   filters = [],
   groups = [],
   columnWidths = {},
-  // columnOrder = [], // TODO,
+  // columnOrder = [], // TODO: Implement column ordering
+  pagination,
   onPageChange,
-  // onPageSizeChange, // TODO= true,
+  // onPageSizeChange, // TODO: Implement page size change
+  searchable = true,
   searchValue,
   onSearchChange,
   rowKey = 'id',
@@ -439,12 +452,12 @@ export const DataGrid= ({
   const enhancedColumns = useMemo(() => {
     return columns.map(column => ({
       ...column,
-      width] || column.width || 150
+      width: columnWidths[column.key] || column.width || 150
     }));
   }, [columns, columnWidths]);
 
   // Get row key function
-  const getRowKey = (row, any>, index)=> {
+  const getRowKey = (row: Record<string, any>, index: number): string => {
     if (typeof rowKey === 'function') {
       return rowKey(row);
     }
@@ -452,22 +465,22 @@ export const DataGrid= ({
   };
 
   // Handle column resize
-  const handleColumnResize = useCallback((columnKey, newWidth) => {
+  const handleColumnResize = useCallback((columnKey: string, newWidth: number) => {
     onColumnResize?.(columnKey, newWidth);
   }, [onColumnResize]);
 
   // Handle sorting
-  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]);
 
   // Handle row selection
-  const handleRowSelect = useCallback((row, any>, checked) => {
-    const key = typeof rowKey === 'function' ? rowKey(row) ] || `row-0`;
-    let newSelectedKeys];
+  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];
@@ -480,13 +493,13 @@ export const DataGrid= ({
   }, [internalSelectedKeys, onSelectionChange, rowKey]);
 
   // Handle select all
-  const handleSelectAll = useCallback((checked) => {
+  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]);
@@ -514,7 +527,7 @@ export const DataGrid= ({
       <div className={`data-grid__container ${className || ''}`}>
         <div className="data-grid__error">
           <div className={`data-grid__error-text data-grid__error-text--${size}`}>
-            Error}
+            Error: {error}
           </div>
         </div>
       </div>
@@ -602,7 +615,7 @@ export const DataGrid= ({
               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' }`}
+                  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}`}>
@@ -619,7 +632,7 @@ export const DataGrid= ({
                     <td
                       key={column.key}
                       className={`data-grid__cell data-grid__cell--${size} data-grid__cell--${column.align || 'left'}`}
-                      style={{ width}}
+                      style={{ width: column.width }}
                     >
                       {String(row[column.key] || '')}
                     </td>
@@ -641,7 +654,7 @@ export const DataGrid= ({
             <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' }`}
+              className={`data-grid__pagination-button data-grid__pagination-button--${size} ${pagination.currentPage === 1 ? 'data-grid__pagination-button--disabled' : ''}`}
             >
               Previous
             </button>
@@ -653,7 +666,7 @@ export const DataGrid= ({
             <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' }`}
+              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>