Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codegouvfr/react-dsfr
🇫🇷 Design system React toolkit
https://github.com/codegouvfr/react-dsfr
design-system dsfr react storybook typescript
Last synced: 21 days ago
JSON representation
🇫🇷 Design system React toolkit
- Host: GitHub
- URL: https://github.com/codegouvfr/react-dsfr
- Owner: codegouvfr
- License: mit
- Created: 2022-09-20T08:45:11.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T09:41:04.000Z (5 months ago)
- Last Synced: 2024-05-04T00:16:12.696Z (5 months ago)
- Topics: design-system, dsfr, react, storybook, typescript
- Language: TypeScript
- Homepage: https://react-dsfr.codegouv.studio
- Size: 71.4 MB
- Stars: 397
- Watchers: 7
- Forks: 44
- Open Issues: 19
-
Metadata Files:
- Readme: README.fr.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Publiccode: publiccode.yml
Awesome Lists containing this project
README
🇫🇷 React intégration pour le System de design du gouvernement français (alias DSFR) 🇫🇷
Documentation des composants
-
guides
-
essai immédiat
> 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).
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.
> 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, Vite](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] Permet le CSS in JS. [Documentation](https://react-dsfr.codegouv.studio/css-in-js)
- [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).
# Gouvernance
Ce module est un produit du pôle Logiciel libre et open source d'[Etalab](https://code.gouv.fr/en/mission/).
Ce projet est co-maintenu par des fonctionnaires de diverses administrations françaises :
- [Joseph Garrone](https://github.com/garronej) - Insee
- [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
## Développement
```bash
git clone https://github.com/codegouvfr/react-dsfr
cd react-dsfr
yarn
# Démarrer storybook
yarn storybook
# Démarrer les applications de test
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
# Exécuter tous les tests unitaires (test/runtime):
yarn test
# Exécuter uniquement test/runtime/cssVariable.test.ts (par exemple)
npx vitest -t "Resolution of CSS variables"
```
### 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