Un socle de composants encore utilisé huit mois plus tard

J'ai livré un socle de composants depuis zéro : primitives de mise en page, thème, palette de couleurs, documentation interactive. Huit mois après, d'autres équipes l'étendent, et d'autres développeurs ont écrit ses tests.

Ce qui m'importe, c'est que d'autres s'en servent sans moi. Voici les choix qui y ont contribué.

Une palette sémantique, pas une liste de couleurs. Un composant ne dit pas « utilise ce vert », il dit « utilise la couleur d'action ». Changer le thème se fait alors à un seul endroit.

Une palette typée. Si les rôles sont typés, on ne peut pas utiliser un rôle qui n'existe pas : l'éditeur le refuse avant même de lancer l'app.

// exemple générique
const palette = {
  text: { primary: "#1a1c1b", muted: "#5a5f5c" },
  action: { default: "#0b7a5b" },
} as const;

type TextTone = keyof typeof palette.text; // "primary" | "muted"

Les contrastes corrigés dès la palette. Un texte gris clair sur fond blanc est joli et illisible. Corriger le contraste une fois, dans la palette, le corrige partout. Pour un texte courant, le seuil à viser est un rapport de 4,5 pour 1.

Une documentation interactive. Un composant qu'on ne peut pas essayer sans lancer l'application ne sera pas réutilisé. La documentation montre chaque composant dans chacun de ses états, et sert aussi de test visuel.

Ce que je vise avec un socle : qu'un développeur d'une autre équipe puisse s'en servir sans me poser de question.

Amine Affif, développeur full-stack à Paris. amineaffif.com