PortfolioEunomia

Description de l'expérience

Eunomia est mon design system personnel, une bibliothèque de composants d'interface que j'ai conçue pour retrouver, d'un projet à l'autre, des briques fiables, cohérentes et accessibles, plutôt que de repartir de zéro ou de dépendre d'une solution propre à un seul framework. Ce portfolio l'utilise d'ailleurs directement, en remplacement de sa précédente librairie maison. L'idée centrale est de construire les composants directement sur les standards du web plutôt que sur les habitudes d'un framework en particulier. Un bouton, un formulaire ou un tableau développés une seule fois dans Eunomia peuvent ainsi être réutilisés tels quels dans un projet React, Vue, Angular ou même dans une simple page HTML, sans réécriture ni couche d'adaptation à entretenir pour chaque écosystème. Cette approche demande davantage de rigueur en amont, mais elle garantit une cohérence durable entre tous mes projets, quel que soit l'outil utilisé pour les construire. L'accessibilité occupe une place centrale dans cette démarche. Elle est pensée dès la conception de chaque composant plutôt qu'ajoutée après coup : navigation complète au clavier, annonces adaptées pour les lecteurs d'écran, contrastes de couleurs vérifiés, respect des standards ARIA. C'est un enjeu qui me tient particulièrement à cœur, car une interface qui ne fonctionne que pour une partie des utilisateurs n'est, à mes yeux, jamais vraiment aboutie. Eunomia s'accompagne d'un site de documentation généré automatiquement à partir des composants eux-mêmes, pour qu'elle reste toujours fidèle à ce qui est réellement livré. C'est un projet vivant, que je fais évoluer au fil des besoins rencontrés sur mes propres projets, avec la volonté d'en faire un socle solide et durable, aussi bien pour moi que pour toute personne amenée à l'utiliser.

Mots clés

• Design System
• Web Components
• Lit
• TypeScript
• Accessibilité
• ARIA
• Architecture logicielle
• Eleventy
• npm

Missions et détails

• Architecture de la librairieDéveloppement

  La librairie repose sur Lit, qui permet de générer de vrais Web Components standards (Custom Elements et Shadow DOM natifs du navigateur) plutôt qu'une couche d'abstraction propre à un seul framework. Ce choix garantit une compatibilité directe avec React, Vue, Angular et Next.js, sans adaptateur dédié à écrire ni à maintenir pour chaque écosystème. L'ensemble est écrit en TypeScript et compte une soixantaine de composants couvrant la plupart des besoins d'une interface (formulaires, navigation, retours utilisateurs, mise en page, et plus encore).

  Un des enjeux principaux de cette architecture est de concilier l'encapsulation du Shadow DOM, qui isole naturellement le style et le comportement de chaque composant, avec la nécessité de rester personnalisable de bout en bout. Cela passe par un usage systématique des propriétés CSS personnalisées et des CSS Parts exposées par chaque composant, plutôt que par des classes globales fragiles. L'accessibilité est traitée à ce même niveau architectural : la gestion du focus, la navigation au clavier et les rôles ARIA ne sont pas ajoutés composant par composant, mais posés une fois dans des comportements partagés dont chaque nouveau composant hérite dès sa création.

  Le dépôt est organisé en monorepo (npm workspaces), réunissant la librairie et son site de documentation dans un même espace de travail versionné ensemble. Chaque composant est couvert par des tests avec Web Test Runner (comportement, accessibilité) et Playwright (bout en bout), et le déploiement de la librairie comme du site de documentation est entièrement automatisé via un pipeline CI/CD GitLab, du contrôle qualité jusqu'à la publication sur npm.

  • Lit
  • TypeScript
  • Web Components
  • Shadow DOM
  • ARIA
  • Monorepo
  • Web Test Runner
  • Playwright
  • GitLab CI/CD
• Documentation & thématisationUI / UX / Développement

  Le site de documentation est généré avec Eleventy, directement à partir du code source des composants, ce qui garantit qu'il reste toujours strictement fidèle à ce qui est réellement livré dans la librairie : aucune page n'est rédigée ou maintenue séparément à la main. Un Custom Elements Manifest analyse automatiquement chaque composant pour en extraire ses propriétés, ses événements, ses slots et ses CSS Parts, et générer les tableaux d'API correspondants sans duplication manuelle ni risque de désynchronisation avec le code.

  Chaque page de documentation associe la description de l'API à des exemples de code interactifs, construits directement avec les composants réels de la librairie, pour que ce qui est montré corresponde toujours exactement à ce qui est utilisable. Cette approche demande davantage d'outillage en amont, mais elle évite qu'une documentation vieillisse silencieusement à mesure que la librairie évolue, un problème fréquent dans ce type de projet.

  Un système de tokens et de thèmes partagé en SCSS permet, en parallèle, de personnaliser l'apparence de bout en bout, jusqu'à générer un thème sur mesure à partir de simples couleurs de marque, comme c'est le cas sur ce portfolio. Ce même système alimente aussi bien la librairie que son site de documentation, garantissant que la démonstration reste toujours représentative du rendu final.

  • Eleventy
  • Custom Elements Manifest
  • Documentation vivante
  • Exemples interactifs
  • Design Tokens
  • SCSS
  • Theming