@anymux/ui-kit 0.1.0

package/src/file-browser/components/shared/FileIcon.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { 
+  File, 
+  FileText, 
+  FileImage, 
+  FileVideo, 
+  FileAudio, 
+  FileCode, 
+  Folder, 
+  FolderOpen,
+  Archive,
+  FileSpreadsheet,
+  FileType,
+  Settings,
+  LucideIcon,
+} from 'lucide-react';
+
+// Map icon names to actual Lucide components
+const lucideIconMap: Record<string, LucideIcon> = {
+  'file': File,
+  'file-text': FileText,
+  'file-image': FileImage,
+  'file-video': FileVideo,
+  'file-audio': FileAudio,
+  'file-code': FileCode,
+  'folder': Folder,
+  'folder-open': FolderOpen,
+  'archive': Archive,
+  'file-spreadsheet': FileSpreadsheet,
+  'file-type': FileType,
+  'settings': Settings,
+};
+import { cn } from '../../../lib/utils';
+import { FileBrowserItem, IconDefinition } from '../../types/FileBrowserTypes';
+
+export interface FileIconProps {
+  item: FileBrowserItem;
+  getItemIcon?: (item: FileBrowserItem) => IconDefinition;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  isExpanded?: boolean; // For folders in tree view
+}
+
+const sizeClasses = {
+  sm: 'w-4 h-4',
+  md: 'w-5 h-5',
+  lg: 'w-6 h-6',
+  xl: 'w-8 h-8',
+};
+
+// Default icon mapping based on file types and extensions
+const getDefaultIcon = (item: FileBrowserItem, isExpanded?: boolean): LucideIcon => {
+  if (item.type === 'directory') {
+    return isExpanded ? FolderOpen : Folder;
+  }
+
+  // Get file extension
+  const extension = item.name.split('.').pop()?.toLowerCase();
+  
+  // Code files
+  const codeExtensions = ['js', 'jsx', 'ts', 'tsx', 'py', 'java', 'cpp', 'c', 'cs', 'php', 'rb', 'go', 'rs', 'swift', 'kt', 'scala', 'html', 'css', 'scss', 'sass', 'less', 'vue', 'svelte'];
+  if (extension && codeExtensions.includes(extension)) {
+    return FileCode;
+  }
+
+  // Image files
+  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'ico', 'tiff', 'tif'];
+  if (extension && imageExtensions.includes(extension)) {
+    return FileImage;
+  }
+
+  // Video files
+  const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv', '3gp', 'm4v'];
+  if (extension && videoExtensions.includes(extension)) {
+    return FileVideo;
+  }
+
+  // Audio files
+  const audioExtensions = ['mp3', 'wav', 'flac', 'aac', 'ogg', 'wma', 'm4a', 'opus'];
+  if (extension && audioExtensions.includes(extension)) {
+    return FileAudio;
+  }
+
+  // Archive files
+  const archiveExtensions = ['zip', 'rar', '7z', 'tar', 'gz', 'bz2', 'xz', 'tgz'];
+  if (extension && archiveExtensions.includes(extension)) {
+    return Archive;
+  }
+
+  // Spreadsheet files
+  const spreadsheetExtensions = ['xlsx', 'xls', 'csv', 'ods'];
+  if (extension && spreadsheetExtensions.includes(extension)) {
+    return FileSpreadsheet;
+  }
+
+  // Text files
+  const textExtensions = ['txt', 'md', 'mdx', 'rst', 'rtf', 'doc', 'docx', 'pdf'];
+  if (extension && textExtensions.includes(extension)) {
+    return FileText;
+  }
+
+  // Config files
+  const configExtensions = ['json', 'yaml', 'yml', 'toml', 'ini', 'conf', 'config', 'env'];
+  if (extension && configExtensions.includes(extension)) {
+    return Settings;
+  }
+
+  // Font files
+  const fontExtensions = ['ttf', 'otf', 'woff', 'woff2', 'eot'];
+  if (extension && fontExtensions.includes(extension)) {
+    return FileType;
+  }
+
+  // Default fallback
+  return File;
+};
+
+const FileIcon: React.FC<FileIconProps> = ({
+  item,
+  getItemIcon,
+  size = 'md',
+  className,
+  isExpanded = false,
+}) => {
+  // Try to get icon from provider first
+  let iconDefinition: IconDefinition | undefined;
+  
+  try {
+    iconDefinition = getItemIcon?.(item);
+  } catch (error) {
+    console.warn('Error getting icon from provider:', error);
+  }
+
+  // Determine icon to render
+  let IconComponent: LucideIcon;
+  let iconColor = '';
+
+  if (iconDefinition) {
+    // Use provider-defined icon
+    if (iconDefinition.type === 'lucide' && iconDefinition.name) {
+      // Map icon name to actual Lucide component
+      const MappedIcon = lucideIconMap[iconDefinition.name];
+      IconComponent = MappedIcon || getDefaultIcon(item, isExpanded);
+    } else if (iconDefinition.type === 'custom' && iconDefinition.component) {
+      // Custom React component (not implemented in this basic version)
+      IconComponent = getDefaultIcon(item, isExpanded);
+    } else {
+      IconComponent = getDefaultIcon(item, isExpanded);
+    }
+    
+    iconColor = iconDefinition.color || '';
+  } else {
+    // Use default icon mapping
+    IconComponent = getDefaultIcon(item, isExpanded);
+  }
+
+  return (
+    <IconComponent
+      className={cn(
+        sizeClasses[size],
+        iconColor && `text-[${iconColor}]`,
+        className
+      )}
+      aria-hidden="true"
+    />
+  );
+};
+
+export default FileIcon; 

package/src/file-browser/components/toolbar/ViewModeToggle.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { List, Grid3X3, FileImage } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import type { ViewModeType } from '../../types/ViewModeTypes';
+
+export interface ViewModeToggleProps {
+  currentMode: ViewModeType;
+  availableModes: ViewModeType[];
+  onModeChange?: (mode: ViewModeType) => void;
+  className?: string;
+  variant?: 'tabs' | 'buttons';
+  showLabels?: boolean;
+  disabled?: boolean;
+}
+
+interface ViewModeOption {
+  mode: ViewModeType;
+  icon: React.ReactNode;
+  label: string;
+  description: string;
+}
+
+const VIEW_MODE_OPTIONS: Partial<Record<ViewModeType, ViewModeOption>> = {
+  tree: {
+    mode: 'tree',
+    icon: <List className="w-4 h-4" />,
+    label: 'Tree',
+    description: 'Hierarchical tree view'
+  },
+  list: {
+    mode: 'list',
+    icon: <Grid3X3 className="w-4 h-4" />,
+    label: 'List',
+    description: 'Detailed list view'
+  },
+  thumbnail: {
+    mode: 'thumbnail',
+    icon: <FileImage className="w-4 h-4" />,
+    label: 'Thumbnails',
+    description: 'Thumbnail grid view'
+  }
+};
+
+const ViewModeToggle: React.FC<ViewModeToggleProps> = observer(({
+  currentMode,
+  availableModes,
+  onModeChange,
+  className,
+  variant = 'tabs',
+  showLabels = true,
+  disabled = false,
+}) => {
+  const handleModeChange = (mode: ViewModeType) => {
+    if (!disabled && mode !== currentMode) {
+      onModeChange?.(mode);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, mode: ViewModeType) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleModeChange(mode);
+    }
+    
+    // Arrow key navigation
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.preventDefault();
+      const currentIndex = availableModes.indexOf(currentMode);
+      let nextIndex: number;
+      
+      if (e.key === 'ArrowLeft') {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : availableModes.length - 1;
+      } else {
+        nextIndex = currentIndex < availableModes.length - 1 ? currentIndex + 1 : 0;
+      }
+      
+      const nextMode = availableModes[nextIndex];
+      if (nextMode) {
+        handleModeChange(nextMode);
+      }
+    }
+  };
+
+  // Keyboard shortcuts
+  React.useEffect(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      // Only handle shortcuts when not typing in inputs
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+
+      // Number keys 1-3 for view modes
+      if (e.key >= '1' && e.key <= '3') {
+        const index = parseInt(e.key) - 1;
+        const mode = availableModes[index];
+        if (mode && !disabled) {
+          e.preventDefault();
+          handleModeChange(mode);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleGlobalKeyDown);
+    return () => window.removeEventListener('keydown', handleGlobalKeyDown);
+  }, [availableModes, disabled, currentMode, onModeChange]);
+
+  if (availableModes.length <= 1) {
+    return null;
+  }
+
+  const renderTabButton = (modeOption: ViewModeOption, index: number) => {
+    const isActive = modeOption.mode === currentMode;
+    const isDisabled = disabled;
+    
+    return (
+      <button
+        key={modeOption.mode}
+        onClick={() => handleModeChange(modeOption.mode)}
+        onKeyDown={(e) => handleKeyDown(e, modeOption.mode)}
+        disabled={isDisabled}
+        className={cn(
+          'flex items-center gap-2 px-3 py-2 text-sm font-medium transition-colors',
+          'border-b-2 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
+          'disabled:opacity-50 disabled:cursor-not-allowed',
+          isActive
+            ? 'border-primary text-primary bg-primary/5'
+            : 'border-transparent text-muted-foreground hover:text-foreground hover:bg-muted',
+          !showLabels && 'px-2'
+        )}
+        role="tab"
+        aria-selected={isActive}
+        aria-controls={`view-${modeOption.mode}`}
+        title={`${modeOption.description} (${index + 1})`}
+      >
+        {modeOption.icon}
+        {showLabels && <span className="hidden sm:inline">{modeOption.label}</span>}
+      </button>
+    );
+  };
+
+  const renderToggleButton = (modeOption: ViewModeOption, index: number) => {
+    const isActive = modeOption.mode === currentMode;
+    const isDisabled = disabled;
+    
+    return (
+      <button
+        key={modeOption.mode}
+        onClick={() => handleModeChange(modeOption.mode)}
+        onKeyDown={(e) => handleKeyDown(e, modeOption.mode)}
+        disabled={isDisabled}
+        className={cn(
+          'flex items-center gap-2 px-3 py-2 text-sm font-medium transition-colors',
+          'border border-input focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
+          'disabled:opacity-50 disabled:cursor-not-allowed',
+          'first:rounded-l-md last:rounded-r-md first:border-r-0 last:border-l-0',
+          isActive
+            ? 'bg-primary text-primary-foreground border-primary'
+            : 'bg-background hover:bg-muted',
+          !showLabels && 'px-2'
+        )}
+        aria-pressed={isActive}
+        title={`${modeOption.description} (${index + 1})`}
+      >
+        {modeOption.icon}
+        {showLabels && <span className="hidden sm:inline">{modeOption.label}</span>}
+      </button>
+    );
+  };
+
+  const availableOptions = availableModes
+    .map(mode => VIEW_MODE_OPTIONS[mode])
+    .filter((option): option is ViewModeOption => option !== undefined);
+
+  if (variant === 'tabs') {
+    return (
+      <div
+        className={cn('flex items-center', className)}
+        role="tablist"
+        aria-label="View mode selection"
+      >
+        {availableOptions.map(renderTabButton)}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn('flex items-center', className)}
+      role="group"
+      aria-label="View mode selection"
+    >
+      {availableOptions.map(renderToggleButton)}
+    </div>
+  );
+});
+
+ViewModeToggle.displayName = 'ViewModeToggle';
+
+export default ViewModeToggle;