@thangnqdev/ui 0.2.1 → 0.2.3

package/src/data-display/TreeView.tsx

@@ -1,279 +1,279 @@
-import React, { useState, forwardRef, useRef, useMemo, useEffect } from 'react';
-import { ChevronRight, Folder, FolderOpen, FileCode, FileText, Image as ImageIcon } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export interface TreeItem {
-  id: string;
-  label: string;
-  icon?: React.ReactNode;
-  badge?: string | number;
-  children?: TreeItem[];
-  defaultExpanded?: boolean;
-}
-
-export interface TreeViewProps {
-  data: TreeItem[];
-  selectedId?: string;
-  defaultExpandedIds?: string[];
-  onSelect?: (item: TreeItem) => void;
-  onExpandedChange?: (expandedIds: string[]) => void;
-  className?: string;
-  'aria-label'?: string;
-}
-
-interface FlatTreeItem {
-  item: TreeItem;
-  level: number;
-  parentId: string | null;
-  hasChildren: boolean;
-}
-
-export const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(
-  (
-    {
-      data,
-      selectedId,
-      defaultExpandedIds,
-      onSelect,
-      onExpandedChange,
-      className,
-      'aria-label': ariaLabel = 'Tree View',
-    },
-    ref
-  ) => {
-    // Initial expanded IDs
-    const initialExpanded = useMemo(() => {
-      if (defaultExpandedIds) return new Set(defaultExpandedIds);
-      const set = new Set<string>();
-      const collect = (items: TreeItem[]) => {
-        for (const it of items) {
-          if (it.defaultExpanded) set.add(it.id);
-          if (it.children) collect(it.children);
-        }
-      };
-      collect(data);
-      return set;
-    }, [data, defaultExpandedIds]);
-
-    const [expandedSet, setExpandedSet] = useState<Set<string>>(initialExpanded);
-    const [focusedId, setFocusedId] = useState<string | null>(null);
-    const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());
-
-    const focusNode = (id: string) => {
-      setFocusedId(id);
-      const el = itemRefs.current.get(id);
-      if (el) {
-        el.focus();
-      }
-    };
-
-    const toggleExpand = (id: string) => {
-      setExpandedSet((prev) => {
-        const next = new Set(prev);
-        if (next.has(id)) next.delete(id);
-        else next.add(id);
-        onExpandedChange?.(Array.from(next));
-        return next;
-      });
-    };
-
-    const expandNode = (id: string) => {
-      if (!expandedSet.has(id)) {
-        setExpandedSet((prev) => {
-          const next = new Set(prev).add(id);
-          onExpandedChange?.(Array.from(next));
-          return next;
-        });
-      }
-    };
-
-    const collapseNode = (id: string) => {
-      if (expandedSet.has(id)) {
-        setExpandedSet((prev) => {
-          const next = new Set(prev);
-          next.delete(id);
-          onExpandedChange?.(Array.from(next));
-          return next;
-        });
-      }
-    };
-
-    // Flatten visible nodes
-    const visibleList = useMemo(() => {
-      const list: FlatTreeItem[] = [];
-      const traverse = (items: TreeItem[], level: number, parentId: string | null) => {
-        for (const item of items) {
-          const hasChildren = Boolean(item.children && item.children.length > 0);
-          list.push({ item, level, parentId, hasChildren });
-          if (hasChildren && expandedSet.has(item.id)) {
-            traverse(item.children!, level + 1, item.id);
-          }
-        }
-      };
-      traverse(data, 0, null);
-      return list;
-    }, [data, expandedSet]);
-
-    // Keyboard navigation with native DOM focus
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-      if (visibleList.length === 0) return;
-
-      const currentIdx = focusedId ? visibleList.findIndex((f) => f.item.id === focusedId) : 0;
-      const currentFlat = visibleList[currentIdx] || visibleList[0];
-
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        const nextIdx = Math.min(visibleList.length - 1, currentIdx + 1);
-        focusNode(visibleList[nextIdx].item.id);
-      } else if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        const prevIdx = Math.max(0, currentIdx - 1);
-        focusNode(visibleList[prevIdx].item.id);
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        if (currentFlat.hasChildren) {
-          if (!expandedSet.has(currentFlat.item.id)) {
-            expandNode(currentFlat.item.id);
-          } else {
-            const nextIdx = currentIdx + 1;
-            if (nextIdx < visibleList.length) {
-              focusNode(visibleList[nextIdx].item.id);
-            }
-          }
-        }
-      } else if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        if (currentFlat.hasChildren && expandedSet.has(currentFlat.item.id)) {
-          collapseNode(currentFlat.item.id);
-        } else if (currentFlat.parentId) {
-          focusNode(currentFlat.parentId);
-        }
-      } else if (e.key === 'Home') {
-        e.preventDefault();
-        focusNode(visibleList[0].item.id);
-      } else if (e.key === 'End') {
-        e.preventDefault();
-        focusNode(visibleList[visibleList.length - 1].item.id);
-      } else if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        if (currentFlat) {
-          if (currentFlat.hasChildren) {
-            toggleExpand(currentFlat.item.id);
-          }
-          onSelect?.(currentFlat.item);
-        }
-      }
-    };
-
-    const getIcon = (item: TreeItem, hasChildren: boolean, isExpanded: boolean) => {
-      if (item.icon) return item.icon;
-      if (hasChildren) {
-        return isExpanded ? (
-          <FolderOpen className="w-4 h-4 text-amber-500 shrink-0" />
-        ) : (
-          <Folder className="w-4 h-4 text-amber-500 shrink-0" />
-        );
-      }
-      if (item.label.endsWith('.tsx') || item.label.endsWith('.ts') || item.label.endsWith('.js')) {
-        return <FileCode className="w-4 h-4 text-blue-500 shrink-0" />;
-      }
-      if (item.label.endsWith('.png') || item.label.endsWith('.jpg') || item.label.endsWith('.svg')) {
-        return <ImageIcon className="w-4 h-4 text-purple-500 shrink-0" />;
-      }
-      return <FileText className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />;
-    };
-
-    const renderNodes = (items: TreeItem[], level: number): React.ReactNode => {
-      return items.map((item, index) => {
-        const hasChildren = Boolean(item.children && item.children.length > 0);
-        const isExpanded = expandedSet.has(item.id);
-        const isSelected = selectedId === item.id;
-        const isFocused = focusedId === item.id || (!focusedId && level === 0 && index === 0);
-
-        return (
-          <div key={item.id} role="none" className="select-none text-xs">
-            <div
-              ref={(el) => {
-                if (el) itemRefs.current.set(item.id, el);
-                else itemRefs.current.delete(item.id);
-              }}
-              role="treeitem"
-              tabIndex={isFocused ? 0 : -1}
-              aria-expanded={hasChildren ? isExpanded : undefined}
-              aria-selected={isSelected}
-              aria-level={level + 1}
-              aria-posinset={index + 1}
-              aria-setsize={items.length}
-              onClick={(e) => {
-                e.stopPropagation();
-                focusNode(item.id);
-                if (hasChildren) {
-                  toggleExpand(item.id);
-                }
-                onSelect?.(item);
-              }}
-              style={{ paddingLeft: `${level * 16 + 8}px` }}
-              className={cn(
-                'flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]',
-                isSelected
-                  ? 'bg-[var(--ui-primary)] text-white font-semibold shadow-xs'
-                  : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]'
-              )}
-            >
-              <div className="flex items-center gap-2 truncate">
-                {hasChildren ? (
-                  <span className={cn('p-0.5 rounded transition-transform duration-200', isExpanded && 'rotate-90')}>
-                    <ChevronRight className={cn('w-3 h-3', isSelected ? 'text-white' : 'text-[var(--ui-text-muted)]')} />
-                  </span>
-                ) : (
-                  <span className="w-4" />
-                )}
-
-                {getIcon(item, hasChildren, isExpanded)}
-                <span className="truncate">{item.label}</span>
-              </div>
-
-              {item.badge !== undefined && (
-                <span
-                  className={cn(
-                    'px-1.5 py-0.5 rounded-md text-[10px] font-mono',
-                    isSelected ? 'bg-white/20 text-white' : 'bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]'
-                  )}
-                >
-                  {item.badge}
-                </span>
-              )}
-            </div>
-
-            {hasChildren && isExpanded && (
-              <div role="group" className="relative space-y-0.5 animate-in fade-in duration-150">
-                <div
-                  className="absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]"
-                  style={{ left: `${level * 16 + 15}px` }}
-                />
-                {renderNodes(item.children!, level + 1)}
-              </div>
-            )}
-          </div>
-        );
-      });
-    };
-
-    return (
-      <div
-        ref={ref}
-        role="tree"
-        aria-label={ariaLabel}
-        onKeyDown={handleKeyDown}
-        className={cn(
-          'w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden outline-none',
-          className
-        )}
-      >
-        {renderNodes(data, 0)}
-      </div>
-    );
-  }
-);
-
-TreeView.displayName = 'TreeView';
+import React, { useState, forwardRef, useRef, useMemo, useEffect } from 'react';
+import { ChevronRight, Folder, FolderOpen, FileCode, FileText, Image as ImageIcon } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface TreeItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  badge?: string | number;
+  children?: TreeItem[];
+  defaultExpanded?: boolean;
+}
+
+export interface TreeViewProps {
+  data: TreeItem[];
+  selectedId?: string;
+  defaultExpandedIds?: string[];
+  onSelect?: (item: TreeItem) => void;
+  onExpandedChange?: (expandedIds: string[]) => void;
+  className?: string;
+  'aria-label'?: string;
+}
+
+interface FlatTreeItem {
+  item: TreeItem;
+  level: number;
+  parentId: string | null;
+  hasChildren: boolean;
+}
+
+export const TreeView = forwardRef<HTMLDivElement, TreeViewProps>(
+  (
+    {
+      data,
+      selectedId,
+      defaultExpandedIds,
+      onSelect,
+      onExpandedChange,
+      className,
+      'aria-label': ariaLabel = 'Tree View',
+    },
+    ref
+  ) => {
+    // Initial expanded IDs
+    const initialExpanded = useMemo(() => {
+      if (defaultExpandedIds) return new Set(defaultExpandedIds);
+      const set = new Set<string>();
+      const collect = (items: TreeItem[]) => {
+        for (const it of items) {
+          if (it.defaultExpanded) set.add(it.id);
+          if (it.children) collect(it.children);
+        }
+      };
+      collect(data);
+      return set;
+    }, [data, defaultExpandedIds]);
+
+    const [expandedSet, setExpandedSet] = useState<Set<string>>(initialExpanded);
+    const [focusedId, setFocusedId] = useState<string | null>(null);
+    const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+    const focusNode = (id: string) => {
+      setFocusedId(id);
+      const el = itemRefs.current.get(id);
+      if (el) {
+        el.focus();
+      }
+    };
+
+    const toggleExpand = (id: string) => {
+      setExpandedSet((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        onExpandedChange?.(Array.from(next));
+        return next;
+      });
+    };
+
+    const expandNode = (id: string) => {
+      if (!expandedSet.has(id)) {
+        setExpandedSet((prev) => {
+          const next = new Set(prev).add(id);
+          onExpandedChange?.(Array.from(next));
+          return next;
+        });
+      }
+    };
+
+    const collapseNode = (id: string) => {
+      if (expandedSet.has(id)) {
+        setExpandedSet((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          onExpandedChange?.(Array.from(next));
+          return next;
+        });
+      }
+    };
+
+    // Flatten visible nodes
+    const visibleList = useMemo(() => {
+      const list: FlatTreeItem[] = [];
+      const traverse = (items: TreeItem[], level: number, parentId: string | null) => {
+        for (const item of items) {
+          const hasChildren = Boolean(item.children && item.children.length > 0);
+          list.push({ item, level, parentId, hasChildren });
+          if (hasChildren && expandedSet.has(item.id)) {
+            traverse(item.children!, level + 1, item.id);
+          }
+        }
+      };
+      traverse(data, 0, null);
+      return list;
+    }, [data, expandedSet]);
+
+    // Keyboard navigation with native DOM focus
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (visibleList.length === 0) return;
+
+      const currentIdx = focusedId ? visibleList.findIndex((f) => f.item.id === focusedId) : 0;
+      const currentFlat = visibleList[currentIdx] || visibleList[0];
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const nextIdx = Math.min(visibleList.length - 1, currentIdx + 1);
+        focusNode(visibleList[nextIdx].item.id);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const prevIdx = Math.max(0, currentIdx - 1);
+        focusNode(visibleList[prevIdx].item.id);
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        if (currentFlat.hasChildren) {
+          if (!expandedSet.has(currentFlat.item.id)) {
+            expandNode(currentFlat.item.id);
+          } else {
+            const nextIdx = currentIdx + 1;
+            if (nextIdx < visibleList.length) {
+              focusNode(visibleList[nextIdx].item.id);
+            }
+          }
+        }
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        if (currentFlat.hasChildren && expandedSet.has(currentFlat.item.id)) {
+          collapseNode(currentFlat.item.id);
+        } else if (currentFlat.parentId) {
+          focusNode(currentFlat.parentId);
+        }
+      } else if (e.key === 'Home') {
+        e.preventDefault();
+        focusNode(visibleList[0].item.id);
+      } else if (e.key === 'End') {
+        e.preventDefault();
+        focusNode(visibleList[visibleList.length - 1].item.id);
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        if (currentFlat) {
+          if (currentFlat.hasChildren) {
+            toggleExpand(currentFlat.item.id);
+          }
+          onSelect?.(currentFlat.item);
+        }
+      }
+    };
+
+    const getIcon = (item: TreeItem, hasChildren: boolean, isExpanded: boolean) => {
+      if (item.icon) return item.icon;
+      if (hasChildren) {
+        return isExpanded ? (
+          <FolderOpen className="w-4 h-4 text-amber-500 shrink-0" />
+        ) : (
+          <Folder className="w-4 h-4 text-amber-500 shrink-0" />
+        );
+      }
+      if (item.label.endsWith('.tsx') || item.label.endsWith('.ts') || item.label.endsWith('.js')) {
+        return <FileCode className="w-4 h-4 text-blue-500 shrink-0" />;
+      }
+      if (item.label.endsWith('.png') || item.label.endsWith('.jpg') || item.label.endsWith('.svg')) {
+        return <ImageIcon className="w-4 h-4 text-purple-500 shrink-0" />;
+      }
+      return <FileText className="w-4 h-4 text-[var(--ui-text-muted)] shrink-0" />;
+    };
+
+    const renderNodes = (items: TreeItem[], level: number): React.ReactNode => {
+      return items.map((item, index) => {
+        const hasChildren = Boolean(item.children && item.children.length > 0);
+        const isExpanded = expandedSet.has(item.id);
+        const isSelected = selectedId === item.id;
+        const isFocused = focusedId === item.id || (!focusedId && level === 0 && index === 0);
+
+        return (
+          <div key={item.id} role="none" className="select-none text-xs">
+            <div
+              ref={(el) => {
+                if (el) itemRefs.current.set(item.id, el);
+                else itemRefs.current.delete(item.id);
+              }}
+              role="treeitem"
+              tabIndex={isFocused ? 0 : -1}
+              aria-expanded={hasChildren ? isExpanded : undefined}
+              aria-selected={isSelected}
+              aria-level={level + 1}
+              aria-posinset={index + 1}
+              aria-setsize={items.length}
+              onClick={(e) => {
+                e.stopPropagation();
+                focusNode(item.id);
+                if (hasChildren) {
+                  toggleExpand(item.id);
+                }
+                onSelect?.(item);
+              }}
+              style={{ paddingLeft: `${level * 16 + 8}px` }}
+              className={cn(
+                'flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]',
+                isSelected
+                  ? 'bg-[var(--ui-primary)] text-white font-semibold shadow-xs'
+                  : 'text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]'
+              )}
+            >
+              <div className="flex items-center gap-2 truncate">
+                {hasChildren ? (
+                  <span className={cn('p-0.5 rounded transition-transform duration-200', isExpanded && 'rotate-90')}>
+                    <ChevronRight className={cn('w-3 h-3', isSelected ? 'text-white' : 'text-[var(--ui-text-muted)]')} />
+                  </span>
+                ) : (
+                  <span className="w-4" />
+                )}
+
+                {getIcon(item, hasChildren, isExpanded)}
+                <span className="truncate">{item.label}</span>
+              </div>
+
+              {item.badge !== undefined && (
+                <span
+                  className={cn(
+                    'px-1.5 py-0.5 rounded-md text-[10px] font-mono',
+                    isSelected ? 'bg-white/20 text-white' : 'bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]'
+                  )}
+                >
+                  {item.badge}
+                </span>
+              )}
+            </div>
+
+            {hasChildren && isExpanded && (
+              <div role="group" className="relative space-y-0.5 animate-in fade-in duration-150">
+                <div
+                  className="absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]"
+                  style={{ left: `${level * 16 + 15}px` }}
+                />
+                {renderNodes(item.children!, level + 1)}
+              </div>
+            )}
+          </div>
+        );
+      });
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="tree"
+        aria-label={ariaLabel}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          'w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden outline-none',
+          className
+        )}
+      >
+        {renderNodes(data, 0)}
+      </div>
+    );
+  }
+);
+
+TreeView.displayName = 'TreeView';

package/src/data-display/tokens.css

@@ -1,4 +1,4 @@
-/* Data Display Tokens */
-:root {
-  --ui-avatar-ring-width: 2px;
-}
+/* Data Display Tokens */
+:root {
+  --ui-avatar-ring-width: 2px;
+}