@inseefr/lunatic 3.4.10 → 3.5.0-rc.0

package/src/hooks/useArticulation.ts

@@ -0,0 +1,124 @@
+import type {
+	ComponentDefinition,
+	ComponentRoundaboutDefinition,
+	LunaticSource,
+} from '../type.source';
+import type { LunaticData } from '../use-lunatic/type';
+import { reducerInitializer } from '../use-lunatic/reducer/reducerInitializer';
+import { type ReactNode, useMemo } from 'react';
+import { times } from '../utils/array';
+import { forceInt } from '../utils/number';
+
+type ArticulationItem = {
+	label: string;
+	value: string;
+};
+
+type Articulation = {
+	source: string;
+	items: ArticulationItem[];
+};
+
+type Item = {
+	cells: {
+		label: string;
+		value: ReactNode;
+		page?: string;
+	}[];
+	progress: number; // -1: not completed, 0: started, 1: finished
+};
+
+/**
+ * Hook to get articulation 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
+ *
+ * ```
+ *  "articulation": {
+ *    "source": "roundabout",
+ *    "items": [
+ *      {
+ *        "label": "Prénom",
+ *        "value": "PRENOMS"
+ *      },
+ *      {
+ *        "label": "Sexe",
+ *        "value": "if SEXE = \"H\" then \"Homme\" else \"Femme\""
+ *      },
+ *      {
+ *        "label": "Age",
+ *        "value": "cast(AGE, string) || \" ans\""
+ *      }
+ *    ]
+ *  },
+ * ```
+ *
+ * - source is the ID of the roundabout component
+ * - items define the field to extract from the roundabout data
+ */
+export function useArticulation(
+	source: LunaticSource & { articulation: Articulation },
+	data: LunaticData
+): { items: Item[] } {
+	const roundabout = useMemo(
+		() => findComponentById(source.components, source.articulation.source),
+		[source]
+	);
+	const { variables } = useMemo(
+		() => reducerInitializer({ source, data }),
+		[source, data]
+	);
+
+	const iterations = useMemo(
+		() => forceInt(variables.run(roundabout?.iterations.value ?? '0')),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[source, data]
+	);
+
+	const rows = useMemo(() => {
+		return times(iterations, (k) =>
+			source.articulation.items.map((item) => ({
+				label: item.label,
+				value: variables.run(item.value, { iteration: [k] }) as ReactNode,
+			}))
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [source, data, iterations, roundabout?.progressVariable]);
+
+	if (!roundabout) {
+		return {
+			items: [],
+		};
+	}
+
+	return {
+		items: rows.map((row, k) => ({
+			cells: row,
+			progress: forceInt(variables.get(roundabout.progressVariable, [k]) ?? -1),
+			page: roundabout.page ? `${roundabout.page}.1#${k + 1}` : '1',
+		})),
+	};
+}
+
+function findComponentById(
+	components: ComponentDefinition[],
+	id: string
+): (ComponentRoundaboutDefinition & { page?: string }) | null {
+	for (const c of components) {
+		if ('id' in c && c.id === id && c.componentType === 'Roundabout') {
+			return c;
+		}
+		if ('components' in c) {
+			const child = findComponentById(c.components, id);
+			if (child) {
+				return child;
+			}
+		}
+	}
+	return null;
+}

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

@@ -0,0 +1,105 @@
+import Orchestrator from '../../utils/orchestrator';
+import source from './roundabout.json';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { useArticulation } from '../../../hooks/useArticulation';
+
+type Source = Parameters<typeof useArticulation>[0];
+type Data = Parameters<typeof useArticulation>[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 } = useArticulation(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>
+			<h2>Articulation</h2>
+			<table style={{ borderCollapse: 'collapse' }}>
+				<thead>
+					<tr>
+						{items[0].cells.map((cell, k) => (
+							<th
+								style={{ border: 'solid 1px #00000024', padding: '.5rem 1rem' }}
+								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}
+									style={{
+										border: 'solid 1px #00000024',
+										padding: '.5rem 1rem',
+									}}
+								>
+									{cell.value}
+								</td>
+							))}
+							<td
+								style={{
+									border: 'solid 1px #00000024',
+									padding: '.5rem 1rem',
+								}}
+							>
+								<button onClick={() => console.log('ToDo')}>
+									{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/roundabout.json

@@ -0,0 +1,348 @@
+{
+	"$schema": "../../../../lunatic-schema.json",
+	"maxPage": "4",
+	"articulation": {
+		"source": "roundabout",
+		"items": [
+			{
+				"label": "Prénom",
+				"value": "PRENOMS"
+			},
+			{
+				"label": "Sexe",
+				"value": "if SEXE = \"H\" then \"Homme\" else \"Femme\""
+			},
+			{
+				"label": "Age",
+				"value": "cast(AGE, string) || \" ans\""
+			}
+		]
+	},
+	"components": [
+		{
+			"id": "how",
+			"componentType": "InputNumber",
+			"mandatory": false,
+			"page": "1",
+			"min": 1,
+			"max": 10,
+			"decimals": 0,
+			"label": {
+				"value": "\"Combien de personnes vivent habituellement à votre adresse ?\"",
+				"type": "VTL|MD"
+			},
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"response": { "name": "NB_HAB" }
+		},
+		{
+			"id": "loop",
+			"componentType": "Loop",
+			"page": "2",
+			"depth": 1,
+			"paginatedLoop": false,
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"loopDependencies": ["NHAB"],
+			"lines": {
+				"min": { "value": "NB_HAB", "type": "VTL" },
+				"max": { "value": "NB_HAB", "type": "VTL" }
+			},
+			"components": [
+				{
+					"id": "prenom",
+					"componentType": "Input",
+					"mandatory": false,
+					"maxLength": 20,
+					"label": {
+						"value": "\"Prénom\"))",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": {
+						"value": "true",
+						"type": "VTL"
+					},
+					"response": { "name": "PRENOMS" }
+				},
+				{
+					"id": "sexe",
+					"componentType": "CheckboxOne",
+					"mandatory": false,
+					"maxLength": 20,
+					"label": {
+						"value": "\"Sexe\"",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": {
+						"value": "true",
+						"type": "VTL"
+					},
+					"options": [
+						{
+							"value": "H",
+							"label": { "value": "\"Homme\"", "type": "VTL|MD" }
+						},
+
+						{
+							"value": "F",
+							"label": { "value": "\"Femme\"", "type": "VTL|MD" }
+						}
+					],
+					"response": { "name": "SEXE" }
+				},
+				{
+					"id": "age",
+					"componentType": "InputNumber",
+					"maxLength": 3,
+					"label": {
+						"value": "\"Age\"",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": {
+						"value": "true",
+						"type": "VTL"
+					},
+					"response": { "name": "AGE" }
+				}
+			]
+		},
+		{
+			"id": "roundabout",
+			"componentType": "Roundabout",
+			"page": "3",
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"iterations": { "value": "NB_HAB", "type": "VTL" },
+			"label": { "value": "\"Libellé du rondpoint\"", "type": "VTL" },
+			"locked": true,
+			"progressVariable": "PROGRESS",
+			"item": {
+				"label": {
+					"value": "\"Questions de \" || PRENOMS",
+					"type": "VTL"
+				},
+				"description": {
+					"value": "if AGE > 18 then \"Aller aux question destinées à \" || PRENOMS else PRENOMS || \" n'est pas majeur, il/elle n'a pas à répondre aux questions\"",
+					"type": "VTL"
+				},
+				"disabled": {
+					"value": "AGE < 18",
+					"type": "VTL"
+				}
+			},
+			"controls": [],
+			"components": [
+				{
+					"id": "radio",
+					"componentType": "Radio",
+					"mandatory": false,
+					"page": "3.1",
+					"label": {
+						"value": "\"Connaissez-vous le recensement de la population ?\"",
+						"type": "VTL|MD"
+					},
+
+					"conditionFilter": { "value": "true", "type": "VTL" },
+
+					"options": [
+						{ "value": "1", "label": { "value": "\"oui\"", "type": "VTL|MD" } },
+
+						{ "value": "2", "label": { "value": "\"non\"", "type": "VTL|MD" } }
+					],
+					"response": { "name": "KNOWREC" }
+				},
+				{
+					"id": "jsygk7m7",
+					"componentType": "Subsequence",
+					"page": "3.2",
+					"label": {
+						"value": "\"Deuxième page de questions pour \"|| PRENOMS",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": { "value": "true", "type": "VTL" }
+				},
+				{
+					"id": "sexe",
+					"componentType": "Radio",
+					"page": "3.2",
+					"label": {
+						"value": "\"Sexe\"",
+						"type": "VTL"
+					},
+					"conditionFilter": {
+						"value": "true",
+						"type": "VTL"
+					},
+					"options": [
+						{
+							"value": "1",
+							"label": { "value": "\"Homme\"", "type": "VTL|MD" }
+						},
+						{
+							"value": "2",
+							"label": { "value": "\"Femme\"", "type": "VTL|MD" }
+						}
+					],
+					"response": { "name": "SEXE" }
+				},
+				{
+					"id": "jsygk7m7",
+					"componentType": "Subsequence",
+					"page": "3.3",
+					"label": {
+						"value": "\"Troisième page de questions \" || PRENOMS",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": { "value": "true", "type": "VTL" }
+				},
+				{
+					"id": "kmno1n7m",
+					"componentType": "Input",
+					"maxLength": 30,
+					"page": "3.3",
+					"label": {
+						"value": "\"Dites quelque chose.\"))",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": {
+						"value": "true",
+						"type": "VTL"
+					},
+					"response": { "name": "SOMETHING" }
+				}
+			]
+		},
+		{
+			"id": "seq",
+			"componentType": "Sequence",
+			"label": {
+				"value": "\"Merci !\"",
+				"type": "VTL|MD"
+			},
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"page": "4"
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NB_HAB",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": 2,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "SOMETHING",
+			"values": {
+				"PREVIOUS": [],
+				"COLLECTED": [],
+				"FORCED": [],
+				"EDITED": [],
+				"INPUTTED": []
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "SEXE",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": ["H", "F"],
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "AGE",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": [24, 24],
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "SEXE",
+			"values": {
+				"PREVIOUS": [],
+				"COLLECTED": [],
+				"FORCED": [],
+				"EDITED": [],
+				"INPUTTED": []
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "PRENOMS",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": ["Fanny", "Ines"],
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "KNOWREC",
+			"values": {
+				"PREVIOUS": [],
+				"COLLECTED": [],
+				"FORCED": [],
+				"EDITED": [],
+				"INPUTTED": []
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "PROGRESS",
+			"values": {
+				"PREVIOUS": [],
+				"COLLECTED": [0, -1],
+				"FORCED": [],
+				"EDITED": [],
+				"INPUTTED": []
+			}
+		},
+		{
+			"variableType": "CALCULATED",
+			"name": "PRENOMREF",
+			"expression": { "value": "first_value(PRENOMS over())", "type": "VTL" },
+			"bindingDependencies": ["PRENOMS"],
+			"inFilter": "true"
+		},
+		{
+			"variableType": "CALCULATED",
+			"name": "COMPLETE",
+			"expression": {
+				"value": "not(isnull(KNOWREC)) and not(isnull(SEXE)) and not(isnull(SOMETHING))",
+				"type": "VTL"
+			},
+			"bindingDependencies": ["KNOWREC", "SEXE", "SOMETHING"],
+			"shapeFrom": "PRENOMS",
+			"inFilter": "true"
+		},
+		{
+			"variableType": "CALCULATED",
+			"name": "PARTIAL",
+			"expression": {
+				"value": "not(isnull(KNOWREC)) or not(isnull(SEXE)) or not(isnull(SOMETHING))",
+				"type": "VTL"
+			},
+			"bindingDependencies": ["KNOWREC", "SEXE", "SOMETHING"],
+			"shapeFrom": "PRENOMS",
+			"inFilter": "true"
+		}
+	],
+	"resizing": {
+		"NB_HAB": {
+			"size": "NB_HAB",
+			"variables": ["PRENOMS", "AGE", "SEXE", "SOMETHING", "DATNAIS"]
+		}
+	}
+}

package/src/stories/behaviour/performance/performance.stories.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import Orchestrator from '../../utils/orchestrator';
 import source from './source.json';
 import { generateData } from '../../../tests/utils/lunatic';
 import { times } from '../../../utils/array';
+import Orchestrator from '../../utils/orchestrator';
 
 const stories = {
 	title: 'Behaviour/Performance',

package/src/stories/utils/{SchemaValidator.jsx → SchemaValidator.tsx}

@@ -2,7 +2,7 @@ import Ajv from 'ajv/dist/2020.js';
 import { useMemo } from 'react';
 import LunaticSchema from '../../../lunatic-schema.json';
 
-export function SchemaValidator({ source }) {
+export function SchemaValidator({ source }: { source: any }) {
 	const errors = useMemo(() => {
 		const ajv = new Ajv({
 			removeAdditional: true,

package/src/stories/utils/{orchestrator.jsx → orchestrator.tsx}

@@ -1,3 +1,5 @@
+/* eslint-disable */
+// @ts-nocheck
 import './custom-lunatic.scss';
 import './orchestrator.scss';
 
@@ -7,19 +9,19 @@ import {
 	LunaticComponents,
 	ModalControls,
 	useLunatic,
-} from '../..';
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+} from '../../index.js';
+import { memo, useCallback, useEffect, useState } from 'react';
 
-import { Logger } from '../../utils/logger';
-import { Overview } from './overview';
+import { Logger } from '../../utils/logger.js';
+import { Overview } from './overview.js';
 import { SchemaValidator } from './SchemaValidator.jsx';
 
 const Input = components.Input;
 
-function DevOptions({ goToPage, getData }) {
+function DevOptions({ goToPage, getData }: { goToPage: any; getData: any }) {
 	const [toPage, setToPage] = useState(1);
 
-	function handleChange(_, value) {
+	function handleChange(_, value: any) {
 		setToPage(value);
 	}
 
@@ -33,6 +35,8 @@ function DevOptions({ goToPage, getData }) {
 			</div>
 			<Input
 				id="page-to-jump"
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
 				value={toPage}
 				handleChange={handleChange}
 				min={1}
@@ -89,7 +93,7 @@ function Pager({
 	);
 }
 
-function onLogChange(response, value, args) {
+function onLogChange(response: any, value: any, args: any) {
 	Logger.log('onChange', { response, value, args });
 }
 
@@ -110,7 +114,7 @@ function OrchestratorForStories({
 	missingStrategy = logMissingStrategy,
 	missingShortcut,
 	autoSuggesterLoading,
-	addExternal,
+	// addExternal,
 	preferences,
 	slots,
 	showOverview = false,
@@ -136,7 +140,7 @@ function OrchestratorForStories({
 		pageTag,
 		isFirstPage,
 		isLastPage,
-		waiting,
+		// waiting,
 		overview,
 		compileControls,
 		getData,

package/src/stories/utils/{overview.jsx → overview.tsx}

@@ -1,3 +1,5 @@
+/* eslint-disable */
+// @ts-nocheck
 import { Fragment } from 'react';
 import './overview.scss';
 

package/src/use-lunatic/commons/variables/lunatic-variables-store.ts

@@ -60,7 +60,7 @@ export class LunaticVariablesStore {
 		if (!source.variables) {
 			return store;
 		}
-		// Source data (picked from "variables" in the source.json)s
+		// Source data (picked from "variables" in the source.json)
 		const sourceValues: Record<string, unknown> = {};
 		// Starting data for the form (merged with data.json or injected data)
 		const initialValues: Record<string, unknown> = {};