@anymux/ui-kit 0.1.0

package/src/list/providers/TestListProvider.ts

@@ -0,0 +1,604 @@
+import {
+  ListItemsProvider,
+  ListItemsProviderListener,
+  LIST_VIEW_TYPE,
+  GRID_VIEW_TYPE,
+  DETAILS_VIEW_TYPE,
+  MASONRY_HORIZONTAL_VIEW_TYPE,
+  MASONRY_VERTICAL_VIEW_TYPE,
+  type ListViewType
+} from './ListItemsProvider';
+import type { 
+  ListItemData, 
+  ListLoadOptions, 
+  ListLoadResult, 
+  ListSelectionInfo,
+  ListContextMenuItem,
+  ListDragDropInfo,
+  VirtualizationConfig
+} from '../types/ListTypes';
+import React from 'react';
+import { 
+  FileText, Image, Video, Music, Folder, Archive, 
+  File, Settings, Code, Database, Globe, Palette,
+  Package, BookOpen, TestTube, GitBranch, Key,
+  Braces, Play, Zap, Component
+} from 'lucide-react';
+import { makeAutoObservable } from 'mobx';
+
+// AICODE-NOTE: Simple test provider for development and testing with mock data
+export class TestListProvider implements ListItemsProvider {
+  // =====================
+  // Basic Configuration
+  // =====================
+  
+  readonly id = 'test-list-provider';
+  readonly name = 'Test List Provider';
+  readonly isMultiSelectEnabled = true;
+  readonly isVirtualizationEnabled = true;
+  readonly isDragDropEnabled = true;
+  
+  readonly supportedViewTypes: ListViewType[] = [
+    LIST_VIEW_TYPE,
+    GRID_VIEW_TYPE,
+    DETAILS_VIEW_TYPE,
+    MASONRY_HORIZONTAL_VIEW_TYPE,
+    MASONRY_VERTICAL_VIEW_TYPE
+  ];
+
+  // AICODE-NOTE: Mock data for testing - different types of items
+  private items: ListItemData[] = [];
+  private listener?: ListItemsProviderListener;
+
+  constructor() {
+    makeAutoObservable(this, {});
+    // AICODE-NOTE: Generate large dataset with 10,000 items for performance testing
+    this.generateLargeDataset();
+  }
+
+  // =====================
+  // Mock Data Generation
+  // =====================
+  
+  private generateLargeDataset(): void {
+    // AICODE-NOTE: Generate 10,000 items with varied dimensions and images
+    const start = performance.now();
+    const fileTypes = [
+      { ext: 'jpg', icon: '🖼️', type: 'Image' },
+      { ext: 'png', icon: '🖼️', type: 'Image' },
+      { ext: 'pdf', icon: '📄', type: 'Document' },
+      { ext: 'doc', icon: '📝', type: 'Document' },
+      { ext: 'mp4', icon: '🎬', type: 'Video' },
+      { ext: 'mp3', icon: '🎵', type: 'Audio' },
+      { ext: 'zip', icon: '📦', type: 'Archive' },
+      { ext: 'txt', icon: '📄', type: 'Text' },
+      { ext: 'js', icon: '⚡', type: 'Code' },
+      { ext: 'css', icon: '🎨', type: 'Style' }
+    ];
+
+    const adjectives = ['Amazing', 'Beautiful', 'Creative', 'Dynamic', 'Elegant', 'Fantastic', 'Gorgeous', 'Incredible', 'Lovely', 'Magnificent'];
+    const nouns = ['Photo', 'Document', 'Project', 'Design', 'Artwork', 'Report', 'Presentation', 'Video', 'Music', 'Archive'];
+
+    for (let i = 0; i < 10000; i++) {
+      const fileType = fileTypes[i % fileTypes.length]!;
+      const adjective = adjectives[i % adjectives.length]!;
+      const noun = nouns[Math.floor(i / adjectives.length) % nouns.length]!;
+      
+      // Generate variable dimensions for realistic masonry layout
+      const baseWidth = 200 + (i % 5) * 40; // 200-360px width
+      const aspectRatios = [1, 1.2, 1.5, 0.8, 0.6, 1.8]; // Various aspect ratios
+      const aspectRatio = aspectRatios[i % aspectRatios.length]!;
+      const height = Math.round(baseWidth / aspectRatio);
+      
+      // Generate image URL for visual items
+      const isImageType = fileType.type === 'Image' || (i % 3 === 0); // Show images for image types and every 3rd item
+      const thumbnailUrl = isImageType 
+        ? `https://picsum.photos/${baseWidth}/${height}?random=${i}`
+        : undefined;
+
+      const item: ListItemData = {
+        id: `item-${i}`,
+        name: `${adjective} ${noun} ${i + 1}.${fileType.ext}`,
+        type: fileType.type,
+        icon: fileType.icon,
+        size: Math.floor(Math.random() * 10000000) + 1000, // 1KB to 10MB
+        modified: new Date(Date.now() - Math.random() * 365 * 24 * 60 * 60 * 1000), // Random date within last year
+        thumbnailUrl,
+        aspectRatio,
+        getDimensions: () => ({ width: baseWidth, height })
+      };
+
+      this.items.push(item);
+    }
+    console.log('Generated 10,000 items in', performance.now() - start, 'ms');
+  }
+
+  private getIconForType(type: string): string {
+    const iconMap: Record<string, string> = {
+      document: 'file-text',
+      image: 'image',
+      video: 'video',
+      audio: 'music',
+      folder: 'folder',
+      archive: 'archive'
+    };
+    return iconMap[type] || 'file';
+  }
+
+  /**
+   * Get custom icon for an item based on file type and extension
+   */
+  getItemIcon(item: ListItemData): string | React.ComponentType<any> {
+    // If it's a folder, use folder icon
+    if (item.type === 'folder') {
+      return Folder;
+    }
+    
+    // Get file extension
+    const extension = item.name.split('.').pop()?.toLowerCase() || '';
+    
+    // Return appropriate icon based on extension
+    switch (extension) {
+      // Web Development
+      case 'js':
+      case 'jsx':
+        return Code; // JavaScript icon
+        
+      case 'ts':
+      case 'tsx':
+        return FileText; // TypeScript icon
+        
+      case 'html':
+      case 'htm':
+        return Globe; // HTML icon
+        
+      case 'css':
+      case 'scss':
+      case 'sass':
+      case 'less':
+        return Palette; // Stylesheet icon
+        
+      // Documentation
+      case 'md':
+      case 'mdx':
+        return BookOpen; // Markdown icon
+        
+      case 'txt':
+        return FileText;
+        
+      case 'pdf':
+        return FileText;
+        
+      // Data & Configuration
+      case 'json':
+        return Braces; // JSON icon
+        
+      case 'yml':
+      case 'yaml':
+        return Settings; // YAML icon
+        
+      case 'xml':
+        return Code; // XML icon
+        
+      case 'env':
+        return Key; // Environment file icon
+        
+      case 'config':
+        return Settings; // Config file icon
+        
+      // Images
+      case 'jpg':
+      case 'jpeg':
+      case 'png':
+      case 'gif':
+      case 'webp':
+      case 'bmp':
+      case 'tiff':
+      case 'ico':
+        return Image; // Image icon
+        
+      case 'svg':
+        return Zap; // SVG icon (special since it's vector)
+        
+      // Media
+      case 'mp4':
+      case 'avi':
+      case 'mov':
+      case 'mkv':
+        return Play; // Video icon
+        
+      case 'mp3':
+      case 'wav':
+      case 'flac':
+      case 'ogg':
+        return Music; // Audio icon
+        
+      // Archives
+      case 'zip':
+      case 'tar':
+      case 'gz':
+      case '7z':
+      case 'rar':
+        return Archive; // Archive icon
+        
+      // Executables
+      case 'exe':
+      case 'app':
+      case 'deb':
+      case 'dmg':
+        return Zap; // Executable icon
+        
+      // Development Tools
+      case 'git':
+      case 'gitignore':
+        return GitBranch;
+        
+      case 'dockerfile':
+        return Package; // Docker icon
+        
+      case 'sql':
+        return Database; // Database icon
+        
+      case 'log':
+        return FileText; // Log file icon
+        
+      // Default file icon
+      default:
+        return File; // Use default File icon
+    }
+  }
+
+  // =====================
+  // Data Loading Methods
+  // =====================
+  
+  async loadItems(options?: ListLoadOptions): Promise<ListLoadResult> {
+    // AICODE-NOTE: Simulate async loading with small delay
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    let items = [...this.items];
+    
+    // Apply search filter
+    if (options?.searchQuery) {
+      const query = options.searchQuery.toLowerCase();
+      items = items.filter(item => 
+        item.name.toLowerCase().includes(query) ||
+        item.type?.toLowerCase().includes(query)
+      );
+    }
+    
+    // Apply sorting
+    if (options?.sortBy) {
+      const sortField = options.sortBy;
+      items.sort((a, b) => {
+        const aVal = a[sortField];
+        const bVal = b[sortField];
+        
+        if (aVal === undefined) return 1;
+        if (bVal === undefined) return -1;
+        
+        let comparison = 0;
+        if (aVal < bVal) comparison = -1;
+        if (aVal > bVal) comparison = 1;
+        
+        return options.sortDirection === 'desc' ? -comparison : comparison;
+      });
+    }
+    
+    // Apply pagination
+    const limit = options?.limit || items.length;
+    const offset = options?.offset || 0;
+    const paginatedItems = items.slice(offset, offset + limit);
+    
+    return {
+      items: paginatedItems,
+      totalCount: items.length,
+      hasMore: offset + limit < items.length
+    };
+  }
+
+  async getItemCount(): Promise<number> {
+    return this.items.length;
+  }
+
+  async loadItemRange(start: number, end: number): Promise<ListLoadResult> {
+    // AICODE-NOTE: Simulate async range loading with delay
+    await new Promise(resolve => setTimeout(resolve, 200));
+    
+    const items: ListItemData[] = [];
+    
+    // AICODE-NOTE: Generate items on demand for the requested range
+    for (let i = start; i < end && i < this.items.length; i++) {
+      // AICODE-NOTE: Check if item already exists in cache
+      const existingItem = i < this.items.length ? this.items[i] : null;
+      if (existingItem) {
+        items.push(existingItem);
+      } else {
+        // AICODE-NOTE: Item should already exist from generateLargeDataset
+        // If we reach here, something is wrong with the data generation
+        console.warn(`Item at index ${i} not found in pre-generated dataset`);
+        continue;
+      }
+    }
+    
+    return {
+      items,
+      totalCount: this.items.length,
+      hasMore: end < this.items.length
+    };
+  }
+
+  async refresh(): Promise<ListLoadResult> {
+    // AICODE-NOTE: For testing, just return all items
+    return this.loadItems();
+  }
+
+  // =====================
+  // View Configuration
+  // =====================
+  
+  getItemHeight(viewType: ListViewType): number {
+    // AICODE-NOTE: Different heights for different view types
+    switch (viewType.id) {
+      case 'list': return 40;
+      case 'grid': return 120;
+      case 'details': return 32;
+      default: return 40;
+    }
+  }
+
+  getItemWidth(viewType: ListViewType): number {
+    // AICODE-NOTE: Fixed widths for grid layouts
+    switch (viewType.id) {
+      case 'grid': return 200;
+      default: return 200;
+    }
+  }
+
+  getVirtualizationConfig(): VirtualizationConfig {
+    return {
+      itemHeight: 40,
+      overscan: 5,
+      threshold: 50,
+      rangeSize: 20
+    };
+  }
+
+  // =====================
+  // Event Callbacks
+  // =====================
+  
+  onSelectionChange(selectionInfo: ListSelectionInfo): void {
+    // AICODE-NOTE: Log selection changes for debugging
+    console.log('Selection changed:', {
+      selectedCount: selectionInfo.selectedItems.length,
+      selectionType: selectionInfo.selectionType,
+      trigger: selectionInfo.trigger
+    });
+  }
+
+  onViewTypeChange(viewType: ListViewType): void {
+    console.log('View type changed to:', viewType.name);
+  }
+
+  onItemDoubleClick(item: ListItemData): void {
+    console.log('Item double-clicked:', item.name);
+  }
+
+  // =====================
+  // Context Menu Support
+  // =====================
+  
+  getItemContextMenu(item: ListItemData): ListContextMenuItem[] {
+    // AICODE-NOTE: Basic context menu for testing
+    const baseMenu: ListContextMenuItem[] = [
+      { id: 'open', label: 'Open', icon: 'eye' },
+      { id: 'rename', label: 'Rename', icon: 'edit' },
+      { id: 'separator', label: '', type: 'separator' },
+      { id: 'delete', label: 'Delete', icon: 'trash', destructive: true }
+    ];
+
+    // Add type-specific items
+    if (item.type === 'folder') {
+      baseMenu.unshift({ id: 'open-folder', label: 'Open Folder', icon: 'folder-open' });
+    }
+
+    return baseMenu;
+  }
+
+  getMultiItemContextMenu(items: ListItemData[]): ListContextMenuItem[] {
+    // AICODE-NOTE: Context menu for multiple selected items
+    const multiMenu: ListContextMenuItem[] = [
+      { 
+        id: 'delete-multiple', 
+        label: `Delete ${items.length} items`, 
+        icon: 'trash',
+        destructive: true,
+        shortcut: 'Del'
+      },
+      { id: 'separator', label: '', type: 'separator' },
+      { 
+        id: 'copy-multiple', 
+        label: `Copy ${items.length} items`, 
+        icon: 'copy',
+        shortcut: 'Ctrl+C'
+      },
+      { 
+        id: 'cut-multiple', 
+        label: `Cut ${items.length} items`, 
+        icon: 'scissors',
+        shortcut: 'Ctrl+X'
+      }
+    ];
+
+    // AICODE-NOTE: Add archive option if multiple files selected
+    const hasFiles = items.some(item => item.type !== 'folder');
+    if (hasFiles) {
+      multiMenu.push(
+        { id: 'separator2', label: '', type: 'separator' },
+        { 
+          id: 'archive-multiple', 
+          label: `Archive ${items.length} items`, 
+          icon: 'archive',
+          tooltip: 'Create a zip archive of selected items'
+        }
+      );
+    }
+
+    return multiMenu;
+  }
+
+  onContextMenuAction(menuItemId: string, items: ListItemData[]): void {
+    console.log(`Context menu action '${menuItemId}' on items:`, items.map(i => i.name));
+    
+    switch (menuItemId) {
+      case 'delete':
+      case 'delete-multiple':
+        // AICODE-NOTE: For testing, just log - real provider would delete items
+        console.log('Would delete items:', items.map(i => i.name));
+        break;
+      case 'rename':
+        console.log('Would rename item:', items[0]?.name);
+        break;
+      case 'copy-multiple':
+        console.log('Would copy items to clipboard:', items.map(i => i.name));
+        break;
+      case 'cut-multiple':
+        console.log('Would cut items to clipboard:', items.map(i => i.name));
+        break;
+      case 'archive-multiple':
+        console.log('Would create archive of items:', items.map(i => i.name));
+        break;
+      case 'open':
+      case 'open-folder':
+        console.log('Would open item:', items[0]?.name);
+        break;
+      default:
+        console.log('Unhandled menu action:', menuItemId);
+    }
+  }
+
+  // =====================
+  // Drag and Drop Support
+  // =====================
+  
+  canDragItem(item: ListItemData): boolean {
+    // AICODE-NOTE: For testing, allow dragging all items except system files
+    return !item.name.startsWith('.');
+  }
+  
+  canDropItems(draggedItems: ListItemData[], targetItem: ListItemData | null, position: 'before' | 'after' | 'inside'): boolean {
+    // AICODE-NOTE: For testing, allow most drops with some restrictions
+    
+    // Can't drop on itself
+    if (targetItem && draggedItems.some(item => item.id === targetItem.id)) {
+      return false;
+    }
+    
+    // Can only drop inside folders
+    if (position === 'inside' && targetItem?.type !== 'folder') {
+      return false;
+    }
+    
+    return true;
+  }
+  
+  onDragStart(draggedItems: ListItemData[], event: DragEvent): void {
+    console.log('Drag started with items:', draggedItems.map(i => i.name));
+  }
+  
+  onDrop(dragDropInfo: ListDragDropInfo): void {
+    const { draggedItems, targetItem, position } = dragDropInfo;
+    
+    console.log('Drop operation:', {
+      draggedItems: draggedItems.map((i: ListItemData) => i.name),
+      targetItem: targetItem?.name || 'empty space',
+      position
+    });
+    
+    // AICODE-NOTE: For testing, simulate reordering by logging
+    if (position === 'before' || position === 'after') {
+      console.log(`Would reorder items ${position} ${targetItem?.name}`);
+    } else if (position === 'inside' && targetItem?.type === 'folder') {
+      console.log(`Would move items into folder: ${targetItem.name}`);
+    }
+  }
+  
+  onDragEnd(draggedItems: ListItemData[], success: boolean): void {
+    console.log('Drag ended:', {
+      items: draggedItems.map(i => i.name),
+      success
+    });
+  }
+
+  // =====================
+  // Legacy Listener Support
+  // =====================
+  
+  addListener(listener: ListItemsProviderListener): void {
+    this.listener = listener;
+  }
+
+  removeListener(listener: ListItemsProviderListener): void {
+    this.listener = undefined;
+  }
+
+  // =====================
+  // Helper Methods for Testing
+  // =====================
+  
+  /**
+   * Add a new mock item (useful for testing dynamic updates)
+   */
+  addMockItem(item: Partial<ListItemData>): void {
+    const { id, name, ...rest } = item;
+    const newItem: ListItemData = {
+      id: id || `item-${Date.now()}`,
+      name: name || 'New Item',
+      type: 'document',
+      modified: new Date(),
+      icon: 'file',
+      ...rest
+    };
+    
+    this.items.push(newItem);
+    
+    // Notify listeners
+    this.listener?.onItemsCountChanged(this.items.length);
+  }
+
+  /**
+   * Remove an item by ID (useful for testing dynamic updates)
+   */
+  removeMockItem(itemId: string): void {
+    const index = this.items.findIndex(item => item.id === itemId);
+    if (index >= 0) {
+      this.items.splice(index, 1);
+      
+      // Notify listeners
+      this.listener?.onItemsCountChanged(this.items.length);
+    }
+  }
+
+  /**
+   * Update an existing item (useful for testing dynamic updates)
+   */
+  updateMockItem(itemId: string, updates: Partial<ListItemData>): void {
+    const index = this.items.findIndex(item => item.id === itemId);
+    if (index >= 0) {
+      const currentItem = this.items[index]!;
+      const { id, name, ...rest } = updates;
+      
+      this.items[index] = {
+        ...currentItem,
+        ...rest,
+        // Ensure required fields are never undefined
+        id: id || currentItem.id,
+        name: name || currentItem.name
+      };
+      
+      // Notify listeners
+      this.listener?.onItemChanged(index);
+    }
+  }
+}