diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1d117518f..4c083d807 100644 --- a/CONTRIBUTING.md +++ b/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 ``. [Example in the `
` 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 ``. [Example in the `
` 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 ](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 diff --git a/README.fr.md b/README.fr.md index ccec1e4d7..28b8d4099 100644 --- a/README.fr.md +++ b/README.fr.md @@ -46,20 +46,20 @@ 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://guides.react-dsfr.fr/) 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://react-dsfr.codegouv.studio/) 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). + Voir la [documentation](https://react-dsfr.codegouv.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é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/). +- [x] [s'intègre avec les librairies de routing](https://react-dsfr.codegouv.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/). > 💡 Besoin de pages de connexion au DSFR? Allez voir [keycloak-theme-dsfr](https://github.com/codegouvfr/keycloak-theme-dsfr).

- 🚀 Commencer maintenant 🚀 + 🚀 Commencer maintenant 🚀

# Gouvernance du projet diff --git a/README.md b/README.md index 5bfe04501..61a2097f1 100644 --- a/README.md +++ b/README.md @@ -45,20 +45,20 @@ 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).

- 🚀 Get started 🚀 + 🚀 Get started 🚀

# Governance diff --git a/publiccode.yml b/publiccode.yml index 3dffbfb0e..befdcccd6 100644 --- a/publiccode.yml +++ b/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. diff --git a/stories/ConsentManagement.stories.tsx b/stories/ConsentManagement.stories.tsx index e9a06fc07..7754e7cfb 100644 --- a/stories/ConsentManagement.stories.tsx +++ b/stories/ConsentManagement.stories.tsx @@ -22,7 +22,7 @@ Refer to [this section of the Guides](https://react-dsfr.codegouv.studio/analyti mandated solution for analytics in your project. You can find a complete example setup in [the Demo repo for Next.js App Router](https://github.com/garronej/react-dsfr-next-appdir-demo/blob/main/ui/consentManagement.tsx) -which is live [here](https://next-demo.react-dsfr.fr/). You should be able to easily adapt it to other meta frameworks (Vite, Next Pages Router, CRA). +which is live [here](https://stackblitz.com/edit/nextjs-j2wba3?file=pages/index.tsx). You should be able to easily adapt it to other meta frameworks (Vite, Next Pages Router, CRA). \`\`\`tsx "use client"; diff --git a/stories/intro.stories.mdx b/stories/intro.stories.mdx index bbbb66a92..59069cef7 100644 --- a/stories/intro.stories.mdx +++ b/stories/intro.stories.mdx @@ -23,7 +23,7 @@ import { RotatingLogo } from "./RotatingLogo"; 🇫🇷 The French State Design System React toolkit 🇫🇷
-[Github](https://github.com/codegouvfr/react-dsfr) - [Documentation](https://guides.react-dsfr.fr/) +[Github](https://github.com/codegouvfr/react-dsfr) - [Documentation](https://react-dsfr.codegouv.studio/)