@dataesr/react-dsfr

⚠️ beta version 🔨

Non-official React components of the official French Governement Design System.

Current version is using @gouvfr/[email protected]

Requirements

• node >=12.13
• npm >=6.14
• React >=17.01

Installation

$ yarn add @dataesr/react-dsfr

Library usage

Styleguide

Styleguide gives you access to the list of props needed and a working example for each component available in the library. To launch it on your local machine:

$ yarn guide

Visit http://localhost:6060.

The complete styleguide is available online https://dataesr.github.io/react-dsfr/.

Npm package

Generate /dist folder containing bundles

Rollupjs is used to bundle files. cf config in rollup.config.js

$ yarn build

Generate and watch /dist folder containing bundles

$ yarn start

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 (see above) and then:

$ cd example/
$ yarn 
$ yarn start

In case of error during install try using npm instead of yarn.

Publish it on mpn registry

First update the version number in package.json

$ npm i --package-lock-only
$ npm login
$ npm publish --tag latest --access public

Visit http://localhost:3000.

Test your node module before you publish

$ npm link @dataesr/react-dsfr

Help

How to build, test and release a node module in ES6 How to create an npm library from react components

Tests

Run all tests using react-scripts with watcher option

$ yarn test:dev

Accessibility

Components can be tested in Example's page App.js with @axe-core/react

$ npm install --save-dev @axe-core/react

An other solution to test accessibility is CLI module https://pa11y.org/

Check configuration file .pa11y-ci

$ npm install -g pa11y-ci
$ pa11y-ci

In Chrome

$ yarn test:debug

Access about:inspect

See doc debugging-tests

They use react-dsfr

santepsy.etudiant.gouv.fr