@anymux/ui-kit 0.1.0

package/src/tree/components/TreeTable.tsx

@@ -0,0 +1,382 @@
+/**
+ * TreeTable - Table component for displaying tree data in tabular format
+ * 
+ * Provides a table view of tree data with:
+ * - Hierarchical indentation in tree column
+ * - Sortable columns
+ * - Filterable columns  
+ * - Export functionality
+ * - Expand/collapse support
+ * - Selection support
+ */
+
+import React, { useMemo, useCallback, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ChevronRight, ChevronDown, ArrowUp, ArrowDown, ArrowUpDown, Download, Search } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { getSelectionClasses, getCustomColorVariables, DEFAULT_SELECTION_THEME } from '../utils/SelectionTheme';
+import type { TreeModel } from '../models/TreeModel';
+import type { TreeTableColumn, TreeNodeData } from '../types/TreeTypes';
+
+export interface TreeTableProps {
+  /** The tree model managing state */
+  treeModel: TreeModel;
+  
+  /** Table columns configuration */
+  columns?: TreeTableColumn[];
+  
+  /** Enable animations for expand/collapse transitions */
+  enableAnimations?: boolean;
+  
+  /** Additional CSS classes */
+  className?: string;
+  
+  /** Whether to show export functionality */
+  enableExport?: boolean;
+  
+  /** Whether to enable filtering */
+  enableFiltering?: boolean;
+  
+  /** Whether to enable sorting */
+  enableSorting?: boolean;
+}
+
+/**
+ * TreeTable Component - Table view of tree data
+ */
+export const TreeTable = observer<TreeTableProps>(({
+  treeModel,
+  columns: propColumns,
+  enableAnimations = true,
+  className,
+  enableExport = true,
+  enableFiltering = false,
+  enableSorting = true
+}) => {
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [filters, setFilters] = useState<Record<string, string>>({});
+  
+  // Default columns if none provided
+  const defaultColumns: TreeTableColumn[] = useMemo(() => [
+    {
+      id: 'name',
+      label: 'Name',
+      dataKey: 'name',
+      width: '100%',
+      sortable: true,
+      filterable: true,
+      isTreeColumn: true
+    }
+  ], []);
+  
+  const columns = propColumns || defaultColumns;
+  const isHeaderVisible = columns.length > 1 || enableFiltering || enableExport;
+  
+  // Flatten the tree into a list for table rendering
+  const tableData = useMemo(() => {
+    const flattenNode = (node: TreeNodeData, level: number = 0): Array<{ node: TreeNodeData; level: number }> => {
+      const result = [{ node, level }];
+      
+      if (treeModel.isNodeExpanded(node.id) && node.children) {
+        for (const child of node.children) {
+          result.push(...flattenNode(child, level + 1));
+        }
+      }
+      
+      return result;
+    };
+    
+    let data: Array<{ node: TreeNodeData; level: number }> = [];
+    const rootNodes = treeModel.nodes;
+    
+    for (const node of rootNodes) {
+      data.push(...flattenNode(node));
+    }
+    
+    // Apply filters
+    if (Object.values(filters).some(f => f.trim())) {
+      data = data.filter(({ node }) => {
+        return Object.entries(filters).every(([columnKey, filterValue]) => {
+          if (!filterValue.trim()) return true;
+          
+          const column = columns.find(c => c.id === columnKey);
+          if (!column) return true;
+          
+          let cellValue = '';
+          if (column.renderCell) {
+            // If custom renderer, use it to get the text value
+            const rendered = column.renderCell((node as any)[column.dataKey], node);
+            cellValue = typeof rendered === 'string' ? rendered : String(rendered || '');
+          } else if (column.formatValue) {
+            cellValue = column.formatValue((node as any)[column.dataKey], node);
+          } else {
+            cellValue = (node as any)[column.dataKey]?.toString() || '';
+          }
+          
+          return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+        });
+      });
+    }
+    
+    // Apply sorting
+    if (sortColumn) {
+      const column = columns.find(c => c.id === sortColumn);
+      if (column) {
+        data.sort((a, b) => {
+          let aValue = '';
+          let bValue = '';
+          
+          if (column.formatValue) {
+            aValue = column.formatValue((a.node as any)[column.dataKey], a.node);
+            bValue = column.formatValue((b.node as any)[column.dataKey], b.node);
+          } else {
+            aValue = (a.node as any)[column.dataKey]?.toString() || '';
+            bValue = (b.node as any)[column.dataKey]?.toString() || '';
+          }
+          
+          const compareResult = aValue.localeCompare(bValue);
+          return sortDirection === 'asc' ? compareResult : -compareResult;
+        });
+      }
+    }
+    
+    return data;
+  }, [treeModel.nodes, sortColumn, sortDirection, filters, columns, treeModel]);
+  
+  const handleSort = useCallback((columnKey: string) => {
+    if (sortColumn === columnKey) {
+      setSortDirection(prev => prev === 'asc' ? 'desc' : 'asc');
+    } else {
+      setSortColumn(columnKey);
+      setSortDirection('asc');
+    }
+  }, [sortColumn]);
+  
+  const handleExport = useCallback(() => {
+    const csvContent = [
+      // Header
+      columns.map(col => col.label).join(','),
+      // Rows
+      ...tableData.map(({ node }) => 
+        columns.map(col => {
+          let value = '';
+          if (col.formatValue) {
+            value = col.formatValue((node as any)[col.dataKey], node);
+          } else {
+            value = (node as any)[col.dataKey]?.toString() || '';
+          }
+          return `"${value.replace(/"/g, '""')}"`;
+        }).join(',')
+      )
+    ].join('\n');
+    
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    link.href = URL.createObjectURL(blob);
+    link.download = 'tree-data.csv';
+    link.click();
+  }, [tableData, columns]);
+
+  const selectionTheme = treeModel.provider.getSelectionTheme?.() || DEFAULT_SELECTION_THEME;
+
+  return (
+    <div className={cn('flex flex-col h-full', className)}>
+      {/* Header with controls */}
+      {isHeaderVisible && (
+        <div className="flex-shrink-0 p-3 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex items-center gap-2">
+              {enableFiltering && (
+                <div className="flex items-center gap-2">
+                  <Search className="w-4 h-4 text-muted-foreground" />
+                  <span className="text-sm text-muted-foreground">Filter:</span>
+                  {columns.filter(c => c.filterable).map(column => (
+                    <input
+                      key={column.id}
+                      type="text"
+                      placeholder={`Filter ${column.label}`}
+                      value={filters[column.id] || ''}
+                      onChange={(e) => setFilters(prev => ({ ...prev, [column.id]: e.target.value }))}
+                      className="px-2 py-1 text-sm border rounded-md w-32"
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+            
+            {enableExport && (
+              <button
+                onClick={handleExport}
+                className="flex items-center gap-2 px-3 py-1 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+              >
+                <Download className="w-4 h-4" />
+                Export CSV
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Table content */}
+      <div className="flex-1 overflow-auto">
+        <div className="min-w-full">
+          {/* Column headers - only show if more than one column */}
+          {columns.length > 1 && (
+            <div className="sticky top-0 bg-background border-b z-10">
+              <div className="flex">
+                {columns.map((column) => (
+                  <div
+                    key={column.id}
+                    className={cn(
+                      'px-2 py-2 text-sm font-medium text-muted-foreground',
+                      column.sortable && enableSorting && 'cursor-pointer hover:text-foreground',
+                      'flex items-center gap-1'
+                    )}
+                    style={{ width: column.width }}
+                    onClick={() => column.sortable && enableSorting && handleSort(column.id)}
+                  >
+                    <span>{column.label}</span>
+                    {column.sortable && enableSorting && (
+                      <div className="ml-auto">
+                        {sortColumn === column.id ? (
+                          sortDirection === 'asc' ? (
+                            <ArrowUp className="w-3 h-3" />
+                          ) : (
+                            <ArrowDown className="w-3 h-3" />
+                          )
+                        ) : (
+                          <ArrowUpDown className="w-3 h-3 opacity-50" />
+                        )}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Rows */}
+          <div>
+            {tableData.length === 0 ? (
+              <div className="p-8 text-center">
+                <p className="text-sm text-muted-foreground">
+                  {Object.values(filters).some(f => f.trim()) ? 'No results found for current filters' : 'No data available'}
+                </p>
+              </div>
+            ) : (
+              tableData.map(({ node, level }) => {
+                const isSelected = treeModel.isNodeSelected(node.id);
+                const isFocused = treeModel.focusedNode === node.id;
+                const isExpanded = treeModel.isNodeExpanded(node.id);
+                const hasChildren = node.hasChildren || (node.children && node.children.length > 0);
+                const useCheckboxes = treeModel.provider.useCheckboxSelection;
+                const customColorVars = getCustomColorVariables(selectionTheme);
+
+                return (
+                  <div
+                    key={node.id}
+                    className={cn(
+                      'flex w-full cursor-pointer group',
+                      getSelectionClasses(selectionTheme, isSelected, isFocused, !!useCheckboxes),
+                      useCheckboxes && 'select-none'
+                    )}
+                    style={customColorVars}
+                    onClick={(event) => {
+                      if (useCheckboxes) return;
+                      
+                      const isMultiSelectKeyPressed = event.ctrlKey || event.metaKey;
+                      
+                      if (treeModel.provider.isMultiSelectEnabled && isMultiSelectKeyPressed) {
+                        // Toggle selection for multi-select mode with Ctrl/Cmd
+                        if (isSelected) {
+                          treeModel.deselectNode(node);
+                        } else {
+                          treeModel.selectNode(node);
+                        }
+                      } else {
+                        // Single click without modifier
+                        if (treeModel.provider.isMultiSelectEnabled) {
+                          // In multi-select mode, single click replaces selection
+                          treeModel.clearSelection();
+                          treeModel.selectNode(node);
+                        } else {
+                          // In single-select mode, toggle selection
+                          if (isSelected) {
+                            treeModel.clearSelection();
+                          } else {
+                            treeModel.selectNode(node);
+                          }
+                        }
+                      }
+                    }}
+                    onDoubleClick={() => hasChildren && treeModel.toggleExpansion(node)}
+                  >
+                    {columns.map((column, columnIndex) => {
+                      let cellContent: React.ReactNode = '';
+                      
+                      if (column.renderCell) {
+                        cellContent = column.renderCell((node as any)[column.dataKey], node);
+                      } else if (column.formatValue) {
+                        cellContent = column.formatValue((node as any)[column.dataKey], node);
+                      } else {
+                        cellContent = (node as any)[column.dataKey]?.toString() || '';
+                      }
+
+                      // For tree column, add indentation and controls
+                      if (column.isTreeColumn) {
+                        return (
+                          <div
+                            key={column.id}
+                            className="flex items-center px-2 py-1 text-sm"
+                            style={{ width: column.width }}
+                          >
+                            {/* Indentation */}
+                            <div style={{ width: level * 16 }} className="flex-shrink-0" />
+
+                            {/* Expand/Collapse Icon */}
+                            <div className="flex-shrink-0 w-4 h-4 mr-1">
+                              {hasChildren && (
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    treeModel.toggleExpansion(node);
+                                  }}
+                                  className="w-4 h-4 flex items-center justify-center transition-transform duration-200 hover:bg-accent/20"
+                                >
+                                  {isExpanded ? (
+                                    <ChevronDown className="w-3 h-3" />
+                                  ) : (
+                                    <ChevronRight className="w-3 h-3" />
+                                  )}
+                                </button>
+                              )}
+                            </div>
+
+                            {/* Content */}
+                            <span className="flex-1 truncate">{cellContent}</span>
+                          </div>
+                        );
+                      }
+
+                      // Regular column
+                      return (
+                        <div
+                          key={column.id}
+                          className="px-2 py-1 text-sm truncate"
+                          style={{ width: column.width }}
+                        >
+                          {cellContent}
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              })
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}); 

package/src/tree/index.ts

@@ -0,0 +1,58 @@
+/**
+ * TreeComponent - Reusable tree component with MobX state management
+ * 
+ * A high-performance, accessible tree component that supports:
+ * - Multi-selection
+ * - Keyboard navigation
+ * - Context menus
+ * - Lazy loading
+ * - Custom node rendering
+ * - Drag and drop (future)
+ * - Virtualization (future)
+ */
+
+/**
+ * TreeComponent Module Exports
+ * 
+ * This file exports all public APIs for the TreeComponent system,
+ * including types, providers, models, and React components.
+ */
+
+// Core type definitions
+export * from './types/TreeTypes';
+
+// Provider interfaces
+export * from './providers/TreeProvider';
+export { TestTreeProvider } from './providers/TestTreeProvider';
+export { SimpleTreeProvider } from './providers/SimpleTreeProvider';
+
+// Models
+export * from './models/TreeModel';
+
+// Components
+export * from './components/Tree';
+export * from './components/TreeNodeList';
+export * from './components/TreeContextMenu';
+export * from './components/TreeTable';
+export { TreeCheckbox } from './components/TreeCheckbox';
+export type { CheckboxState } from './components/TreeCheckbox';
+// export * from './components/TreeNode'; 
+
+// Core Types
+export type { TreeNodeData, TreeLoadResult, TreeLoadOptions, TreeTableColumn, TreeTableSort, TreeTableExportOptions } from './types/TreeTypes';
+
+// Provider System
+export type { TreeProvider } from './providers/TreeProvider';
+
+// MobX Models
+export { TreeModel } from './models/TreeModel';
+
+// React Components  
+export { Tree } from './components/Tree';
+export type { TreeProps } from './components/Tree';
+export { TreeNodeList } from './components/TreeNodeList';
+export type { TreeNodeListProps } from './components/TreeNodeList';
+
+// Utilities
+export { getCustomColorVariables, getSelectionClasses, DEFAULT_SELECTION_THEME } from './utils/SelectionTheme';
+export { logger } from './utils/logger';