@anymux/ui-kit 0.1.0

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

@@ -0,0 +1,200 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { cn } from '../../../../lib/utils';
+import { FileBrowserItem } from '../../../types/FileBrowserTypes';
+import { TreeViewUIModel } from '../../../models/ui/TreeViewUIModel';
+import TreeNodeList from './TreeNodeList';
+
+export interface TreeViewProps {
+  items: FileBrowserItem[];
+  treeModel: TreeViewUIModel;
+  onItemClick?: (item: FileBrowserItem) => void;
+  onItemDoubleClick?: (item: FileBrowserItem) => void;
+  onItemActivate?: (item: FileBrowserItem) => void;
+  onSelectionChange?: (selectedItems: FileBrowserItem[]) => void;
+  onPathChange?: (path: string) => void;
+  selectedItemIds?: Set<string>;
+  focusedItemId?: string;
+  className?: string;
+  getItemIcon?: (item: FileBrowserItem) => any;
+  loadFolder?: (path: string) => Promise<FileBrowserItem[]>;
+  virtualization?: boolean;
+  maxHeight?: number;
+}
+
+const TreeView: React.FC<TreeViewProps> = observer(({
+  items,
+  treeModel,
+  onItemClick,
+  onItemDoubleClick,
+  onItemActivate,
+  onSelectionChange,
+  onPathChange,
+  selectedItemIds = new Set<string>(),
+  focusedItemId,
+  className,
+  getItemIcon,
+  loadFolder,
+  virtualization = false,
+  maxHeight,
+}) => {
+  // Build hierarchical tree structure from flat items array
+  const buildTreeStructure = (items: FileBrowserItem[]): FileBrowserItem[] => {
+    const itemMap = new Map<string, FileBrowserItem>();
+    const rootItems: FileBrowserItem[] = [];
+    
+    // First pass: create map of all items
+    items.forEach(item => {
+      itemMap.set(item.path, { ...item, children: [] });
+    });
+    
+    // Second pass: build hierarchy
+    items.forEach(item => {
+      const itemCopy = itemMap.get(item.path);
+      if (!itemCopy) return;
+      
+      // Find parent path
+      const pathParts = item.path.split('/').filter(Boolean);
+      if (pathParts.length === 1) {
+        // Root level item
+        rootItems.push(itemCopy);
+      } else {
+        // Find parent
+        const parentPath = '/' + pathParts.slice(0, -1).join('/');
+        const parent = itemMap.get(parentPath);
+        if (parent && parent.children) {
+          parent.children.push(itemCopy);
+        } else {
+          // Parent not found, treat as root item
+          rootItems.push(itemCopy);
+        }
+      }
+    });
+    
+    return rootItems;
+  };
+
+  const treeItems = React.useMemo(() => {
+    return buildTreeStructure(items);
+  }, [items]);
+
+  const handleItemClick = (item: FileBrowserItem) => {
+    onItemClick?.(item);
+    
+    // If it's a directory, handle expansion based on settings
+    if (item.type === 'directory') {
+      if (treeModel.expandOnSingleClick) {
+        treeModel.toggleFolder(item.path);
+        
+        // Load folder contents if needed
+        if (!treeModel.isFolderExpanded(item.path) && loadFolder) {
+          handleFolderLoad(item.path);
+        }
+      }
+    }
+  };
+
+  const handleItemDoubleClick = (item: FileBrowserItem) => {
+    onItemDoubleClick?.(item);
+    onItemActivate?.(item);
+    
+    // Handle directory navigation or file activation
+    if (item.type === 'directory') {
+      // Navigate to directory or toggle expansion
+      if (treeModel.collapseOnSecondClick && treeModel.isFolderExpanded(item.path)) {
+        treeModel.collapseFolder(item.path);
+      } else {
+        onPathChange?.(item.path);
+      }
+    } else {
+      // File activation
+      onItemActivate?.(item);
+    }
+  };
+
+  const handleFolderLoad = async (folderPath: string) => {
+    if (!loadFolder) return;
+    
+    try {
+      treeModel.logger?.info(`Loading folder: ${folderPath}`);
+      const folderItems = await loadFolder(folderPath);
+      
+      // Update the item in the tree to include children
+      // This would need integration with the parent model
+      treeModel.logger?.info(`Loaded ${folderItems.length} items for ${folderPath}`);
+    } catch (error) {
+      treeModel.logger?.error(`Failed to load folder ${folderPath}:`, error);
+    }
+  };
+
+  // Handle folder expansion when state changes
+  useEffect(() => {
+    const expandedFolders = treeModel.expandedFoldersArray;
+    
+    // Load contents for newly expanded folders
+    expandedFolders.forEach((folderPath: string) => {
+      // Check if folder needs loading (doesn't have children but should)
+      const item = items.find(item => item.path === folderPath);
+      if (item && 
+          item.type === 'directory' && 
+          (!item.children || item.children.length === 0) &&
+          item.hasChildren &&
+          loadFolder) {
+        handleFolderLoad(folderPath);
+      }
+    });
+  }, [items, loadFolder]);
+
+  // Keyboard shortcuts
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case 'a':
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          treeModel.expandAll();
+        }
+        break;
+      case 'c':
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          treeModel.collapseAll();
+        }
+        break;
+    }
+  };
+
+  if (!treeItems || treeItems.length === 0) {
+    return (
+      <div className={cn('p-4 text-center text-muted-foreground', className)}>
+        <p className="text-sm">No folders or files to display</p>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      className={cn('tree-view h-full overflow-hidden', className)}
+      onKeyDown={handleKeyDown}
+      role="tree"
+      aria-label="File tree view"
+    >
+      <TreeNodeList
+        items={treeItems}
+        treeModel={treeModel}
+        onItemClick={handleItemClick}
+        onItemDoubleClick={handleItemDoubleClick}
+        onSelectionChange={onSelectionChange}
+        selectedItemIds={selectedItemIds}
+        focusedItemId={focusedItemId}
+        getItemIcon={getItemIcon}
+        virtualization={virtualization}
+        maxHeight={maxHeight}
+        className="h-full"
+      />
+    </div>
+  );
+});
+
+TreeView.displayName = 'TreeView';
+
+export default TreeView; 

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

@@ -0,0 +1,339 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { cn } from '../../../../lib/utils';
+import { FileBrowserItem } from '../../../types/FileBrowserTypes';
+import { TreemapViewUIModel, TreemapNode } from '../../../models/ui/TreemapViewUIModel';
+import { EmptyState } from '@anymux/ui/components/empty-state';
+
+export interface TreemapViewProps {
+  items: FileBrowserItem[];
+  treemapModel: TreemapViewUIModel;
+  onItemClick?: (item: FileBrowserItem) => void;
+  onItemDoubleClick?: (item: FileBrowserItem) => void;
+  onItemActivate?: (item: FileBrowserItem) => void;
+  onSelectionChange?: (selectedItems: FileBrowserItem[]) => void;
+  selectedItemIds?: Set<string>;
+  focusedItemId?: string;
+  className?: string;
+  maxHeight?: number;
+}
+
+const TreemapView: React.FC<TreemapViewProps> = observer(({
+  items,
+  treemapModel,
+  onItemClick,
+  onItemDoubleClick,
+  onItemActivate,
+  onSelectionChange,
+  selectedItemIds = new Set<string>(),
+  focusedItemId,
+  className,
+  maxHeight,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+  const [treemapNodes, setTreemapNodes] = useState<TreemapNode[]>([]);
+
+  // Handle container resize
+  useEffect(() => {
+    const updateContainerSize = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerSize({
+          width: rect.width,
+          height: rect.height || 400, // Default height
+        });
+      }
+    };
+
+    updateContainerSize();
+    
+    const resizeObserver = new ResizeObserver(updateContainerSize);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  // Calculate treemap layout when items or container size changes
+  useEffect(() => {
+    if (containerSize.width > 0 && containerSize.height > 0 && items.length > 0) {
+      const nodes = treemapModel.calculateTreemapLayout(
+        items,
+        containerSize.width,
+        containerSize.height
+      );
+      setTreemapNodes(nodes);
+    }
+  }, [items, containerSize, treemapModel]);
+
+  const handleItemClick = (item: FileBrowserItem, event: React.MouseEvent) => {
+    event.stopPropagation();
+    onItemClick?.(item);
+  };
+
+  const handleItemDoubleClick = (item: FileBrowserItem, event: React.MouseEvent) => {
+    event.stopPropagation();
+    onItemDoubleClick?.(item);
+    onItemActivate?.(item);
+
+    // Handle drill-down for directories
+    if (item.type === 'directory' && treemapModel.enableDrillDown) {
+      treemapModel.drillDown(item.id);
+    }
+  };
+
+  const handleNodeClick = (node: TreemapNode, event: React.MouseEvent) => {
+    const item = items.find(item => item.id === node.id);
+    if (item) {
+      handleItemClick(item, event);
+    }
+  };
+
+  const handleNodeDoubleClick = (node: TreemapNode, event: React.MouseEvent) => {
+    const item = items.find(item => item.id === node.id);
+    if (item) {
+      handleItemDoubleClick(item, event);
+    }
+  };
+
+  const renderTreemapNode = (node: TreemapNode) => {
+    const isSelected = selectedItemIds.has(node.id);
+    const isFocused = focusedItemId === node.id;
+    const item = items.find(item => item.id === node.id);
+
+    if (!item || node.width < treemapModel.effectiveMinTileSize || node.height < treemapModel.effectiveMinTileSize) {
+      return null;
+    }
+
+    const showLabel = treemapModel.showLabels && 
+                     node.width > 60 && 
+                     node.height > 30;
+
+    const showSize = treemapModel.showSizes && 
+                    node.width > 80 && 
+                    node.height > 50;
+
+    return (
+      <div
+        key={node.id}
+        className={cn(
+          'absolute cursor-pointer transition-all duration-200',
+          'border border-border/50 hover:border-border',
+          'flex flex-col items-center justify-center text-center',
+          isSelected && 'ring-2 ring-primary ring-offset-1',
+          isFocused && 'ring-2 ring-offset-2 ring-primary'
+        )}
+        style={{
+          left: node.x,
+          top: node.y,
+          width: node.width,
+          height: node.height,
+          backgroundColor: node.color || '#e5e7eb',
+          borderWidth: treemapModel.borderWidth,
+          padding: treemapModel.padding,
+        }}
+        onClick={(e) => handleNodeClick(node, e)}
+        onDoubleClick={(e) => handleNodeDoubleClick(node, e)}
+        tabIndex={0}
+        role="button"
+        aria-label={`${node.type === 'directory' ? 'Folder' : 'File'}: ${node.name}`}
+        aria-selected={isSelected}
+        title={`${node.name}${showSize ? ` (${formatFileSize(node.size)})` : ''}`}
+      >
+        {/* Label */}
+        {showLabel && (
+          <div className="text-xs font-medium text-foreground/80 truncate px-1 max-w-full">
+            {node.name}
+          </div>
+        )}
+
+        {/* Size */}
+        {showSize && (
+          <div className="text-xs text-foreground/60 mt-1">
+            {formatFileSize(node.size)}
+          </div>
+        )}
+
+        {/* Directory indicator */}
+        {node.type === 'directory' && node.width > 40 && node.height > 40 && (
+          <div className="absolute top-1 right-1 w-3 h-3 bg-primary/60 rounded-full" />
+        )}
+
+        {/* Selection overlay */}
+        {isSelected && (
+          <div className="absolute inset-0 bg-primary/20 pointer-events-none" />
+        )}
+      </div>
+    );
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+    
+    return `${size.toFixed(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+  };
+
+  const handleContainerClick = (event: React.MouseEvent) => {
+    // Clear selection when clicking on empty space
+    if (event.target === event.currentTarget) {
+      onSelectionChange?.([]);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    switch (event.key) {
+      case 'Escape':
+        if (treemapModel.currentRoot) {
+          treemapModel.drillUp();
+        }
+        break;
+      case 'r':
+        if (event.ctrlKey || event.metaKey) {
+          event.preventDefault();
+          treemapModel.resetView();
+        }
+        break;
+      case '+':
+      case '=':
+        if (treemapModel.enableZoom) {
+          event.preventDefault();
+          treemapModel.setZoomLevel(treemapModel.zoomLevel * 1.2);
+        }
+        break;
+      case '-':
+        if (treemapModel.enableZoom) {
+          event.preventDefault();
+          treemapModel.setZoomLevel(treemapModel.zoomLevel / 1.2);
+        }
+        break;
+    }
+  };
+
+  if (!items || items.length === 0) {
+    return (
+      <div className={cn('h-full', className)}>
+        <EmptyState
+          preset="empty-folder"
+          className="h-full"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      ref={containerRef}
+      className={cn('treemap-view h-full relative overflow-hidden', className)}
+      onClick={handleContainerClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="application"
+      aria-label="Treemap view"
+      style={{
+        ...(maxHeight && { maxHeight }),
+        transform: `scale(${treemapModel.zoomLevel})`,
+        transformOrigin: 'top left',
+      }}
+    >
+      {/* Treemap nodes */}
+      {treemapNodes.map(renderTreemapNode)}
+
+      {/* Controls overlay */}
+      <div className="absolute top-2 right-2 flex gap-2 bg-background/80 backdrop-blur-sm rounded-md p-2">
+        {/* Zoom controls */}
+        {treemapModel.enableZoom && (
+          <div className="flex gap-1">
+            <button
+              onClick={() => treemapModel.setZoomLevel(treemapModel.zoomLevel * 1.2)}
+              className="w-6 h-6 flex items-center justify-center text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90"
+              title="Zoom in (+)"
+            >
+              +
+            </button>
+            <button
+              onClick={() => treemapModel.setZoomLevel(treemapModel.zoomLevel / 1.2)}
+              className="w-6 h-6 flex items-center justify-center text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90"
+              title="Zoom out (-)"
+            >
+              -
+            </button>
+          </div>
+        )}
+
+        {/* Reset button */}
+        <button
+          onClick={() => treemapModel.resetView()}
+          className="px-2 py-1 text-xs bg-secondary text-secondary-foreground rounded hover:bg-secondary/90"
+          title="Reset view (Ctrl+R)"
+        >
+          Reset
+        </button>
+
+        {/* Drill up button */}
+        {treemapModel.currentRoot && (
+          <button
+            onClick={() => treemapModel.drillUp()}
+            className="px-2 py-1 text-xs bg-secondary text-secondary-foreground rounded hover:bg-secondary/90"
+            title="Go back (Esc)"
+          >
+            Back
+          </button>
+        )}
+      </div>
+
+      {/* Color scheme legend */}
+      <div className="absolute bottom-2 left-2 bg-background/80 backdrop-blur-sm rounded-md p-2">
+        <div className="text-xs font-medium text-foreground mb-1">
+          Color: {treemapModel.colorScheme}
+        </div>
+        <div className="flex gap-2 text-xs text-muted-foreground">
+          {treemapModel.colorScheme === 'type' && (
+            <>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 bg-blue-500 rounded" />
+                <span>Folders</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 bg-green-500 rounded" />
+                <span>Files</span>
+              </div>
+            </>
+          )}
+          {treemapModel.colorScheme === 'size' && (
+            <>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 bg-green-400 rounded" />
+                <span>Small</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 bg-yellow-500 rounded" />
+                <span>Medium</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <div className="w-3 h-3 bg-red-500 rounded" />
+                <span>Large</span>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+TreemapView.displayName = 'TreemapView';
+
+export default TreemapView; 

package/src/file-browser/context/FileBrowserContext.tsx

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+export interface FileBrowserContextValue {
+  renameState: { itemId: string; currentName: string; source: 'list' | 'tree' } | null;
+  onRenameCommit: (newName: string) => void;
+  onRenameCancel: () => void;
+}
+
+export const FileBrowserContext = createContext<FileBrowserContextValue | null>(null);
+
+export function useFileBrowserContext() {
+  return useContext(FileBrowserContext);
+}

package/src/file-browser/examples/BasicUsage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FileBrowser } from '../components/FileBrowser';
+import { IFileSystem } from '@anymux/file-system';
+
+interface BasicUsageProps {
+  fileSystem: IFileSystem;
+}
+
+export const BasicUsage: React.FC<BasicUsageProps> = ({ fileSystem }) => {
+  return (
+    <div className="w-full h-96 border border-gray-300 rounded-lg">
+      <FileBrowser
+        fileSystem={fileSystem}
+        initialPath="/"
+        showBreadcrumbs
+        showNavigation
+      />
+    </div>
+  );
+};

package/src/file-browser/index.ts

@@ -0,0 +1,98 @@
+// Main component
+export { FileBrowser } from './components/FileBrowser';
+
+// Shared components
+export { default as FileBrowserItemComponent } from './components/shared/FileBrowserItem';
+export { ErrorBoundary, type ErrorBoundaryProps } from './components/shared/ErrorBoundary';
+export { default as FileIcon } from './components/shared/FileIcon';
+
+// Types
+export type {
+  FileBrowserProps,
+  FileBrowserItem,
+  FileBrowserItemDetails,
+  FileBrowserEventHandlers,
+  LoadingState,
+  ErrorState,
+  FilterCriteria,
+  SortCriteria,
+  NavigationState,
+  SelectionState,
+  IconDefinition,
+  PreviewData,
+  ItemChange
+} from './types/FileBrowserTypes';
+
+// Provider interface and implementations
+export type { IFileBrowserProvider, ProviderCapabilities } from './providers/IFileBrowserProvider';
+export { FileSystemProvider } from './providers/FileSystemProvider';
+export { GitRepositoryProvider } from './providers/GitRepositoryProvider';
+export { GitProvider } from './providers/GitProvider';
+
+// Models
+export { FileBrowserModel } from './models/FileBrowserModel';
+export { UploadModel } from './models/UploadModel';
+export type { UploadFileEntry } from './models/UploadModel';
+export { ViewerHostModel } from './models/ViewerHostModel';
+export { SelectionManagerModel } from './models/SelectionManagerModel';
+export { NavigationManagerModel } from './models/NavigationManagerModel';
+export { ToolbarManagerModel } from './models/ToolbarManagerModel';
+export { ViewModeManagerModel } from './models/ViewModeManagerModel';
+
+// Adapters
+export { FileSystemBridge } from './adapters/FileSystemBridge';
+
+// Providers (bridge)
+export { FileSystemTreeProvider } from './providers/FileSystemTreeProvider';
+export { FileSystemListProvider } from './providers/FileSystemListProvider';
+
+// Viewer registry and plugin API
+export { globalViewerRegistry, ViewerRegistry, viewerConfigToPlugin } from './registry/ViewerRegistry';
+export type { ViewerConfig, ViewerProps } from './registry/ViewerRegistry';
+export type { FileViewerPlugin, FileMatchContext, ResolvedViewer, ToolbarAction, KeyboardShortcut } from './registry/types';
+
+// ViewerHost component
+export { ViewerHost, type ViewerHostProps } from './components/ViewerHost';
+
+// UI Models
+export { TreeViewUIModel } from './models/ui/TreeViewUIModel';
+export { ListViewUIModel, type ColumnDefinition } from './models/ui/ListViewUIModel';
+export { ThumbnailViewUIModel } from './models/ui/ThumbnailViewUIModel';
+
+// Layout Components
+export { default as FileBrowserHeader, type FileBrowserHeaderProps } from './components/FileBrowserHeader';
+export { default as FileBrowserContent, type FileBrowserContentProps } from './components/FileBrowserContent';
+
+// View Components
+export { default as FileBrowserTreeView, type TreeViewProps as FileBrowserTreeViewProps } from './components/views/TreeView/TreeView';
+export { default as ListView, type ListViewProps } from './components/views/ListView/ListView';
+
+// Navigation Components
+export { default as NavigationButtons, type NavigationButtonsProps } from './components/navigation/NavigationButtons';
+
+// Toolbar Components
+export { default as ViewModeToggle, type ViewModeToggleProps } from './components/toolbar/ViewModeToggle';
+
+// View mode types (for extensions)
+export type {
+  ViewModeDefinition,
+  ViewModeCapabilities,
+  ViewModeSettings,
+  TreeViewSettings,
+  ListViewSettings,
+  ThumbnailViewSettings
+} from './types/ViewModeTypes';
+
+// Provider types
+export * from './types/ProviderTypes';
+
+// UI types (for custom components)
+export type {
+  UIComponentProps,
+  FileIconProps as FileIconUIProps,
+  BreadcrumbProps,
+  ToolbarActionConfig
+} from './types/UITypes';
+
+// Utils
+export { cn } from '../lib/utils';