inseefr/lunatic-dsfr

Couche graphique pour Lunatic reposant sur le Système de Design de l'État (DSFR)

Lunatic-DSFR is a library of customised Lunatic components built with TypeScript and React-DSFR.

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.

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.

Getting Started

To visualise the Storybook

The storybook is deployed here. 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.

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.

cd lunatic-dsfr
yarn install
yarn storybook

Now you are ready to launch the storybook, which will be accessible at localhost:6006

Connect Lunatic-DSFR with Lunatic

In any application that uses the Lunatic components library, it is possible to override the native Lunatic components by injecting Lunatic-DSFR ones. These process is detailed in Lunatic Documentation here.

To use Lunatic-DSFR, first install theses packages into your application :

yarn add @inseefr/lunatic-dsfr @codegouvfr/react-dsfr tss-react @emotion/react

Import the Lunatic-DSFR components in the file where you use LunaticComponents:

import { slotComponents } from "@inseefr/lunatic-dsfr";

Then inject slotComponents into LunaticComponents

<LunaticComponents slots={slots} />

If you use Suggester component you will need to add these dependencies for MUI :

yarn add @mui/material @emotion/styled

Finally surround the LunaticComponents by the MuiDsfrThemeProvider provided by @codegouvfr/react-dsfr

<MuiDsfrThemeProvider>
    {/*...*/}
    <LunaticComponents slots={slots} />
    {/*...*/}
</MuiDsfrThemeProvider>

lunatic-dsfr's Issues

Duration - ajout de "s" aux unités

Composant Duration : je crois qu'il manque des "s" à Année, Durée, Heure et Minute dans l'affichage des unités (ces s sont présents en Lunatic)

Effacement de données impossible ?

Exemple dans la vidéo jointe : le champ Input Number ne peut pas être vidé (tout est ok en Lunatic, ko en DSFR)
QNONREG - Filtre et vidages.json
vidage_filtre.zip

Bumb to @inseefr/[email protected]

See : InseeFr/Lunatic#731

DatePicker : cannot update value with format Year et Month Year

cf. InseeFr/stromae-dsfr#85

Suggester - pas d'écho si on efface une saisie et qu'on recherche de nouveau sans sortir du champ

Description du bug

Suggester : lorsqu'on a choisi un écho, qu'on efface cet écho et qu'on recherche un nouveau (ou même) libellé sans sortir de la zone de saisie, aucun écho n'est trouvé. Si on sort de la zone de saisie, la recherche fonctionne de nouveau.

=> I tested it on the storybook, which leads me to believe that it's a lunatic bug.

Pour reproduire le bug

vidéo jointe
Suggester.zip

Comportement attendu

Des échos trouvés ou une explication ?

Version où le bug est apparu

3.0 Lunatic mais je ne sais pas laquelle

Navigateurs testés

=> Firefox

Additional context

Add any other context about the problem here.

Error when getting back to a partially responded duration component

Consider this:

• answering with 10 in the hour field and nothing in the minutes field
  
• continuing to next page
• getting back to previous
• 💥 👇
  

I do not reproduce this bug in the Lunatic storybook 3.0

Example questionnaire attached.

sdsfr-hour-minute-bug.zip

Coquille sur recherche sans écho

Pairwise - Affichage de la liste des modalités à sélectionner

Toutes les options sont [Object Object], que ce soit dans le composant ou dans un json "bien formé"
IssueEno927.json

Persistance des données de boucles d'une occurrence à une autre

Persistance des données de boucles liées entre occurrences.
Exemple via le json joint :
Test_mini_boucles.json
3 individus, la saisie d'un age est conservé pour l'individu suivant.

Pas de souci sur le storybook Lunatic 3.0

Support Date component for year and month/year

see https://www.figma.com/file/fhdhctobqKAznR5R1pBT5D/Stromae-v3?type=design&node-id=1862-1650&mode=design

DatePIcker - date invalide sauvegardée

A la saisie d'une date invalide (31.11.2024 par exemple), la donnée en Lunatic n'est pas sauvegardée, mais elle est l'est dans la version Dsfr du composant

=> faire en sorte que les dates invalides ne soient pas sauvegardées.

Ergonomics of a declaration with a null value

I need to display a statement dynamically :

• if the answer to the previous question is "yes", then I display a content
• otherwise, I display nothing.

This works fine when I need to display the content. However, when the content is null then I get a visual with the statement's ergonomics (see screenshot below).
This would be fine if the ergonomics were not visible when the content is null.

The storybook deployment is broken

We managed at the beginning of the project to deploy storybook on github pages. It is not working anymore. Can it please be fixed ?

Non affichage des controles

pour tracer :
JsonDSFR_kzfezgxb.json

Support the Duration component

See https://www.figma.com/file/fhdhctobqKAznR5R1pBT5D/Stromae-v3?type=design&node-id=1862-639&mode=design

For this feature:

• minutes can't be more than 59
• month can't be more than 11

Support textarea

For text answer longer than 249 characters we want to display a textarea instead of a simple input (see https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/champ-de-saisie).

State in table is not updated when getting back to a previous page

Description

On this questionnaire, paginated by sequence, when answering the table the 1st time, the dispatched percentage is calculated.

If i get to the next page, then come back to the previous one and edit the table numbers, the dispatched percentage is not computed.

And in fact, the input data doesn't seem to be updated, the first inputs are the ones available in the downloaded data file.

How to reproduce

1. in the first sequence, add a Chiffres d'affaire
2. browse the questionnaire to the second sequence
3. dispatch the Chiffre d'affaire in percentage in the table (for example, 10% for the first line, 90% for the second in order to have 100% total)
4. move to the next sequence
5. get back the previous
6. change or delete of a the cell (the 90% for example)
7. the declaration that display the total is not updated
8. download the data to check that nothing was updated

Check

• the questionnaire was tested on the Lunatic 3.0 storybook, no bug
• the questionnaire was tested on the Lunatic DSFR storybook, the bug was there.

Direct link to the source questionnaire.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all minor and patch updates (@emotion/react, @types/node, @types/react, eslint-plugin-react-refresh, husky, knip, vite)

Detected dependencies

github-actions

.github/workflows/ci.yaml

• actions/checkout v4
• actions/setup-node v4
• bahmutov/npm-install v1
• actions/checkout v4
• actions/setup-node v4
• bahmutov/npm-install v1
• actions/upload-artifact v4
• actions/checkout v4
• actions/setup-node v4
• bahmutov/npm-install v1
• actions/download-artifact v4
• actions/upload-artifact v4
• actions/download-artifact v4
• peaceiris/actions-gh-pages v4
• garronej/ts-ci v2.1.5
• softprops/action-gh-release v2
• actions/checkout v4
• actions/setup-node v4
• bahmutov/npm-install v1
• garronej/ts-ci v2.1.5

npm

package.json

• react-number-format ^5.4.0
• @codegouvfr/react-dsfr ^1.11.3
• @emotion/react ^11.13.0
• @emotion/styled ^11.13.0
• @eslint/js ^9.9.0
• @inseefr/lunatic ^3.4.1
• @mui/material ^5.16.7
• @playwright/test ^1.46.1
• @storybook/addon-a11y ^8.2.9
• @storybook/addon-essentials ^8.2.9
• @storybook/addon-interactions ^8.2.9
• @storybook/addon-links ^8.2.9
• @storybook/builder-vite ^8.2.9
• @storybook/react ^8.2.9
• @storybook/react-vite ^8.2.9
• @storybook/theming ^8.2.9
• @testing-library/jest-dom ^6.4.8
• @testing-library/react ^16.0.0
• @types/node ^22.3.0
• @types/react ^18.3.3
• @types/react-dom ^18.3.0
• @vitejs/plugin-react ^4.3.1
• eslint ^9.9.0
• eslint-plugin-react-hooks ^5.1.0-rc-d48603a5-20240813
• eslint-plugin-react-refresh ^0.4.9
• globals ^15.9.0
• husky ^9.1.4
• jsdom ^24.1.1
• knip ^5.27.2
• lint-staged ^15.2.9
• prettier ^3.3.3
• react ^18.3.1
• react-dom ^18.3.1
• storybook ^8.2.9
• storybook-dark-mode ^4.0.2
• ts-node ^10.9.2
• tss-react ^4.9.12
• typescript ^5.5.4
• typescript-eslint ^8.1.0
• vite ^5.4.1
• vite-tsconfig-paths ^5.0.1
• vitest ^2.0.5
• @codegouvfr/react-dsfr ^1.10.0
• @emotion/react ^11.9.0
• @inseefr/lunatic ^3.0.0
• @mui/material ^5.15.0
• @types/react ^18.0.0
• react ^18.0.0
• tss-react ^4.9.0

---

• Check this box to trigger a request for Renovate to run again on this repository

[Datepicker] onChange fails if entering value that matches current value

To reproduce:

• Launch storybook with yarn storybook
• Navigate to the datepicker story
• Enter - jour: 18, mois, 01, année: 1990
• Click next, and then click previous
• Clear the année field
• Enter 199 in the année field
• Enter 0 (value must be the same as it was previously saved as)

Expected result:
In the année field, the value is 0199 instead of 1990.
When consulting the console, the onChange function was called each time the value changed, except the last time.

Initial examination:
The function checkSubValue (DatepickerInput.tsx, line 12) is relatively difficult to understand, but it doesn't seem to be the source of the problem.
It seems that there is a condition that prevents the onChange function from being called if the value matches that which was already defined.
There is a function useOnHandleChange in Lunatic that could be the source of the problem, investigation pending.