@anymux/ui-kit 0.1.0

package/src/tree/components/Tree.tsx

@@ -0,0 +1,283 @@
+/**
+ * Tree - Main tree component that renders nodes and manages UI states
+ * 
+ * This component follows the observer pattern to react to TreeModel changes.
+ * It handles loading states, errors, and renders the tree structure.
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { TreeModel } from '../models/TreeModel';
+import { TreeNodeList } from './TreeNodeList';
+import { TreeContextMenu } from './TreeContextMenu';
+import type { TreeProvider } from '../providers/TreeProvider';
+import type { TreeLoadOptions, TreeNodeData } from '../types/TreeTypes';
+
+export interface TreeProps {
+  /** Provider that supplies tree data and operations */
+  provider: TreeProvider;
+
+  /** Optional pre-created TreeModel (if provided, component won't create its own) */
+  model?: TreeModel;
+
+  /** Optional loading options to pass to the provider */
+  loadOptions?: TreeLoadOptions;
+
+  /** Additional CSS classes to apply to the tree container */
+  className?: string;
+}
+
+/**
+ * Tree Component - Reactive tree display with loading states
+ *
+ * This is the main tree component that:
+ * - Creates and manages TreeModel
+ * - Shows loading/error states
+ * - Renders tree nodes
+ * - Follows MobX observer pattern for reactivity
+ * - Handles keyboard navigation
+ */
+export const Tree = observer<TreeProps>(({ provider, model, loadOptions, className }) => {
+  const [internalModel] = useState(() => model || new TreeModel(provider));
+  const treeModel = model || internalModel;
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  // Load data on mount and when loadOptions change (only if using internal model)
+  useEffect(() => {
+    if (!model) {
+      treeModel.loadNodes(loadOptions);
+    }
+  }, [treeModel, loadOptions, model]);
+
+  // Get flattened list of all visible nodes for navigation
+  const getFlattenedNodes = (): TreeNodeData[] => {
+    const result: TreeNodeData[] = [];
+    
+    const processNodes = (nodes: TreeNodeData[]) => {
+      for (const node of nodes) {
+        result.push(node);
+        // Add children if node is expanded
+        if (treeModel.isNodeExpanded(node.id) && node.children && node.children.length > 0) {
+          processNodes(node.children);
+        }
+      }
+    };
+    
+    processNodes(treeModel.nodes);
+    return result;
+  };
+
+  // Navigate to node by index in flattened list
+  const navigateToNode = (targetIndex: number) => {
+    const flatNodes = getFlattenedNodes();
+    if (targetIndex >= 0 && targetIndex < flatNodes.length) {
+      const targetNode = flatNodes[targetIndex];
+      if (targetNode) {
+        treeModel.focusedNode = targetNode.id;
+        // Also select the node (following common tree behavior)
+        treeModel.selectNode(targetNode);
+      }
+    }
+  };
+
+  // Find current focused node index
+  const getCurrentNodeIndex = (): number => {
+    if (!treeModel.focusedNode) return -1;
+    const flatNodes = getFlattenedNodes();
+    return flatNodes.findIndex(node => node.id === treeModel.focusedNode);
+  };
+
+  // Get parent node of current focused node
+  const getParentNode = (nodeId: string): TreeNodeData | null => {
+    const findParent = (nodes: TreeNodeData[], targetId: string, parentNode: TreeNodeData | null = null): TreeNodeData | null => {
+      for (const node of nodes) {
+        if (node.id === targetId) {
+          return parentNode;
+        }
+        if (node.children && node.children.length > 0) {
+          const parent = findParent(node.children, targetId, node);
+          if (parent) return parent;
+        }
+      }
+      return null;
+    };
+    
+    return findParent(treeModel.nodes, nodeId);
+  };
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // Only handle if tree is focused or if we have a focused node
+      if (!treeRef.current?.contains(document.activeElement) && !treeModel.focusedNode) {
+        return;
+      }
+
+      const currentIndex = getCurrentNodeIndex();
+      const flatNodes = getFlattenedNodes();
+      const currentNode = treeModel.focusedNode ? treeModel.nodeMap.get(treeModel.focusedNode) : null;
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          if (currentIndex < flatNodes.length - 1) {
+            navigateToNode(currentIndex + 1);
+          }
+          break;
+
+        case 'ArrowUp':
+          event.preventDefault();
+          if (currentIndex > 0) {
+            navigateToNode(currentIndex - 1);
+          }
+          break;
+
+        case 'ArrowRight':
+          event.preventDefault();
+          if (currentNode) {
+            if (currentNode.hasChildren || (currentNode.children && currentNode.children.length > 0)) {
+              if (!treeModel.isNodeExpanded(currentNode.id)) {
+                // Expand the node
+                treeModel.expandNode(currentNode);
+              } else if (currentNode.children && currentNode.children.length > 0) {
+                // Move to first child
+                const firstChild = currentNode.children[0];
+                if (firstChild) {
+                  treeModel.focusedNode = firstChild.id;
+                  treeModel.selectNode(firstChild);
+                }
+              }
+            }
+          }
+          break;
+
+        case 'ArrowLeft':
+          event.preventDefault();
+          if (currentNode) {
+            if (treeModel.isNodeExpanded(currentNode.id) && (currentNode.hasChildren || (currentNode.children && currentNode.children.length > 0))) {
+              // Collapse the node
+              treeModel.collapseNode(currentNode);
+            } else {
+              // Move to parent node
+              const parentNode = getParentNode(currentNode.id);
+              if (parentNode) {
+                treeModel.focusedNode = parentNode.id;
+                treeModel.selectNode(parentNode);
+              }
+            }
+          }
+          break;
+
+        case 'Home':
+          event.preventDefault();
+          if (flatNodes.length > 0) {
+            navigateToNode(0);
+          }
+          break;
+
+        case 'End':
+          event.preventDefault();
+          if (flatNodes.length > 0) {
+            navigateToNode(flatNodes.length - 1);
+          }
+          break;
+
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          if (currentNode) {
+            if (currentNode.hasChildren || (currentNode.children && currentNode.children.length > 0)) {
+              treeModel.toggleExpansion(currentNode);
+            }
+          }
+          break;
+
+        case 'a':
+          // Ctrl+A or Cmd+A to select all (when multi-select is enabled)
+          if ((event.ctrlKey || event.metaKey) && treeModel.provider.isMultiSelectEnabled) {
+            event.preventDefault();
+            treeModel.selectAll();
+          }
+          break;
+        
+        case 'Escape':
+          event.preventDefault();
+          treeModel.clearSelection();
+          treeModel.hideContextMenu();
+          break;
+
+        default:
+          // Let other keys pass through
+          break;
+      }
+    };
+    
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [treeModel]);
+
+  // Auto-focus first node if no node is focused and we have nodes
+  useEffect(() => {
+    if (!treeModel.focusedNode && treeModel.hasNodes && treeModel.nodes.length > 0) {
+      const firstNode = treeModel.nodes[0];
+      if (firstNode) {
+        treeModel.focusedNode = firstNode.id;
+      }
+    }
+  }, [treeModel.hasNodes, treeModel.nodes.length, treeModel.focusedNode]);
+  
+  return (
+    <div 
+      ref={treeRef}
+      className={`h-full overflow-hidden focus-within:outline-none ${className || ''}`}
+      tabIndex={0}
+      role="tree"
+      aria-label="File tree"
+    >
+      {treeModel.isLoading && (
+        <div className="p-4 text-center text-muted-foreground" role="status" aria-live="polite">
+          <div className="inline-flex items-center gap-2">
+            <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
+            <span>Loading tree...</span>
+          </div>
+        </div>
+      )}
+      
+      {!treeModel.isLoading && treeModel.errors.size > 0 && (
+        <div className="p-4 text-red-600 bg-red-50 border-l-4 border-red-400" role="alert">
+          {Array.from(treeModel.errors.entries()).map(([key, error]) => (
+            <div key={key} className="flex items-start gap-2">
+              <span className="font-semibold">Error:</span>
+              <span>{error.message}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      
+      {!treeModel.isLoading && treeModel.errors.size === 0 && !treeModel.hasNodes && (
+        <div className="p-4 text-center text-muted-foreground" role="status">
+          <span>No items to display</span>
+        </div>
+      )}
+      
+      {!treeModel.isLoading && treeModel.hasNodes && (
+        <div className="h-full overflow-auto">
+          <TreeNodeList 
+            treeModel={treeModel}
+            nodes={treeModel.nodes}
+            depth={0}
+          />
+        </div>
+      )}
+      
+      {/* Context Menu */}
+      <TreeContextMenu
+        items={treeModel.contextMenuItems}
+        position={treeModel.contextMenuPosition}
+        visible={treeModel.contextMenuVisible}
+        onClose={() => treeModel.hideContextMenu()}
+        onItemClick={(menuItem) => treeModel.handleContextMenuAction(menuItem)}
+      />
+    </div>
+  );
+}); 

package/src/tree/components/TreeCheckbox.tsx

@@ -0,0 +1,147 @@
+/**
+ * TreeCheckbox - 3-state checkbox component for tree selection
+ * 
+ * Supports three states:
+ * - unchecked (false): No children selected
+ * - checked (true): All children selected  
+ * - indeterminate (mixed): Some children selected
+ */
+
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Check, Minus } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { logger } from '../utils/logger';
+
+export type CheckboxState = 'unchecked' | 'checked' | 'indeterminate';
+
+export interface TreeCheckboxProps {
+  /** Current checkbox state */
+  state: CheckboxState;
+  
+  /** Callback when checkbox is clicked */
+  onChange: (newState: CheckboxState) => void;
+  
+  /** Whether the checkbox is disabled */
+  disabled?: boolean;
+  
+  /** Additional CSS classes */
+  className?: string;
+  
+  /** ARIA label for accessibility */
+  ariaLabel?: string;
+  
+  /** Size of the checkbox */
+  size?: 'sm' | 'md' | 'lg';
+  
+  /** Node ID for logging purposes */
+  nodeId?: string;
+}
+
+/**
+ * TreeCheckbox Component - 3-state checkbox for tree selection
+ */
+export const TreeCheckbox = observer<TreeCheckboxProps>(({
+  state,
+  onChange,
+  disabled = false,
+  className,
+  ariaLabel,
+  size = 'md',
+  nodeId = 'unknown'
+}) => {
+  logger.rendering('TreeCheckbox', nodeId, { 
+    state, 
+    disabled, 
+    size,
+    hasOnChange: !!onChange 
+  });
+
+  const handleClick = (event: React.MouseEvent) => {
+    event.stopPropagation(); // Prevent node selection
+    
+    logger.interaction('TreeCheckbox click', nodeId, { 
+      currentState: state, 
+      disabled,
+      eventType: 'click'
+    });
+    
+    if (disabled) {
+      logger.interaction('TreeCheckbox click ignored (disabled)', nodeId);
+      return;
+    }
+    
+    // Toggle logic: unchecked -> checked -> unchecked
+    // Indeterminate state can only be set programmatically
+    const newState = state === 'checked' ? 'unchecked' : 'checked';
+    
+    logger.interaction('TreeCheckbox state change', nodeId, { 
+      from: state, 
+      to: newState,
+      trigger: 'click'
+    });
+    
+    onChange(newState);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      
+      logger.interaction('TreeCheckbox keydown', nodeId, { 
+        key: event.key,
+        currentState: state 
+      });
+      
+      handleClick(event as any);
+    }
+  };
+
+  const sizeClasses = {
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4', 
+    lg: 'w-5 h-5'
+  };
+
+  const iconSizeClasses = {
+    sm: 'w-2 h-2',
+    md: 'w-3 h-3',
+    lg: 'w-4 h-4'
+  };
+
+  const computedClasses = cn(
+    'flex items-center justify-center rounded border cursor-pointer transition-all',
+    'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1',
+    sizeClasses[size],
+    // Base styles
+    'border-border bg-background',
+    // State-specific styles
+    state === 'checked' && 'bg-primary border-primary text-primary-foreground',
+    state === 'indeterminate' && 'bg-primary border-primary text-primary-foreground',
+    state === 'unchecked' && 'hover:border-primary/50',
+    // Disabled styles
+    disabled && 'opacity-50 cursor-not-allowed pointer-events-none',
+    className
+  );
+
+  logger.cssClasses(`TreeCheckbox-${nodeId}`, computedClasses, state === 'checked', false);
+
+  return (
+    <div
+      role="checkbox"
+      aria-checked={state === 'indeterminate' ? 'mixed' : state === 'checked'}
+      aria-label={ariaLabel}
+      className={computedClasses}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={disabled ? -1 : 0}
+    >
+      {state === 'checked' && (
+        <Check className={cn(iconSizeClasses[size], 'stroke-[3]')} />
+      )}
+      {state === 'indeterminate' && (
+        <Minus className={cn(iconSizeClasses[size], 'stroke-[3]')} />
+      )}
+    </div>
+  );
+}); 

package/src/tree/components/TreeContextMenu.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { TreeContextMenuItem } from '../types/TreeTypes';
+
+/**
+ * Props for the TreeContextMenu component
+ */
+export interface TreeContextMenuProps {
+  /**
+   * Menu items to display
+   */
+  items: TreeContextMenuItem[];
+  
+  /**
+   * Position of the context menu
+   */
+  position: { x: number; y: number };
+  
+  /**
+   * Whether the menu is visible
+   */
+  visible: boolean;
+  
+  /**
+   * Callback when menu is closed
+   */
+  onClose: () => void;
+  
+  /**
+   * Callback when menu item is clicked
+   */
+  onItemClick: (menuItem: TreeContextMenuItem) => void;
+  
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+/**
+ * TreeContextMenu - Context menu component for tree nodes
+ * 
+ * Features:
+ * - Renders context menu items with proper styling (no icons)
+ * - Handles click outside to close
+ * - Supports separators and disabled items
+ * - Positioned absolutely at cursor position
+ * - Keyboard navigation support
+ */
+export const TreeContextMenu = observer<TreeContextMenuProps>(({
+  items,
+  position,
+  visible,
+  onClose,
+  onItemClick,
+  className = ''
+}) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Handle click outside to close menu
+  useEffect(() => {
+    if (!visible) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [visible, onClose]);
+
+  const handleItemClick = (item: TreeContextMenuItem, event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (item.disabled) return;
+
+    onItemClick(item);
+    onClose();
+  };
+
+  if (!visible) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      className={`
+        bg-popover text-popover-foreground rounded-md border p-1 shadow-md min-w-[160px]
+        fixed z-[100]
+        ${className}
+      `}
+      style={{
+        left: position.x,
+        top: position.y,
+      }}
+      role="menu"
+      aria-label="Context menu"
+    >
+      {items.map((item, index) => (
+        <React.Fragment key={item.id}>
+          <div
+            className={`
+              px-2 py-1.5 text-sm cursor-default hover:bg-accent hover:text-accent-foreground
+              flex items-center rounded-sm transition-colors duration-150
+              ${item.disabled ? 'opacity-50 cursor-not-allowed' : ''}
+            `}
+            onClick={(e) => handleItemClick(item, e)}
+            role="menuitem"
+            tabIndex={item.disabled ? -1 : 0}
+            aria-disabled={item.disabled}
+          >
+            <span className="flex-1">{item.label}</span>
+          </div>
+          
+          {item.separator && index < items.length - 1 && (
+            <div className="h-px bg-border my-1" role="separator" />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+});
+
+TreeContextMenu.displayName = 'TreeContextMenu';
+
+export default TreeContextMenu;