Pular para o conteúdo principal

Briefing técnico do componente FileTree.tsx

Aqui está o briefing técnico do componente FileTree.tsx, ideal para incluir na documentação interna do seu projeto Docusaurus ou guia de contribuição.

📄 Componente: <FileTree/>​

O <FileTree/> é um componente React/TypeScript desenvolvido para Docusaurus que renderiza árvores de arquivos e diretórios de forma limpa, interativa e acessível. Ele foi projetado para facilitar a instrução de tarefas práticas e laboratórios, destacando ações no padrão CRUD e permitindo copiar caminhos rapidamente.

🎯 Principais Funcionalidades​

  • Declaração por Caminhos Relativos: Gera árvores completas a partir de um simples array de strings (ex: "src/main.cpp u").

  • Ações no Padrão CRUD: Destaca arquivos que exigem intervenção com badges coloridas usando as iniciais ou termos em inglês/português:

  • C / Create / Add / Adicione (c) → Criar Aqui (Info/Azul)

  • R / Read / Verify / Leia (r) → Verificar (Primary/Roxo)

  • U / Update / Edit / Edite (u) → Edite Aqui (Warning/Amarelo)

  • D / Delete / Remove / Deletar (d) → Remover (Danger/Vermelho)

  • Clique para Copiar (Copy to Clipboard): Ao clicar sobre um arquivo com ação ou na sua badge, o caminho relativo é copiado instantaneamente para a área de transferência, exibindo o feedback visual "✅ Copiado!".

  • Suporte a Omissões (...) e Pastas Vazias: Permite ocultar partes irrelevantes com ... e forçar pastas sem arquivos usando / ao final (ex: "Empty/Folder/").

  • Suporte a Modos de Visualização: Pode ser renderizado de forma fixa ou retrátil (details / summary).

  • Ícones Automáticos: Identifica extensões comuns (.cpp, .json, .yml, .md, .toml, .ini) e atribui emojis visuais apropriados.

  • Tema Dinâmico: Compatível com Light/Dark Mode do Docusaurus via variáveis CSS nativas (var(--ifm-...)).

⚙️ Propriedades (Props)​

PropriedadeTipoPadrãoDescrição
filesstring[]ObrigatórioArray de caminhos de arquivos/pastas com ação opcional ao final.
rootstring""Nome do diretório raiz exibido no topo.
detailsbooleanfalseSe true, envolve o componente em uma tag <details> retrátil.
titlestring"Estrutura de arquivos"Título exibido no cabeçalho/summary quando details={true}.
defaultOpenbooleanfalseSe true, inicia o modo details expandido por padrão.

💻 Exemplo de Uso (MDX)​

<FileTree
  details
  defaultOpen
  title="Estrutura de Arquivos do Projeto"
  root="lab03-grupo-p-main"
  files={[
    ".github/workflows/grade.yml d",
    ".vscode/launch.json",
    "docs/empty-folder/",
    "src/main.cpp r",
    "...",
    "wokwi.toml u",
    "notes.txt c",
  ]}
/>
📂 lab03-grupo-p-main/
  • ├── 📂.github
    • └── 📂workflows
      • └── 🚀grade.yml👈 Remover
  • ├── 📂.vscode
    • └── 🔧launch.json
  • ├── 📂docs
    • └── 📄empty-folder
  • ├── 📂src
    • └── 📄main.cpp👈 Verificar
  • ├── 📄...
  • ├── 🔧wokwi.toml👈 Edite Aqui
  • └── 📄notes.txt👈 Criar Aqui

🛠️ Script Utilitário Recomentado​

Para gerar o trecho de código JSX automaticamente a partir do disco local sem digitar arquivo por arquivo, utilize o script auxiliar Node.js:

node generate-filetree.js ./caminho/para/pasta
Organização do Curso
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)
Estrutura Organizacional e Repositórios
ELT85B-N21-2026-2:LAB00
├── Times
│   ├── Grupo-A
│   ├── ...
│   ├── Grupo-P  # (Professor)
│   └── Grupo-N  # (Notas)
└── Repositórios
    ├── lab00-template
    ├── lab00-grupo-a
    ├── ...
    ├── lab00-grupo-p  # (Professor)
    └── lab00-grupo-n  # (Notas)
labxy-grupo-x
├── .github
│   └── workflows
│       └── grade.yml  # Editar
├── .gitignore
├── .vscode
│   ├── c_cpp_properties.json
│   ├── extensions.json
│   └── launch.json  # Ler
├── README.md
├── diagram.json  # Criar
├── include
│   └── README
├── lib
│   └── README  # Deletar
├── platformio.ini
├── src
│   └── main.cpp
├── test
│   └── README
└── wokwi.toml  # Criar

ActionType = 'create' | 'read' | 'update' | 'delete';

📂 labxy-grupo-x/
  • ├── 📂.github
    • └── 📂workflows
      • └── 🚀grade.yml👈 Edite Aqui
  • ├── 📄.gitignore
  • ├── 📂.vscode
    • ├── 🔧c_cpp_properties.json
    • ├── 🔧extensions.json
    • └── 🔧launch.json👈 Verificar
  • ├── 📝README.md
  • ├── 🔧diagram.json👈 Criar Aqui
  • ├── 📂include
    • └── 📄README
  • ├── 📂lib
    • └── 📄README👈 Remover
  • ├── 🔧platformio.ini
  • ├── 📂src
    • └── 📄main.cpp
  • ├── 📂test
    • └── 📄README
  • └── 🔧wokwi.toml👈 Criar Aqui
labxy-grupo-x
├── .github
│   └── workflows
│       └── grade.yml  # Editar
├── .gitignore
├── .vscode
│   ├── c_cpp_properties.json
│   ├── extensions.json
│   └── launch.json  # Ler
├── README.md
├── diagram.json  # Criar
├── include
│   └── README
├── lib
│   └── README  # Deletar
├── platformio.ini
├── src
│   └── main.cpp
├── test
│   └── README
└── wokwi.toml  # Criar
📂 labxy-grupo-x/
  • ├── 📂.github
    • └── 📂workflows
      • └── 🚀grade.yml👈 Remover
  • ├── 📂src
    • └── 📄main.cpp👈 Verificar
  • ├── 🔧wokwi.toml👈 Edite Aqui
  • └── 🔧diagram.json👈 Criar Aqui
📂 lab03-grupo-p-main/
  • ├── 📂.github
    • └── 📂workflows
      • └── 🚀grade.yml👈 Remover
  • ├── 📂Empty
    • └── 📄Folder
  • ├── 📂src
    • └── 📄main.cpp👈 Verificar
  • ├── 📄...
  • └── 🔧wokwi.toml👈 Edite Aqui
lab03-grupo-p-main
├── .github
│   └── workflows
│       └── grade.yml  # Deletar
├── Empty
│   └── Folder
├── src
│   └── main.cpp  # Ler
├── ...
└── wokwi.toml  # Editar
<FileTree
root="labxy-grupo-p"
files={[
".github/workflows/grade.yml",
".gitignore",
".vscode/c_cpp_properties.json",
".vscode/extensions.json",
".vscode/launch.json",
"README.md",
"diagram.json",
"include/README",
"lib/README",
"platformio.ini",
"src/main.cpp",
"test/README",
"wokwi.toml",
]}
/>
📂 labxy-grupo-p/
  • ├── 📂.github
    • └── 📂workflows
      • └── 🚀grade.yml
  • ├── 📄.gitignore
  • ├── 📂.vscode
    • ├── 🔧c_cpp_properties.json
    • ├── 🔧extensions.json
    • └── 🔧launch.json
  • ├── 📝README.md
  • ├── 🔧diagram.json
  • ├── 📂include
    • └── 📄README
  • ├── 📂lib
    • └── 📄README
  • ├── 🔧platformio.ini
  • ├── 📂src
    • └── 📄main.cpp
  • ├── 📂test
    • └── 📄README
  • └── 🔧wokwi.toml
  • Árvore em modo expansível (details)
<FileTree
details
root="lab03-grupo-p-main"
files={[".github/workflows/grade.yml d", "wokwi.toml u"]}
/>
📂 lab03-grupo-p-main/
  • ├── 📂.github
    • └── 📂workflows
      • └── 🚀grade.yml👈 Remover
  • └── 🔧wokwi.toml👈 Edite Aqui
  • Árvore em modo expansível (details)
<FileTree
details
defaultOpen
title="Clique para ver a árvore do projeto"
root="lab03-grupo-p-main"
files={["src/main.cpp r", "wokwi.toml u"]}
/>
📂 lab03-grupo-p-main/
  • ├── 📂src
    • └── 📄main.cpp👈 Verificar
  • └── 🔧wokwi.toml👈 Edite Aqui
Última atualização em por Adriano Ruseler