Skip to content

C4 — Nível 3: Componentes

Gerado pelo Architect (Reversa) em 2026-05-11 Confiança: 🟢 CONFIRMADO | 🟡 INFERIDO | 🔴 LACUNA

Nível de detalhe focado nos containers de maior complexidade: Estado Global (Redux) e Camada de Serviço.

Container: Estado Global (Redux Toolkit)

C4Component
  title Componentes — Estado Global (Redux Toolkit)

  Container_Boundary(store, "Estado Global") {

    Component(sliceMusicas, "Musicas Slice", "Redux Slice + EntityAdapter", "Estado da lista paginada de músicas. Gerencia loadings, filtros ativos e músicas favoritas.")
    Component(sliceRepertorios, "Repertorios Slice", "Redux Slice + EntityAdapter", "Lista de repertórios do usuário. CRUD local, duplicação e importação.")
    Component(sliceItens, "ItensRepertorio Slice", "Redux Slice + EntityAdapter", "Itens do repertório em edição ativa. Adição, remoção e reordenação.")
    Component(sliceLivros, "Livros Slice", "Redux Slice", "Edições de livro disponíveis para filtro na busca.")
    Component(sliceAcesso, "Acesso Slice", "Redux Slice", "Estado de autenticação: usuário logado, loading de auth, token de sessão.")
    Component(sliceSugestoes, "SugestoesRepertorio Slice", "Redux Slice + EntityAdapter", "Sugestões de repertório litúrgico para navegação por data.")
    Component(sliceBiblioteca, "Biblioteca API Slice", "RTK Query", "Busca obras disponíveis na canta.app API. Cache automático.")
    Component(sliceLiturgia, "Liturgia API Slice", "RTK Query", "Busca leituras do dia na API DANCRF com cache local SQLite como middleware.")
    Component(sliceUI, "UI Slice", "Redux Slice", "Estado transversal de UI: modais abertos, configurações carregadas, tema ativo.")
  }

  Container(ui, "Interface React Native", "", "")
  Container(service, "Camada de Serviço", "", "")
  Container(repo, "Camada de Repositório", "", "")

  Rel(ui, sliceMusicas, "Despacha busca, lê músicas e favoritos", "useSelector / useDispatch")
  Rel(ui, sliceRepertorios, "Lê e edita repertórios", "useSelector / useDispatch")
  Rel(ui, sliceItens, "Lê e edita itens do repertório aberto", "useSelector / useDispatch")
  Rel(ui, sliceLivros, "Lê livros para filtro de busca", "useSelector")
  Rel(ui, sliceAcesso, "Verifica usuário logado, dispara login", "useSelector / useDispatch")
  Rel(ui, sliceSugestoes, "Navega por sugestões litúrgicas", "useSelector / useDispatch")
  Rel(ui, sliceBiblioteca, "Lista obras disponíveis", "RTK Query hooks")
  Rel(ui, sliceLiturgia, "Lê liturgia do dia", "RTK Query hooks")
  Rel(ui, sliceUI, "Abre/fecha modais, lê tema", "useSelector / useDispatch")

  Rel(sliceMusicas, service, "Thunks chamam MusicaService", "TypeScript")
  Rel(sliceMusicas, repo, "Thunks chamam MusicasRepository", "TypeScript")
  Rel(sliceRepertorios, service, "Thunks chamam RepertorioService, CompartilharService, FolhetoService", "TypeScript")
  Rel(sliceRepertorios, repo, "Thunks chamam RepertoriosRepository", "TypeScript")
  Rel(sliceItens, repo, "Thunks chamam ItensRepertorioRepository", "TypeScript")
  Rel(sliceAcesso, service, "Thunks chamam Auth", "TypeScript")
  Rel(sliceSugestoes, repo, "Thunks chamam BibliotecaSugestoesRepertorioRepository", "TypeScript")
  Rel(sliceBiblioteca, repo, "Thunks chamam BibliotecaRepository + ObraService", "TypeScript")
  Rel(sliceLiturgia, repo, "Middleware consulta LiturgiaCacheRepository antes da API", "TypeScript")

Container: Camada de Serviço

C4Component
  title Componentes — Camada de Serviço

  Container_Boundary(service, "Camada de Serviço") {

    Component(musicaSvc, "MusicaService", "TypeScript Service", "Favoritar, marcar como visualizada, relatar erro (Airtable), compartilhar letra por texto.")
    Component(repertorioSvc, "RepertorioService", "TypeScript Service", "Gera mensagem de compartilhamento WhatsApp. Orquestra importação de repertório via slug.")
    Component(compartilharSvc, "CompartilharService", "TypeScript Service", "Fluxo completo de compartilhamento: auth → POST/PUT API → slug → Share nativo.")
    Component(folhetoSvc, "FolhetoService", "TypeScript Service + Strategy", "3 estratégias: Slug (API), Base64 (URL), Noop. Abre livreto.canta.app.")
    Component(obraSvc, "ObraService", "TypeScript Service", "Download de arquivo SQLite, import atômico via ATTACH/DETACH, mutex de concorrência.")
    Component(bibliotecaSvc, "BibliotecaService", "TypeScript Service", "Abre links externos (Liturgia Diária, CNBB, Paulus).")
    Component(calendarioSvc, "CalendarioLiturgicoService", "TypeScript Service + romcal", "Cálculo offline do calendário romano. Cache em memória por ano. Resolução de placeholders i18n.")
    Component(sugestoesSvc, "SugestoesRepertorioService", "TypeScript Service", "Sincronização de sugestões via ATTACH/DETACH (substituição total).")
    Component(auth, "Auth", "TypeScript + AppAuth", "Fluxo PKCE com Google. Refresh automático ≤ 1 min antes da expiração. Logout limpa Keychain + MMKV.")
  }

  Container(store, "Estado Global", "", "")
  Container(repo, "Camada de Repositório", "", "")
  System_Ext(cantaApi, "canta.app API", "")
  System_Ext(google, "Google OAuth", "")
  System_Ext(livreto, "livreto.canta.app", "")
  System_Ext(airtable, "Airtable", "")

  Rel(store, musicaSvc, "Thunks invocam", "TypeScript")
  Rel(store, repertorioSvc, "Thunks invocam", "TypeScript")
  Rel(store, compartilharSvc, "Thunks invocam", "TypeScript")
  Rel(store, folhetoSvc, "Thunks invocam", "TypeScript")
  Rel(store, obraSvc, "Thunks invocam", "TypeScript")
  Rel(store, calendarioSvc, "Thunks invocam", "TypeScript")
  Rel(store, sugestoesSvc, "Thunks invocam", "TypeScript")
  Rel(store, auth, "Thunks invocam (login/logout)", "TypeScript")

  Rel(compartilharSvc, cantaApi, "POST/PUT repertório", "HTTPS + Bearer")
  Rel(compartilharSvc, auth, "Garante token ativo antes de chamar API", "TypeScript")
  Rel(folhetoSvc, livreto, "Abre URL do folheto", "Link externo")
  Rel(obraSvc, cantaApi, "Download do arquivo SQLite de obra", "HTTPS")
  Rel(musicaSvc, airtable, "Abre form de erro pré-preenchido", "Link externo")
  Rel(auth, google, "Fluxo PKCE", "HTTPS OAuth 2.0")

  Rel(musicaSvc, repo, "MusicasRepository, MusicasFavoritasRepository", "TypeScript")
  Rel(repertorioSvc, repo, "RepertoriosRepository", "TypeScript")
  Rel(obraSvc, repo, "BibliotecaRepository (exemplares)", "TypeScript")
  Rel(sugestoesSvc, repo, "BibliotecaSugestoesRepertorioRepository", "TypeScript")
  Rel(auth, repo, "UsuarioLogadoRepository (MMKV), CredentialsRepository (Keychain)", "TypeScript")

Container: Camada de Repositório

C4Component
  title Componentes — Camada de Repositório

  Container_Boundary(repo, "Camada de Repositório") {

    Component(musicasRepo, "MusicasRepository", "TypeScript + op-sqlite", "findAllBy() com 3 estratégias (semTermo/porIndice/porFTS5). Paginação OFFSET/LIMIT. Snippet FTS5.")
    Component(musicasFavRepo, "MusicasFavoritasRepository", "TypeScript + op-sqlite", "Favoritar e desfavoritar músicas. Lista de favoritos (Repertório Padrão id=1).")
    Component(repertoriosRepo, "RepertoriosRepository", "TypeScript + op-sqlite", "CRUD de repertórios. Soft-delete. Ordenação JSON de itens.")
    Component(itensRepo, "ItensRepertorioRepository", "TypeScript + op-sqlite", "CRUD de itens de repertório (musica ou texto livre).")
    Component(livrosRepo, "LivrosRepository", "TypeScript + op-sqlite", "Lista edições de livro disponíveis para filtro.")
    Component(bibliotecaRepo, "BibliotecaRepository", "TypeScript + op-sqlite", "CRUD de exemplares de obras instaladas.")
    Component(sugestoesRepo, "BibliotecaSugestoesRepertorioRepository", "TypeScript + op-sqlite", "CRUD de sugestões + import via ATTACH. Popular com seed embarcado.")
    Component(liturgiaCacheRepo, "LiturgiaCacheRepository", "TypeScript + op-sqlite", "Cache SQLite de respostas DANCRF. Leitura antes de chamar a API.")
    Component(configRepo, "ConfiguracoesUsuarioRepository", "TypeScript + MMKV", "Lê e escreve preferências do usuário (fonte, tema, etc.). MMKV síncrono.")
    Component(configAppRepo, "ConfiguracoesAplicacaoRepository", "TypeScript + MMKV", "Estado persistido de aplicação (ex.: onboardingModal). MMKV síncrono.")
    Component(usuarioRepo, "UsuarioLogadoRepository", "TypeScript + MMKV", "Armazena e lê dados do usuário autenticado (slug, nome, email, foto via JWT).")
    Component(credRepo, "CredentialsRepository", "TypeScript + Keychain/localStorage", "Armazena e lê credenciais OAuth. Estratégia Keychain (nativo) ou localStorage (web).")
  }