@anymux/ui-kit 0.1.0

package/src/tree/providers/SimpleTreeProvider.ts

@@ -0,0 +1,463 @@
+/**
+ * SimpleTreeProvider - Straightforward implementation for static tree data
+ * 
+ * This provider is designed for simple use cases where you have static
+ * tree data that doesn't require complex loading, error simulation, or
+ * dynamic generation. It's perfect for:
+ * - Static file trees
+ * - Simple navigation trees
+ * - Documentation structures
+ * - Basic hierarchical data display
+ */
+
+import { makeAutoObservable } from 'mobx';
+import type { TreeProvider, TreeSelectionInfo } from './TreeProvider';
+import type { TreeNodeData, TreeLoadResult, TreeLoadOptions, TreeContextMenuItem, TreeSelectionTheme } from '../types/TreeTypes';
+import { DEFAULT_SELECTION_THEME } from '../utils/SelectionTheme';
+
+export interface SimpleTreeProviderOptions {
+  /** Whether to enable multi-select functionality */
+  enableMultiSelect?: boolean;
+  /** Whether to enable drag and drop */
+  enableDragDrop?: boolean;
+  /** Static tree data to display */
+  data?: TreeNodeData[];
+  /** Custom context menu items */
+  contextMenuItems?: TreeContextMenuItem[];
+  /** Callback when nodes are selected */
+  onSelectionChange?: (selectionInfo: TreeSelectionInfo) => void;
+  /** Callback when context menu actions are triggered */
+  onContextMenuAction?: (actionId: string, nodes: TreeNodeData[]) => void;
+}
+
+export class SimpleTreeProvider implements TreeProvider {
+  // Provider metadata (required)
+  readonly id = 'simple-tree-provider';
+  readonly name = 'Simple Tree Provider';
+  readonly version = '1.0.0';
+  
+  // Configuration (required)
+  isMultiSelectEnabled = true;
+  readonly isDragDropEnabled = false;
+  readonly isVirtualizationEnabled = false;
+  readonly isTableViewEnabled = false;
+  useCheckboxSelection = false;
+  readonly allowPartialSelection = true;
+  readonly config = {};
+
+  // Observable selection theme
+  selectionTheme: TreeSelectionTheme = {
+    ...DEFAULT_SELECTION_THEME,
+    colorScheme: 'primary',
+    intensity: 'prominent',
+    focusStyle: 'ring',
+    animated: true,
+    persistSelection: true
+  };
+
+  // Data
+  private nodes: TreeNodeData[] = [];
+  private contextMenuItems: TreeContextMenuItem[] = [];
+
+  // Callbacks (optional)
+  onSelectionChange?: (selectionInfo: TreeSelectionInfo) => void;
+  onNodeExpansion?: (node: TreeNodeData, isExpanded: boolean) => void;
+  onNodeFocus?: (node: TreeNodeData | null) => void;
+  onContextMenuAction?: (actionId: string, nodes: TreeNodeData[]) => void;
+
+  constructor(options: SimpleTreeProviderOptions = {}) {
+    this.nodes = options.data ?? this.createDefaultData();
+    this.contextMenuItems = options.contextMenuItems ?? this.createDefaultContextMenu();
+    this.onSelectionChange = options.onSelectionChange;
+    this.onContextMenuAction = options.onContextMenuAction;
+    makeAutoObservable(this, {
+      id: false,
+      name: false,
+      version: false,
+      isDragDropEnabled: false,
+      isVirtualizationEnabled: false,
+      isTableViewEnabled: false,
+      config: false,
+      // Make isMultiSelectEnabled and useCheckboxSelection observable
+      // isMultiSelectEnabled: true (default - observable)
+      // useCheckboxSelection: true (default - observable)
+    });
+  }
+  
+  /**
+   * Load root nodes
+   */
+  async loadNodes(options?: TreeLoadOptions): Promise<TreeLoadResult> {
+    // Simple provider returns static data immediately
+    return {
+      nodes: this.nodes,
+      hasMore: false,
+      totalCount: this.nodes.length
+    };
+  }
+  
+  /**
+   * Load children for a specific node
+   */
+  async loadChildren(node: TreeNodeData, options?: TreeLoadOptions): Promise<TreeLoadResult> {
+    // Children are already loaded in the static data structure
+    const children = node.children || [];
+    
+    return {
+      nodes: children,
+      hasMore: false,
+      totalCount: children.length
+    };
+  }
+  
+  /**
+   * Refresh/reload nodes
+   */
+  async refresh(path?: string): Promise<TreeLoadResult> {
+    // For static provider, refresh just returns current data
+    if (path) {
+      // Find specific node to refresh
+      const node = this.findNodeByPath(path);
+      if (node) {
+        return this.loadChildren(node);
+      }
+    }
+    
+    // Refresh all data
+    return this.loadNodes();
+  }
+  
+  /**
+   * Get context menu for a single node
+   */
+  getNodeContextMenu(node: TreeNodeData): TreeContextMenuItem[] {
+    return this.contextMenuItems.filter(item => {
+      // Show different items based on node type
+      if (item.id === 'expand' || item.id === 'collapse') {
+        return node.hasChildren || (node.children && node.children.length > 0);
+      }
+      if (item.id === 'open') {
+        return node.type === 'file';
+      }
+      return true; // Show other items for all nodes
+    });
+  }
+  
+  /**
+   * Get context menu for multiple selected nodes
+   */
+  getMultiNodeContextMenu(nodes: TreeNodeData[]): TreeContextMenuItem[] {
+    return this.contextMenuItems.filter(item => {
+      // Only show actions that work on multiple items
+      return ['delete', 'copy', 'cut', 'properties'].includes(item.id);
+    });
+  }
+
+  /**
+   * Get selection theme configuration
+   */
+  getSelectionTheme(): TreeSelectionTheme {
+    return this.selectionTheme;
+  }
+  
+  /**
+   * Update the static data
+   */
+  setData(data: TreeNodeData[]): void {
+    this.nodes = data;
+  }
+  
+  /**
+   * Get current data
+   */
+  getData(): TreeNodeData[] {
+    return this.nodes;
+  }
+  
+  /**
+   * Add a new node to the tree
+   */
+  addNode(parentPath: string | null, newNode: TreeNodeData): boolean {
+    if (parentPath === null) {
+      // Add to root
+      this.nodes.push(newNode);
+      return true;
+    }
+    
+    // Find parent and add to its children
+    const parent = this.findNodeByPath(parentPath);
+    if (parent) {
+      if (!parent.children) {
+        parent.children = [];
+      }
+      parent.children.push(newNode);
+      parent.hasChildren = true;
+      return true;
+    }
+    
+    return false;
+  }
+  
+  /**
+   * Remove a node from the tree
+   */
+  removeNode(nodePath: string): boolean {
+    // Try to remove from root level
+    const rootIndex = this.nodes.findIndex(node => node.path === nodePath);
+    if (rootIndex >= 0) {
+      this.nodes.splice(rootIndex, 1);
+      return true;
+    }
+    
+    // Find and remove from children
+    return this.removeNodeFromChildren(this.nodes, nodePath);
+  }
+  
+  /**
+   * Find a node by its path
+   */
+  findNodeByPath(path: string): TreeNodeData | null {
+    const searchNodes = (nodes: TreeNodeData[]): TreeNodeData | null => {
+      for (const node of nodes) {
+        if (node.path === path) {
+          return node;
+        }
+        if (node.children) {
+          const found = searchNodes(node.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+    
+    return searchNodes(this.nodes);
+  }
+  
+  /**
+   * Create default sample data
+   */
+  private createDefaultData(): TreeNodeData[] {
+    return [
+      {
+        id: 'documents',
+        name: 'Documents',
+        path: '/documents',
+        type: 'directory',
+        hasChildren: true,
+        children: [
+          {
+            id: 'reports',
+            name: 'Reports',
+            path: '/documents/reports',
+            type: 'directory',
+            hasChildren: true,
+            children: [
+              {
+                id: 'quarterly-report',
+                name: 'Quarterly Report.pdf',
+                path: '/documents/reports/quarterly-report.pdf',
+                type: 'file',
+                size: 1024000,
+                lastModified: new Date('2024-01-15')
+              },
+              {
+                id: 'annual-report',
+                name: 'Annual Report.pdf',
+                path: '/documents/reports/annual-report.pdf',
+                type: 'file',
+                size: 2048000,
+                lastModified: new Date('2024-01-10')
+              }
+            ]
+          },
+          {
+            id: 'presentations',
+            name: 'Presentations',
+            path: '/documents/presentations',
+            type: 'directory',
+            hasChildren: true,
+            children: [
+              {
+                id: 'product-demo',
+                name: 'Product Demo.pptx',
+                path: '/documents/presentations/product-demo.pptx',
+                type: 'file',
+                size: 5120000,
+                lastModified: new Date('2024-01-20')
+              }
+            ]
+          },
+          {
+            id: 'readme',
+            name: 'README.md',
+            path: '/documents/readme.md',
+            type: 'file',
+            size: 2048,
+            lastModified: new Date('2024-01-25')
+          }
+        ]
+      },
+      {
+        id: 'projects',
+        name: 'Projects',
+        path: '/projects',
+        type: 'directory',
+        hasChildren: true,
+        children: [
+          {
+            id: 'web-app',
+            name: 'Web Application',
+            path: '/projects/web-app',
+            type: 'directory',
+            hasChildren: true,
+            children: [
+              {
+                id: 'src',
+                name: 'src',
+                path: '/projects/web-app/src',
+                type: 'directory',
+                hasChildren: true,
+                children: [
+                  {
+                    id: 'app-ts',
+                    name: 'app.ts',
+                    path: '/projects/web-app/src/app.ts',
+                    type: 'file',
+                    size: 4096,
+                    lastModified: new Date('2024-01-24')
+                  },
+                  {
+                    id: 'components',
+                    name: 'components',
+                    path: '/projects/web-app/src/components',
+                    type: 'directory',
+                    hasChildren: false,
+                    children: []
+                  }
+                ]
+              },
+              {
+                id: 'package-json',
+                name: 'package.json',
+                path: '/projects/web-app/package.json',
+                type: 'file',
+                size: 1024,
+                lastModified: new Date('2024-01-23')
+              }
+            ]
+          }
+        ]
+      },
+      {
+        id: 'downloads',
+        name: 'Downloads',
+        path: '/downloads',
+        type: 'directory',
+        hasChildren: false,
+        children: []
+      }
+    ];
+  }
+  
+  /**
+   * Create default context menu items
+   */
+  private createDefaultContextMenu(): TreeContextMenuItem[] {
+    return [
+      {
+        id: 'open',
+        label: 'Open',
+        icon: 'file-text',
+        handler: (node) => this.onContextMenuAction?.('open', [node])
+      },
+      {
+        id: 'expand',
+        label: 'Expand',
+        icon: 'chevron-down',
+        handler: (node) => this.onContextMenuAction?.('expand', [node])
+      },
+      {
+        id: 'collapse',
+        label: 'Collapse', 
+        icon: 'chevron-right',
+        handler: (node) => this.onContextMenuAction?.('collapse', [node])
+      },
+      { 
+        id: 'separator-1',
+        label: '',
+        type: 'separator' 
+      },
+      {
+        id: 'copy',
+        label: 'Copy',
+        icon: 'copy',
+        handler: (node) => this.onContextMenuAction?.('copy', [node])
+      },
+      {
+        id: 'cut',
+        label: 'Cut',
+        icon: 'scissors',
+        handler: (node) => this.onContextMenuAction?.('cut', [node])
+      },
+      {
+        id: 'delete',
+        label: 'Delete',
+        icon: 'trash-2',
+        handler: (node) => this.onContextMenuAction?.('delete', [node])
+      },
+      { 
+        id: 'separator-2',
+        label: '',
+        type: 'separator'
+      },
+      {
+        id: 'properties',
+        label: 'Properties',
+        icon: 'info',
+        handler: (node) => this.onContextMenuAction?.('properties', [node])
+      }
+    ];
+  }
+  
+  /**
+   * Helper method to remove node from children recursively
+   */
+  private removeNodeFromChildren(nodes: TreeNodeData[], targetPath: string): boolean {
+    for (const node of nodes) {
+      if (node.children) {
+        const childIndex = node.children.findIndex(child => child.path === targetPath);
+        if (childIndex >= 0) {
+          node.children.splice(childIndex, 1);
+          node.hasChildren = node.children.length > 0;
+          return true;
+        }
+        
+        if (this.removeNodeFromChildren(node.children, targetPath)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Update selection theme reactively
+   */
+  updateSelectionTheme = (theme: Partial<TreeSelectionTheme>) => {
+    this.selectionTheme = { ...this.selectionTheme, ...theme };
+  };
+
+  /**
+   * Update multi-select setting
+   */
+  setMultiSelectEnabled = (enabled: boolean) => {
+    this.isMultiSelectEnabled = enabled;
+  };
+
+  /**
+   * Update checkbox selection setting
+   */
+  setCheckboxSelection = (enabled: boolean) => {
+    this.useCheckboxSelection = enabled;
+  };
+}