⚠️ 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:

• Documentazione ufficiale
• Vitejs

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