Implementazione React dei design-web-toolkit

[dej611]

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
  • Deployment dei componenti e della webapp Storybook su Github Pages
  • Demo -> https://roma-js.github.io/design-react
• 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
  • App complementare di esempio per l'utilizzo
  • Demo -> https://github.com/Roma-JS/design-react-demo

Nota

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.

---

design-react

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.

Requirements

• 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:

components
    └── 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

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.

Publishing

Storybook

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)

• Show JSX if PropVal is a React element
• Fixed prop type validation errors in info addon

Module

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.

Preprocessors

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>.github.io/design-react - you need to configure Travis for your repo.

[ruphy]

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!

[matteobelfiore]

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?

[ruphy]

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: https://developersitalia.slack.com/messages/C7VPAUVB3/ ), otherwise you can simply open pull requests.
To get an invitation on the slack, check the Slack link under Tools in https://developers.italia.it 😉

[matteobelfiore]

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 ✌️