Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions README.fr.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

<p align="center">
<a href="https://guides.react-dsfr.fr/">🚀 Commencer maintenant 🚀 </a>
<a href="https://react-dsfr.codegouv.studio/">🚀 Commencer maintenant 🚀 </a>
</p>

# Gouvernance du projet
Expand Down
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

<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
Expand Down
8 changes: 4 additions & 4 deletions publiccode.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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
Expand All @@ -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.


Expand Down
2 changes: 1 addition & 1 deletion stories/ConsentManagement.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion stories/intro.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { RotatingLogo } from "./RotatingLogo";
🇫🇷 <i>The <a href="https://www.systeme-de-design.gouv.fr/">French State Design System</a> React toolkit</i> 🇫🇷
<br/>

[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/)

<iframe width="560" height="315" src="https://www.youtube.com/embed/5q88JgXUAY4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Expand Down