@inseefr/lunatic 3.4.5 → 3.4.6

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

@@ -0,0 +1,61 @@
+import classnames from 'classnames';
+import { type MouseEventHandler, type PropsWithChildren } from 'react';
+import { prevent } from '../../../utils/dom';
+import { isElement } from '../../../utils/is-element';
+import { slottableComponent } from '../HOC/slottableComponent';
+
+type Props = PropsWithChildren<{
+	onClick?: MouseEventHandler<HTMLButtonElement | HTMLInputElement>;
+	className?: string;
+	disabled?: boolean;
+	label?: string;
+	value?: string;
+	type?: 'button' | 'submit' | 'reset';
+	selected?: boolean;
+	readOnly?: boolean;
+	id?: string;
+}>;
+
+function LunaticButton({
+	id,
+	children,
+	onClick,
+	disabled,
+	label,
+	className,
+	value,
+	type = 'button',
+	selected,
+	readOnly,
+}: Props) {
+	const handleClick = prevent(onClick);
+
+	if (isElement(children) || value)
+		return (
+			<button
+				id={id}
+				disabled={disabled || readOnly}
+				type={type}
+				className={classnames('button-lunatic', className, { disabled })}
+				onClick={handleClick}
+				value={value}
+				aria-pressed={selected}
+			>
+				{children}
+			</button>
+		);
+
+	return (
+		<input
+			id={id}
+			aria-pressed={selected}
+			disabled={disabled || readOnly} //Readonly is not supported on input type button
+			type="button"
+			className={classnames('button-lunatic', className, { disabled })}
+			value={label ?? children?.toString()}
+			onClick={handleClick}
+		/>
+	);
+}
+
+export const Button = slottableComponent('Button', LunaticButton);

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

@@ -0,0 +1,59 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { expect, it, describe, vi } from 'vitest';
+import { IconButton } from './IconButton';
+
+describe('Fab', () => {
+	it('renders children', () => {
+		render(<IconButton>Test Children</IconButton>);
+		expect(screen.getByText('Test Children')).toBeInTheDocument();
+	});
+
+	it('renders title', () => {
+		render(<IconButton title="Test Title">Test Children</IconButton>);
+		const button = screen.getByRole('button');
+		expect(button).toHaveAttribute('title', 'Test Title');
+		expect(button).toHaveAttribute('aria-label', 'Test Title');
+	});
+
+	it('calls onClick when clicked', async () => {
+		const handleClick = vi.fn();
+		render(<IconButton onClick={handleClick}>Test Children</IconButton>);
+		const button = screen.getByRole('button');
+		await userEvent.click(button);
+		expect(handleClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('calls onKeyDown when a key is pressed', async () => {
+		const handleKeyDown = vi.fn();
+		render(<IconButton onKeyDown={handleKeyDown}>Test Children</IconButton>);
+		const button = screen.getByRole('button');
+		await userEvent.type(button, '{enter}');
+		expect(handleKeyDown).toHaveBeenCalledTimes(1);
+	});
+
+	it('is disabled when disabled prop is true', () => {
+		render(<IconButton disabled={true}>Test Children</IconButton>);
+		const button = screen.getByRole('button');
+		expect(button).toBeDisabled();
+	});
+
+	it('has custom className', () => {
+		render(<IconButton className="test-class">Test Children</IconButton>);
+		const button = screen.getByRole('button');
+		expect(button).toHaveClass('test-class');
+	});
+
+	it('has custom tabIndex', () => {
+		render(<IconButton tabIndex={1}>Test Children</IconButton>);
+		const button = screen.getByRole('button');
+		expect(button).toHaveAttribute('tabIndex', '1');
+	});
+
+	it('has default props', () => {
+		render(<IconButton />);
+		const button = screen.getByRole('button');
+		expect(button).toHaveAttribute('title', 'Fab');
+		expect(button).not.toBeDisabled();
+	});
+});

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

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import classnames from 'classnames';
+import { voidFunction } from '../../../utils/function';
+
+type Props = PropsWithChildren<{
+	disabled?: boolean;
+}> &
+	HTMLAttributes<HTMLButtonElement>;
+
+export function IconButton({
+	className,
+	children,
+	tabIndex,
+	title = 'Fab',
+	onClick = voidFunction,
+	onKeyDown = voidFunction,
+	disabled,
+}: Props) {
+	return (
+		<button
+			className={classnames('lunatic-fab', className)}
+			tabIndex={tabIndex}
+			title={title}
+			onClick={onClick}
+			onKeyDown={onKeyDown}
+			disabled={disabled}
+			aria-label={title}
+		>
+			{children}
+		</button>
+	);
+}

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

@@ -0,0 +1,80 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Button > renders without crashing 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <button
+        class="button-lunatic"
+        type="button"
+      >
+        <span>
+          Click me!
+        </span>
+      </button>
+    </div>
+  </body>,
+  "container": <div>
+    <button
+      class="button-lunatic"
+      type="button"
+    >
+      <span>
+        Click me!
+      </span>
+    </button>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

package/src/components/shared/Checkbox/CheckboxOption.spec.tsx

@@ -0,0 +1,58 @@
+import { render, fireEvent } from '@testing-library/react';
+import { CheckboxOption } from './CheckboxOption';
+import { describe, it, expect, vi } from 'vitest';
+
+describe('CheckboxOption', () => {
+	const props = {
+		id: 'checkbox',
+		onCheck: vi.fn(),
+		checked: false,
+		disabled: false,
+		label: 'Option 1',
+		description: 'This is option 1',
+		codeModality: 'ctrl',
+		shortcut: false,
+	};
+	const defaultProps = {
+		id: 'test-checkbox',
+		onCheck: vi.fn(),
+		label: 'Test checkbox',
+	};
+
+	it('renders the component correctly', () => {
+		const { getByRole, getByText } = render(<CheckboxOption {...props} />);
+		const checkbox = getByRole('checkbox');
+		const label = getByText('Option 1');
+
+		expect(checkbox).toBeInTheDocument();
+		expect(checkbox).not.toBeChecked();
+		expect(label).toBeInTheDocument();
+	});
+	it('renders the label text', () => {
+		const { getByText } = render(<CheckboxOption {...defaultProps} />);
+		expect(getByText(defaultProps.label)).toBeInTheDocument();
+	});
+
+	it('renders the component with the checked attribute', () => {
+		const { getByRole } = render(<CheckboxOption {...props} checked={true} />);
+		const checkbox = getByRole('checkbox');
+
+		expect(checkbox).toBeChecked();
+	});
+
+	it('calls the onCheck function when clicked', () => {
+		const { getByRole } = render(<CheckboxOption {...props} />);
+		const checkbox = getByRole('checkbox');
+
+		fireEvent.click(checkbox);
+
+		expect(props.onCheck).toHaveBeenCalledTimes(1);
+		expect(props.onCheck).toHaveBeenCalledWith(true);
+	});
+	it('calls the onCheck function when space key is pressed', () => {
+		const { getByRole } = render(<CheckboxOption {...defaultProps} />);
+		const checkbox = getByRole('checkbox');
+		fireEvent.keyDown(checkbox, { code: 'Space' });
+		expect(defaultProps.onCheck).toHaveBeenCalledWith(true);
+	});
+});

package/src/components/shared/Checkbox/CheckboxOption.tsx

@@ -0,0 +1,98 @@
+import { type KeyboardEventHandler, type ReactNode } from 'react';
+import type { LunaticBaseProps } from '../../type';
+import { slottableComponent } from '../HOC/slottableComponent';
+import { Label } from '../Label/Label';
+import { useKeyboardKey } from '../../../hooks/useKeyboardKey';
+
+export type CheckboxOptionProps = {
+	disabled?: boolean;
+	readOnly?: boolean;
+	checked?: boolean;
+	id?: string;
+	onCheck: (b: boolean) => void;
+	label?: ReactNode;
+	description?: LunaticBaseProps['description'];
+	codeModality?: string;
+	shortcut?: boolean;
+	invalid?: boolean;
+};
+
+function LunaticCheckboxOption({
+	disabled,
+	readOnly,
+	checked,
+	id,
+	onCheck,
+	label,
+	description,
+	codeModality,
+	shortcut,
+	invalid,
+}: CheckboxOptionProps) {
+	const isEnabled = !readOnly && !disabled;
+	const hasKeyboardShortcut = Boolean(shortcut && codeModality && isEnabled);
+	const onClickOption = () => {
+		if (isEnabled) {
+			onCheck(!checked);
+		}
+	};
+
+	const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {
+		if (e.code === 'Space') {
+			onClickOption();
+		}
+	};
+
+	const labelId = `label-${id}`;
+
+	useKeyboardKey(
+		codeModality ? [codeModality] : [],
+		(e) => {
+			e.preventDefault();
+			onClickOption();
+		},
+		hasKeyboardShortcut
+	);
+
+	return (
+		<div
+			id={id}
+			role="checkbox"
+			aria-invalid={invalid}
+			aria-disabled={disabled}
+			aria-readonly={readOnly}
+			className="lunatic-input-checkbox"
+			aria-checked={checked}
+			tabIndex={0}
+			onClick={onClickOption}
+			onKeyDown={handleKeyDown}
+			aria-labelledby={labelId}
+		>
+			<div className="lunatic-input-checkbox__icon">
+				{checked && (
+					<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={labelId} htmlFor={id} description={description}>
+				{codeModality && (
+					<span className="code-modality">{codeModality.toUpperCase()}</span>
+				)}{' '}
+				{label}
+			</Label>
+		</div>
+	);
+}
+
+export const CheckboxOption = slottableComponent(
+	'CheckboxOption',
+	LunaticCheckboxOption
+);

package/src/components/shared/Checkbox/getShortcutKey.ts

@@ -0,0 +1,6 @@
+import { alphabet } from '../../../utils/constants/alphabet';
+
+export const getShortcutKey = (
+	currentIndex: number,
+	maxIndex: number
+): string => (maxIndex < 10 ? `${currentIndex + 1}` : alphabet[currentIndex]);

package/src/components/shared/Combobox/Combobox.stories.tsx

@@ -0,0 +1,74 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Combobox } from './Combobox';
+import type { ComboboxOptionType } from './ComboboxType';
+
+const meta: Meta<typeof Combobox> = {
+	title: 'Components/Shared/ComboBox',
+	component: Combobox,
+};
+
+export default meta;
+
+const LabelRenderer = ({
+	option,
+	placeholder,
+}: {
+	option?: ComboboxOptionType;
+	placeholder?: string;
+}) => <>{option?.label ?? placeholder}</>;
+
+const Template: typeof Combobox = (args) => {
+	const [localValue, setLocalValue] = useState(args.value);
+	const [search, setSearch] = useState<string | null>('');
+	// Simulate a search
+	const options = search
+		? args.options.filter((v) =>
+				v.value.toLowerCase().includes(search.toLowerCase())
+			)
+		: args.options;
+
+	return (
+		<fieldset>
+			<legend>Select an option : {localValue}</legend>
+			<Combobox
+				{...args}
+				value={localValue}
+				onSelect={(v) => {
+					setLocalValue(v);
+					args.onSelect?.(v);
+				}}
+				onChange={(v) => {
+					setSearch(v);
+					args.onChange?.(v);
+				}}
+				options={options}
+				labelRenderer={LabelRenderer}
+				optionRenderer={LabelRenderer}
+			/>
+			<button onClick={() => setLocalValue('4')}>Sélectionner paris</button>
+		</fieldset>
+	);
+};
+
+export const Default: StoryObj<typeof Combobox> = {
+	render: (args) => <Template {...args} />,
+	args: {
+		value: '1',
+		options: [
+			{ id: '1', value: 'Option 1', label: <strong>Option 1</strong> },
+			{ id: '2', value: 'Option 2', label: 'Option 2' },
+			{ id: '3', value: 'Option 3', label: 'Option 3' },
+			{ id: 'paris', value: 'Paris', label: 'Paris' },
+			{ id: 'toulouse', value: 'Toulouse', label: 'Toulouse' },
+		],
+	},
+};
+
+export const Editable: StoryObj<typeof Combobox> = {
+	...Default,
+	args: {
+		...Default.parameters,
+		editable: true,
+	},
+};

package/src/components/shared/Combobox/Combobox.tsx

@@ -0,0 +1,225 @@
+import classnames from 'classnames';
+import { type ReactNode, useState } from 'react';
+import { ComboboxContainer } from './ComboboxContainer';
+import { ComboboxContent } from './ComboboxContent';
+import type {
+	ComboboxOptionType,
+	ComboboxPanelProps,
+	ComboboxSelectionProps,
+} from './ComboboxType';
+import { KEYBOARD_KEY_CODES } from './constants';
+import { ComboboxPanel } from './Panel/ComboboxPanel';
+import { ComboboxClearButton } from './Selection/ComboboxClearButton';
+import { ComboboxSelection } from './Selection/ComboboxSelection';
+import { between, forceInt } from '../../../utils/number';
+import { Label } from '../Label/Label';
+import { slottableComponent } from '../HOC/slottableComponent';
+import type { LunaticError } from '../../../use-lunatic/type';
+import { Declarations } from '../Declarations/Declarations';
+import type { LunaticBaseProps } from '../../type';
+
+const EMPTY_SEARCH = '';
+
+type Props = ComboboxSelectionProps &
+	ComboboxPanelProps & {
+		className?: string;
+		classNamePrefix?: string;
+		classStyle?: string;
+		value: string | null;
+		messageError?: string;
+		getOptionValue?: (o: ComboboxOptionType) => string;
+		label?: ReactNode;
+		description?: ReactNode;
+		declarations?: LunaticBaseProps['declarations'];
+		errors?: LunaticError[];
+		onChange?: (s: string | null) => void;
+		onSelect: (s: string | null) => void;
+		onBlur?: () => void;
+		onFocus?: () => void;
+		options: ComboboxOptionType[];
+		readOnly?: boolean;
+		isLoading?: boolean;
+	};
+
+function LunaticComboBox({
+	className,
+	classNamePrefix,
+	classStyle = 'default-style',
+	placeholder = 'Commencez votre saisie...',
+	editable = false,
+	disabled,
+	readOnly,
+	id,
+	optionRenderer,
+	labelRenderer,
+	onChange,
+	onSelect,
+	value,
+	options,
+	messageError,
+	search = EMPTY_SEARCH,
+	getOptionValue = getDefaultOptionValue,
+	label,
+	description,
+	declarations,
+	errors,
+	onBlur,
+	onFocus,
+	isLoading,
+}: Props) {
+	const [expanded, setExpanded] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const selectedIndex = getIndexFromOptions(options, value, getOptionValue);
+
+	const labelId = `label-${id}`;
+
+	const handleFocus = () => {
+		if (disabled || readOnly) {
+			return;
+		}
+		onFocus?.();
+		setExpanded(true);
+		setFocused(true);
+	};
+
+	const handleBlur = () => {
+		if (disabled || readOnly) {
+			return;
+		}
+		setExpanded(false);
+		setFocused(false);
+		onBlur?.();
+	};
+
+	const handleSelect = (index: string | number, close = true) => {
+		const indexNumber = between(forceInt(index), 0, options.length);
+		const option = options[indexNumber];
+		if (close) {
+			setExpanded(false);
+			onBlur?.();
+		}
+		onSelect(getOptionValue(option));
+	};
+
+	const handleChange = (s: string | null) => {
+		onChange?.(s);
+	};
+
+	const handleClear = () => {
+		setExpanded(false);
+		onChange?.(EMPTY_SEARCH);
+		onSelect(null);
+	};
+
+	const onKeyDown = (key: string) => {
+		const length = options.length;
+		switch (key) {
+			case KEYBOARD_KEY_CODES.Tab:
+			case KEYBOARD_KEY_CODES.Escape:
+				setExpanded(false);
+				return;
+			case KEYBOARD_KEY_CODES.ArrowDown:
+				handleSelect((selectedIndex ?? -1) + 1, false);
+				return;
+			case KEYBOARD_KEY_CODES.ArrowUp:
+				handleSelect((selectedIndex ?? length) - 1, false);
+				return;
+			case KEYBOARD_KEY_CODES.Home:
+				handleSelect(0, false);
+				return;
+			case KEYBOARD_KEY_CODES.End:
+				handleSelect(length - 1, false);
+				return;
+			case KEYBOARD_KEY_CODES.Enter:
+				setExpanded((v) => !v);
+				return;
+		}
+	};
+	const showClearButton = !disabled || !readOnly;
+
+	if (messageError) {
+		return (
+			<div className="lunatic-combo-box-message-error">{messageError}</div>
+		);
+	}
+
+	return (
+		<ComboboxContainer
+			id={id}
+			className={className}
+			classStyle={classStyle}
+			classNamePrefix={classNamePrefix}
+			errors={errors}
+		>
+			<Label htmlFor={id} id={labelId} description={description}>
+				{label}
+			</Label>
+			<Declarations type="AFTER_QUESTION_TEXT" declarations={declarations} />
+			<ComboboxContent
+				focused={focused}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				onKeyDown={onKeyDown}
+				classNamePrefix={classNamePrefix}
+			>
+				<ComboboxSelection
+					labelRenderer={labelRenderer}
+					placeholder={placeholder}
+					search={search}
+					expanded={expanded}
+					id={id}
+					labelId={labelId}
+					disabled={disabled}
+					readOnly={readOnly}
+					focused={focused}
+					editable={editable}
+					selectedIndex={selectedIndex}
+					options={options}
+					onChange={handleChange}
+					classNamePrefix={classNamePrefix}
+					invalid={!!errors}
+				/>
+				<ComboboxPanel
+					isLoading={isLoading}
+					optionRenderer={optionRenderer}
+					options={options}
+					focused={focused}
+					selectedIndex={selectedIndex}
+					expanded={expanded}
+					id={id}
+					search={search}
+					onSelect={handleSelect}
+				/>
+			</ComboboxContent>
+			{showClearButton && (
+				<ComboboxClearButton
+					className={classnames({ focused })}
+					search={value}
+					onClick={handleClear}
+					editable={editable}
+				/>
+			)}
+		</ComboboxContainer>
+	);
+}
+
+function getIndexFromOptions(
+	options: ComboboxOptionType[],
+	value: string | null,
+	getOptionValue: (o: ComboboxOptionType) => string
+): number | undefined {
+	if (!Array.isArray(options)) {
+		return undefined;
+	}
+	return options.map(getOptionValue).findIndex((v) => v === value);
+}
+
+/**
+ * Extract value from an option item
+ */
+function getDefaultOptionValue(option: ComboboxOptionType = { value: '' }) {
+	const { id, value } = option;
+	return id || value;
+}
+
+export const Combobox = slottableComponent('Combobox', LunaticComboBox);