Skip to content

Latest commit

 

History

History
191 lines (123 loc) · 5.56 KB

README.md

File metadata and controls

191 lines (123 loc) · 5.56 KB
Raw

@dataesr/react-dsfr

Non-official React components of the official french Système de Design de l'État.

NPM JavaScript Style Guide GitHub contributors

Tests GitHub last commit semantic-release: react

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>

⚠️ 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!

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)