@inseefr/lunatic 3.4.5 → 3.4.6

package/src/components/Suggester/useSuggestions.ts

@@ -0,0 +1,113 @@
+import { useEffect, useState } from 'react';
+import type { SuggesterOptionType } from './SuggesterType';
+import { useEffectDebounced } from '../../hooks/useDebounce';
+import { getSearchForStore } from '../../utils/search/SuggestersDatabase';
+import { useRefSync } from '../../hooks/useRefSync';
+
+type Props = {
+	storeName: string;
+	selectedOptions: SuggesterOptionType[];
+	allowArbitrary: boolean;
+};
+
+export const OTHER_VALUE = 'OTHER';
+
+type State = 'success' | 'loading' | 'error';
+
+export function useSuggestions({
+	storeName,
+	selectedOptions,
+	allowArbitrary,
+}: Props) {
+	const [searchQuery, setSearchQuery] = useState('');
+	const store = getSearchForStore(storeName);
+	const searchIndexRef = useRefSync(store.index);
+	// eslint-disable-next-line prefer-const
+	let [options, setOptions] = useState(selectedOptions);
+	const [state, setState] = useState<State>(
+		store.error !== null
+			? 'error'
+			: store.search.isIndexed()
+				? 'success'
+				: 'loading'
+	);
+
+	// Index the data when the component is loaded
+	useEffect(() => {
+		if (!searchIndexRef.current) {
+			return;
+		}
+		searchIndexRef
+			.current()
+			.then(() => {
+				setState('success');
+			})
+			.catch(() => {
+				setState('error');
+			});
+	}, [searchIndexRef]);
+
+	useEffectDebounced(
+		() => {
+			// Do not reset search for empty search
+			if (!searchQuery) {
+				return;
+			}
+			store.search
+				?.search(searchQuery)
+				.then((r) => {
+					setOptions(r);
+					setState('success');
+				})
+				.catch(() => setState('error'));
+		},
+		[searchQuery],
+		300
+	);
+
+	if (
+		searchQuery &&
+		allowArbitrary &&
+		options.length === 0 &&
+		state !== 'loading'
+	) {
+		options = [
+			{
+				id: OTHER_VALUE,
+				label: searchQuery,
+				value: OTHER_VALUE,
+			},
+		];
+	}
+
+	// Since the underlying implementation of onFocus / onBlur can be wrong, ensure we don't call focus / blur handler multiple times
+	const [isFocused, setFocused] = useState(false);
+
+	return {
+		search: searchQuery,
+		setSearch: (s: string) => {
+			if (s.length > 0 && !isFocused) {
+				setFocused(true);
+			}
+			// setState('loading'); // Current implementation being sync, we won't need to show a "loading" state
+			setSearchQuery(s);
+		},
+		state,
+		options: isFocused ? options : selectedOptions,
+		onBlur: () => {
+			setFocused(false);
+			setSearchQuery('');
+			// Prevent extra calls
+			if (!isFocused) {
+				return;
+			}
+			setOptions(selectedOptions);
+		},
+		onFocus: () => {
+			if (!isFocused) {
+				setFocused(true);
+				setSearchQuery(selectedOptions[0]?.label ?? '');
+			}
+		},
+	};
+}

package/src/components/Summary/Summary.tsx

@@ -0,0 +1,121 @@
+import type { LunaticComponentProps, VtlExpression } from '../type';
+import { type ReactNode } from 'react';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+
+type Section = {
+	id?: string;
+	title?: ReactNode;
+	values?: Array<{ label: ReactNode; value: ReactNode; id: string }>;
+};
+
+/**
+ * Summarize the responses done by the user
+ */
+export function Summary(props: LunaticComponentProps<'Summary'>) {
+	const { executeExpression, label, sections } = props;
+
+	const compiledSections = sections.reduce((acc, section) => {
+		const { iterations, title, responses, id } = section;
+		if (iterations) {
+			const compiledIterations: number = executeExpression(iterations);
+			if (responses) {
+				const elements = Array(compiledIterations)
+					.fill(null)
+					.map(function (_, iteration) {
+						return {
+							values: interpretResponses(
+								responses,
+								executeExpression,
+								iteration
+							),
+							title: interpretTitle(title, executeExpression, iteration),
+							id: id,
+						};
+					});
+				return [...acc, ...elements];
+			}
+		}
+		if (responses) {
+			const element = {
+				title: interpretTitle(title, executeExpression),
+				values: interpretResponses(responses, executeExpression, undefined),
+				id: id,
+			};
+			return [...acc, element];
+		}
+		return acc;
+	}, [] as Section[]);
+
+	return (
+		<div className="lunatic-summary-container">
+			{label && <SummaryTitle label={label} />}
+			<SummaryResponses sections={compiledSections} />
+		</div>
+	);
+}
+
+/**
+ * Title displayed on top of the Summary
+ */
+export const SummaryTitle = slottableComponent<{ label: ReactNode }>(
+	'SummaryTitle',
+	({ label }) => <div className="lunatic-summary-label">{label}</div>
+);
+
+export const SummaryResponses = slottableComponent<{ sections: Section[] }>(
+	'SummaryResponses',
+	({ sections }) => {
+		return (
+			<>
+				{sections.map((section, index) => (
+					<div
+						key={`${section.id}-${index}`}
+						className="lunatic-summary-responses-iteration"
+					>
+						{section.title}
+						{section.values && (
+							<ul>
+								{section.values.map((value) => (
+									<li key={`response-${index}`}>
+										{value.label} : {value.value}
+									</li>
+								))}
+							</ul>
+						)}
+					</div>
+				))}
+			</>
+		);
+	}
+);
+
+function interpretTitle(
+	title: VtlExpression | undefined,
+	executeExpression: LunaticComponentProps<'Summary'>['executeExpression'],
+	iteration?: number | undefined
+): ReactNode {
+	if (!title && iteration) {
+		return `Valeur pour ${iteration + 1}`;
+	}
+	if (!title) {
+		return `Valeurs renseignés :`;
+	}
+	const hasIteration = iteration || iteration === 0;
+	return executeExpression(title, hasIteration ? { iteration } : {});
+}
+
+function interpretResponses(
+	responses: Array<{ label: VtlExpression; value: VtlExpression; id: string }>,
+	executeExpression: LunaticComponentProps<'Summary'>['executeExpression'],
+	iteration?: number
+) {
+	if (!responses) {
+		return [];
+	}
+	const option = iteration || iteration === 0 ? iteration : undefined;
+	return responses.map((r) => ({
+		label: executeExpression<ReactNode>(r.label, { iteration: option }),
+		value: executeExpression<ReactNode>(r.value, { iteration: option }),
+		id: r.id,
+	}));
+}

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,108 @@
+import type { LunaticComponentProps } from '../type';
+import {
+	ComponentErrors,
+	getComponentErrors,
+} from '../shared/ComponentErrors/ComponentErrors';
+import React, { type KeyboardEvent } from 'react';
+import classnames from 'classnames';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { Label } from '../shared/Label/Label';
+import { Declarations } from '../shared/Declarations/Declarations';
+import type { LunaticError } from '../../use-lunatic/type';
+
+const defaultLabel = { true: 'True', false: 'False' };
+
+function LunaticSwitch({
+	handleChanges,
+	response,
+	errors,
+	value,
+	statusLabel,
+	...props
+}: LunaticComponentProps<'Switch'>) {
+	const checked = value ?? false;
+	return (
+		<CustomSwitch
+			{...props}
+			statusLabel={statusLabel ?? defaultLabel}
+			checked={value ?? false}
+			onChange={() => handleChanges([{ name: response.name, value: !checked }])}
+			errors={getComponentErrors(errors, props.id)}
+		/>
+	);
+}
+
+type CustomProps = Omit<
+	LunaticComponentProps<'Switch'>,
+	'response' | 'handleChanges' | 'errors' | 'value'
+> & {
+	onChange: () => void;
+	errors?: LunaticError[];
+	checked: boolean;
+};
+
+export const CustomSwitch = slottableComponent<CustomProps>(
+	'Switch',
+	(props) => {
+		const {
+			id,
+			onChange,
+			checked,
+			statusLabel = defaultLabel,
+			label,
+			errors,
+			disabled,
+			declarations,
+		} = props;
+		const { true: labelTrue, false: labelFalse } = statusLabel;
+		const labelId = `lunatic-switch-label-${id}`;
+		const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+			const { code } = e;
+			if (code === 'Space') {
+				onChange();
+			}
+		};
+		return (
+			<>
+				<Label htmlFor={id} id={labelId}>
+					{label}
+				</Label>
+				<Declarations
+					type="AFTER_QUESTION_TEXT"
+					declarations={declarations}
+					id={id}
+				/>
+				<div className="lunatic-switch" id={id}>
+					<div
+						className={classnames('lunatic-switch-label', {
+							checked: !checked,
+						})}
+					>
+						{labelFalse}
+					</div>
+					<div
+						role="switch"
+						aria-checked={checked}
+						aria-invalid={!!errors}
+						tabIndex={0}
+						className={classnames('lunatic-switch-container', {
+							disabled,
+							checked,
+						})}
+						onClick={onChange}
+						onKeyDown={handleKeyDown}
+						aria-labelledby={labelId}
+					>
+						<div className="lunatic-switch-button"></div>
+					</div>
+					<div className={classnames('lunatic-switch-label', { checked })}>
+						{labelTrue}
+					</div>
+				</div>
+				<ComponentErrors errors={errors} />
+			</>
+		);
+	}
+);
+
+export const Switch = slottableComponent('Switch', LunaticSwitch);

package/src/components/Table/Table.tsx

@@ -0,0 +1,48 @@
+import type { LunaticComponentProps } from '../type';
+import { LunaticComponents } from '../LunaticComponents';
+import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+import {
+	Td,
+	Tbody,
+	Tr,
+	TableHeader,
+	Table as BaseTable,
+} from '../shared/Table';
+import type { PropsWithChildren } from 'react';
+
+export function Table(props: LunaticComponentProps<'Table'>) {
+	const { id, body, header, errors, declarations, label } = props;
+
+	return (
+		<BaseTable
+			id={id}
+			errors={getComponentErrors(errors, id)}
+			declarations={declarations}
+			label={label}
+		>
+			<TableHeader header={header} />
+			<Tbody>
+				{body.map((row, rowIndex) => (
+					<Tr row={rowIndex} key={rowIndex}>
+						<LunaticComponents<
+							PropsWithChildren<{
+								colspan?: number;
+								rowspan?: number;
+							}>
+						>
+							components={row}
+							wrapper={({ colspan, rowspan, ...props }) => (
+								<Td
+									row={rowIndex}
+									colSpan={colspan}
+									rowSpan={rowspan}
+									{...props}
+								/>
+							)}
+						/>
+					</Tr>
+				))}
+			</Tbody>
+		</BaseTable>
+	);
+}

package/src/components/Text/Text.tsx

@@ -0,0 +1,5 @@
+import type { LunaticComponentProps } from '../type';
+
+export function Text({ label }: LunaticComponentProps<'Text'>) {
+	return label;
+}

package/src/components/Textarea/Textarea.spec.tsx

@@ -0,0 +1,46 @@
+import { render } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Textarea } from './Textarea';
+
+describe('Textarea', () => {
+	const mockOnChange = vi.fn();
+
+	const baseProps = {
+		value: 'input',
+		id: 'input',
+		'aria-labelledby': 'input',
+		handleChanges: mockOnChange,
+		response: { name: 'demo' },
+	};
+
+	beforeEach(() => {
+		mockOnChange.mockClear();
+	});
+
+	it('renders without crashing', () => {
+		const { container } = render(<Textarea {...baseProps} />);
+		expect(container).toMatchSnapshot();
+	});
+
+	it('should handle readOnly', () => {
+		const { container } = render(
+			<Textarea
+				{...baseProps}
+				id="textarea"
+				value={
+					'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+				}
+				readOnly
+			/>
+		);
+		expect(container).toMatchSnapshot();
+
+		const input = container.querySelector('textarea');
+		expect(input).toHaveAttribute('readonly');
+		(input as HTMLElement).focus();
+		expect(input).toHaveFocus();
+		expect(input).toHaveValue(
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+		);
+	});
+});

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,82 @@
+import type { LunaticComponentProps } from '../type';
+import { Label } from '../shared/Label/Label';
+import {
+	ComponentErrors,
+	getComponentErrors,
+} from '../shared/ComponentErrors/ComponentErrors';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { Declarations } from '../shared/Declarations/Declarations';
+import type { LunaticError } from '../../use-lunatic/type';
+
+export function Textarea({
+	handleChanges,
+	response,
+	errors,
+	...props
+}: LunaticComponentProps<'Textarea'>) {
+	return (
+		<CustomTextarea
+			{...props}
+			onChange={(value) => handleChanges([{ name: response.name, value }])}
+			errors={getComponentErrors(errors, props.id)}
+		/>
+	);
+}
+
+type CustomProps = Omit<
+	LunaticComponentProps<'Textarea'>,
+	'response' | 'handleChanges' | 'errors'
+> & {
+	onChange: (v: string) => void;
+	errors?: LunaticError[];
+};
+
+export const CustomTextarea = slottableComponent<CustomProps>(
+	'Textarea',
+	(props) => {
+		const {
+			value,
+			onChange,
+			disabled,
+			required,
+			maxLength,
+			label,
+			description,
+			id,
+			errors,
+			readOnly,
+			declarations,
+			rows,
+			cols,
+			placeHolder,
+		} = props;
+		const labelId = `label-${id}`;
+
+		return (
+			<div className="lunatic-textarea">
+				<Label htmlFor={id} id={labelId} description={description}>
+					{label}
+				</Label>
+				<Declarations
+					type="AFTER_QUESTION_TEXT"
+					declarations={declarations}
+					id={id}
+				/>
+				<textarea
+					required={required}
+					disabled={disabled}
+					id={id}
+					rows={rows}
+					maxLength={maxLength}
+					cols={cols}
+					onChange={(e) => onChange(e.target.value)}
+					value={value ?? ''}
+					placeholder={placeHolder}
+					readOnly={readOnly}
+					aria-invalid={!!errors}
+				/>
+				<ComponentErrors errors={errors} />
+			</div>
+		);
+	}
+);

package/src/components/Textarea/__snapshots__/Textarea.spec.tsx.snap

@@ -0,0 +1,32 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Textarea > renders without crashing 1`] = `
+<div>
+  <div
+    class="lunatic-textarea"
+  >
+    <textarea
+      aria-invalid="false"
+      id="input"
+    >
+      input
+    </textarea>
+  </div>
+</div>
+`;
+
+exports[`Textarea > should handle readOnly 1`] = `
+<div>
+  <div
+    class="lunatic-textarea"
+  >
+    <textarea
+      aria-invalid="false"
+      id="textarea"
+      readonly=""
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </textarea>
+  </div>
+</div>
+`;

package/src/components/library.ts

@@ -0,0 +1,58 @@
+import { Sequence } from './Sequence/Sequence';
+import { Subsequence } from './Subsequence/Subsequence';
+import { RosterForLoop } from './RosterForLoop/RosterForLoop';
+import { Table } from './Table/Table';
+import { Datepicker } from './Datepicker/Datepicker';
+import { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
+import { CheckboxBoolean } from './CheckboxBoolean/CheckboxBoolean';
+import { Radio } from './Radio/Radio';
+import { Input } from './Input/Input';
+import { Accordion } from './Accordion/Accordion';
+import { Text } from './Text/Text';
+import { Textarea } from './Textarea/Textarea';
+import type { LunaticComponentProps, LunaticComponentType } from './type';
+import type { ComponentType } from 'react';
+import { Switch } from './Switch/Switch';
+import { FilterDescription } from './FilterDescription/FilterDescription';
+import { Question } from './Question/Question';
+import { InputNumber } from './InputNumber/InputNumber';
+import { Duration } from './Duration/Duration';
+import { Loop } from './Loop/Loop';
+import { Dropdown } from './Dropdown/Dropdown';
+import { Roundabout } from './Roundabout/Roundabout';
+import { PairwiseLinks } from './PairwiseLinks/PairwiseLinks';
+import { CheckboxOne } from './CheckboxOne/CheckboxOne';
+import { Suggester } from './Suggester/Suggester';
+import { Summary } from './Summary/Summary';
+
+// List of all the "componentType"
+export const library = {
+	Sequence: Sequence,
+	Subsequence: Subsequence,
+	RosterForLoop: RosterForLoop,
+	Loop: Loop,
+	Table: Table,
+	InputNumber: InputNumber,
+	Datepicker: Datepicker,
+	CheckboxGroup: CheckboxGroup,
+	CheckboxOne: CheckboxOne,
+	CheckboxBoolean: CheckboxBoolean,
+	Radio: Radio,
+	Text: Text,
+	Input: Input,
+	Duration: Duration,
+	Textarea: Textarea,
+	Switch: Switch,
+	Question: Question,
+	FilterDescription: FilterDescription,
+	Dropdown: Dropdown,
+	PairwiseLinks: PairwiseLinks,
+	Roundabout: Roundabout,
+	Suggester: Suggester,
+	Summary: Summary,
+	Accordion: Accordion,
+} satisfies {
+	[Property in LunaticComponentType]: ComponentType<
+		LunaticComponentProps<Property>
+	>;
+};

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

@@ -0,0 +1,75 @@
+import { render, fireEvent } from '@testing-library/react';
+import { Button } from './Button';
+import { describe, vi, it, expect } from 'vitest';
+
+describe('Button', () => {
+	it('renders without crashing', () => {
+		const container = render(
+			<Button onClick={() => {}}>
+				<span>Click me!</span>
+			</Button>
+		);
+		expect(container).toMatchSnapshot();
+	});
+	it('renders a button element with given children as a Span', () => {
+		const { getByRole } = render(
+			<Button onClick={() => {}}>
+				<span>Click me!</span>
+			</Button>
+		);
+		const button = getByRole('button');
+		expect(button).toBeInTheDocument();
+		expect(button.tagName).toBe('BUTTON');
+		expect(button).toHaveTextContent('Click me!');
+	});
+	it('renders a button element with given children if children is not a React element', () => {
+		const label = 'Click me!';
+		const { getByDisplayValue } = render(
+			<Button onClick={() => {}}>{label}</Button>
+		);
+		const input = getByDisplayValue(label);
+		expect(input).toBeInTheDocument();
+		expect(input.tagName).toBe('INPUT');
+		expect(input).toHaveAttribute('value', label);
+	});
+
+	it('appelle onClick quand le bouton est cliqué', () => {
+		const handleClick = vi.fn();
+		const { getByText } = render(
+			<Button onClick={handleClick}>Cliquez ici</Button>
+		);
+		const buttonElement = getByText('Cliquez ici');
+		fireEvent.click(buttonElement);
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('renders an input element with given label without a child', () => {
+		const label = 'Click me!';
+		const { getByDisplayValue } = render(
+			<Button onClick={() => {}} label={label} />
+		);
+		const input = getByDisplayValue(label);
+		expect(input).toBeInTheDocument();
+		expect(input).toHaveAttribute('type', 'button');
+		expect(input).toHaveAttribute('value', label);
+	});
+
+	it('renders the disabled class when the disabled prop is true', () => {
+		const { getByText } = render(
+			<Button onClick={() => {}} disabled={true}>
+				Cliquez ici
+			</Button>
+		);
+		const buttonElement = getByText('Cliquez ici');
+		expect(buttonElement).toHaveClass('disabled');
+	});
+	it('applies the provided className to the button element', () => {
+		const { getByRole } = render(
+			<Button onClick={() => {}} className="test-class">
+				Click me!
+			</Button>
+		);
+		const button = getByRole('button');
+		expect(button).toHaveClass('test-class');
+	});
+});