Biblioteca de componentes React com MUI e padrão Gov.br para a ANPD.
O shared-ui é uma biblioteca de componentes compartilháveis da ANPD, construída com React, TypeScript e Material-UI (MUI), seguindo os padrões visuais do Gov.br Design System.
Centralizar e padronizar componentes de interface para todos os projetos da ANPD, garantindo:
- Consistência visual entre aplicações
- Reutilização de código e padrões
- Manutenibilidade centralizada
- Conformidade com Gov.br Design System
Para atender aos requisitos do projeto, implementamos uma arquitetura de modo duplo que permite flexibilidade na utilização dos componentes:
- Modo Padrão (
strictgovbr={false}- padrão): Componente MUI estilizado viagovbrTheme.ts - Modo Estrito (
strictgovbr={true}): Elemento HTML puro com classes CSS do Gov.br DS
Esta arquitetura resolve questões técnicas de compatibilidade entre MUI (CSS-in-JS) e Gov.br DS (classes CSS globais).
Siga estes passos para usar a biblioteca em uma aplicação (ex: backlog-dim).
npm install @anpdgovbr/shared-uiEsta etapa é obrigatória. A shared-ui espera que a sua aplicação forneça as seguintes bibliotecas. Instale-as no seu projeto:
npm install @emotion/react @emotion/styled @govbr-ds/core @mui/icons-material @mui/material react react-domNo arquivo de layout principal da sua aplicação (geralmente _app.tsx ou layout.tsx), você precisa importar os estilos do Gov.br DS e envolver sua aplicação com o GovBRThemeProvider.
// Em src/app/layout.tsx (ou equivalente)
// 1. Importe os arquivos de estilo do Gov.br DS
import '@govbr-ds/core/dist/core.min.css'
import '@govbr-ds/core/dist/core-tokens.min.css'
// 2. Importe o Provedor de Tema da nossa biblioteca
import { GovBRThemeProvider } from '@anpdgovbr/shared-ui'
export default function RootLayout({ children }) {
return (
<html lang="pt-BR">
<body>
{/* 3. Envolva sua aplicação com o Provedor */}
<GovBRThemeProvider>{children}</GovBRThemeProvider>
</body>
</html>
)
}Agora você pode usar os componentes em qualquer lugar da sua aplicação.
Exemplo 1: Modo Padrão (Recomendado)
Este é o modo principal de uso. O componente renderiza um componente MUI estilizado pelo govbrTheme.ts para seguir os padrões do Gov.br DS.
import { GovBRButton } from '@anpdgovbr/shared-ui'
function MeuComponente() {
return (
<GovBRButton variant="contained" color="primary">
Salvar
</GovBRButton>
)
}Exemplo 2: Modo Estrito (Quando Necessário)
Use strictgovbr={true} quando precisar de 100% de fidelidade visual ao CSS oficial do Gov.br DS.
import { GovBRButton } from '@anpdgovbr/shared-ui'
function MeuComponente() {
return (
<GovBRButton strictgovbr inverted>
Cancelar
</GovBRButton>
)
}Para entender em profundidade por que a biblioteca funciona dessa maneira e como contribuir com novos componentes, hooks e layouts, consulte nosso guia de arquitetura completo.
Para contribuir com o desenvolvimento da shared-ui:
-
Clone o repositório:
git clone git@github.com:anpdgovbr/shared-ui.git -
Instale as dependências:
npm install -
Execute o Storybook para ver os componentes em ação:
npm run dev
Contribuições são bem-vindas! Leia nosso Guia de Contribuição para entender o processo de desenvolvimento, validação e submissão de Pull Requests.
Este projeto está licenciado sob a Licença MIT.