@inseefr/lunatic 3.4.5 → 3.4.6-rc.0

package/src/components/shared/Icons/on-drag-icon.tsx

@@ -0,0 +1,22 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function OnDragIcon({ className, width = 32, height = 32 }: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 15.998805,0 C 15.791758,0 15.614821,0.068587 15.4636,0.2030911 L 10.109162,4.9578137 C 9.95798,5.0923491 9.884566,5.2516109 9.884566,5.4356753 c 0,0.1840189 0.07342,0.3431857 0.224596,0.4778615 0.151203,0.1345354 0.330468,0.2030913 0.537594,0.2030913 h 4.205182 V 14.854326 H 6.1166281 v -4.202792 c 0,-0.2072 -0.068555,-0.388637 -0.2030912,-0.539983 C 5.7788793,9.9602251 5.6197345,9.8845661 5.4356754,9.8845661 c -0.1840494,0 -0.3432982,0.07566 -0.4778615,0.2269849 L 0.2030911,15.4636 C 0.0685559,15.615109 1.2e-6,15.794159 0,16.001195 0,16.208242 0.068592,16.385179 0.2030911,16.5364 l 4.7547228,5.352049 c 0.1345352,0.151182 0.2937975,0.226985 0.4778615,0.226985 0.1840188,0 0.3431856,-0.07581 0.4778615,-0.226985 0.1345353,-0.151203 0.2030912,-0.328079 0.2030912,-0.535205 v -4.205182 h 8.7353099 v 8.73531 h -4.202794 c -0.207124,0 -0.388779,0.06855 -0.539982,0.203092 -0.151179,0.134675 -0.224596,0.293842 -0.224596,0.477861 0,0.184064 0.07341,0.343326 0.224596,0.477862 L 15.4636,31.796909 C 15.614821,31.931407 15.794147,32 16.001195,32 c 0.207036,-1e-6 0.383696,-0.06855 0.535205,-0.203091 l 5.352049,-4.754722 c 0.151326,-0.134563 0.226985,-0.293813 0.226985,-0.477862 0,-0.184058 -0.07566,-0.343204 -0.226985,-0.477861 -0.151346,-0.134536 -0.337561,-0.203092 -0.544762,-0.203092 h -4.198013 v -8.73531 h 8.737698 v 4.202793 c 0,0.207125 0.06855,0.386391 0.203092,0.537594 0.134675,0.151179 0.293842,0.226985 0.477861,0.226985 0.184064,0 0.343326,-0.0758 0.477862,-0.226985 L 31.796909,16.5364 C 31.931407,16.385179 32,16.205853 32,15.998805 31.999999,15.791768 31.93144,15.615109 31.796909,15.4636 L 27.042187,10.111551 C 26.907624,9.9602251 26.748374,9.8845661 26.564325,9.8845661 c -0.184058,0 -0.343204,0.07566 -0.477861,0.2269849 -0.134536,0.151346 -0.203092,0.335171 -0.203092,0.542372 v 4.200403 H 17.145674 V 6.1166281 h 4.200403 c 0.207201,0 0.391026,-0.068557 0.542372,-0.2030913 0.151326,-0.1346576 0.226985,-0.2938028 0.226985,-0.4778615 0,-0.1840494 -0.07566,-0.3432989 -0.226985,-0.4778616 L 16.5364,0.2030911 C 16.384891,0.0685559 16.205841,1.5e-6 15.998805,0 Z" />
+			</svg>
+		</LunaticIcon>
+	);
+}

package/src/components/shared/Icons/opened-icon.tsx

@@ -0,0 +1,22 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function OpenedIcon({ className, width = 32, height = 32 }: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 11.329813,6.371252 C 11.109877,6.61848 11,6.911541 11,7.250162 v 17.499744 c 0,0.338758 0.109877,0.631614 0.329813,0.879047 C 11.549992,25.876386 11.810303,26 12.111233,26 c 0.300869,0 0.56118,-0.123614 0.781177,-0.371047 l 7.777534,-8.749906 C 20.88988,16.631341 21,16.338484 21,16 21,15.661516 20.88988,15.368386 20.669944,15.121158 L 12.892349,6.371252 C 12.672413,6.124093 12.412102,6 12.111172,6 11.810303,6 11.549992,6.124093 11.329813,6.371252 Z"></path>
+			</svg>
+		</LunaticIcon>
+	);
+}

package/src/components/shared/Icons/radio-checked-icon.tsx

@@ -0,0 +1,29 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function RadioCheckedIcon({
+	className,
+	width = 32,
+	height = 32,
+}: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+				<path d="M0 0h24v24H0z" fill="none" />
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default RadioCheckedIcon;

package/src/components/shared/Icons/radio-unchecked-icon.tsx

@@ -0,0 +1,27 @@
+import { LunaticIcon } from './lunatic-icon';
+import { type IconProps } from './icon-props';
+
+export function RadioUncheckedIcon({
+	className,
+	width = 32,
+	height = 32,
+}: IconProps) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+				<path d="M0 0h24v24H0z" fill="none" />
+			</svg>
+		</LunaticIcon>
+	);
+}

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

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react';
+import { Label } from './Label';
+import { describe, it, expect } from 'vitest';
+
+describe('Label', () => {
+	it('renders null when children is falsy', () => {
+		const { container } = render(
+			<Label htmlFor="input" id="label" description="This is a label">
+				{null}
+			</Label>
+		);
+
+		expect(container.firstChild).toBeNull();
+	});
+
+	it('renders a label without description', () => {
+		const { getByText, queryByText } = render(
+			<>
+				<Label htmlFor="kze792d8" id="label">
+					<p>Name</p>
+				</Label>
+				<input
+					id="kze792d8"
+					className=""
+					type="number"
+					aria-labelledby="label"
+					min="0"
+					max="10"
+					value=""
+					lang="en"
+				></input>
+			</>
+		);
+
+		const label = getByText('Name');
+		expect(label).toBeInTheDocument();
+		expect(label.parentNode).toHaveAttribute('for', 'kze792d8');
+		const description = queryByText('This is a label');
+		expect(description).not.toBeInTheDocument();
+	});
+});

package/src/components/shared/Label/Label.tsx

@@ -0,0 +1,46 @@
+import {
+	type CSSProperties,
+	type PropsWithChildren,
+	type ReactNode,
+} from 'react';
+import classnames from 'classnames';
+import { slottableComponent } from '../HOC/slottableComponent';
+import { LabelDescription } from '../LabelDescription';
+
+type Props = PropsWithChildren<{
+	id?: string;
+	htmlFor?: string;
+	className?: string;
+	style?: CSSProperties;
+	// Secondary ext displayed under the label
+	description?: ReactNode;
+}>;
+
+/**
+ * Label displayed on top of a field
+ */
+function LunaticLabel({
+	children,
+	id,
+	htmlFor,
+	className,
+	style,
+	description,
+}: Props) {
+	if (!children) {
+		return null;
+	}
+	return (
+		<label
+			htmlFor={htmlFor}
+			id={id}
+			className={classnames('lunatic-label', className)}
+			style={style}
+		>
+			{children}
+			<LabelDescription value={description} />
+		</label>
+	);
+}
+
+export const Label = slottableComponent('Label', LunaticLabel);

package/src/components/shared/LabelDescription.tsx

@@ -0,0 +1,22 @@
+import classnames from 'classnames';
+import React, { type ReactNode } from 'react';
+
+type Props = {
+	value?: ReactNode;
+	className?: string;
+};
+
+export function LabelDescription({ value, className }: Props) {
+	if (
+		(typeof value === 'string' && value.length > 0) ||
+		React.isValidElement(value)
+	) {
+		return (
+			<span className={classnames('label-description', className)}>
+				{value}
+			</span>
+		);
+	}
+
+	return null;
+}

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

@@ -0,0 +1,145 @@
+import { describe, expect, it } from 'vitest';
+import { render, waitFor, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MDLabel } from './MDLabel';
+
+function getStringHtmlWithoutId(htmlElement: HTMLElement) {
+	return htmlElement.outerHTML.replace(/id="[^"]+"/g, '');
+}
+
+describe('md-label', () => {
+	it('should handle simple text', () => {
+		const obj = render(<MDLabel expression="This **is** a simple test" />);
+		return expect(obj.container).toMatchInlineSnapshot(`
+			<div>
+			  This 
+			  <strong>
+			    is
+			  </strong>
+			   a simple test
+			</div>
+		`);
+	});
+	it('should handle line break', () => {
+		const obj = render(
+			<MDLabel expression={'This **is** a simple test\non multiple line'} />
+		);
+		return expect(obj.container).toMatchInlineSnapshot(`
+			<div>
+			  This 
+			  <strong>
+			    is
+			  </strong>
+			   a simple test
+			  <br />
+			  
+
+			  on multiple line
+			</div>
+		`);
+	});
+	it('should handle paragraphs break', () => {
+		const obj = render(
+			<MDLabel
+				expression={'This **is** a simple test\n\nwith multiple paragraphs'}
+			/>
+		);
+		return expect(obj.container).toMatchInlineSnapshot(`
+			<div>
+			  <p>
+			    This 
+			    <strong>
+			      is
+			    </strong>
+			     a simple test
+			  </p>
+			  
+
+			  <p>
+			    with multiple paragraphs
+			  </p>
+			</div>
+		`);
+	});
+
+	it('should handle emoticon', () => {
+		const obj = render(<MDLabel expression={'**Demo** of a :dog:'} />);
+		return expect(obj.container).toMatchInlineSnapshot(`
+			<div>
+			  <strong>
+			    Demo
+			  </strong>
+			   of a 
+			  <span
+			    aria-label="dog emoji"
+			    role="img"
+			  >
+			    🐶
+			  </span>
+			</div>
+		`);
+	});
+
+	it('should render external link', () => {
+		const obj = render(
+			<MDLabel
+				expression={'This is a [link](https://inseefr.github.io/Lunatic/docs)'}
+			/>
+		);
+		const stringHtmlWithoutId = getStringHtmlWithoutId(obj.container);
+
+		return expect(stringHtmlWithoutId).toMatchInlineSnapshot(
+			`"<div>This is a <a href="https://inseefr.github.io/Lunatic/docs" target="_blank" rel="noopener noreferrer" >link</a></div>"`
+		);
+	});
+
+	it('should render external link with tooltip', async () => {
+		render(
+			<MDLabel
+				expression={
+					"This is a [link](https://inseefr.github.io/Lunatic/docs 'with a tooltip')"
+				}
+			/>
+		);
+		const link = screen.getByText('link'); // Get the link element by its text content
+		// Simulate hover event
+		await userEvent.hover(link);
+
+		let tooltip: HTMLElement | undefined;
+
+		await waitFor(() => {
+			tooltip = screen.getByRole('tooltip');
+		});
+		expect(link.getAttribute('data-tooltip-id')).toBe(tooltip?.id);
+
+		expect(tooltip).toBeInTheDocument();
+	});
+
+	it('should render internal link', () => {
+		const obj = render(
+			<MDLabel expression={'This is an [internal link](/docs)'} />
+		);
+		return expect(getStringHtmlWithoutId(obj.container)).toMatchInlineSnapshot(
+			`"<div>This is an <a href="/docs" >internal link</a></div>"`
+		);
+	});
+
+	it('should render internal link with tooltip', async () => {
+		render(
+			<MDLabel
+				expression={"This is an [internal link](/docs 'with a tooltip')"}
+			/>
+		);
+
+		const link = screen.getByText('internal link'); // Get the link element by its text content
+		// Simulate hover event
+		await userEvent.hover(link);
+
+		let tooltip = null;
+
+		await waitFor(() => {
+			tooltip = screen.getByRole('tooltip');
+		});
+		expect(tooltip).toBeInTheDocument();
+	});
+});

package/src/components/shared/MDLabel/MDLabel.tsx

@@ -0,0 +1,36 @@
+import { Fragment, type PropsWithChildren } from 'react';
+import Markdown, { type Components } from 'react-markdown';
+import { MarkdownLink } from './MarkdownLink';
+import remarkBreaks from 'remark-breaks';
+import emoji from 'remark-emoji';
+
+type Props = { expression: string };
+
+export function MDLabel({ expression }: Props) {
+	const hasParagraphs = /\n\n/.test(expression);
+	const components = {
+		p: hasParagraphs ? 'p' : Fragment,
+		br: 'br',
+		a: MarkdownA,
+	} as Partial<Components>;
+	return (
+		<Markdown
+			components={components}
+			remarkPlugins={[[emoji, { accessible: true }], remarkBreaks]}
+		>
+			{expression}
+		</Markdown>
+	);
+}
+const MarkdownA = ({
+	title,
+	href,
+	children,
+}: PropsWithChildren<{ title?: string; href: string }>) => {
+	const tooltip = title ? <MDLabel expression={title} /> : null;
+	return (
+		<MarkdownLink href={href} tooltip={tooltip}>
+			{children}
+		</MarkdownLink>
+	);
+};

package/src/components/shared/MDLabel/MarkdownLink.tsx

@@ -0,0 +1,43 @@
+import { useId, type PropsWithChildren, type ReactNode } from 'react';
+import { Tooltip } from 'react-tooltip';
+import { RouterLink } from './RouterLink';
+import { slottableComponent } from '../HOC/slottableComponent';
+
+type Props = PropsWithChildren<{ href: string; tooltip?: ReactNode }>;
+
+export const MarkdownLink = slottableComponent<Props>(
+	'MarkdownLink',
+	({ href, children, tooltip }) => {
+		const id = useId();
+
+		const extraProps = tooltip
+			? { 'data-tooltip-id': `tooltip-${id}`, className: 'link-md' }
+			: {};
+		const isAbsoluteLink = href.trim().startsWith('/');
+
+		return (
+			<>
+				{isAbsoluteLink ? (
+					<RouterLink to={href} id={id} {...extraProps}>
+						{children}
+					</RouterLink>
+				) : (
+					<a
+						href={href}
+						target="_blank"
+						rel="noopener noreferrer"
+						id={id}
+						{...extraProps}
+					>
+						{children}
+					</a>
+				)}
+				{tooltip && (
+					<Tooltip className="tooltip-content" id={`tooltip-${id}`}>
+						{tooltip}
+					</Tooltip>
+				)}
+			</>
+		);
+	}
+);

package/src/components/shared/MDLabel/RouterLink.tsx

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+import { slottableComponent } from '../HOC/slottableComponent';
+
+type Props = Omit<ComponentProps<'a'>, 'href'> & { to: string };
+
+export const RouterLink = slottableComponent('RouterLink', (props: Props) => {
+	const { to, children, ...rest } = props;
+	return (
+		<a href={to} {...rest}>
+			{children}
+		</a>
+	);
+});

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

@@ -0,0 +1,78 @@
+import { render, fireEvent } from '@testing-library/react';
+import { MissingPure } from './Missing';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+
+describe('Missing', () => {
+	const handleChanges = vi.fn();
+	const missingResponse = {
+		name: 'Demo',
+		value: '',
+	};
+	const dontKnowButton = "Don't know";
+	const refusedButton = 'Refused';
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render the "Don\'t Know" and "Refused" buttons', () => {
+		const { getByText } = render(
+			<MissingPure
+				dontKnowButton={dontKnowButton}
+				refusedButton={refusedButton}
+				missingResponse={missingResponse}
+				handleChanges={handleChanges}
+				missingShortcut={{ dontKnow: '', refused: '' }}
+				missingStrategy={() => {}}
+				shortcut={false}
+			/>
+		);
+		const dontKnow = getByText(dontKnowButton);
+		const refused = getByText(refusedButton);
+		expect(dontKnow).toBeInTheDocument();
+		expect(refused).toBeInTheDocument();
+	});
+
+	it('should call the handleChanges function when a button is clicked', () => {
+		const { getByText } = render(
+			<MissingPure
+				dontKnowButton={dontKnowButton}
+				refusedButton={refusedButton}
+				missingResponse={missingResponse}
+				handleChanges={handleChanges}
+				missingShortcut={{ dontKnow: '', refused: '' }}
+				missingStrategy={() => {}}
+				shortcut={false}
+			/>
+		);
+		const dontKnow = getByText(dontKnowButton);
+		const refused = getByText(refusedButton);
+		fireEvent.click(dontKnow);
+		fireEvent.click(refused);
+		expect(handleChanges).toHaveBeenCalledTimes(2);
+		expect(handleChanges).toHaveBeenCalledWith([
+			{ ...missingResponse, value: 'DK' },
+		]);
+		expect(handleChanges).toHaveBeenCalledWith([
+			{ ...missingResponse, value: 'RF' },
+		]);
+	});
+
+	it('should not handle keyboard shortcuts when a shortcut is not provided', () => {
+		render(
+			<MissingPure
+				dontKnowButton={dontKnowButton}
+				refusedButton={refusedButton}
+				missingResponse={missingResponse}
+				handleChanges={handleChanges}
+				missingShortcut={{ dontKnow: '', refused: '' }}
+				missingStrategy={() => {}}
+				shortcut={false}
+			/>
+		);
+		const body = document.body;
+		fireEvent.click(body, { key: 'd' });
+		fireEvent.click(body, { key: 'r' });
+		expect(handleChanges).toHaveBeenCalledTimes(0);
+	});
+});

package/src/components/shared/Missing/Missing.tsx

@@ -0,0 +1,128 @@
+import { useCallback } from 'react';
+import { DK, RF } from '../../../utils/constants';
+import { useLunaticMissing } from '../../../use-lunatic/lunatic-context';
+import type { LunaticBaseProps } from '../../type';
+import { Button } from '../Button/Button';
+import { useKeyboardKey } from '../../../hooks/useKeyboardKey';
+
+type Props = {
+	handleChanges: LunaticBaseProps<any>['handleChanges'];
+	componentType?: string;
+	paginatedLoop?: boolean;
+	disabled?: boolean;
+	readOnly?: boolean;
+	missingResponse?: LunaticBaseProps['missingResponse'];
+};
+
+type PropsFromContext = Pick<
+	ReturnType<typeof useLunaticMissing>,
+	| 'shortcut'
+	| 'missingStrategy'
+	| 'dontKnowButton'
+	| 'refusedButton'
+	| 'missingShortcut'
+>;
+
+export const Missing = (props: Props) => {
+	const propsContext = useLunaticMissing();
+	if (!propsContext.missing || !props.missingResponse) {
+		return null;
+	}
+	if (props.componentType === 'Loop' && props.paginatedLoop) {
+		return null;
+	}
+
+	return <MissingPure {...props} {...propsContext} />;
+};
+
+export const MissingPure = (
+	props: Pick<
+		Props,
+		'handleChanges' | 'missingResponse' | 'disabled' | 'readOnly'
+	> &
+		PropsFromContext
+) => {
+	const {
+		missingResponse,
+		handleChanges,
+		missingStrategy,
+		shortcut,
+		missingShortcut,
+		dontKnowButton,
+		refusedButton,
+		disabled,
+		readOnly,
+	} = props;
+	const value = missingResponse?.value;
+	const onClick = (value: 'DK' | 'RF') => {
+		handleChanges([{ name: missingResponse?.name ?? 'UNKNOWN', value }]);
+	};
+
+	const handleMissingStrategy = useCallback(() => {
+		if (missingStrategy) missingStrategy();
+	}, [missingStrategy]);
+
+	const onClickDK = () => {
+		onClick(DK);
+		handleMissingStrategy();
+	};
+
+	const onClickRF = () => {
+		onClick(RF);
+		handleMissingStrategy();
+	};
+
+	const hasKeyboardShortcut = Boolean(
+		shortcut &&
+			!disabled &&
+			!readOnly &&
+			missingShortcut &&
+			missingShortcut.dontKnow &&
+			missingShortcut.refused
+	);
+
+	useKeyboardKey(
+		Object.values(missingShortcut),
+		(e) => {
+			e.preventDefault();
+			if (e.key.toLowerCase() === missingShortcut.dontKnow.toLowerCase())
+				onClickDK();
+			if (e.key.toLowerCase() === missingShortcut.refused.toLowerCase())
+				onClickRF();
+		},
+		hasKeyboardShortcut
+	);
+
+	return (
+		<div className="missing-buttons">
+			<span
+				className={`missing-button${
+					value === DK ? '-active' : ''
+				} missing-button-dk${value === DK ? '-active' : ''}`}
+			>
+				<Button
+					selected={value === DK}
+					disabled={disabled}
+					readOnly={readOnly}
+					label={dontKnowButton}
+					onClick={onClickDK}
+				/>
+			</span>
+			<span
+				className={`missing-button${
+					value === RF ? '-active' : ''
+				} missing-button-rf${value === RF ? '-active' : ''}`}
+			>
+				<Button
+					selected={value === RF}
+					disabled={disabled}
+					readOnly={readOnly}
+					label={refusedButton}
+					onClick={onClickRF}
+				/>
+			</span>
+		</div>
+	);
+};
+
+export default Missing;