Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implementazione React dei design-web-toolkit #4

merged 95 commits into from Nov 7, 2017


Copy link

@dej611 dej611 commented Oct 8, 2017

Riferimento issue: #1

Di seguito le istruzioni della challenge completata riguardo l'implementazione del design-web-toolkit.

La Pull Request presentata include:

  • Creata architettura e infrastruttura toolkit
  • Implementazione componenti e utils in React
    • Test unitari componenti
    • Test snapshot componenti
    • Tipizzazione input componenti
    • Configurazione ambiente di sviluppo
  • WebApp Storybook per la gestione e documentazione della styleguide
  • Documentazione e guide per developers su come implementare nuovi componenti
  • Continuous Deployment con TravisCI
  • Script di build pronta per la pubblicazione su npm per il modulo


Il foglio di style originario utilizzato e stato copiato staticamente dal repository originario.
Sono stati provati vari fix come l'uso del modulo npm e il repository su Github ma entrambi presentavano dei problemi (il primo ha un problema di sintassi mentre il il file build.css costruito nel repository quando scaricato nei node_modules ha un problema con la palette). La copia statica è stato l'unico approccio che garantiva una qualità adeguata.

Build Status


A React toolkit that implements the Italia design system

An easy-to-use showcase tool called Storybook is available to browse the library and view the components in action.


  • NodeJS & npm installed

Getting started

Just clone the repo and run npm install to install dependencies and npm run storybook to run the server.

The Storybook is then available at http://localhost:8010


A public version of Storybook is available here.

How to create a new component

This section will guide you to the creation of a new component in the repository.
All the components live in the components folder: each component has its own folder with all the content it needs to work, the test files and the storybook story to publish.
As example the Button component lives in the components/Button folder and structure is the following:

    └── Button
        ├── Button.js
        └── Button.story.js

Some basic rules to follow when structuring the component:

  • The components use a static CSS file imported in the main root.
    • The CSS file comes from the design-web-toolkit repository and it has been built from there
  • The JS file for the component uses the JSX syntax.
    • Some components use some jQuery plugins.
  • The .story.js file should only contains content related to that component.

Once created a new component and started Storybook check that the new component has been added properly and it renders as it should.


Storybook has been enriched with few addons to make the debug experience easier: if any validation or runtime errors are met the error will be printed in the page console.
In the component page it is also possible to access directly to the source code of the page, making Storybook a source of documentation.



There's a command to build a static version of the Storybook catalog so that it can be deployed anywere without any need of a webserver.

$ npm run build-storybook

The static pages of the building process are stored in the out folder.

Known issues (open pull requests)


To use the React UIKit as module in the app you can install it directly from npm:

$ npm install <package-name>

Then start to use the components in your app:

import React from 'react';
import {Button, Nav, Alert} from '<package-name>';

// If you want to handle the css with webpack uncomment this line
// import '<package-name>/lib/index.css';


You can find an example of this in this repository.


If you're using preprocessors as SASS or Less you can import the CSS directly into your main file:

@import '<package-name>/lib/index.css;

Continuous Integration

There's a TravisCI instance configured to run on this repository every time the master branch is updated. Currently only the Storybook build is deployed to the gh-pages branch and it is publicly visible at https://<user> - you need to configure Travis for your repo.

Takeno and others added 30 commits Oct 7, 2017
aggiunta dipendenza classnames
editorconfig con fine linea LF per non aver problemi win/linux/osx
Fix case insensitive branch problem
Copy link

@ruphy ruphy commented Nov 7, 2017

This contribution is amazing! Thank you so much for it, merging! 😄 🥇

I also invited you to become part of the italia organization, so that you can display this contribution on your profile. 🎉 I am also granting you admin access to this repository, so that you can keep improving this code as you wish! Great job! 😄
Welcome to the community, and remember: with great power comes great responsibility.

If you wish to display your belonging pubicly, don't forget to change the visibility (you can do so here) after you accept the invitation!

@ruphy ruphy merged commit d576fdf into italia:master Nov 7, 2017
Copy link

@matteobelfiore matteobelfiore commented Nov 7, 2017

Great news, good for the guys at RomaJS. @ruphy does this mean that anyone else (like me) interested in building a react toolkit here should start from their codebase instead of working independently? I had already forked the repo some weeks ago. Suggestions?

Copy link

@ruphy ruphy commented Nov 7, 2017

hi @matteobelfiore, yes!
we decided to use this code as a starting point, but of course it still needs work! I would strongly encourage you get in touch and work with the current maintainers, (you can connect with them on their room on Developer Italia's Slack: ), otherwise you can simply open pull requests.
To get an invitation on the slack, check the Slack link under Tools in 😉

Copy link

@matteobelfiore matteobelfiore commented Nov 7, 2017

I will get in touch with them for sure, I was already planning to do that anyway ;) thanks for the Slack tip I'll join now, and will consider PRs on their code ✌️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants