tree

1"use client";
2import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
3import { AnimatePresence, motion } from "motion/react";
4import {
5  type ComponentProps,
6  createContext,
7  type HTMLAttributes,
8  type ReactNode,
9  useCallback,
10  useContext,
11  useId,
12  useState,
13} from "react";
14import { cn } from "@/lib/utils";
15 
16type TreeContextType = {
17  expandedIds: Set<string>;
18  selectedIds: string[];
19  toggleExpanded: (nodeId: string) => void;
20  handleSelection: (nodeId: string, ctrlKey: boolean) => void;
21  showLines?: boolean;
22  showIcons?: boolean;
23  selectable?: boolean;
24  multiSelect?: boolean;
25  indent?: number;
26  animateExpand?: boolean;
27};
28 
29const TreeContext = createContext<TreeContextType | undefined>(undefined);
30 
31const useTree = () => {
32  const context = useContext(TreeContext);
33  if (!context) {
34    throw new Error("Tree components must be used within a TreeProvider");
35  }
36  return context;
37};
38 
39type TreeNodeContextType = {
40  nodeId: string;
41  level: number;
42  isLast: boolean;
43  parentPath: boolean[];
44};
45 
46const TreeNodeContext = createContext<TreeNodeContextType | undefined>(
47  undefined
48);
49 
50const useTreeNode = () => {
51  const context = useContext(TreeNodeContext);
52  if (!context) {
53    throw new Error("TreeNode components must be used within a TreeNode");
54  }
55  return context;
56};
57 
58export type TreeProviderProps = {
59  children: ReactNode;
60  defaultExpandedIds?: string[];
61  showLines?: boolean;
62  showIcons?: boolean;
63  selectable?: boolean;
64  multiSelect?: boolean;
65  selectedIds?: string[];
66  onSelectionChange?: (selectedIds: string[]) => void;
67  indent?: number;
68  animateExpand?: boolean;
69  className?: string;
70};
71 
72export const TreeProvider = ({
73  children,
74  defaultExpandedIds = [],
75  showLines = true,
76  showIcons = true,
77  selectable = true,
78  multiSelect = false,
79  selectedIds,
80  onSelectionChange,
81  indent = 19,
82  animateExpand = true,
83  className,
84}: TreeProviderProps) => {
85  const [expandedIds, setExpandedIds] = useState<Set<string>>(
86    new Set(defaultExpandedIds)
87  );
88  const [internalSelectedIds, setInternalSelectedIds] = useState<string[]>(
89    selectedIds ?? []
90  );
91 
92  const isControlled =
93    selectedIds !== undefined && onSelectionChange !== undefined;
94  const currentSelectedIds = isControlled ? selectedIds : internalSelectedIds;
95 
96  const toggleExpanded = useCallback((nodeId: string) => {
97    setExpandedIds((prev) => {
98      const newSet = new Set(prev);
99      if (newSet.has(nodeId)) {
100        newSet.delete(nodeId);
101// … truncated