@inseefr/lunatic 2.3.0 → 2.4.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2019 
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2019 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,22 +1,169 @@
-<img align="right" src="docs/img/lunatic-logo.png" alt="Lunatic logo"/>
-
-# Lunatic
-
-Library of questionnaire components
-
-[![Build Status](https://travis-ci.org/InseeFr/Lunatic.svg?branch=master)](https://travis-ci.org/InseeFr/Lunatic)
-[![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)
-
-The documentation can be found in the [docs](https://github.com/InseeFr/Lunatic/tree/master/docs) folder and [browsed online](https://inseefr.github.io/Lunatic).
-
-[Storybook](https://inseefr.github.io/Lunatic/storybook) is also available online.
-
-## Usage
-
-An [example](https://github.com/InseeFr/Lunatic/tree/master/example/orchestrator) of use of Lunatic is available. This simple orchestrator is deployed [online](https://inseefr.github.io/Lunatic/orchestrator).
-
-## Editor
-
-A Lunatic Model / Lunatic [Editor](https://github.com/InseeFr/Lunatic/tree/master/example/lunatic-editor) is avaible [online](https://inseefr.github.io/Lunatic/editor).
+<img align="right" src="docs/img/lunatic-logo.png" alt="Lunatic logo"/>
+
+# Lunatic
+
+[![Lunatic CI](https://github.com/InseeFr/Lunatic/actions/workflows/ci.yml/badge.svg)](https://github.com/InseeFr/Lunatic/actions/workflows/ci.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 v2](https://inseefr.github.io/Lunatic/storybook-v2)
+- [Storybook v1](https://inseefr.github.io/Lunatic/storybook-v1)
+- [Storybook Beta](https://inseefr.github.io/Lunatic/storybook-beta)
+- [Editeur Lunatic](https://inseefr.github.io/Lunatic/editor/)
+- [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@2.0.7-v2
+```
+
+### 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`)
+  - **initialPage** (défaut `'1'`), permet de définir la page de départ
+  - **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.
+
+```jsx
+import * as lunatic 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">
+			{components.map(function (component) {
+				const Component = lunatic[component.componentType];
+				return (
+					<Component key={component.id} {...component} errors={currentErrors} />
+				);
+			})}
+			<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)
+
+## 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 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

package/lib/components/button/__snapshots__/lunatic-button.spec.jsx.snap

@@ -0,0 +1,80 @@
+// Vitest Snapshot v1
+
+exports[`Button > renders without crashing 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="button-lunatic"
+        type="button"
+      >
+        <span>
+          Click me!
+        </span>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="button-lunatic"
+      type="button"
+    >
+      <span>
+        Click me!
+      </span>
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/lib/components/button/button.scss

@@ -0,0 +1,24 @@
+.button-lunatic {
+	min-width: 20%;
+	color: white;
+	border-color: var(--color-primary-dark);
+	background-color: var(--color-primary-dark);
+	font-size: 1.2em;
+	font-weight: bold;
+	padding: 0.4em;
+	&:hover,
+	&:focus:hover {
+		color: var(--color-primary-dark);
+		background-color: white;
+		border-color: var(--color-primary-dark);
+	}
+	&:focus {
+		outline: none;
+		background-color: var(--color-primary-light);
+		border-color: var(--color-primary-light);
+	}
+	&:disabled {
+		background: var(--color-disabled);
+		color: var(--color-primary-dark);
+	}
+}

package/lib/components/button/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _lunaticButton["default"];
+  }
+});
+var _lunaticButton = _interopRequireDefault(require("./lunatic-button"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

@@ -0,0 +1,56 @@
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+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", {
+    disabled: disabled,
+    type: "button",
+    className: (0, _classnames["default"])('button-lunatic', className, {
+      disabled: disabled
+    }),
+    onClick: handleClick,
+    children: children
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      disabled: disabled,
+      type: "button",
+      className: (0, _classnames["default"])('button-lunatic', className, {
+        disabled: disabled
+      }),
+      value: label || children,
+      onClick: handleClick
+    })
+  });
+}
+Button.propTypes = {
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
+  disabled: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func
+};
+var _default = (0, _commons.createCustomizableLunaticField)(Button, 'Button');
+exports["default"] = _default;

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _lunaticButton = _interopRequireDefault(require("./lunatic-button"));
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('Button', function () {
+  (0, _vitest.it)('renders without crashing', function () {
+    var container = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticButton["default"], {
+      onClick: function onClick() {},
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: "Click me!"
+      })
+    }));
+    (0, _vitest.expect)(container).toMatchSnapshot();
+  });
+  (0, _vitest.it)('renders a button element with given children as a Span', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticButton["default"], {
+        onClick: function onClick() {},
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: "Click me!"
+        })
+      })),
+      getByRole = _render.getByRole;
+    var button = getByRole('button');
+    (0, _vitest.expect)(button).toBeInTheDocument();
+    (0, _vitest.expect)(button.tagName).toBe('BUTTON');
+    (0, _vitest.expect)(button).toHaveTextContent('Click me!');
+  });
+  (0, _vitest.it)('renders a button element with given children if children is not a React element', function () {
+    var label = 'Click me!';
+    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticButton["default"], {
+        onClick: function onClick() {},
+        children: label
+      })),
+      getByDisplayValue = _render2.getByDisplayValue;
+    var input = getByDisplayValue(label);
+    (0, _vitest.expect)(input).toBeInTheDocument();
+    (0, _vitest.expect)(input.tagName).toBe('INPUT');
+    (0, _vitest.expect)(input).toHaveAttribute('value', label);
+  });
+  (0, _vitest.it)('appelle onClick quand le bouton est cliqué', function () {
+    var handleClick = _vitest.vi.fn();
+    var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticButton["default"], {
+        onClick: handleClick,
+        children: "Cliquez ici"
+      })),
+      getByText = _render3.getByText;
+    var buttonElement = getByText('Cliquez ici');
+    _react2.fireEvent.click(buttonElement);
+    (0, _vitest.expect)(handleClick).toHaveBeenCalledTimes(1);
+  });
+  (0, _vitest.it)('renders an input element with given label without a child', function () {
+    var label = 'Click me!';
+    var _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticButton["default"], {
+        onClick: function onClick() {},
+        label: label
+      })),
+      getByDisplayValue = _render4.getByDisplayValue;
+    var input = getByDisplayValue(label);
+    (0, _vitest.expect)(input).toBeInTheDocument();
+    (0, _vitest.expect)(input).toHaveAttribute('type', 'button');
+    (0, _vitest.expect)(input).toHaveAttribute('value', label);
+  });
+  (0, _vitest.it)('renders the disabled class when the disabled prop is true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticButton["default"], {
+        onClick: function onClick() {},
+        disabled: true,
+        children: "Cliquez ici"
+      })),
+      getByText = _render5.getByText;
+    var buttonElement = getByText('Cliquez ici');
+    (0, _vitest.expect)(buttonElement).toHaveClass('disabled');
+  });
+  (0, _vitest.it)('applies the provided className to the button element', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticButton["default"], {
+        onClick: function onClick() {},
+        className: "test-class",
+        children: "Click me!"
+      })),
+      getByRole = _render6.getByRole;
+    var button = getByRole('button');
+    (0, _vitest.expect)(button).toHaveClass('test-class');
+  });
+});

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _commons = require("../../commons");
+var _commons2 = require("../../../commons");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function CheckboxBoolean(_ref) {
+  var checked = _ref.checked,
+    id = _ref.id,
+    disabled = _ref.disabled,
+    onClick = _ref.onClick,
+    labelId = _ref.labelId,
+    label = _ref.label,
+    description = _ref.description,
+    errors = _ref.errors;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "lunatic-checkbox-boolean",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.CheckboxOption, {
+      disabled: disabled,
+      checked: checked,
+      id: id,
+      onClick: onClick,
+      labelledBy: labelId,
+      value: checked,
+      label: label,
+      description: description
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons2.Errors, {
+      errors: errors,
+      activeId: id
+    })]
+  });
+}
+CheckboxBoolean.prototype = {
+  id: _propTypes["default"].string.isRequired,
+  checked: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func.isRequired,
+  disabled: _propTypes["default"].bool,
+  label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]),
+  errors: _propTypes["default"].object,
+  description: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element, _propTypes["default"].array])
+};
+CheckboxBoolean.defaultProps = {
+  checked: undefined,
+  disabled: false,
+  errors: undefined,
+  description: undefined
+};
+var _default = (0, _commons2.createCustomizableLunaticField)(CheckboxBoolean, 'CheckboxBoolean');
+exports["default"] = _default;

package/lib/components/checkbox/checkbox-boolean/html/checkbox-boolean.spec.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _checkboxBoolean = _interopRequireDefault(require("./checkbox-boolean"));
+var _vitest = require("vitest");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+(0, _vitest.describe)('CheckboxBoolean', function () {
+  var label = 'I accept the terms and conditions';
+  var description = 'You must accept the terms and conditions to continue.';
+  var onClick = _vitest.vi.fn();
+  (0, _vitest.afterEach)(function () {
+    _vitest.vi.resetAllMocks();
+  });
+  (0, _vitest.it)('renders label ', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxBoolean["default"], {
+        label: label
+      })),
+      getByText = _render.getByText;
+    (0, _vitest.expect)(getByText(label)).toBeInTheDocument();
+  });
+  (0, _vitest.it)('renders unchecked checkbox', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxBoolean["default"], {
+        label: label,
+        description: description
+      })),
+      getByRole = _render2.getByRole;
+    var checkbox = getByRole('checkbox');
+    (0, _vitest.expect)(checkbox).not.toBeChecked();
+    (0, _vitest.expect)(checkbox).toBeEnabled();
+  });
+  (0, _vitest.it)('renders checked checkbox', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxBoolean["default"], {
+        label: label,
+        description: description,
+        checked: true,
+        onClick: onClick
+      })),
+      getByRole = _render3.getByRole;
+    var checkbox = getByRole('checkbox');
+    (0, _vitest.expect)(checkbox).toBeChecked();
+    (0, _vitest.expect)(checkbox).toBeEnabled();
+  });
+  (0, _vitest.it)('calls onClick when checkbox is clicked', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxBoolean["default"], {
+        label: label,
+        description: description,
+        onClick: onClick
+      })),
+      getByRole = _render4.getByRole;
+    var checkbox = getByRole('checkbox');
+    _react2.fireEvent.click(checkbox);
+    (0, _vitest.expect)(onClick).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(onClick).toHaveBeenCalledWith(true);
+  });
+});

package/lib/components/checkbox/checkbox-boolean/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _lunaticCheckboxBoolean["default"];
+  }
+});
+var _lunaticCheckboxBoolean = _interopRequireDefault(require("./lunatic-checkbox-boolean"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }