design react kit
v5.5.0
Leia isso em outros idiomas: inglês ??.
O Kit React de design é um conjunto de componentes do React que implementa o Bootstrap Italia e os estilos no design do kit da interface do usuário. Para navegar na biblioteca e ver os componentes, o Storybook foi usado. A versão pública do livro de histórias está disponível aqui para o último lançamento estável publicado. O kit React Playground está disponível para jogar com a biblioteca.
Para usar o REACT Design como dependência de um aplicativo, você pode instalá -lo no NPM. Sugerimos o uso create vite para criar um novo reagir do WebApp, como segue:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --saveMais informações para criar um novo aplicativo com o React:
design-react-kit não inclui arquivos CSS e Fonte, e, portanto, é necessário instalá-los separadamente:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save Neste ponto, basta importar explicitamente para o aplicativo CSS e Fonte, se você usado, create vite dentro do arquivo ./src/App.js :
import React from 'react' ;
import './App.css' ;
import { Alert } from 'design-react-kit' ;
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css' ;
import 'typeface-titillium-web' ;
import 'typeface-roboto-mono' ;
import 'typeface-lora' ;
function App ( ) {
return < Alert > This is an Alert </ Alert > ;
}
export default App ;Você pode consultar este modelo da web com o Stackblitz: modelos da web
O tema Bootstrap Italia usa um conjunto específico de fonte do tipo de letra: titillium-web , roboto-mono e lora . O carregamento dessas fontes é deixado para o navegador, mas, se desejado, pode ser controlado através do componente FontLoader apropriado. Basta declarar o componente FontLoader na parte superior do aplicativo React para permitir o carregamento.
Como alternativa, é necessário gerenciar o carregamento de fontes manualmente através do pacote webfontloader :
const WebFont = require ( 'webfontloader' ) ;
WebFont . load ( {
custom : {
families : [ 'Titillium Web:300,400,600,700:latin-ext' , 'Lora:400,700:latin-ext' , 'Roboto Mono:400,700:latin-ext' ]
}
} ) ; A biblioteca não inclui react e react-dom , evitando conflitos de versões e aumento inútil no tamanho do pacote. Por esse motivo, para o desenvolvimento local, será necessário instalar manualmente os vícios.
O comando a ser realizado é
yarn install --peersou alternativamente manualmente
yarn install react react-dom? É possível contribuir para a biblioteca de várias maneiras:
Você gostaria de ajudar no design do Kit React? Você está no lugar certo!
Se você ainda não o fez, comece gastando alguns minutos para aprofundar seus conhecimentos sobre as diretrizes de design para os Serviços da Web do PA e consulte as indicações sobre como contribuir para o Kit React de design.
Os requisitos mínimos do seu ambiente local devem ser:
Clone o repositório e execute yarn para instalar vícios. Em seguida, execute
yarn storybook:servePara iniciar o servidor de desenvolvimento.
Storybook estará disponível no http: // localhost: 9001/
O Storybook foi enriquecido com alguns addons que o tornam mais conversando.
Esta seção orientará a criação de novos componentes no repositório. Todos os componentes residem na pasta src : cada componente possui uma pasta com tudo o que é necessário para fazê -lo funcionar. Em vez disso, as histórias Storybook estão sob stories . Os testes de unidade residem na pasta test . Por exemplo, o componente Button está presente na rota src/Button e sua estrutura é a seguinte:
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
Algumas regras básicas para estruturar os componentes:
.stories.tsx devem conter apenas o que está relacionado ao próprio componente..mdx devem conter apenas a documentação relacionada ao próprio componente.test.tsx devem conter apenas testes relacionados ao próprio componente.Depois que um novo componente for criado, com sua história, o Starting Storybook poderá verificar se tudo funciona como deveria.
Documentação:
O sistema de teste fornece um controle das histórias presentes, através de uma técnica chamada "Snapshot" Testing: o conteúdo da história do livro de histórias será copiado em um arquivo especial e preservado para notificar quaisquer alterações no futuro. Isso significa que a adição de novas histórias pode estar em uma falha na tarefa de "teste" em um PR. Se uma nova história foi adicionada ou já presente, será necessário atualizar o arquivo de instantâneo da seguinte forma:
yarn test -uNeste ponto, crie uma nova comissão e atualize o PR com o arquivo instantâneo atualizado. Verifique se as alterações feitas são corrigidas antes de atualizar o PR.
Para preencher a biblioteca e gerar arquivos na pasta dist , basta iniciar o comando dedicado:
yarn build O kit segue as indicações mostradas nas Diretrizes de Design para os Serviços da Web da Administração Pública, Seção 6.3.1.2.1. Suporte ao navegador através do uso do pacote browserslist-config-design-italia .
A biblioteca foi trazida ao TypeScript e os tipos são exportados com ele.
Agradecimentos especiais aos que tornaram possível o desenvolvimento desta biblioteca!
 |  |  |  |
|---|---|---|---|
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
e para a contribuição dos laboratórios de OpenCity
Todos os colaboradores ( fabricados com contribuição-IMG )
