@inseefr/lunatic 3.4.4 → 3.4.5-rc.0

package/src/components/LunaticComponents.tsx

@@ -0,0 +1,187 @@
+import {
+	Fragment,
+	isValidElement,
+	memo,
+	type PropsWithChildren,
+	type ReactNode,
+	useRef,
+} from 'react';
+import { useAutoFocus } from '../hooks/use-auto-focus';
+import { hasComponentType } from '../use-lunatic/commons/component';
+import { ComponentWrapper } from './shared/ComponentWrapper';
+import { library } from './library';
+import { ErrorBoundary } from 'react-error-boundary';
+import {
+	SlotsProvider,
+	type LunaticSlotComponents,
+	slottableComponent,
+} from './shared/HOC/slottableComponent';
+import type { LunaticComponentProps } from './type';
+
+type Props<V = unknown> = {
+	// List of components to display (coming from getComponents)
+	components: LunaticComponentProps[];
+	// Should we memoized children
+	memo?: boolean;
+	// Key that trigger autofocus when it changes (pageTag)
+	autoFocusKey?: string;
+	// Returns the list of extra props to add to components
+	componentProps?: (component: LunaticComponentProps) => V;
+	// Forbidden components
+	blocklist?: string[];
+	// Add additional wrapper around each component
+	wrapper?: (
+		props: PropsWithChildren<LunaticComponentProps & V & { index: number }>
+	) => ReactNode;
+	// Customized deep components
+	slots?: Partial<LunaticSlotComponents>;
+};
+
+const LunaticComponentWrapper = slottableComponent(
+	'ComponentWrapper',
+	({ children }: PropsWithChildren<LunaticComponentProps>) => {
+		return <div className="lunatic lunatic-component">{children}</div>;
+	}
+);
+
+/**
+ * Entry point for orchestrators, this component display the list of fields
+ */
+export function LunaticComponents<V = unknown>({
+	components,
+	autoFocusKey,
+	componentProps,
+	blocklist,
+	memo,
+	slots,
+	wrapper = (args) => <LunaticComponentWrapper {...args} />,
+}: Props<V>) {
+	const wrapperRef = useRef<HTMLDivElement>(null);
+	const hasComponents = components.length > 0;
+	const WrapperComponent = autoFocusKey ? 'div' : Fragment;
+
+	useAutoFocus(wrapperRef, hasComponents ? autoFocusKey : undefined);
+
+	return (
+		<WrapperComponent
+			ref={WrapperComponent === Fragment ? undefined : wrapperRef}
+		>
+			<SlotsProvider slots={slots}>
+				{components.map((component, k) => {
+					if (hasComponentType(component)) {
+						if (blocklist && blocklist.includes(component.componentType)) {
+							return (
+								<Fragment key={computeId(component, k)}>
+									{wrapper({
+										children: (
+											<div style={{ color: 'red' }}>
+												Component "{component.componentType}" is not allowed
+												here
+											</div>
+										),
+										index: k,
+										...component,
+									})}
+								</Fragment>
+							);
+						}
+						const props = {
+							...component,
+							...componentProps?.(component),
+							propsTransformer: componentProps,
+						};
+						return (
+							<Fragment key={computeId(component, k)}>
+								{wrapper({
+									children: memo ? (
+										<LunaticComponentMemo {...props} />
+									) : (
+										<LunaticComponent {...props} />
+									),
+									index: k,
+									...props,
+								})}
+							</Fragment>
+						);
+					}
+
+					// In some case (table for instance) we have static component that only have a label (no componentType)
+					if (hasLabel(component)) {
+						return (
+							<Fragment key={k}>
+								{wrapper({
+									...component,
+									children: component.label,
+									index: k,
+								} as any)}
+							</Fragment>
+						);
+					}
+
+					// Component is a ReactNode
+					if (isValidElement(component)) {
+						return (
+							<Fragment key={k}>
+								{wrapper({
+									children: component,
+									index: k,
+								} as any)}
+							</Fragment>
+						);
+					}
+
+					return null;
+				})}
+			</SlotsProvider>
+		</WrapperComponent>
+	);
+}
+
+function LunaticComponent(props: LunaticComponentProps) {
+	// Component is too dynamic to be typed
+	const Component = (library as any)[props.componentType!];
+	return (
+		<ErrorBoundary FallbackComponent={LunaticError}>
+			<ComponentWrapper {...(props as any)}>
+				<Component {...props} />
+			</ComponentWrapper>
+		</ErrorBoundary>
+	);
+}
+
+function LunaticError({ error }: { error: { toString: () => string } }) {
+	console.error(error);
+	return (
+		<p style={{ color: 'red' }}>
+			Cannot render this component : {error.toString()}
+		</p>
+	);
+}
+
+const LunaticComponentMemo = memo(LunaticComponent);
+
+function computeId(
+	component: unknown,
+	fallback: number | string
+): number | string {
+	if (
+		component &&
+		typeof component === 'object' &&
+		'id' in component &&
+		typeof component.id === 'string'
+	) {
+		return component.id;
+	}
+	return fallback;
+}
+
+export function hasLabel<T>(
+	component: T
+): component is { label: ReactNode } & T {
+	return (
+		!!component &&
+		typeof component === 'object' &&
+		'label' in component &&
+		isValidElement(component.label)
+	);
+}

package/src/components/PairwiseLinks/PairwiseLinks.tsx

@@ -0,0 +1,93 @@
+import type { LunaticComponentProps } from '../type';
+import { times } from '../../utils/array';
+import React, { Fragment } from 'react';
+import { LunaticComponents } from '../LunaticComponents';
+import { Declarations } from '../shared/Declarations/Declarations';
+import { Label } from '../shared/Label/Label';
+
+export const PairwiseLinks = ({
+	declarations,
+	xAxisIterations,
+	yAxisIterations,
+	id,
+	getComponents,
+}: LunaticComponentProps<'PairwiseLinks'>) => {
+	const nbRows = xAxisIterations * yAxisIterations;
+
+	if (nbRows <= 1) {
+		return <div>Nothing to display!</div>;
+	}
+
+	const combinations = getCombinations(xAxisIterations, yAxisIterations);
+
+	return (
+		<>
+			<Declarations
+				type="AFTER_QUESTION_TEXT"
+				declarations={declarations}
+				id={id}
+			/>
+			{combinations
+				.filter(([x, y]) => y < x)
+				.map(([x, y]) => (
+					<LunaticComponents
+						key={`${x}-${y}`}
+						components={getComponents(x, y)}
+						componentProps={(props) => ({
+							...props,
+							id: `${props.id}-${x + 1}-${y + 1} `,
+						})}
+					/>
+				))}
+			{combinations
+				.filter(([x, y]) => x > y)
+				.map(([x, y]) => {
+					const components = getComponents(y, x);
+					const firstComponent = components[0];
+					if (firstComponent.componentType !== 'Dropdown') {
+						return (
+							<div>
+								First child component of a pairwise link must be a dropdown
+							</div>
+						);
+					}
+					return (
+						<Fragment key={`${x}-${y}`}>
+							<PairwiseMirror {...firstComponent} />
+							<LunaticComponents
+								components={components.slice(1)}
+								componentProps={(props) => ({
+									...props,
+									id: `${props.id}-${x + 1}-${y + 1} `,
+								})}
+							/>
+						</Fragment>
+					);
+				})}
+		</>
+	);
+};
+
+const PairwiseMirror = ({
+	value,
+	options,
+	label,
+}: LunaticComponentProps<'Dropdown'>) => {
+	const selectedOption = options?.find((o) => o.value === value);
+	if (!selectedOption) {
+		return null;
+	}
+	return (
+		<div className="lunatic lunatic-component lunatic-dropdown lunatic-combo-box-container default-style">
+			<Label>{label}</Label>
+			<div>{selectedOption?.label}</div>
+		</div>
+	);
+};
+
+const getCombinations = (
+	sizeX: number,
+	sizeY: number
+): (readonly [number, number])[] => {
+	return times(sizeY, (y) => times(sizeX, (x) => [x, y] as const)).flat(1);
+};

package/src/components/Question/Question.tsx

@@ -0,0 +1,45 @@
+import { LunaticComponents } from '../LunaticComponents';
+import type { LunaticComponentProps } from '../type';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import { Declarations } from '../shared/Declarations/Declarations';
+import type { PropsWithChildren } from 'react';
+
+/**
+ * Surround a question giving additional context with label / description / declarations
+ */
+export const Question = (props: LunaticComponentProps<'Question'>) => {
+	const { components, propsTransformer } = props;
+	return (
+		<CustomQuestion {...props}>
+			<LunaticComponents
+				components={components}
+				componentProps={propsTransformer}
+			/>
+		</CustomQuestion>
+	);
+};
+
+type CustomProps = PropsWithChildren<LunaticComponentProps<'Question'>>;
+
+export const CustomQuestion = slottableComponent<CustomProps>(
+	'Question',
+	(props) => {
+		const { id, description, declarations, label, children } = props;
+		return (
+			<fieldset>
+				<legend id={`question-legend-${id}`}>
+					<h3>{label}</h3>
+					<p className="description-lunatic" id={`question-description-${id}`}>
+						{description}
+					</p>
+				</legend>
+				<Declarations
+					type="AFTER_QUESTION_TEXT"
+					declarations={declarations}
+					id={id}
+				/>
+				{children}
+			</fieldset>
+		);
+	}
+);

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,41 @@
+import type { LunaticComponentProps } from '../type';
+import { getComponentErrors } from '../shared/ComponentErrors/ComponentErrors';
+import { RadioGroup } from '../shared/Radio/RadioGroup';
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+
+function LunaticRadio(props: LunaticComponentProps<'Radio'>) {
+	const {
+		id,
+		options,
+		value,
+		checkboxStyle,
+		errors,
+		label,
+		shortcut,
+		className = 'lunatic-radio-group',
+		disabled,
+		readOnly,
+		description,
+		declarations,
+		orientation,
+	} = props;
+	return (
+		<RadioGroup
+			id={id}
+			options={options}
+			value={value}
+			description={description}
+			checkboxStyle={checkboxStyle}
+			errors={getComponentErrors(errors, id)}
+			label={label}
+			className={className}
+			shortcut={shortcut}
+			disabled={disabled}
+			readOnly={readOnly}
+			declarations={declarations}
+			orientation={orientation ?? 'vertical'}
+		/>
+	);
+}
+
+export const Radio = slottableComponent('Radio', LunaticRadio);

package/src/components/RosterForLoop/RosterForLoop.spec.tsx

@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { RosterForLoop } from './RosterForLoop';
+import type { LunaticComponentProps } from '../type';
+
+describe('RosterForLoop', () => {
+	const mockOnChange = vi.fn();
+
+	beforeEach(() => {
+		mockOnChange.mockClear();
+	});
+
+	const getComponents = (iteration: number) => [
+		{
+			componentType: 'Input',
+			maxLength: 249,
+			id: 'jrc3ye5q-QOP-lo6tcvvx',
+			response: {
+				name: 'TABDYN1',
+			},
+			iteration: iteration,
+			value: 'azeaze',
+		} as LunaticComponentProps<'Input'>,
+	];
+
+	it('renders the right number of columns', () => {
+		const { container } = render(
+			<RosterForLoop
+				value={{ name: ['John Doe', 'Jane Doe'] }}
+				handleChanges={mockOnChange}
+				label="Ceci est un test"
+				id="table"
+				lines={{ min: 1, max: 3 }}
+				iterations={2}
+				getComponents={getComponents}
+				executeExpression={() => null as any}
+			/>
+		);
+		expect(container).toMatchSnapshot();
+		expect(screen.getAllByRole('row')).toHaveLength(2);
+	});
+});

package/src/components/RosterForLoop/RosterForLoop.tsx

@@ -0,0 +1,123 @@
+import { Fragment, useCallback, useState } from 'react';
+import type { LunaticComponentProps } from '../type';
+import { Table, Tbody, Td, Tr, TableHeader } from '../shared/Table';
+import { times } from '../../utils/array';
+import { LunaticComponents } from '../LunaticComponents';
+import { blockedInLoopComponents } from '../Loop/constant';
+import {
+	ComponentErrors,
+	getComponentErrors,
+} from '../shared/ComponentErrors/ComponentErrors';
+import { CustomLoop } from '../Loop/Loop';
+
+const DEFAULT_MIN_ROWS = 1;
+const DEFAULT_MAX_ROWS = 12;
+
+/**
+ * Loop displayed as a table
+ */
+export const RosterForLoop = (
+	props: LunaticComponentProps<'RosterForLoop'>
+) => {
+	const {
+		value: valueMap,
+		lines,
+		errors,
+		handleChanges,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		declarations,
+		header,
+		iterations,
+		id,
+		getComponents,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		label,
+		...otherProps // These props will be passed down to the child components
+	} = props;
+	const min = lines?.min ?? DEFAULT_MIN_ROWS;
+	const max = lines?.max ?? DEFAULT_MAX_ROWS;
+	const [nbRows, setNbRows] = useState(Math.max(min, iterations));
+
+	const addRow = useCallback(() => {
+		if (nbRows < max) {
+			setNbRows(nbRows + 1);
+		}
+	}, [max, nbRows]);
+
+	const removeRow = useCallback(() => {
+		if (nbRows <= min) {
+			return;
+		}
+		const newNbRows = nbRows - 1;
+		setNbRows(newNbRows);
+		// Downsize all variables by 1
+		const newResponses = Object.entries(valueMap).map(([k, v]) => {
+			return {
+				name: k,
+				value: v?.filter((_, i) => i < newNbRows),
+			};
+		});
+		handleChanges(newResponses);
+	}, [nbRows, min, valueMap, handleChanges]);
+
+	if (nbRows === 0) {
+		return null;
+	}
+
+	let cols = 0;
+
+	return (
+		<CustomLoop
+			{...props}
+			errors={getComponentErrors(errors, props.id)}
+			addRow={nbRows === max ? undefined : addRow}
+			removeRow={nbRows === min ? undefined : removeRow}
+			canControlRows={!!(min && max && min !== max)}
+		>
+			<Table id={id}>
+				{header && <TableHeader header={header} />}
+				<Tbody>
+					{times(nbRows, (n) => {
+						const components = getComponents(n);
+						const lineErrors = getComponentErrors(props.errors, `${id}-${n}`);
+						const hasLineErrors = !!lineErrors?.length;
+						cols = components.length;
+						return (
+							<Fragment key={n}>
+								<Tr
+									row={n}
+									key={n}
+									className={
+										hasLineErrors ? 'lunatic-row-has-error' : undefined
+									}
+								>
+									<LunaticComponents
+										blocklist={blockedInLoopComponents}
+										components={components}
+										memo
+										componentProps={(c) => ({
+											...otherProps,
+											...c,
+											id: `${c.id}-${n}`,
+											iteration: n,
+											errors,
+										})}
+										wrapper={(props) => <Td {...props} />}
+									/>
+								</Tr>
+								{hasLineErrors && (
+									<Tr className="lunatic-errors">
+										{/* @ts-expect-error colSpan is not resolved */}
+										<Td colSpan={cols}>
+											<ComponentErrors errors={lineErrors} />
+										</Td>
+									</Tr>
+								)}
+							</Fragment>
+						);
+					})}
+				</Tbody>
+			</Table>
+		</CustomLoop>
+	);
+};

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

@@ -0,0 +1,90 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RosterForLoop > renders the right number of columns 1`] = `
+<div>
+  <label
+    class="lunatic-label"
+    for="table"
+    id="label-table"
+  >
+    Ceci est un test
+  </label>
+  <table
+    class="lunatic-table"
+    id="table-table"
+  >
+    <tbody
+      class="lunatic-table-tbody"
+    >
+      <tr
+        class="lunatic-table-tr"
+      >
+        <td
+          class="lunatic-table-td"
+        >
+          <div
+            class="field-container"
+          >
+            <div
+              class="field"
+            >
+              <div
+                class="lunatic-input"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-0"
+                  autocomplete="off"
+                  id="jrc3ye5q-QOP-lo6tcvvx-0"
+                  maxlength="249"
+                  type="text"
+                  value="azeaze"
+                />
+              </div>
+            </div>
+          </div>
+        </td>
+      </tr>
+      <tr
+        class="lunatic-table-tr"
+      >
+        <td
+          class="lunatic-table-td"
+        >
+          <div
+            class="field-container"
+          >
+            <div
+              class="field"
+            >
+              <div
+                class="lunatic-input"
+              >
+                <input
+                  aria-invalid="false"
+                  aria-labelledby="label-jrc3ye5q-QOP-lo6tcvvx-1"
+                  autocomplete="off"
+                  id="jrc3ye5q-QOP-lo6tcvvx-1"
+                  maxlength="249"
+                  type="text"
+                  value="azeaze"
+                />
+              </div>
+            </div>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <input
+    class="button-lunatic"
+    type="button"
+    value="Add row"
+  />
+  <input
+    class="button-lunatic"
+    type="button"
+    value="Remove row"
+  />
+</div>
+`;