@dataesr/react-dsfr
Non-official React components of the official french Système de Design de l'État.
Current version is using a degraded version of @gouvfr/[email protected] (new components are not yet available)
Requirements
- node >= 14.18.x
- npm >= 8.15.x
- React >= 18.2.x
Installation
npm i @dataesr/react-dsfr
Generate and watch
Generate and watch dist folder containing bundles:
npm install --legacy-peer-deps
npm start
Library usage
Example page
A playground to test components
An example page is available containing all components. To launch it on your local machine, first launch watcher of the project and then:
cd example
npm install
npm start
Use Icons
We are using remixicon.
import { Icon } from '@dataesr/react-dsfr';
<Icon
name="ri-bubble-chart-line"
size="lg"
color="#f88"
iconPosition="right"
>
<p>I have an icon</p>
</Icon>
:warning: CDN link of css must be added to the
<head>of your website.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
Use Colors
Color variables are available in style/color.css. To make a new component dark theme compatible it's recommended to use variables from scheme.css in @gouvfr/dsfr project
Some components can be colored with variables (see colorFamily props) listed below:
['green-tilleul-verveine', 'green-bourgeon', 'green-emeraude', 'green-menthe', 'green-archipel', 'blue-ecume', 'blue-cumulus', 'purple-glycine', 'pink-macaron', 'pink-tuile', 'yellow-tournesol', 'yellow-moutarde', 'orange-terre-battue', 'brown-cafe-creme', 'brown-caramel', 'brown-opera', 'beige-gris-galet']
Documentation - Storybook
Storybook of the project is under construction.
To run it locally
npm run storybook
Unit tests
Run all tests using react-scripts WHITH watcher option
npm run test:dev
Run all tests using react-scripts WITHOUT watcher option
npm run test:nowatch
Update snapshots
npm test -- --updateSnapshot
In Chrome
npm run test:debug
Access about:inspect
See doc debugging-tests
Release policy and package publishing
The @dataesr/react-dsfr package is published with semantic-release.
Merging code on the master branch will automatically bump the version, create a tag, produce a changelog and trigger the tests.
If new semantic commits are found (see below how to format commit) a new version of npm package is published and github pages is updated.
new patch version
git commit -m "fix: This is my fix"
new minor version
git commit -m "feat: This is my feature"
new major version
git commit -m "[subject]" -m "BREAKING CHANGE: [body]"
See Commit message formats for more details.
Accessibility
Components can be tested in Example's page App.js with @axe-core/react
npm instal --save-dev @axe-core/react
Another solution to test accessibility is CLI module https://pa11y.org/
Check configuration file .pa11y-ci
npm install -g pa11y-ci
pa11y-ci
They use react-dsfr and we like it!
- santepsy.etudiant.gouv.fr
- DashLord
- Baromètre de la Science Ouverte
- Enfants du spectacle
- Mon Psy
- Transitions collectives
- Immersion facile
- Bilans climat simplifiés
- Zero logement vacant
Help from outside
Thanks to the internet world.
TODO
- Limit usage of colors to colorFamilies
- Upgrade to latest version of the DSFR (v1.9)
- Full review ot the Typescript integration
- Tree Shaking (instead of the whole bundle)