@inseefr/lunatic 3.6.6 → 3.6.8-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@inseefr/lunatic",
-    "version": "3.6.6",
+    "version": "3.6.8-rc.0",
     "description": "Library of questionnaire components",
     "repository": {
         "type": "git",
@@ -70,6 +70,8 @@
         "src/components/Loop/Loop.spec.tsx",
         "src/components/Loop/Loop.tsx",
         "src/components/Loop/constant.ts",
+        "src/components/Loop/utils.test.ts",
+        "src/components/Loop/utils.ts",
         "src/components/LunaticComponents.tsx",
         "src/components/PairwiseLinks/PairwiseLinks.tsx",
         "src/components/Question/Question.tsx",
@@ -238,11 +240,13 @@
         "src/stories/behaviour/cleaning/source-loop.json",
         "src/stories/behaviour/cleaning/source.json",
         "src/stories/behaviour/controls/controls.stories.tsx",
+        "src/stories/behaviour/controls/data-standalone-loop.json",
         "src/stories/behaviour/controls/source-boucles-n.json",
-        "src/stories/behaviour/controls/source-loop.json",
+        "src/stories/behaviour/controls/source-roster-for-loop.json",
         "src/stories/behaviour/controls/source-roundabout.json",
         "src/stories/behaviour/controls/source-simple-numeric.json",
         "src/stories/behaviour/controls/source-simple.json",
+        "src/stories/behaviour/controls/source-standalone-loop.json",
         "src/stories/behaviour/disabled/disabled.stories.tsx",
         "src/stories/behaviour/disabled/source.json",
         "src/stories/behaviour/filter/filter.stories.tsx",
@@ -411,6 +415,7 @@
         "src/use-lunatic/reducer/reducer.ts",
         "src/use-lunatic/reducer/reducerInitializer.tsx",
         "src/use-lunatic/type.ts",
+        "src/use-lunatic/use-lunatic-bug.test.ts",
         "src/use-lunatic/use-lunatic.test.ts",
         "src/use-lunatic/use-lunatic.ts",
         "src/utils/array.spec.ts",
@@ -535,6 +540,9 @@
         "components/Loop/constant.d.ts",
         "components/Loop/constant.js",
         "components/Loop/constant.js.map",
+        "components/Loop/utils.d.ts",
+        "components/Loop/utils.js",
+        "components/Loop/utils.js.map",
         "components/LunaticComponents.d.ts",
         "components/LunaticComponents.js",
         "components/LunaticComponents.js.map",
@@ -958,6 +966,9 @@
         "esm/components/Loop/constant.d.ts",
         "esm/components/Loop/constant.js",
         "esm/components/Loop/constant.js.map",
+        "esm/components/Loop/utils.d.ts",
+        "esm/components/Loop/utils.js",
+        "esm/components/Loop/utils.js.map",
         "esm/components/LunaticComponents.d.ts",
         "esm/components/LunaticComponents.js",
         "esm/components/LunaticComponents.js.map",
@@ -1976,7 +1987,8 @@
     },
     "devDependencies": {
         "@eslint/js": "^9.9.0",
-        "@playwright/test": "^1.46.0",
+        "@playwright/browser-chromium": "^1.51.1",
+        "@playwright/test": "^1.52.0",
         "@storybook/addon-a11y": "^8.2.9",
         "@storybook/addon-essentials": "^8.2.9",
         "@storybook/addon-interactions": "^8.2.9",

package/src/components/Loop/Loop.tsx

@@ -1,4 +1,4 @@
-import { type PropsWithChildren, useCallback, useState } from 'react';
+import { type PropsWithChildren } from 'react';
 import D from '../../i18n';
 import { times } from '../../utils/array';
 import { LunaticComponents } from '../LunaticComponents';
@@ -13,45 +13,16 @@ import {
 	getComponentErrors,
 } from '../shared/ComponentErrors/ComponentErrors';
 import type { LunaticError } from '../../use-lunatic/type';
+import { useLoopUtils } from './utils';
 
 /**
  * Loop without specific markup (stack of subcomponents)
  */
-export function Loop({
-	lines,
-	iterations,
-	value,
-	handleChanges,
-	getComponents,
-	errors,
-	...props
-}: LunaticComponentProps<'Loop'>) {
-	const min = lines?.min ?? 0;
-	const max = lines?.max ?? Infinity;
-	const [nbRows, setNbRows] = useState(() => {
-		return Math.max(iterations, min);
-	});
-	const addRow = useCallback(() => {
-		if (nbRows < max) {
-			setNbRows(nbRows + 1);
-		}
-	}, [max, nbRows]);
-	const removeRow = useCallback(() => {
-		if (nbRows > 1) {
-			const newNbRows = nbRows - 1;
-			setNbRows(newNbRows);
-			// Downsize all variables by 1
-			const newResponses = Object.entries(value).map(([k, v]) => {
-				return {
-					name: k,
-					value: v?.filter((_, i) => i < newNbRows),
-				};
-			});
-			handleChanges(newResponses);
-		}
-	}, [nbRows, handleChanges, value]);
+export function Loop(props: LunaticComponentProps<'Loop'>) {
+	const { min, max, nbRows, addRow, removeRow } = useLoopUtils(props);
+	const { getComponents, errors } = props;
 
-	if (nbRows <= 0) {
+	if (nbRows === 0) {
 		return null;
 	}
 

package/src/components/Loop/utils.test.ts

@@ -0,0 +1,61 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { useLoopUtils } from './utils';
+
+describe('useLoopUtils()', () => {
+	it('should handleChange where values have not the right size', () => {
+		const mockHandleChange = vi.fn();
+
+		renderHook(() =>
+			useLoopUtils({
+				handleChanges: mockHandleChange,
+				iterations: 5,
+				lines: { min: 2, max: 10 },
+				value: { NAME: ['John', 'Doe'], AGE: [10, 20] },
+			})
+		);
+
+		expect(mockHandleChange).toHaveBeenCalledOnce();
+		expect(mockHandleChange).toHaveBeenCalledWith([
+			{ name: 'NAME', value: ['John', 'Doe', null, null, null] },
+			{ name: 'AGE', value: [10, 20, null, null, null] },
+		]);
+	});
+
+	it('should NOT handleChange where values have the right size', () => {
+		const mockHandleChange = vi.fn();
+
+		renderHook(() =>
+			useLoopUtils({
+				handleChanges: mockHandleChange,
+				iterations: 2,
+				lines: { min: 2, max: 10 },
+				value: { NAME: ['John', 'Doe'], AGE: [10, 20] },
+			})
+		);
+
+		expect(mockHandleChange).toHaveBeenCalledTimes(0);
+	});
+
+	it('should handleChange with iteration when adding row', () => {
+		const mockHandleChange = vi.fn();
+
+		// Given
+		const { result } = renderHook(() =>
+			useLoopUtils({
+				handleChanges: mockHandleChange,
+				iterations: 2,
+				lines: { min: 2, max: 10 },
+				value: { NAME: ['John', 'Doe'], AGE: [10, 20] },
+			})
+		);
+		// When
+		result.current.addRow();
+
+		// Then
+		expect(mockHandleChange).toHaveBeenCalledWith([
+			{ name: 'NAME', value: null, iteration: [2] },
+			{ name: 'AGE', value: null, iteration: [2] },
+		]);
+	});
+});

package/src/components/Loop/utils.ts

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useState } from 'react';
+import { LunaticComponentProps } from '../type';
+import { resizeArrayVariable } from '../../use-lunatic/reducer/commons';
+
+const DEFAULT_MIN_ROWS = 1;
+const DEFAULT_MAX_ROWS = 12;
+
+export const useLoopUtils = (
+	props: Pick<
+		LunaticComponentProps<'RosterForLoop'> | LunaticComponentProps<'Loop'>,
+		'lines' | 'iterations' | 'value' | 'handleChanges'
+	>
+) => {
+	const { lines, iterations, value: valueMap, handleChanges } = props;
+	const min = lines?.min ?? DEFAULT_MIN_ROWS;
+	const max = lines?.max ?? DEFAULT_MAX_ROWS;
+	const [nbRows, setNbRows] = useState(
+		Math.max(min, iterations ?? DEFAULT_MIN_ROWS)
+	);
+
+	/**
+	 * For Loop & rosterForLoop,
+	 * Value can be  inconsistent i.e the value has not the right size
+	 * The function add null values to the end of value (array), only when component is mount
+	 *
+	 * This the case when size of value is defined by VTL (but the value is not triggered by change)
+	 * - ex: external variable indicate the size of variable
+	 * - ex: min != max
+	 *
+	 * Improvment: do some kind of dynamic resizing and remove this useEffect.
+	 * Variables must be consistent in variable-store.
+	 */
+	useEffect(() => {
+		const initialResponses = Object.entries(valueMap)
+			.filter(([, v]) => (v?.length ?? 0) < nbRows)
+			.map(([k, v]) => ({
+				name: k,
+				value: resizeArrayVariable(v, nbRows, null),
+			}));
+		if (initialResponses.length > 0) handleChanges(initialResponses);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const addRow = useCallback(() => {
+		if (nbRows < max) {
+			const newNbRows = nbRows + 1;
+			setNbRows(newNbRows);
+			const newResponses = Object.entries(valueMap).map(([k]) => ({
+				name: k,
+				value: null,
+				iteration: [nbRows],
+			}));
+			handleChanges(newResponses);
+		}
+	}, [max, nbRows, valueMap, handleChanges]);
+
+	const removeRow = useCallback(() => {
+		if (nbRows <= min) {
+			return;
+		}
+		const newNbRows = nbRows - 1;
+		setNbRows(newNbRows);
+		// Downsize all variables by 1
+		const newResponses = Object.entries(valueMap).map(([k, v]) => {
+			return {
+				name: k,
+				value: v?.filter((_, i) => i < newNbRows),
+			};
+		});
+		handleChanges(newResponses);
+	}, [nbRows, min, valueMap, handleChanges]);
+
+	return { min, max, nbRows, addRow, removeRow };
+};

package/src/components/RosterForLoop/RosterForLoop.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useState } from 'react';
+import { Fragment } from 'react';
 import type { LunaticComponentProps } from '../type';
 import { Table, Tbody, Td, Tr, TableHeader } from '../shared/Table';
 import { times } from '../../utils/array';
@@ -9,9 +9,7 @@ import {
 	getComponentErrors,
 } from '../shared/ComponentErrors/ComponentErrors';
 import { CustomLoop } from '../Loop/Loop';
-
-const DEFAULT_MIN_ROWS = 1;
-const DEFAULT_MAX_ROWS = 12;
+import { useLoopUtils } from '../Loop/utils';
 
 /**
  * Loop displayed as a table
@@ -19,46 +17,18 @@ const DEFAULT_MAX_ROWS = 12;
 export const RosterForLoop = (
 	props: LunaticComponentProps<'RosterForLoop'>
 ) => {
+	const { min, max, nbRows, addRow, removeRow } = useLoopUtils(props);
 	const {
-		value: valueMap,
-		lines,
 		errors,
-		handleChanges,
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		declarations,
 		header,
-		iterations,
 		id,
 		getComponents,
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		label,
 		...otherProps // These props will be passed down to the child components
 	} = props;
-	const min = lines?.min ?? DEFAULT_MIN_ROWS;
-	const max = lines?.max ?? DEFAULT_MAX_ROWS;
-	const [nbRows, setNbRows] = useState(Math.max(min, iterations));
-
-	const addRow = useCallback(() => {
-		if (nbRows < max) {
-			setNbRows(nbRows + 1);
-		}
-	}, [max, nbRows]);
-
-	const removeRow = useCallback(() => {
-		if (nbRows <= min) {
-			return;
-		}
-		const newNbRows = nbRows - 1;
-		setNbRows(newNbRows);
-		// Downsize all variables by 1
-		const newResponses = Object.entries(valueMap).map(([k, v]) => {
-			return {
-				name: k,
-				value: v?.filter((_, i) => i < newNbRows),
-			};
-		});
-		handleChanges(newResponses);
-	}, [nbRows, min, valueMap, handleChanges]);
 
 	if (nbRows === 0) {
 		return null;

package/src/stories/behaviour/controls/controls.stories.tsx

@@ -5,7 +5,9 @@ import {
 } from '../../utils/Orchestrator';
 import simple from './source-simple.json';
 import simpleNum from './source-simple-numeric.json';
-import sourceLoop from './source-loop.json';
+import sourceRosterForLoop from './source-roster-for-loop.json';
+import sourceStandaloneLoop from './source-standalone-loop.json';
+import dataStandaloneLoop from './data-standalone-loop.json';
 import sourceRoundabout from './source-roundabout.json';
 import boucleNTabDynamique from './source-boucles-n.json';
 
@@ -38,9 +40,16 @@ export const SimpleNum: OrchestratorStory = {
 
 export const LinkedLoop: OrchestratorStory = {};
 
-export const Loop: OrchestratorStory = {
+export const RosterForLoop: OrchestratorStory = {
 	args: {
-		source: sourceLoop,
+		source: sourceRosterForLoop,
+	},
+};
+
+export const StandaloneLoop: OrchestratorStory = {
+	args: {
+		source: sourceStandaloneLoop,
+		data: dataStandaloneLoop,
 	},
 };
 

package/src/stories/behaviour/controls/data-standalone-loop.json

@@ -0,0 +1,17 @@
+{
+	"EXTERNAL": {
+		"NIR": ["23456", "23456", "23456", "23456", "23456", "12345"],
+		"CODE_CC": ["CODE", "CODE", "CODE", "CODE", "CODE", "CODE"],
+		"NBSAL_INT": "6",
+		"LIBELLE_CC": ["LIB CC", "LIB CC", "LIB CC", "LIB CC", "LIB CC", "LIB CC"],
+		"NUM_ORDRE_SALARIE": ["1", "2", "3", "4", "5", "6"],
+		"NOM_COMPLET_SALARIE": [
+			"THREEPWOOD GUYBRUSH",
+			"LINK",
+			"JANE DOE",
+			"JOHN DOE",
+			"IL FAIT CHAUD",
+			"POISSON STEVE"
+		]
+	}
+}