DMA Design System

Il DMA Design System è un set di componenti UI riutilizzabili progettato per garantire coerenza e scalabilità nelle applicazioni. È stato creato utilizzando Storybook per documentare e testare i componenti visivamente.

Prerequisiti

Prima di iniziare, assicurati di avere installato:

• Node.js versione 16 o superiore
• npm (incluso con Node.js)

Installazione

1. Clona il repository:

   git clone <URL-del-repository>
   cd dma-design-system

2. Installa le dipendenze:

    npm install

3. Avvia Storybook: Questo comando avvierà un server locale su cui è possibile visualizzare e interagire con i componenti.

    npm run storybook

Build automatica

La build del progetto viene gestita automaticamente tramite GitHub Actions.

Come generare una nuova build

1. Apri il file package.json.

2. Incrementa il numero di versione:

   Esempio:

   {
     "version": "1.2.3"
   }

Chromatic

Utilizziamo Chromatic per visualizzare e condividere i componenti del DMA Design System attraverso URL accessibili. Questo ci permette di:

• Condividere facilmente i componenti: Ogni componente può essere visualizzato tramite un link, semplificando la collaborazione tra sviluppatori, designer e stakeholder.
• Snapshot Testing: Chromatic esegue snapshot visivi dei componenti, aiutando a rilevare eventuali cambiamenti indesiderati nel design.
• Versionamento e approvazione: I cambiamenti ai componenti possono essere confrontati, revisionati e approvati direttamente nell'interfaccia di Chromatic.

Vai a Chromatic