FILE TREE

a recursive file tree from an indentation schema. built from an interview question — paste a nested outline on the left, get a collapsible folder tree on the right.

why

i wanted a tree i could feed with plain text, not a hand-built json blob. two spaces (or a tab) means "child of the line above." that is it.

the same primitive shows up in the one codebase post for monorepo layouts — schema in, tree out.

how it works

• parse — walk the schema line by line. count leading whitespace, keep a stack of open parents, attach each node when indent goes deeper, pop when it goes shallower
• render — recursive TreeNode. folders toggle expand; files just sit there. depth → padding, not nested wrappers for every level of chrome
• icons — file extension map for the common ones; folders get open/closed glyphs
• select — click reports { node, path } if you care. the playground just logs it

usage is two calls:

import { FileTree, parseSchemaToTree } from "@/components/logs/file-tree";

<FileTree
  data={parseSchemaToTree(schema)}
  defaultExpandedPaths={["src", "src/components"]}
/>

or skip the parser and pass FileTreeNode[] directly when you already have structured data.