Design React Kit is a toolkit based on Bootstrap Italia
to build React web application.
italia.github.io/design-react-kit
Read this in other languages: Italiano 🇮🇹.
Design React kit is a set of React components that implements Bootstrap Italia and Design UI Kit styling. Components are showcased with Storybook. Public version of Storybook is available here for the latest stable release. To play with the library, the Playground React Kit is available.
To use Design React as a dependency in your React project you can install it from npm. We suggest to use create vite to create a new React webapp from scratch as follows:
yarn create vite my-react-app --template react
cd nome-app
yarn add design-react-kit --saveMore information on creating a new app with React:
The design-react-kit module does not include the CSS and font files in the bundle, so this needs to be installed as well:
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --saveThen, you just need to import CSS e font editing ./src/App.js as shown:
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 template
The Bootstrap Italia theme defines a specific set of font typefaces to work: titillium-web, roboto-mono and lora. The loading of this set of fonts can be left to the browser or controlled: in this last case it is necessary to use the FontLoader component exported by the library.
Declaring the FontLoader on top of the Application tree it is enough to trigger the loading of the fonts.
As alternative it is required to manually manage the loading via 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 versions clashing and increasing the size of the bundle.
For this reason, for local development it will be necessary to manually install dependencies.
The command to be executed is
yarn install --peersor alternatively manually
yarn install react react-dom👉🏻 You can contribute to the library in various ways:
- With your own code, taking charge of an issue among those open and not already assigned among the issues of React Kit (even a comment on the issue to notify the desire to take charge).
- By reporting bugs or improvements to the React Kit official repository.
- By writing to us on the dedicated channel of Slack.
The minimum requirements of your local environment should be:
- NodeJS (>= 18)
- Yarn
Clone the repo and run yarn to install the dependencies.
Then run the yarn storybook:serve command to start the development server.
Storybook will therefore be available at http://localhost:9001/
Public version of the Storybook is available here.
Storybook has been enriched with some addons that make it more talented. Check dependencies on the package.json file for details.
This section explains how to create new components in the repository.
All components reside in the src directory: each component is a folder with all that is needed to make it work.
Storybook stories are instead under stories.
Unit tests are under the test folder.
i.e. the Button component is shown below the src/Button path 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 for structuring the components:
- TSX file component files use JSX syntax.
- The
.stories.tsxfiles only contains examples relative to component. - The
.mdxfiles only contains documentation relative to component. - The
.test.tsxfiles only contains tests relative to component.
Once you have created a new component, with its history, starting Storybook will be able to check that everything works as it should.
Documentation:
The testing system has been provided with a snapshot check on existing stories: this means that each story content is copied into a special file used as reference to check changes in the future. This might fail some test checks on the PR in case of new or changed stories.
In such case it is possible to update the snapshot file with the following command:
yarn test -uAt this point create a new commit and update the PR. Make sure to check the new snapshot content whether it is in line with the changes made before pushing.
To build the library and add files into the dist folder:
yarn buildThe design kit follows the Guidelines for Public Services Design, within the Section 6.3.1.2.1. Supporto browser via the package browserslist-config-design-italia.
The library has been rewritten in Typescript and types are exported in the bundle.
A special thank you to those who made the development of this library possible!
 |
 |
 |
 |
|---|---|---|---|
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
and thanks to OpenCity Labs team
All contributors (made with contributors-img)