@inseefr/lunatic 2.5.2-rc1-beta → 2.6.0-rc.1

package/README.fr.md

@@ -0,0 +1,186 @@
+<img align="right" src="docs/img/lunatic-logo.png" alt="Lunatic logo"/>
+
+# Lunatic
+
+[![Lunatic CI](https://github.com/InseeFr/Lunatic/actions/workflows/quality.yml/badge.svg)](https://github.com/InseeFr/Lunatic/actions/workflows/quality.yml)
+[![npm version](https://badge.fury.io/js/%40inseefr%2Flunatic.svg)](https://badge.fury.io/js/%40inseefr%2Flunatic)
+[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=coverage)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
+[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=alert_status)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+Lunatic est une librairie front-end sous forme de hook react et de librairies de composants pour générer un questionnaire à partir du format de données [Lunatic-Model](https://github.com/InseeFr/Lunatic-Model).
+
+- [Storybook](https://inseefr.github.io/Lunatic/storybook), branche `main`
+- [Storybook v1](https://inseefr.github.io/Lunatic/storybook-v1), branche `v1-main`
+- [Storybook Beta](https://inseefr.github.io/Lunatic/storybook-beta), branche `develop`
+- [Documentation](https://inseefr.github.io/Lunatic/fr/)
+
+## Sommaire
+
+- [Lunatic](#lunatic)
+  - [Sommaire](#sommaire)
+  - [Utilisation](#utilisation)
+    - [Le hook useLunatic](#le-hook-uselunatic)
+    - [Les composants](#les-composants)
+  - [Personnalisation](#personnalisation)
+  - [Fonctionnement interne](#fonctionnement-interne)
+    - [Fonctionnement général](#fonctionnement-général)
+    - [pages et pager](#pages-et-pager)
+    - [Exécution du VTL](#exécution-du-vtl)
+  - [Convention et Bonnes Pratiques](#convention-et-bonnes-pratiques)
+
+## Utilisation
+
+Pour commencer il faut installer lunatic
+
+```bash
+yarn add @inseefr/lunatic
+```
+
+### Le hook useLunatic
+
+Ensuite, à l'endroit où vous souhaitez afficher le formulaire il faudra utiliser le hook `useLunatic`.
+
+```js
+import { useLunatic } from '@inseefr/lunatic';
+
+const obj = useLunatic(source, data, options);
+```
+
+Ce hook prend 3 paramètres :
+
+- La **source**, qui est une représentation JSON du [Lunatic-Model](https://github.com/InseeFr/Lunatic-Model).
+- Les **données**, qui contient les données initiales du questionnaires (peut être un objet vide)
+- Un objet d'option pour paramétrer le fonctionnement
+  - **features** (défaut `['VTL', 'MD']`), permet de définir les fonctionnalité supportées
+  - **preferences** (défaut `['COLLECTED']`)
+  - **onChange** (défaut `() => {}`), permet d'ajouter une logique à appliquer lorsqu'une réponse est modifiée (doit être mémoïsé car est utilisé comme dépendance d'un useCallback en interne)
+  - **management** (défaut `false`) : Non implémenté encore, permettra de gérer plusieurs état d'une même variable (utilisation par des postes de reprise)
+  - **initialPage** (défaut `'1'`), permet de définir la page de départ
+  - **lastReachedPage** (défaut `undefined`) permet de définir quelle est la page la plus lointaine déjà atteinte
+  - **autoSuggesterLoading** (défaut `false`)
+  - **suggesters**
+  - **suggesterFetcher** (défaut `fetch`), méthode utilisée pour récupérer les données du suggester
+  - **activeControls** (défaut `false`), active les contrôles de données
+
+Et retourne un objet permettant de piloter le questionnaire :
+
+- `getComponents()`, renvoie les composants à afficher pour la page courante
+- `goPreviousPage()`, permet d'aller à la page précédente
+- `goNextPage()`, permet d'aller à la page suivante
+- `goToPage({ page: string })`, permet d'aller à une page arbitraire
+- `getErrors()`, renvoie les erreurs
+- `getModalErrors()`, renvoie les erreurs dans les modales
+- `getCurrentErrors()`, renvoie les erreurs de la page courante
+- `pageTag`, une chaine de caractère contenant le numéro de page (ex: 8.1)
+- `isFirstPage`
+- `isLastPage`
+- `pager`, un objet contenant les informations liées à la page
+- `waiting`, indique une attente d'information de la part d'un suggester
+- `getData()`, renvoie les données collectées dans le questionnaire
+- `loopVariables`, est un tableau contenant la liste des variables utilisées pour la boucle courante
+
+Pour plus d'informations sur les types de ce retour vous pouvez vous référer aux types disponibles dans le [code source](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/type.ts#L64-L200). Vous pouvez aussi trouver un exemple d'utilisation du hook dans la partie [Storybook](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/stories/utils/orchestrator.js#L69-L93).
+
+### Les composants
+
+Pour afficher le questionnaire on commencera par récupérer la liste des composants à afficher à l'aide de la méthode `getComponents()` renvoyée par le hook.
+
+Ensuite, on pourra utiliser le composant `<LunaticComponents />` pour gérer l'affichage des composants
+
+```jsx
+import { LunaticComponents } from '@inseefr/lunatic';
+
+function App({ source, data }) {
+	const { getComponents, getCurrentErrors, getModalErrors } =
+		lunatic.useLunatic(source, data, {});
+	const components = getComponents();
+	const currentErrors = getCurrentErrors();
+	const modalErrors = getModalErrors();
+
+	return (
+		<div className="container">
+			<LunaticComponents components={components} />
+			<lunatic.Modal errors={modalErrors} goNext={goNextPage} />
+		</div>
+	);
+}
+```
+
+Ce composant se charge de récupérer le bon composant à afficher en fonction des champs demandés. Il est possible de personnaliser les propriétés passées aux composants grâce à la propriété `componentProps` mais aussi de rajouter un élément autour de chaque composant grâce à la méthode `wrapper`. Vous pouvez regarder [l'orchestrateur du storybook](./src/stories/utils/orchestrator.jsx) pour avoir un exemple d'utilisation.
+
+Pour activer l'**autofocus**, il faut passer une clé dans la propriété `autoFocusKey` de `LunaticComponents`. Dès que cette valeur change, le premier champ est focus (une bonne solution est de passer le pageTag fourni par useLunatic).
+
+## Personnalisation
+
+Par défaut les composants offerts par Lunatic sont plutôt simples avec un style minimal. Il est possible de personnaliser les champs avec votre propre CSS, mais pour des cas plus complexes, vous pouvez aussi remplacer les composants de bases à l'aide de la propriété `custom` que vous pouvez passer lors de l'appel à useLunatic.
+
+```jsx
+const custom = {
+	Input: MyCustomInput,
+	InputNumber: MyCustomInputNumber,
+};
+
+function App({ source, data }) {
+	const {} = useLunatic(source, data, { custom });
+
+	// ...
+}
+```
+
+## Fonctionnement interne
+
+Cette partie concerne le fonctionnement interne du hook `useLunatic()`. L'objectif est d'aider à la compréhension de son fonctionnement.
+
+### Fonctionnement général
+
+Le hook se base sur un [état interne](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/type.ts#L64-L200) qui est mis à jour au travers d'un système de [reducer](https://reactjs.org/docs/hooks-reference.html#usereducer). Les [actions](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/actions.ts) qui affectent cet état sont limitées
+
+- Une action `'use-lunatic/on-init'` permet l'initialisation de l'état à partir des données reçu en paramètre du hook.
+- Les actions `'use-lunatic/go-previous'`, `'use-lunatic/go-next'` et `'use-lunatic/go-to-page'` sont appelées lors de la navigation à l'aide des méthodes renvoyées par le hook
+- L'action `use-lunatic/handle-change` est l'action la plus importante qui est appelée dès lors qu'une donnée est changée dans le questionnaire.
+
+L'ensemble des [reducers correspondants à ces actions sont disponibles ici](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/use-lunatic/reducer/reducer.js). En général, ils sont décomposés en plusieurs méthodes en fonction de la partie de l'état qu'ils modifient.
+
+### pages et pager
+
+À l'initialisation le scénario du questionnaire est modélisé sous forme d'un objet qui est stocké dans l'état (dans la propriété `pages`). Cet objet est indexé par numéro de page et contient la liste des composants à afficher pour chaque page. Combiné au `pager` qui contient l'état de la navigation, c'est cette propriété qui permet de résoudre les composants à afficher.
+
+### Exécution du VTL
+
+L'autre point important de lunatic est l'exécution des expressions VTL qui permettent de rendre certaines propriétés dynamiques (libellés, erreurs...). Ce remplissage se fait [lorsque l'état change](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/use-lunatic/commons/use-components-from-state.js).
+
+Afin de faciliter l'exécution des expressions une méthode `executeExpression()` est exposée dans l'état de Lunatic. Cette méthode est accompagnée d'une méthode `updateBindings()` qui permet la mise à jour des valeurs internes. Ce système d'exécution d'expression utilise un système de mémorisation pour ne pas re-exécuter une même expression plusieurs fois. Lorsque l'action `use-lunatic/handle-change` est exécuté, les valeurs ("bindings") sont mis à jour pour mémoriser les valeurs associées aux différentes variables VTL. De la même manière les valeurs des variables calculées dont dépend la variable modifié sont oubliées afin de rafraichir la valeur lors de la prochaine exécution.
+
+## Convention et Bonnes Pratiques
+
+- On évite les exports "défaut" car cela nuit à la lisibilité lors de l'import.
+- Les commentaires dans le code sont en anglais.
+- Les fichiers contenant du JSX doivent utiliser l'extension .jsx (ou .tsx).
+- Les commits suivent la spécification [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).
+- Les Pull Requests doivent être préfixées comme les commits avec la même convention :
+
+  - `test(XXX?)` : XXX pour de l'ajout de tests.
+  - `feat(XXX?)` : XXX pour de l'ajout de fonctionnalités.
+  - `fix(XXX?)` : XXX pour de la correction de bug.
+  - `docs(XXX?)` : XXX pour de l'ajout de documentation.
+  - `refactor(XXX?)` : XXX pour du refactoring qui ne change pas de fonctionnalités.
+  - `build(XXX?)` : XXX pour des changements liés au processus de build, aux scripts de compilation, etc.
+  - `style(XXX?)` : XXX pour de la modification de style.
+  - `ci(XXX?)` : XXX pour de la modification de CI.
+  - `perf(XXX?)` : XXX pour de l'amélioration de performance.
+  - `revert(XXX?)` : XXX pour annuler une précédente PR.
+  - `chore(XXX?)` : XXX pour des tâches de maintenance ou des tâches qui ne rentrent pas dans les autres catégories.
+
+- Les branches doivent être préfixées (on suivra les mêmes préfixes que pour le Conventional Commits) :
+  - `test/XXX` : pour de l'ajout de tests.
+  - `feat/XXX` : pour de l'ajout de fonctionnalités.
+  - `fix/XXX` : pour de la correction de bug.
+  - `docs/XXX` : pour de l'ajout de documentation.
+  - `refactor/XXX` : pour du refactoring qui ne change pas de fonctionnalités.
+  - `build/XXX` : pour des changements liés au processus de build, aux scripts de compilation, etc.
+  - `style/XXX` : pour des changements liés au style du code.
+  - `ci/XXX` : pour des changements liés à l'intégration continue (CI).
+  - `perf/XXX` : pour des améliorations de performance.
+  - `revert/XXX` : pour annuler une précédente PR.
+  - `chore/XXX` : pour des tâches de maintenance ou des tâches qui ne rentrent pas dans les autres catégories.

package/README.md

@@ -8,38 +8,38 @@
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=InseeFr_Lunatic&metric=alert_status)](https://sonarcloud.io/dashboard?id=InseeFr_Lunatic)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
-Lunatic est une librairie front-end sous forme de hook react et de librairies de composants pour générer un questionnaire à partir du format de données [Lunatic-Model](https://github.com/InseeFr/Lunatic-Model).
+Lunatic is a front-end library in the form of a React hook and component libraries for generating a questionnaire from the [Lunatic-Model](https://github.com/InseeFr/Lunatic-Model) data format.
 
-- [Storybook](https://inseefr.github.io/Lunatic/storybook), branche `main`
-- [Storybook v1](https://inseefr.github.io/Lunatic/storybook-v1), branche `v1-main`
-- [Storybook Beta](https://inseefr.github.io/Lunatic/storybook-beta), branche `develop`
-- [Documentation](https://inseefr.github.io/Lunatic/fr/)
+- [Storybook](https://inseefr.github.io/Lunatic/storybook), branch `main`
+- [Storybook v1](https://inseefr.github.io/Lunatic/storybook-v1), branch `v1-main`
+- [Storybook Beta](https://inseefr.github.io/Lunatic/storybook-beta), branch `develop`
+- [Documentation](https://inseefr.github.io/Lunatic/en/)
 
-## Sommaire
+## Table of Contents
 
 - [Lunatic](#lunatic)
-  - [Sommaire](#sommaire)
-  - [Utilisation](#utilisation)
-    - [Le hook useLunatic](#le-hook-uselunatic)
-    - [Les composants](#les-composants)
-  - [Personnalisation](#personnalisation)
-  - [Fonctionnement interne](#fonctionnement-interne)
-    - [Fonctionnement général](#fonctionnement-général)
-    - [pages et pager](#pages-et-pager)
-    - [Exécution du VTL](#exécution-du-vtl)
-  - [Convention et bonnes pratiques](#convention-et-bonnes-pratiques)
+  - [Table of Contents](#table-of-contents)
+  - [Usage](#usage)
+    - [The useLunatic Hook](#the-uselunatic-hook)
+    - [Components](#components)
+  - [Customization](#customization)
+  - [Internal Working](#internal-working)
+    - [General Functioning](#general-functioning)
+    - [Pages and Pager](#pages-and-pager)
+    - [VTL Execution](#vtl-execution)
+  - [Convention and Best Practices](#convention-and-best-practices)
 
-## Utilisation
+## Usage
 
-Pour commencer il faut installer lunatic
+To get started, you need to install Lunatic:
 
 ```bash
-yarn add @inseefr/lunatic@2.5.0
+yarn add @inseefr/lunatic
 ```
 
-### Le hook useLunatic
+### The useLunatic Hook
 
-Ensuite, à l'endroit où vous souhaitez afficher le formulaire il faudra utiliser le hook `useLunatic`.
+Next, wherever you want to display the form, you'll need to use the `useLunatic` hook.
 
 ```js
 import { useLunatic } from '@inseefr/lunatic';
@@ -47,46 +47,46 @@ import { useLunatic } from '@inseefr/lunatic';
 const obj = useLunatic(source, data, options);
 ```
 
-Ce hook prend 3 paramètres :
-
-- La **source**, qui est une représentation JSON du [Lunatic-Model](https://github.com/InseeFr/Lunatic-Model).
-- Les **données**, qui contient les données initiales du questionnaires (peut être un objet vide)
-- Un objet d'option pour paramétrer le fonctionnement
-  - **features** (défaut `['VTL', 'MD']`), permet de définir les fonctionnalité supportées
-  - **preferences** (défaut `['COLLECTED']`)
-  - **onChange** (défaut `() => {}`), permet d'ajouter une logique à appliquer lorsqu'une réponse est modifiée (doit être mémoïsé car est utilisé comme dépendance d'un useCallback en interne)
-  - **management** (défaut `false`) : Non implémenté encore, permettra de gérer plusieurs état d'une même variable (utilisation par des postes de reprise)
-  - **initialPage** (défaut `'1'`), permet de définir la page de départ
-  - **lastReachedPage** (défaut `undefined`) permet de définir quelle est la page la plus lointaine déjà atteinte
-  - **autoSuggesterLoading** (défaut `false`)
-  - **suggesters**
-  - **suggesterFetcher** (défaut `fetch`), méthode utilisée pour récupérer les données du suggester
-  - **activeControls** (défaut `false`), active les contrôles de données
-
-Et retourne un objet permettant de piloter le questionnaire :
-
-- `getComponents()`, renvoie les composants à afficher pour la page courante
-- `goPreviousPage()`, permet d'aller à la page précédente
-- `goNextPage()`, permet d'aller à la page suivante
-- `goToPage({ page: string })`, permet d'aller à une page arbitraire
-- `getErrors()`, renvoie les erreurs
-- `getModalErrors()`, renvoie les erreurs dans les modales
-- `getCurrentErrors()`, renvoie les erreurs de la page courante
-- `pageTag`, une chaine de caractère contenant le numéro de page (ex: 8.1)
-- `isFirstPage`
-- `isLastPage`
-- `pager`, un objet contenant les informations liées à la page
-- `waiting`, indique une attente d'information de la part d'un suggester
-- `getData()`, renvoie les données collectées dans le questionnaire
-- `loopVariables`, est un tableau contenant la liste des variables utilisées pour la boucle courante
-
-Pour plus d'informations sur les types de ce retour vous pouvez vous référer aux types disponibles dans le [code source](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/type.ts#L64-L200). Vous pouvez aussi trouver un exemple d'utilisation du hook dans la partie [Storybook](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/stories/utils/orchestrator.js#L69-L93).
-
-### Les composants
-
-Pour afficher le questionnaire on commencera par récupérer la liste des composants à afficher à l'aide de la méthode `getComponents()` renvoyée par le hook.
-
-Lunatic offre une librairie de composant préconçu pour répondre aux différents types de champs disponible dans les questionnaires.
+This hook takes three parameters:
+
+- The **source**, which is a JSON representation of the [Lunatic-Model](https://github.com/InseeFr/Lunatic-Model).
+- The **data**, which contains the initial questionnaire data (can be an empty object).
+- An options object to configure the behavior.
+  - **features** (default `['VTL', 'MD']`), allows you to define supported functionalities.
+  - **preferences** (default `['COLLECTED']`).
+  - **onChange** (default `() => {}`), allows you to add logic to apply when an answer is changed (must be memoized as it's used as a dependency in an internal `useCallback`).
+  - **management** (default `false`): Not yet implemented, will allow managing multiple states of the same variable (used by recovery positions).
+  - **initialPage** (default `'1'`), allows you to define the starting page.
+  - **lastReachedPage** (default `undefined`), allows you to define the furthest reached page.
+  - **autoSuggesterLoading** (default `false`).
+  - **suggesters**.
+  - **suggesterFetcher** (default `fetch`), method used to retrieve suggester data.
+  - **activeControls** (default `false`), activates data controls.
+
+And it returns an object that allows you to control the questionnaire:
+
+- `getComponents()`, returns the components to display for the current page.
+- `goPreviousPage()`, allows you to go to the previous page.
+- `goNextPage()`, allows you to go to the next page.
+- `goToPage({ page: string })`, allows you to go to an arbitrary page.
+- `getErrors()`, returns the errors.
+- `getModalErrors()`, returns the errors in modals.
+- `getCurrentErrors()`, returns the errors for the current page.
+- `pageTag`, a string containing the page number (e.g., 8.1).
+- `isFirstPage`.
+- `isLastPage`.
+- `pager`, an object containing information related to the page.
+- `waiting`, indicates waiting for information from a suggester.
+- `getData()`, returns the collected data in the questionnaire.
+- `loopVariables`, is an array containing the list of variables used for the current loop.
+
+For more information on the types of this return, you can refer to the available types in the [source code](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/type.ts#L64-L200). You can also find an example of using the hook in the [Storybook section](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/stories/utils/orchestrator.js#L69-L93).
+
+### Components
+
+To display the questionnaire, start by retrieving the list of components to display using the `getComponents()` method returned by the hook.
+
+Lunatic offers a library of pre-designed components to cover the different types of fields available in questionnaires.
 
 ```jsx
 import * as lunatic from '@inseefr/lunatic';
@@ -100,23 +100,20 @@ function App({ source, data }) {
 
 	return (
 		<div className="container">
-			{components.map(function (component) {
-				const Component = lunatic[component.componentType];
-				return (
-					<Component key={component.id} {...component} errors={currentErrors} />
-				);
-			})}
+			<LunaticComponents components={components} />
 			<lunatic.Modal errors={modalErrors} goNext={goNextPage} />
 		</div>
 	);
 }
 ```
 
-L'ensemble des composants offerts par Lunatic sont disponibles dans le dossier [src/components](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/components/components.js)
+All the components offered by Lunatic are available in the [src/components](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/components/components.js) folder.
 
-## Personnalisation
+To activate the **autofocus**, you need to pass a key in the `autoFocusKey` property of `LunaticComponents`. As soon as this value changes, the first field is focused (a good solution is to pass the `pageTag` provided by `useLunatic`).
 
-Par défaut les composants offerts par Lunatic sont plutôt simples avec un style minimal. Il est possible de personnaliser les champs avec votre propre CSS, mais pour des cas plus complexes vous pouvez aussi remplacer les composants de bases à l'aide de la propriété `custom` que vous pouvez passer lors de l'appel à useLunatic.
+## Customization
+
+By default, the components offered by Lunatic are quite simple with a minimal style. You can customize the fields with your own CSS, but for more complex cases, you can also replace the basic components using the `custom` property that you can pass when calling `useLunatic`.
 
 ```jsx
 const custom = {
@@ -131,39 +128,59 @@ function App({ source, data }) {
 }
 ```
 
-## Fonctionnement interne
+## Internal Working
+
+This section covers the internal working of the `useLunatic()` hook. The goal is to help understand how it operates.
+
+### General Functioning
 
-Cette partie concerne le fonctionnement interne du hook `useLunatic()`. L'objectif est d'aider à la compréhension de son fonctionnement.
+The hook is based on an [internal state](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/type.ts#L64-L200) that is updated through a [reducer](https://reactjs.org/docs/hooks-reference.html#usereducer) system. The [actions](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/actions.ts) affecting this state are limited:
 
-### Fonctionnement général
+- An action `'use-lunatic/on-init'` allows initialization of the state from the data received as a parameter of the hook.
+- The actions `'use-lunatic/go-previous'`, `'use-lunatic/go-next'`, and `'use-lunatic/go-to-page'` are called during navigation using the methods returned by the hook.
+- The action `use-lunatic/handle-change` is the most important action and is called whenever data is changed in the questionnaire.
 
-Le hook se base sur un [état interne](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/type.ts#L64-L200) qui est mis à jour au travers d'un système de [reducer](https://reactjs.org/docs/hooks-reference.html#usereducer). Les [actions](https://github.com/InseeFr/Lunatic/blob/v2-typescript/src/use-lunatic/actions.ts) qui affectent cet état sont limitées
+All the [reducers corresponding to these actions are available here](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/use-lunatic/reducer/reducer.js). Generally, they are broken down into several methods depending on the part of the state they modify.
 
-- Une action `'use-lunatic/on-init'` permet l'initialisation de l'état à partir des données reçu en paramètre du hook.
-- Les actions `'use-lunatic/go-previous'`, `'use-lunatic/go-next'` et `'use-lunatic/go-to-page'` sont appelées lors de la navigation à l'aide des méthodes renvoyées par le hook
-- L'action `use-lunatic/handle-change` est l'action la plus importante qui est appelée dès lors qu'une donnée est changée dans le questionnaire.
+### Pages and Pager
 
-L'ensemble des [reducers correspondants à ces actions sont disponibles ici](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/use-lunatic/reducer/reducer.js). En général, ils sont décomposés en plusieurs méthodes en fonction de la partie de l'état qu'ils modifient.
+At initialization, the questionnaire scenario is modeled as an object which is stored in the state (in the `pages` property). This object is indexed by page number and contains the list of components to display for each page. Combined with the `pager` which contains the state of navigation, this property allows resolving the components to display.
 
-### pages et pager
+### VTL Execution
 
-À l'initialisation le scénario du questionnaire est modélisé sous forme d'un objet qui est stocké dans l'état (dans la propriété `pages`). Cet objet est indexé par numéro de page et contient la liste des composants à afficher pour chaque page. Combiné au `pager` qui contient l'état de la navigation, c'est cette propriété qui permet de résoudre les composants à afficher.
+Another important point of Lunatic is the execution of VTL expressions which allow making certain properties dynamic (labels, errors, etc.). This filling is done [when the state changes](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/use-lunatic/commons/use-components-from-state.js).
 
-### Exécution du VTL
+To facilitate expression execution, an `executeExpression()` method is exposed in the Lunatic state. This method is accompanied by an `updateBindings()` method which allows updating internal values. This expression execution system uses a memoization system to not re-execute the same expression multiple times. When the `use-lunatic/handle-change` action is executed, the values ("bindings") are updated to memorize the values associated with the different VTL variables. Similarly, the values of calculated variables on which the modified variable depends are forgotten to refresh the value during the next execution.
 
-L'autre point important de lunatic est l'exécution des expressions VTL qui permettent de rendre certaines propriétés dynamiques (libellés, erreurs...). Ce remplissage se fait [lorsque l'état change](https://github.com/InseeFr/Lunatic/blob/v2-develop/src/use-lunatic/commons/use-components-from-state.js).
+## Convention and Best Practices
 
-Afin de faciliter l'exécution des expressions une méthode `executeExpression()` est exposée dans l'état de Lunatic. Cette méthode est accompagnée d'une méthode `updateBindings()` qui permet la mise à jour des valeurs internes. Ce système d'exécution d'expression utilise un système de mémorisation pour ne pas re-exécuter une même expression plusieurs fois. Lorsque l'action `use-lunatic/handle-change` est exécuté, les valeurs ("bindings") sont mis à jour pour mémoriser les valeurs associées aux différentes variables VTL. De la même manière les valeurs des variables calculées dont dépend la variable modifié sont oubliées afin de rafraichir la valeur lors de la prochaine exécution.
+- Avoid "default" exports as it impairs readability during import.
+- Comments in the code should be in English.
+- Files containing JSX should use the .jsx (or .tsx) extension.
+- Commits follow the specification [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).
+- Pull Requests should be prefixed in the same convention as commits:
 
-## Convention et bonnes pratiques
+  - `test(XXX?)`: XXX for adding tests.
+  - `feat(XXX?)`: XXX for adding new features.
+  - `fix(XXX?)`: XXX for bug fixes.
+  - `docs(XXX?)`: XXX for adding documentation.
+  - `refactor(XXX?)`: XXX for refactoring that doesn't change functionality.
+  - `build(XXX?)`: XXX for changes related to the build process, compilation scripts, etc.
+  - `style(XXX?)`: XXX for style modifications.
+  - `ci(XXX?)`: XXX for CI modification.
+  - `perf(XXX?)`: XXX for performance improvement.
+  - `revert(XXX?)`: XXX to revert a previous PR.
+  - `chore(XXX?)`: XXX for maintenance tasks or tasks that don't fall into other categories.
 
-- On évite les exports "défaut" car cela nuit à la lisibilité lors de l'import
-- Les commentaires dans le code sont en anglais
-- Les fichiers contenant du JSX doivent utiliser l'extension .jsx (ou .tsx)
-- Les commits suivent la spécification [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
-- Les branches doivent être préfixées (on suivra les mêmes préfixes que pour le conventional commits)
-  - test/XXX: pour de l'ajout de tests
-  - feat/XXX: pour de l'ajout de fonctionnalités
-  - fix/XXX: pour de la correction de bug
-  - doc/XXX: pour de l'ajout de documentation
-  - ref/XXX: pour du refactoring qui ne change pas de fonctionnalités
+- Branches should be prefixed (following the same prefixes as Conventional Commits):
+  - `test/XXX`: for adding tests.
+  - `feat/XXX`: for adding new features.
+  - `fix/XXX`: for bug fixes.
+  - `docs/XXX`: for adding documentation.
+  - `refactor/XXX`: for refactoring that doesn't change functionality.
+  - `build/XXX`: for changes related to the build process, compilation scripts, etc.
+  - `style/XXX`: for changes related to code style.
+  - `ci/XXX`: for changes related to continuous integration (CI).
+  - `perf/XXX`: for performance improvements.
+  - `revert/XXX`: to revert a previous PR.
+  - `chore/XXX`: for maintenance tasks or tasks that don't fall into other categories.

package/lib/components/button/lunatic-button.js

@@ -1,37 +1,34 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _dom = require("../../utils/dom");
 var _isElement = require("../../utils/is-element");
 var _commons = require("../commons");
 require("./button.scss");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function Button(_ref) {
   var children = _ref.children,
     onClick = _ref.onClick,
     disabled = _ref.disabled,
     label = _ref.label,
-    className = _ref.className;
-  var handleClick = (0, _react.useCallback)(function (e) {
-    e.stopPropagation();
-    e.preventDefault();
-    onClick === null || onClick === void 0 ? void 0 : onClick(e);
-  }, [onClick]);
-  if ((0, _isElement.isElement)(children)) return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    className = _ref.className,
+    value = _ref.value,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type;
+  var handleClick = (0, _dom.prevent)(onClick);
+  if ((0, _isElement.isElement)(children) || value) return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
     disabled: disabled,
-    type: "button",
+    type: type,
     className: (0, _classnames["default"])('button-lunatic', className, {
       disabled: disabled
     }),
     onClick: handleClick,
+    value: value,
     children: children
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
@@ -41,7 +38,7 @@ function Button(_ref) {
       className: (0, _classnames["default"])('button-lunatic', className, {
         disabled: disabled
       }),
-      value: label || (children === null || children === void 0 ? void 0 : children.toString()),
+      value: label !== null && label !== void 0 ? label : children === null || children === void 0 ? void 0 : children.toString(),
       onClick: handleClick
     })
   });

package/lib/components/checkbox/checkbox-group/html/checkbox-group.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
 var _checkboxGroupContent = _interopRequireDefault(require("./checkbox-group-content"));
 var _commons = require("../../../commons");
 require("./checkbox-group.scss");

package/lib/components/commons/components/combo-box/combo-box-content.js

@@ -8,7 +8,7 @@ exports.ComboBoxContent = ComboBoxContent;
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _keyboardKeyCodes = require("./state-management/reduce-on-keydown/keyboard-key-codes");
+var _keyboardKeyCodes = require("./keyboard-key-codes");
 var _index = require("../../index");
 var _comboBoxContentBox = _interopRequireDefault(require("./combo-box-content-box"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -48,6 +48,7 @@ function ComboBoxContent(_ref) {
   }, [onKeyDown]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContentBox["default"], {
     classNamePrefix: classNamePrefix,
+    focused: focused,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])("".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-content"), {
         focused: focused