@inseefr/lunatic 3.5.0 → 3.5.1

package/src/components/Datepicker/DatepickerFields.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import type { LunaticComponentProps } from '../type';
+import { DatepickerField } from './DatepickerField';
+import { LunaticError } from '../../use-lunatic/type';
+
+type CustomProps = Omit<
+	LunaticComponentProps<'Datepicker'>,
+	'response' | 'handleChanges' | 'errors'
+> & {
+	onChange: (s: string | null) => void;
+	errors?: LunaticError[];
+};
+
+export const CustomDatepickerFields = slottableComponent<CustomProps>(
+	'DatepickerFields',
+	(props) => {
+		const {
+			disabled,
+			readOnly,
+			value = '',
+			dateFormat = 'YYYY-MM-DD',
+			id,
+			onChange,
+		} = props;
+
+		const showDay = dateFormat.includes('DD');
+		const showMonth = dateFormat.includes('MM');
+
+		// Raw state, we allow invalid dates to be typed
+		const [numbers, setNumbers] = useState(() =>
+			numbersFromDateString(value ?? undefined)
+		);
+		const setNumber = (index: number) => (value: number) => {
+			const newNumbers = [...numbers] as typeof numbers;
+			newNumbers[index] = value;
+			setNumbers(newNumbers);
+			onNumbersChange(newNumbers);
+		};
+
+		const onNumbersChange = (numbers: [number, number, number]) => {
+			const formatParts = dateFormat.split('-');
+			const hasNaNIndex = numbers.findIndex((v) => Number.isNaN(v));
+
+			// Date is not valid, or date has a missing part
+			if (
+				(dateFormat === 'YYYY-MM-DD' && !isDateValid(numbers)) ||
+				(hasNaNIndex > -1 && hasNaNIndex <= formatParts.length - 1)
+			) {
+				onChange(null);
+				return;
+			}
+
+			const result = formatParts
+				.map((v, k) => numbers[k].toString().padStart(v.length, '0'))
+				.join('-');
+			onChange(result);
+		};
+
+		const extraProps = {
+			readOnly,
+			disabled,
+		};
+
+		return (
+			<div className="lunaticDatepickerFields">
+				{showDay && (
+					<DatepickerField
+						id={id + 'day'}
+						label="Jour"
+						description="Exemple: 14"
+						max={31}
+						value={numbers[2]}
+						onChange={setNumber(2)}
+						{...extraProps}
+					/>
+				)}
+				{showMonth && (
+					<DatepickerField
+						id={id + 'month'}
+						label="Mois"
+						description="Exemple: 7"
+						max={12}
+						value={numbers[1]}
+						onChange={setNumber(1)}
+						{...extraProps}
+					/>
+				)}
+				<DatepickerField
+					id={id + 'year'}
+					label="Année"
+					description="Exemple: 2023"
+					value={numbers[0]}
+					max={9999}
+					onChange={setNumber(0)}
+					{...extraProps}
+				/>
+			</div>
+		);
+	}
+);
+
+function numbersFromDateString(s?: string): [number, number, number] {
+	if (!s) {
+		return [NaN, NaN, NaN];
+	}
+	const [year, month, day] = s.split('-').map((part) => parseInt(part, 10));
+	return [year, month, day];
+}
+
+/**
+ * Check if the date provided by the user is valid (e.g. not 2001/02/29)
+ */
+function isDateValid(dateArray: [number, number, number]) {
+	const [year, month, day] = dateArray;
+
+	// do not set the date directly on new Date(), to avoid transformation on year between 0 and 99.
+	//See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#year
+	const date = new Date();
+	date.setFullYear(year, month - 1, day);
+
+	return (
+		date.getFullYear() === year &&
+		date.getMonth() === month - 1 &&
+		date.getDate() === day
+	);
+}

package/src/components/Duration/Duration.test.tsx

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { Duration } from './Duration';
 import { render } from '@testing-library/react';
-import { Formats } from './durationUtils';
+import { DurationFormat } from '../type';
 
 describe('Duration', () => {
 	const mockOnChange = vi.fn();
@@ -24,7 +24,7 @@ describe('Duration', () => {
 	const baseProps = {
 		handleChanges: mockOnChange,
 		response: { name: 'demo' },
-		format: 'PTnHnM' as Formats,
+		format: 'PTnHnM' as DurationFormat,
 		value: 'PT5H1M',
 		id: 'duration',
 		label: 'label',

package/src/components/Duration/durationUtils.ts

@@ -5,8 +5,6 @@ export type DurationValue = {
 	months?: number | null;
 };
 
-export type Formats = 'PTnHnM' | 'PnYnM';
-
 export const propsByUnit = {
 	hours: { min: 0, max: 99, size: 2, style: { width: '2.5em' } },
 	minutes: { min: 0, max: 59, size: 2, style: { width: '2.5em' } },

package/src/components/Duration/getDurationFromValue.ts

@@ -1,4 +1,5 @@
-import { type Formats, type DurationValue } from './durationUtils';
+import { DurationFormat } from '../type';
+import { type DurationValue } from './durationUtils';
 
 /**
  * Convert a string into a duration
@@ -8,7 +9,7 @@ import { type Formats, type DurationValue } from './durationUtils';
  */
 export const getDurationFromValue = (
 	value: string | null,
-	format: Formats
+	format: DurationFormat
 ): DurationValue => {
 	// Handle nulls value
 	if (value === null && format === 'PTnHnM') {
@@ -30,7 +31,7 @@ export const getDurationFromValue = (
  * ## Example :
  * - "P12Y3M" => [12, 3]
  */
-const matchFromFormat = (value: string, format: Formats): number[] => {
+const matchFromFormat = (value: string, format: DurationFormat): number[] => {
 	const regex = new RegExp(format.replaceAll('n', '(\\d+)'));
 	const match = value.match(regex);
 	if (!match) {

package/src/components/shared/HOC/slottableComponent.tsx

@@ -43,6 +43,7 @@ import type { SummaryResponses, SummaryTitle } from '../../Summary/Summary';
 import type { LunaticComponentProps } from '../../type';
 import type { MarkdownLink } from '../MDLabel/MarkdownLink';
 import type { Accordion } from '../../Accordion/Accordion';
+import type { CustomDatepickerFields } from '../../Datepicker/DatepickerFields';
 
 /**
  * Contain the type of every customizable components.
@@ -80,6 +81,9 @@ export type LunaticSlotComponents = {
 	ComboboxClearButton: typeof ComboboxClearButton;
 	ComboboxLabelSelection: typeof ComboboxLabelSelection;
 
+	// Datepicker
+	DatepickerFields: typeof CustomDatepickerFields;
+
 	// Roundabout
 	Roundabout: typeof CustomRoundabout;
 

package/src/components/type.ts

@@ -9,7 +9,7 @@ import type {
 } from '../use-lunatic/type';
 import type { InterpretedOption } from '../use-lunatic/props/propOptions';
 
-type Formats = 'PTnHnM' | 'PnYnM';
+export type DurationFormat = 'PTnHnM' | 'PnYnM';
 export type VtlExpression = {
 	value: string;
 	type: 'VTL' | 'VTL|MD' | 'TXT';
@@ -78,7 +78,7 @@ export type ComponentPropsByType = {
 		};
 	Duration: LunaticBaseProps<string | null> &
 		LunaticExtraProps & {
-			format: Formats;
+			format: DurationFormat;
 			response: { name: string };
 			componentType?: 'Duration';
 		};

package/src/use-lunatic/commons/fill-components/fill-components.ts

@@ -12,6 +12,7 @@ import { getMissingResponseProp } from '../../props/propMissingResponse';
 import { getValueProp } from '../../props/propValue';
 import { getIterationsProp } from '../../props/propIterations';
 import { getOptionsProp } from '../../props/propOptions';
+import { LunaticLogger } from '../../logger/type';
 
 type FillComponentArgs = {
 	disableFilters?: boolean;
@@ -25,6 +26,7 @@ type FillComponentArgs = {
 	preferences: LunaticOptions['preferences'];
 	pager: LunaticReducerState['pager'];
 	variables: LunaticReducerState['variables'];
+	logger: LunaticLogger;
 };
 
 /**
@@ -56,7 +58,8 @@ export const fillComponent = (
 			state.variables,
 			state.handleChanges,
 			state.pager.iteration,
-			value
+			value,
+			state.logger
 		),
 		...getComponentTypeProps(interpretedProps, state),
 		// This is too dynamic to be typed correctly, so we allow any here

package/src/use-lunatic/commons/variables/behaviours/resizing-behaviour.ts

@@ -29,7 +29,7 @@ export function resizingBehaviour(
 
 		// Pairwise resizing
 		if ('sizeForLinksVariables' in resizingInfo) {
-			resizePairwise(store, resizingInfo, e.detail);
+			resizePairwise(store, resizingInfo);
 			if (!('size' in resizingInfo)) {
 				return;
 			}
@@ -58,9 +58,6 @@ function resizePairwise(
 			| [string, string]
 			| { xAxisSize: string; yAxisSize: string };
 		linksVariables: string[];
-	},
-	args: {
-		iteration?: number[];
 	}
 ) {
 	// Handle expression being sent as an array or an object (ensure backward compatibility)
@@ -77,7 +74,7 @@ function resizePairwise(
 		return forceInt(store.run(getExpressionAsString(expression)));
 	});
 	resizingInfo.linksVariables.forEach((variable) => {
-		const value = store.get(variable, args.iteration);
+		const value = store.get(variable);
 		const resizedValue = resizeArray(
 			// The value is not an array, force an array
 			Array.isArray(value) ? value.map((i) => resizeArray(i, ySize, null)) : [],

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

@@ -298,7 +298,10 @@ describe('lunatic-variables-store', () => {
 			variables.set('LINKS', [[]]);
 			resizingBehaviour(variables, {
 				PRENOM: {
-					sizeForLinksVariables: ['count(PRENOM)', 'count(PRENOM)'],
+					sizeForLinksVariables: {
+						xAxisSize: 'count(PRENOM)',
+						yAxisSize: 'count(PRENOM)',
+					},
 					linksVariables: ['LINKS'],
 				},
 			});
@@ -308,6 +311,19 @@ describe('lunatic-variables-store', () => {
 				[null, null, null],
 				[null, null, null],
 			]);
+			// Adding a person should not reset links
+			variables.set('LINKS', [
+				[null, '1', '3'],
+				['1', null, '3'],
+				['2', '2', null],
+			]);
+			variables.set('PRENOM', 'Marie', { iteration: [3] });
+			expect(variables.get('LINKS') as string[][]).toEqual([
+				[null, '1', '3', null],
+				['1', null, '3', null],
+				['2', '2', null, null],
+				[null, null, null, null],
+			]);
 		});
 		it('should resize pairwise with the object syntax', () => {
 			variables.set('PRENOM', []);

package/src/use-lunatic/props/propOptions.spec.ts

@@ -26,6 +26,7 @@ describe('getOptionsProp()', () => {
 		],
 	} satisfies DeepTranslateExpression<LunaticComponentDefinition>;
 	let mockChange: LunaticChangesHandler;
+	const mockLogger = vi.fn();
 
 	beforeEach(() => {
 		mockChange = vi.fn();
@@ -40,7 +41,8 @@ describe('getOptionsProp()', () => {
 				variables,
 				mockChange,
 				undefined,
-				undefined
+				undefined,
+				mockLogger
 			);
 			expect(options[1].checked).toBe(false);
 			variables.set('O2', true);
@@ -49,7 +51,8 @@ describe('getOptionsProp()', () => {
 				variables,
 				mockChange,
 				undefined,
-				undefined
+				undefined,
+				mockLogger
 			);
 			expect(options[1].checked).toBe(true);
 		});
@@ -61,7 +64,8 @@ describe('getOptionsProp()', () => {
 				variables,
 				mockChange,
 				0,
-				undefined
+				undefined,
+				mockLogger
 			);
 			expect(
 				options.filter((o) => o.checked),
@@ -74,7 +78,8 @@ describe('getOptionsProp()', () => {
 				variables,
 				mockChange,
 				0,
-				undefined
+				undefined,
+				mockLogger
 			);
 			expect(options[0].checked).toBe(true);
 			expect(options[1].checked).toBe(false);
@@ -87,12 +92,73 @@ describe('getOptionsProp()', () => {
 				variables,
 				mockChange,
 				1,
-				undefined
+				undefined,
+				mockLogger
 			);
 			options[1].onCheck(false);
 			expect(mockChange).toHaveBeenLastCalledWith([
 				{ name: 'O2', value: false },
 			]);
 		});
+		it('should not filter response (checkboxGroup) when its conditionFilter evaluation fails', () => {
+			const definition = {
+				...checkboxGroupDefinition,
+				responses: [
+					{
+						label: 'Option 1',
+						response: { name: 'O1' },
+						id: 'id1',
+						conditionFilter: { type: 'VTL', value: 'invalid expression' },
+					},
+				],
+			} satisfies DeepTranslateExpression<LunaticComponentDefinition>;
+
+			// mock variables.run for having an error interpreting a variable
+			vi.spyOn(variables, 'run').mockImplementation(() => {
+				throw new Error('Test error');
+			});
+
+			const options = getOptionsProp(
+				definition,
+				variables,
+				mockChange,
+				undefined,
+				undefined,
+				mockLogger
+			);
+
+			// Ensure the option is not filtered
+			expect(options).toHaveLength(1);
+		});
+		it('should not filter option (radio) when its conditionFilter evaluation fails', () => {
+			const definition = {
+				id: 'RadioGroup',
+				componentType: 'Radio',
+				options: [
+					{
+						label: 'Option 1',
+						value: 'id1',
+						conditionFilter: { type: 'VTL', value: 'invalid expression' },
+					},
+				],
+			} as any as DeepTranslateExpression<LunaticComponentDefinition>;
+
+			// Mock `variables.run` to throw an error
+			vi.spyOn(variables, 'run').mockImplementation(() => {
+				throw new Error('Test error');
+			});
+
+			const options = getOptionsProp(
+				definition,
+				variables,
+				mockChange,
+				undefined,
+				undefined,
+				mockLogger
+			);
+
+			// Ensure the option is not filtered
+			expect(options).toHaveLength(1);
+		});
 	});
 });

package/src/use-lunatic/props/propOptions.ts

@@ -7,6 +7,7 @@ import type { ReactNode } from 'react';
 import type { DeepTranslateExpression } from '../commons/fill-components/fill-component-expressions';
 import { isNumber } from '../../utils/number';
 import type { LunaticVariablesStore } from '../commons/variables/lunatic-variables-store';
+import { LunaticLogger } from '../logger/type';
 
 /* Used for radio option and checkbox one option */
 export type InterpretedOption = {
@@ -29,7 +30,8 @@ export function getOptionsProp(
 	variables: LunaticVariablesStore,
 	handleChanges: LunaticChangesHandler,
 	pagerIteration: LunaticState['pager']['iteration'],
-	value: unknown
+	value: unknown,
+	logger: LunaticLogger
 ) {
 	const iteration = isNumber(pagerIteration) ? [pagerIteration] : undefined;
 	//const iteration = pagerIteration ? [pagerIteration] : undefined;
@@ -40,7 +42,16 @@ export function getOptionsProp(
 				if (!response.conditionFilter) {
 					return true;
 				}
-				return variables.run(response.conditionFilter.value, { iteration });
+				try {
+					return variables.run(response.conditionFilter.value, { iteration });
+				} catch (e) {
+					// If there is an error interpreting a variable, we do not filter
+					logger({
+						type: 'ERROR',
+						error: e as Error,
+					});
+					return true;
+				}
 			})
 			.map((response) => ({
 				label: response.label,
@@ -74,7 +85,16 @@ export function getOptionsProp(
 			if (!('conditionFilter' in option) || !option.conditionFilter) {
 				return true;
 			}
-			return variables.run(option.conditionFilter.value, { iteration });
+			try {
+				return variables.run(option.conditionFilter.value, { iteration });
+			} catch (e) {
+				// If there is an error interpreting a variable, we do not filter
+				logger({
+					type: 'ERROR',
+					error: e as Error,
+				});
+				return true;
+			}
 		})
 		.map((option) => ({
 			label: option.label,

package/src/use-lunatic/type.ts

@@ -333,10 +333,24 @@ export type LunaticState = {
 	resetChangedData: () => void;
 	/** Return `true` as soon as the current page has at least one answer. */
 	hasPageResponse: () => boolean;
-	/** Used for testing purpose only. */
-	testing: {
-		handleChanges: LunaticChangesHandler;
-	};
+	/**
+	 * Change several variable values.
+	 *
+	 * Be careful when using this function.
+	 *
+	 * In most cases, you don't need this function.
+	 * It's used directly by the components (and available as a props.)
+	 *
+	 * - With only one change or with serveral changes
+	 * @example
+	 * handleChanges([{name: "MY_VAR", value: "new value"}])
+	 *
+	 * handleChanges([
+	 * 	{name: "MY_VAR", value: "new value"},
+	 * 	{name: "MY_VAR_2", value: "new value 2"}
+	 * ])
+	 */
+	handleChanges: LunaticChangesHandler;
 };
 
 /** Function taking as arguments the various changes the user has made. */

package/src/use-lunatic/use-lunatic.test.ts

@@ -233,7 +233,7 @@ describe('use-lunatic()', () => {
 				useLunatic(sourceCleaningLoop as any, undefined, {})
 			);
 			act(() => {
-				result.current.testing.handleChanges([
+				result.current.handleChanges([
 					{
 						name: 'PRENOM',
 						value: ['John', 'Doe', 'Marc'],
@@ -251,7 +251,7 @@ describe('use-lunatic()', () => {
 			};
 			expectCollectedAgeToEqual([18, 18, 18]);
 			act(() => {
-				result.current.testing.handleChanges([
+				result.current.handleChanges([
 					{
 						name: 'HIDE_AGE',
 						value: true,
@@ -271,15 +271,11 @@ describe('use-lunatic()', () => {
 					onChange: spy,
 				})
 			);
-			act(() =>
-				result.current.testing.handleChanges([{ name: 'NB', value: 3 }])
-			);
+			act(() => result.current.handleChanges([{ name: 'NB', value: 3 }]));
 			expect(
 				(result.current.getData(true).COLLECTED?.PRENOMS as any).COLLECTED
 			).toEqual([null, null, null]);
-			act(() =>
-				result.current.testing.handleChanges([{ name: 'NB', value: 2 }])
-			);
+			act(() => result.current.handleChanges([{ name: 'NB', value: 2 }]));
 			expect(
 				(result.current.getData(true).COLLECTED?.PRENOMS as any).COLLECTED
 			).toEqual([null, null]);
@@ -293,13 +289,13 @@ describe('use-lunatic()', () => {
 				useLunatic(sourceSimpsons as any, undefined, {})
 			);
 			act(() => {
-				result.current.testing.handleChanges([
+				result.current.handleChanges([
 					{
 						name: 'COMMENT',
 						value: 'Mon commentaire',
 					},
 				]);
-				result.current.testing.handleChanges([{ name: 'READY', value: true }]);
+				result.current.handleChanges([{ name: 'READY', value: true }]);
 			});
 			hookRef = result;
 		});
@@ -328,7 +324,7 @@ describe('use-lunatic()', () => {
 		});
 		it('should return changes since the last update', () => {
 			act(() => {
-				hookRef.current.testing.handleChanges([
+				hookRef.current.handleChanges([
 					{ name: 'COMMENT', value: 'Mon commentaire' },
 					{ name: 'READY', value: true },
 				]);
@@ -346,10 +342,10 @@ describe('use-lunatic()', () => {
 		});
 		it('should reset changes with true parameter', () => {
 			act(() => {
-				hookRef.current.testing.handleChanges([
+				hookRef.current.handleChanges([
 					{ name: 'COMMENT', value: 'Mon commentaire' },
 				]);
-				hookRef.current.testing.handleChanges([{ name: 'READY', value: true }]);
+				hookRef.current.handleChanges([{ name: 'READY', value: true }]);
 			});
 			const data = hookRef.current.getChangedData(true);
 			expect(data).toMatchObject({
@@ -366,7 +362,7 @@ describe('use-lunatic()', () => {
 		});
 		it('should reset changes with resetChanges()', () => {
 			act(() => {
-				hookRef.current.testing.handleChanges([
+				hookRef.current.handleChanges([
 					{
 						name: 'COMMENT',
 						value: 'Mon commentaire',
@@ -377,9 +373,7 @@ describe('use-lunatic()', () => {
 			hookRef.current.resetChangedData();
 			expect(hookRef.current.getChangedData().COLLECTED).toEqual({});
 			act(() => {
-				hookRef.current.testing.handleChanges([
-					{ name: 'READY', value: false },
-				]);
+				hookRef.current.handleChanges([{ name: 'READY', value: false }]);
 			});
 			expect(hookRef.current.getChangedData().COLLECTED).toMatchObject({
 				READY: {
@@ -395,9 +389,7 @@ describe('use-lunatic()', () => {
 				useLunatic(sourceCheckboxGroup as any, undefined, {})
 			);
 			act(() => {
-				result.current.testing.handleChanges([
-					{ name: 'NATIO1N1', value: true },
-				]);
+				result.current.handleChanges([{ name: 'NATIO1N1', value: true }]);
 			});
 			expect(result.current.hasPageResponse()).toBeTruthy();
 		});
@@ -406,9 +398,7 @@ describe('use-lunatic()', () => {
 				useLunatic(sourceCheckboxGroup as any, undefined, {})
 			);
 			act(() => {
-				result.current.testing.handleChanges([
-					{ name: 'NATIO1N1', value: false },
-				]);
+				result.current.handleChanges([{ name: 'NATIO1N1', value: false }]);
 			});
 			expect(result.current.hasPageResponse()).toBeFalsy();
 		});

package/src/use-lunatic/use-lunatic.ts

@@ -205,6 +205,7 @@ export function useLunatic(
 		goNextPage,
 		goPreviousPage,
 		management,
+		logger,
 		...state,
 	});
 
@@ -233,8 +234,6 @@ export function useLunatic(
 		hasPageResponse: usePageHasResponse(components, state.executeExpression),
 		// Components
 		Provider,
-		testing: {
-			handleChanges,
-		},
+		handleChanges,
 	} satisfies LunaticState;
 }