@anpdgovbr/shared-ui
Advanced tools
Biblioteca de componentes React com MUI v7 e padrão govbr-ds para ANPD
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:
Para atender aos requisitos do projeto, implementamos uma arquitetura de modo duplo que permite flexibilidade na utilização dos componentes:
strictgovbr={false} - padrão): Componente MUI estilizado via govbrTheme.tsstrictgovbr={true}): Elemento HTML puro com classes CSS do Gov.br DSEsta 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-ui
peerDependencies)Esta 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-dom
No 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)
import { GovBRButton } from '@anpdgovbr/shared-ui'
function MeuComponente() {
return (
<GovBRButton variant="contained" color="primary">
Salvar
</GovBRButton>
)
}
Exemplo 2: Modo Estrito (Quando Necessário)
import { GovBRButton } from '@anpdgovbr/shared-ui'
function MeuComponente() {
return (
<GovBRButton strictgovbr inverted>
Cancelar
</GovBRButton>
)
}
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.
FAQs
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.
Security News
This episode explores the hard problem of reachability analysis, from static analysis limits to handling dynamic languages and massive dependency trees.
Security News
/Research
Malicious Nx npm versions stole secrets and wallet info using AI CLI tools; Socket’s AI scanner detected the supply chain attack and flagged the malware.