@inseefr/lunatic 3.4.5 → 3.4.6

package/src/components/Datepicker/DatepickerField.tsx

@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import type { ChangeEventHandler } from 'react';
+
+type Props = {
+	id: string;
+	label: string;
+	description: string;
+	max?: number;
+	onChange: (value: number) => void;
+	value?: number;
+	readOnly?: boolean;
+	disabled?: boolean;
+};
+
+export function DatepickerField({
+	label,
+	id,
+	description,
+	onChange,
+	value,
+	max,
+	readOnly,
+	disabled,
+}: Props) {
+	const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+		if (
+			!Number.isNaN(e.target.valueAsNumber) &&
+			((max && e.target.valueAsNumber > max) || e.target.valueAsNumber < 1)
+		) {
+			return;
+		}
+		onChange(e.target.valueAsNumber);
+	};
+	return (
+		<div
+			className={classNames(
+				'lunaticDatepickerField',
+				(!max || max > 999) && 'lunaticDatepickerFieldLarge'
+			)}
+		>
+			<label htmlFor={id}>
+				{label}
+				<span className="lunaticDatepickerHint">{description}</span>
+			</label>
+			<input
+				id={id}
+				type="number"
+				min={1}
+				max={max}
+				readOnly={readOnly}
+				disabled={disabled}
+				value={Number.isNaN(value) ? '' : value}
+				onChange={handleChange}
+				onFocus={(e) => e.target.select()}
+			/>
+		</div>
+	);
+}

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

@@ -0,0 +1,166 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Datepicker > should render properly with format YYYY 1`] = `
+<div>
+  <div
+    class="lunatic-input"
+  >
+    <div
+      class="lunaticDatepickerFields"
+    >
+      <div
+        class="lunaticDatepickerField lunaticDatepickerFieldLarge"
+      >
+        <label
+          for="datepickeryear"
+        >
+          Année
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 2023
+          </span>
+        </label>
+        <input
+          id="datepickeryear"
+          max="9999"
+          min="1"
+          type="number"
+          value="1999"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Datepicker > should render properly with format YYYY-MM 1`] = `
+<div>
+  <div
+    class="lunatic-input"
+  >
+    <div
+      class="lunaticDatepickerFields"
+    >
+      <div
+        class="lunaticDatepickerField"
+      >
+        <label
+          for="datepickermonth"
+        >
+          Mois
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 07
+          </span>
+        </label>
+        <input
+          id="datepickermonth"
+          max="12"
+          min="1"
+          type="number"
+          value="1"
+        />
+      </div>
+      <div
+        class="lunaticDatepickerField lunaticDatepickerFieldLarge"
+      >
+        <label
+          for="datepickeryear"
+        >
+          Année
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 2023
+          </span>
+        </label>
+        <input
+          id="datepickeryear"
+          max="9999"
+          min="1"
+          type="number"
+          value="1999"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Datepicker > should render properly with format YYYY-MM-DD 1`] = `
+<div>
+  <div
+    class="lunatic-input"
+  >
+    <div
+      class="lunaticDatepickerFields"
+    >
+      <div
+        class="lunaticDatepickerField"
+      >
+        <label
+          for="datepickerday"
+        >
+          Jour
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 14
+          </span>
+        </label>
+        <input
+          id="datepickerday"
+          max="31"
+          min="1"
+          type="number"
+          value="1"
+        />
+      </div>
+      <div
+        class="lunaticDatepickerField"
+      >
+        <label
+          for="datepickermonth"
+        >
+          Mois
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 07
+          </span>
+        </label>
+        <input
+          id="datepickermonth"
+          max="12"
+          min="1"
+          type="number"
+          value="1"
+        />
+      </div>
+      <div
+        class="lunaticDatepickerField lunaticDatepickerFieldLarge"
+      >
+        <label
+          for="datepickeryear"
+        >
+          Année
+          <span
+            class="lunaticDatepickerHint"
+          >
+            Exemple: 2023
+          </span>
+        </label>
+        <input
+          id="datepickeryear"
+          max="9999"
+          min="1"
+          type="number"
+          value="1999"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Dropdown/Dropdown.spec.tsx

@@ -0,0 +1,42 @@
+import { render } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Dropdown } from './Dropdown';
+
+describe('Dropdown', () => {
+	const mockOnSelect = vi.fn();
+
+	const baseProps = {
+		value: 'toto',
+		id: 'dropdown',
+		'aria-labelledby': 'dropdown',
+		options: [
+			{
+				value: 'toto',
+				description: 'toto',
+				label: 'toto',
+			},
+		],
+		response: { name: 'demo' },
+		handleChanges: mockOnSelect,
+	};
+
+	beforeEach(() => {
+		mockOnSelect.mockClear();
+	});
+
+	it('renders without crashing', () => {
+		const { container } = render(<Dropdown {...baseProps} />);
+		expect(container).toMatchSnapshot();
+	});
+
+	it('should handle readOnly', () => {
+		const { container } = render(<Dropdown {...baseProps} readOnly />);
+		expect(container).toMatchSnapshot();
+
+		const selection = container.querySelector('.lunatic-combo-box-content');
+		(selection as HTMLElement).focus();
+		expect(selection).toHaveFocus();
+		const span = selection?.querySelector('span');
+		expect(span).toHaveTextContent('toto');
+	});
+});

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,69 @@
+import type { LunaticComponentProps } from '../type';
+import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { SimpleOptionRenderer } from './renderer/SimpleOptionRenderer';
+import { SimpleLabelRenderer } from './renderer/SimpleLabelRenderer';
+import { Combobox } from '../shared/Combobox/Combobox';
+import classNames from 'classnames';
+import type { LunaticError } from '../../use-lunatic/type';
+
+export function Dropdown({
+	handleChanges,
+	response,
+	errors,
+	...props
+}: LunaticComponentProps<'Dropdown'>) {
+	return (
+		<CustomDropdown
+			{...props}
+			onChange={(value) => handleChanges([{ name: response.name, value }])}
+			errors={getComponentErrors(errors, props.id)}
+		/>
+	);
+}
+
+type CustomProps = Omit<
+	LunaticComponentProps<'Dropdown'>,
+	'response' | 'handleChanges' | 'errors'
+> & {
+	onChange: (v: string | null) => void;
+	errors?: LunaticError[];
+};
+
+export const CustomDropdown = slottableComponent<CustomProps>(
+	'Dropdown',
+	(props) => {
+		const {
+			id,
+			disabled,
+			options,
+			className,
+			value,
+			declarations,
+			description,
+			label,
+			errors,
+			onChange,
+			readOnly,
+		} = props;
+
+		return (
+			<Combobox
+				id={id}
+				className={classNames(className, 'lunatic-dropdown')}
+				disabled={disabled}
+				readOnly={readOnly}
+				options={options}
+				editable={false}
+				onSelect={onChange}
+				optionRenderer={SimpleOptionRenderer}
+				labelRenderer={SimpleLabelRenderer}
+				value={value}
+				label={label}
+				errors={errors}
+				description={description}
+				declarations={declarations}
+			/>
+		);
+	}
+);

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

@@ -0,0 +1,73 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Dropdown > renders without crashing 1`] = `
+<div>
+  <div
+    class="lunatic-dropdown lunatic-combo-box-container lunatic-suggester-default-style lunatic-suggester-default-style default-style"
+    id="lunatic-combo-box-container-dropdown"
+  >
+    <div
+      class="lunatic-combo-box"
+    >
+      <div
+        class="lunatic-combo-box-content"
+        tabindex="0"
+      >
+        <div
+          aria-autocomplete="list"
+          aria-controls="todo"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-labelledby="label-dropdown"
+          aria-owns="dropdown"
+          class="lunatic-combo-box-selection"
+          id="dropdown"
+          role="combobox"
+        >
+          <span
+            class="selection"
+          >
+            toto
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Dropdown > should handle readOnly 1`] = `
+<div>
+  <div
+    class="lunatic-dropdown lunatic-combo-box-container lunatic-suggester-default-style lunatic-suggester-default-style default-style"
+    id="lunatic-combo-box-container-dropdown"
+  >
+    <div
+      class="lunatic-combo-box"
+    >
+      <div
+        class="lunatic-combo-box-content"
+        tabindex="0"
+      >
+        <div
+          aria-autocomplete="list"
+          aria-controls="todo"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-labelledby="label-dropdown"
+          aria-owns="dropdown"
+          class="lunatic-combo-box-selection"
+          id="dropdown"
+          role="combobox"
+        >
+          <span
+            class="selection"
+          >
+            toto
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Dropdown/renderer/SimpleLabelRenderer.tsx

@@ -0,0 +1,26 @@
+import type { ComboboxOptionType } from '../../shared/Combobox/ComboboxType';
+
+type Props = {
+	option?: ComboboxOptionType;
+	placeholder?: string;
+	search?: string;
+};
+
+function getContent(option: Props['option'], search?: string) {
+	if (option) {
+		const { value, label } = option;
+		return label || value;
+	}
+	if (search?.trim().length) {
+		return search;
+	}
+	return null;
+}
+
+export function SimpleLabelRenderer({ option, placeholder, search }: Props) {
+	const content = getContent(option, search);
+	if (content) {
+		return <span className="selection">{content}</span>;
+	}
+	return <span className="placeholder">{placeholder}</span>;
+}

package/src/components/Dropdown/renderer/SimpleOptionRenderer.tsx

@@ -0,0 +1,26 @@
+import classnames from 'classnames';
+import type { ComboboxOptionType } from '../../shared/Combobox/ComboboxType';
+
+type Props = {
+	option: ComboboxOptionType;
+	selected?: boolean;
+};
+
+export function SimpleOptionRenderer({ option, selected }: Props) {
+	const { value, label } = option;
+
+	if (label && typeof label === 'string' && label.length) {
+		return (
+			<div className={classnames('lunatic-dropdown-option', { selected })}>
+				<span className="id">{value}</span>
+				<span>&nbsp;&#x2014;&nbsp;</span>
+				<span className="label">{label}</span>
+			</div>
+		);
+	}
+	return (
+		<div className={classnames('lunatic-dropdown-option', { selected })}>
+			<span className="id">{label}</span>
+		</div>
+	);
+}

package/src/components/Duration/Duration.tsx

@@ -0,0 +1,97 @@
+import type { LunaticComponentProps } from '../type';
+import { useState } from 'react';
+import { getDurationFromValue } from './getDurationFromValue';
+import { clampDuration, labelByUnit, propsByUnit } from './durationUtils';
+import { formatDuration } from './formatDuration';
+import classnames from 'classnames';
+import { objectKeys } from '../../utils/object';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import type { LunaticError } from '../../use-lunatic/type';
+import {
+	ComponentErrors,
+	getComponentErrors,
+} from '../shared/ComponentErrors/ComponentErrors';
+import { Declarations } from '../shared/Declarations/Declarations';
+
+export function Duration({
+	handleChanges,
+	response,
+	errors,
+	...props
+}: LunaticComponentProps<'Duration'>) {
+	return (
+		<CustomDuration
+			{...props}
+			onChange={(value) => handleChanges([{ name: response.name, value }])}
+			errors={getComponentErrors(errors, props.id)}
+		/>
+	);
+}
+
+type CustomProps = Omit<
+	LunaticComponentProps<'Duration'>,
+	'response' | 'handleChanges' | 'errors'
+> & {
+	onChange: (v: string | null) => void;
+	errors?: LunaticError[];
+};
+
+export const CustomDuration = slottableComponent<CustomProps>(
+	'Duration',
+	(props) => {
+		const { errors, value, label, format, onChange, declarations, id } = props;
+		// We need to keep an internal state since one field can be empty (null value in duration)
+		// but we still send "0" and we don't want the field to display "0"
+		const [duration, setDuration] = useState(
+			getDurationFromValue(value, format)
+		);
+
+		// Generate handler for a specific unit field (year, month...)
+		const changeHandler =
+			(unit: 'hours' | 'minutes' | 'months' | 'years') =>
+			(e: {
+				// CheckValidity function is used to apply constraints to a field Ex: (min, max)
+				target: { valueAsNumber: number; checkValidity: () => boolean };
+			}) => {
+				if (!e.target.checkValidity()) {
+					return;
+				}
+				const fieldValue = clampDuration(
+					Number.isNaN(e.target.valueAsNumber) ? null : e.target.valueAsNumber,
+					unit
+				);
+				const newDuration = { ...duration, [unit]: fieldValue };
+				onChange(formatDuration(newDuration));
+				setDuration(newDuration);
+			};
+
+		return (
+			<fieldset className={classnames('lunatic-input')}>
+				{label && <legend>{label}</legend>}
+				<Declarations
+					type="AFTER_QUESTION_TEXT"
+					declarations={declarations}
+					id={id}
+				/>
+				<div className="duration-fields">
+					{objectKeys(duration).map((unit) => (
+						<div className="duration-field" key={unit}>
+							<label htmlFor={`${unit}Input`} className="input-label">
+								{labelByUnit[unit]}
+							</label>
+							<input
+								id={`${unit}Input`}
+								type="number"
+								value={duration[unit] ?? ''}
+								className="input-field"
+								onChange={changeHandler(unit)}
+								{...propsByUnit[unit]}
+							/>
+						</div>
+					))}
+				</div>
+				<ComponentErrors errors={errors} />
+			</fieldset>
+		);
+	}
+);

package/src/components/Duration/durationUtils.ts

@@ -0,0 +1,39 @@
+export type DurationValue = {
+	hours?: number | null;
+	minutes?: number | null;
+	years?: number | null;
+	months?: number | null;
+};
+
+export type Formats = 'PTnHnM' | 'PnYnM';
+
+export const propsByUnit = {
+	hours: { min: 0, max: 99, size: 2, style: { width: '2.5em' } },
+	minutes: { min: 0, max: 59, size: 2, style: { width: '2.5em' } },
+	months: { min: 0, max: 11, size: 2, style: { width: '2.5em' } },
+	years: { min: 0, size: 4, style: { width: '4em' } },
+};
+
+export const labelByUnit = {
+	hours: 'Heures :',
+	minutes: 'Minutes :',
+	months: 'Mois : ',
+	years: 'Années :',
+};
+
+export function clampDuration(
+	value: number | null,
+	unit: keyof typeof propsByUnit
+) {
+	if (value === null) {
+		return value;
+	}
+	const props = propsByUnit[unit];
+	if (value < props.min) {
+		return props.min;
+	}
+	if ('max' in props && value > props.max) {
+		return props.max;
+	}
+	return value;
+}

package/src/components/Duration/formatDuration.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { formatDuration } from './formatDuration';
+describe('formatDuration', () => {
+	it('should format time correctly', () => {
+		expect(formatDuration({ hours: 12, minutes: 15 })).toEqual('PT12H15M');
+		expect(formatDuration({ hours: 14, minutes: 50 })).toEqual('PT14H50M');
+		expect(formatDuration({ hours: null, minutes: null })).toEqual(null);
+	});
+	it('should format date correctly', () => {
+		expect(formatDuration({ years: 12, months: 15 })).toEqual('P12Y15M');
+		expect(formatDuration({ years: 14, months: 50 })).toEqual('P14Y50M');
+		expect(formatDuration({ years: 14, months: null })).toEqual('P14Y0M');
+		expect(formatDuration({ years: null, months: null })).toEqual(null);
+	});
+});

package/src/components/Duration/formatDuration.ts

@@ -0,0 +1,19 @@
+import { type DurationValue } from './durationUtils';
+
+export const formatDuration = (duration: DurationValue): string | null => {
+	const prefix = 'hours' in duration && 'minutes' in duration ? 'PT' : 'P';
+	// The duration has no numeric value (all nulls), then return null
+	if (Object.values(duration).filter((v) => v !== null).length === 0) {
+		return null;
+	}
+
+	// Recreate unit so we can control the unit order for formatting
+	const units = ['years', 'months', 'hours', 'minutes'] as const;
+	let durationParts = '';
+	for (const unit of units) {
+		if (unit in duration) {
+			durationParts += (duration[unit] ?? 0) + unit[0].toUpperCase();
+		}
+	}
+	return prefix + durationParts;
+};

package/src/components/Duration/getDurationFromValue.ts

@@ -0,0 +1,43 @@
+import { type Formats, type DurationValue } from './durationUtils';
+
+/**
+ * Convert a string into a duration
+ *
+ * ## Example
+ * - "P12Y5M" => {year: 12, month: 5}
+ */
+export const getDurationFromValue = (
+	value: string | null,
+	format: Formats
+): DurationValue => {
+	// Handle nulls value
+	if (value === null && format === 'PTnHnM') {
+		return { hours: null, minutes: null };
+	} else if (value === null) {
+		return { years: null, months: null };
+	}
+
+	const match = matchFromFormat(value, format);
+	if (format === 'PTnHnM') {
+		return { hours: match[0], minutes: match[1] };
+	}
+	return { years: match[0], months: match[1] };
+};
+
+/**
+ * Generate a regexp from the format to extract the numbers from the string
+ *
+ * ## Example :
+ * - "P12Y3M" => [12, 3]
+ */
+const matchFromFormat = (value: string, format: Formats): number[] => {
+	const regex = new RegExp(format.replaceAll('n', '(\\d+)'));
+	const match = value.match(regex);
+	if (!match) {
+		throw new Error(
+			`Invalid duration value "${value}" does not match the format "${format}"`
+		);
+	}
+	const [, ...matches] = match;
+	return matches.map((v) => parseInt(v, 10));
+};