🇫🇷 ReScript bindings for the react-dsfr TS library.

[!IMPORTANT] This project has only been tested for the needs of the catala-dsfr project.

Installation

yarn add @codegouvfr/rescript-react-dsfr

Then add it to bsconfig.json:

"bs-dependencies": [
+  "@codegouvfr/rescript-react-dsfr"
]

Usage

[!TIP] You can look a the demo web app or at a real-world example in the catala-dsfr repository.

Start a DSFR app

DSFR.Spa.startReactDsfr({
  defaultColorScheme: #system,
  link: Link.make,
  useLang: () => #fr,
})

Use a component

The API should be straightforward to use as it try to match as closely as possible the original API. At the difference that constants strings are replaced by polymorphic variants and that reserved keywords in ReScript like type or as are suffixed with an _ (e.g. type_ or as_).

For example, for the Badge component:

// In a .tsx file

import { Badge } from '@codegouvfr/react-dsfr/badge'

let button = (
    <Badge type="info" as="span" noIcon={true} severity="new">
       Nouveau 
    </Badge>
)

open DSFR

// In a .res file
let button = (
    <Badge type=#info as_=#span noIcon=true severity=#new>
        {React.string("Nouveau")}
    </Badge>
)

Use the cx function

The DSFR.Fr.cx function is used to generate class names from an array of variants. It allows to type check the class names and provides suggestions from you IDE.

open DSFR

let e = 
    <div className={Fr.cx([#"fr-grid-row", #"fr-grid-row--center"])}>
        //...
    </div>

Scripts

Polymorphic variants for class names ./src/DSFR__ClassNames.res (such as icon's id or color variants) are generated from the @codegouvfr/react-dsfr source code. To update them, run:

yarn generate-classNames

# or it will be run automatically when installing the package
yarn 

[!IMPORTANT] This script is run with bun and it can be installed with yarn so you need to install it manually if you don't have it

Status

[!WARNING] Bindings are created by hand, looking at the storybook. Therefore, a minima all the API described in the storybook should be available but it is possible that some props are missing or that some props are not typed correctly.

Do not hesitate to open an issue or a PR if you find something.

✅ Implemented | ❌ Not implemented | 🚧 In progress

| Component | Status | | --------- | :----: | | Accordion | ✅ | | AgentConnectButton | ✅ | | Alert | ✅ | | Badge | ✅ | | Breadcrumb | ✅ | | Button | ✅ | | ButtonsGroup | ✅ | | Callout | ✅ | | Card | ✅ | | Checkbox | ❌ | | consentManagement | ❌ | | Display | ✅ | | Download | ❌ | | Footer | ✅ | | FranceConnectButton | ✅ | | Header | ✅ | | Highlight | ❌ | | Input | ❌ | | MainNavigation | ❌ | | Modal | ❌ | | MonCompteProButton | ✅ | | Notice | ✅ | | Pagination | ❌ | | PasswordInput | ❌ | | Quote | ❌ | | RadioButtons | ❌ | | SearchBar | ❌ | | Select | ❌ | | SelectNext | ❌ | | SlideMenu | ❌ | | Stepper | ❌ | | Table | ❌ | | Tabs | ❌ | | Tag | ❌ | | Tile | ❌ | | ToggleSwitch | ❌ | | ToggleSwitchGroup | ❌ | | Upload | ❌ |