diff --git a/.github/workflows/nrg.yml b/.github/workflows/nrg.yml new file mode 100644 index 00000000..e8bc371c --- /dev/null +++ b/.github/workflows/nrg.yml @@ -0,0 +1,53 @@ +name: Regenerate READMEs +on: + push: + branches: [main] + paths: + - 'README.src.md' + - '.github/workflows/nrg.yml' + pull_request: + paths: + - 'README.src.md' + - 'README.md' + - 'README.fr.md' + - '.github/workflows/nrg.yml' +permissions: + contents: read +jobs: + regenerate: + if: github.event_name == 'push' + runs-on: ubuntu-latest + permissions: + contents: write + steps: + - uses: actions/checkout@v4 + with: + token: ${{ secrets.GITHUB_TOKEN }} + - uses: nanolaba/nrg-action@9fae0216ed0c828f520e555912776ca624d84fb5 # v1 + with: + file: README.src.md + nrg-version: '1.2' + - name: Commit regenerated READMEs + run: | + paths=("README.md" "README.fr.md") + status="$(git status --porcelain -- "${paths[@]}")" + if [ -n "$status" ]; then + changed=$(printf '%s\n' "$status" | sed 's/^...//' | sed 's/^/ - /') + git config user.name "github-actions[bot]" + git config user.email "41898282+github-actions[bot]@users.noreply.github.com" + git add -A -- "${paths[@]}" + git commit -m "docs: regenerate READMEs from README.src.md" \ + -m $'Files updated:\n'"$changed" + git push + fi + + drift-check: + if: github.event_name == 'pull_request' + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: nanolaba/nrg-action@9fae0216ed0c828f520e555912776ca624d84fb5 # v1 + with: + file: README.src.md + mode: check + nrg-version: '1.2' diff --git a/README.fr.md b/README.fr.md index 64a9be81..f39c00a4 100644 --- a/README.fr.md +++ b/README.fr.md @@ -1,3 +1,6 @@ + + +

diff --git a/README.md b/README.md index 5308c3a0..e90a5acd 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ + + +

diff --git a/README.src.md b/README.src.md new file mode 100644 index 00000000..04dbe115 --- /dev/null +++ b/README.src.md @@ -0,0 +1,225 @@ + + + + +

+ +

+

+ 🇫🇷 French State Design System React toolkit 🇫🇷 + 🇫🇷 React intégration pour le System de design du gouvernement français (alias DSFR) 🇫🇷 +
+
+ + + + + + + + + + + + +

+

+ Components documentation + Documentation des composants + - + Guides + guides + - + Playground + essai immédiat +

+ +👉 Version française du README [ici](https://github.com/codegouvfr/react-dsfr/blob/main/README.fr.md). +> 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). +> WARNING: This Design System is only meant to be used for official French's public service websites. + +> Its main purpose is to make it easy to identify governmental websites for citizens. [See terms](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/perimetre-d-application). +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. + +This module is an advanced toolkit that leverages [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), the vanilla JS/CSS implementation of the DSFR. + + + image + + + image + + +> 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). + +> While this module is written in TypeScript, using TypeScript in your application is optional (but recommended as it comes with outstanding benefits to both you and your codebase). +- [x] API entièrement TypeSafe, bien documentée. + +- [x] Toujours à jour avec les dernières évolutions du DSFR. +- [x] Fully TypeSafe, well documented API. + Code et Types générés à partir de [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr)`/dist/dsfr.css`. +- [x] Always in up to date with latest the DSFR evolutions. +- [x] Exactement le même aspect et ressenti qu'avec [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr). + Code and Types generated from [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr)`/dist/dsfr.css`. +- [x] Pas de [flash blanc lors du rechargement dans la configuration SSR](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480). +- [x] Exactly the same look and feel than with [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr). +- [x] La plupart des composants sont prêts pour les composants serveur. Les autres sont étiquetés avec `"use client";` +- [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/@codegouvfr/react-dsfr/issues/2#issuecomment-1257263480). +- [x] [Intégration parfaite avec tous les principaux frameworks React : Next.js (PagesDir et AppDir), Create React App, Vite](https://react-dsfr.codegouv.studio/). +- [x] Most components are server component ready. The others are labeled with `"use client";` +- [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] [Perfect integration with all major React framework: Next.js (PagesDir and AppDir), Create React App, Vite](https://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] (Almost) All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are [implemented](https://components.react-dsfr.codegouv.studio/) +- [x] Intégration optionnelle avec [MUI](https://mui.com/). Si vous utilisez des composants MUI, ils seront +- [x] Three shakable distribution, cherry pick the components you import. (It's not all in a big .js bundle) + 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] Optional integration with [MUI](https://mui.com/). If you use MUI components they will +- [x] Permet le CSS in JS. [Documentation](https://react-dsfr.codegouv.studio/css-in-js) + 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] 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] Enable the usage of CSS in JS solutions. [Doc](https://react-dsfr.codegouv.studio/css-in-js). +- [x] [Support des bibliothèques de routage](https://react-dsfr.codegouv.studio/routing) comme react-router. +- [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.codegouv.studio/routing) like 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). + +> 💡 Need ready to use, DSFR compliant login and register pages? Checkout [keycloak-theme-dsfr](https://github.com/codegouvfr/keycloak-theme-dsfr). +

+ + 🚀 Commencez ici 🚀 +

+

+ 🚀 Get started 🚀 + +

+# Gouvernance + +# Governance +Ce module est un produit du pôle Logiciel libre et open source d'[Etalab](https://code.gouv.fr/en/mission/). + +This module is a product of [Etalab's Free and open source software pole](https://code.gouv.fr/en/mission/). +Ce projet est co-maintenu par des fonctionnaires de diverses administrations françaises : + +This project is co-maintained by public servants from various French administrations: +- [Joseph Garrone](https://github.com/garronej) - Insee + +- [Julien Bouquillon](https://github.com/revolunet) - DNUM des ministères sociaux +- [Joseph Garrone](https://github.com/garronej) - Insee +- [Dylan DECRULLE](https://github.com/ddecrulle) - Insee +- [Julien Bouquillon](https://github.com/revolunet) - DNUM des ministères sociaux +- [Enguerran Weiss](https://github.com/enguerranws) - Plateforme de l'Inclusion +- [Dylan DECRULLE](https://github.com/ddecrulle) - Insee + +- [Enguerran Weiss](https://github.com/enguerranws) - Plateforme de l'Inclusion +## Développement + +## Development - for contributing to the project +```bash + +git clone https://github.com/codegouvfr/react-dsfr +```bash +cd react-dsfr +git clone https://github.com/codegouvfr/react-dsfr +yarn +cd react-dsfr + +yarn +# Démarrer storybook + +yarn storybook +# Starting storybook + +yarn storybook +# Démarrer les applications de test + +yarn start-cra # Pour tester dans une configuration Create React App +# Starting test apps +yarn start-vite # Pour tester dans une configuration Vite +yarn start-cra # For testing in a Create React App setup +yarn start-next-pagesdir # Pour tester dans une configuration Next.js 13 PagesDir (la configuration par défaut) +yarn start-vite # For testing in a Vite setup +yarn start-next-appdir # Pour tester dans une configuration Next.js 13 AppDir +yarn start-next-pagesdir # For testing in a Next.js 13 PagesDir setup (the default setup) + +yarn start-next-appdir # For testing in a Next.js 13 AppDir setup +# Exécuter tous les tests unitaires (test/runtime): + +yarn test +# Run all unit test (test/runtime): +# Exécuter uniquement test/runtime/cssVariable.test.ts (par exemple) +yarn test +npx vitest -t "Resolution of CSS variables" +# Run only test/runtime/cssVariable.test.ts (for example) +``` +npx vitest -t "Resolution of CSS variables" + +``` +### Vous voulez contribuer ? + +### Want to contribute? +Merci ! Voir [le guide de contribution](https://github.com/codegouvfr/react-dsfr/blob/main/CONTRIBUTING.md). + +Thank you! See [the contribution guide](https://github.com/codegouvfr/react-dsfr/blob/main/CONTRIBUTING.md). +### Comment publier une nouvelle version sur NPM, comment sortir une version bêta + +### How to publish a new version on NPM, how to release a beta version +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. +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. +## Cas d'utilisation + +## Use-cases +Quelques projets qui utilisent `@codegouvfr/react-dsfr`. + +A few projects that use `@codegouvfr/react-dsfr`. +- https://adresse.data.gouv.fr + +- https://cartes.gouv.fr +- https://adresse.data.gouv.fr +- https://code.gouv.fr/sill +- https://cartes.gouv.fr +- https://diagoriente.beta.gouv.fr +- https://code.gouv.fr/sill +- https://egapro.travail.gouv.fr +- https://diagoriente.beta.gouv.fr +- https://github.com/BaseAdresseNationale/bal-admin +- https://egapro.travail.gouv.fr +- https://github.com/DISIC/monfranceconnect +- https://github.com/BaseAdresseNationale/bal-admin +- https://github.com/EIG6-ArtificIA/predictia_front +- https://github.com/DISIC/monfranceconnect +- https://github.com/EIG6-Geocommuns/geocommuns-core +- https://github.com/EIG6-ArtificIA/predictia_front +- https://github.com/EIG6-Geocommuns/lidarviz-front +- https://github.com/EIG6-Geocommuns/geocommuns-core +- https://github.com/inclusion-numerique/mediature +- https://github.com/EIG6-Geocommuns/lidarviz-front +- https://github.com/InseeFr/Lunatic-DSFR +- https://github.com/inclusion-numerique/mediature +- https://github.com/SocialGouv/bpco-site +- https://github.com/InseeFr/Lunatic-DSFR +- https://immersion-facile.beta.gouv.fr +- https://github.com/SocialGouv/bpco-site +- https://maisondelautisme.gouv.fr/ +- https://immersion-facile.beta.gouv.fr +- https://observatoire.numerique.gouv.fr +- https://maisondelautisme.gouv.fr/ +- https://potentiel.beta.gouv.fr +- https://observatoire.numerique.gouv.fr +- https://refugies.info +- https://potentiel.beta.gouv.fr +- https://signal.conso.gouv.fr +- https://refugies.info +- https://territoiresentransitions.fr +- https://signal.conso.gouv.fr +- https://www.mediateur-public.fr +- https://territoiresentransitions.fr +- https://www.mediateur-public.fr +- https://suiteterritoriale.anct.gouv.fr