+
+
+
+ 🇫🇷 React intégration pour le System de design du gouvernement français (alias DSFR) 🇫🇷
+
+
+
+ 
+
+
+ 
+ Documentation des composants + - + guides + - + essaie immédiat +
+ +> 🗣️ L'enregistrement de l'atelier de présentation de la librairie est disponible [ici](https://bbb-dinum-scalelite.visio.education.fr/playback/presentation/2.3/22298bc9d93b53540248207bc3f9e31260f3b4f1-1670578779094). + +Ce module NPM est une surcouche de compatibilité React pour [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr), l'implémentation de officiel de référence du +DSFR en pur JavaScript/CSS. + +[Preview.webm](https://user-images.githubusercontent.com/6702424/208798079-52c39962-94a3-4ff5-adbc-800d47b50757.webm) + +[Youtube link](https://youtu.be/5q88JgXUAY4) + +> Remarque pour les agents non familiers avec TypeScript: Cette librairie, à l'instar de toute librairie développez-en TypeScript +> **peut** être utilisé dans des projets n'utilisant pas TypeScript! +> La distribution publiée sur NPM est constituée de fichier JavaScript couplé à des fichiers de déclaration de types. Ces derniers +> on pour objet d'aider au développement, mais n'intervienne pas dans le fonctionnement de la libraire. + +- [x] une interface de programmation strictement typée et bien documentée. +- [x] Garantie d'être toujours à jour avec les [dernières évolutions du DSFR](https://www.systeme-de-design.gouv.fr/). + Une grande partie du code et du typage est généré procéduralement à partir de la feuille de style de référence: [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr)`/dist/dsfr.css`. +- [x] exactement le même aspect et ressentie qu'avec [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr), il s'agit d'une couche de compatibilité et non pas d'une implémentation alternative. +- [x] pas de [flash d'écran blanc lors du basculement automatique du thème clair vers le thème sombre](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480). +- [x] la plupart des composants peuvent être rendus directement sur le serveur (voir [RSC](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html)). Les autres sont étiquetées `"use client";`. +- [x] [Intégration clef en main pour les différents frameworks de développement: vite, Next.js, y compris la version beta de Next 13 (configuration AppDir) et Create React App](https://react-dsfr.etalab.studio/) si votre + framework n'est pas supporter, il suffit de demander notre, nous avons pour but de couvrir tous les cas d'usage effectifs. +- [ ] tout [les composants de référence implémenter](https://www.systeme-de-design.gouv.fr/elements-d-interface). À ce jour 14/42, [see details](COMPONENTS.md) +- [x] seulement le code des composants que vous utilisez effectivement sera inclus dans votre projet final. +- [x] Intégration facultative avec [MUI](https://mui.com/). Si vous utilisez des composants MUI ils seront automatiquement adaptés pour ressembler à des composants DSFR. + Voir là [documentation](https://react-dsfr.etalab.studio/mui-integration). +- [x] permet de développer à l'aide d'outil de CSS-in-JS comme [Styled component](https://styled-components.com/), [Emotion](https://emotion.sh/docs/introduction) ou [TSS](https://www.tss-react.dev/). +- [x] prévois un système de traduction pour les textes présents dans les composants (i18n). +- [x] [s'intègre avec les librairies de routing](https://react-dsfr.etalab.studio/routing) like [React Router](https://reactrouter.com/en/main), [TanStack Router](https://tanstack.com/router/v1) ou encore [Type route](https://type-route.zilch.dev/). + +Ce travail est un produit de [CodeGouvFr](https://communs.numerique.gouv.fr/), la mission logiciel libre de [la direction interministérielle du numérique](https://www.numerique.gouv.fr/dinum/) (DINUM). + + + +## À propos [`@dataesr/react-dsfr`](https://github.com/dataesr/react-dsfr)? + +`@codegouvfr/react-dsfr` (ce projet) est un projet TypeScript aillant pour priorité de fournir une bonne intégration +avec l’écosystème React, notamment avec Next.js. + +Ce projet a été démarré en octobre 2022, c'est une initiative récente et, malgré le fait qu'il soit activement développé, au jour d'au jour d'hui, +`@dataesr/react-dsfr` est plus stable et fournit [une couverture de composant plus exhaustive](https://github.com/dataesr/react-dsfr/tree/master/src/components/interface). +Si vous travaillez sur une SPA (Create React App, Vite) `@dataesr/react-dsfr` est probablement l'option la plus viable à ce jour. + +Cela étant dit, vous pouvez bénéficier de plusieurs des fonctionnalités de `@codegouvfr/react-dsfr` sans migrer de `@dataesr/react-dsfr`: + +- Profitez de [l'auto complétion des classes en `fr-*`](https://react-dsfr.etalab.studio/class-names-type-safety). +- Utiliser [le système de couleur strictement typer](https://react-dsfr.etalab.studio/css-in-js#colors). +- Utiliser le thème MUI. +- Utiliser [le système d'espacement](https://react-dsfr.etalab.studio/css-in-js#fr.spacing) et de + [point de rupture](https://react-dsfr.etalab.studio/css-in-js#fr.breakpoints). + +[Voici un bac a sable pour expérimenter](https://stackblitz.com/edit/react-ts-fph9bh?file=App.tsx). + +## Development + +```bash +git clone https://github.com/codegouvfr/react-dsfr +cd react-dsfr +yarn + +# Démarrer Storybook +yarn storybook + +# Démarrer les application de test +yarn start-cra +yarn start-vite +yarn start-next-pagesdir +yarn start-next-appdir + +# Executer tout les tests unitaires (test/runtime): +yarn test +# Executer, par exemple, uniquement le test test/runtime/cssVariable.test.ts +npx vitest -t "Resolution of CSS variables" +``` + +### Vous cherchez comment contribuer? + +Tout d'abord, merci! Voici [le guide de contribution](https://github.com/codegouvfr/react-dsfr/blob/main/CONTRIBUTING.md). + +### Comment publier une nouvelle version sur NPM + +Ce dépôt a été mis en place avec [garronej/ts-ci](https://github.com/garronej/ts-ci). +Vous pouvez vous référer à la documentation de TS-CI pour comprendre le cycle de vie de ce projet. diff --git a/README.md b/README.md index 88831f984..ee531d178 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,8 @@ Playground +👉 Version française du README [ici](https://github.com/codegouvfr/react-dsfr/blob/main/README.fr.md). + > 🗣️ Replay de l'atelier de présentation de la librairie [ici](https://bbb-dinum-scalelite.visio.education.fr/playback/presentation/2.3/22298bc9d93b53540248207bc3f9e31260f3b4f1-1670578779094). This module is a wrapper/compatibility layer for [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), the vanilla JS/CSS implementation of the DSFR. @@ -78,9 +80,7 @@ You can, as standalone feature: [Here is a playground to demonstrate it](https://stackblitz.com/edit/react-ts-fph9bh?file=App.tsx). -# Development - -Here are instructions for contributing, if you are looking to **use** `@codegouvfr/react-dsfr` heads over to the [documentation page](https://react-dsfr.etalab.studio/). +## Development ```bash git clone https://github.com/codegouvfr/react-dsfr @@ -89,7 +89,6 @@ yarn # Starting storybook yarn storybook -# You can run 'npx tsc -w -p src' on another terminal for enabling hot reloading. # Starting test apps yarn start-cra # For testing in in a Create React App setup @@ -105,7 +104,11 @@ npx vitest -t "Resolution of CSS variables" # Debugging while unit testing ``` -## How to publish a new version on NPM, how to release a beta version +### Looking to contribute? + +Thank you! [Here](https://github.com/codegouvfr/react-dsfr/blob/main/CONTRIBUTING.md) is the contribution guide. + +### How to publish a new version on NPM, how to release a beta version This repo was bootstrapped form [garronej/ts-ci](https://github.com/garronej/ts-ci) have a look at the documentation of this starter for understanding the lifecycle of this repo.