@@ -14,11 +14,14 @@ en [**Vue 3**](https://v3.vuejs.org/) sous forme de **bibliothèque de composant
1414
1515Pour commencer à l’utiliser, [ c’est par ici !] ( /story/docs-2-guide-d-utilisation--page )
1616
17- # Qui sont les acteurs du projet
17+ # Les acteurs du projet
1818
1919- ** Clément Debroize
** [ <
img src = { MailIcon } style = { {height:
' 1.25rem' ,
' position' :
' relative' , top:
' 0.25rem' }
} />
] ( mailto:[email protected] ) [ <
img src = { GithubIcon } style = { {height:
' 1.25rem' ,
' position' :
' relative' , top:
' 0.25rem' }
} />
] ( https://github.com/DaBadBunny ) 2020- ** Pierre-Louis Egaud
** [ <
img src = { MailIcon } style = { {height:
' 1.25rem' ,
' position' :
' relative' , top:
' 0.25rem' }
} />
] ( mailto:[email protected] ) [ <
img src = { GithubIcon } style = { {height:
' 1.25rem' ,
' position' :
' relative' , top:
' 0.25rem' }
} />
] ( https://github.com/plegaud ) 21- - ** Stanislas Ormières
** [ <
img src = { MailIcon } style = { {height:
' 1.25rem' ,
' position' :
' relative' , top:
' 0.25rem' }
} />
] ( mailto:[email protected] ) [ <
img src = { GithubIcon } style = { {height:
' 1.25rem' ,
' position' :
' relative' , top:
' 0.25rem' }
} />
] ( https://github.com/laruiss ) 21+ - ** Stanislas Ormières
** [ <
img src = { MailIcon } style = { {height:
' 1.25rem' ,
' position' :
' relative' , top:
' 0.25rem' }
} />
] ( mailto:[email protected] ) [ <
img src = { GithubIcon } style = { {height:
' 1.25rem' ,
' position' :
' relative' , top:
' 0.25rem' }
} />
] ( https://github.com/laruiss ) * (Lead dev, architecte, devops)
* 22+
23+ Le projet a pu bénéficier des retours et de contributions de
24+ [ Gildéric Deruette] ( https://github.com/gideruette ) et [ Sophie Aitis] ( https://github.com/sophieaitis )
2225
2326# Pourquoi VueDsfr
2427
@@ -27,24 +30,26 @@ Vue 3. Le Système de design français (DSFR) est développé en JavaScript nati
2730
2831Le BRR a donc besoin d'un portage en Vue 3 de ce DSFR pour ses futurs projets qui devront le respecter.
2932
30- # Quels sont les principes et les buts de VueDsfr
33+ # VueDsfr en quelques mots
3134
3235Ce projet de bibliothèque de composants
3336
34- - doit être fait avec Vue 3
35- - doit être utilisable facilement en tant que plugin
36- - doit être utilisable facilement dans un projet npm
37- - doit mettre à disposition deux types de documentation :
38- - une pour aider au développement
39- - une autre pour l'utilisation
40- - doit publier un site complet avec les composants et leurs variants testables dans celui-ci dans un storybook
41- - doit avoir un site déployé avec ce storybook disponible pour tous
42- - doit avoir une couverture de test minimale
43- - doit contenir le moins de CSS global possible et le CSS scopé inclus dans les composants
44- - doit mettre à disposition les composants individuellement sans avoir à importer toute la bibliothèque
37+ - reproduit le plus fidèlement possible les composants du [ DSFR] ( https://www.systeme-de-design.gouv.fr/ )
38+ - est fait avec [ Vue 3] ( https://vuejs.org )
39+ - est utilisable facilement en tant que plugin Vue 3
40+ - exporte les types (TypeScript) du plugin, des composants et des composables
41+ - est utilisable facilement dans un projet [ npm] ( https://www.npmjs.com/package/@laruiss/vue-dsfr )
42+ - met à disposition deux parties dans la documentation :
43+ - une pour [ aider au développement] ( /?path=/story/docs-3-guide-du-développeur--page )
44+ - une autre pour l'[ utilisation] ( /?path=/story/docs-2-guide-d-utilisation--page )
45+ - publie un [ site complet] ( vue-dsfr.netlify.app/ ) avec les composants et leurs variants testables dans celui-ci dans un storybook
46+ - déploie un site avec ce storybook disponible pour tous
47+ - a une couverture de test optimale
48+ - contient le CSS global du DSFR et (rarement) du CSS scopé inclus dans les composants
49+ - met à disposition les composants individuellement sans avoir à importer toute la bibliothèque
4550 (pour les petits projets)
4651
47- # Quels sont les choix techniques retenus
52+ # Les choix techniques retenus
4853
4954La bibliothèque est faite avec [ Vue 3] ( https://v3.vuejs.org/ ) et [ Vue-router 4] ( https://next.router.vuejs.org/ ) .
5055
@@ -57,13 +62,15 @@ Le serveur de développement est celui de [Storybook](https://storybook.js.org/)
5762Storybook, et le site pour tester les composants est le storybook lui-même.
5863
5964Le CSS est écrit avec [ PostCSS] ( https://postcss.org/ ) et notamment
60- le plugin [ postcss-preset-env] ( https://preset-env.cssdb.org/ ) .
65+ le plugin [ postcss-preset-env] ( https://preset-env.cssdb.org/ ) (mais très peu de CSS est propre à la bibliothèque) .
6166
6267Storybook est configuré pour utiliser PostCSS.
6368
64- Les tests sont faits avec [ Jest] ( https://jestjs.io ) et [ Vue Testing Library] ( https://testing-library.com/docs/vue-testing-library/intro/ ) ,
65- et dans un futur proche avec [ Cypress] ( https://www.cypress.io/ ) .
69+ Les tests sont faits avec [ Vitest] ( https://vitest.dev ) et [ Vue Testing Library] ( https://testing-library.com/docs/vue-testing-library/intro/ ) ,
70+ et des tests d’accessibilité sont faits avec [ Cypress] ( https://www.cypress.io/ ) grâce aux
71+ [ tests de composants] ( https://docs.cypress.io/guides/component-testing/introduction ) .
6672
6773Les icônes sont toujours celles de [ RemixIcon] ( https://remixicon.com/ ) , grâce à [ Oh, Vue Icons!] ( https://github.com/Renovamen/oh-vue-icons/ )
74+ (qui permet d’ajouter d’[ autres icônes] ( /?path=/story/fondamentaux-4-1-icônes-personnalisées--page ) )
6875
6976La bibliothèque est compilée avec [ Rollup] ( https://rollupjs.org/ ) .
0 commit comments