@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/components/ui/data-display/tree.tsx

@@ -0,0 +1,602 @@
+import React, { useCallback, useMemo } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { 
+  TreeProps, 
+  TreeNode, 
+  TreeItemProps
+} from './types';
+
+// Simple icon components (inline SVG)
+const ChevronRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`tree__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+  </svg>
+);
+
+const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`tree__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+  </svg>
+);
+
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`tree__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+  </svg>
+);
+
+const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`tree__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
+  </svg>
+);
+
+const FolderIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`tree__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+  </svg>
+);
+
+const DocumentIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`tree__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+  </svg>
+);
+
+const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`tree__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+  </svg>
+);
+
+const MinusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
+  <svg
+    className={`tree__icon ${className}`}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+  </svg>
+);
+
+// Default color fallbacks for when theme is not available
+const getDefaultColors = () => ({
+  surface: { 
+    background: '#ffffff', 
+    surface: '#f3f4f6', 
+    border: '#d1d5db', 
+    divider: '#e5e7eb' 
+  },
+  text: { 
+    primary: '#111827', 
+    secondary: '#6b7280', 
+    muted: '#9ca3af', 
+    inverse: '#ffffff', 
+    onPrimary: '#ffffff', 
+    onSecondary: '#ffffff', 
+    onSurface: '#111827' 
+  },
+  interactive: { 
+    hover: '#f3f4f6', 
+    active: '#e5e7eb', 
+    focus: '#3b82f6', 
+    disabled: '#d1d5db' 
+  },
+  primary: { 500: '#3b82f6' },
+  semantic: { 
+    success: '#10b981', 
+    warning: '#f59e0b', 
+    error: '#ef4444', 
+    info: '#3b82f6' 
+  }
+});
+
+// Tree Search Bar
+const TreeSearchBar: React.FC<{
+  searchable: boolean;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  filterable: boolean;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+}> = ({
+  searchable,
+  searchValue,
+  onSearchChange,
+  filterable,
+  theme,
+  size
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+
+  const sizeClasses = {
+    sm: 'h-8 text-sm px-3',
+    md: 'h-10 text-base px-4',
+    lg: 'h-12 text-lg px-5'
+  };
+
+  if (!searchable && !filterable) return null;
+
+  return (
+    <div className="tree__search-filter">
+      {searchable && (
+        <div className="tree__search">
+          <div className="tree__search-icon">
+            <SearchIcon className="tree__icon" />
+          </div>
+          <input
+            type="text"
+            value={searchValue}
+            onChange={(e) => onSearchChange(e.target.value)}
+            placeholder="Search nodes..."
+            className={`w-full ${sizeClasses[size]} pl-10 pr-4 rounded-lg border outline-none`}
+            style={{
+              backgroundColor: colors.surface.background,
+              border: `1px solid ${colors.surface.border}`,
+              color: colors.text.primary
+            }}
+            onFocus={(e) => {
+              e.target.style.borderColor = colors.primary[500];
+              e.target.style.boxShadow = `0 0 0 3px ${colors.primary[500]}20`;
+            }}
+            onBlur={(e) => {
+              e.target.style.borderColor = colors.surface.border;
+              e.target.style.boxShadow = 'none';
+            }}
+          />
+        </div>
+      )}
+
+      {filterable && (
+        <button className="tree__filter-button">
+          <FilterIcon className="tree__icon" />
+          <span>Filter</span>
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Individual Tree Item Component
+const TreeItem: React.FC<TreeItemProps> = ({
+  node,
+  level = 0,
+  expandedKeys,
+  selectedKeys,
+  selectable,
+  expandable,
+  onToggleExpand,
+  onSelectionChange,
+  onClick,
+  theme,
+  size,
+  variant,
+  // draggable = false, // TODO: Implement drag and drop
+  // onDragStart, // TODO: Implement drag and drop
+  // onDragEnd, // TODO: Implement drag and drop
+  // onDrop, // TODO: Implement drag and drop
+  showLines = true,
+  showIcons = true
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // const colors = themeConfig?.colors || getDefaultColors();
+
+  const isExpanded = expandedKeys.includes(node.id);
+  const isSelected = selectedKeys.includes(node.id);
+  const hasChildren = node.children && node.children.length > 0;
+  const isClickable = !!onClick;
+
+  const iconSizes = {
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5'
+  };
+
+  const indentWidth = {
+    sm: 16,
+    md: 20,
+    lg: 24
+  };
+
+  const handleToggleExpand = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (hasChildren && expandable) {
+      onToggleExpand?.(node.id, !isExpanded);
+    }
+  };
+
+  const handleSelectionChange = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (selectable) {
+      onSelectionChange?.(node.id, !isSelected);
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (isClickable) {
+      onClick?.(node, e);
+    }
+  };
+
+  const getNodeIcon = () => {
+    if (node.icon) {
+      return node.icon;
+    }
+    if (hasChildren) {
+      return <FolderIcon className={iconSizes[size]} />;
+    }
+    return <DocumentIcon className={iconSizes[size]} />;
+  };
+
+  const getCheckboxState = () => {
+    if (!hasChildren) return isSelected;
+    
+    // For parent nodes, check if all children are selected
+    const selectedChildrenCount = node.children?.filter(child => 
+      selectedKeys.includes(child.id)
+    ).length || 0;
+    
+    const totalChildren = node.children?.length || 0;
+    
+    if (selectedChildrenCount === 0) return false;
+    if (selectedChildrenCount === totalChildren) return true;
+    return 'indeterminate'; // Some children selected
+  };
+
+  const checkboxState = getCheckboxState();
+
+  return (
+    <>
+      <div
+        className={`tree__node tree__node--${size} ${variant !== 'default' ? `tree__node--${variant}` : ''} ${
+          isSelected ? 'tree__node--selected' : ''
+        } ${isClickable ? 'tree__node--clickable' : ''}`}
+        style={{
+          paddingLeft: `${level * indentWidth[size] + 12}px`
+        }}
+        onClick={handleClick}
+      >
+        {/* Tree Lines */}
+        {showLines && level > 0 && (
+          <div
+            className="tree__line"
+            style={{
+              left: `${(level - 1) * indentWidth[size] + 12 + indentWidth[size] / 2 - 1}px`
+            }}
+          />
+        )}
+
+        {/* Expand/Collapse Button */}
+        <div className="tree__node-toggle-container">
+          {hasChildren && expandable ? (
+            <button
+              onClick={handleToggleExpand}
+              className={`tree__node-toggle tree__node-toggle--${size}`}
+            >
+              <div className={`tree__expand-icon ${isExpanded ? 'tree__expand-icon--expanded' : ''}`}>
+                {isExpanded ? (
+                  <ChevronDownIcon className={`tree__icon tree__icon--${size}`} />
+                ) : (
+                  <ChevronRightIcon className={`tree__icon tree__icon--${size}`} />
+                )}
+              </div>
+            </button>
+          ) : (
+            <div className={`tree__node-spacer tree__node-spacer--${size}`} />
+          )}
+        </div>
+
+        {/* Selection Checkbox */}
+        {selectable && (
+          <div className={`tree__checkbox tree__checkbox--${size}`}>
+            <button
+              onClick={handleSelectionChange}
+              className={`tree__checkbox-input ${
+                checkboxState ? 'tree__checkbox-input--checked' : ''
+              } ${
+                checkboxState === 'indeterminate' ? 'tree__checkbox-input--indeterminate' : ''
+              }`}
+            >
+              {checkboxState === true && <CheckIcon className="tree__checkbox-icon" />}
+              {checkboxState === 'indeterminate' && <MinusIcon className="tree__checkbox-icon" />}
+            </button>
+          </div>
+        )}
+
+        {/* Node Icon */}
+        {showIcons && (
+          <div className={`tree__node-icon tree__node-icon--${size}`}>
+            {getNodeIcon()}
+          </div>
+        )}
+
+        {/* Node Content */}
+        <div className={`tree__node-content tree__node-content--${size}`}>
+          <div className="tree__node-main">
+            <div className="tree__node-text">
+              <span className={`tree__node-label ${
+                isSelected ? 'tree__node-label--selected' : ''
+              }`}>
+                {node.label}
+              </span>
+              {node.description && (
+                <div className="tree__node-description">
+                  {node.description}
+                </div>
+              )}
+            </div>
+
+            {/* Node Metadata */}
+            {node.metadata && (
+              <div className="tree__node-metadata">
+                {node.metadata.count !== undefined && (
+                  <span className="tree__node-badge tree__node-badge--count">
+                    {node.metadata.count}
+                  </span>
+                )}
+                {node.metadata.status && (
+                  <span className={`tree__node-badge tree__node-badge--status tree__node-badge--${node.metadata.status}`}>
+                    {node.metadata.status}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Child Nodes */}
+      {hasChildren && isExpanded && (
+        <>
+          {node.children!.map((childNode) => (
+            <TreeItem
+              key={childNode.id}
+              node={childNode}
+              level={level + 1}
+              expandedKeys={expandedKeys}
+              selectedKeys={selectedKeys}
+              selectable={selectable}
+              expandable={expandable}
+              onToggleExpand={onToggleExpand}
+              onSelectionChange={onSelectionChange}
+              onClick={onClick}
+              theme={theme}
+              size={size}
+              variant={variant}
+              showLines={showLines}
+              showIcons={showIcons}
+            />
+          ))}
+        </>
+      )}
+    </>
+  );
+};
+
+// Main Tree Component
+export const Tree: React.FC<TreeProps> = ({
+  data,
+  expandedKeys = [],
+  selectedKeys = [],
+  onExpandedKeysChange,
+  onSelectedKeysChange,
+  onNodeClick,
+  selectable = false,
+  expandable = true,
+  // draggable = false, // TODO: Implement drag and drop
+  // onDragStart, // TODO: Implement drag and drop
+  // onDragEnd, // TODO: Implement drag and drop
+  // onDrop, // TODO: Implement drag and drop
+  searchable = false,
+  searchValue = '',
+  onSearchChange,
+  filterable = false,
+  // filters = [], // TODO: Implement filter functionality
+  // onFiltersChange, // TODO: Implement filter functionality
+  showLines = true,
+  showIcons = true,
+  expandAll = false,
+  collapseAll = false,
+  loading = false,
+  error = null,
+  emptyMessage = 'No data available',
+  className = '',
+  theme = 'stan-design',
+  size = 'md',
+  variant = 'default'
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+
+  // Filter nodes based on search
+  const filteredData = useMemo(() => {
+    if (!searchable || !searchValue.trim()) return data;
+    
+    const searchLower = searchValue.toLowerCase();
+    
+    const filterNode = (node: TreeNode): TreeNode | null => {
+      const matchesSearch = node.label.toLowerCase().includes(searchLower) ||
+                           node.description?.toLowerCase().includes(searchLower);
+      
+      let filteredChildren: TreeNode[] = [];
+      if (node.children) {
+        filteredChildren = node.children
+          .map(child => filterNode(child))
+          .filter((child): child is TreeNode => child !== null);
+      }
+      
+      // Include node if it matches search OR has matching children
+      if (matchesSearch || filteredChildren.length > 0) {
+        return {
+          ...node,
+          children: filteredChildren.length > 0 ? filteredChildren : node.children
+        };
+      }
+      
+      return null;
+    };
+    
+    return data
+      .map(node => filterNode(node))
+      .filter((node): node is TreeNode => node !== null);
+  }, [data, searchable, searchValue]);
+
+  // Auto-expand all nodes when expandAll changes
+  React.useEffect(() => {
+    if (expandAll) {
+      const getAllNodeIds = (nodes: TreeNode[]): string[] => {
+        const ids: string[] = [];
+        const traverse = (nodeList: TreeNode[]) => {
+          nodeList.forEach(node => {
+            if (node.children && node.children.length > 0) {
+              ids.push(node.id);
+              traverse(node.children);
+            }
+          });
+        };
+        traverse(nodes);
+        return ids;
+      };
+      
+      const allIds = getAllNodeIds(data);
+      onExpandedKeysChange?.(allIds);
+    }
+  }, [expandAll, data, onExpandedKeysChange]);
+
+  // Auto-collapse all nodes when collapseAll changes
+  React.useEffect(() => {
+    if (collapseAll) {
+      onExpandedKeysChange?.([]);
+    }
+  }, [collapseAll, onExpandedKeysChange]);
+
+  const handleToggleExpand = useCallback((nodeId: string, expanded: boolean) => {
+    const newExpandedKeys = expanded
+      ? [...expandedKeys, nodeId]
+      : expandedKeys.filter(key => key !== nodeId);
+    
+    onExpandedKeysChange?.(newExpandedKeys);
+  }, [expandedKeys, onExpandedKeysChange]);
+
+  const handleSelectionChange = useCallback((nodeId: string, selected: boolean) => {
+    const newSelectedKeys = selected
+      ? [...selectedKeys, nodeId]
+      : selectedKeys.filter(key => key !== nodeId);
+    
+    onSelectedKeysChange?.(newSelectedKeys);
+  }, [selectedKeys, onSelectedKeysChange]);
+
+  if (loading) {
+    return (
+      <div 
+        className={`p-8 text-center ${className}`}
+        style={{ color: colors.text.muted }}
+      >
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div 
+        className={`p-8 text-center ${className}`}
+        style={{ 
+          color: colors.semantic.error,
+          backgroundColor: colors.semantic.error + '10',
+          border: `1px solid ${colors.semantic.error}30`,
+          borderRadius: '8px'
+        }}
+      >
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <div className={`tree__container tree__container--${size} ${variant !== 'default' ? `tree__container--${variant}` : ''} ${className}`}>
+      {/* Search Bar */}
+      <TreeSearchBar
+        searchable={searchable}
+        searchValue={searchValue}
+        onSearchChange={onSearchChange || (() => {})}
+        filterable={filterable}
+        theme={theme}
+        size={size}
+      />
+
+      {/* Tree */}
+      <div className={`tree__tree tree__tree--${size} ${variant !== 'default' ? `tree__tree--${variant}` : ''}`}>
+        {filteredData.length === 0 ? (
+          <div className="tree__empty">
+            {emptyMessage}
+          </div>
+        ) : (
+          <div className="tree__nodes">
+            {filteredData.map((node) => (
+              <TreeItem
+                key={node.id}
+                node={node}
+                level={0}
+                expandedKeys={expandedKeys}
+                selectedKeys={selectedKeys}
+                selectable={selectable}
+                expandable={expandable}
+                onToggleExpand={handleToggleExpand}
+                onSelectionChange={handleSelectionChange}
+                onClick={onNodeClick}
+                theme={theme}
+                size={size}
+                variant={variant}
+                showLines={showLines}
+                showIcons={showIcons}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Tree;