A React toolkit that implements the Italia design system
Branch: master
Clone or download
Latest commit 408adad Nov 23, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Update config.yml May 18, 2018
.storybook Fixed Docs Italia link Nov 7, 2018
assets Add docs to Stories May 17, 2018
doc Update docs May 18, 2018
scripts Merge 6df6c68 from design-react-kit May 17, 2018
src ESLint improvements (#68) Nov 23, 2018
static/favicons Aggiunto contenuto nella pagina introduttiva Aug 14, 2018
stories Scrollspy: update examples to use the new react-scrollspy component Oct 16, 2018
.editorconfig editorconfig con fine linea LF per non aver problemi win/linux/osx Oct 7, 2017
.eslintrc ESLint improvements (#68) Nov 23, 2018
.gitignore
.npmignore Ignore image_snapshots in npm package Nov 23, 2018
LICENSE Merge 3dffccd from design-react-kit May 17, 2018
README.md Add badge by Shields.io May 21, 2018
package-lock.json 2.10.0 Nov 23, 2018
package.json 2.10.0 Nov 23, 2018

README.md

CircleCI Partecipa sul canale #design-devel Ricevi un invito a Slack

design-react-kit

Un toolkit React che implementa Bootstrap Italia.

Uno showcase di semplice utilizzo, Storybook, è disponibile per navigare la libreria e visualizzare i componenti in azione.

Requisiti

  • NodeJS
  • npm@5+

Come iniziare

Clona il repository ed esegui npm run storybook per avviare il server di sviluppo. Uno script si occuperà di eseguire il comando npm install necessario ad installare le dipendenze.

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

storybook

La versione pubblica dello Storybook è disponibile qui.

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

Storybook

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

$ npm run storybook:build

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

Problemi noti

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 è

$ npm run install-dependencies

oppure in alternativa manualmente

$ npm 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:

$ npm 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";
import "bootstrap-italia/dist/css/italia-icon-font.css";

Preprocessori

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

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

Continuous Integration

E' disponibile un'istanza di CircleCI configurata per effettuare la build del repository ad ogni aggiornamento del branch master. La build di Storybook è deployata sul branch gh-pages ed è disponibile pubblicamente su italia.github.io/design-react-kit.

Job build

Prenderà in carico l'esecuzione di npm run build, avviando Rollup ed integrando le ultime modifiche effettuate su branch master e tag.

Job deploy-github-pages

Eseguirà i due comandi npm run storybook:build e npm run storybook:deploy necessari per buildare e deploylare la documentazione Storybook presente sulle GitHub Pages.

Job npm-publish

Effettuerà il npm publish necessario ad aggiornare il package npm.