design-react-kit 5.0.0-5 → 5.0.0-7

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# [5.0.0-7](https://github.com/italia/design-react-kit/compare/v5.0.0-6...v5.0.0-7) (2023-12-12)
+
+
+### Features
+
+* numeric input component ([d4a299c](https://github.com/italia/design-react-kit/commit/d4a299cb43ad138352deab45d552bd33a3be3b19))
+
+
+

package/README.EN.md

@@ -1,20 +1,48 @@
-# Design React Kit
-
-![CircleCI](https://img.shields.io/circleci/build/github/italia/design-react-kit)
-[![Join channel #design-devel](https://img.shields.io/badge/Slack%20channel-%23design--devel-blue.svg)](https://developersitalia.slack.com/messages/C7VPAUVB3/)
-[![Get an invitation for Slack](https://slack.developers.italia.it/badge.svg)](https://slack.developers.italia.it/)
+<h1 align="center">Design React Kit</h1>
+
+<p align="center">
+  <img src=".github/react-logo.png" alt="react-logo" width="120px" height="auto"/>
+  <br>
+  <i>Design React Kit is a toolkit based on Bootstrap Italia 
+    <br> to build React web application.</i>
+  <br>
+</p>
+
+<p align="center">
+  <a href="https://italia.github.io/design-react-kit"><strong>italia.github.io/design-react-kit</strong></a>
+  <br>
+</p>
+
+<p align="center">
+    <a href="https://www.npmjs.com/package/design-react-kit"><img src="https://img.shields.io/npm/v/design-react-kit/unstable.svg" alt="NPM"></a>
+    <a href="https://github.com/italia/design-react-kit/actions"><img src="https://github.com/italia/design-react-kit/actions/workflows/ci.yml/badge.svg" alt="Build"></a>
+    <a href="https://codecov.io/gh/italia/design-react-kit"><img src="https://codecov.io/gh/italia/design-react-kit/branch/main/graph/badge.svg?token=0Ud6YSFi0r" alt="codecov"></a>
+    <a href="https://github.com/italia/design-react-kit/blob/main/LICENSE"><img src="https://img.shields.io/github/license/italia/design-react-kit.svg" alt="License"></a>
+    <a href="https://github.com/italia/design-react-kit/issues"><img src="https://img.shields.io/github/issues/italia/design-react-kit.svg" alt="GitHub issues"></a>
+</p>
+
+<p align="center">
+  <a href="https://developersitalia.slack.com/messages/C04J92F9XM2/">
+    <img src="https://img.shields.io/badge/Slack%20channel-%23design--dev--react-blue.svg" alt="Join the #design-system-react channel" />
+  </a>
+  <a href="https://slack.developers.italia.it/">
+    <img src="https://slack.developers.italia.it/badge.svg" alt="Get invited" />
+  </a>
+</p>
 
 _Read this in other languages: [Italiano](README.md)._
 
-**Important**: this kit has been designed to work with Bootstrap Italia v.1. There's no kit currently available for Bootstrap Italia v.2.
+_⚠️ Warning: this code is still under development and is not ready to be used! We are working on the update to bring the kit to version 5.0.0, comments and contributions from the entire community are more than welcome!_
+
+_⚠️ Warning: This kit was designed to work with Bootstrap Italia version 2.x. The kit for version 1.x of Bootstrap Italia has been deprecated and is located on the [4.x] branch (https://github.com/italia/design-react-kit/tree/4.x)._
 
 ## Intro
 
-**Design React kit** is a set of React components that implements [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) and [Design UI Kit](https://github.com/italia/design-ui-kit) styling, as [shown on InVision](https://invis.io/TWMUZS6VFP5).
+**Design React kit** is a set of React components that implements [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) and [Design UI Kit](https://github.com/italia/design-ui-kit) styling.
 
 Components are showcased with [Storybook](https://storybook.js.org/).
 
-Public version of Storybook is available [here](https://italia.github.io/design-react-kit) for the latest stable release, while [here](https://design-react-kit.vercel.app/) for the current development version built from `master` branch.
+Public version of Storybook is available [here](https://italia.github.io/design-react-kit) for the latest stable release, while [here](https://design-react-kit.vercel.app/) for the current development version built from `main` branch.
 
 ## Table of contents
 
@@ -27,16 +55,12 @@ Public version of Storybook is available [here](https://italia.github.io/design-
 - [Compiling Storybook](#compiling-storybook)
 - [How to create new components](#how-to-create-new-components)
 - [Publishing](#publishing)
-- [Continuous integration](#continuous-integration)
-  - [`build` job](#build-job)
-  - [`deploy-github-pages` job](#deploy-github-pages-job)
-  - [`npm-publish` job](#npm-publish-job)
 
 <!-- END doctoc generated TOC please keep the comment here to allow automatic updating -->
 
 ### Requirements
 
-- NodeJS
+- NodeJS (>= 18)
 - Yarn
 
 ## Usage
@@ -46,7 +70,7 @@ To use Design React as a dependency in your React project you can install it fro
 ```sh
 $ create-react-app nome-app
 $ cd nome-app
-$ yarn add design-react-kit --save
+$ yarn add design-react-kit@unstable --save
 ```
 
 ## Add bootstrap-italia and fonts
@@ -117,8 +141,6 @@ Then run the `yarn storybook:serve` command to start the development server.
 
 Storybook will therefore be available at http://localhost:9001/
 
-![storybook](/assets/storybook-screenshot.jpg?raw=true)
-
 Public version of the Storybook is available [here](https://italia.github.io/design-react-kit).
 
 Storybook has been enriched with some `addons` that make it more talented. Check dependencies on the `package.json` file for details.
@@ -155,7 +177,7 @@ Once you have created a new component, with its history, starting _Storybook_ wi
 
 ### How to contribute
 
-To submit new content (feature or bug fixes) is required to fork the repository, starting from `master` create a new branch for the new feature: once completed the development (with tests when possible), create a PR to the original repository.
+To submit new content (feature or bug fixes) is required to fork the repository, starting from `main` create a new branch for the new feature: once completed the development (with tests when possible), create a PR to the original repository.
 
 #### Snapshot tests
 
@@ -193,11 +215,3 @@ The design kit follows the Guidelines for Public Services Design, within the Sec
 ## TypeScript typing definitions
 
 The library has been rewritten in Typescript and types are exported in the bundle.
-
-## Thanks
-
-<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
-
-Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.
-
-Thanks to [Circle CI](https://www.circleci.com/) for providing the infrastructure for our Continuous Integration needs.

package/README.md

@@ -1,18 +1,48 @@
-![CircleCI](https://img.shields.io/circleci/build/github/italia/design-react-kit)
-[![Partecipa sul canale #design-devel](https://img.shields.io/badge/Slack%20channel-%23design--devel-blue.svg)](https://developersitalia.slack.com/messages/C7VPAUVB3/)
-[![Ricevi un invito a Slack](https://slack.developers.italia.it/badge.svg)](https://slack.developers.italia.it/)
+<h1 align="center">Design React Kit</h1>
+
+<p align="center">
+  <img src=".github/react-logo.png" alt="react-logo" width="120px" height="auto"/>
+  <br>
+  <i>Design React Kit è un toolkit basato su Bootstrap Italia 
+    <br> per la creazione di applicazioni web sviluppate con React.</i>
+  <br>
+</p>
+
+<p align="center">
+  <a href="https://italia.github.io/design-react-kit"><strong>italia.github.io/design-react-kit</strong></a>
+  <br>
+</p>
+
+<p align="center">
+    <a href="https://www.npmjs.com/package/design-react-kit"><img src="https://img.shields.io/npm/v/design-react-kit/unstable.svg" alt="NPM"></a>
+    <a href="https://github.com/italia/design-react-kit/actions"><img src="https://github.com/italia/design-react-kit/actions/workflows/ci.yml/badge.svg" alt="Build"></a>
+    <a href="https://codecov.io/gh/italia/design-react-kit"><img src="https://codecov.io/gh/italia/design-react-kit/branch/main/graph/badge.svg?token=0Ud6YSFi0r" alt="codecov"></a>
+    <a href="https://github.com/italia/design-react-kit/blob/main/LICENSE"><img src="https://img.shields.io/github/license/italia/design-react-kit.svg" alt="License"></a>
+    <a href="https://github.com/italia/design-react-kit/issues"><img src="https://img.shields.io/github/issues/italia/design-react-kit.svg" alt="GitHub issues"></a>
+</p>
+
+<p align="center">
+  <a href="https://developersitalia.slack.com/messages/C04J92F9XM2/">
+    <img src="https://img.shields.io/badge/Slack%20channel-%23design--dev--react-blue.svg" alt="Join the #design-system-react channel" />
+  </a>
+  <a href="https://slack.developers.italia.it/">
+    <img src="https://slack.developers.italia.it/badge.svg" alt="Get invited" />
+  </a>
+</p>
 
 _Read this in other languages: [English](README.EN.md)._
 
-**Importante**: questo kit è stato progettato per funzionare con la versione 1.x di Bootstrap Italia. Non esiste al momento un kit per la versione 2.x di Bootstrap Italia.
+_⚠️ Attenzione: questo codice è ancora in fase di sviluppo e non è pronto per essere utilizzato! Stiamo lavorando all'aggiornamento per portare il kit alla versione 5.0.0, commenti e contributi di tutta la community sono più che benvenuti!_
+
+_⚠️ Attenzione: questo kit è stato progettato per funzionare con la versione 2.x di Bootstrap Italia. Il kit per la versione 1.x di Bootstrap Italia è stato deprecato e si trova sul branch [4.x](https://github.com/italia/design-react-kit/tree/4.x)._
 
 ## Intro
 
-**Design React kit** è un set di componenti React che implementa [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) e gli stili presenti su [Design UI Kit](https://github.com/italia/design-ui-kit), come [mostrato su InVision](https://invis.io/TWMUZS6VFP5).
+**Design React kit** è un set di componenti React che implementa [Bootstrap Italia](https://italia.github.io/bootstrap-italia/) e gli stili presenti su [Design UI Kit](https://github.com/italia/design-ui-kit).
 
 Per navigare la libreria e visualizzare i componenti, è stato utilizzato [Storybook](https://storybook.js.org/).
 
-La versione pubblica dello Storybook è disponibile [qui](https://italia.github.io/design-react-kit) per l'ultima release stabile pubblicata, mentre [qui](https://design-react-kit.vercel.app/) per la versione di sviluppo relativa al branch `master`.
+La versione pubblica dello Storybook è disponibile [qui](https://italia.github.io/design-react-kit) per l'ultima release stabile pubblicata, mentre [qui](https://design-react-kit.vercel.app/) per la versione di sviluppo relativa al branch `main`.
 
 ## Indice
 
@@ -25,16 +55,12 @@ La versione pubblica dello Storybook è disponibile [qui](https://italia.github.
 - [Come iniziare](#come-iniziare)
 - [Come creare nuovi componenti](#come-creare-nuovi-componenti)
 - [Publishing](#publishing)
-- [Continuous Integration](#continuous-integration)
-  - [Job `build`](#job-build)
-  - [Job `deploy-github-pages`](#job-deploy-github-pages)
-  - [Job `npm-publish`](#job-npm-publish)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ### Requisiti
 
-- NodeJS
+- NodeJS (>= 18)
 - Yarn
 
 ## Come usare il kit
@@ -44,7 +70,7 @@ Per utilizzare Design React come dipendenza in un'app è possibile installarla d
 ```sh
 $ create-react-app nome-app
 $ cd nome-app
-$ yarn add design-react-kit --save
+$ yarn add design-react-kit@unstable --save
 ```
 
 ## Aggiungere bootstrap-italia ed i font
@@ -115,8 +141,6 @@ Quindi esegui `yarn storybook:serve` per avviare il server di sviluppo.
 
 Storybook sarà quindi disponibile all'indirizzo http://localhost:9001/
 
-![storybook](/assets/storybook-screenshot.jpg?raw=true)
-
 Storybook è stato arricchito con alcuni `addons` che lo rendono più parlante.
 
 ## Come creare nuovi componenti
@@ -150,7 +174,7 @@ Una volta creato un nuovo componente, con la sua story, avviando Storybook sarà
 
 ### Come contribuire
 
-Per inviare nuovi contenuti o bug fix è necessario fare un fork del repository, quindi partire dal branch `master` per un nuovo branch contenente la funzionalità: una volta completa la funzionalità (con relativi test ove possibile), sarà necessario fare una PR sul repository principale.
+Per inviare nuovi contenuti o bug fix è necessario fare un fork del repository, quindi partire dal branch `main` per un nuovo branch contenente la funzionalità: una volta completa la funzionalità (con relativi test ove possibile), sarà necessario fare una PR sul repository principale.
 
 #### Snapshot tests
 
@@ -188,9 +212,3 @@ Il kit segue le indicazioni riportate nelle Linee Guida di Design per i servizi
 ## TypeScript typings
 
 La libreria è stata portata a Typescript ed i tipi sono esportati con essa.
-
-## Ringraziamenti
-
-<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
-
-Grazie a [Chromatic](https://www.chromatic.com/) per aver fornito la piattaforma di visual testing che ci aiuta a revisionare cambiamenti UI e intercettare regressioni visuali.