Biblioteca de componentes React baseada nas especificações do Padrão Digital de Governo (GOVBR-DS).
Este projeto está sendo desenvolvido com:
Para saber mais detalhes sobre React, sugerimos que consulte a Documentação Oficial.
-
Instalar a biblioteca de componentes React:
npm install --save @govbr-ds/react-components
-
Instalar a biblioteca de ícones Font Awesome Free na versão 5.x:
npm install --save @fortawesome/fontawesome-free@^5.11.2
-
Importar os arquivos CSS necessários das duas bibliotecas acima no entrypoint da aplicação (geralmente o arquivo
src/index.jsx,src/index.tsxousrc/main.tsx):/* Arquivo src/index.jsx, src/index.tsx ou src/main.tsx */ import "@fortawesome/fontawesome-free/css/all.min.css"; import "@govbr-ds/core/dist/core.min.css";
-
Adicionar as fontes Rawline e Raleway, utilizadas pelo GOVBR-DS, ao
<head>do arquivoindex.htmloupublic/index.htmldo projeto (Opção 1), ou instalar/baixar estas dependências e importar no entrypoint da aplicação (Opção 2):Opção 1:
<!-- Arquivo index.html ou public/index.html --> <html> <head> <!-- outras entradas do <head> ... --> <!-- Fonte Rawline--> <link href="https://fonts.cdnfonts.com/css/rawline" rel="stylesheet" /> <!-- Fonte Raleway--> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap" /> </head> <!-- restante do documento --> </html>
ou
Opção 2:
/* Arquivo src/index.jsx, src/index.tsx ou src/main.tsx */ import "./assets/arquivo-fonte-rawline.css"; import "./assets/arquivo-fonte-raleway.css";
Após os passos de instalação, ja é possível importar do pacote @govbr-ds/react-components os componentes necessários em sua aplicação. Como o pacote exporta os tipos TypeScript dos componentes, se o seu projeto utilizar TypeScript, poderá se aproveitar do recurso de auto-completar as propriedades.
Exemplo:
import { BrButton } from "@govbr-ds/react-components";
const MyComponent = () => {
return (
<div>
<BrButton primary size="large">My Button</Button>
</div>
)
}A documentação sobre as propriedades dos componentes e exemplos de utilização podem ser vistos no Storybook.
Por favor, verifique o nosso guia de contribuição.
A única ferramenta estritamente necessária é o Node.js em alguma versão >= 18.x
Após clonar o projeto, entre em seu diretório pelo terminal e execute o comando abaixo para instalar as dependências necessárias:
npm installDepois utilize os scripts disponíveis, de acordo com a necessidade, executando comandos no padrão:
npm run <nome-do-script>Scripts disponíveis:
-
generate: executa o Plop para criar um novo componente, utilizando templates pré-definidos, com uma estrutura inicial de componente, testes unitários e Storybook. Informando apenas o nome do componente em um guia interativo, serão criados os arquivos emsrc/components/NomeDoComponente. Exemplo:$ npm run generate @govbr-ds/react-components@2.0.0 generate plop --plopfile ./generators/plopfile.js Nome do componente? BrTable ✔ ++ ~/react-components/src/components/BrTable/index.tsx ✔ ++ ~/react-components/src/components/BrTable/stories.tsx ✔ ++ ~/react-components/src/components/BrTable/BrTable.test.tsx
-
test: Executa todos os testes. -
test:watch: Executa todos os testes em watch mode. -
coverage: Verifica a cobertura de testes do projeto. -
dev: Inicia uma aplicação React, em modo de desenvolvimento, permitindo testar os componentes criados em um Showcase. -
build:lib: Compila e empacota a biblioteca de componentes e a disponibiliza no diretóriodist. -
build:showcase: Compila e empacota o Showcase para produção e o disponibiliza no diretórioshowcase/. -
storybook: Executa localmente a documentação do Storybook. -
storybook:build: Prepara documentação estática do Storybook para implantação e a disponibiliza no diretóriostorybook/. -
lint: Executa o ESLint para checagem estática do código, gerando um relatório no arquivoreport-eslint.html. -
commit: Executa o Commitizen para facilitar a padronização dos commits.
Utilizamos um padrão para branches e commits. Por favor observe a documentação na nossa wiki para aprender sobre os nossos padrões.
Você pode criar issues para nos informar os problemas que tem enfrentado ao utilizar nossa biblioteca ou sugestões de novas features. Por favor, preencha o modelo que mais se encaixa na sua necessidade com o máximo de detalhes possíveis.
Nos comprometemos a responder a todas as issues.
Por favor, não crie issues para fazer perguntas!
Acesse os canais abaixo para tirar suas dúvidas:
- Site do GOVBR-DS http://gov.br/ds
- React Components https://gitlab.com/govbr-ds/bibliotecas/react-components/
- Usando nosso canal no discord https://discord.gg/U5GwPfqhUP
O React Components - GOVBR-DS foi criado pelo SERPRO e Dataprev, com a participação da comunidade.
Neste projeto utilizamos a licença MIT.