@govbr-ds/react-components

v2.1.0

Published

2 months ago

Biblioteca de componentes react baseados no GOVBR-DS

Downloads

817

0High
0Medium
0Low

design system govbr-ds react

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 ou src/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 arquivo index.html ou public/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&amp;display=swap"
    />
  </head>
  <!-- restante do documento -->
</html>

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 em src/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ório dist.
build:showcase: Compila e empacota o Showcase para produção e o disponibiliza no diretório showcase/.
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ório storybook/.
lint: Executa o ESLint para checagem estática do código, gerando um relatório no arquivo report-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.