@inseefr/lunatic 3.4.5 → 3.4.6

package/src/components/shared/Table/Th.tsx

@@ -0,0 +1,25 @@
+import type { PropsWithChildren } from 'react';
+import classnames from 'classnames';
+import { slottableComponent } from '../HOC/slottableComponent';
+
+type Props = PropsWithChildren<{
+	className?: string;
+	row?: string | number;
+	index?: string | number;
+	colSpan?: number;
+	rowSpan?: number;
+}>;
+
+function LunaticTh({ children, className, colSpan, rowSpan }: Props) {
+	return (
+		<th
+			className={classnames('lunatic-table-th', className)}
+			colSpan={colSpan}
+			rowSpan={rowSpan}
+		>
+			{children}
+		</th>
+	);
+}
+
+export const Th = slottableComponent('Th', LunaticTh);

package/src/components/shared/Table/Thead.spec.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import { Thead } from './Thead';
+import { expect, describe, it } from 'vitest';
+
+describe('Thead', () => {
+	it('renders with the correct class name', () => {
+		const props = { className: 'test' };
+		render(<Thead {...props} />);
+		expect(screen.getByRole('rowgroup')).toHaveClass(
+			'lunatic-table-thead test'
+		);
+	});
+});

package/src/components/shared/Table/Thead.tsx

@@ -0,0 +1,17 @@
+import classnames from 'classnames';
+import { type PropsWithChildren } from 'react';
+import { slottableComponent } from '../HOC/slottableComponent';
+
+type Props = PropsWithChildren<{
+	className?: string;
+}>;
+
+function LunaticThead({ children, className }: Props) {
+	return (
+		<thead className={classnames('lunatic-table-thead', className)}>
+			{children}
+		</thead>
+	);
+}
+
+export const Thead = slottableComponent('Thead', LunaticThead);

package/src/components/shared/Table/Tr.spec.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { Tr } from './Tr';
+import { expect, describe, it } from 'vitest';
+
+describe('Tr', () => {
+	it('renders a table row with the correct id and class name', () => {
+		render(
+			<table>
+				<tbody>
+					<Tr row={1} className="highlighted-row" />
+				</tbody>
+			</table>
+		);
+		const tr = screen.getByRole('row');
+		expect(tr).toHaveClass('lunatic-table-tr', 'highlighted-row');
+	});
+
+	it('renders the children components', () => {
+		render(
+			<Tr row={1}>
+				<td id="1">Cell 1,1</td>
+				<td id="1">Cell 1,2</td>
+			</Tr>
+		);
+		const cell1 = screen.getByText('Cell 1,1');
+		const cell2 = screen.getByText('Cell 1,2');
+		expect(cell1).toBeInTheDocument();
+		expect(cell2).toBeInTheDocument();
+	});
+});

package/src/components/shared/Table/Tr.tsx

@@ -0,0 +1,16 @@
+import type { PropsWithChildren } from 'react';
+import classnames from 'classnames';
+import { slottableComponent } from '../HOC/slottableComponent';
+
+type Props = PropsWithChildren<{
+	className?: string;
+	row?: string | number;
+}>;
+
+function LunaticTr({ children, className }: Props) {
+	return (
+		<tr className={classnames('lunatic-table-tr', className)}>{children}</tr>
+	);
+}
+
+export const Tr = slottableComponent('Tr', LunaticTr);

package/src/components/shared/Table/index.ts

@@ -0,0 +1,7 @@
+export { Table } from './Table';
+export { Tbody } from './Tbody';
+export { Td } from './Td';
+export { Th } from './Th';
+export { Thead } from './Thead';
+export { Tr } from './Tr';
+export { TableHeader } from './TableHeader';

package/src/components/type.ts

@@ -0,0 +1,317 @@
+import type { CSSProperties, FunctionComponent, ReactNode } from 'react';
+import { useLunatic } from '../use-lunatic/use-lunatic';
+import type {
+	LunaticChangesHandler,
+	LunaticComponentDefinition,
+	LunaticError,
+	LunaticOptions,
+	LunaticReducerState,
+} from '../use-lunatic/type';
+import type { InterpretedOption } from '../use-lunatic/props/propOptions';
+
+type Formats = 'PTnHnM' | 'PnYnM';
+export type VtlExpression = {
+	value: string;
+	type: 'VTL' | 'VTL|MD' | 'TXT';
+};
+
+export interface LunaticExtraProps {}
+
+export type LunaticBaseProps<ValueType = unknown> = {
+	id: string;
+	handleChanges: LunaticChangesHandler;
+	errors?: { [id: string]: LunaticError[] };
+	preferences?: LunaticOptions['preferences'];
+	label?: ReactNode;
+	disabled?: boolean;
+	missing?: unknown;
+	missingResponse?: { name: string; value?: unknown };
+	management?: LunaticOptions['management'];
+	description?: ReactNode;
+	shortcut?: boolean;
+	required?: boolean;
+	value: null | ValueType;
+	readOnly?: boolean;
+	className?: string;
+	style?: CSSProperties;
+	iteration?: number;
+	declarations?: {
+		id: string;
+		declarationType:
+			| 'INSTRUCTION'
+			| 'COMMENT'
+			| 'HELP'
+			| 'CODECARD'
+			| 'WARNING'
+			| 'STATEMENT';
+		position: string;
+		label: ReactNode;
+	}[];
+	features?: string[];
+	goNextPage?: () => void;
+	goPreviousPage?: () => void;
+	meta?: Record<string, unknown>;
+	// Function used by the wrapper to transform props, can be used to pass transformation through component (Loop, Question...)
+	propsTransformer?: (v: any) => any;
+};
+
+export type SuggesterOption = {
+	children?: string[];
+	id?: string;
+	description?: ReactNode;
+	label?: ReactNode;
+	value: string;
+	niveau?: string;
+	parent?: string;
+	tokensMap?: Record<string, { count: number; fields: string[] }>;
+};
+
+export type ComponentPropsByType = {
+	InputNumber: LunaticBaseProps<number | null> &
+		LunaticExtraProps & {
+			min?: number;
+			max?: number;
+			decimals?: number;
+			unit?: string;
+			response: { name: string };
+			componentType?: 'InputNumber';
+		};
+	Duration: LunaticBaseProps<string | null> &
+		LunaticExtraProps & {
+			format: Formats;
+			response: { name: string };
+			componentType?: 'Duration';
+		};
+	Text: LunaticBaseProps<string> &
+		LunaticExtraProps & {
+			componentType?: 'Text';
+		};
+	Input: LunaticBaseProps<string> &
+		LunaticExtraProps & {
+			maxLength?: number;
+			value: null | string;
+			response: { name: string };
+			componentType?: 'Input';
+		};
+	Accordion: LunaticBaseProps<string> &
+		LunaticExtraProps & {
+			componentType?: 'Accordion';
+			items: {
+				label: ReactNode;
+				body: ReactNode;
+			}[];
+		};
+	Sequence: Pick<
+		LunaticBaseProps<string>,
+		'id' | 'label' | 'style' | 'declarations' | 'description'
+	> &
+		LunaticExtraProps & { componentType?: 'Sequence' };
+	Subsequence: Pick<
+		LunaticBaseProps<string>,
+		'id' | 'label' | 'declarations' | 'description'
+	> &
+		LunaticExtraProps & { componentType?: 'Subsequence' };
+	Question: Pick<
+		LunaticBaseProps<unknown>,
+		| 'propsTransformer'
+		| 'label'
+		| 'id'
+		| 'description'
+		| 'declarations'
+		| 'errors'
+		| 'disabled'
+		| 'readOnly'
+	> &
+		LunaticExtraProps & {
+			components: LunaticComponentProps[];
+			componentType?: 'Question';
+			iteration?: number;
+		};
+	RosterForLoop: LunaticBaseProps<unknown> &
+		LunaticExtraProps & {
+			lines: { min: number; max: number };
+			iterations: number;
+			getComponents: (n: number) => LunaticComponentProps[];
+			executeExpression: LunaticReducerState['executeExpression'];
+			value: Record<string, unknown[]>;
+			header?: Array<{
+				label: ReactNode;
+				rowspan?: number;
+				colspan?: number;
+			}>;
+			paginatedLoop?: boolean;
+			componentType?: 'RosterForLoop';
+		};
+	Loop: LunaticBaseProps<unknown> &
+		LunaticExtraProps & {
+			lines: { min: number; max: number };
+			iterations: number;
+			getComponents: (n: number) => LunaticComponentProps[];
+			executeExpression: LunaticReducerState['executeExpression'];
+			value: Record<string, unknown[]>;
+			header?: Array<{ label: ReactNode }>;
+			paginatedLoop?: boolean;
+			componentType?: 'Loop';
+		};
+	Table: LunaticBaseProps<unknown> &
+		LunaticExtraProps & {
+			value: Record<string, unknown>;
+			header: Array<{
+				label: ReactNode;
+				rowspan?: number;
+				colspan?: number;
+			}>;
+			body: (LunaticComponentProps & {
+				colspan?: number;
+				rowspan?: number;
+			})[][];
+			executeExpression: LunaticReducerState['executeExpression'];
+			iteration: LunaticReducerState['pager']['iteration'];
+			componentType?: 'Table';
+		};
+	Datepicker: LunaticBaseProps<string | null> &
+		LunaticExtraProps & {
+			dateFormat: 'YYYY-MM-DD' | 'YYYY-MM' | 'YYYY';
+			min?: string;
+			max?: string;
+			response: { name: string };
+			componentType?: 'Datepicker';
+		};
+	CheckboxGroup: LunaticBaseProps<Record<string, boolean | null>> &
+		LunaticExtraProps & {
+			options: {
+				id: string;
+				label: ReactNode;
+				name: string;
+				checked: boolean;
+				description?: ReactNode;
+				onCheck: (b: boolean) => void;
+				onDetailChange?: (v: string) => void;
+				detailValue?: string | null;
+				detailLabel?: ReactNode;
+			}[];
+			orientation?: 'horizontal' | 'vertical';
+			componentType?: 'CheckboxGroup';
+		};
+	CheckboxOne: LunaticBaseProps<string | null> &
+		LunaticExtraProps & {
+			options: Array<InterpretedOption>;
+			componentType?: 'CheckboxOne';
+			orientation?: 'horizontal' | 'vertical';
+		};
+	Switch: LunaticBaseProps<boolean> &
+		LunaticExtraProps & {
+			response: { name: string };
+			statusLabel?: { true: string; false: string };
+			componentType?: 'Switch';
+		};
+	CheckboxBoolean: LunaticBaseProps<boolean> &
+		LunaticExtraProps & {
+			response: { name: string };
+			componentType?: 'CheckboxBoolean';
+		};
+	Radio: LunaticBaseProps<string | null> &
+		LunaticExtraProps & {
+			options: Array<InterpretedOption>;
+			checkboxStyle?: boolean;
+			response: { name: string };
+			componentType?: 'Radio';
+			orientation?: 'horizontal' | 'vertical';
+		};
+	Roundabout: LunaticBaseProps<string> &
+		LunaticExtraProps & {
+			iterations: number;
+			goToPage: ReturnType<typeof useLunatic>['goToPage'];
+			page: number;
+			progressVariable: string;
+			locked: boolean;
+			items: {
+				label?: ReactNode;
+				progress: number; // -1: not completed, 0: started, 1: finished
+				description?: ReactNode;
+				disabled?: boolean;
+			}[];
+			componentType?: 'Roundabout';
+		};
+	Dropdown: LunaticBaseProps<string | null> &
+		LunaticExtraProps & {
+			options: Array<{
+				description?: ReactNode;
+				label: ReactNode;
+				value: string;
+			}>;
+			response: { name: string };
+			componentType?: 'Dropdown';
+		};
+	Textarea: LunaticBaseProps<string> &
+		LunaticExtraProps & {
+			cols?: number;
+			placeHolder?: string;
+			maxLength?: number;
+			rows?: number;
+			response: { name: string };
+			componentType?: 'Textarea';
+		};
+	FilterDescription: Pick<LunaticBaseProps<string>, 'id' | 'label'> &
+		LunaticExtraProps & {
+			componentType?: 'FilterDescription';
+		};
+	PairwiseLinks: Omit<LunaticBaseProps, 'value'> &
+		LunaticExtraProps & {
+			components: LunaticComponentDefinition[];
+			features?: LunaticOptions['features'];
+			executeExpression: LunaticReducerState['executeExpression'];
+			xAxisIterations: number;
+			yAxisIterations: number;
+			symLinks: Record<string, Record<string, string>>;
+			value: Record<string, unknown[]>;
+			getComponents: (x: number, y: number) => LunaticComponentProps[];
+			componentType?: 'PairwiseLinks';
+		};
+	Suggester: LunaticBaseProps<string | null> &
+		LunaticExtraProps & {
+			componentType?: 'Suggester';
+			storeName: string;
+			optionRenderer: FunctionComponent<{
+				option: SuggesterOption;
+				placeholder?: string;
+				search?: string;
+			}>;
+			labelRenderer: FunctionComponent<{
+				option?: SuggesterOption;
+				selected?: boolean;
+				search?: string;
+			}>;
+			focused: boolean;
+			response: { name: string };
+			optionResponses?: { name: string; attribute: string }[];
+			arbitrary?: {
+				response: { name: string };
+			};
+			arbitraryValue?: string;
+			allowArbitrary?: boolean;
+			executeExpression: LunaticReducerState['executeExpression'];
+			iteration: LunaticReducerState['pager']['iteration'];
+		};
+	Summary: LunaticBaseProps<string | null> &
+		LunaticExtraProps & {
+			componentType?: 'Summary';
+			executeExpression: LunaticReducerState['executeExpression'];
+			sections: Array<{
+				id: string;
+				responses?: Array<{
+					id: string;
+					label: VtlExpression;
+					value: VtlExpression;
+				}>;
+				title?: VtlExpression;
+				iterations?: VtlExpression;
+			}>;
+		};
+};
+
+export type LunaticComponentType = keyof ComponentPropsByType;
+
+export type LunaticComponentProps<
+	T extends LunaticComponentType = LunaticComponentType,
+> = ComponentPropsByType[T];

package/src/constants/component-types.ts

@@ -0,0 +1 @@
+export const CHECKBOX_GROUP = 'CheckboxGroup';

package/src/constants/declarations.ts

@@ -0,0 +1,14 @@
+// Declaration position
+
+export const BEFORE_QUESTION_TEXT = 'BEFORE_QUESTION_TEXT';
+export const AFTER_QUESTION_TEXT = 'AFTER_QUESTION_TEXT';
+export const DETACHABLE = 'DETACHABLE';
+
+// Declaration types
+
+export const INSTRUCTION = 'INSTRUCTION';
+export const COMMENT = 'COMMENT';
+export const HELP = 'HELP';
+export const WARNING = 'WARNING';
+export const MESSAGE_FILTER = 'MESSAGE_FILTER';
+export const STATEMENT = 'STATEMENT';

package/src/constants/event-types.ts

@@ -0,0 +1,13 @@
+// Event types for paradata
+export const EVENT_FOCUS_IN = 'focus-in';
+export const EVENT_FOCUS_OUT = 'focus-out';
+export const EVENT_SELECTION = 'selection';
+export const EVENT_CLICK = 'click';
+export const EVENT_VALUE_CHANGE = 'value-changed';
+
+// Category of object
+export const INPUT_CATEGORY = 'lunatic-input';
+export const BUTTON_CATEGORY = 'lunatic-button';
+export const LINK_CATEGORY = 'lunatic-link';
+export const TOOLTIP_CATEGORY = 'lunatic-tooltip';
+export const CALCULATED_VAR_CATEGORY = 'lunatic-calculated-var';

package/src/constants/index.ts

@@ -0,0 +1,5 @@
+export * from './component-types';
+export * from './declarations';
+export * from './value-types';
+export * from './variable-types';
+export * from './event-types';

package/src/constants/indexedDBStore.ts

@@ -0,0 +1,20 @@
+export const STORE_DATA_NAME = 'store/entities';
+export const STORE_INFO_NAME = 'store/info';
+export const STORE_INDEX_NAME = 'store/entities/index';
+export const STORE_INDEX_PATH = 'searching';
+export const MAX_STRING = String.fromCharCode(65535);
+export const SEARCH_TYPES = {
+	prefix: 'search/prefix',
+	tokens: 'search/tokens',
+};
+
+const IndexedDBStore = {
+	STORE_DATA_NAME,
+	STORE_INDEX_NAME,
+	STORE_INDEX_PATH,
+	MAX_STRING,
+	SEARCH_TYPES,
+	STORE_INFO_NAME,
+};
+
+export default IndexedDBStore;

package/src/constants/supported-preferences.ts

@@ -0,0 +1,10 @@
+import * as C from './value-types';
+
+// ORDERED ARRAY
+export const supportedPreferences = [
+	C.PREVIOUS,
+	C.COLLECTED,
+	C.FORCED,
+	C.EDITED,
+	C.INPUTTED,
+];

package/src/constants/value-types.ts

@@ -0,0 +1,5 @@
+export const PREVIOUS = 'PREVIOUS';
+export const COLLECTED = 'COLLECTED';
+export const FORCED = 'FORCED';
+export const EDITED = 'EDITED';
+export const INPUTTED = 'INPUTTED';

package/src/constants/variable-types.ts

@@ -0,0 +1,4 @@
+export const EXTERNAL = 'EXTERNAL' as const;
+export const CALCULATED = 'CALCULATED' as const;
+// Already define in value-types
+//export const COLLECTED = 'COLLECTED';

package/src/css/components/Button.scss

@@ -0,0 +1,24 @@
+.button-lunatic {
+	min-width: 20%;
+	color: white;
+	border-color: var(--color-primary-dark);
+	background-color: var(--color-primary-dark);
+	font-size: 1.2em;
+	font-weight: bold;
+	padding: 0.4em;
+	&:hover,
+	&:focus:hover {
+		color: var(--color-primary-dark);
+		background-color: white;
+		border-color: var(--color-primary-dark);
+	}
+	&:focus {
+		outline: none;
+		background-color: var(--color-primary-light);
+		border-color: var(--color-primary-light);
+	}
+	&:disabled {
+		background: var(--color-disabled);
+		color: var(--color-primary-dark);
+	}
+}

package/src/css/components/CheckboxGroup.scss

@@ -0,0 +1,13 @@
+.lunatic-checkbox-group {
+	legend {
+		.label-description {
+			font-weight: lighter;
+			display: block;
+		}
+	}
+	.lunatic-checkbox-group-option {
+		display: flex;
+		flex-direction: column;
+		font-size: 13px;
+	}
+}

package/src/css/components/CheckboxOne.scss

@@ -0,0 +1,19 @@
+.lunatic-checkbox-one {
+	legend {
+		.label-description {
+			font-weight: lighter;
+		}
+	}
+	.lunatic-input-radio {
+		display: flex;
+
+		label {
+			display: flex;
+			gap:0.5em;
+			align-items: center;
+			.label-description {
+				font-weight: lighter;
+			}
+		}
+	}
+}

package/src/css/components/CheckboxOption.scss

@@ -0,0 +1,87 @@
+.lunatic-checkboxes {
+	display: flex;
+	flex-direction: column;
+}
+
+.lunatic-checkboxes--horizontal {
+	flex-direction: row;
+	gap: 1rem;
+}
+
+.lunatic-input-checkbox {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	gap: .5rem;
+	padding: .3rem 0;
+
+	label {
+		display: flex;
+		gap: .5em;
+		cursor: inherit;
+		margin: 0;
+		font-weight: normal;
+	}
+}
+
+.lunatic-input-checkbox__icon {
+	display: grid;
+	place-items: center;
+	width: 18px;
+	height: 18px;
+	flex: none;
+	border-radius: 2px;
+	color: #FFF;
+	border: 2px solid var(--color-primary-dark);
+
+	svg {
+		transform: scale(.9);
+	}
+}
+
+.lunatic-input-checkbox[aria-checked="true"] .lunatic-input-checkbox__icon {
+	background-color: var(--color-primary-dark);
+}
+
+.lunatic-input-checkbox[aria-disabled="true"],
+.lunatic-input-checkbox[aria-readonly="true"] {
+	cursor: default;
+
+	.lunatic-input-checkbox__icon
+	{
+		border-color: var(--color-primary-light);
+		background-color: var(--color-disabled);
+	}
+}
+
+.lunatic-input-checkbox[aria-disabled="true"][aria-checked="true"],
+.lunatic-input-checkbox[aria-readonly="true"][aria-checked="true"]
+{
+
+	.lunatic-input-checkbox__icon {
+		color: var(--color-primary-light);
+	}
+}
+
+// Radio Variant
+// =============
+.lunatic-input-radio .lunatic-input-checkbox__icon {
+	border-radius: 18px;
+
+	svg {
+		display: none;
+	}
+
+}
+
+.lunatic-input-radio[aria-checked="true"] .lunatic-input-checkbox__icon {
+	background: transparent;
+}
+
+.lunatic-input-radio[aria-checked="true"] .lunatic-input-checkbox__icon::after {
+	content:'';
+	width: 10px;
+	height: 10px;
+	border-radius: 10px;
+	background-color: var(--color-primary-dark);
+}