Guia de Componentes de Árvore de Arquivos

Disponibilizamos dois componentes React no projeto para documentar estruturas de arquivos, pastas e repositórios: SimpleFileTree e FileTree.

Mapeamento de Atalhos

Ambos os componentes aceitam letras de atalho ao final de cada linha (exemplo: "Times/Grupo-P p" ou "src/main.cpp u"):

Atalho	Significado	SimpleFileTree	FileTree
c	Criar	# Criar	Badge Azul (👈 Criar Aqui)
r	Ler / Verificar	# Ler	Badge Azul (👈 Verificar)
u	Editar	# Editar	Badge Amarela (👈 Edite Aqui)
d	Remover	# Deletar	Badge Vermelha (👈 Remover)
p	Professor	# (Professor)	Badge Neutra (👈 Professor)
n	Notas	# (Notas)	Badge Neutra (👈 Notas)
g	Gerado	# Gerado	Badge Cinza (👈 Gerado)

---

1. SimpleFileTree

O SimpleFileTree gera uma saída em texto plano (ASCII tree) formatada como bloco de código (<ThemeCodeBlock language="txt">). É ideal para representar árvores clássicas de terminal ou estruturas dinâmicas do repositório/laboratório com suporte opcional ao contêiner colapsável <details>.

Props principais

• profile (string, opcional): Perfil pré-configurado para repositórios do curso (ex: "lab00", "lab01").
• root (string, opcional): Nome da raiz da árvore.
• title (string, opcional): Título exibido no topo ou na tag <summary> do <details>.
• files (string[], opcional): Lista de caminhos relativos.
• details (boolean, opcional): Envolve a árvore numa tag <details> se true.
• defaultOpen (boolean, opcional): Define se o <details> inicia aberto (padrão true).

Exemplo de uso com profile:

<SimpleFileTree defaultOpen details profile="lab00" />

Estrutura organizacional dos repositórios

ELT73A-S22-2026-2
├── Times
│   ├── Grupo-A
│   ├── ...
│   ├── Grupo-P  # (Professor)
│   └── Grupo-N  # (Notas)
└── Repositórios
    ├── lab00-template
    ├── lab00-grupo-a
    ├── ...
    ├── lab00-grupo-p  # (Professor)
    └── lab00-grupo-n  # (Notas)

---

Exemplo de uso customizado:

<SimpleFileTree
  details
  defaultOpen
  title="Estrutura do Projeto C++"
  root="meu-projeto"
  files={[
    ".github/workflows/grade.yml d",
    ".vscode/launch.json",
    "src/main.cpp u",
    "src/utils.h c",
    "notes.txt r",
  ]}
/>

Estrutura do Projeto C++

meu-projeto
├── .github
│   └── workflows
│       └── grade.yml  # Deletar
├── .vscode
│   └── launch.json
├── src
│   ├── main.cpp  # Editar
│   └── utils.h  # Criar
└── notes.txt  # Ler

---

2. FileTree

O FileTree renderiza uma árvore interativa estilizada em HTML/CSS. Possui suporte a ícones por tipo de arquivo, marcações visuais com badget/cores para ações CRUD e recurso de copiar caminho relativo para a área de transferência com 1 clique.

Props principais

• root (string, opcional): Nome da pasta/repositório raiz.
• files (string[], obrigatório): Lista de arquivos/pastas com ação CRUD opcional.

Exemplo de uso:

<FileTree
  root="lab03-grupo-p"
  files={[
    ".github/workflows/grade.yml d",
    ".vscode/launch.json",
    "src/main.cpp u",
    "wokwi.toml r",
    "notes.txt c",
  ]}
/>

📂 lab03-grupo-p/

• ├── 📂.github
  • └── 📂workflows
    • └── 🚀grade.yml👈 Remover
• ├── 📂.vscode
  • └── 🔧launch.json
• ├── 📂src
  • └── 📄main.cpp👈 Edite Aqui
• ├── 🔧wokwi.toml👈 Verificar
• └── 📄notes.txt👈 Criar Aqui

---

3. Comparação Lado a Lado

Abaixo você confere o mesmo conjunto de dados renderizado por ambos os componentes simultaneamente:

---

4. Tabela Comparativa de Recursos

Recurso	SimpleFileTree	FileTree
Formato de Saída	Bloco de texto Monospaced (ASCII)	Componentes e listas HTML estilisadas
Ações CRUD	Comentários simples de texto (# Editar, # Deletar)	Badges coloridas e interativas (👈 Edite Aqui)
Interatividade	Copiar o bloco completo (via Docusaurus CodeBlock)	Clique para copiar o caminho do arquivo individual
Ícones de Arquivo	Não (somente texto ASCII)	Sim (📁, 📝, 🚀, 🔧, 📄)
Perfis Prontos (profile)	Sim (lab00, lab01, etc.)	Não (exige informar a prop files)
Suporte a <details>	Nativo (details={true})	Não (renderiza diretamente o card)
Casos de Uso Recomendados	Copiar/colar rápido em logs, READMEs e organizações de turmas/labs	Instruções passo a passo de exercícios e tarefas do aluno

---

Exemplo de Uso no MDX

<FileTree
  root="lab03-grupo-p-main"
  files={[
    "build/main.o g",
    "docs/empty-folder/",
    "src/main.cpp u",
    "wokwi.toml r",
  ]}
/>

📂 lab03-grupo-p-main/

• ├── 📂build
  • └── 📄main.o👈 Gerado
• ├── 📂docs
  • └── 📄empty-folder
• ├── 📂src
  • └── 📄main.cpp👈 Edite Aqui
• └── 🔧wokwi.toml👈 Verificar

lab03-grupo-p-main
├── build
│   └── main.o  # Gerado
├── docs
│   └── empty-folder
├── src
│   └── main.cpp  # Editar
└── wokwi.toml  # Ler

---

📂 ELT85B-N21-2026-2/

• ├── 📂Times
  • ├── 📄Grupo-A
  • ├── 📄...
  • ├── 📄Grupo-P👈 (Professor)
  • └── 📄Grupo-N👈 (Notas)
• └── 📂Repositórios
  • ├── 📄lab00-template
  • ├── 📄lab00-grupo-a
  • ├── 📄...
  • ├── 📄lab00-grupo-p👈 (Professor)
  • └── 📄lab00-grupo-n👈 (Notas)

<FileTree
  root="labxy-grupo-x"
  files={[
    ".github/workflows/grade.yml u",
    ".gitignore",
    ".vscode/c_cpp_properties.json",
    ".vscode/extensions.json",
    ".vscode/launch.json r",
    "build/main.o g",
    "README.md p",
    "diagram.json c",
    "include/README n",
    "lib/README d",
    "platformio.ini",
    "src/main.cpp",
    "test/README",
    "wokwi.toml c",
  ]}
/>

📂 labxy-grupo-x/

• ├── 📂.github
  • └── 📂workflows
    • └── 🚀grade.yml👈 Edite Aqui
• ├── 📄.gitignore
• ├── 📂.vscode
  • ├── 🔧c_cpp_properties.json
  • ├── 🔧extensions.json
  • └── 🔧launch.json👈 Verificar
• ├── 📂build
  • └── 📄main.o👈 Gerado
• ├── 📝README.md👈 (Professor)
• ├── 🔧diagram.json👈 Criar Aqui
• ├── 📂include
  • └── 📄README👈 (Notas)
• ├── 📂lib
  • └── 📄README👈 Remover
• ├── 🔧platformio.ini
• ├── 📂src
  • └── 📄main.cpp
• ├── 📂test
  • └── 📄README
• └── 🔧wokwi.toml👈 Criar Aqui

---

<FileTree
  root="labxy-grupo-x"
  files={[
    ".github/workflows/grade.yml d", // Delete (Remover)
    "src/main.cpp r", // Read (Verificar)
    "wokwi.toml u", // Update (Edite Aqui)
    "diagram.json c", // Create (Criar Aqui)
  ]}
/>

📂 labxy-grupo-x/

• ├── 📂.github
  • └── 📂workflows
    • └── 🚀grade.yml👈 Remover
• ├── 📂src
  • └── 📄main.cpp👈 Verificar
• ├── 🔧wokwi.toml👈 Edite Aqui
• └── 🔧diagram.json👈 Criar Aqui

---

<SimpleFileTree
  details
  profile="lab00"
  title="Estrutura do Laboratório Inicial"
  root="UTFPR-ELT85B-2026-2"
/>

Estrutura do Laboratório Inicial

UTFPR-ELT85B-2026-2
├── Times
│   ├── Grupo-A
│   ├── ...
│   ├── Grupo-P  # (Professor)
│   └── Grupo-N  # (Notas)
└── Repositórios
    ├── lab00-template
    ├── lab00-grupo-a
    ├── ...
    ├── lab00-grupo-p  # (Professor)
    └── lab00-grupo-n  # (Notas)