@inseefr/lunatic 3.4.4 → 3.4.5-rc.0

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

@@ -0,0 +1,152 @@
+import type {
+	LunaticOverviewItem,
+	LunaticReducerState,
+	PageTag,
+} from '../type';
+import { type DependencyList, type ReactNode, useMemo } from 'react';
+import { getPageTag, pageTagComparator } from '../commons/page-tag';
+
+export type InterpretedLunaticOverviewItem = {
+	id: string;
+	type: string;
+	page: PageTag;
+	label: ReactNode;
+	description: ReactNode;
+	reached: boolean;
+	current: boolean;
+	children: InterpretedLunaticOverviewItem[];
+};
+
+/**
+ * Hook to build a filled overview everytime the deps change
+ */
+export const useOverview = (
+	{
+		overview,
+		executeExpression,
+		pager,
+	}: Pick<LunaticReducerState, 'executeExpression' | 'overview' | 'pager'>,
+	deps: DependencyList
+) => {
+	return useMemo(
+		() => interpretOverview(overview, executeExpression, pager),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[...deps, overview]
+	);
+};
+
+/**
+ * Use lunatic data to interpret the static overview (calculated on init) with the real data
+ */
+const interpretOverview = (
+	overviewItems: LunaticOverviewItem[],
+	executeExpression: LunaticReducerState['executeExpression'],
+	pager?: LunaticReducerState['pager']
+) => {
+	// Flat structure of the overview
+	let items = overviewItems.reduce(
+		(acc, item) => interpretOverviewItem(acc, item, executeExpression, pager),
+		[] as InterpretedLunaticOverviewItem[]
+	);
+	// Sort using the page logic
+	items = items.sort((a, b) => pageTagComparator(a.page, b.page));
+	// Build a tree with nested item, a subsequence will be a child of the previous sequence
+	const rootItems = [] as typeof items;
+	let parent = null as null | InterpretedLunaticOverviewItem;
+
+	for (const item of items) {
+		if (item.type === 'Sequence') {
+			rootItems.push(item);
+			parent = item;
+		} else {
+			parent?.children.push(item);
+		}
+	}
+
+	if (pager) {
+		applyCurrentPage(rootItems, getPageTag(pager));
+	}
+
+	return rootItems;
+};
+
+/**
+ * Interpret expression inside an item (label & condition)
+ */
+const interpretOverviewItem = (
+	items: InterpretedLunaticOverviewItem[],
+	item: LunaticOverviewItem,
+	executeExpression: LunaticReducerState['executeExpression'],
+	pager?: LunaticReducerState['pager'],
+	iteration?: number
+): InterpretedLunaticOverviewItem[] => {
+	// We reached a loop item, we need to add it multiple time
+	if (item.iterations && iteration === undefined) {
+		const iterations = executeExpression<number>(item.iterations) ?? 0;
+		return Array.from({ length: iterations }).reduce(
+			(acc: InterpretedLunaticOverviewItem[], _, k) => {
+				return interpretOverviewItem(acc, item, executeExpression, pager, k);
+			},
+			items
+		);
+	}
+
+	const isVisible = item.conditionFilter
+		? Boolean(
+				executeExpression(item.conditionFilter, {
+					iteration: iteration,
+				})
+			)
+		: true;
+
+	if (!isVisible) {
+		return items;
+	}
+
+	// Append the item to the list of items
+	const page =
+		`${item.pageTag}${iteration !== undefined ? `#${iteration + 1}` : ''}` as PageTag;
+	return [
+		...items,
+		{
+			id: item.id,
+			type: item.type,
+			label: executeExpression(item.label, { iteration }),
+			description: item.description
+				? executeExpression(item.description, { iteration })
+				: undefined,
+			children: [],
+			reached:
+				pageTagComparator(pager ? getPageTag(pager) : '-1', page) >= 0
+					? true
+					: false,
+			page: page,
+			current: false,
+		},
+	];
+};
+
+/**
+ * Set the current property in the correct overview item
+ */
+const applyCurrentPage = (
+	items: InterpretedLunaticOverviewItem[],
+	currentPage: PageTag
+): InterpretedLunaticOverviewItem[] => {
+	// Look for the last item where page <= currentPage
+	const currentItem = items.findLast(
+		(item) => pageTagComparator(item.page, currentPage) <= 0
+	);
+
+	if (!currentItem) {
+		return items;
+	}
+
+	// Make this page "current"
+	currentItem.current = true;
+	if (currentItem.children.length > 0) {
+		applyCurrentPage(currentItem.children, currentPage);
+	}
+
+	return items;
+};

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

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'react';
+import type { LunaticLogger } from '../logger/type';
+import { useRefSync } from '../../hooks/useRefSync';
+
+/**
+ * Log a warning when the variable change
+ * ensure that we received a memoized value and help debug
+ */
+export function useWarnDepChange(
+	variable: unknown,
+	message: string,
+	logger: LunaticLogger
+) {
+	const firstRender = useRef(true);
+	const loggerRef = useRefSync(logger);
+	useEffect(() => {
+		if (!firstRender.current) {
+			loggerRef.current({ type: 'WARNING', message });
+		}
+		firstRender.current = false;
+	}, [variable, loggerRef, message]);
+}

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

@@ -0,0 +1,13 @@
+import type { LunaticLogger } from './type';
+
+/**
+ * Default logger
+ */
+export const ConsoleLogger: LunaticLogger = (msg) => {
+	if (msg.type === 'ERROR') {
+		console.error(msg.error);
+	}
+	if (msg.type === 'WARNING') {
+		console.warn(msg.message);
+	}
+};

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

@@ -0,0 +1,11 @@
+type LoggerMessage =
+	| {
+			type: 'ERROR';
+			error: Error;
+	  }
+	| {
+			type: 'WARNING';
+			message: string;
+	  };
+
+export type LunaticLogger = (msg: LoggerMessage) => void;

package/src/use-lunatic/lunatic-context.tsx

@@ -0,0 +1,78 @@
+import {
+	type FunctionComponent,
+	type PropsWithChildren,
+	createContext,
+	useContext,
+} from 'react';
+
+import D from '../i18n/index';
+
+const LunaticContext = createContext({
+	missingStrategy: () => {},
+	management: false,
+	missing: false,
+	shortcut: false,
+	missingShortcut: { dontKnow: '', refused: '' },
+	dontKnowButton: D.DK,
+	refusedButton: D.RF,
+});
+/** Provide `missing` `missingStrategy`, `shortcut` and `missingShortcut`, `dontKnowButton`, `refusedButton` to Missing component
+ *  to manage non-response buttons and shortcut */
+export const useLunaticMissing = () => {
+	const {
+		missing,
+		missingStrategy,
+		shortcut,
+		missingShortcut,
+		dontKnowButton,
+		refusedButton,
+	} = useContext(LunaticContext);
+	return {
+		missing,
+		missingStrategy,
+		shortcut,
+		missingShortcut,
+		dontKnowButton,
+		refusedButton,
+	};
+};
+
+/** Provide `management` to display data states [COLLECTED,EDITED,FORCED] */
+export const useLunaticManagement = () => {
+	return useContext(LunaticContext).management;
+};
+
+export function createLunaticProvider({
+	management,
+	missing,
+	missingStrategy,
+	shortcut,
+	missingShortcut,
+	dontKnowButton,
+	refusedButton,
+}: {
+	management: boolean;
+	missing: boolean;
+	missingStrategy: () => void;
+	shortcut: boolean;
+	missingShortcut: { dontKnow: string; refused: string };
+	dontKnowButton: string;
+	refusedButton: string;
+}): FunctionComponent<PropsWithChildren> {
+	const value = {
+		management,
+		missing,
+		missingStrategy,
+		shortcut,
+		missingShortcut,
+		dontKnowButton,
+		refusedButton,
+	};
+	return function Provider({ children }: PropsWithChildren) {
+		return (
+			<LunaticContext.Provider value={value}>
+				{children}
+			</LunaticContext.Provider>
+		);
+	};
+}

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

@@ -0,0 +1,230 @@
+import type {
+	LunaticChangesHandler,
+	LunaticComponentDefinition,
+} from '../type';
+import { type DeepTranslateExpression } from '../commons/fill-components/fill-component-expressions';
+import { hasComponentType } from '../commons/component';
+import {
+	fillComponent,
+	fillComponents,
+} from '../commons/fill-components/fill-components';
+import { times } from '../../utils/array';
+
+type State = Parameters<typeof fillComponent>[1];
+
+/**
+ * Fill props for roundabout
+ * - expressions, VTL that states the level of completion for each iteration
+ */
+function getRoundaboutProps(
+	component: DeepTranslateExpression<LunaticComponentDefinition<'Roundabout'>>,
+	state: State
+) {
+	const iterations = component.iterations as unknown as number; // iterations is the result of an expression but we know it's a number
+	// Compute all items label, description, state
+	const items = times(iterations, (k) => ({
+		progress: state.variables.get(component.progressVariable, [k]),
+		...Object.fromEntries(
+			Object.entries(component.item).map(([key, expression]) => [
+				key,
+				state.executeExpression(expression, { iteration: k }),
+			])
+		),
+	}));
+	return {
+		items: items,
+		page: parseInt(component.page ?? '1', 10),
+	};
+}
+
+/**
+ * Fill child components for nested component type
+ */
+function getChildComponents(
+	component: DeepTranslateExpression<LunaticComponentDefinition<'Question'>>,
+	state: State
+) {
+	return {
+		components: fillComponents(component.components, state),
+	};
+}
+
+/**
+ * For loops, inject a method to retrieve component at a specific iteration
+ */
+function getChildComponentsWithIteration(
+	component: DeepTranslateExpression<
+		LunaticComponentDefinition<'Loop' | 'RosterForLoop'>
+	> & {
+		value?: Record<string, unknown[]>;
+	},
+	state: State
+) {
+	return {
+		getComponents: (iteration: number) =>
+			fillComponents(component.components, {
+				...state,
+				handleChanges: createChangeHandlerForIteration(
+					state.handleChanges,
+					iteration
+				),
+				pager: {
+					...state.pager,
+					iteration: iteration,
+					subPage: 0, // Fake a subpage to simulate an iteration
+				},
+			}),
+	};
+}
+
+// Create change handler memoized for every iteration
+let changeHandler = null as null | LunaticChangesHandler;
+const changeHandlerMap = new Map<number, LunaticChangesHandler>();
+
+function createChangeHandlerForIteration(
+	handleChanges: LunaticChangesHandler,
+	iteration: number
+) {
+	if (handleChanges !== changeHandler) {
+		changeHandler = handleChanges;
+		changeHandlerMap.clear();
+	}
+	let handler = changeHandlerMap.get(iteration);
+	if (handler) {
+		return handler;
+	}
+	// Inject iteration in the child components
+	handler = (responses) => {
+		handleChanges(responses.map((r) => ({ ...r, iteration: [iteration] })));
+	};
+	changeHandlerMap.set(iteration, handler);
+	return handler;
+}
+
+/**
+ * For pairwise, inject a method to retrieve component at a specific iteration combination
+ */
+function getPairwiseProps(
+	component: DeepTranslateExpression<
+		LunaticComponentDefinition<'PairwiseLinks'>
+	>,
+	state: State
+) {
+	return {
+		getComponents: (x: number, y: number) => {
+			if (x === y) {
+				return [];
+			}
+			return fillComponents(component.components, {
+				...state,
+				handleChanges: (responses) => {
+					// Add iteration on each response
+					state.handleChanges(
+						responses.reduce(
+							(acc, r) => {
+								if (
+									r.name in component.symLinks &&
+									r.value in component.symLinks[r.name]
+								) {
+									return [
+										...acc,
+										// Add iteration to the response
+										{ ...r, iteration: [x, y] },
+										// Add linked response (symetrical iteration)
+										{
+											name: r.name,
+											value: component.symLinks[r.name][r.value],
+											iteration: [y, x],
+										},
+									];
+								}
+								return [
+									...acc,
+									// Add iteration to the response
+									{ ...r, iteration: [x, y] },
+								];
+							},
+							[] as { iteration: number[]; name: string; value: any }[]
+						)
+					);
+				},
+				pager: {
+					...state.pager,
+					linksIterations: [x, y],
+					subPage: 0, // Fake a subpage to simulate an iteration
+				},
+			});
+		},
+	};
+}
+
+/**
+ * For pairwise, inject a method to retrieve component at a specific iteration combination
+ */
+function getTableProps(
+	component: DeepTranslateExpression<LunaticComponentDefinition<'Table'>>,
+	state: State
+) {
+	return {
+		body: component.body.map((row) =>
+			row.map((component) => {
+				if (hasComponentType(component)) {
+					return fillComponent(component as LunaticComponentDefinition, state);
+				}
+				// We can have a non typed component with extra attributes (colspan, rowspan)
+				return {
+					...component,
+					label: state.executeExpression(component.label, {
+						iteration: state.pager.iteration,
+					}),
+				};
+			})
+		),
+	};
+}
+
+/**
+ * For suggester, inject the arbitrary value if necessary
+ */
+function getSuggesterProps(
+	component: DeepTranslateExpression<LunaticComponentDefinition<'Suggester'>>,
+	state: State
+) {
+	if (!component.arbitrary) {
+		return {};
+	}
+	return {
+		arbitraryValue: state.executeExpression(
+			{ type: 'VTL', value: component.arbitrary.response.name },
+			{
+				iteration: state.pager.iteration,
+			}
+		),
+	};
+}
+
+/**
+ * Get component specific props (RoundAbout for instance)
+ */
+export function getComponentTypeProps(
+	component: DeepTranslateExpression<LunaticComponentDefinition>,
+	state: State
+) {
+	switch (component.componentType) {
+		case 'Roundabout':
+			return getRoundaboutProps(component, state);
+		case 'Question':
+			return getChildComponents(component, state);
+		case 'Loop':
+		case 'RosterForLoop':
+			return getChildComponentsWithIteration(component, state);
+		case 'PairwiseLinks':
+			return getPairwiseProps(component, state);
+		case 'Table':
+			return getTableProps(component, state);
+		case 'Suggester':
+			return getSuggesterProps(component, state);
+		default:
+			return {};
+	}
+}

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

@@ -0,0 +1,51 @@
+import type {
+	LunaticComponentDefinition,
+	LunaticPager,
+	LunaticReducerState,
+} from '../type';
+import { forceInt, isNumber } from '../../utils/number';
+import { hasResponse } from '../commons/component';
+import type { LunaticVariablesStore } from '../commons/variables/lunatic-variables-store';
+
+export function getIterationsProp(
+	definition: LunaticComponentDefinition,
+	state: {
+		pager: LunaticPager;
+		variables: LunaticVariablesStore;
+		executeExpression: LunaticReducerState['executeExpression'];
+	}
+): number | undefined {
+	if ('iterations' in definition && definition.iterations) {
+		return forceInt(
+			state.executeExpression(definition.iterations, {
+				iteration: state.pager.iteration,
+			})
+		);
+	}
+
+	if (
+		definition.componentType !== 'RosterForLoop' &&
+		definition.componentType !== 'Loop'
+	) {
+		return undefined;
+	}
+
+	// Iterations expression is not present on the component definition
+	// infer it from the value of child components
+	return (definition.components as LunaticComponentDefinition[]).reduce(
+		(acc, component) => {
+			if (!hasResponse(component)) {
+				return acc;
+			}
+			const value = state.variables.get(
+				component.response.name,
+				isNumber(state.pager.iteration) ? [state.pager.iteration] : undefined
+			);
+			if (Array.isArray(value) && value.length > acc) {
+				return value.length;
+			}
+			return acc;
+		},
+		0
+	);
+}

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

@@ -0,0 +1,28 @@
+import type { LunaticComponentDefinition, LunaticPager } from '../type';
+import { isNumber } from '../../utils/number';
+import type { LunaticVariablesStore } from '../commons/variables/lunatic-variables-store';
+
+export function getMissingResponseProp(
+	component: LunaticComponentDefinition,
+	{
+		pager,
+		variables,
+	}: {
+		pager: LunaticPager;
+		variables: LunaticVariablesStore;
+	}
+) {
+	// Component does not have a missing response
+	if (!('missingResponse' in component) || !component.missingResponse) {
+		return undefined;
+	}
+
+	const missingResponse = component.missingResponse;
+	return {
+		...missingResponse,
+		value: variables.get(
+			missingResponse.name,
+			isNumber(pager.iteration) ? [pager.iteration] : undefined
+		),
+	};
+}

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

@@ -0,0 +1,98 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { LunaticVariablesStore } from '../commons/variables/lunatic-variables-store';
+import { getOptionsProp } from './propOptions';
+import type { DeepTranslateExpression } from '../commons/fill-components/fill-component-expressions';
+import type {
+	LunaticChangesHandler,
+	LunaticComponentDefinition,
+} from '../type';
+
+describe('getOptionsProp()', () => {
+	let variables: LunaticVariablesStore;
+	const checkboxGroupDefinition = {
+		id: 'CheckboxGroup',
+		componentType: 'CheckboxGroup',
+		responses: [
+			{
+				label: 'Option 1',
+				response: { name: 'O1' },
+				id: 'id1',
+			},
+			{
+				label: 'Option 2',
+				response: { name: 'O2' },
+				id: 'id2',
+			},
+		],
+	} satisfies DeepTranslateExpression<LunaticComponentDefinition>;
+	let mockChange: LunaticChangesHandler;
+
+	beforeEach(() => {
+		mockChange = vi.fn();
+		variables = new LunaticVariablesStore();
+	});
+
+	describe('CheckboxGroup', () => {
+		it('should check boxes', () => {
+			variables.set('O2', false);
+			let options = getOptionsProp(
+				checkboxGroupDefinition,
+				variables,
+				mockChange,
+				undefined,
+				undefined
+			);
+			expect(options[1].checked).toBe(false);
+			variables.set('O2', true);
+			options = getOptionsProp(
+				checkboxGroupDefinition,
+				variables,
+				mockChange,
+				undefined,
+				undefined
+			);
+			expect(options[1].checked).toBe(true);
+		});
+		it('should check boxes correctly within iteration', () => {
+			variables.set('O1', []);
+			variables.set('O2', []);
+			let options = getOptionsProp(
+				checkboxGroupDefinition,
+				variables,
+				mockChange,
+				0,
+				undefined
+			);
+			expect(
+				options.filter((o) => o.checked),
+				'Nothing checked when variable empty'
+			).toHaveLength(0);
+
+			variables.set('O1', [true, 0]);
+			options = getOptionsProp(
+				checkboxGroupDefinition,
+				variables,
+				mockChange,
+				0,
+				undefined
+			);
+			expect(options[0].checked).toBe(true);
+			expect(options[1].checked).toBe(false);
+		});
+		it('should create handleChange correctly', () => {
+			variables.set('O1', [true, false]);
+			variables.set('O2', [false, true]);
+			const options = getOptionsProp(
+				checkboxGroupDefinition,
+				variables,
+				mockChange,
+				1,
+				undefined
+			);
+			options[1].onCheck(false);
+			expect(mockChange).toHaveBeenLastCalledWith([
+				{ name: 'O2', value: false },
+			]);
+		});
+	});
+});