step-journey: percorsi a step come componente Angular
Libreria Angular open source per progress bar a step, con stati, colori e divisori configurabili e componenti separati per ogni parte del percorso.
- Ruolo
- Progettazione, sviluppo e pubblicazione
- Stato
- Pubblicata su npm
- Tecnologie
- Angular, TypeScript, CSS, npm
- Licenza
- MIT
- Distribuita su npm come pacchetto step-journey
- Stati completed, current e pending gestiti in modo dichiarativo
- Colori configurabili per singolo step o per stato
- Larghezza dei divisori personalizzabile
- Architettura modulare, un componente per ogni parte del percorso
- Codice sorgente pubblico con licenza MIT
Il problema
Le procedure a più passaggi sono ovunque: registrazioni, pratiche, checkout, flussi di approvazione. E ovunque compare la stessa barra di avanzamento, quasi sempre riscritta da zero per ogni progetto — tipicamente come un unico componente monolitico che mescola calcolo dello stato, disegno dei pallini e gestione delle linee di collegamento.
Il risultato è prevedibile: funziona finché il requisito resta identico, e diventa difficile da toccare al primo cambiamento. Aggiungere uno stato, cambiare i colori per un cliente, gestire percorsi di lunghezza variabile significa mettere le mani in un componente che fa troppe cose insieme.
Le scelte di progetto
Un componente per ogni concetto. Il percorso, il singolo step e il divisore sono componenti distinti. Non è pedanteria architetturale: è ciò che permette di modificare l’aspetto di uno step senza rischiare di rompere la logica del percorso, e di ragionare su ogni pezzo isolatamente.
Lo stato è dichiarativo. Chi usa la libreria descrive i passaggi e la loro
condizione — completed, current, pending — e la resa è una conseguenza.
Nessuna manipolazione imperativa del DOM, nessuno stato duplicato tra chiamante
e componente: una sola fonte di verità.
Personalizzazione per stato, non per istanza. I colori si impostano una volta per stato e valgono ovunque, oppure si sovrascrivono sul singolo step quando serve davvero. La configurazione più comune è quella che richiede meno codice; i casi particolari restano possibili senza penalizzare quelli normali.
Un’app di prova dentro il repository. Il progetto include un’applicazione di test che monta la libreria in condizioni reali. Serve tanto allo sviluppo quanto a chi valuta il componente: si vede funzionare prima di installarlo.
L’artefatto
Il pacchetto è pubblicato su npm e installabile in qualunque progetto Angular. I sorgenti sono pubblici con licenza MIT, insieme all’app di test che li esercita.
È il tipo di componente che sembra minore finché non lo si deve mantenere in cinque progetti diversi: a quel punto la differenza tra una libreria versionata e cinque copie divergenti diventa evidente.