@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10

package/dist/components/ui/data-display/tree.js

@@ -7,7 +7,7 @@ import {
 } from './types';
 
 // Simple icon components (inline SVG)
-const ChevronRightIcon}> = ({ className = '' }) => (
+const ChevronRightIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`tree__icon ${className}`}
     fill="none"
@@ -18,7 +18,7 @@ const ChevronRightIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const ChevronDownIcon}> = ({ className = '' }) => (
+const ChevronDownIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`tree__icon ${className}`}
     fill="none"
@@ -29,7 +29,7 @@ const ChevronDownIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const SearchIcon}> = ({ className = '' }) => (
+const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`tree__icon ${className}`}
     fill="none"
@@ -40,7 +40,7 @@ const SearchIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const FilterIcon}> = ({ className = '' }) => (
+const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`tree__icon ${className}`}
     fill="none"
@@ -51,7 +51,7 @@ const FilterIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const FolderIcon}> = ({ className = '' }) => (
+const FolderIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`tree__icon ${className}`}
     fill="none"
@@ -62,7 +62,7 @@ const FolderIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const DocumentIcon}> = ({ className = '' }) => (
+const DocumentIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`tree__icon ${className}`}
     fill="none"
@@ -73,7 +73,7 @@ const DocumentIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const CheckIcon}> = ({ className = '' }) => (
+const CheckIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`tree__icon ${className}`}
     fill="none"
@@ -84,7 +84,7 @@ const CheckIcon}> = ({ className = '' }) => (
   </svg>
 );
 
-const MinusIcon}> = ({ className = '' }) => (
+const MinusIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
   <svg
     className={`tree__icon ${className}`}
     fill="none"
@@ -97,35 +97,44 @@ const MinusIcon}> = ({ className = '' }) => (
 
 // Default color fallbacks for when theme is not available
 const getDefaultColors = () => ({
-  surface, 
-    surface, 
-    border, 
-    divider},
-  text, 
-    secondary, 
-    muted, 
-    inverse, 
-    onPrimary, 
-    onSecondary, 
-    onSurface},
-  interactive, 
-    active, 
-    focus, 
-    disabled},
-  primary},
-  semantic, 
-    warning, 
-    error, 
-    info}
+  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;
-  searchValue;
-  onSearchChange) => void;
-  filterable;
-  theme;
-  size;
+const TreeSearchBar: React.FC<{
+  searchable: boolean;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  filterable: boolean;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
 }> = ({
   searchable,
   searchValue,
@@ -139,9 +148,10 @@ const TreeSearchBar;
   const colors = themeConfig?.colors || getDefaultColors();
 
   const sizeClasses = {
-    sm,
-    md,
-    lg};
+    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;
 
@@ -159,9 +169,10 @@ const TreeSearchBar;
             placeholder="Search nodes..."
             className={`w-full ${sizeClasses[size]} pl-10 pr-4 rounded-lg border outline-none`}
             style={{
-              backgroundColor,
-              border}`,
-              color}}
+              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`;
@@ -185,7 +196,7 @@ const TreeSearchBar;
 };
 
 // Individual Tree Item Component
-const TreeItem= ({
+const TreeItem: React.FC<TreeItemProps> = ({
   node,
   level = 0,
   expandedKeys,
@@ -198,7 +209,11 @@ const TreeItem= ({
   theme,
   size,
   variant,
-  // draggable = false, // TODO, // TODO, // TODO, // TODO= 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
+  showLines = true,
   showIcons = true
 }) => {
   // const { getTheme } = useTheme();
@@ -211,30 +226,32 @@ const TreeItem= ({
   const isClickable = !!onClick;
 
   const iconSizes = {
-    sm,
-    md,
-    lg};
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5'
+  };
 
   const indentWidth = {
-    sm,
-    md,
-    lg};
+    sm: 16,
+    md: 20,
+    lg: 24
+  };
 
-  const handleToggleExpand = (e) => {
+  const handleToggleExpand = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (hasChildren && expandable) {
       onToggleExpand?.(node.id, !isExpanded);
     }
   };
 
-  const handleSelectionChange = (e) => {
+  const handleSelectionChange = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (selectable) {
       onSelectionChange?.(node.id, !isSelected);
     }
   };
 
-  const handleClick = (e) => {
+  const handleClick = (e: React.MouseEvent) => {
     if (isClickable) {
       onClick?.(node, e);
     }
@@ -270,10 +287,11 @@ const TreeItem= ({
   return (
     <>
       <div
-        className={`tree__node tree__node--${size} ${variant !== 'default' ? `tree__node--${variant}` } ${
-          isSelected ? 'tree__node--selected' } ${isClickable ? 'tree__node--clickable' }`}
+        className={`tree__node tree__node--${size} ${variant !== 'default' ? `tree__node--${variant}` : ''} ${
+          isSelected ? 'tree__node--selected' : ''
+        } ${isClickable ? 'tree__node--clickable' : ''}`}
         style={{
-          paddingLeft] + 12}px`
+          paddingLeft: `${level * indentWidth[size] + 12}px`
         }}
         onClick={handleClick}
       >
@@ -282,7 +300,7 @@ const TreeItem= ({
           <div
             className="tree__line"
             style={{
-              left) * indentWidth[size] + 12 + indentWidth[size] / 2 - 1}px`
+              left: `${(level - 1) * indentWidth[size] + 12 + indentWidth[size] / 2 - 1}px`
             }}
           />
         )}
@@ -294,14 +312,16 @@ const TreeItem= ({
               onClick={handleToggleExpand}
               className={`tree__node-toggle tree__node-toggle--${size}`}
             >
-              <div className={`tree__expand-icon ${isExpanded ? 'tree__expand-icon--expanded' }`}>
+              <div className={`tree__expand-icon ${isExpanded ? 'tree__expand-icon--expanded' : ''}`}>
                 {isExpanded ? (
                   <ChevronDownIcon className={`tree__icon tree__icon--${size}`} />
-                ) ={`tree__icon tree__icon--${size}`} />
+                ) : (
+                  <ChevronRightIcon className={`tree__icon tree__icon--${size}`} />
                 )}
               </div>
             </button>
-          ) ={`tree__node-spacer tree__node-spacer--${size}`} />
+          ) : (
+            <div className={`tree__node-spacer tree__node-spacer--${size}`} />
           )}
         </div>
 
@@ -311,8 +331,10 @@ const TreeItem= ({
             <button
               onClick={handleSelectionChange}
               className={`tree__checkbox-input ${
-                checkboxState ? 'tree__checkbox-input--checked' } ${
-                checkboxState === 'indeterminate' ? 'tree__checkbox-input--indeterminate' }`}
+                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" />}
@@ -332,7 +354,8 @@ const TreeItem= ({
           <div className="tree__node-main">
             <div className="tree__node-text">
               <span className={`tree__node-label ${
-                isSelected ? 'tree__node-label--selected' }`}>
+                isSelected ? 'tree__node-label--selected' : ''
+              }`}>
                 {node.label}
               </span>
               {node.description && (
@@ -390,7 +413,7 @@ const TreeItem= ({
 };
 
 // Main Tree Component
-export const Tree= ({
+export const Tree: React.FC<TreeProps> = ({
   data,
   expandedKeys = [],
   selectedKeys = [],
@@ -399,11 +422,17 @@ export const Tree= ({
   onNodeClick,
   selectable = false,
   expandable = true,
-  // draggable = false, // TODO, // TODO, // TODO, // TODO= false,
+  // 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, // TODO= true,
+  // filters = [], // TODO: Implement filter functionality
+  // onFiltersChange, // TODO: Implement filter functionality
+  showLines = true,
   showIcons = true,
   expandAll = false,
   collapseAll = false,
@@ -425,22 +454,23 @@ export const Tree= ({
     
     const searchLower = searchValue.toLowerCase();
     
-    const filterNode = (node)=> {
+    const filterNode = (node: TreeNode): TreeNode | null => {
       const matchesSearch = node.label.toLowerCase().includes(searchLower) ||
                            node.description?.toLowerCase().includes(searchLower);
       
-      let filteredChildren] = [];
+      let filteredChildren: TreeNode[] = [];
       if (node.children) {
         filteredChildren = node.children
           .map(child => filterNode(child))
-          .filter((child)=> child !== null);
+          .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};
+          children: filteredChildren.length > 0 ? filteredChildren : node.children
+        };
       }
       
       return null;
@@ -448,15 +478,15 @@ export const Tree= ({
     
     return data
       .map(node => filterNode(node))
-      .filter((node)=> node !== null);
+      .filter((node): node is TreeNode => node !== null);
   }, [data, searchable, searchValue]);
 
   // Auto-expand all nodes when expandAll changes
   React.useEffect(() => {
     if (expandAll) {
-      const getAllNodeIds = (nodes])] => {
-        const ids] = [];
-        const traverse = (nodeList]) => {
+      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);
@@ -480,18 +510,18 @@ export const Tree= ({
     }
   }, [collapseAll, onExpandedKeysChange]);
 
-  const handleToggleExpand = useCallback((nodeId, expanded) => {
+  const handleToggleExpand = useCallback((nodeId: string, expanded: boolean) => {
     const newExpandedKeys = expanded
       ? [...expandedKeys, nodeId]
-      => key !== nodeId);
+      : expandedKeys.filter(key => key !== nodeId);
     
     onExpandedKeysChange?.(newExpandedKeys);
   }, [expandedKeys, onExpandedKeysChange]);
 
-  const handleSelectionChange = useCallback((nodeId, selected) => {
+  const handleSelectionChange = useCallback((nodeId: string, selected: boolean) => {
     const newSelectedKeys = selected
       ? [...selectedKeys, nodeId]
-      => key !== nodeId);
+      : selectedKeys.filter(key => key !== nodeId);
     
     onSelectedKeysChange?.(newSelectedKeys);
   }, [selectedKeys, onSelectedKeysChange]);
@@ -500,7 +530,7 @@ export const Tree= ({
     return (
       <div 
         className={`p-8 text-center ${className}`}
-        style={{ color}}
+        style={{ color: colors.text.muted }}
       >
         Loading...
       </div>
@@ -512,10 +542,11 @@ export const Tree= ({
       <div 
         className={`p-8 text-center ${className}`}
         style={{ 
-          color,
-          backgroundColor,
-          border}30`,
-          borderRadius}}
+          color: colors.semantic.error,
+          backgroundColor: colors.semantic.error + '10',
+          border: `1px solid ${colors.semantic.error}30`,
+          borderRadius: '8px'
+        }}
       >
         {error}
       </div>
@@ -523,7 +554,7 @@ export const Tree= ({
   }
 
   return (
-    <div className={`tree__container tree__container--${size} ${variant !== 'default' ? `tree__container--${variant}` } ${className}`}>
+    <div className={`tree__container tree__container--${size} ${variant !== 'default' ? `tree__container--${variant}` : ''} ${className}`}>
       {/* Search Bar */}
       <TreeSearchBar
         searchable={searchable}
@@ -535,12 +566,13 @@ export const Tree= ({
       />
 
       {/* Tree */}
-      <div className={`tree__tree tree__tree--${size} ${variant !== 'default' ? `tree__tree--${variant}` }`}>
+      <div className={`tree__tree tree__tree--${size} ${variant !== 'default' ? `tree__tree--${variant}` : ''}`}>
         {filteredData.length === 0 ? (
           <div className="tree__empty">
             {emptyMessage}
           </div>
-        ) ="tree__nodes">
+        ) : (
+          <div className="tree__nodes">
             {filteredData.map((node) => (
               <TreeItem
                 key={node.id}