@anymux/ui-kit 0.1.0

package/src/file-browser/components/views/ListView/ListView.tsx

@@ -0,0 +1,484 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ChevronUp, ChevronDown, MoreVertical } from 'lucide-react';
+import { cn } from '../../../../lib/utils';
+import { FileBrowserItem } from '../../../types/FileBrowserTypes';
+import { ListViewUIModel, ColumnDefinition } from '../../../models/ui/ListViewUIModel';
+import { ResponsiveLayoutManagerModel } from '../../../models/ResponsiveLayoutManagerModel';
+import FileIcon from '../../shared/FileIcon';
+
+export interface ListViewProps {
+  items: FileBrowserItem[];
+  listModel: ListViewUIModel;
+  responsiveManager?: ResponsiveLayoutManagerModel;
+  onItemClick?: (item: FileBrowserItem) => void;
+  onItemDoubleClick?: (item: FileBrowserItem) => void;
+  onItemActivate?: (item: FileBrowserItem) => void;
+  onSelectionChange?: (selectedItems: FileBrowserItem[]) => void;
+  selectedItemIds?: Set<string>;
+  focusedItemId?: string;
+  className?: string;
+  getItemIcon?: (item: FileBrowserItem) => any;
+}
+
+const ListViewHeader: React.FC<{
+  columns: ColumnDefinition[];
+  listModel: ListViewUIModel;
+  className?: string;
+}> = observer(({ columns, listModel, className }) => {
+  const handleColumnClick = (column: ColumnDefinition) => {
+    if (column.sortable) {
+      listModel.toggleSort(column.field);
+    }
+  };
+
+  const handleColumnResize = (columnId: string, newWidth: number) => {
+    listModel.resizeColumn(columnId, newWidth);
+  };
+
+  return (
+    <div 
+      className={cn(
+        'flex border-b bg-muted/30 sticky top-0 z-10',
+        listModel.showHeader ? 'block' : 'hidden',
+        className
+      )}
+      role="row"
+    >
+      {columns.map((column) => {
+        const isSorted = listModel.currentSort?.field === column.field;
+        const sortDirection = isSorted ? listModel.currentSort?.direction : undefined;
+        
+        return (
+          <div
+            key={column.id}
+            className={cn(
+              'flex items-center gap-2 px-3 py-2 text-sm font-medium border-r border-border last:border-r-0',
+              'select-none transition-colors',
+              column.sortable && 'hover:bg-muted/50 cursor-pointer',
+              column.align === 'center' && 'justify-center',
+              column.align === 'right' && 'justify-end'
+            )}
+            style={{ 
+              width: column.width,
+              minWidth: column.minWidth,
+              maxWidth: column.maxWidth,
+            }}
+            onClick={() => handleColumnClick(column)}
+            role="columnheader"
+            aria-sort={
+              isSorted 
+                ? sortDirection === 'asc' ? 'ascending' : 'descending'
+                : undefined
+            }
+          >
+            <span className="truncate">{column.label}</span>
+            
+            {column.sortable && (
+              <div className="flex flex-col">
+                {isSorted && sortDirection === 'asc' && (
+                  <ChevronUp className="w-3 h-3" />
+                )}
+                {isSorted && sortDirection === 'desc' && (
+                  <ChevronDown className="w-3 h-3" />
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+// Mobile-optimized row component
+const MobileListViewRow: React.FC<{
+  item: FileBrowserItem;
+  isSelected: boolean;
+  isFocused: boolean;
+  onItemClick?: (item: FileBrowserItem) => void;
+  onItemDoubleClick?: (item: FileBrowserItem) => void;
+  getItemIcon?: (item: FileBrowserItem) => any;
+  index: number;
+}> = observer(({ 
+  item, 
+  isSelected, 
+  isFocused, 
+  onItemClick, 
+  onItemDoubleClick, 
+  getItemIcon,
+  index,
+}) => {
+  const handleClick = () => {
+    onItemClick?.(item);
+  };
+
+  const handleDoubleClick = () => {
+    onItemDoubleClick?.(item);
+  };
+
+  const formatSize = (size: number): string => {
+    if (size === 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let fileSize = size;
+    let unitIndex = 0;
+    while (fileSize >= 1024 && unitIndex < units.length - 1) {
+      fileSize /= 1024;
+      unitIndex++;
+    }
+    return `${fileSize.toFixed(1)} ${units[unitIndex]}`;
+  };
+
+  const formatDate = (date: Date): string => {
+    return date.toLocaleDateString(undefined, { 
+      month: 'short', 
+      day: 'numeric',
+      year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined
+    });
+  };
+
+  return (
+    <div
+      className={cn(
+        // Touch-friendly height (minimum 44px)
+        'flex items-center gap-3 p-4 border-b border-border',
+        'hover:bg-muted/30 active:bg-muted/50 transition-colors cursor-pointer',
+        'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-inset',
+        'min-h-[44px]', // Ensure touch-friendly target size
+        isSelected && 'bg-primary/10 text-primary',
+        isFocused && 'ring-2 ring-primary ring-inset'
+      )}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      tabIndex={0}
+      role="row"
+      aria-selected={isSelected}
+    >
+      {/* Icon */}
+      <div className="flex-shrink-0">
+        <FileIcon
+          item={item}
+          getItemIcon={getItemIcon}
+          size="md"
+        />
+      </div>
+
+      {/* Main content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between">
+          <div className="min-w-0 flex-1">
+            <p className="text-sm font-medium truncate" title={item.name}>
+              {item.name}
+            </p>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground mt-1">
+              <span>{item.type === 'directory' ? 'Folder' : 'File'}</span>
+              {item.size !== undefined && item.type !== 'directory' && (
+                <>
+                  <span>•</span>
+                  <span>{formatSize(item.size)}</span>
+                </>
+              )}
+              {item.lastModified && (
+                <>
+                  <span>•</span>
+                  <span>{formatDate(item.lastModified)}</span>
+                </>
+              )}
+            </div>
+          </div>
+          
+          {/* Action button */}
+          <button
+            className={cn(
+              'flex-shrink-0 w-8 h-8 flex items-center justify-center',
+              'rounded-md hover:bg-muted/50 transition-colors',
+              'focus:outline-none focus:ring-2 focus:ring-primary'
+            )}
+            onClick={(e) => {
+              e.stopPropagation();
+              // Handle context menu or actions
+            }}
+            aria-label="More actions"
+          >
+            <MoreVertical className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+const ListViewRow: React.FC<{
+  item: FileBrowserItem;
+  columns: ColumnDefinition[];
+  isSelected: boolean;
+  isFocused: boolean;
+  onItemClick?: (item: FileBrowserItem) => void;
+  onItemDoubleClick?: (item: FileBrowserItem) => void;
+  getItemIcon?: (item: FileBrowserItem) => any;
+  striped?: boolean;
+  index: number;
+}> = observer(({ 
+  item, 
+  columns, 
+  isSelected, 
+  isFocused, 
+  onItemClick, 
+  onItemDoubleClick, 
+  getItemIcon,
+  striped = false,
+  index,
+}) => {
+  const handleClick = () => {
+    onItemClick?.(item);
+  };
+
+  const handleDoubleClick = () => {
+    onItemDoubleClick?.(item);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        handleClick();
+        break;
+    }
+  };
+
+  const getCellValue = (column: ColumnDefinition): string => {
+    const value = (item as any)[column.field];
+    
+    if (column.format && value !== undefined && value !== null) {
+      return column.format(value);
+    }
+    
+    // Default formatting for common fields
+    switch (column.field) {
+      case 'size':
+        if (typeof value === 'number') {
+          if (value === 0) return '0 B';
+          const units = ['B', 'KB', 'MB', 'GB'];
+          let size = value;
+          let unitIndex = 0;
+          while (size >= 1024 && unitIndex < units.length - 1) {
+            size /= 1024;
+            unitIndex++;
+          }
+          return `${size.toFixed(1)} ${units[unitIndex]}`;
+        }
+        return '-';
+      case 'lastModified':
+        if (value instanceof Date) {
+          return value.toLocaleDateString();
+        }
+        return '-';
+      case 'type':
+        return item.type === 'directory' ? 'Folder' : 'File';
+      default:
+        return value?.toString() || '-';
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex border-b border-border hover:bg-muted/30 transition-colors cursor-pointer',
+        'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-inset',
+        isSelected && 'bg-primary/10 text-primary',
+        isFocused && 'ring-2 ring-primary ring-inset',
+        striped && index % 2 === 1 && 'bg-muted/20'
+      )}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="row"
+      aria-selected={isSelected}
+    >
+      {columns.map((column, columnIndex) => (
+        <div
+          key={column.id}
+          className={cn(
+            'flex items-center gap-2 px-3 py-2 text-sm border-r border-border last:border-r-0',
+            'truncate',
+            column.align === 'center' && 'justify-center',
+            column.align === 'right' && 'justify-end'
+          )}
+          style={{ 
+            width: column.width,
+            minWidth: column.minWidth,
+            maxWidth: column.maxWidth,
+          }}
+          role="cell"
+        >
+          {/* Show icon only in first column (usually name) */}
+          {columnIndex === 0 && (
+            <FileIcon
+              item={item}
+              getItemIcon={getItemIcon}
+              size="sm"
+            />
+          )}
+          
+          <span className="truncate" title={getCellValue(column)}>
+            {getCellValue(column)}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+});
+
+const ListView: React.FC<ListViewProps> = observer(({
+  items,
+  listModel,
+  responsiveManager,
+  onItemClick,
+  onItemDoubleClick,
+  onItemActivate,
+  onSelectionChange,
+  selectedItemIds = new Set<string>(),
+  focusedItemId,
+  className,
+  getItemIcon,
+}) => {
+  const visibleColumns = listModel.visibleColumns;
+  const isMobile = responsiveManager?.isMobile ?? false;
+  
+  // On mobile, use simplified columns or mobile layout
+  const effectiveColumns = isMobile 
+    ? visibleColumns.filter(col => ['name'].includes(col.field)) // Only show name on mobile
+    : visibleColumns;
+
+  const handleItemClick = (item: FileBrowserItem) => {
+    onItemClick?.(item);
+  };
+
+  const handleItemDoubleClick = (item: FileBrowserItem) => {
+    onItemDoubleClick?.(item);
+    onItemActivate?.(item);
+  };
+
+  const sortedItems = React.useMemo(() => {
+    if (!listModel.currentSort) {
+      return items;
+    }
+
+    const { field, direction } = listModel.currentSort;
+    
+    return [...items].sort((a, b) => {
+      const aValue = (a as any)[field];
+      const bValue = (b as any)[field];
+      
+      // Handle null/undefined values
+      if (aValue == null && bValue == null) return 0;
+      if (aValue == null) return direction === 'asc' ? -1 : 1;
+      if (bValue == null) return direction === 'asc' ? 1 : -1;
+      
+      // Type-specific sorting
+      if (typeof aValue === 'string' && typeof bValue === 'string') {
+        const result = aValue.localeCompare(bValue);
+        return direction === 'asc' ? result : -result;
+      }
+      
+      if (typeof aValue === 'number' && typeof bValue === 'number') {
+        const result = aValue - bValue;
+        return direction === 'asc' ? result : -result;
+      }
+      
+      if (aValue instanceof Date && bValue instanceof Date) {
+        const result = aValue.getTime() - bValue.getTime();
+        return direction === 'asc' ? result : -result;
+      }
+      
+      // Fallback to string comparison
+      const result = String(aValue).localeCompare(String(bValue));
+      return direction === 'asc' ? result : -result;
+    });
+  }, [items, listModel.currentSort]);
+
+  if (items.length === 0) {
+    return (
+      <div className={cn('p-4 text-center text-muted-foreground', className)}>
+        <p className="text-sm">No files to display</p>
+      </div>
+    );
+  }
+
+  if (!isMobile && effectiveColumns.length === 0) {
+    return (
+      <div className={cn('p-4 text-center text-muted-foreground', className)}>
+        <p className="text-sm">No columns configured</p>
+        <button
+          onClick={() => listModel.resetToDefaults()}
+          className="mt-2 px-3 py-1 bg-primary text-primary-foreground rounded-md text-sm"
+        >
+          Reset to Defaults
+        </button>
+      </div>
+    );
+  }
+
+  // Mobile layout
+  if (isMobile) {
+    return (
+      <div 
+        className={cn('list-view h-full overflow-hidden flex flex-col', className)}
+        role="list"
+        aria-label="File list view (mobile)"
+      >
+        <div className="flex-1 overflow-auto">
+          {sortedItems.map((item, index) => (
+            <MobileListViewRow
+              key={item.id}
+              item={item}
+              isSelected={selectedItemIds.has(item.id)}
+              isFocused={focusedItemId === item.id}
+              onItemClick={handleItemClick}
+              onItemDoubleClick={handleItemDoubleClick}
+              getItemIcon={getItemIcon}
+              index={index}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Desktop layout
+  return (
+    <div 
+      className={cn('list-view h-full overflow-hidden flex flex-col', className)}
+      role="grid"
+      aria-label="File list view"
+    >
+      <ListViewHeader 
+        columns={effectiveColumns} 
+        listModel={listModel}
+      />
+      
+      <div className="flex-1 overflow-auto">
+        {sortedItems.map((item, index) => (
+          <ListViewRow
+            key={item.id}
+            item={item}
+            columns={effectiveColumns}
+            isSelected={selectedItemIds.has(item.id)}
+            isFocused={focusedItemId === item.id}
+            onItemClick={handleItemClick}
+            onItemDoubleClick={handleItemDoubleClick}
+            getItemIcon={getItemIcon}
+            striped={listModel.striped}
+            index={index}
+          />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+ListView.displayName = 'ListView';
+
+export default ListView;