Ir para o conteúdo principal

React – @govbr-ds/components-react

npm (next)

Este é um wrapper React que encapsula os Web Components do GovBR-DS v4, permitindo seu uso como componentes nativos do React.

Por que usar este wrapper? 🤔​

  • Bindings JSX para props/eventos.
  • Tipagens e autocomplete nos IDEs.
  • Soluciona limitações de passagem de objetos/arrays e captura de eventos em custom elements no React.

Para mais detalhes, consulte a documentação oficial do Stencil e o Custom Elements Everywhere.

Instalação 📦​

npm install @govbr-ds/core @govbr-ds/components @govbr-ds/components-react
# ou
pnpm add @govbr-ds/core @govbr-ds/components @govbr-ds/components-react
# ou
yarn add @govbr-ds/core @govbr-ds/components @govbr-ds/components-react

Nota importante: pnpm e tree-shaking​

Se ao consumir estes pacotes você notar que o bundler não está removendo código não utilizado (tree‑shaking), pode haver uma incompatibilidade com o layout padrão do pnpm.

Solução rápida (opcional, somente se precisar): crie um arquivo .npmrc na raiz do seu projeto com:

node-linker=hoisted

Por que isso ajuda: por padrão, o pnpm organiza as dependências em pastas isoladas com symlinks. Alguns bundlers/otimizadores se baseiam na estrutura de node_modules e no campo sideEffects para decidir o que pode ser eliminado. O layout hoisted aproxima o formato “achatado” (similar ao npm/yarn), facilitando essa análise e, em muitos casos, restaurando o tree‑shaking.

Observações:

  • Use apenas se o tree‑shaking realmente não estiver funcionando.
  • Pode aumentar o uso de disco e alterar a resolução de dependências do seu projeto.

Uso 📚​

Fontes e ícones​

Desenvolvimento 👨‍💻​

Estrutura do projeto​

├── 📁 src
│   ├── 📁 stencil-generated
│   └── 📄 index.ts
├── 📁 ssr
│   ├── 📁 stencil-generated
│   └── 📄 index.ts

[!WARNING] Tudo dentro de stencil-generated é sobrescrito ao gerar o build de Web Components.

Scripts/Build​

Gere os Web Components antes de compilar o wrapper:

nx build components
nx build react

Gerenciar baseline de tamanho:

# Da raiz do monorepo:
pnpm run baseline:update:react    # Atualizar baseline
pnpm run baseline:compare:react   # Comparar com baseline atual

Documentações Complementares 📖​

Contribuindo 🤝​

Reportar Bugs/Problemas 🐛​

Abra uma issue: gitlab.com/.../issues/new

Commits 📝​

Padrões de branches e commits: gov.br/ds/wiki

Precisa de ajuda? 🆘​

Créditos 🎉​

Desenvolvido pelo SERPRO com a comunidade.