Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codegouvfr/rescript-react-dsfr
🇫🇷 ReScript bindings for react-dsfr
https://github.com/codegouvfr/rescript-react-dsfr
design-system dsfr react rescript
Last synced: about 1 month ago
JSON representation
🇫🇷 ReScript bindings for react-dsfr
- Host: GitHub
- URL: https://github.com/codegouvfr/rescript-react-dsfr
- Owner: codegouvfr
- License: mit
- Created: 2024-01-09T13:30:13.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-01-31T16:00:03.000Z (11 months ago)
- Last Synced: 2024-05-04T00:16:12.768Z (8 months ago)
- Topics: design-system, dsfr, react, rescript
- Language: ReScript
- Homepage: https://react-dsfr.codegouv.studio/
- Size: 143 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
rescript-react-dsfr
Report Bug
•
react-dsfr
•
Components API
![Static Badge](https://img.shields.io/badge/%40codegouvfr%2Freact--dsfr-v1.2.1-blue)
🇫🇷 ReScript bindings for the
[`react-dsfr`](https://github.com/codegouvfr/react-dsfr) TS library.> [!IMPORTANT]
> This project has only been tested for the needs of the
> [`catala-dsfr`](https://github.com/CatalaLang/catala-dsfr) project.## Installation
```sh
yarn add @codegouvfr/rescript-react-dsfr
```Then add it to `bsconfig.json`:
```diff
"bs-dependencies": [
+ "@codegouvfr/rescript-react-dsfr"
]
```## Usage
> [!TIP]
> You can look a the [demo web
> app](https://github.com/codegouvfr/rescript-react-dsfr/tree/main/demo) or at
> a real-world example in the
> [`catala-dsfr`](https://github.com/CatalaLang/catala-dsfr) repository.### Start a DSFR app
```rescript
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:
```typescript
// In a .tsx fileimport { Badge } from '@codegouvfr/react-dsfr/badge'
let button = (
Nouveau
)
``````rescript
open DSFR// In a .res file
let button = (
{React.string("Nouveau")}
)
```### 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.```rescript
open DSFRlet e =
//...
```## 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:```sh
yarn generate-classNames# or it will be run automatically when installing the package
yarn
```> [!IMPORTANT]
> This script is run with [`bun`](https://bun.sh/) 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](https://components.react-dsfr.codegouv.studio/). 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` | ❌ |