silviorelli / design-react-kit

A React toolkit that implements the Italia design system

Read this in other languages: English.

Il branch di default è ora next, dove sono in fase di sviluppo e di fix i componenti che faranno uso di:

• Storybook v5.0.0
• Bootstrap Italia stabile v1.2.2

Preview del branch next qui: https://design-react-kit.netlify.com/

Intro

Design React kit è un set di componenti React che implementa Bootstrap Italia e gli stili presenti su Design UI Kit, come mostrato su InVision.

Per navigare la libreria e visualizzare i componenti, è stato utilizzato Storybook.

La versione pubblica dello Storybook (relativa al branch master) è disponibile qui.

Indice

• Requisiti
• Come iniziare
• Come creare nuovi componenti
  • Storybook
• Publishing
  • Storybook
    • Problemi noti
  • Package
    • Peer dependencies
    • Stili CSS
    • Preprocessori
• Continuous Integration
  • Job build
  • Job deploy-github-pages
  • Job npm-publish

Requisiti

• NodeJS
• Yarn

Come iniziare

Clona il repository ed esegui yarn per installare le dipendenze. Quindi esegui yarn storybook:serve per avviare il server di sviluppo.

Storybook sarà quindi disponibile all'indirizzo http://localhost:9001/

Come creare nuovi componenti

Questa sezione guiderà alla creazione di nuovi componenti nel repository. Tutti i componenti risiedono nella folder components: ogni componente possiede una sua folder con tutto ciò che è necessario per farlo funzionare. Le storie Storybook invece sono sotto stories. Il componente Button ad esempio è presente sotto il path src/components/Button e la sua struttura è la seguente:

src
    └── components
        └── Button
            ├── Button.js
stories
    └── Button
        ├── Button.stories.js

Alcune regole di base per strutturare i componenti:

• I file JS file del componente utilizza la sintassi JSX.
• I file .stories.js dovrebbero contenere solo quanto relativo al componente stesso.

Una volta creato un nuovo componente, con la sua story, avviando Storybook sarà possibile controllare che tutto funzioni come dovrebbe.

Storybook

Storybook è stato arricchito con alcuni addons che lo rendono più parlante.

Publishing

E' disponibile un comando per generare una versione statica del catalogo Storybook così che possa essere deployato senza utilizzo di un webserver.

$ yarn run storybook

Le pagine statiche ottenute dal processo di build saranno generate sotto la folder storybook-static.

Package

Per utilizzare Design React come dipendenza in un'app è possibile installarla da npm:

$ npm install design-react-kit

Quindi importa ed utilizza il componente:

import React from 'react';
import { Alert } from "design-react-kit";

const Example = () => {
  return (
    <Alert>
        Questo è un alert
    </Alert>
  );
};

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

Stili CSS

La libreria è composta da una parte di stili, ereditati dal package bootstrap-italia che possono essere importati avendo installato la stessa con:

$ yarn install bootstrap-italia

A seconda del bundler utilizzato, e delle sue configurazioni, si potranno importare direttamente gli stili CSS generati:

import "bootstrap-italia/dist/css/bootstrap-italia.min.css";

Nota: a partire dalla versione 1

Preprocessori

Avendo a disposizione il preprocessore Sass sarà possibile integrare (e customizzare) i sorgenti della stessa:

@import "bootstrap-italia/src/scss/bootstrap-italia.scss";