@inseefr/lunatic 3.4.4 → 3.4.5-rc.0

package/src/components/Roundabout/CustomRoundabout.tsx

@@ -0,0 +1,117 @@
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import type { LunaticComponentProps } from '../type';
+import { Label } from '../shared/Label/Label';
+import type { ItemOf } from '../../type.utils';
+import { Button } from '../shared/Button/Button';
+import classnames from 'classnames';
+import { ComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+import type { LunaticError } from '../../use-lunatic/type';
+import type { ReactNode } from 'react';
+
+type PropsItem = ItemOf<LunaticComponentProps<'Roundabout'>['items']> & {
+	onClick: () => void;
+	iteration: number;
+	locked: boolean;
+	errors?: LunaticError[];
+};
+
+function RoundaboutItem({
+	label,
+	progress,
+	description,
+	onClick,
+	disabled,
+	iteration,
+	locked,
+	errors,
+}: PropsItem) {
+	return (
+		<section className="lunatic-roundabout__item">
+			<div>
+				{label && (
+					<label
+						className="lunatic-roundabout__label"
+						htmlFor={`action${iteration}`}
+					>
+						{label}
+					</label>
+				)}
+				{description && (
+					<div className="lunatic-roundabout__description">{description}</div>
+				)}
+			</div>
+			{!disabled && (
+				<Button
+					id={`action${iteration}`}
+					className={classnames(
+						'lunatic-roundabout__button',
+						getButtonClass(progress)
+					)}
+					onClick={onClick}
+					disabled={locked && progress === 1}
+				>
+					{getButtonLabel(progress)}
+				</Button>
+			)}
+			<ComponentErrors errors={errors} />
+		</section>
+	);
+}
+
+type Props = Pick<
+	LunaticComponentProps<'Roundabout'>,
+	'label' | 'locked' | 'id'
+> & {
+	goToIteration: (v: number) => void;
+	errors?: LunaticError[];
+	items: {
+		label?: ReactNode;
+		progress: number; // -1: not completed, 0: started, 1: finished
+		description?: ReactNode;
+		disabled?: boolean;
+		errors?: LunaticError[] | undefined;
+	}[];
+};
+
+export const CustomRoundabout = slottableComponent<Props>(
+	'Roundabout',
+	({ items, goToIteration, label, locked }) => {
+		return (
+			<div className="lunatic-roundabout">
+				<Label>{label}</Label>
+				<div className="lunatic-roundabout__items">
+					{items.map((item, k) => (
+						<RoundaboutItem
+							key={k}
+							iteration={k}
+							{...item}
+							errors={item.errors}
+							onClick={() => goToIteration(k)}
+							locked={locked}
+						/>
+					))}
+				</div>
+			</div>
+		);
+	}
+);
+
+function getButtonLabel(progress: number) {
+	if (progress === 1) {
+		return 'Complété';
+	}
+	if (progress === 0) {
+		return 'Modifier';
+	}
+	return 'Commencer';
+}
+
+function getButtonClass(progress: number) {
+	if (progress === 1) {
+		return 'lunatic-roundabout__button-completed';
+	}
+	if (progress === 0) {
+		return 'lunatic-roundabout__button-progress';
+	}
+	return null;
+}

package/src/components/Roundabout/Roundabout.tsx

@@ -0,0 +1,39 @@
+import { CustomRoundabout } from './CustomRoundabout';
+import type { LunaticComponentProps } from '../type';
+import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+
+/**
+ * Roundabout is a special loop component where the user can select the iteration to go to
+ */
+export function Roundabout(props: LunaticComponentProps<'Roundabout'>) {
+	const goToIteration = (iteration: number) => {
+		if (
+			props.items[iteration].progress !== 1 &&
+			props.items[iteration].progress !== 0
+		) {
+			props.handleChanges([
+				{ name: props.progressVariable, value: 0, iteration: [iteration] },
+			]);
+		}
+		props.goToPage({
+			page: props.page,
+			subPage: 0,
+			iteration,
+			nbIterations: props.iterations,
+		});
+	};
+
+	const itemsWithErrors = props.items.map((item, k) => ({
+		...item,
+		errors: getComponentErrors(props.errors, `${props.id}-${k}`),
+	}));
+
+	return (
+		<CustomRoundabout
+			{...props}
+			errors={getComponentErrors(props.errors, props.id)}
+			items={itemsWithErrors}
+			goToIteration={goToIteration}
+		/>
+	);
+}

package/src/components/Roundabout/roundabout.spec.tsx

@@ -0,0 +1,77 @@
+import { render, fireEvent } from '@testing-library/react';
+import { CustomRoundabout } from './CustomRoundabout';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+
+describe('Roundabout', () => {
+	const mockGoToIteration = vi.fn();
+
+	afterEach(() => {
+		mockGoToIteration.mockClear();
+	});
+
+	const items = [
+		{
+			label: 'Step 1',
+			progress: -1,
+		},
+		{
+			label: 'Step 2',
+			progress: 0,
+		},
+		{
+			label: 'Step 3',
+			progress: 1,
+		},
+	];
+	const label = 'My Roundabout';
+
+	it('renders the roundabout correctly', () => {
+		const { getByText } = render(
+			<CustomRoundabout
+				id="r1"
+				items={items}
+				goToIteration={mockGoToIteration}
+				locked={false}
+			/>
+		);
+
+		expect(getByText('Step 1')).toBeInTheDocument();
+		expect(getByText('Step 2')).toBeInTheDocument();
+		expect(getByText('Step 3')).toBeInTheDocument();
+		expect(getByText('Complété')).toBeInTheDocument();
+		expect(getByText('Modifier')).toBeInTheDocument();
+		expect(getByText('Commencer')).toBeInTheDocument();
+	});
+
+	it('calls the goToIteration function when a button is clicked', () => {
+		const { getByText } = render(
+			<CustomRoundabout
+				id="r1"
+				items={items}
+				goToIteration={mockGoToIteration}
+				label={label}
+				locked={false}
+			/>
+		);
+
+		const button = getByText('Modifier');
+		fireEvent.click(button);
+
+		expect(mockGoToIteration).toHaveBeenCalledTimes(1);
+		expect(mockGoToIteration).toHaveBeenCalledWith(1);
+	});
+
+	it('it lock an iteration when finished and locked property is true', () => {
+		const { getByText } = render(
+			<CustomRoundabout
+				id="r1"
+				items={items}
+				goToIteration={mockGoToIteration}
+				locked={true}
+			/>
+		);
+
+		const completeButton = getByText('Complété');
+		expect(completeButton).toBeDisabled();
+	});
+});

package/src/components/Sequence/Sequence.tsx

@@ -0,0 +1,28 @@
+import type { LunaticComponentProps } from '../type';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { LabelDescription } from '../shared/LabelDescription';
+import { Declarations } from '../shared/Declarations/Declarations';
+
+function LunaticSequence({
+	label,
+	id,
+	style,
+	description,
+	declarations,
+}: LunaticComponentProps<'Sequence'>) {
+	return (
+		<>
+			<div className="sequence-lunatic" id={`sequence-${id}`} style={style}>
+				{label}
+			</div>
+			<LabelDescription value={description} />
+			<Declarations
+				type="AFTER_QUESTION_TEXT"
+				declarations={declarations}
+				id={id}
+			/>
+		</>
+	);
+}
+
+export const Sequence = slottableComponent('Sequence', LunaticSequence);

package/src/components/Subsequence/Subsequence.spec.tsx

@@ -0,0 +1,50 @@
+import { render } from '@testing-library/react';
+import { Subsequence } from './Subsequence';
+import { describe, it, expect } from 'vitest';
+describe('Sequence', () => {
+	const mockDeclarations = [
+		{
+			id: '1',
+			label: 'Declaration 1',
+			declarationType: 'COMMENT' as const,
+			position: 'AFTER_QUESTION_TEXT',
+		},
+	];
+	const mockProps = {
+		declarations: mockDeclarations,
+		id: 'test-subsequence',
+		label: 'Test Subsequence Label',
+		style: { backgroundColor: 'red' },
+	};
+
+	it('renders the label and declarations in the correct order', () => {
+		const { getByText, queryByText } = render(<Subsequence {...mockProps} />);
+		const subSequenceLabel = getByText('Test Subsequence Label');
+		const declaration1 = getByText('Declaration 1');
+
+		// Declarations before text should appear before the label
+		expect(declaration1).toBeInTheDocument();
+		expect(subSequenceLabel.nextSibling?.childNodes[0]).toBe(declaration1);
+
+		// Ensure no other declarations are rendered
+		expect(queryByText('Declaration 2')).toBeNull();
+	});
+
+	it('applies the correct aria-label', () => {
+		const { getByText } = render(<Subsequence {...mockProps} />);
+		const subSequenceLabel = getByText('Test Subsequence Label');
+		expect(subSequenceLabel).toHaveAttribute(
+			'aria-label',
+			'subsequence-test-subsequence'
+		);
+	});
+
+	it('does not render declarations if none are provided', () => {
+		const { queryByText } = render(
+			<Subsequence id="empty-subsequence" label="Empty Sequence" />
+		);
+		expect(queryByText('Declaration 1')).toBeNull();
+		expect(queryByText('Declaration 2')).toBeNull();
+		expect(queryByText('Declaration 3')).toBeNull();
+	});
+});

package/src/components/Subsequence/Subsequence.tsx

@@ -0,0 +1,34 @@
+import type { LunaticComponentProps } from '../type';
+import { Declarations } from '../shared/Declarations/Declarations';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { LabelDescription } from '../shared/LabelDescription';
+
+function LunaticSubsequence({
+	id,
+	label,
+	description,
+	declarations,
+}: LunaticComponentProps<'Subsequence'>) {
+	return (
+		<>
+			<div
+				aria-label={`subsequence-${id}`}
+				className="subsequence-lunatic"
+				id={`subsequence-${id}`}
+			>
+				{label}
+			</div>
+			<LabelDescription value={description} />
+			<Declarations
+				type="AFTER_QUESTION_TEXT"
+				declarations={declarations}
+				id={id}
+			/>
+		</>
+	);
+}
+
+export const Subsequence = slottableComponent(
+	'Subsequence',
+	LunaticSubsequence
+);

package/src/components/Suggester/CustomSuggester.tsx

@@ -0,0 +1,93 @@
+import { type ReactNode } from 'react';
+import { voidFunction } from '../../utils/function';
+import type { LunaticError } from '../../use-lunatic/type';
+import type { LunaticBaseProps, LunaticComponentProps } from '../type';
+import D from '../../i18n';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { Combobox } from '../shared/Combobox/Combobox';
+import type { SuggesterOptionType } from './SuggesterType';
+
+type Props = {
+	className?: string;
+	classNamePrefix?: string;
+	placeholder?: string;
+	onSelect: (option: SuggesterOptionType | null) => void;
+	onBlur: () => void;
+	onFocus: () => void;
+	value: [SuggesterOptionType] | [];
+	labelRenderer: LunaticComponentProps<'Suggester'>['labelRenderer'];
+	optionRenderer: LunaticComponentProps<'Suggester'>['optionRenderer'];
+	disabled?: boolean;
+	readOnly?: boolean;
+	id?: string;
+	label?: ReactNode;
+	declarations?: LunaticBaseProps['declarations'];
+	description?: ReactNode;
+	errors?: LunaticError[];
+	options: SuggesterOptionType[];
+	onSearch: (s: string) => void;
+	onClear: () => void;
+	search: string;
+	state: 'loading' | 'error' | 'success';
+};
+
+export const CustomSuggester = slottableComponent<Props>(
+	'Suggester',
+	({
+		className,
+		classNamePrefix = 'lunatic',
+		placeholder = D.PLACEHOLDER,
+		onSelect = voidFunction,
+		labelRenderer,
+		optionRenderer,
+		value,
+		disabled,
+		readOnly,
+		id,
+		search,
+		label,
+		declarations,
+		description,
+		errors,
+		options,
+		onSearch,
+		onBlur,
+		onClear,
+		state,
+		onFocus,
+	}) => {
+		const handleSelect = (id: string | null) => {
+			if (id === null) {
+				onClear();
+			} else {
+				onSelect(options.find((o) => o.id === id) ?? null);
+			}
+		};
+
+		return (
+			<Combobox
+				id={id}
+				isLoading={state === 'loading'}
+				className={className}
+				classNamePrefix={classNamePrefix}
+				onChange={(v) => onSearch(v ?? '')}
+				disabled={disabled}
+				readOnly={readOnly}
+				options={options.map((o) => ({ value: o.id, ...o }))}
+				editable={true}
+				onBlur={onBlur}
+				onFocus={onFocus}
+				onSelect={handleSelect}
+				value={value[0]?.id ?? ''}
+				search={search}
+				optionRenderer={optionRenderer}
+				labelRenderer={labelRenderer}
+				placeholder={placeholder}
+				label={label}
+				declarations={declarations}
+				description={description}
+				errors={errors}
+			/>
+		);
+	}
+);

package/src/components/Suggester/Suggester.tsx

@@ -0,0 +1,160 @@
+import { useState } from 'react';
+import type { LunaticComponentProps } from '../type';
+import { CustomSuggester } from './CustomSuggester';
+import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+import { OTHER_VALUE, useSuggestions } from './useSuggestions';
+import D from '../../i18n';
+import type { SuggesterOptionType } from './SuggesterType';
+
+export function Suggester({
+	storeName,
+	id,
+	className,
+	optionRenderer,
+	labelRenderer,
+	handleChanges,
+	disabled,
+	value,
+	label,
+	declarations,
+	description,
+	errors,
+	readOnly,
+	response,
+	optionResponses = [],
+	executeExpression,
+	iteration,
+	arbitrary,
+	arbitraryValue,
+}: LunaticComponentProps<'Suggester'>) {
+	// Default options should not change between render
+	// so we can break the rule of hooks here
+	const [selectedOptions, setSelectedOptions] = useState<
+		[SuggesterOptionType] | []
+	>(() => {
+		if (arbitraryValue) {
+			return [{ id: 'OTHER', label: arbitraryValue, value: 'OTHER' }];
+		}
+		if (!value) {
+			return [];
+		}
+		const labelResponse = optionResponses?.find((o) => o.attribute === 'label');
+		if (!labelResponse) {
+			return [{ id: value, label: value, value: value }];
+		}
+		const label = executeExpression(
+			{ value: labelResponse.name, type: 'VTL' },
+			{
+				iteration,
+			}
+		);
+		if (typeof label !== 'string') {
+			return [{ id: value, label: value, value: value }];
+		}
+		return [
+			{
+				id: value,
+				label: label,
+				value: value,
+			},
+		];
+	});
+
+	const { state, options, search, setSearch, onFocus, onBlur } = useSuggestions(
+		{
+			storeName: storeName,
+			allowArbitrary: !!arbitrary,
+			selectedOptions: selectedOptions,
+		}
+	);
+
+	const onChange = (v: SuggesterOptionType | null) => {
+		setSelectedOptions(v?.id ? [v] : []);
+		// User has selected an option
+		if (v?.id && v.id !== OTHER_VALUE) {
+			const newResponses: Parameters<typeof handleChanges>[0] = [
+				{ name: response.name, value: v.id },
+			];
+			if (arbitrary) {
+				newResponses.push({
+					name: arbitrary.response.name,
+					value: null,
+				});
+			}
+			// Update additional responses
+			for (const optionResponse of optionResponses) {
+				if (optionResponse.attribute in v) {
+					newResponses.push({
+						name: optionResponse.name,
+						value: v[optionResponse.attribute],
+					});
+				}
+			}
+			handleChanges(newResponses);
+			return;
+		}
+
+		// Use has selected the arbitrary value
+		const newResponses: Parameters<typeof handleChanges>[0] = [
+			{ name: response.name, value: null },
+		];
+		// User chose an arbitrary option or clear the value
+		if (arbitrary && arbitrary.response) {
+			newResponses.push({
+				name: arbitrary.response.name,
+				value: v?.id === OTHER_VALUE ? search : null,
+			});
+		}
+		for (const optionResponse of optionResponses) {
+			newResponses.push({ name: optionResponse.name, value: null });
+		}
+		handleChanges(newResponses);
+		onBlur();
+	};
+
+	const componentErrors = getComponentErrors(errors, id) ?? [];
+	if (state === 'error') {
+		componentErrors.push({
+			id: 'suggester',
+			errorMessage: D.SUGGESTER_ERROR,
+			criticality: 'ERROR',
+			typeOfControl: 'FORMAT',
+		});
+	}
+
+	const handleSearch = (query: string) => {
+		if (query === '' && selectedOptions.length > 0) {
+			onChange(null);
+		}
+		setSearch(query);
+	};
+
+	const handleClear = () => {
+		onChange(null);
+		setSearch('');
+	};
+
+	return (
+		<CustomSuggester
+			state={state}
+			id={id}
+			className={className}
+			optionRenderer={optionRenderer}
+			labelRenderer={labelRenderer}
+			options={options}
+			onSelect={onChange}
+			onFocus={onFocus}
+			search={search}
+			onSearch={handleSearch}
+			onClear={handleClear}
+			disabled={disabled}
+			readOnly={readOnly}
+			value={selectedOptions}
+			label={label}
+			onBlur={onBlur}
+			declarations={declarations}
+			description={description}
+			errors={componentErrors}
+		/>
+	);
+}

package/src/components/Suggester/SuggesterNotification.tsx

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+import { Notification } from '../shared/Notification';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { Label } from '../shared/Label/Label';
+
+type Props = {
+	status: 'Error' | 'Idle';
+	storeName: string;
+	label?: ReactNode;
+	description?: ReactNode;
+};
+
+function LunaticSuggesterNotification({
+	status,
+	storeName,
+	label,
+	description,
+}: Props) {
+	if (status === 'Idle') {
+		return (
+			<>
+				<Label description={description}>{label}</Label>
+				<Notification
+					className="info"
+					title={`Chargement : ${storeName}`}
+					description={`Votre référentiel est en cours de chargement. Vous pouvez poursuivre le questionnaire et revenir ultérieurement sur cette question.`}
+				/>
+			</>
+		);
+	}
+	if (status === 'Error') {
+		return (
+			<>
+				<Label description={description}>{label}</Label>
+				<Notification
+					className="error"
+					title={`Échec chargement`}
+					description={`Le référentiel ${storeName} n'a pas pu finir son chargement correctement.`}
+				/>
+			</>
+		);
+	}
+	return (
+		<>
+			<Label description={description}>{label}</Label>
+			<Notification
+				className="warn"
+				title={`Référentiel inconnu`}
+				description={`Le référentiel ${storeName} n'est pas pris en compte par l'application.`}
+			/>
+		</>
+	);
+}
+
+export const SuggesterNotification = slottableComponent(
+	'SuggesterNotification',
+	LunaticSuggesterNotification
+);

package/src/components/Suggester/SuggesterType.ts

@@ -0,0 +1,5 @@
+export type SuggesterOptionType = {
+	id: string;
+	label: string;
+	[k: string]: string;
+};