file-tree

1import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
2import { AnimatePresence, motion } from "motion/react";
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6export interface TreeNode {
7  id: string;
8  name: string;
9  type: "file" | "folder";
10  children?: TreeNode[];
11  icon?: React.ReactNode;
12}
13 
14interface FileTreeContextValue {
15  selectedId: string | null;
16  setSelectedId: (id: string | null) => void;
17  expandedIds: Set<string>;
18  toggleExpanded: (id: string) => void;
19}
20 
21const FileTreeContext = React.createContext<FileTreeContextValue | null>(null);
22 
23function useFileTree() {
24  const context = React.useContext(FileTreeContext);
25  if (!context) {
26    throw new Error("useFileTree must be used within a FileTree");
27  }
28  return context;
29}
30 
31function getAllFolderIds(nodes: TreeNode[]): string[] {
32  const ids: string[] = [];
33  for (const node of nodes) {
34    if (node.type === "folder") {
35      ids.push(node.id);
36      if (node.children) {
37        ids.push(...getAllFolderIds(node.children));
38      }
39    }
40  }
41  return ids;
42}
43 
44interface FileTreeProps {
45  data: TreeNode[];
46  className?: string;
47  defaultExpandedIds?: string[];
48  expandAllByDefault?: boolean;
49  onSelect?: (node: TreeNode) => void;
50}
51 
52export function FileTree({
53  data,
54  className,
55  defaultExpandedIds = [],
56  expandAllByDefault = false,
57  onSelect,
58}: FileTreeProps) {
59  const [selectedId, setSelectedId] = React.useState<string | null>(null);
60  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(
61    new Set(expandAllByDefault ? getAllFolderIds(data) : defaultExpandedIds),
62  );
63 
64  const toggleExpanded = React.useCallback((id: string) => {
65    setExpandedIds((prev) => {
66      const next = new Set(prev);
67      if (next.has(id)) {
68        next.delete(id);
69      } else {
70        next.add(id);
71      }
72      return next;
73    });
74  }, []);
75 
76  const handleSelect = React.useCallback(
77    (node: TreeNode) => {
78      setSelectedId(node.id);
79      onSelect?.(node);
80    },
81    [onSelect],
82  );
83 
84  return (
85    <FileTreeContext.Provider
86      value={{
87        selectedId,
88        setSelectedId: (id) => setSelectedId(id),
89        expandedIds,
90        toggleExpanded,
91      }}
92    >
93      <div
94        className={cn(
95          "rounded-lg border border-border bg-card p-2 font-mono text-sm",
96          className,
97        )}
98        role="tree"
99        aria-label="File tree"
100      >
101        <TreeNodeList nodes={data} level={0} onSelect={handleSelect} />
102      </div>
103// … truncated