Merge branch 'main' into feat/range-and-segmented

Author: lsagetlethias

CONTRIBUTING.md

@@ -18,10 +18,10 @@ A few things:
 -   🙏🏻 Don't be afraid to push even if you aren't 100% happy with your code or [if it's still WIP](https://github.com/codegouvfr/react-dsfr/blob/1fdcf15cb085c67d37c31badf6ffa4725795ba0f/stories/Accordion.stories.tsx#L6).
 -   📣 Let everyone know what component you are working on by [oppening an issue](https://github.com/codegouvfr/react-dsfr/issues).
 -   📚 You can draw inspiration from [`dataesr/react-dsfr`](https://github.com/dataesr/react-dsfr/tree/master/src/components/interface) and the implementation of [france connect](https://github.com/france-connect/sources/tree/main/front/libs/dsfr).
--   🔗 Use the component returned by `getLink()` instead of `<a />`. [Example in the `<Header />` component](https://github.com/codegouvfr/react-dsfr/blob/bbaf4a81d78de08d6fdcb059a9f4cb8a78ce4d5a/src/Header.tsx#L84-L87). We want to [play nice with all routing libraries](https://guides.react-dsfr.fr/integration-with-routing-libraries).
+-   🔗 Use the component returned by `getLink()` instead of `<a />`. [Example in the `<Header />` component](https://github.com/codegouvfr/react-dsfr/blob/bbaf4a81d78de08d6fdcb059a9f4cb8a78ce4d5a/src/Header.tsx#L84-L87). We want to [play nice with all routing libraries](https://react-dsfr.codegouv.studio/integration-with-routing-libraries).
 -   🕹️ When it's relevant, try to enable components to be used either in controlled or uncontrolled mode. [Example with <Tabs />](https://components.react-dsfr.codegouv.studio/?path=/docs/components-tabs--default).
--   🌎 Avoid hard coding text in JSX, use [the i18n mechanism](https://guides.react-dsfr.fr/i18n) instead. [Here is an example](https://github.com/codegouvfr/react-dsfr/blob/bbaf4a81d78de08d6fdcb059a9f4cb8a78ce4d5a/src/DarkModeSwitch.tsx#L162-L199). (Don't worry about providing translations other than French.)
--   🍳 If you have to arbitrate between ease of use and customisability I'd encourage you to favor ease of use. People that would need a greater level of customizability can always fall back to making their own wrapper from the reference documentation using [`fr.cx()`](https://guides.react-dsfr.fr/cx).
+-   🌎 Avoid hard coding text in JSX, use [the i18n mechanism](https://react-dsfr.codegouv.studio/i18n) instead. [Here is an example](https://github.com/codegouvfr/react-dsfr/blob/bbaf4a81d78de08d6fdcb059a9f4cb8a78ce4d5a/src/DarkModeSwitch.tsx#L162-L199). (Don't worry about providing translations other than French.)
+-   🍳 If you have to arbitrate between ease of use and customisability I'd encourage you to favor ease of use. People that would need a greater level of customizability can always fall back to making their own wrapper from the reference documentation using [`fr.cx()`](https://react-dsfr.codegouv.studio/cx).
 
 ## PR Reviews
 

README.fr.md

@@ -26,80 +26,106 @@
   <a href="https://stackblitz.com/edit/nextjs-j2wba3?file=pages/index.tsx">essai immédiat</a>
 </p>
 
-> ATTENTION: Ce design système a uniquement vocation à être utilisé pour des sites officiels de l'état.  
-> Son but est de rendre la parole de l'état clairement identifiable. [Consulter le CGU](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/perimetre-d-application)
+> AVERTISSEMENT : Ce système de conception est uniquement destiné à être utilisé pour les sites web officiels des services publics français.  
+> Son objectif principal est de faciliter l'identification des sites gouvernementaux par les citoyens. [Voir les conditions](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/perimetre-d-application).
 
-> 🗣️ 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 officielle de référence du
-DSFR en pur JavaScript/CSS.
+Ce module est une boîte à outils avancée qui tire parti de [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), l'implémentation en JS/CSS vanilla du DSFR.
 
 <a href="https://youtu.be/5q88JgXUAY4">
   <img width="1712" alt="image" src="https://user-images.githubusercontent.com/6702424/224423044-c1823249-eab6-4844-af43-d059c01416af.png">
 </a>
 
-> Bien que cette bibliothèque soit écrite en TypeScript, l'utilisation de TypeScript dans votre application est facultative (mais recommandée car elle présente des avantages exceptionnels pour vous et votre base de code).
-
--   [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 ressenti 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és `"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://guides.react-dsfr.fr/) si votre
-        framework n'est pas supporté, il suffit de demander notre **il manque un mot là** , nous avons pour but de couvrir tous les cas d'usage effectifs.
--   [x] (Presque) tout [les composants de référence](https://www.systeme-de-design.gouv.fr/elements-d-interface) sont [implémenté](https://components.react-dsfr.codegouv.studio/).
--   [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 la [documentation](https://guides.react-dsfr.fr/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évoit un système de traduction pour les textes présents dans les composants (i18n).
--   [x] [s'intègre avec les librairies de routing](https://guides.react-dsfr.fr/routing) comme [React Router](https://reactrouter.com/en/main), [TanStack Router](https://tanstack.com/router/v1) ou encore [Type route](https://type-route.zilch.dev/).
-
-> 💡 Besoin de pages de connexion au DSFR? Allez voir [keycloak-theme-dsfr](https://github.com/codegouvfr/keycloak-theme-dsfr).
+> Bien que ce module soit écrit en TypeScript, l'utilisation de TypeScript dans votre application est optionnelle (mais recommandée car elle apporte des avantages exceptionnels à la fois pour vous et votre base de code).
+
+-   [x] API entièrement TypeSafe, bien documentée.
+-   [x] Toujours à jour avec les dernières évolutions du DSFR.
+        Code et Types générés à partir de [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr)`/dist/dsfr.css`.
+-   [x] Exactement le même aspect et ressenti qu'avec [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr).
+-   [x] Pas de [flash blanc lors du rechargement dans la configuration SSR](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).
+-   [x] La plupart des composants sont prêts pour les composants serveur. Les autres sont étiquetés avec `"use client";`
+-   [x] [Intégration parfaite avec tous les principaux frameworks React : Next.js (PagesDir et AppDir), Create React App, Vue](https://react-dsfr.codegouv.studio/).
+-   [x] (Presque) Tous [les composants](https://www.systeme-de-design.gouv.fr/elements-d-interface) sont [implémentés](https://components.react-dsfr.codegouv.studio/)
+-   [x] Trois distributions modulables, choisissez les composants que vous importez. (Ce n'est pas tout dans un gros bundle .js)
+-   [x] Intégration optionnelle avec [MUI](https://mui.com/). Si vous utilisez des composants MUI, ils seront
+        automatiquement adaptés pour ressembler aux [composants DSFR](https://www.systeme-de-design.gouv.fr/elements-d-interface). Voir [documentation](https://react-dsfr.codegouv.studio/mui-integration).
+-   [x] Activez CSS in JS en fournissant un hook `useColors()` qui expose les bonnes options de couleurs et décisions
+        pour le schéma de couleurs actuellement activé.
+-   [x] i18n en option, les textes intégrés peuvent être affichés en plusieurs langues et l'utilisateur peut fournir des traductions supplémentaires.
+-   [x] [Support des bibliothèques de routage](https://react-dsfr.codegouv.studio/routing) comme react-router.
+
+> 💡 Besoin de pages de connexion et d'inscription prêtes à l'emploi et conformes au DSFR ? Consultez [keycloak-theme-dsfr](https://github.com/codegouvfr/keycloak-theme-dsfr).
 
 <p align="center">
-  <a href="https://guides.react-dsfr.fr/">🚀 Commencer maintenant 🚀 </a>
+  <a href="https://react-dsfr.codegouv.studio/">🚀 Commencez ici 🚀 </a>
 </p>
 
-# Gouvernance du projet
+# Gouvernance
+
+Ce module est un produit du pôle Logiciel libre et open source d'[Etalab](https://code.gouv.fr/en/mission/).
 
-Ce travail est un produit de [CodeGouvFr](https://code.gouv.fr/fr/mission/), la mission logiciel libre de [la direction interministérielle du numérique](https://www.numerique.gouv.fr/dinum/) (DINUM).
+Ce projet est co-maintenu par des fonctionnaires de diverses administrations françaises :
 
-Ce projet est co-maintenu par des agents de différentes administrations françaises.
+-   [Julien Bouquillon](https://github.com/revolunet) - DNUM des ministères sociaux
+-   [Dylan DECRULLE](https://github.com/ddecrulle) - Insee
+-   [Enguerran Weiss](https://github.com/enguerranws) - Plateforme de l'Inclusion
 
--   [Joseph Garrone](@garronej)
--   [Julien Bouquillon](@revolunet) - DNUM des ministeres sociaux
--   [Dylan DECRULLE](@ddecrulle) - Insee
--   [Enguerran Weiss](@enguerranws) - Plateforme de l'Inclusion
+Il est également co-maintenu par [Joseph Garrone](https://github.com/garronej), l'auteur original.
 
-## Development
+## Développement
 
 ```bash
 git clone https://github.com/codegouvfr/react-dsfr
 cd react-dsfr
 yarn
 
-# Démarrer Storybook
+# Démarrer storybook
 yarn storybook
 
 # Démarrer les applications de test
-yarn start-cra
-yarn start-vite
-yarn start-next-pagesdir
-yarn start-next-appdir
+yarn start-cra  # Pour tester dans une configuration Create React App
+yarn start-vite # Pour tester dans une configuration Vite
+yarn start-next-pagesdir # Pour tester dans une configuration Next.js 13 PagesDir (la configuration par défaut)
+yarn start-next-appdir # Pour tester dans une configuration Next.js 13 AppDir
 
-# Executer tout les tests unitaires (test/runtime):
+# Exécuter tous les tests unitaires (test/runtime):
 yarn test
-# Executer, par exemple, uniquement le test test/runtime/cssVariable.test.ts
+# Exécuter uniquement test/runtime/cssVariable.test.ts (par exemple)
 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.
+### Vous voulez contribuer ?
+
+Merci ! Voir [le guide de contribution](https://github.com/codegouvfr/react-dsfr/blob/main/CONTRIBUTING.md).
+
+### Comment publier une nouvelle version sur NPM, comment sortir une version bêta
+
+Ce dépôt a été initialisé à partir de [garronej/ts-ci](https://github.com/garronej/ts-ci), consultez la
+documentation de ce starter pour comprendre le cycle de vie de ce dépôt.
+
+## Cas d'utilisation
+
+Quelques projets qui utilisent `@codegouvfr/react-dsfr`.
+
+-   [https://code.gouv.fr/sill](https://sill-preprod.lab.sspcloud.fr/)
+-   https://cartes.gouv.fr
+-   https://immersion-facile.beta.gouv.fr/
+-   https://egapro.travail.gouv.fr/
+-   https://maisondelautisme.gouv.fr/
+-   https://refugies.info/fr
+-   https://www.mediateur-public.fr/
+-   https://signal.conso.gouv.fr/
+-   https://observatoire.numerique.gouv.fr/
+-   https://github.com/BaseAdresseNationale/adresse.data.gouv.fr
+-   https://github.com/DISIC/observatoire.numerique.gouv.fr
+-   https://github.com/DISIC/monfranceconnect
+-   https://github.com/InseeFr/Lunatic-DSFR
+-   https://github.com/EIG6-Geocommuns/lidarviz-front
+-   https://github.com/EIG6-Geocommuns/geocommuns-core
+-   https://github.com/SocialGouv/bpco-site
+-   https://github.com/EIG6-ArtificIA/predictia_front
+-   https://github.com/BaseAdresseNationale/bal-admin
+-   https://github.com/etalab/sill-web
+-   https://github.com/inclusion-numerique/mediature
+-   https://territoiresentransitions.fr (peut-être)
+-   https://potentiel.beta.gouv.fr
+-   https://diagoriente.beta.gouv.fr

README.md

@@ -45,32 +45,33 @@ This module is an advanced toolkit that leverages [@gouvfr/dsfr](https://github.
 -   [x] Exactly the same look and feel than with [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr).
 -   [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480).
 -   [x] Most components are server component ready. The others are labeled with `"use client";`
--   [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vue](https://guides.react-dsfr.fr/).
+-   [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vue](https://react-dsfr.codegouv.studio/).
 -   [x] (Almost) All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are [implemented](https://components.react-dsfr.codegouv.studio/)
 -   [x] Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle)
 -   [x] Optional integration with [MUI](https://mui.com/). If you use MUI components they will
-        be automatically adapted to look like [DSFR components](https://www.systeme-de-design.gouv.fr/elements-d-interface). See [documentation](https://guides.react-dsfr.fr/mui-integration).
+        be automatically adapted to look like [DSFR components](https://www.systeme-de-design.gouv.fr/elements-d-interface). See [documentation](https://react-dsfr.codegouv.studio/mui-integration).
 -   [x] Enable CSS in JS by providing a `useColors()` hooks that exposes the correct colors options and decision
         for the currently enabled color scheme.
 -   [x] Opt-in i18n, built in text can be displayed in multiple languages and user can provide extra translations.
--   [x] [Support routing libraries](https://guides.react-dsfr.fr/routing) like react-router.
+-   [x] [Support routing libraries](https://react-dsfr.codegouv.studio/routing) like react-router.
 
 > 💡 Need ready to use, DSFR compliant login and register pages? Checkout [keycloak-theme-dsfr](https://github.com/codegouvfr/keycloak-theme-dsfr).
 
 <p align="center">
-  <a href="https://guides.react-dsfr.fr/">🚀 Get started 🚀 </a>
+  <a href="https://react-dsfr.codegouv.studio/">🚀 Get started 🚀 </a>
 </p>
 
 # Governance
 
 This module is a product of [Etalab's Free and open source software pole](https://code.gouv.fr/en/mission/).
 
-This project is co-maintained by public servants from various French administrations.
+This project is co-maintained by public servants from various French administrations:
 
--   [Joseph Garrone](@garronej)
--   [Julien Bouquillon](@revolunet) - DNUM des ministères sociaux
--   [Dylan DECRULLE](@ddecrulle) - Insee
--   [Enguerran Weiss](@enguerranws) - Plateforme de l'Inclusion
+-   [Julien Bouquillon](https://github.com/revolunet) - DNUM des ministères sociaux
+-   [Dylan DECRULLE](https://github.com/ddecrulle) - Insee
+-   [Enguerran Weiss](https://github.com/enguerranws) - Plateforme de l'Inclusion
+
+It is also co-maintained [Joseph Garrone](https://github.com/garronej), the original author.
 
 ## Development
 
@@ -92,8 +93,6 @@ yarn start-next-appdir # For testing in a Next.js 13 AppDir setup
 yarn test
 # Run only test/runtime/cssVariable.test.ts (for example)
 npx vitest -t "Resolution of CSS variables"
-
-# Debugging while unit testing
 ```
 
 ### Want to contribute?
@@ -109,7 +108,7 @@ documentation of this starter for understanding the lifecycle of this repo.
 
 A few projects that use `@codegouvfr/react-dsfr`.
 
--   https://code.gouv.fr/sill
+-   [https://code.gouv.fr/sill](https://sill-preprod.lab.sspcloud.fr/)
 -   https://cartes.gouv.fr
 -   https://immersion-facile.beta.gouv.fr/
 -   https://egapro.travail.gouv.fr/
@@ -131,6 +130,4 @@ A few projects that use `@codegouvfr/react-dsfr`.
 -   https://github.com/inclusion-numerique/mediature
 -   https://territoiresentransitions.fr (maybe)
 -   https://potentiel.beta.gouv.fr
-
-Keep in mind that the project has been released recently so it's only natural
-that there is only a few projects in production using it.
+-   https://diagoriente.beta.gouv.fr

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@codegouvfr/react-dsfr",
-    "version": "1.1.1",
+    "version": "1.2.2",
     "description": "French State Design System React integration library",
     "repository": {
         "type": "git",

publiccode.yml

@@ -31,7 +31,7 @@ it:
     gdpr: true
 description:
   en:
-    documentation: 'https://guides.react-dsfr.fr/'
+    documentation: 'https://react-dsfr.codegouv.studio/'
     shortDescription: French State Design System React integration
     longDescription: |
       This module is a wrapper/compatibility layer for
@@ -56,7 +56,7 @@ description:
       `"use client";`
 
       - [Perfect integration with all major React framework: Next.js (PagesDir
-      and AppDir), Create React App, Vue](https://guides.react-dsfr.fr/).
+      and AppDir), Create React App, Vue](https://react-dsfr.codegouv.studio/).
 
       - All [the
       components](https://www.systeme-de-design.gouv.fr/elements-d-interface)
@@ -69,7 +69,7 @@ description:
       - Optional integration with [MUI](https://mui.com/). If you use MUI
       components they will be automatically adapted to look like [DSFR
       components](https://www.systeme-de-design.gouv.fr/elements-d-interface).
-      See [documentation](https://guides.react-dsfr.fr/mui-integration).
+      See [documentation](https://react-dsfr.codegouv.studio/mui-integration).
 
       - Enable CSS in JS by providing a `useTheme()` hooks that exposes the
       correct colors options and decision for the currently enabled color
@@ -78,7 +78,7 @@ description:
       - Opt-in i18n, built in text can be displayed in multiple languages and
       user can provide extra translations.
 
-      - [Support routing libraries](https://guides.react-dsfr.fr/routing)
+      - [Support routing libraries](https://react-dsfr.codegouv.studio/routing)
       like react-router.