@shohojdhara/atomix 0.3.7 → 0.3.8

package/src/components/DataTable/DataTable.tsx

@@ -1,13 +1,30 @@
-import React, { useRef, memo } from 'react';
-import { DataTableProps } from '../../lib/types/components';
+import React, { useRef, memo, useState, useCallback, useEffect } from 'react';
+import { DataTableProps, SelectionMode, ExportFormat } from '../../lib/types/components';
 import { useDataTable } from '../../lib/composables/useDataTable';
 import { DATA_TABLE_CLASSES } from '../../lib/constants/components';
 import { Spinner } from '../Spinner/Spinner';
 import { Icon } from '../Icon/Icon';
 import { Pagination } from '../Pagination/Pagination';
+import { Checkbox } from '../Form/Checkbox';
+import { Dropdown, DropdownItem, DropdownDivider } from '../Dropdown/Dropdown';
+import { exportData } from '../../lib/utils/dataTableExport';
+import { Button } from '../Button/Button';
 
 /**
- * DataTable - A flexible and accessible data table component
+ * Get unique row ID
+ */
+function getRowId(row: any, rowKey?: string | ((row: any) => string | number)): string | number {
+  if (typeof rowKey === 'function') {
+    return rowKey(row);
+  }
+  if (typeof rowKey === 'string') {
+    return row[rowKey];
+  }
+  return row.id ?? row.key ?? JSON.stringify(row);
+}
+
+/**
+ * DataTable - A flexible and accessible data table component with advanced features
  *
  * @example
  * ```tsx
@@ -15,6 +32,7 @@ import { Pagination } from '../Pagination/Pagination';
  *   data={users}
  *   columns={columns}
  *   sortable={true}
+ *   selectionMode="multiple"
  *   onRowClick={handleRowClick}
  * />
  * ```
@@ -35,9 +53,33 @@ export const DataTable: React.FC<DataTableProps> = memo(({
   emptyMessage = 'No data available',
   onRowClick,
   onSort,
+  selectionMode = 'none',
+  selectedRowIds: controlledSelectedRowIds,
+  onSelectionChange,
+  rowKey,
+  resizable = false,
+  reorderable = false,
+  onColumnReorder,
+  showColumnVisibility = false,
+  onColumnVisibilityChange,
+  stickyHeader = false,
+  stickyHeaderOffset = '0px',
+  virtualScrolling = false,
+  estimatedRowHeight = 50,
+  overscan = 5,
+  exportable = false,
+  exportFormats = ['csv', 'excel', 'json'],
+  exportFilename = 'data-table',
+  onExport,
+  columnFilters = false,
   ...props
 }) => {
   const tableRef = useRef<HTMLTableElement>(null);
+  const headerRef = useRef<HTMLTableSectionElement>(null);
+  const [resizingColumn, setResizingColumn] = useState<string | null>(null);
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+  const [dragStartIndex, setDragStartIndex] = useState<number | null>(null);
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
 
   const {
     displayData,
@@ -47,6 +89,18 @@ export const DataTable: React.FC<DataTableProps> = memo(({
     handleSort,
     handlePageChange,
     handleSearch,
+    selectedRowIds,
+    selectedRows,
+    handleRowSelect,
+    handleSelectAll,
+    isAllSelected,
+    isIndeterminate,
+    visibleColumns,
+    columnVisibility,
+    handleColumnVisibilityToggle,
+    columnFilterValues,
+    handleColumnFilterChange,
+    clearColumnFilters,
   } = useDataTable({
     data,
     columns,
@@ -54,8 +108,92 @@ export const DataTable: React.FC<DataTableProps> = memo(({
     paginated,
     pageSize,
     onSort,
+    selectionMode,
+    selectedRowIds: controlledSelectedRowIds,
+    onSelectionChange,
+    rowKey,
+    columnFilters,
+    reorderable,
+    onColumnReorder,
+    onColumnVisibilityChange,
   });
 
+  // Initialize column widths
+  useEffect(() => {
+    const widths: Record<string, number> = {};
+    visibleColumns.forEach(col => {
+      if (col.width) {
+        const widthValue = parseInt(col.width, 10);
+        if (!isNaN(widthValue)) {
+          widths[col.key] = widthValue;
+        }
+      }
+    });
+    setColumnWidths(widths);
+  }, [visibleColumns]);
+
+  // Handle column resize start
+  const handleResizeStart = useCallback((columnKey: string, e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setResizingColumn(columnKey);
+    
+    const startX = e.clientX;
+    const startWidth = columnWidths[columnKey] || 100;
+    
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const diff = moveEvent.clientX - startX;
+      const newWidth = Math.max(50, startWidth + diff); // Minimum width of 50px
+      
+      setColumnWidths(prev => ({
+        ...prev,
+        [columnKey]: newWidth,
+      }));
+    };
+    
+    const handleMouseUp = () => {
+      setResizingColumn(null);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  }, [columnWidths]);
+
+  // Handle column drag start
+  const handleDragStart = useCallback((index: number) => {
+    setDragStartIndex(index);
+  }, []);
+
+  // Handle column drag over
+  const handleDragOver = useCallback((e: React.DragEvent, index: number) => {
+    e.preventDefault();
+    setDragOverIndex(index);
+  }, []);
+
+  // Handle column drop
+  const handleDrop = useCallback((e: React.DragEvent, dropIndex: number) => {
+    e.preventDefault();
+    if (dragStartIndex !== null && dragStartIndex !== dropIndex && onColumnReorder) {
+      const newOrder = [...visibleColumns.map(col => col.key)];
+      const [removed] = newOrder.splice(dragStartIndex, 1);
+      newOrder.splice(dropIndex, 0, removed);
+      onColumnReorder(newOrder);
+    }
+    setDragStartIndex(null);
+    setDragOverIndex(null);
+  }, [dragStartIndex, visibleColumns, onColumnReorder]);
+
+  // Handle export
+  const handleExport = useCallback((format: ExportFormat) => {
+    if (onExport) {
+      onExport(format, displayData);
+    } else {
+      exportData(format, displayData, visibleColumns, exportFilename);
+    }
+  }, [displayData, visibleColumns, exportFilename, onExport]);
+
   // Generate component classes
   const tableClass = [
     DATA_TABLE_CLASSES.base,
@@ -63,46 +201,114 @@ export const DataTable: React.FC<DataTableProps> = memo(({
     bordered && DATA_TABLE_CLASSES.bordered,
     dense && DATA_TABLE_CLASSES.dense,
     loading && DATA_TABLE_CLASSES.loading,
+    stickyHeader && DATA_TABLE_CLASSES.stickyHeader,
     className,
   ]
     .filter(Boolean)
     .join(' ');
 
+  const containerStyle: React.CSSProperties = {
+    ...style,
+    ...(stickyHeader && {
+      '--sticky-header-offset': stickyHeaderOffset,
+    } as React.CSSProperties),
+  };
+
+  const renderSelectionHeader = () => {
+    if (selectionMode === 'none') return null;
+
+    return (
+      <th
+        className={`${DATA_TABLE_CLASSES.headerCell} ${DATA_TABLE_CLASSES.selectionCell}`}
+        style={{ width: '48px' }}
+      >
+        {selectionMode === 'multiple' && (
+          <Checkbox
+            checked={isAllSelected}
+            indeterminate={isIndeterminate}
+            onChange={(e) => handleSelectAll(e.target.checked)}
+            aria-label="Select all rows"
+          />
+        )}
+      </th>
+    );
+  };
+
   const renderHeader = () => {
     return (
-      <thead className={DATA_TABLE_CLASSES.header}>
+      <thead
+        ref={headerRef}
+        className={DATA_TABLE_CLASSES.header}
+        style={stickyHeader ? { position: 'sticky', top: stickyHeaderOffset, zIndex: 10 } : undefined}
+      >
         <tr>
-          {columns.map((column, index) => (
-            <th
-              key={`header-${index}`}
-              className={`${DATA_TABLE_CLASSES.headerCell} ${column.sortable !== false && sortable ? DATA_TABLE_CLASSES.sortable : ''}`}
-              onClick={() =>
-                column.sortable !== false && sortable ? handleSort(column.key) : null
-              }
-              aria-sort={
-                sortConfig?.key === column.key
-                  ? sortConfig.direction === 'asc'
-                    ? 'ascending'
-                    : 'descending'
-                  : undefined
-              }
-            >
-              <div className={DATA_TABLE_CLASSES.headerContent}>
-                <span>{column.title}</span>
-                {column.sortable !== false && sortable && (
-                  <span className={DATA_TABLE_CLASSES.sortIcon}>
-                    {sortConfig?.key === column.key ? (
-                      sortConfig.direction === 'asc' ? (
-                        <Icon name="CaretUp" size="sm" />
-                      ) : (
-                        <Icon name="CaretDown" size="sm" />
-                      )
-                    ) : null}
-                  </span>
+          {renderSelectionHeader()}
+          {visibleColumns.map((column, index) => {
+            const isDragging = dragStartIndex === index;
+            const isDragOver = dragOverIndex === index;
+            
+            return (
+              <th
+                key={`header-${column.key}`}
+                className={[
+                  DATA_TABLE_CLASSES.headerCell,
+                  column.sortable !== false && sortable ? DATA_TABLE_CLASSES.sortable : '',
+                  isDragging ? DATA_TABLE_CLASSES.dragging : '',
+                  isDragOver ? DATA_TABLE_CLASSES.dragOver : '',
+                ].filter(Boolean).join(' ')}
+                style={{
+                  ...(columnWidths[column.key] && { width: `${columnWidths[column.key]}px` }),
+                  ...(column.width && !columnWidths[column.key] && { width: column.width }),
+                }}
+                onClick={() => column.sortable !== false && sortable ? handleSort(column.key) : null}
+                onDragStart={reorderable ? () => handleDragStart(index) : undefined}
+                onDragOver={reorderable ? (e) => handleDragOver(e, index) : undefined}
+                onDrop={reorderable ? (e) => handleDrop(e, index) : undefined}
+                draggable={reorderable}
+                aria-sort={
+                  sortConfig?.key === column.key
+                    ? sortConfig.direction === 'asc'
+                      ? 'ascending'
+                      : 'descending'
+                    : undefined
+                }
+              >
+                <div className={DATA_TABLE_CLASSES.headerContent}>
+                  <span>{column.title}</span>
+                  <div className={DATA_TABLE_CLASSES.headerActions}>
+                    {column.sortable !== false && sortable && (
+                      <span className={DATA_TABLE_CLASSES.sortIcon}>
+                        {sortConfig?.key === column.key ? (
+                          sortConfig.direction === 'asc' ? (
+                            <Icon name="CaretUp" size="sm" />
+                          ) : (
+                            <Icon name="CaretDown" size="sm" />
+                          )
+                        ) : null}
+                      </span>
+                    )}
+                    {columnFilters && column.filterable !== false && (
+                      <input
+                        type="text"
+                        className={DATA_TABLE_CLASSES.columnFilter}
+                        placeholder="Filter..."
+                        value={columnFilterValues[column.key] || ''}
+                        onChange={(e) => handleColumnFilterChange(column.key, e.target.value)}
+                        onClick={(e) => e.stopPropagation()}
+                        aria-label={`Filter ${column.title}`}
+                      />
+                    )}
+                  </div>
+                </div>
+                {resizable && (column.resizable !== false) && (
+                  <div
+                    className={DATA_TABLE_CLASSES.resizeHandle}
+                    onMouseDown={(e) => handleResizeStart(column.key, e)}
+                  />
                 )}
-              </div>
-            </th>
-          ))}
+              </th>
+            );
+          })}
         </tr>
       </thead>
     );
@@ -113,7 +319,7 @@ export const DataTable: React.FC<DataTableProps> = memo(({
       return (
         <tbody>
           <tr>
-            <td colSpan={columns.length} className={DATA_TABLE_CLASSES.loadingCell}>
+            <td colSpan={visibleColumns.length + (selectionMode !== 'none' ? 1 : 0)} className={DATA_TABLE_CLASSES.loadingCell}>
               <div className={DATA_TABLE_CLASSES.loadingIndicator}>
                 <Spinner size="md" variant="primary" />
               </div>
@@ -127,7 +333,7 @@ export const DataTable: React.FC<DataTableProps> = memo(({
       return (
         <tbody>
           <tr>
-            <td colSpan={columns.length} className={DATA_TABLE_CLASSES.emptyCell}>
+            <td colSpan={visibleColumns.length + (selectionMode !== 'none' ? 1 : 0)} className={DATA_TABLE_CLASSES.emptyCell}>
               {emptyMessage}
             </td>
           </tr>
@@ -137,21 +343,58 @@ export const DataTable: React.FC<DataTableProps> = memo(({
 
     return (
       <tbody>
-        {displayData.map((row: any, rowIndex: number) => (
-          <tr
-            key={`row-${rowIndex}`}
-            className={DATA_TABLE_CLASSES.row}
-            onClick={onRowClick ? () => onRowClick(row) : undefined}
-            tabIndex={onRowClick ? 0 : undefined}
-            role={onRowClick ? 'button' : undefined}
-          >
-            {columns.map((column, colIndex) => (
-              <td key={`cell-${rowIndex}-${colIndex}`} className={DATA_TABLE_CLASSES.cell}>
-                {column.render ? column.render(row[column.key], row) : row[column.key]}
-              </td>
-            ))}
-          </tr>
-        ))}
+        {displayData.map((row: any, rowIndex: number) => {
+          const rowId = getRowId(row, rowKey);
+          const isSelected = selectedRowIds.includes(rowId);
+
+          return (
+            <tr
+              key={`row-${rowId}`}
+              className={[
+                DATA_TABLE_CLASSES.row,
+                isSelected ? DATA_TABLE_CLASSES.rowSelected : '',
+              ].filter(Boolean).join(' ')}
+              onClick={onRowClick ? () => onRowClick(row) : undefined}
+              tabIndex={onRowClick ? 0 : undefined}
+              role={onRowClick ? 'button' : undefined}
+            >
+              {selectionMode !== 'none' && (
+                <td className={`${DATA_TABLE_CLASSES.cell} ${DATA_TABLE_CLASSES.selectionCell}`}>
+                  {selectionMode === 'multiple' ? (
+                    <Checkbox
+                      checked={isSelected}
+                      onChange={(e) => handleRowSelect(rowId, e.target.checked)}
+                      onClick={(e) => e.stopPropagation()}
+                      aria-label={`Select row ${rowIndex + 1}`}
+                    />
+                  ) : (
+                    <input
+                      type="radio"
+                      checked={isSelected}
+                      onChange={() => handleRowSelect(rowId, true)}
+                      onClick={(e) => e.stopPropagation()}
+                      name="data-table-row-selection"
+                      aria-label={`Select row ${rowIndex + 1}`}
+                      className="c-data-table__radio"
+                    />
+                  )}
+                </td>
+              )}
+              {visibleColumns.map((column) => (
+                <td
+                  key={`cell-${rowId}-${column.key}`}
+                  className={DATA_TABLE_CLASSES.cell}
+                  style={{
+                    ...(columnWidths[column.key] && { width: `${columnWidths[column.key]}px` }),
+                    ...(column.width && !columnWidths[column.key] && { width: column.width }),
+                  }}
+                >
+                  {column.render ? column.render(row[column.key], row) : row[column.key]}
+                </td>
+              ))}
+            </tr>
+          );
+        })}
       </tbody>
     );
   };
@@ -176,25 +419,105 @@ export const DataTable: React.FC<DataTableProps> = memo(({
   };
 
   const renderToolbar = () => {
-    if (!filterable) return null;
+    const hasToolbar = filterable || exportable || showColumnVisibility || columnFilters;
+    if (!hasToolbar) return null;
 
     return (
       <div className={DATA_TABLE_CLASSES.toolbar}>
-        <div className={DATA_TABLE_CLASSES.search}>
-          <input
-            type="text"
-            placeholder="Search..."
-            className={`${DATA_TABLE_CLASSES.searchInput} c-input`}
-            onChange={e => handleSearch(e.target.value)}
-            aria-label="Search table"
-          />
+        <div className={DATA_TABLE_CLASSES.toolbarLeft}>
+          {filterable && (
+            <div className={DATA_TABLE_CLASSES.search}>
+              <input
+                type="text"
+                placeholder="Search..."
+                className={`${DATA_TABLE_CLASSES.searchInput} c-input`}
+                onChange={e => handleSearch(e.target.value)}
+                aria-label="Search table"
+              />
+            </div>
+          )}
+          {columnFilters && Object.keys(columnFilterValues).length > 0 && (
+            <Button
+              size="sm"
+              variant="secondary"
+              onClick={clearColumnFilters}
+            >
+              Clear Filters
+            </Button>
+          )}
+        </div>
+        <div className={DATA_TABLE_CLASSES.toolbarRight}>
+          {showColumnVisibility && (
+            <Dropdown
+              trigger="click"
+              placement="bottom-end"
+              menu={
+                <>
+                  {columns.map((column) => (
+                    <DropdownItem
+                      key={column.key}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleColumnVisibilityToggle(column.key);
+                      }}
+                    >
+                      <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', width: '100%' }}>
+                        <Checkbox
+                          checked={columnVisibility[column.key] !== false}
+                          onChange={() => handleColumnVisibilityToggle(column.key)}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                        <span style={{ marginLeft: '0.5rem' }}>{column.title}</span>
+                      </label>
+                    </DropdownItem>
+                  ))}
+                </>
+              }
+            >
+              <Button size="sm" variant="secondary">
+                <Icon name="Columns" size="sm" />
+                Columns
+              </Button>
+            </Dropdown>
+          )}
+          {exportable && (
+            <Dropdown
+              trigger="click"
+              placement="bottom-end"
+              menu={
+                <>
+                  {exportFormats.includes('csv') && (
+                    <DropdownItem onClick={() => handleExport('csv')}>
+                      Export as CSV
+                    </DropdownItem>
+                  )}
+                  {exportFormats.includes('excel') && (
+                    <DropdownItem onClick={() => handleExport('excel')}>
+                      Export as Excel
+                    </DropdownItem>
+                  )}
+                  {exportFormats.includes('json') && (
+                    <DropdownItem onClick={() => handleExport('json')}>
+                      Export as JSON
+                    </DropdownItem>
+                  )}
+                </>
+              }
+            >
+              <Button size="sm" variant="secondary">
+                <Icon name="Download" size="sm" />
+                Export
+              </Button>
+            </Dropdown>
+          )}
         </div>
       </div>
     );
   };
 
   return (
-    <div className={DATA_TABLE_CLASSES.container} style={style} {...props}>
+    <div className={DATA_TABLE_CLASSES.container} style={containerStyle} {...props}>
       {renderToolbar()}
       <div className={DATA_TABLE_CLASSES.tableWrapper}>
         <table ref={tableRef} className={tableClass}>

package/src/components/DatePicker/DatePicker.tsx

@@ -73,8 +73,11 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
       // View mode handlers
       switchToMonthView,
       switchToYearView,
+      switchToDayView,
       selectMonth,
       selectYear,
+      handlePrevDecade,
+      handleNextDecade,
 
       // Utility methods
       generateDays,
@@ -186,21 +189,6 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
       return weeks;
     };
 
-    const handlePrevDecade = () => {
-      // This would need to be implemented in the hook or handled differently
-      // For now, we'll work with what we have
-    };
-
-    const handleNextDecade = () => {
-      // This would need to be implemented in the hook or handled differently
-      // For now, we'll work with what we have
-    };
-
-    const switchToDayView = () => {
-      // This would need to be implemented in the hook or handled differently
-      // For now, we'll work with what we have
-    };
-
     // Helper function to render calendar content
     const renderCalendarContent = () => (
       <>
@@ -279,29 +267,32 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
             </>
           )}
 
-          {viewMode === 'years' && (
-            <>
-              <button
-                type="button"
-                className="c-datepicker__nav-button c-datepicker__nav-button--prev-decade"
-                onClick={handlePrevDecade}
-                aria-label="Previous decade"
-              >
-                <Icon name="CaretDoubleLeft" size="sm" />
-              </button>
-              <button type="button" className="c-datepicker__view-switch" onClick={switchToDayView}>
-                {generateYears()[0]} - {generateYears()[generateYears().length - 1]}
-              </button>
-              <button
-                type="button"
-                className="c-datepicker__nav-button c-datepicker__nav-button--next-decade"
-                onClick={handleNextDecade}
-                aria-label="Next decade"
-              >
-                <Icon name="CaretDoubleRight" size="sm" />
-              </button>
-            </>
-          )}
+          {viewMode === 'years' && (() => {
+            const years = generateYears();
+            return (
+              <>
+                <button
+                  type="button"
+                  className="c-datepicker__nav-button c-datepicker__nav-button--prev-decade"
+                  onClick={handlePrevDecade}
+                  aria-label="Previous decade"
+                >
+                  <Icon name="CaretDoubleLeft" size="sm" />
+                </button>
+                <button type="button" className="c-datepicker__view-switch" onClick={switchToDayView}>
+                  {years[0]} - {years[years.length - 1]}
+                </button>
+                <button
+                  type="button"
+                  className="c-datepicker__nav-button c-datepicker__nav-button--next-decade"
+                  onClick={handleNextDecade}
+                  aria-label="Next decade"
+                >
+                  <Icon name="CaretDoubleRight" size="sm" />
+                </button>
+              </>
+            );
+          })()}
         </div>
 
         <div className="c-datepicker__body">