File Tree

pnpm dlx @hex-core/cli add file-tree

import { useMemo, useState } from "react";
import { FileTree, type FileTreeNode } from "@/components/ui/file-tree";
import { Input } from "@/components/ui/input";

const initialNodes: FileTreeNode[] = [
  {
    id: "src",
    name: "src",
    children: [
      { id: "src/button.tsx", name: "button.tsx" },
      { id: "src/input.tsx", name: "input.tsx" },
      {
        id: "src/forms",
        name: "forms",
        children: [
          { id: "src/forms/checkbox.tsx", name: "checkbox.tsx" },
          { id: "src/forms/switch.tsx", name: "switch.tsx" },
        ],
      },
    ],
  },
  { id: "README.md", name: "README.md" },
];

function filterTree(nodes: FileTreeNode[], query: string): FileTreeNode[] {
  const needle = query.toLowerCase();
  return nodes.flatMap((node) => {
    const selfMatch = node.name.toLowerCase().includes(needle);
    const childMatches = node.children ? filterTree(node.children, query) : [];
    if (selfMatch) return [node];
    if (childMatches.length > 0) return [{ ...node, children: childMatches }];
    return [];
  });
}

function collectFolderIds(nodes: FileTreeNode[]): string[] {
  return nodes.flatMap((node) =>
    node.children ? [node.id, ...collectFolderIds(node.children)] : [],
  );
}

export function FilterableTree() {
  const [query, setQuery] = useState("");
  const filtered = useMemo(
    () => (query ? filterTree(initialNodes, query) : initialNodes),
    [query],
  );
  // While a query is active we force every matched ancestor open via the
  // controlled `expanded` prop; passing `undefined` hands control back to
  // `defaultExpanded` so users can manually toggle folders without remount.
  const expanded = useMemo(
    () => (query ? collectFolderIds(filtered) : undefined),
    [query, filtered],
  );

  return (
    <div className="space-y-2">
      <Input
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder="Filter files..."
        aria-label="Filter files"
      />
      <FileTree
        aria-label="Project files"
        nodes={filtered}
        expanded={expanded}
        defaultExpanded={["src"]}
      />
    </div>
  );
}

import { FileTree, type FileTreeNode } from "@/components/ui/file-tree";

function TsxIcon() {
  return (
    <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="currentColor" aria-hidden="true">
      <path d="M2 2h12v12H2z" opacity="0.1" />
      <text x="8" y="11" fontSize="6" fontWeight="700" textAnchor="middle" fill="currentColor">TSX</text>
    </svg>
  );
}

function JsonIcon() {
  return (
    <svg viewBox="0 0 16 16" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
      <path d="M5 3c-1.5 0-2 .8-2 2v2c0 1-.5 1.5-1.5 1.5C2.5 8.5 3 9 3 10v2c0 1.2.5 2 2 2" />
      <path d="M11 3c1.5 0 2 .8 2 2v2c0 1 .5 1.5 1.5 1.5-1 0-1.5.5-1.5 1.5v2c0 1.2-.5 2-2 2" />
    </svg>
  );
}

const nodes: FileTreeNode[] = [
  {
    id: "app",
    name: "app",
    children: [
      { id: "app/page.tsx", name: "page.tsx", icon: <TsxIcon /> },
      { id: "app/layout.tsx", name: "layout.tsx", icon: <TsxIcon /> },
    ],
  },
  { id: "package.json", name: "package.json", icon: <JsonIcon /> },
  { id: "tsconfig.json", name: "tsconfig.json", icon: <JsonIcon /> },
];

export function CompactTree() {
  return (
    <FileTree
      aria-label="Source"
      nodes={nodes}
      defaultExpanded={["app"]}
      className="text-xs"
    />
  );
}