Dashboard dei componenti per il design system RT.
Tailwind v3.4.17 (vedi documentazione) e Nunjucks.
Basata sul tool Fractal, per la gestione delle component/pattern libraries.
COME SI PRESENTA L’INTERFACCIA
Fractal presenta come una web UI che offre un’interfaccia web completa per esplorare e documentare i componenti del design system. L’interfaccia include:
Navigazione e Struttura
- Sidebar di navigazione: Organizza i componenti in una struttura gerarchica (01-design-system, 02-atoms, 03-molecules, 04-organisms, 05-templates, 06-pages)
- Ricerca componenti: Permette di trovare rapidamente componenti specifici
- Breadcrumb: Mostra il percorso di navigazione corrente
Visualizzazione Componenti
- Preview live: Ogni componente viene renderizzato in tempo reale
- Varianti multiple: Supporto per diverse varianti dello stesso componente (es. button–lg, button–sm)
- Responsive preview: Possibilità di testare i componenti su diverse dimensioni dello schermo
Documentazione e Codice
- Pannello HTML: Mostra l’HTML generato partendo dal template Nunjucks
- Pannello View: Visualizza il codice sorgente Nunjucks del componente
- Pannello Context: Mostra le configurazioni e i dati di preview definiti nei file YAML del componente
- Pannello Assets: Espone le risorse CSS e JavaScript associate al componente
- Pannello Info: Contiene i dettagli della handle del componente, le opzioni di preview disponibili e il percorso nel file system
- Pannello Notes: Mostra la documentazione del componente caricata dal file README.md presente nella cartella del componente stesso
Funzionalità Avanzate
- Hot reload: Aggiornamento automatico durante lo sviluppo
- BrowserSync: Sincronizzazione multi-dispositivo (se configurato)
- Export statico: Possibilità di generare una versione HTML statica per il deployment
La web UI rende il design system facilmente accessibile a designer, sviluppatori e stakeholder, facilitando la collaborazione e l’adozione dei componenti standardizzati.