@inseefr/lunatic 3.4.4 → 3.4.5-rc.0

package/src/components/shared/ModalControls/ModalControls.spec.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render } from '@testing-library/react';
+import { ModalControls } from './ModalControls';
+import { describe, expect, it, vi } from 'vitest';
+import type { LunaticError } from '../../../use-lunatic/type';
+
+describe('ModalControls component', () => {
+	it('should render correctly when there are errors', () => {
+		const errors = {
+			field1: [
+				{
+					id: 'message1',
+					criticality: 'ERROR',
+					errorMessage: 'Error message 1',
+					typeOfControl: 'CONSISTENCY',
+				},
+			],
+			field2: [
+				{
+					id: 'message2',
+					criticality: 'ERROR',
+					errorMessage: 'Error message 2',
+					typeOfControl: 'CONSISTENCY',
+				},
+			],
+		} satisfies Record<string, LunaticError[]>;
+		const goNext = vi.fn();
+		const { getByText } = render(
+			<ModalControls errors={errors} goNext={goNext} onClose={() => {}} />
+		);
+		expect(getByText('Error message 1')).toBeInTheDocument();
+		expect(getByText('Error message 2')).toBeInTheDocument();
+	});
+
+	it('should render correctly when there are no errors', () => {
+		const goNext = vi.fn();
+		const { queryByText } = render(
+			<ModalControls errors={{}} goNext={goNext} onClose={() => {}} />
+		);
+		expect(queryByText('Error message 1')).toBeNull();
+		expect(queryByText('Error message 2')).toBeNull();
+	});
+
+	it('should call the goNext function when the skip button is clicked', () => {
+		const errors = {
+			field1: [
+				{
+					criticality: 'ERROR',
+					errorMessage: 'Error message 1',
+					id: 'message1',
+					typeOfControl: 'CONSISTENCY',
+				},
+			],
+			field2: [
+				{
+					criticality: 'ERROR',
+					errorMessage: 'Error message 2',
+					id: 'message2',
+					typeOfControl: 'CONSISTENCY',
+				},
+			],
+		} satisfies Record<string, LunaticError[]>;
+		const goNext = vi.fn();
+		const { getByText } = render(
+			<ModalControls errors={errors} goNext={goNext} onClose={() => {}} />
+		);
+		fireEvent.click(getByText('Ignore'));
+		expect(goNext).toHaveBeenCalled();
+	});
+});

package/src/components/shared/ModalControls/ModalControls.tsx

@@ -0,0 +1,66 @@
+import classnames from 'classnames';
+import { type MouseEventHandler, type ReactPortal } from 'react';
+import type { LunaticError } from '../../../use-lunatic/type';
+import ReactDOM from 'react-dom';
+import { Button } from '../Button/Button';
+import D from '../../../i18n';
+
+type Props = {
+	goNext: MouseEventHandler;
+	onClose: MouseEventHandler;
+	isCritical?: boolean;
+	errors: Record<string, LunaticError[]>;
+};
+
+function ErrorItem({ criticality, errorMessage }: LunaticError) {
+	return <li className={classnames(criticality)}>{errorMessage}</li>;
+}
+
+function ComponentErrors({ errors }: { errors: LunaticError[] }) {
+	const content = errors.map(function (error, index) {
+		return <ErrorItem {...error} key={index} />;
+	}, []);
+	return <ul className={classnames('errors')}>{content}</ul>;
+}
+
+export function ModalControls(props: Props): ReactPortal | null {
+	if (typeof props.errors !== 'object') {
+		return null;
+	}
+
+	const errors = Object.values(props.errors).flat();
+
+	return ReactDOM.createPortal(
+		<div className="lunatic-modal-controls">
+			<div className="modal-content">
+				<div className="body">
+					<ComponentErrors errors={errors} />
+				</div>
+				<CloseOrSkip {...props} />
+			</div>
+		</div>,
+		document.body
+	);
+}
+
+function CloseOrSkip({ onClose, goNext, isCritical }: Props) {
+	if (isCritical) {
+		return (
+			<div className="modal-buttons">
+				<Button className="modal-button" onClick={onClose}>
+					{D.MODAL_CORRECT}
+				</Button>
+			</div>
+		);
+	}
+	return (
+		<div className="modal-buttons">
+			<Button className="modal-button" onClick={onClose}>
+				{D.MODAL_CORRECT}
+			</Button>
+			<Button className="modal-button" onClick={goNext}>
+				{D.MODAL_IGNORE}
+			</Button>
+		</div>
+	);
+}

package/src/components/shared/Notification.tsx

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import classnames from 'classnames';
+import { slottableComponent } from './HOC/slottableComponent';
+
+type Props = {
+	className?: string;
+	title: ReactNode;
+	description: ReactNode;
+};
+
+function LunaticNotification({ className, title, description }: Props) {
+	return (
+		<div className={classnames('lunatic-notification', className)}>
+			<div className="lunatic-notification-container">
+				<div className="title">{title}</div>
+				<div className="descripttion">{description}</div>
+			</div>
+		</div>
+	);
+}
+
+export const Notification = slottableComponent(
+	'Notification',
+	LunaticNotification
+);

package/src/components/shared/Radio/RadioGroup.tsx

@@ -0,0 +1,80 @@
+import { Fieldset } from '../Fieldset/Fieldset';
+import { ComponentErrors } from '../ComponentErrors/ComponentErrors';
+import { slottableComponent } from '../HOC/slottableComponent';
+import { getShortcutKey } from '../Checkbox/getShortcutKey';
+import { RadioOption } from './RadioOption';
+import { useListKeyboardHandler } from '../../../hooks/useListKeyboardHandler';
+import type { LunaticError } from '../../../use-lunatic/type';
+import { Declarations } from '../Declarations/Declarations';
+import type { LunaticComponentProps } from '../../type';
+
+export type RadioGroupProps = Pick<
+	LunaticComponentProps<'Radio'>,
+	| 'id'
+	| 'options'
+	| 'value'
+	| 'checkboxStyle'
+	| 'label'
+	| 'shortcut'
+	| 'className'
+	| 'disabled'
+	| 'readOnly'
+	| 'description'
+	| 'declarations'
+	| 'orientation'
+> & {
+	errors?: LunaticError[];
+	clearable?: boolean;
+};
+
+/**
+ * Stack of radios fields surrounded by a fieldset
+ */
+function LunaticRadioGroup({
+	options,
+	value,
+	id,
+	label,
+	description,
+	checkboxStyle = false,
+	errors,
+	className,
+	shortcut,
+	disabled,
+	readOnly,
+	declarations,
+	orientation,
+}: RadioGroupProps) {
+	const onKeyDown = useListKeyboardHandler(options);
+	const maxIndex = options.length;
+	return (
+		<Fieldset className={className} legend={label} description={description}>
+			<Declarations type="AFTER_QUESTION_TEXT" declarations={declarations} />
+			<div className={`lunatic-checkboxes lunatic-checkboxes--${orientation}`}>
+				{options.map(function (option, index) {
+					const radioId = `lunatic-radio-${id}-${option.value}`;
+					const codeModality = getShortcutKey(index, maxIndex);
+					return (
+						<RadioOption
+							{...option}
+							key={radioId}
+							id={radioId}
+							index={index}
+							checked={value === option.value}
+							onKeyDown={onKeyDown}
+							checkboxStyle={checkboxStyle}
+							codeModality={shortcut ? codeModality : undefined}
+							shortcut={shortcut}
+							disabled={disabled}
+							readOnly={readOnly}
+							invalid={!!errors}
+						/>
+					);
+				})}
+			</div>
+			<ComponentErrors errors={errors} />
+		</Fieldset>
+	);
+}
+
+export const RadioGroup = slottableComponent('RadioGroup', LunaticRadioGroup);

package/src/components/shared/Radio/RadioOption.spec.tsx

@@ -0,0 +1,76 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { RadioOption } from './RadioOption';
+import { describe, it, expect, vi } from 'vitest';
+
+describe('RadioOption', () => {
+	it('renders the component with the correct label', () => {
+		const label = 'Test Option';
+		const { getByText } = render(
+			<RadioOption id="radio-option" label={label} />
+		);
+		expect(getByText(label)).toBeInTheDocument();
+	});
+
+	it('calls the onClick handler when clicked', () => {
+		const onClickMock = vi.fn();
+		render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onCheck={onClickMock}
+			/>
+		);
+		const option = screen.getByRole('radio');
+		fireEvent.click(option);
+		expect(onClickMock).toHaveBeenCalled();
+	});
+
+	it('sets the tabIndex to 0 when unchecked', () => {
+		const { getByRole } = render(
+			<RadioOption id="radio-option" label="Test Option" checked={false} />
+		);
+		expect(getByRole('radio')).toHaveAttribute('tabIndex', '0');
+	});
+
+	it('sets the tabIndex to -1 when checked', () => {
+		const { getByRole } = render(
+			<RadioOption id="radio-option" label="Test Option" checked={true} />
+		);
+		expect(getByRole('radio')).toHaveAttribute('tabIndex', '-1');
+	});
+
+	it('applies the disabled aria when disabled prop is present', () => {
+		const { getByRole } = render(
+			<RadioOption id="radio-option" label="Test Option" disabled />
+		);
+		expect(getByRole('radio')).toHaveAttribute('aria-disabled');
+	});
+
+	it('applies the checked aria when checked prop is present', () => {
+		const { getByRole } = render(
+			<RadioOption id="radio-option" label="Test Option" checked={true} />
+		);
+		expect(getByRole('radio')).toHaveAttribute('aria-checked', 'true');
+	});
+
+	it('applies the code-modality class when codeModality prop is present', () => {
+		const { getByText } = render(
+			<RadioOption id="radio-option" label="Test Option" codeModality="html" />
+		);
+		expect(getByText('HTML')).toHaveClass('code-modality');
+	});
+
+	it('calls the onKeyDown handler when a key is pressed', () => {
+		const onKeyDownMock = vi.fn();
+		render(
+			<RadioOption
+				id="radio-option"
+				label="Test Option"
+				onKeyDown={onKeyDownMock}
+			/>
+		);
+		const option = screen.getByRole('radio');
+		fireEvent.keyDown(option, { key: 'Enter', code: 'Enter' });
+		expect(onKeyDownMock).toHaveBeenCalled();
+	});
+});

package/src/components/shared/Radio/RadioOption.tsx

@@ -0,0 +1,132 @@
+import { type KeyboardEventHandler, useEffect, useRef } from 'react';
+import { slottableComponent } from '../HOC/slottableComponent';
+import { useKeyboardKey } from '../../../hooks/useKeyboardKey';
+import { Label } from '../Label/Label';
+import classnames from 'classnames';
+import { CustomInput } from '../../Input/Input';
+import type { InterpretedOption } from '../../../use-lunatic/props/propOptions';
+
+export type Props = {
+	id: string;
+	onKeyDown?: (v: { key: string; index: number }) => void;
+	checkboxStyle?: boolean;
+	shortcut?: boolean;
+	disabled?: boolean;
+	readOnly?: boolean;
+	index?: number;
+	labelledBy?: string;
+	codeModality?: string;
+	invalid?: boolean;
+} & InterpretedOption;
+
+function LunaticRadioOption({
+	checked,
+	disabled,
+	readOnly,
+	checkboxStyle,
+	value,
+	onKeyDown,
+	index,
+	shortcut,
+	codeModality,
+	id,
+	labelledBy,
+	description,
+	label,
+	onDetailChange,
+	detailLabel,
+	detailValue,
+	onCheck,
+}: Props) {
+	const divEl = useRef<HTMLDivElement>(null);
+	const isEnabled = !disabled && !readOnly;
+	const isRadio = !checkboxStyle;
+	const hasDetail = !!onDetailChange;
+
+	const onClickOption = () => {
+		if (!isEnabled || !onCheck || checked) {
+			return;
+		}
+		onCheck();
+	};
+
+	const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {
+		onKeyDown?.({ key: e.key, index: index ?? -1 });
+		divEl.current?.blur();
+	};
+
+	useEffect(
+		function () {
+			const { current } = divEl;
+			if (current && checked) {
+				current.focus();
+			}
+		},
+		[checked, divEl, value]
+	);
+
+	const hasKeyboardShortcut = Boolean(shortcut && codeModality && isEnabled);
+	useKeyboardKey(
+		codeModality ? [codeModality] : [],
+		(e) => {
+			e.preventDefault();
+			onClickOption();
+		},
+		hasKeyboardShortcut
+	);
+
+	return (
+		<div className="lunatic-input-checkbox-wrapper">
+			<div
+				id={id}
+				role="radio"
+				aria-disabled={disabled}
+				className={classnames(
+					'lunatic-input-checkbox',
+					isRadio && 'lunatic-input-radio'
+				)}
+				aria-checked={checked}
+				tabIndex={checked ? -1 : 0}
+				onClick={onClickOption}
+				onKeyDown={handleKeyDown}
+				aria-labelledby={labelledBy}
+				ref={divEl}
+			>
+				<div className="lunatic-input-checkbox__icon">
+					{checked && checkboxStyle && (
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 14 11"
+						>
+							<path
+								d="M5 11 0 6l1.4-1.4L5 8.2 12.6.6 14 2l-9 9Z"
+								fill="currentColor"
+							/>
+						</svg>
+					)}
+				</div>
+				<Label id={labelledBy} htmlFor={id} description={description}>
+					{codeModality && (
+						<span className="code-modality">{codeModality.toUpperCase()}</span>
+					)}
+					{label}
+				</Label>
+			</div>
+			{hasDetail && checked && (
+				<CustomInput
+					id="detailId"
+					label={detailLabel ?? 'Précisez :'}
+					value={typeof detailValue === 'string' ? detailValue : ''}
+					onChange={onDetailChange}
+					disabled={disabled}
+				/>
+			)}
+		</div>
+	);
+}
+
+export const RadioOption = slottableComponent(
+	'RadioOption',
+	LunaticRadioOption
+);

package/src/components/shared/Table/Table.spec.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { Table } from './Table';
+import { expect, it, describe } from 'vitest';
+
+describe('Table', () => {
+	it('renders without crashing', () => {
+		const { getByRole } = render(<Table id="test-table" />);
+		expect(getByRole('table')).toBeInTheDocument();
+	});
+
+	it('applies custom className when provided', () => {
+		const { getByRole } = render(
+			<Table id="test-table" className="custom-class" />
+		);
+		expect(getByRole('table')).toHaveClass('custom-class');
+	});
+});

package/src/components/shared/Table/Table.tsx

@@ -0,0 +1,48 @@
+import React, { type PropsWithChildren } from 'react';
+import classnames from 'classnames';
+import { slottableComponent } from '../HOC/slottableComponent';
+import type { LunaticError } from '../../../use-lunatic/type';
+import { ComponentErrors } from '../ComponentErrors/ComponentErrors';
+import type { LunaticComponentProps } from '../../type';
+import { Label } from '../Label/Label';
+import { Declarations } from '../Declarations/Declarations';
+
+type Props = PropsWithChildren<
+	Pick<
+		LunaticComponentProps<'Table'>,
+		'className' | 'id' | 'label' | 'declarations'
+	> & {
+		errors?: LunaticError[];
+	}
+>;
+
+function LunaticTable({
+	id,
+	className,
+	children,
+	errors,
+	declarations,
+	label,
+}: Props) {
+	const tableId = `table-${id}`;
+	const labelId = `label-${id}`;
+
+	return (
+		<>
+			<Label htmlFor={tableId} id={labelId}>
+				{label}
+			</Label>
+			<Declarations
+				type="AFTER_QUESTION_TEXT"
+				declarations={declarations}
+				id={id}
+			/>
+			<table id={tableId} className={classnames('lunatic-table', className)}>
+				{children}
+			</table>
+			<ComponentErrors errors={errors} />
+		</>
+	);
+}
+
+export const Table = slottableComponent('Table', LunaticTable);

package/src/components/shared/Table/TableHeader.tsx

@@ -0,0 +1,24 @@
+import type { LunaticComponentProps } from '../../type';
+import { Th } from './Th';
+import { Thead } from './Thead';
+import { Tr } from './Tr';
+
+export function TableHeader({
+	header,
+}: Pick<LunaticComponentProps<'Table'>, 'header'>) {
+	if (!Array.isArray(header)) {
+		return null;
+	}
+	const content = header.map(function ({ label, rowspan, colspan }, index) {
+		return (
+			<Th row={0} index={index} rowSpan={rowspan} colSpan={colspan} key={index}>
+				{label}
+			</Th>
+		);
+	});
+	return (
+		<Thead>
+			<Tr row={0}>{content}</Tr>
+		</Thead>
+	);
+}

package/src/components/shared/Table/Tbody.spec.tsx

@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import { Tbody } from './Tbody';
+import { expect, describe, it } from 'vitest';
+
+describe('Tbody component', () => {
+	it('renders the component with the correct props and children', () => {
+		const testClass = 'test-class';
+		const testContent = 'Test content';
+		const { getByRole, getByText } = render(
+			<Tbody className={testClass}>{testContent}</Tbody>
+		);
+		const tbodyElement = getByRole('rowgroup');
+		expect(tbodyElement).toHaveClass('lunatic-table-tbody');
+		expect(tbodyElement).toHaveClass(testClass);
+		expect(getByText(testContent)).toBeInTheDocument();
+	});
+
+	it('renders the component without an ID or class when not provided', () => {
+		const { getByRole } = render(<Tbody />);
+		const tbodyElement = getByRole('rowgroup');
+		expect(tbodyElement).not.toHaveAttribute('id');
+		expect(tbodyElement).toHaveClass('lunatic-table-tbody');
+	});
+});

package/src/components/shared/Table/Tbody.tsx

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import classnames from 'classnames';
+import { slottableComponent } from '../HOC/slottableComponent';
+
+type Props = PropsWithChildren<{
+	className?: string;
+}>;
+
+function LunaticTbody({ className, children }: Props) {
+	return (
+		<tbody className={classnames('lunatic-table-tbody', className)}>
+			{children}
+		</tbody>
+	);
+}
+
+export const Tbody = slottableComponent('Tbody', LunaticTbody);

package/src/components/shared/Table/Td.spec.tsx

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import { Td } from './Td';
+import { describe, expect, it } from 'vitest';
+
+describe('Td', () => {
+	it('renders a td element with the correct props and children', () => {
+		const row = 1;
+		const index = 2;
+		const className = 'test-class';
+		const colSpan = 2;
+		const rowSpan = 3;
+		const children = 'Test content';
+		const { getByRole } = render(
+			<table>
+				<tbody>
+					<tr>
+						<Td
+							id="a"
+							row={row}
+							index={index}
+							className={className}
+							colSpan={colSpan}
+							rowSpan={rowSpan}
+						>
+							{children}
+						</Td>
+					</tr>
+				</tbody>
+			</table>
+		);
+		const td = getByRole('cell', { name: children });
+		expect(td).toHaveClass('lunatic-table-td');
+		expect(td).toHaveClass(className);
+		expect(td).toHaveAttribute('colspan', colSpan.toString());
+		expect(td).toHaveAttribute('rowspan', rowSpan.toString());
+	});
+});

package/src/components/shared/Table/Td.tsx

@@ -0,0 +1,28 @@
+import classnames from 'classnames';
+import type { PropsWithChildren } from 'react';
+import { slottableComponent } from '../HOC/slottableComponent';
+import type { LunaticComponentProps } from '../../type';
+
+type Props = PropsWithChildren<
+	{
+		className?: string;
+		row?: string | number;
+		index?: string | number;
+		colSpan?: number;
+		rowSpan?: number;
+	} & LunaticComponentProps
+>;
+
+function LunaticTd({ children, className, colSpan, rowSpan }: Props) {
+	return (
+		<td
+			className={classnames('lunatic-table-td', className)}
+			colSpan={colSpan}
+			rowSpan={rowSpan}
+		>
+			{children}
+		</td>
+	);
+}
+
+export const Td = slottableComponent('Td', LunaticTd);

package/src/components/shared/Table/Th.spec.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import { Th } from './Th';
+import { expect, describe, it } from 'vitest';
+
+describe('<Th />', () => {
+	const props = {
+		index: 1,
+		colSpan: 2,
+		rowSpan: 3,
+		className: 'test-class',
+		children: 'test children',
+	};
+
+	it('renders children', () => {
+		const { getByRole } = render(
+			<table>
+				<tr>
+					<Th {...props} />
+				</tr>
+			</table>
+		);
+		expect(getByRole('columnheader')).toHaveTextContent(props.children);
+	});
+
+	it('renders with correct attributes', () => {
+		const { getByRole } = render(
+			<table>
+				<tr>
+					<Th {...props} />
+				</tr>
+			</table>
+		);
+		const th = getByRole('columnheader');
+		expect(th).toHaveAttribute('colSpan', props.colSpan.toString());
+		expect(th).toHaveAttribute('rowSpan', props.rowSpan.toString());
+		expect(th).toHaveClass(props.className);
+	});
+});