"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion } from "framer-motion"; import { Braces, ChevronRight, FileCode2, FileText, Folder, FolderGit2, FolderOpen, GitBranch, Hash, type LucideIcon, } from "lucide-react"; import { cn } from "@/lib/utils"; const EASE = [0.16, 1, 0.3, 1] as const; export type FileKind = "folder" | "tsx" | "ts" | "css" | "json" | "md"; export interface TreeNode { id: string; name: string; kind: FileKind; children?: TreeNode[]; } const FILE_META: Record, { Icon: LucideIcon; color: string }> = { tsx: { Icon: FileCode2, color: "#6ea8ff" }, ts: { Icon: FileCode2, color: "#4d90d9" }, css: { Icon: Hash, color: "#c084fc" }, json: { Icon: Braces, color: "#e0b352" }, md: { Icon: FileText, color: "#8b8b99" }, }; function findPath(nodes: TreeNode[], id: string): TreeNode[] | null { for (const node of nodes) { if (node.id === id) return [node]; if (node.children) { const sub = findPath(node.children, id); if (sub) return [node, ...sub]; } } return null; } interface BranchProps { node: TreeNode; depth: number; expanded: string[]; selected: string | null; onToggle: (id: string) => void; onSelect: (id: string) => void; } function Branch({ node, depth, expanded, selected, onToggle, onSelect }: BranchProps) { const isFolder = node.kind === "folder"; const open = expanded.includes(node.id); const isSelected = selected === node.id; const meta = node.kind === "folder" ? null : FILE_META[node.kind]; const paddingLeft = 10 + depth * 16; const railLeft = 17 + depth * 16; return (

{isFolder && ( {open && node.children && ( {node.children.map((child) => ( ))} )} )}

); } const listVariants = { hidden: {}, show: { transition: { staggerChildren: 0.06, delayChildren: 0.08 } }, }; const itemVariants = { hidden: { opacity: 0, x: -8 }, show: { opacity: 1, x: 0, transition: { duration: 0.45, ease: EASE } }, }; export interface TreeViewProps { data: TreeNode[]; expandedIds?: string[]; selectedId?: string | null; onToggle?: (id: string) => void; onSelect?: (id: string) => void; title?: string; className?: string; } export function TreeView({ data, expandedIds, selectedId = null, onToggle, onSelect, title = "lumenite-ui", className, }: TreeViewProps) { const expanded = expandedIds ?? []; const toggle = onToggle ?? (() => {}); const select = onSelect ?? (() => {}); const path = selectedId ? findPath(data, selectedId) : null; return (

{title}

main

{data.map((node) => ( ))}

{path ? ( path.map((n, i) => (

{i > 0 && ( )} {n.name}

)) ) : ( no file selected )}

); } const DEMO_TREE: TreeNode[] = [ { id: "app", name: "app", kind: "folder", children: [ { id: "layout", name: "layout.tsx", kind: "tsx" }, { id: "page", name: "page.tsx", kind: "tsx" }, { id: "globals", name: "globals.css", kind: "css" }, ], }, { id: "components", name: "components", kind: "folder", children: [ { id: "ui", name: "ui", kind: "folder", children: [ { id: "button", name: "button.tsx", kind: "tsx" }, { id: "card", name: "card.tsx", kind: "tsx" }, ], }, { id: "header", name: "site-header.tsx", kind: "tsx" }, ], }, { id: "lib", name: "lib", kind: "folder", children: [ { id: "utils", name: "utils.ts", kind: "ts" }, { id: "useTree", name: "use-tree.ts", kind: "ts" }, ], }, { id: "pkg", name: "package.json", kind: "json" }, { id: "readme", name: "README.md", kind: "md" }, ]; interface Step { expanded: string[]; selected: string; } const STEPS: Step[] = [ { expanded: ["components", "ui"], selected: "button" }, { expanded: ["components", "ui"], selected: "card" }, { expanded: ["components"], selected: "header" }, { expanded: ["lib"], selected: "utils" }, { expanded: ["lib"], selected: "useTree" }, { expanded: ["app"], selected: "page" }, { expanded: ["app"], selected: "globals" }, { expanded: [], selected: "pkg" }, ]; export default function Demo() { const steps = useMemo(() => STEPS, []); const [expanded, setExpanded] = useState(steps[0].expanded); const [selected, setSelected] = useState(steps[0].selected); const [paused, setPaused] = useState(false); const stepRef = useRef(0); useEffect(() => { if (paused) return; const id = window.setInterval(() => { stepRef.current = (stepRef.current + 1) % steps.length; const next = steps[stepRef.current]; setExpanded(next.expanded); setSelected(next.selected); }, 2000); return () => window.clearInterval(id); }, [paused, steps]); function handleToggle(id: string) { setExpanded((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id] ); } return (

setPaused(true)} onMouseLeave={() => setPaused(false)} className="relative z-10 h-[384px] w-full max-w-sm" >

); }

Tree View