I componenti

La famiglia più numerosa e la più silenziosa: componenti che disegnano e basta. Tag, classi, slot. Sono componenti server, non entrano nel bundle, e sono quelli che si sostituiscono più facilmente — un Card diverso è un componente nuovo nella mappa e un viewMode che lo nomina.

il contenitore generico

il contenitore con larghezza e centratura

la sezione di pagina

la card

un testo con un ruolo (titolo, eyebrow, label)

il Lexical di Payload, con i convertitori per i link interni

immagine con fill, alt e didascalia

un’icona dal catalogo

immagine circolare con fallback

il separatore

la barra di avanzamento

Header, footer, navigazione, il selettore di tema, il loader: le cose che stanno intorno al contenuto. Sono componenti come gli altri — nessun trattamento speciale — ma di solito sono montati da un global invece che da una pagina.

Nessuno di loro legge il DOM: tutti costruiscono da data. È una regola, non una coincidenza — un componente che interroga la pagina resa funziona solo dopo il primo paint, e in un render statico non produce niente.

l’intestazione del sito

il piede

il menu, con la parte client per gli stati aperti

la parte interattiva della navigazione

il selettore di tema

la barra di avanzamento della lettura

link, bottone o comando: un solo componente, il tipo lo dice il dato

Otto componenti hanno stato: accordion, collapsible, tabs, toggle, gruppo di toggle, swiper, hover card, dialog. Ognuno è diviso in due file — la parte server che disegna e il wrapper client che tiene lo stato — e il wrapper registra la propria slice nello store invece di tenere uno stato React privato.

La differenza non è accademica. Uno stato React privato è raggiungibile solo dall’interno del componente; una slice nello store ha un indirizzo, quindi qualcun altro può leggerla o cambiarla — un bottone in fondo alla pagina può aprire l’accordion in cima senza che i due si conoscano.

I nomi delle slice sono dichiarati come dato, non decisi dentro il componente: open è booleano, active dice quale figlio, pressed è booleano, value è il valore di un gruppo, index è una posizione. Il vocabolario è di cinque parole ed è verificato da un test, perché la stessa parola con due significati è il tipo di ambiguità che non dà nessun errore.

slice active: quale sezione è aperta

slice open: aperto o chiuso

slice active: quale scheda

slice pressed

slice value: il valore del gruppo

slice index: la slide corrente

il pannello che appare al passaggio

il dialogo modale

la parte client di un’azione: click, comandi, eventi

Dodici file per una cosa sola: un form in cui i controlli si registrano da soli in un contesto, e il contesto sa raccogliere, validare e inviare. Il componente Form monta il contesto; ogni input dichiara il proprio nome e il resto viene da sé.

Ogni input è un componente normale, quindi ha i suoi viewMode e si può ridisegnare senza toccare la logica: cambiare l’aspetto di una checkbox non ha niente a che vedere con l’invio.

il form e la sua parte client

valori, errori, invio: il contesto a cui i controlli si registrano

il controllo generico: label, input, errore

etichetta e messaggio di errore

testo, email, numero

le scelte

interruttore e cursore

Sette componenti che esistono per la AdminBar: la sezione modificabile, l’albero delle sezioni, gli slot editabili, i campi. Vivono qui e non in admin/ perché sono componenti a tutti gli effetti — hanno viewMode, stanno nella mappa, li risolve lo stesso motore.

Usano però un tema a parte, admin, invece di uims. La ragione è concreta: la AdminBar esiste per cambiare l’aspetto del sito, e se prendesse la propria forma dai viewMode che sta modificando basterebbe un tema sbagliato per non riuscire più a rimetterlo a posto.

la sezione modificabile e l’albero

uno slot editabile

i campi di testo

il campo immagine

i comandi dell’editor