"use client"; import React from "react"; import { Accordion, AccordionItem, AccordionTrigger, AccordionContent, } from "@/components/ui/accordion"; export type FileTreeNode = { id: string; label: string; icon?: | React.ReactNode | { open: React.ReactNode; close: React.ReactNode; }; children?: FileTreeNode[]; }; export type FileTreeSelection = { id: string | null; path: string | null; }; interface FileTreeInputProps { data: FileTreeNode[]; onChange?: (selection: FileTreeSelection) => void; childrenIcon?: React.ReactNode; initialExpandedNodes?: string[]; iconOnOpen?: React.ReactNode; iconOnClose?: React.ReactNode; value?: string | null; size?: "sm" | "md" | "lg"; } const getSizeClasses = (size: "sm" | "md" | "lg" = "md") => { const sizeMap = { sm: { padding: "px-2 py-0.5", text: "text-xs", }, md: { padding: "px-3 py-1", text: "text-sm", }, lg: { padding: "px-4 py-1.5", text: "text-base", }, }; return sizeMap[size]; }; const getIconForState = ( icon: | React.ReactNode | { open: React.ReactNode; close: React.ReactNode } | undefined, isOpen: boolean, fallback?: React.ReactNode ): React.ReactNode => { if (!icon) return fallback; if (typeof icon === "object" && "open" in icon && "close" in icon) { return isOpen ? icon.open : icon.close; } return icon; }; interface TreeNodeComponentProps { node: FileTreeNode; parentPath: string; onSelect: (selection: FileTreeSelection) => void; childrenIcon?: React.ReactNode; initialExpandedNodes?: string[]; iconOnOpen?: React.ReactNode; iconOnClose?: React.ReactNode; value?: string | null; size?: "sm" | "md" | "lg"; } const TreeNodeComponent: React.FC = ({ node, parentPath, onSelect, childrenIcon, initialExpandedNodes = [], iconOnOpen, iconOnClose, value = null, size = "md", }) => { const sizeClasses = getSizeClasses(size); const currentPath = parentPath ? `${parentPath}/${node.id}` : node.id; const hasChildren = (node.children || []).length > 0; const handleSelect = () => { onSelect({ id: node.id, path: currentPath, }); }; if (!hasChildren) { // Leaf node - simple clickable item with icon on left const displayIcon = getIconForState(node.icon, false, childrenIcon); return ( ); } const defaultValue = initialExpandedNodes.includes(node.id) ? node.id : null; return ( svg]:-order-1 [&[data-state=closed]>svg]:-rotate-90 hover:*:translate-x-1 *:transition-all [&[data-state=open]>svg]:rotate-0 m-0.5 [&[data-state=closed]>.flex>.icon-close]:block [&[data-state=closed]>.flex>.icon-open]:hidden [&[data-state=open]>.flex>.icon-close]:hidden [&[data-state=open]>.flex>.icon-open]:block ${ value === currentPath ? "!bg-secondary *:opacity-100" : "*:opacity-70" }`} onClick={handleSelect} > {getIconForState(node.icon, false, iconOnClose)} {getIconForState(node.icon, true, iconOnOpen)} {node.label}

{node.children?.map((child) => ( ))}

); }; const FileTreeInputV1: React.FC = ({ data, onChange, childrenIcon, initialExpandedNodes = [], iconOnOpen, iconOnClose, value = null, size = "md", }) => { const handleSelect = (selection: FileTreeSelection) => { onChange?.(selection); }; return (

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

); }; FileTreeInputV1.displayName = "FileTreeInputV1"; export { FileTreeInputV1 };

File Tree Input