@inseefr/lunatic 3.6.13 → 3.6.15-rc.0

package/hooks/useMultiMode.d.ts

@@ -0,0 +1,49 @@
+import type { LunaticVariablesStore } from '../use-lunatic/commons/variables/lunatic-variables-store';
+import type { LunaticSource } from '../type.source';
+/**
+ * Retrieve the multimode state
+ *
+ * ## Why this hook
+ *
+ * The goal of this hook is to provide insights about a roundabout using extra information inserted in the JSON source
+ * provided to Lunatic.
+ *
+ * For instance
+ *
+ * ```
+ * {
+ *    "multimode": {
+ *         "questionnaire": {
+ *             "rules": {
+ *                 "IS_MOVED": {
+ *                     "type": "VTL",
+ *                     "value": "nvl(HABITEZ_VOUS_ICI, true)"
+ *                 },
+ *             }
+ *         },
+ *         "leaf": {
+ *             "source": "id-roundabout-in-questionnaire",
+ *             "rules": {
+ *                 "IS_MOVED": {
+ *                     "type": "VTL",
+ *                     "value": "nvl(PRENOM_HABITE_PLUS_LA, false)"
+ *                 },
+ *             }
+ *         }
+ *     },
+ * }
+ * ```
+ *
+ * Run the expression to check if rules are true or false. A rule is considered as true if at least one expression is evaluated to true
+ *
+ * ```
+ * {
+ * 		"IS_MOVED": true
+ * }
+ * ```
+ */
+export declare function useMultiMode(source: LunaticSource, store: LunaticVariablesStore): {
+    getMultiMode: () => {
+        [k: string]: boolean;
+    };
+};

package/hooks/useMultiMode.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMultiMode = useMultiMode;
+const react_1 = require("react");
+const getArticulation_1 = require("../utils/getArticulation");
+const number_1 = require("../utils/number");
+/**
+ * Retrieve the multimode state
+ *
+ * ## Why this hook
+ *
+ * The goal of this hook is to provide insights about a roundabout using extra information inserted in the JSON source
+ * provided to Lunatic.
+ *
+ * For instance
+ *
+ * ```
+ * {
+ *    "multimode": {
+ *         "questionnaire": {
+ *             "rules": {
+ *                 "IS_MOVED": {
+ *                     "type": "VTL",
+ *                     "value": "nvl(HABITEZ_VOUS_ICI, true)"
+ *                 },
+ *             }
+ *         },
+ *         "leaf": {
+ *             "source": "id-roundabout-in-questionnaire",
+ *             "rules": {
+ *                 "IS_MOVED": {
+ *                     "type": "VTL",
+ *                     "value": "nvl(PRENOM_HABITE_PLUS_LA, false)"
+ *                 },
+ *             }
+ *         }
+ *     },
+ * }
+ * ```
+ *
+ * Run the expression to check if rules are true or false. A rule is considered as true if at least one expression is evaluated to true
+ *
+ * ```
+ * {
+ * 		"IS_MOVED": true
+ * }
+ * ```
+ */
+function useMultiMode(source, store) {
+    const getMultiMode = (0, react_1.useCallback)(() => {
+        if (!source.multimode) {
+            return {};
+        }
+        const roundabout = (0, getArticulation_1.findComponentById)(source.components, source.multimode.leaf.source);
+        const keys = new Set([
+            ...Object.keys(source.multimode.questionnaire.rules),
+            ...Object.keys(source.multimode.leaf.rules),
+        ]);
+        const iterations = (0, number_1.forceInt)(store.run(roundabout?.iterations.value ?? '0'));
+        return Object.fromEntries(Array.from(keys).map((key) => {
+            // Check the value at questionnaire level
+            const questionnaireExpression = source.multimode?.questionnaire.rules[key];
+            if (questionnaireExpression &&
+                store.run(questionnaireExpression.value)) {
+                return [key, true];
+            }
+            const leafExpression = source.multimode?.leaf.rules[key];
+            // There is no expression for the leaf
+            if (!leafExpression) {
+                return [key, false];
+            }
+            for (let i = 0; i < iterations; i++) {
+                if (store.run(leafExpression.value, { iteration: [i] })) {
+                    return [key, true];
+                }
+            }
+            return [key, false];
+        }));
+    }, [source, store]);
+    return {
+        getMultiMode,
+    };
+}
+//# sourceMappingURL=useMultiMode.js.map

package/hooks/useMultiMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiMode.js","sourceRoot":"","sources":["../src/hooks/useMultiMode.ts"],"names":[],"mappings":";;AAgDA,oCAqDC;AAnGD,iCAAoC;AACpC,8DAA6D;AAC7D,4CAA2C;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,SAAgB,YAAY,CAC3B,MAAqB,EACrB,KAA4B;IAE5B,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACrC,IAAI,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC;YACvB,OAAO,EAAE,CAAC;QACX,CAAC;QAED,MAAM,UAAU,GAAG,IAAA,mCAAiB,EACnC,MAAM,CAAC,UAAU,EACjB,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAC5B,CAAC;QAEF,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC;YACpB,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC;YACpD,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;SAC3C,CAAC,CAAC;QACH,MAAM,UAAU,GAAG,IAAA,iBAAQ,EAAC,KAAK,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,CAAC,KAAK,IAAI,GAAG,CAAC,CAAC,CAAC;QAE5E,OAAO,MAAM,CAAC,WAAW,CACxB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YAC5B,yCAAyC;YACzC,MAAM,uBAAuB,GAC5B,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC5C,IACC,uBAAuB;gBACvB,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,CAAC,EACvC,CAAC;gBACF,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;YACpB,CAAC;YAED,MAAM,cAAc,GAAG,MAAM,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAEzD,sCAAsC;YACtC,IAAI,CAAC,cAAc,EAAE,CAAC;gBACrB,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;YACrB,CAAC;YAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,EAAE,CAAC;gBACrC,IAAI,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;oBACzD,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;gBACpB,CAAC;YACF,CAAC;YAED,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QACrB,CAAC,CAAC,CACF,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpB,OAAO;QACN,YAAY;KACZ,CAAC;AACH,CAAC"}

package/index.d.ts

@@ -7,6 +7,7 @@ export { ModalControls } from './components/shared/ModalControls/ModalControls';
 export { Button } from './components/shared/Button/Button';
 export { LunaticComponents } from './components/LunaticComponents';
 export { useLunatic } from './use-lunatic/use-lunatic';
+export { getArticulation } from './utils/getArticulation';
 export { MDLabel } from './components/shared/MDLabel/MDLabel';
 export type { LunaticComponentDefinition, LunaticControl, LunaticData, LunaticValues, LunaticError, LunaticExpression, LunaticVariable, LunaticCollectedValue, LunaticStateVariable, LunaticState, LunaticPager, LunaticOptions, LunaticChangesHandler, } from './use-lunatic/type';
 export type { LunaticComponentProps, LunaticExtraProps, } from './components/type';

package/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VTLInterpretationError = exports.VTLMissingDependency = exports.VTLExpressionError = exports.VTLMissingDependencies = exports.MDLabel = exports.useLunatic = exports.LunaticComponents = exports.Button = exports.ModalControls = exports.components = void 0;
+exports.VTLInterpretationError = exports.VTLMissingDependency = exports.VTLExpressionError = exports.VTLMissingDependencies = exports.MDLabel = exports.getArticulation = exports.useLunatic = exports.LunaticComponents = exports.Button = exports.ModalControls = exports.components = void 0;
 /**
  * We should remove this export to avoid `import * as lunatic from "@inseefr/lunatic"` in orchestrators
  *  but this is a breaking change
@@ -15,6 +15,8 @@ var LunaticComponents_1 = require("./components/LunaticComponents");
 Object.defineProperty(exports, "LunaticComponents", { enumerable: true, get: function () { return LunaticComponents_1.LunaticComponents; } });
 var use_lunatic_1 = require("./use-lunatic/use-lunatic");
 Object.defineProperty(exports, "useLunatic", { enumerable: true, get: function () { return use_lunatic_1.useLunatic; } });
+var getArticulation_1 = require("./utils/getArticulation");
+Object.defineProperty(exports, "getArticulation", { enumerable: true, get: function () { return getArticulation_1.getArticulation; } });
 var MDLabel_1 = require("./components/shared/MDLabel/MDLabel");
 Object.defineProperty(exports, "MDLabel", { enumerable: true, get: function () { return MDLabel_1.MDLabel; } });
 // Export errors (useful for typeof)

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,gDAA6D;AAApD,qGAAA,OAAO,OAAc;AAC9B,iFAAgF;AAAvE,8GAAA,aAAa,OAAA;AACtB,4DAA2D;AAAlD,gGAAA,MAAM,OAAA;AAEf,oEAAmE;AAA1D,sHAAA,iBAAiB,OAAA;AAC1B,yDAAuD;AAA9C,yGAAA,UAAU,OAAA;AAEnB,+DAA8D;AAArD,kGAAA,OAAO,OAAA;AAyBhB,oCAAoC;AACpC,iEAKgD;AAJ/C,gHAAA,sBAAsB,OAAA;AACtB,4GAAA,kBAAkB,OAAA;AAClB,8GAAA,oBAAoB,OAAA;AACpB,gHAAA,sBAAsB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["src/index.ts"],"names":[],"mappings":";;;AAAA;;;GAGG;AACH,gDAA6D;AAApD,qGAAA,OAAO,OAAc;AAC9B,iFAAgF;AAAvE,8GAAA,aAAa,OAAA;AACtB,4DAA2D;AAAlD,gGAAA,MAAM,OAAA;AAEf,oEAAmE;AAA1D,sHAAA,iBAAiB,OAAA;AAC1B,yDAAuD;AAA9C,yGAAA,UAAU,OAAA;AACnB,2DAA0D;AAAjD,kHAAA,eAAe,OAAA;AAExB,+DAA8D;AAArD,kGAAA,OAAO,OAAA;AAyBhB,oCAAoC;AACpC,iEAKgD;AAJ/C,gHAAA,sBAAsB,OAAA;AACtB,4GAAA,kBAAkB,OAAA;AAClB,8GAAA,oBAAoB,OAAA;AACpB,gHAAA,sBAAsB,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@inseefr/lunatic",
-    "version": "3.6.13",
+    "version": "3.6.15-rc.0",
     "description": "Library of questionnaire components",
     "repository": {
         "type": "git",
@@ -225,6 +225,7 @@
         "src/hooks/useKeyboardKey.ts",
         "src/hooks/useListKeyboardHandler.ts",
         "src/hooks/useLocalStorage.ts",
+        "src/hooks/useMultiMode.ts",
         "src/hooks/useRefSync.ts",
         "src/i18n/build-dictionary.ts",
         "src/i18n/dictionary.ts",
@@ -235,6 +236,9 @@
         "src/json.d.ts",
         "src/stories/accordion/accordion.stories.tsx",
         "src/stories/accordion/source.json",
+        "src/stories/behaviour/articulation/articulation.stories.tsx",
+        "src/stories/behaviour/articulation/multimode.stories.tsx",
+        "src/stories/behaviour/articulation/roundabout.json",
         "src/stories/behaviour/cleaning/cleaning.stories.tsx",
         "src/stories/behaviour/cleaning/source-loop-scopes.json",
         "src/stories/behaviour/cleaning/source-loop.json",
@@ -431,6 +435,7 @@
         "src/utils/dom.ts",
         "src/utils/env.ts",
         "src/utils/function.ts",
+        "src/utils/getArticulation.ts",
         "src/utils/is-element.ts",
         "src/utils/logger.ts",
         "src/utils/number.spec.ts",
@@ -1323,6 +1328,9 @@
         "esm/hooks/useLocalStorage.d.ts",
         "esm/hooks/useLocalStorage.js",
         "esm/hooks/useLocalStorage.js.map",
+        "esm/hooks/useMultiMode.d.ts",
+        "esm/hooks/useMultiMode.js",
+        "esm/hooks/useMultiMode.js.map",
         "esm/hooks/useRefSync.d.ts",
         "esm/hooks/useRefSync.js",
         "esm/hooks/useRefSync.js.map",
@@ -1577,6 +1585,9 @@
         "esm/utils/function.d.ts",
         "esm/utils/function.js",
         "esm/utils/function.js.map",
+        "esm/utils/getArticulation.d.ts",
+        "esm/utils/getArticulation.js",
+        "esm/utils/getArticulation.js.map",
         "esm/utils/is-element.d.ts",
         "esm/utils/is-element.js",
         "esm/utils/is-element.js.map",
@@ -1649,6 +1660,9 @@
         "hooks/useLocalStorage.d.ts",
         "hooks/useLocalStorage.js",
         "hooks/useLocalStorage.js.map",
+        "hooks/useMultiMode.d.ts",
+        "hooks/useMultiMode.js",
+        "hooks/useMultiMode.js.map",
         "hooks/useRefSync.d.ts",
         "hooks/useRefSync.js",
         "hooks/useRefSync.js.map",
@@ -1904,6 +1918,9 @@
         "utils/function.d.ts",
         "utils/function.js",
         "utils/function.js.map",
+        "utils/getArticulation.d.ts",
+        "utils/getArticulation.js",
+        "utils/getArticulation.js.map",
         "utils/is-element.d.ts",
         "utils/is-element.js",
         "utils/is-element.js.map",
@@ -2017,6 +2034,7 @@
         "prettier": "^3.3.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-hot-keys": "^2.7.3",
         "storybook": "^8.2.9",
         "tailwindcss": "^4.1.4",
         "tsx": "^4.19.1",

package/src/components/shared/Combobox/ComboboxContent.tsx

@@ -1,5 +1,9 @@
-import type { KeyboardEvent } from 'react';
-import React, { type PropsWithChildren, useCallback, useRef } from 'react';
+import {
+	type KeyboardEvent,
+	type PropsWithChildren,
+	useCallback,
+	useRef,
+} from 'react';
 import classnames from 'classnames';
 import { KEYBOARD_KEY_CODES } from './constants';
 import { ComboboxContentBox } from './ComboboxContentBox';
@@ -37,15 +41,12 @@ export function ComboboxContent({
 	const handleKeyDown = useCallback(
 		function (e: KeyboardEvent) {
 			const { key } = e;
-			e.stopPropagation();
 			switch (key) {
 				case KEYBOARD_KEY_CODES.Escape:
 				case KEYBOARD_KEY_CODES.Enter:
 				case KEYBOARD_KEY_CODES.Tab:
 					ref.current?.focus();
 					break;
-				default:
-				// e.preventDefault();
 			}
 			onKeyDown(key);
 		},

package/src/hooks/useMultiMode.ts

@@ -0,0 +1,102 @@
+import type { LunaticVariablesStore } from '../use-lunatic/commons/variables/lunatic-variables-store';
+import type { LunaticSource } from '../type.source';
+import { useCallback } from 'react';
+import { findComponentById } from '../utils/getArticulation';
+import { forceInt } from '../utils/number';
+
+/**
+ * Retrieve the multimode state
+ *
+ * ## Why this hook
+ *
+ * The goal of this hook is to provide insights about a roundabout using extra information inserted in the JSON source
+ * provided to Lunatic.
+ *
+ * For instance
+ *
+ * ```
+ * {
+ *    "multimode": {
+ *         "questionnaire": {
+ *             "rules": {
+ *                 "IS_MOVED": {
+ *                     "type": "VTL",
+ *                     "value": "nvl(HABITEZ_VOUS_ICI, true)"
+ *                 },
+ *             }
+ *         },
+ *         "leaf": {
+ *             "source": "id-roundabout-in-questionnaire",
+ *             "rules": {
+ *                 "IS_MOVED": {
+ *                     "type": "VTL",
+ *                     "value": "nvl(PRENOM_HABITE_PLUS_LA, false)"
+ *                 },
+ *             }
+ *         }
+ *     },
+ * }
+ * ```
+ *
+ * Run the expression to check if rules are true or false. A rule is considered as true if at least one expression is evaluated to true
+ *
+ * ```
+ * {
+ * 		"IS_MOVED": true
+ * }
+ * ```
+ */
+export function useMultiMode(
+	source: LunaticSource,
+	store: LunaticVariablesStore
+) {
+	const getMultiMode = useCallback(() => {
+		if (!source.multimode) {
+			return {};
+		}
+
+		const roundabout = findComponentById(
+			source.components,
+			source.multimode.leaf.source
+		);
+
+		const keys = new Set([
+			...Object.keys(source.multimode.questionnaire.rules),
+			...Object.keys(source.multimode.leaf.rules),
+		]);
+		const iterations = forceInt(store.run(roundabout?.iterations.value ?? '0'));
+
+		return Object.fromEntries(
+			Array.from(keys).map((key) => {
+				// Check the value at questionnaire level
+				const questionnaireExpression =
+					source.multimode?.questionnaire.rules[key];
+				if (
+					questionnaireExpression &&
+					store.run(questionnaireExpression.value)
+				) {
+					return [key, true];
+				}
+
+				const leafExpression = source.multimode?.leaf.rules[key];
+
+				// There is no expression for the leaf
+				if (!leafExpression) {
+					return [key, false];
+				}
+
+				for (let i = 0; i < iterations; i++) {
+					if (store.run(leafExpression.value, { iteration: [i] })) {
+						return [key, true];
+					}
+				}
+
+				return [key, false];
+			})
+		);
+	}, [source, store]);
+
+	return {
+		getMultiMode,
+	};
+}

package/src/index.ts

@@ -8,6 +8,7 @@ export { Button } from './components/shared/Button/Button';
 
 export { LunaticComponents } from './components/LunaticComponents';
 export { useLunatic } from './use-lunatic/use-lunatic';
+export { getArticulation } from './utils/getArticulation';
 
 export { MDLabel } from './components/shared/MDLabel/MDLabel';
 

package/src/stories/behaviour/articulation/articulation.stories.tsx

@@ -0,0 +1,90 @@
+import source from './roundabout.json';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useMemo, useState } from 'react';
+import { getArticulation } from '../../../utils/getArticulation';
+import { Orchestrator } from '../../utils/Orchestrator';
+
+type Source = Parameters<typeof getArticulation>[0];
+type Data = Parameters<typeof getArticulation>[1];
+
+type Props = {
+	source: Source;
+	data: Data;
+};
+
+function StoryComponent({ source, data }: Props) {
+	const [page, setPage] = useState(null as null | string);
+	const gotoNav = () => setPage(null);
+	const { items } = useMemo(
+		() => getArticulation(source, data),
+		[source, data]
+	);
+
+	if (page) {
+		return (
+			<div>
+				{page}
+				<button onClick={gotoNav}>&lt; Revenir à l'articulation</button>
+				{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+				{/*/ @ts-ignore */}
+				<Orchestrator source={source} data={data} initialPage={page} />
+			</div>
+		);
+	}
+
+	const progressLabel = (n: number) => {
+		if (n === -1) {
+			return 'Commencer';
+		}
+		if (n === 0) {
+			return 'Continuer';
+		}
+		return 'Complété';
+	};
+
+	return (
+		<div className="space-y-4">
+			<h2 className="font-bold text-2xl">Articulation</h2>
+			<table className="table">
+				<thead>
+					<tr>
+						{items[0].cells.map((cell, k) => (
+							<th key={k}>{cell.label}</th>
+						))}
+						<th>Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{items.map((item, k) => (
+						<tr key={k}>
+							{item.cells.map((cell, kk) => (
+								<td key={kk}>{cell.value}</td>
+							))}
+							<td>
+								<button onClick={() => console.log('ToDo')} className="btn">
+									{progressLabel(item.progress)}
+								</button>
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+const meta: Meta<typeof StoryComponent> = {
+	title: 'Behaviour/Articulation',
+	component: StoryComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StoryComponent>;
+
+export const Basic: Story = {
+	args: {
+		source: source as Source,
+		data: {},
+	},
+};

package/src/stories/behaviour/articulation/multimode.stories.tsx

@@ -0,0 +1,19 @@
+import source from './roundabout.json';
+
+import { Meta, StoryObj } from '@storybook/react';
+import { Orchestrator } from '../../utils/Orchestrator';
+
+const meta: Meta<typeof Orchestrator> = {
+	title: 'Behaviour/Articulation/MultiMode',
+	component: Orchestrator,
+};
+
+export default meta;
+type Story = StoryObj<typeof Orchestrator>;
+
+export const Default: Story = {
+	args: {
+		source,
+		multiMode: true,
+	},
+};