Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inseefr/lunatic-dsfr
Couche graphique pour Lunatic reposant sur le Système de Design de l'État (DSFR)
https://github.com/inseefr/lunatic-dsfr
component dsfr react storybook typescript
Last synced: 18 days ago
JSON representation
Couche graphique pour Lunatic reposant sur le Système de Design de l'État (DSFR)
- Host: GitHub
- URL: https://github.com/inseefr/lunatic-dsfr
- Owner: InseeFr
- License: mit
- Created: 2022-12-20T10:02:19.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T00:29:16.000Z (3 months ago)
- Last Synced: 2024-10-29T10:04:22.411Z (3 months ago)
- Topics: component, dsfr, react, storybook, typescript
- Language: TypeScript
- Homepage: https://inseefr.github.io/Lunatic-DSFR/storybook/
- Size: 63.3 MB
- Stars: 4
- Watchers: 9
- Forks: 6
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Lunatic-DSFR is a library of customised [Lunatic](https://github.com/InseeFr/Lunatic) components built with TypeScript and [React-DSFR](https://react-dsfr.etalab.studio/).
This library is designed to be an opt-in solution to replace the native style of Lunatic with the style of the [French Design system](https://systeme-de-design.gouv.fr/).
> WARNING: This Design System is only meant to be used for official French's public service websites.
> Its main purpose is to make it easy to identify governmental websites for citizens. [See terms](https://www.systeme-de-design.gouv.fr/cgu/).
### Getting Started
**To visualise the Storybook**
The storybook is deployed [here](https://inseefr.github.io/Lunatic-DSFR/storybook/). In order to visualise and test the components you can launch the storybook locally. It is also recommended that any proposed changes to any components or any new components be tested in the storybook before proposing a PR.
To launch the storybook locally, ensure that you have cloned the repository.
```bash
git clone https://github.com/InseeFr/Lunatic-DSFR.git
```
Once you have the repository cloned locally, navigate to the folder containing the repository and ensure that the necessary packages are available.
```bash
cd lunatic-dsfr
yarn install
yarn storybook
```
Now you are ready to launch the storybook, which will be accessible at [localhost:6006](http://localhost:6006/)
**Connect Lunatic-DSFR with Lunatic**
In any application that uses the [Lunatic components library](https://github.com/InseeFr/Lunatic), it is possible to override the native Lunatic components by injecting **Lunatic-DSFR** ones. These process is detailed in Lunatic Documentation [here](https://inseefr.github.io/Lunatic/docs/components/personnalisation).
To use Lunatic-DSFR, first install theses packages into your application :
```bash
yarn add @inseefr/lunatic-dsfr @codegouvfr/react-dsfr tss-react @emotion/react
```
Import the Lunatic-DSFR components in the file where you use `LunaticComponents`:
```js
import { slotComponents } from "@inseefr/lunatic-dsfr";
```
Then inject `slotComponents` into `LunaticComponents`
```js
```
If you use `Suggester` component you will need to add these dependencies for [MUI](https://mui.com/) :
```bash
yarn add @mui/material @emotion/styled
```
Finally surround the `LunaticComponents` by the `MuiDsfrThemeProvider` provided by [`@codegouvfr/react-dsfr`](https://react-dsfr.codegouv.studio/mui)
```js
{/*...*/}
{/*...*/}
```