Package Exports

@anpdgovbr/shared-ui
@anpdgovbr/shared-ui/styles

Readme

📦 ANPD Shared UI

Biblioteca de componentes React com MUI e padrão Gov.BR para a ANPD.

Sobre o Projeto

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.

🎯 Objetivo Principal

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

🏛️ Arquitetura Híbrida

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 via govbrTheme.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).

Instalação e Uso

Siga estes passos para usar a biblioteca em uma aplicação (ex: backlog-dim).

Passo 1: Instalar a Biblioteca

npm install @anpdgovbr/shared-ui

Passo 2: Instalar Dependências Parceiras (`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

Passo 3: Configurar o Tema e CSS

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>
  )
}

Passo 4: Usar os Componentes

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>
  )
}

Desenvolvimento Local

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

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.

Licença

Este projeto está licenciado sob a Licença MIT.

@anpdgovbr/shared-ui