3.10.0 • Published 5 months ago

@dataesr/react-dsfr v3.10.0

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

@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/dsfr@1.7.0 (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/remixicon@2.5.0/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.

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)
reactcomponentsdesign-systemgouvfr
@babel/runtime@gouvfr/dsfrclassnamesprop-typesuuid
@infinitebrahmanuniverse/nolb-_datae@everything-registry/sub-chunk-220@codes-sources-de-la-justice/react-tristanmy-appsdfsdfddnew-react-appdsfsdftestsddgsd
3.9.2

6 months ago

3.10.0

5 months ago

3.5.15

1 year ago

3.6.0

1 year ago

3.9.1

12 months ago

3.9.0

12 months ago

3.8.0

12 months ago

3.8.1

12 months ago

3.7.0

12 months ago

3.5.14

1 year ago

3.5.13

1 year ago

3.5.12

1 year ago

3.5.11

1 year ago

3.5.10

1 year ago

3.5.7

1 year ago

3.5.9

1 year ago

3.5.8

1 year ago

3.5.3

1 year ago

3.5.2

1 year ago

3.5.6

1 year ago

3.5.5

1 year ago

3.5.4

1 year ago

3.5.1

1 year ago

3.5.0

1 year ago

3.4.14

1 year ago

3.4.0

1 year ago

3.4.15

1 year ago

3.4.4

1 year ago

3.4.3

1 year ago

3.4.2

1 year ago

3.4.1

1 year ago

3.4.10

1 year ago

3.4.11

1 year ago

3.4.12

1 year ago

3.4.13

1 year ago

3.4.8

1 year ago

3.4.7

1 year ago

3.4.6

1 year ago

3.4.5

1 year ago

3.4.9

1 year ago

3.2.0

2 years ago

3.1.12

2 years ago

3.1.11

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.3.5

2 years ago

3.3.4

2 years ago

3.3.3

2 years ago

3.3.2

2 years ago

3.1.10

2 years ago

3.1.9

2 years ago

3.1.8

2 years ago

3.1.7

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.8.1

2 years ago

2.8.0

2 years ago

2.9.2

2 years ago

2.9.1

2 years ago

2.3.1

2 years ago

2.7.0

2 years ago

3.1.3

2 years ago

3.1.2

2 years ago

3.1.1

2 years ago

3.1.0

2 years ago

3.1.6

2 years ago

3.1.5

2 years ago

3.1.4

2 years ago

2.8.3

2 years ago

2.8.2

2 years ago

2.8.5

2 years ago

2.8.4

2 years ago

2.8.6

2 years ago

2.6.1

2 years ago

2.6.0

2 years ago

2.6.3

2 years ago

2.6.2

2 years ago

3.0.0

2 years ago

2.5.0

2 years ago

2.9.0

2 years ago

1.2.0

2 years ago

2.0.0

2 years ago

2.3.0

2 years ago

2.2.1

2 years ago

2.2.0

2 years ago

2.2.2

2 years ago

1.3.0

2 years ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.6

2 years ago

2.1.5

2 years ago

2.1.7

2 years ago

2.1.0

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.11

2 years ago

1.1.10

2 years ago

1.0.9

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.9.8

2 years ago

0.9.7

2 years ago

0.9.9

2 years ago

0.9.4

2 years ago

0.9.3

2 years ago

0.9.6

2 years ago

0.9.5

2 years ago

0.8.9

2 years ago

0.8.5

2 years ago

0.8.4

2 years ago

0.8.7

2 years ago

0.8.6

2 years ago

0.9.0

2 years ago

0.9.2

2 years ago

0.9.1

2 years ago

0.7.8

2 years ago

0.8.1

2 years ago

0.8.0

2 years ago

0.8.3

2 years ago

0.8.2

2 years ago

0.7.6

2 years ago

0.7.5

3 years ago

0.7.7

2 years ago

0.6.7

3 years ago

0.6.9

3 years ago

0.6.8

3 years ago

0.7.2

3 years ago

0.7.1

3 years ago

0.7.4

3 years ago

0.7.3

3 years ago

0.7.0

3 years ago

0.6.6

3 years ago

0.6.5

3 years ago

0.6.4

3 years ago

0.6.3

3 years ago

0.6.2

3 years ago

0.5.9

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.5.8

3 years ago

0.5.7

3 years ago

0.5.6

3 years ago

0.5.5

3 years ago

0.5.4

3 years ago

0.5.3

3 years ago

0.5.2

3 years ago

0.5.1

3 years ago

0.5.0

3 years ago

0.4.9

3 years ago

0.4.8

3 years ago

0.4.7

3 years ago

0.4.6

3 years ago

0.4.5

3 years ago

0.4.4

3 years ago

0.4.3

3 years ago

0.3.9

3 years ago

0.3.6

3 years ago

0.3.5

3 years ago

0.3.8

3 years ago

0.3.7

3 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.4

3 years ago

0.4.2

3 years ago

0.3.0

3 years ago

0.2.1

3 years ago

0.3.2

3 years ago

0.2.3

3 years ago

0.3.1

3 years ago

0.2.2

3 years ago

0.3.3

3 years ago

0.2.0

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago