design-react-kit-lombardia v1.0.0
⚠️ Attenzione: questo kit è stato progettato per funzionare con la versione 2.x di Bootstrap Regione Lombardia.
Intro
Design React kit è un set di componenti React che implementa Bootstrap Regione Lombardia e gli stili onformi alle Linee Guida per il design e l’identità visiva digitale di Regione Lombardia. Per navigare la libreria e visualizzare i componenti, è stato utilizzato Storybook. La versione pubblica dello Storybook è disponibile qui per l'ultima release stabile pubblicata.
Come usare il kit
Per utilizzare Design React come dipendenza in un'app è possibile installarla da npm. Suggeriamo di usare create vite
per creare una nuova webapp React, come segue:
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --save
Maggiori informazioni per crere una nuova app con React:
Aggiungere bootstrap-lombardia ed i font
Il design-react-kit-lombardia
non include il CSS ed i file font, ed è quindi necessario installarli a parte:
yarn add bootstrap-lombardia typeface-lora typeface-roboto-mono typeface-titillium-web --save
Esempio
A questo punto, è sufficiente importare esplicitamente nella app CSS e font se si è usato create vite
all'interno del file ./src/App.js
:
import React from 'react';
import './App.css';
import { Alert } from 'design-react-kit-lombardia';
import 'bootstrap-lombardia/dist/css/bootstrap-lombardia.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;
Caricamento Font
Il tema Bootstrap Italia utilizza un set specifico di font typeface: titillium-web
, roboto-mono
e lora
. Il caricamento di questi font è lasciato al browser ma, volendo può essere controllato tramite l'apposito componente FontLoader
.
È sufficiente dichiarare il componente FontLoader
in cima all'app react per permettere il caricamento.
In alternativa è necessario gestire il caricamento dei font manualmente mediante il pacchetto 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']
}
});
Peer dependencies
La libreria non include react
e react-dom
, evitando clashing di versioni e aumento inutile delle dimensioni del bundle.
Per questo motivo per lo sviluppo in locale sarà necessario installare manualmente le dipendenze.
Il comando da eseguire è
yarn install --peers
oppure in alternativa manualmente
yarn install react react-dom