code-tree

1"use client";
2 
3import * as React from "react";
4import { Slot } from "@radix-ui/react-slot";
5import { cva, type VariantProps } from "class-variance-authority";
6import { ChevronRight, Folder, File, FolderOpen } from "lucide-react";
7import { motion, AnimatePresence } from "framer-motion";
8import { cn } from "@repo/shadcn-ui/lib/utils";
9 
10// Tree Context
11interface TreeContextType {
12    expandedIds: Set<string>;
13    selectedIds: string[];
14    toggleExpanded: (nodeId: string) => void;
15    handleSelection: (nodeId: string, ctrlKey?: boolean) => void;
16    showLines: boolean;
17    showIcons: boolean;
18    selectable: boolean;
19    multiSelect: boolean;
20    animateExpand: boolean;
21    indent: number;
22    onNodeClick?: (nodeId: string, data?: any) => void;
23    onNodeExpand?: (nodeId: string, expanded: boolean) => void;
24}
25 
26const TreeContext = React.createContext<TreeContextType | null>(null);
27 
28const useTree = () => {
29    const context = React.useContext(TreeContext);
30    if (!context) {
31        throw new Error("Tree components must be used within a TreeProvider");
32    }
33    return context;
34};
35 
36// Tree variants
37const treeVariants = cva(
38    "w-full bg-background border border-border rounded-ele shadow-sm/2",
39    {
40        variants: {
41            variant: {
42                default: "",
43                outline: "border-2",
44                ghost: "border-transparent bg-transparent",
45            },
46            size: {
47                sm: "text-sm",
48                default: "",
49                lg: "text-lg",
50            },
51        },
52        defaultVariants: {
53            variant: "default",
54            size: "default",
55        },
56    },
57);
58 
59const treeItemVariants = cva(
60    "flex items-center py-2 px-3 cursor-pointer transition-all duration-200 relative group rounded-[calc(var(--card-radius)-8px)]",
61    {
62        variants: {
63            variant: {
64                default:
65                    "hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
66                ghost: "hover:bg-accent/50",
67                subtle: "hover:bg-muted/50",
68            },
69            selected: {
70                true: "bg-accent text-accent-foreground",
71                false: "",
72            },
73        },
74        defaultVariants: {
75            variant: "default",
76            selected: false,
77        },
78    },
79);
80 
81// Provider Props
82export interface TreeProviderProps
83    extends React.HTMLAttributes<HTMLDivElement>,
84    VariantProps<typeof treeVariants> {
85// … truncated