tree

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