Le jour où Totem s est réveillé

Le réveil

Février 2026. J’ouvre le repo Totem pour la première fois depuis des mois. Le dernier commit significatif date de 2024. Webpack, Eleventy, des @import partout, une architecture plate sans hiérarchie claire. Le genre de codebase qui sent la poussière.

Le plan initial : corriger un truc sur un composant. Le plan réel : tout casser.

La liste des morts

En une journée, j’ai supprimé plus de code que je n’en ai écrit :

• Webpack → Vite 8. Le build tool qui fait tout en dix fois moins de config. Le HMR est instantané, l’ESM est natif, la DX change du tout au tout.
• Eleventy → Storybook 10. Le site de documentation statique que personne ne consultait, remplacé par un catalogue interactif où chaque composant est testable en isolation.
• @import → @use / @forward. Chaque fichier SCSS migré vers les modules Sass modernes. Les namespaces forcent à savoir d’où vient chaque variable.
• Architecture plate → Atomic design. Atomes, molécules, organismes. Chaque composant dans son niveau avec sa story Storybook.

Le moment de panique

Au milieu de la migration, plus rien ne compile. Le @use de Sass est strict : les dépendances circulaires qui passaient silencieusement avec @import explosent avec des erreurs cryptiques. Error: This module was already loaded, so it can’t be configured using "with".

Les tokens chargeaient les mixins qui chargeaient les tokens. La solution : un fichier _index.scss par couche qui expose exactement ce qui doit l’être, rien de plus. Le graphe circulaire est devenu un arbre.

Le pattern !default qui change tout

Le vrai moment eurêka, c’est quand j’ai systématisé les !default sur tous les tokens. Avant, surcharger une couleur Totem demandait de copier-coller la map entière et de modifier une ligne. Maintenant, n’importe quel projet consommateur charge ses propres tokens avant ceux de Totem, et les valeurs !default de Totem sont ignorées.

C’est avec ce pattern que le jardin numérique a trouvé son identité visuelle : les pastels Soft Minimal écrasés par la palette Jungle Tropicale de garden-tokens.scss. Trois niveaux de surcharge : les tokens du projet, puis ceux de Totem, puis les CSS custom properties pour le runtime.

Storybook et les 37 stories

Le lendemain, j’ai documenté chaque composant dans Storybook 10. 37 stories, une par composant, avec les variantes, les états hover/focus/disabled, les tailles. La règle : si un composant n’a pas de story, il n’existe pas.

Storybook a révélé du code mort. Des composants qui n’étaient importés nulle part depuis 2023. Supprimés. Des incohérences de nommage. Corrigées. Des props inutilisées. Nettoyées. Documenter chaque composant force à le regarder en face.

Ce que le sommeil a apporté

Deux ans sans toucher au code, ça ressemble à de l’abandon. En réalité, c’est de la maturation. Pendant ces deux ans, j’ai utilisé Totem dans d’autres projets. J’ai ressenti ses limites au quotidien. Je savais quels tokens manquaient, quelles mixins étaient bancales, quels composants ne servaient à rien.

Le reboot n’était pas un coup de tête. C’était l’exécution d’une liste mentale accumulée pendant deux ans de frustrations silencieuses. Parfois, la meilleure chose qu’on puisse faire pour un projet, c’est de le laisser dormir jusqu’à ce qu’on sache vraiment ce qu’on veut en faire.

55 commits, 3 ans et demi de vie, 37 stories Storybook. L’atelier est ouvert.