@inseefr/lunatic 3.4.5 → 3.4.6-rc.0

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,18 @@
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import type { LunaticComponentProps } from '../type';
+
+export const Accordion = slottableComponent<LunaticComponentProps<'Accordion'>>(
+	'Accordion',
+	function Accordion({ items }) {
+		return (
+			<div className="lunatic-accordion">
+				{items.map((item, k) => (
+					<details key={k}>
+						<summary>{item.label}</summary>
+						{item.body}
+					</details>
+				))}
+			</div>
+		);
+	}
+);

package/src/components/CheckboxBoolean/CheckboxBoolean.spec.tsx

@@ -0,0 +1,84 @@
+import { render, fireEvent } from '@testing-library/react';
+import { CheckboxBoolean } from './CheckboxBoolean';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+
+describe('CheckboxBoolean', () => {
+	const label = 'I accept the terms and conditions';
+	const description = 'You must accept the terms and conditions to continue.';
+	const handleChanges = vi.fn();
+	const response = { name: 'demo' };
+
+	afterEach(() => {
+		vi.resetAllMocks();
+	});
+
+	it('renders label ', () => {
+		const { getByText } = render(
+			<CheckboxBoolean
+				id="checkbox"
+				label={label}
+				value={true}
+				handleChanges={handleChanges}
+				response={response}
+			/>
+		);
+
+		expect(getByText(label)).toBeInTheDocument();
+	});
+
+	it('renders unchecked checkbox', () => {
+		const { getByRole } = render(
+			<CheckboxBoolean
+				id="checkbox"
+				label={label}
+				description={description}
+				value={false}
+				handleChanges={handleChanges}
+				response={response}
+			/>
+		);
+
+		const checkbox = getByRole('checkbox');
+
+		expect(checkbox).not.toBeChecked();
+		expect(checkbox).toBeEnabled();
+	});
+
+	it('renders checked checkbox', () => {
+		const { getByRole } = render(
+			<CheckboxBoolean
+				id={'checkbox'}
+				label={label}
+				description={description}
+				value={true}
+				handleChanges={handleChanges}
+				response={response}
+			/>
+		);
+
+		const checkbox = getByRole('checkbox');
+
+		expect(checkbox).toBeChecked();
+		expect(checkbox).toBeEnabled();
+	});
+
+	it('calls onClick when checkbox is clicked', () => {
+		const { getByRole } = render(
+			<CheckboxBoolean
+				id="checkbox"
+				label={label}
+				description={description}
+				value={false}
+				handleChanges={handleChanges}
+				response={response}
+			/>
+		);
+
+		const checkbox = getByRole('checkbox');
+
+		fireEvent.click(checkbox);
+
+		expect(handleChanges).toHaveBeenCalledTimes(1);
+		expect(handleChanges).toHaveBeenCalledWith([{ ...response, value: true }]);
+	});
+});

package/src/components/CheckboxBoolean/CheckboxBoolean.tsx

@@ -0,0 +1,81 @@
+import type { LunaticComponentProps } from '../type';
+import {
+	ComponentErrors,
+	getComponentErrors,
+} from '../shared/ComponentErrors/ComponentErrors';
+import { CheckboxOption } from '../shared/Checkbox/CheckboxOption';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { Declarations } from '../shared/Declarations/Declarations';
+import type { LunaticError } from '../../use-lunatic/type';
+
+export function CheckboxBoolean({
+	handleChanges,
+	response,
+	errors,
+	value,
+	...props
+}: LunaticComponentProps<'CheckboxBoolean'>) {
+	const checked = !!value;
+	return (
+		<CustomCheckboxBoolean
+			{...props}
+			checked={checked}
+			onChange={() =>
+				handleChanges([
+					{
+						name: response.name,
+						value: !checked,
+					},
+				])
+			}
+			errors={getComponentErrors(errors, props.id)}
+		/>
+	);
+}
+
+type CustomProps = Omit<
+	LunaticComponentProps<'CheckboxBoolean'>,
+	'response' | 'handleChanges' | 'errors' | 'value'
+> & {
+	onChange: () => void;
+	errors?: LunaticError[];
+	checked?: boolean;
+};
+
+export const CustomCheckboxBoolean = slottableComponent<CustomProps>(
+	'CheckboxBoolean',
+	(props) => {
+		const {
+			disabled,
+			checked,
+			id,
+			onChange,
+			label,
+			declarations,
+			description,
+			errors,
+		} = props;
+		return (
+			<div className="lunatic-checkbox-boolean">
+				<CheckboxOption
+					disabled={disabled}
+					checked={checked}
+					id={id}
+					onCheck={onChange}
+					label={
+						<>
+							{label}
+							<Declarations
+								type="AFTER_QUESTION_TEXT"
+								declarations={declarations}
+							/>
+						</>
+					}
+					description={description}
+					invalid={!!errors}
+				/>
+				<ComponentErrors errors={errors} />
+			</div>
+		);
+	}
+);

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,31 @@
+import type { LunaticComponentProps } from '../type';
+import { CustomCheckboxGroup } from './CustomCheckboxGroup';
+import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+
+export function CheckboxGroup({
+	id,
+	shortcut,
+	readOnly,
+	options,
+	disabled,
+	errors,
+	label,
+	description,
+	declarations,
+	orientation,
+}: LunaticComponentProps<'CheckboxGroup'>) {
+	return (
+		<CustomCheckboxGroup
+			id={id}
+			description={description}
+			options={options}
+			label={label}
+			errors={getComponentErrors(errors, id)}
+			shortcut={shortcut}
+			disabled={disabled}
+			readOnly={readOnly}
+			declarations={declarations}
+			orientation={orientation}
+		/>
+	);
+}

package/src/components/CheckboxGroup/CustomCheckboxGroup.spec.tsx

@@ -0,0 +1,51 @@
+import { render, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { CustomCheckboxGroup } from './CustomCheckboxGroup';
+
+describe('CheckboxGroupContent', () => {
+	const options = [
+		{
+			id: '1',
+			label: 'Option 1',
+			checked: false,
+			name: 'option1',
+			onCheck: vi.fn(),
+		},
+		{
+			id: '2',
+			label: 'Option 2',
+			checked: true,
+			name: 'option2',
+			onCheck: vi.fn(),
+		},
+		{
+			id: '3',
+			label: 'Option 3',
+			checked: false,
+			name: 'option3',
+			onCheck: vi.fn(),
+		},
+	];
+
+	it('calls onCheck callback when an option is clicked', () => {
+		const { getByLabelText } = render(
+			<CustomCheckboxGroup options={options} id="test-checkbox-group" />
+		);
+
+		const option1 = getByLabelText('Option 1');
+		const option2 = getByLabelText('Option 2');
+		const option3 = getByLabelText('Option 3');
+
+		fireEvent.click(option1);
+		expect(options[0].onCheck).toHaveBeenCalledTimes(1);
+		expect(options[0].onCheck).toHaveBeenCalledWith(true);
+
+		fireEvent.click(option2);
+		expect(options[1].onCheck).toHaveBeenCalledTimes(1);
+		expect(options[1].onCheck).toHaveBeenCalledWith(false);
+
+		fireEvent.click(option3);
+		expect(options[2].onCheck).toHaveBeenCalledTimes(1);
+		expect(options[2].onCheck).toHaveBeenCalledWith(true);
+	});
+});

package/src/components/CheckboxGroup/CustomCheckboxGroup.tsx

@@ -0,0 +1,84 @@
+import type { LunaticError } from '../../use-lunatic/type';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { ComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+import { Fieldset } from '../shared/Fieldset/Fieldset';
+import { CheckboxOption } from '../shared/Checkbox/CheckboxOption';
+import { getShortcutKey } from '../shared/Checkbox/getShortcutKey';
+import type { LunaticComponentProps } from '../type';
+import { Declarations } from '../shared/Declarations/Declarations';
+import { CustomInput } from '../Input/Input';
+
+type Props = Pick<
+	LunaticComponentProps<'CheckboxGroup'>,
+	| 'id'
+	| 'label'
+	| 'description'
+	| 'declarations'
+	| 'shortcut'
+	| 'readOnly'
+	| 'disabled'
+	| 'options'
+	| 'orientation'
+> & {
+	errors?: LunaticError[];
+};
+
+export const CustomCheckboxGroup = slottableComponent<Props>(
+	'CheckboxGroup',
+	({
+		options,
+		label,
+		description,
+		errors,
+		shortcut,
+		disabled,
+		readOnly,
+		declarations,
+		orientation,
+	}: Props) => {
+		return (
+			<Fieldset
+				className="lunatic-checkbox-group"
+				legend={label}
+				description={description}
+			>
+				<Declarations type="AFTER_QUESTION_TEXT" declarations={declarations} />
+				<div
+					className={`lunatic-checkboxes lunatic-checkboxes--${orientation}`}
+				>
+					{options.map((option, index) => {
+						return (
+							<div className={`lunatic-checkbox-group-option`} key={option.id}>
+								<CheckboxOption
+									{...option}
+									disabled={disabled}
+									readOnly={readOnly}
+									shortcut={shortcut}
+									invalid={!!errors}
+									id={option.id}
+									codeModality={
+										shortcut ? getShortcutKey(index, options.length) : undefined
+									}
+								/>
+								{option.onDetailChange && option.checked && (
+									<CustomInput
+										id="detailId"
+										label={option.detailLabel ?? 'Précisez :'}
+										value={
+											typeof option.detailValue === 'string'
+												? option.detailValue
+												: ''
+										}
+										onChange={option.onDetailChange}
+										disabled={disabled}
+									/>
+								)}
+							</div>
+						);
+					})}
+				</div>
+				<ComponentErrors errors={errors} />
+			</Fieldset>
+		);
+	}
+);

package/src/components/CheckboxOne/CheckboxOne.spec.tsx

@@ -0,0 +1,44 @@
+import { render, fireEvent } from '@testing-library/react';
+import { CheckboxOne } from './CheckboxOne';
+import { describe, it, expect, vi } from 'vitest';
+import type { InterpretedOption } from '../../use-lunatic/props/propOptions';
+describe('CheckboxOne component', () => {
+	const onCheck = vi.fn();
+	const options = [
+		{ label: 'Option 1', value: 'option-1', onCheck: onCheck, checked: false },
+		{ label: 'Option 2', value: 'option-2', onCheck: onCheck, checked: false },
+		{ label: 'Option 3', value: 'option-3', onCheck: onCheck, checked: false },
+	] satisfies InterpretedOption[];
+
+	it('renders the component with correct props', () => {
+		const { getByText } = render(
+			<CheckboxOne
+				options={options}
+				value="option-1"
+				id="checkbox-one"
+				handleChanges={onCheck}
+			/>
+		);
+
+		expect(getByText('Option 1')).toBeInTheDocument();
+		expect(getByText('Option 2')).toBeInTheDocument();
+		expect(getByText('Option 3')).toBeInTheDocument();
+	});
+
+	it('calls onSelect when an option is selected', () => {
+		const { getByText } = render(
+			<CheckboxOne
+				options={options}
+				value="option-1"
+				id="checkbox-one"
+				label="Checkbox One"
+				description="Choose one option"
+				handleChanges={onCheck}
+			/>
+		);
+
+		fireEvent.click(getByText('Option 2'));
+
+		expect(onCheck).toHaveBeenCalledTimes(1);
+	});
+});

package/src/components/CheckboxOne/CheckboxOne.tsx

@@ -0,0 +1,39 @@
+import { RadioGroup } from '../shared/Radio/RadioGroup';
+import type { LunaticComponentProps } from '../type';
+import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+
+/**
+ * Checkbox acting as a radio (only one option can be checked at a time)
+ */
+export function CheckboxOne({
+	options,
+	value,
+	id,
+	label,
+	description,
+	errors,
+	disabled,
+	readOnly,
+	shortcut,
+	declarations,
+	orientation,
+}: LunaticComponentProps<'CheckboxOne'>) {
+	return (
+		<RadioGroup
+			id={id}
+			className="lunatic-checkbox-one"
+			options={options}
+			value={value}
+			disabled={disabled}
+			readOnly={readOnly}
+			errors={getComponentErrors(errors, id)}
+			label={label}
+			description={description}
+			checkboxStyle={true}
+			shortcut={shortcut}
+			declarations={declarations}
+			orientation={orientation ?? 'vertical'}
+			clearable
+		/>
+	);
+}

package/src/components/Datepicker/Datepicker.spec.tsx

@@ -0,0 +1,105 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Datepicker } from './Datepicker';
+
+describe('Datepicker', () => {
+	const mockOnChange = vi.fn();
+	const baseProps = {
+		value: '1999-01-01',
+		executeExpression: vi.fn,
+		response: { name: 'demo' },
+		'aria-labelledby': 'datepicker',
+		id: 'datepicker',
+	};
+
+	beforeEach(() => {
+		mockOnChange.mockClear();
+	});
+
+	(['YYYY-MM-DD', 'YYYY-MM', 'YYYY'] as const).forEach((format) => {
+		it('should render properly with format ' + format, () => {
+			const { container } = render(
+				<Datepicker
+					{...baseProps}
+					handleChanges={mockOnChange}
+					dateFormat={format}
+				/>
+			);
+			expect(container).toMatchSnapshot();
+		});
+	});
+
+	it('handle change correctly for format YYYY-MM-DD', () => {
+		render(
+			<Datepicker
+				{...baseProps}
+				dateFormat="YYYY-MM-DD"
+				handleChanges={mockOnChange}
+			/>
+		);
+		fireEvent.change(screen.getByLabelText(/Année/), {
+			target: { valueAsNumber: 2023 },
+		});
+		expect(mockOnChange).toHaveBeenLastCalledWith([
+			{
+				...baseProps.response,
+				value: '2023-01-01',
+			},
+		]);
+		fireEvent.change(screen.getByLabelText(/Mois/), {
+			target: { valueAsNumber: 2 },
+		});
+		fireEvent.change(screen.getByLabelText(/Jour/), {
+			target: { valueAsNumber: 30 },
+		});
+		expect(mockOnChange).toHaveBeenLastCalledWith([
+			{ ...baseProps.response, value: null },
+		]);
+	});
+
+	it('handle change correctly for format YYYY-MM', () => {
+		render(
+			<Datepicker
+				{...baseProps}
+				dateFormat="YYYY-MM"
+				value="1999-01"
+				handleChanges={mockOnChange}
+			/>
+		);
+		fireEvent.change(screen.getByLabelText(/Année/), {
+			target: { valueAsNumber: 2023 },
+		});
+		expect(mockOnChange).toHaveBeenLastCalledWith([
+			{
+				...baseProps.response,
+				value: '2023-01',
+			},
+		]);
+		fireEvent.change(screen.getByLabelText(/Mois/), {
+			target: { valueAsNumber: 10 },
+		});
+		expect(mockOnChange).toHaveBeenLastCalledWith([
+			{
+				...baseProps.response,
+				value: '2023-10',
+			},
+		]);
+	});
+
+	it('handle change correctly for year YYYY', () => {
+		render(
+			<Datepicker
+				{...baseProps}
+				dateFormat="YYYY"
+				value="1999"
+				handleChanges={mockOnChange}
+			/>
+		);
+		fireEvent.change(screen.getByLabelText(/Année/), {
+			target: { valueAsNumber: 2023 },
+		});
+		expect(mockOnChange).toHaveBeenLastCalledWith([
+			{ ...baseProps.response, value: '2023' },
+		]);
+	});
+});

package/src/components/Datepicker/Datepicker.tsx

@@ -0,0 +1,165 @@
+import { useState } from 'react';
+import { DatepickerField } from './DatepickerField';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import type { LunaticComponentProps } from '../type';
+import { Label } from '../shared/Label/Label';
+import {
+	ComponentErrors,
+	getComponentErrors,
+} from '../shared/ComponentErrors/ComponentErrors';
+import { Declarations } from '../shared/Declarations/Declarations';
+import type { LunaticError } from '../../use-lunatic/type';
+
+export function Datepicker({
+	dateFormat = 'YYYY-MM-DD',
+	response,
+	handleChanges,
+	errors,
+	...props
+}: LunaticComponentProps<'Datepicker'>) {
+	return (
+		<CustomDatepicker
+			{...props}
+			dateFormat={dateFormat ?? 'YYYY-MM-DD'}
+			onChange={(value) => handleChanges([{ name: response.name, value }])}
+			errors={getComponentErrors(errors, props.id)}
+		/>
+	);
+}
+
+type CustomProps = Omit<
+	LunaticComponentProps<'Datepicker'>,
+	'response' | 'handleChanges' | 'errors'
+> & {
+	onChange: (s: string | null) => void;
+	errors?: LunaticError[];
+};
+
+export const CustomDatepicker = slottableComponent<CustomProps>(
+	'Datepicker',
+	(props) => {
+		const {
+			disabled,
+			readOnly,
+			value = '',
+			dateFormat = 'YYYY-MM-DD',
+			id,
+			label,
+			errors,
+			description,
+			declarations,
+			onChange,
+		} = props;
+		const labelId = `lunatic-datepicker-${id}`;
+		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 has a missing part
+			if (hasNaNIndex > -1 && hasNaNIndex <= formatParts.length - 1) {
+				onChange(null);
+				return;
+			}
+
+			// Date is not valid
+			if (dateFormat === 'YYYY-MM-DD' && !isDateValid(numbers)) {
+				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="lunatic-input">
+				<Label htmlFor={id} id={labelId} description={description}>
+					{label}
+				</Label>
+				<Declarations
+					type="AFTER_QUESTION_TEXT"
+					declarations={declarations}
+					id={id}
+				/>
+				<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: 07"
+							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>
+				<ComponentErrors errors={errors} />
+			</div>
+		);
+	}
+);
+
+function numbersFromDateString(s?: string): [number, number, number] {
+	if (!s) {
+		return [NaN, NaN, NaN];
+	}
+	const parts = s.split('-');
+	return [
+		parseInt(parts[0], 10),
+		parseInt(parts[1], 10),
+		parseInt(parts[2], 10),
+	];
+}
+
+function isDateValid(dateArray: [number, number, number]) {
+	const [year, month, day] = dateArray;
+	const date = new Date(year, month - 1, day);
+
+	return (
+		date.getFullYear() === year &&
+		date.getMonth() === month - 1 &&
+		date.getDate() === day
+	);
+}