@govbr-ds/react-components
v2.1.0
Published
Biblioteca de componentes react baseados no GOVBR-DS
Downloads
566
Readme
React Components - GOVBR-DS
Biblioteca de componentes React baseada nas especificações do Padrão Digital de Governo (GOVBR-DS).
Tecnologias
Este projeto está sendo desenvolvido com:
Para saber mais detalhes sobre React, sugerimos que consulte a Documentação Oficial.
Instalação
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.tsx
ousrc/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.html
oupublic/index.html
do 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";
Utilização
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>
)
}
Documentação e exemplos
A documentação sobre as propriedades dos componentes e exemplos de utilização podem ser vistos no Storybook.
Contribuição
Por favor, verifique o nosso guia de contribuição.
Especificação mínima de ferramentas para contribuição
A única ferramenta estritamente necessária é o Node.js em alguma versão >= 18.x
Desenvolvimento da biblioteca
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 install
Depois 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/[email protected] 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.
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.
Reportar bugs/necessidades
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.
Precisa de ajuda?
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
Créditos
O React Components - GOVBR-DS foi criado pelo SERPRO e Dataprev, com a participação da comunidade.
Licença
Neste projeto utilizamos a licença MIT.