Update domain names

Author: garronej

.storybook/manager-head.html

@@ -15,13 +15,13 @@
 <meta property="og:type" content="website">
 <meta property="og:title" content="react-dsfr components">
 <meta property="og:description" content="@codegouvfr/react-dsfr components playground and showcase">
-<meta property="og:image" content="https://react-dsfr-components.etalab.studio/repo-card.png">
+<meta property="og:image" content="https://components.react-dsfr.fr/repo-card.png">
 
 <!-- Twitter Meta Tags -->
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="react-dsfr components">
 <meta name="twitter:description" content="@codegouvfr/react-dsfr components playground and showcase">
-<meta name="twitter:image" content="https://react-dsfr-components.etalab.studio/repo-card.png">
+<meta name="twitter:image" content="https://components.react-dsfr.fr/repo-card.png">
 
 <style>
 	.sidebar-item[data-nodetype="document"] svg {

CONTRIBUTING.md

@@ -3,7 +3,7 @@
 Would you help us implement [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/accordeon)?  
 Thank you so much to anyone that would!
 
-To get you started you can check out [the `<Alert />` component](https://react-dsfr-components.etalab.studio/?path=/docs/components-alert--default).
+To get you started you can check out [the `<Alert />` component](https://components.react-dsfr.fr/?path=/docs/components-alert--default).
 
 -   Here is it's definition from the SIG: [systeme-de-design.gouv.fr/elements-d-interface/composants/alerte](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/alerte) (Pro tip: the real source of truth for DSFR component is [here](https://main--ds-gouv.netlify.app/example/component/))
 -   Here is its implementation [src/Alert.tsx](https://github.com/codegouvfr/react-dsfr/blob/main/src/Alert.tsx)
@@ -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://react-dsfr.etalab.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://react-dsfr-components.etalab.studio/?path=/docs/components-tabs--default).
--   🌎 Avoid hard coding text in JSX, use [the i18n mechanism](https://react-dsfr.etalab.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.etalab.studio/cx).
+-   🔗 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).
+-   🕹️ When it's relevant, try to enable components to be used either in controlled or uncontrolled mode. [Example with <Tabs />](https://components.react-dsfr.fr/?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).
 
 ## PR Reviews
 

README.fr.md

@@ -19,9 +19,9 @@
     </a>
 </p>
 <p align="center">
-  <a href="https://react-dsfr-components.etalab.studio">Documentation des composants</a>
+  <a href="https://components.react-dsfr.fr">Documentation des composants</a>
   -
-  <a href="https://react-dsfr.etalab.studio/">guides</a>
+  <a href="https://guides.react-dsfr.fr/">guides</a>
   -
   <a href="https://stackblitz.com/edit/nextjs-j2wba3?file=pages/index.tsx">essai immédiat</a>
 </p>
@@ -46,31 +46,31 @@ DSFR en pur JavaScript/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://react-dsfr.etalab.studio/) si votre
+-   [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://react-dsfr-components.etalab.studio/).
+-   [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.fr/).
 -   [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://react-dsfr.etalab.studio/mui-integration).
+         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://react-dsfr.etalab.studio/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/).
+-   [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/).
 
 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).
 
 <p align="center">
-  <a href="https://react-dsfr.etalab.studio/">🚀 Commencer maintenant 🚀 </a>
+  <a href="https://guides.react-dsfr.fr/">🚀 Commencer maintenant 🚀 </a>
 </p>
 
 ## Migration depuis [`@dataesr/react-dsfr`](https://github.com/dataesr/react-dsfr)?
 
 Si votre projet utilise [`@dataesr/react-dsfr`](https://github.com/dataesr/react-dsfr) et que vous n'êtes pas enclin a migrer ver `@codegouvfr/react-dsfr` vous pouvez tout de même profiter de plusieurs fonctionalités de ce dernier:
 
--   Profitez de [l'auto complétion des classes en `fr-*`](https://react-dsfr.etalab.studio/class-names-type-safety).
--   Utilisez [le système de couleur strictement typer](https://react-dsfr.etalab.studio/css-in-js#colors).
+-   Profitez de [l'auto complétion des classes en `fr-*`](https://guides.react-dsfr.fr/class-names-type-safety).
+-   Utilisez [le système de couleur strictement typer](https://guides.react-dsfr.fr/css-in-js#colors).
 -   Utilisez le thème MUI.
--   Utilisez [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).
+-   Utilisez [le système d'espacement](https://guides.react-dsfr.fr/css-in-js#fr.spacing) et de
+    [point de rupture](https://guides.react-dsfr.fr/css-in-js#fr.breakpoints).
 
 [Voici un bac à sable pour expérimenter](https://stackblitz.com/edit/react-ts-fph9bh?file=App.tsx).
 

README.md

@@ -19,9 +19,9 @@
     </a>
 </p>
 <p align="center">
-  <a href="https://react-dsfr-components.etalab.studio">Components documentation</a>
+  <a href="https://components.react-dsfr.fr">Components documentation</a>
   -
-  <a href="https://react-dsfr.etalab.studio/">Guides</a>
+  <a href="https://guides.react-dsfr.fr/">Guides</a>
   -
   <a href="https://stackblitz.com/edit/nextjs-j2wba3?file=pages/index.tsx">Playground</a>
 </p>
@@ -45,32 +45,32 @@ This module is an advanced toolkit that leverage [@gouvfr/dsfr](https://github.c
 -   [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://react-dsfr.etalab.studio/).
--   [x] (Almost) All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are [implemented](https://react-dsfr-components.etalab.studio/)
+-   [x] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vue](https://guides.react-dsfr.fr/).
+-   [x] (Almost) All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are [implemented](https://components.react-dsfr.fr/)
 -   [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://react-dsfr.etalab.studio/mui-integration).
+        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).
 -   [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://react-dsfr.etalab.studio/routing) like react-router.
+-   [x] [Support routing libraries](https://guides.react-dsfr.fr/routing) like react-router.
 
 This module is a product of [Etalab's Free and open source software pole](https://communs.numerique.gouv.fr/a-propos/).
 I'm working full time on this project. You can expect rapid development.
 
 <p align="center">
-  <a href="https://react-dsfr.etalab.studio/">🚀 Get started 🚀 </a>
+  <a href="https://guides.react-dsfr.fr/">🚀 Get started 🚀 </a>
 </p>
 
 # Migrating from [`@dataesr/react-dsfr`](https://github.com/dataesr/react-dsfr)?
 
 If your project is using [`@dataesr/react-dsfr`](https://github.com/dataesr/react-dsfr) and you're not willing to migrate to `@codegouvfr/react-dsfr` you can still benefit from some of this project features:
 
--   The [`fr-*` classes autocompletion and type safety](https://react-dsfr.etalab.studio/class-names-type-safety).
--   Use [the type safe color system](https://react-dsfr.etalab.studio/css-in-js#colors).
+-   The [`fr-*` classes autocompletion and type safety](https://guides.react-dsfr.fr/class-names-type-safety).
+-   Use [the type safe color system](https://guides.react-dsfr.fr/css-in-js#colors).
 -   Use the MUI theme.
--   The [the spacing system](https://react-dsfr.etalab.studio/css-in-js#fr.spacing) and
-    [breakpoints util for building responsive UI](https://react-dsfr.etalab.studio/css-in-js#fr.breakpoints).
+-   The [the spacing system](https://guides.react-dsfr.fr/css-in-js#fr.spacing) and
+    [breakpoints util for building responsive UI](https://guides.react-dsfr.fr/css-in-js#fr.breakpoints).
 
 [Here is a playground to demonstrate it](https://stackblitz.com/edit/react-ts-fph9bh?file=App.tsx).
 

publiccode.yml

@@ -5,7 +5,7 @@
 publiccodeYmlVersion: '0.2'
 name: '@codegouvfr/react-dsfr'
 url: 'https://github.com/codegouvfr/react-dsfr'
-landingURL: 'https://react-dsfr-components.etalab.studio/'
+landingURL: 'https://components.react-dsfr.fr/'
 releaseDate: '2022-10-05'
 developmentStatus: beta
 softwareVersion: 0.21.4
@@ -31,7 +31,7 @@ it:
     gdpr: true
 description:
   en:
-    documentation: 'https://react-dsfr.etalab.studio/'
+    documentation: 'https://guides.react-dsfr.fr/'
     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://react-dsfr.etalab.studio/).
+      and AppDir), Create React App, Vue](https://guides.react-dsfr.fr/).
 
       - 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://react-dsfr.etalab.studio/mui-integration).
+      See [documentation](https://guides.react-dsfr.fr/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://react-dsfr.etalab.studio/routing)
+      - [Support routing libraries](https://guides.react-dsfr.fr/routing)
       like react-router.
 
 

src/Accordion.tsx

@@ -46,7 +46,7 @@ export namespace AccordionProps {
     };
 }
 
-/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-accordion>  */
+/** @see <https://components.react-dsfr.fr/?path=/docs/components-accordion>  */
 export const Accordion = memo(
     forwardRef<HTMLDivElement, AccordionProps>((props, ref) => {
         const {

src/AgentConnectButton.tsx

@@ -25,7 +25,7 @@ export namespace AgentConnectButtonProps {
     };
 }
 
-/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-franceconnectbutton> */
+/** @see <https://components.react-dsfr.fr/?path=/docs/components-franceconnectbutton> */
 export const AgentConnectButton = memo(
     forwardRef<HTMLDivElement, AgentConnectButtonProps>((props, ref) => {
         const { className, url: href, style, onClick, ...rest } = props;

src/Alert.tsx

@@ -74,7 +74,7 @@ export namespace AlertProps {
     export type Severity = ExtractSeverity<FrClassName>;
 }
 
-/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-alert> */
+/** @see <https://components.react-dsfr.fr/?path=/docs/components-alert> */
 export const Alert = memo(
     forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
         const {

src/Badge.tsx

@@ -15,7 +15,7 @@ export type BadgeProps = {
     children: NonNullable<ReactNode>;
 };
 
-/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-badge> */
+/** @see <https://components.react-dsfr.fr/?path=/docs/components-badge> */
 export const Badge = memo(
     forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
         const {

src/Breadcrumb.tsx

@@ -20,7 +20,7 @@ export type BreadcrumbProps = {
     style?: CSSProperties;
 };
 
-/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-breadcrumb> */
+/** @see <https://components.react-dsfr.fr/?path=/docs/components-breadcrumb> */
 export const Breadcrumb = memo(
     forwardRef<HTMLDivElement, BreadcrumbProps>((props, ref) => {
         const {