design react kit
v5.5.0
Read This in Other Languages: English ??.
Design React Kit is a set of React components that implements Bootstrap Italia and the styles on UI KIT Design. To navigate the library and view the components, storybook was used. The public version of the storybook is available here for the latest stable release published. The Playground React Kit is available to play with the library.
To use React Design as addiction to an app you can install it from NPM. We suggest using create vite to create a new Webapp React, as follows:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --saveMore information to create a new app with react:
design-react-kit does not include CSS and Font Files, and it is therefore necessary to install them separately:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save At this point, simply import explicitly to the CSS and font app if you used create vite inside the ./src/App.js file:
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 ;You can consult this web template with stackblitz: web templates
The Bootstrap Italia theme uses a specific set of Typeface Font: titillium-web , roboto-mono and lora . The loading of these fonts is left to the browser but, if desired it can be controlled through the appropriate FontLoader component. Simply declare the FontLoader component at the top of the react app to allow loading.
Alternatively, it is necessary to manage the loading of fonts manually through the webfontloader package:
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' ]
}
} ) ; The library does not include react and react-dom , avoiding clashing of versions and useless increase in the size of the bundle. For this reason, for local development it will be necessary to manually install addictions.
The command to be performed is
yarn install --peersor alternatively manually
yarn install react react-dom? It is possible to contribute to the library in various ways:
Would you like to help on Design React Kit? You are in the right place!
If you have not already done so, start by spending a few minutes to deepen your knowledge on the design guidelines for the PA web services, and refer to the indications on how to contribute to Design React Kit.
The minimum requirements of your local environment must be:
Clone the repository and perform yarn to install addictions. Then perform
yarn storybook:serveto start the development server.
Storybook will then be available at the http: // Localhost: 9001/
Storybook has been enriched with some addons that make it more talking.
This section will guide the creation of new components in the repository. All components reside in the src folder: each component has a folder with everything that is necessary to make it work. Storybook stories instead are under stories . Unit tests reside in the test folder. For example, the Button component is present under the src/Button route and its structure is as follows:
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
Some basic rules to structure the components:
.stories.tsx files should only contain what is related to the component itself..mdx files should only contain documentation relating to the component itself.test.tsx files should contain only tests relating to the component itself.Once a new component has been created, with his story, starting storybook will be able to check that everything works as it should.
Documentation:
The testing system provides for a control of the stories present, through a technique called "Snapshot" testing: the content of the storybook story will be copied in a special file and preserved to notify any changes in the future. This means that the addition of new stories could be in a failure of the "test" task in a PR. If a new story has been added or an already present one, it will be necessary to update the Snapshot file as follows:
yarn test -uAt this point, create a new commission and update the PR with the updated Snapshot file. Check that the changes made are corrected before updating the PR.
To fill in the library and generate files in the dist folder, simply launch the dedicated command:
yarn build The kit follows the indications shown in the design guidelines for the web services of the Public Administration, section 6.3.1.2.1. Browser support through the use of the browserslist-config-design-italia package.
The library was brought to Typescript and the types are exported with it.
Special thanks to those who made the development of this library possible!
 |  |  |  |
|---|---|---|---|
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
and to the contribution of OpenCity Labs
All contributors ( made with contributioners-IMG )
