VueDsfr

Apparence

Introduction ​

VueDsfr est un portage du Système de design français en Vue 3 sous forme de bibliothèque de composants.

Le code est ouvert et disponible sur GitHub.

Pourquoi VueDsfr ? ​

Le Bureau des ressources et réalisations (BRR) a choisi sa stack technique pour le front, et elle inclut Vue 3. Le Système de design français (DSFR) est développé en JavaScript natif et en SCSS (SASS).

Le BRR a donc besoin d'un portage en Vue 3 de ce DSFR pour ses futurs projets qui devront le respecter.

VueDsfr en quelques mots ​

Ce projet de bibliothèque de composants :

  • reproduit le plus fidèlement possible les composants du DSFR ;
  • est fait avec Vue 3 ;
  • est utilisable facilement en tant que plugin Vue 3 ou Nuxt 3 ;
  • exporte les types (TypeScript) du plugin, des composants et des composables ;
  • est utilisable facilement dans un projet npm ;
  • met à disposition deux parties dans la documentation :
  • publie une documentation disponible pour tous avec les composants et leurs variants et des exemples ;
  • publie un storybook disponible pour tous avec les composants et leurs variants testables dans celui-ci dans un storybook ;
  • a une couverture de test optimale ;
  • met à disposition les composants individuellement sans avoir à importer toute la bibliothèque (recommandé).

Les choix techniques retenus ​

Cadriciels de travail ​

La bibliothèque est faite avec Vue 3 et Vue-router 4.

La bibliothèque est mise en paquet grâce à Vite en mode bibliothèque.

Le CSS est écrit avec PostCSS et notamment le plugin postcss-preset-env (mais très peu de CSS est propre à la bibliothèque). Bientôt c’est lightingCSS qui sera utilisé, sans aucun changement pour les utilisateurs.

Le JavaScript est "linté" avec ESLint et configuré selon StandardJS.

Configuration spécifique

Ci-dessous les modifications de la configuration de StandardJS :

  • les virgules doivent être ajoutées pour tout ce qui est en multiligne (cf. comma-dangle).
    "comma-dangle": ["error", "always-multiline"]

Environnements ​

Le serveur de développement est historiquement celui de Storybook et le site pour tester les composants est le storybook lui-même (npm run dev).

Cependant il est tout à fait possible d’utiliser le serveur qui génère cette documentation (npm run docs:dev).

Tests ​

Les tests sont faits avec Vitest et Vue Testing Library, et des tests d’accessibilité sont faits avec Cypress grâce aux tests de composants, ainsi qu’avec Storybook pour certains composants (notamment pour tous les tests de la touche tabulation, comme la modale et les onglets).

Ressources ​

Les icônes sont toujours celles de RemixIcon, grâce au DSFR et parfois grâce à Oh, Vue Icons! (qui permet d’ajouter d’autres icônes).

Les acteurs du projet ​

  • Clément Debroize ;
  • Pierre-Louis Egaud ;
  • Stanislas Ormières (Lead dev, architecte, devops, mainteneur principal).

Le projet a pu bénéficier des retours et de contributions de :

Merci à vous !