|
2 | 2 | <img src="https://github.com/codegouvfr/dsfr-react/releases/download/assets/dsfr-react_repo-card.png">
|
3 | 3 | </p>
|
4 | 4 | <p align="center">
|
5 |
| - <i> React implementation of the <a href="https://www.systeme-de-design.gouv.fr/">DSFR</a> </i> |
| 5 | + 🇫🇷 <i><a href="https://www.systeme-de-design.gouv.fr/">French State Design System</a> React component library</i> 🇫🇷 |
6 | 6 | <br>
|
7 | 7 | <br>
|
8 | 8 | <a href="https://github.com/codegouvfr/dsfr-react/actions">
|
|
22 | 22 | <a href="https://etalab-2.gitbook.io/dsfr-react/">👉 Documentation 👈</a>
|
23 | 23 | </p>
|
24 | 24 |
|
| 25 | +This module is a wrapper/compatibility layer for [@gouvfr/dsfr](https://github.com/GouvernementFR/dsfr), the vanilla JS/CSS implementation of the DSFR. |
| 26 | + |
| 27 | +Roadmap: |
| 28 | + |
| 29 | +- [x] Fully TypeSafe, well documented API. |
| 30 | +- [ ] Always in up to date with latest the DSFR evolutions. |
| 31 | + Code and Types generated from [`@gouvfr/dsfr`](https://www.npmjs.com/package/@gouvfr/dsfr)`/dist/dsfr.css`. |
| 32 | +- [x] Exactly the same look and feel than with [@gouvfr/dsfr](https://www.npmjs.com/package/@gouvfr/dsfr). |
| 33 | +- [x] No [white flash when reloading in SSR setup](https://github.com/codegouvfr/dsfr-react/issues/2#issuecomment-1257263480). |
| 34 | +- [x] No [flash of unstyled text](https://fonts.google.com/knowledge/glossary/fout). |
| 35 | +- [x] [Perfect integration with all major React framework: Next.js, Create React App, Vue](https://etalab-2.gitbook.io/dsfr-react/). |
| 36 | +- [ ] All [the components](https://www.systeme-de-design.gouv.fr/elements-d-interface) are implemented (0/42) |
| 37 | +- [ ] Three shakable, cherry pick the components you import. (It's not all in a big .js bundle) |
| 38 | +- [ ] Optional integration with [MUI](https://mui.com/). If you use MUI components they will |
| 39 | + be automatically adapted to look like [DSFR components](https://www.systeme-de-design.gouv.fr/elements-d-interface). |
| 40 | +- [ ] Enable CSS in JS by providing a `useTheme()` hooks that exposes the correct colors options and decision |
| 41 | + for the currently enabled color scheme. |
| 42 | + |
| 43 | +This module is a product of [Etalab's Free and open source software pole](https://communs.numerique.gouv.fr/a-propos/). |
| 44 | +[I](https://github.com/garronej)'m working full time on this project. You can expect rapid development. 🚀 |
| 45 | + |
25 | 46 | # Development
|
26 | 47 |
|
27 |
| -Here are instructions for contributing, if you are looking to **use** `dsfr-react` heads over to the [documentation](https://etalab-2.gitbook.io/dsfr-react/). |
| 48 | +Here are instructions for contributing, if you are looking to **use** `dsfr-react` heads over to the [documentation page](https://etalab-2.gitbook.io/dsfr-react/). |
28 | 49 |
|
29 | 50 | ```bash
|
30 | 51 | yarn
|
|
0 commit comments