@inseefr/lunatic 3.11.2 → 3.12.0

package/src/components/type.ts

@@ -15,8 +15,6 @@ export type VtlExpression = {
 	type: 'VTL' | 'VTL|MD' | 'TXT';
 };
 
-export interface LunaticExtraProps {}
-
 export type LunaticBaseProps<ValueType = unknown> = {
 	id: string;
 	handleChanges: LunaticChangesHandler;
@@ -68,40 +66,35 @@ export type SuggesterOption = {
 };
 
 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: DurationFormat;
-			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;
-			}[];
-		};
+	InputNumber: LunaticBaseProps<number | null> & {
+		min?: number;
+		max?: number;
+		decimals?: number;
+		unit?: string;
+		response: { name: string };
+		componentType?: 'InputNumber';
+	};
+	Duration: LunaticBaseProps<string | null> & {
+		format: DurationFormat;
+		response: { name: string };
+		componentType?: 'Duration';
+	};
+	Text: LunaticBaseProps<string> & {
+		componentType?: 'Text';
+	};
+	Input: LunaticBaseProps<string> & {
+		maxLength?: number;
+		value: null | string;
+		response: { name: string };
+		componentType?: 'Input';
+	};
+	Accordion: LunaticBaseProps<string> & {
+		componentType?: 'Accordion';
+		items: {
+			label: ReactNode;
+			body: ReactNode;
+		}[];
+	};
 	Sequence: Pick<
 		LunaticBaseProps<string>,
 		| 'id'
@@ -110,13 +103,11 @@ export type ComponentPropsByType = {
 		| 'declarations'
 		| 'description'
 		| 'shouldBeFiltered'
-	> &
-		LunaticExtraProps & { componentType?: 'Sequence' };
+	> & { componentType?: 'Sequence' };
 	Subsequence: Pick<
 		LunaticBaseProps<string>,
 		'id' | 'label' | 'declarations' | 'description' | 'shouldBeFiltered'
-	> &
-		LunaticExtraProps & { componentType?: 'Subsequence' };
+	> & { componentType?: 'Subsequence' };
 	Question: Pick<
 		LunaticBaseProps<unknown>,
 		| 'propsTransformer'
@@ -128,201 +119,183 @@ export type ComponentPropsByType = {
 		| 'disabled'
 		| 'readOnly'
 		| 'shouldBeFiltered'
-	> &
-		LunaticExtraProps & {
-			components: LunaticComponentProps[];
-			componentType?: 'Question';
-			iteration?: number;
-			value: Record<string, unknown>;
-		};
-	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;
-				detailLabel?: ReactNode;
-				detailMaxLength?: number;
-				detailValue?: string | null;
-				shouldBeFiltered?: boolean;
-			}[];
-			orientation?: 'horizontal' | 'vertical';
-			detailAlwaysDisplayed?: boolean;
-			componentType?: 'CheckboxGroup';
-		};
-	CheckboxOne: LunaticBaseProps<string | null> &
-		LunaticExtraProps & {
-			options: Array<InterpretedOption>;
+	> & {
+		components: LunaticComponentProps[];
+		componentType?: 'Question';
+		iteration?: number;
+		value: Record<string, unknown>;
+	};
+	RosterForLoop: LunaticBaseProps<unknown> & {
+		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> & {
+		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> & {
+		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> & {
+		dateFormat: 'YYYY-MM-DD' | 'YYYY-MM' | 'YYYY';
+		min?: string;
+		max?: string;
+		response: { name: string };
+		componentType?: 'Datepicker';
+	};
+	CheckboxGroup: LunaticBaseProps<Record<string, boolean | null>> & {
+		options: {
+			id: string;
+			label: ReactNode;
+			name: string;
+			checked: boolean;
+			description?: ReactNode;
+			onCheck: (b: boolean) => void;
+			onDetailChange?: (v: string) => void;
+			detailLabel?: ReactNode;
+			detailMaxLength?: number;
+			detailValue?: string | null;
+			shouldBeFiltered?: boolean;
+		}[];
+		orientation?: 'horizontal' | 'vertical';
+		detailAlwaysDisplayed?: boolean;
+		componentType?: 'CheckboxGroup';
+	};
+	CheckboxOne: LunaticBaseProps<string | null> & {
+		options: Array<InterpretedOption>;
+		response: { name: string };
+		componentType?: 'CheckboxOne';
+		orientation?: 'horizontal' | 'vertical';
+		detailAlwaysDisplayed?: boolean;
+	};
+	Switch: LunaticBaseProps<boolean> & {
+		response: { name: string };
+		statusLabel?: { true: string; false: string };
+		componentType?: 'Switch';
+	};
+	CheckboxBoolean: LunaticBaseProps<boolean> & {
+		response: { name: string };
+		componentType?: 'CheckboxBoolean';
+	};
+	Radio: LunaticBaseProps<string | null> & {
+		options: Array<InterpretedOption>;
+		checkboxStyle?: boolean;
+		response: { name: string };
+		componentType?: 'Radio';
+		orientation?: 'horizontal' | 'vertical';
+		detailAlwaysDisplayed?: boolean;
+	};
+	Roundabout: LunaticBaseProps<string> & {
+		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> & {
+		options: Array<{
+			description?: ReactNode;
+			label: ReactNode;
+			value: string;
+			shouldBeFiltered?: boolean;
+		}>;
+		response: { name: string };
+		componentType?: 'Dropdown';
+	};
+	Textarea: LunaticBaseProps<string> & {
+		cols?: number;
+		placeHolder?: string;
+		maxLength?: number;
+		rows?: number;
+		response: { name: string };
+		componentType?: 'Textarea';
+	};
+	FilterDescription: Pick<LunaticBaseProps<string>, 'id' | 'label'> & {
+		componentType?: 'FilterDescription';
+	};
+	PairwiseLinks: Omit<LunaticBaseProps, 'value'> & {
+		components: LunaticComponentDefinition[];
+		features?: LunaticOptions['features'];
+		executeExpression: LunaticReducerState['executeExpression'];
+		size: number;
+		symLinks: Record<string, Record<string, string>>;
+		value: Record<string, unknown[]>;
+		getComponents: (x: number, y: number) => LunaticComponentProps[];
+		componentType?: 'PairwiseLinks';
+	};
+	Suggester: LunaticBaseProps<string | null> & {
+		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 };
-			componentType?: 'CheckboxOne';
-			orientation?: 'horizontal' | 'vertical';
-			detailAlwaysDisplayed?: boolean;
 		};
-	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';
-			detailAlwaysDisplayed?: boolean;
-		};
-	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;
-				shouldBeFiltered?: boolean;
-			}>;
-			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<{
+		arbitraryValue?: string;
+		allowArbitrary?: boolean;
+		executeExpression: LunaticReducerState['executeExpression'];
+		iteration: LunaticReducerState['pager']['iteration'];
+	};
+	Summary: LunaticBaseProps<string | null> & {
+		componentType?: 'Summary';
+		executeExpression: LunaticReducerState['executeExpression'];
+		sections: Array<{
+			id: string;
+			responses?: Array<{
 				id: string;
-				responses?: Array<{
-					id: string;
-					label: VtlExpression;
-					value: VtlExpression;
-				}>;
-				title?: VtlExpression;
-				iterations?: VtlExpression;
+				label: VtlExpression;
+				value: VtlExpression;
 			}>;
-		};
+			title?: VtlExpression;
+			iterations?: VtlExpression;
+		}>;
+	};
 };
 
 export type LunaticComponentType = keyof ComponentPropsByType;

package/src/index.ts

@@ -29,10 +29,7 @@ export type {
 	LunaticChangesHandler,
 } from './use-lunatic/type';
 
-export type {
-	LunaticComponentProps,
-	LunaticExtraProps,
-} from './components/type';
+export type { LunaticComponentProps } from './components/type';
 export type { LunaticSlotComponents } from './components/shared/HOC/slottableComponent';
 export type { LunaticSource } from './use-lunatic/type';
 

package/src/stories/checkbox/checkbox.stories.tsx

@@ -1,3 +1,4 @@
+import { dataFromObject } from '../../utils/object';
 import {
 	type Orchestrator,
 	OrchestratorMeta,
@@ -10,6 +11,7 @@ import sourceGroupDetail from './sourceGroupDetail.json';
 import sourceGroupLoop from './sourceGroupLoop.json';
 import sourceOne from './sourceOne.json';
 import sourceOneDetail from './sourceOneDetail.json';
+import sourceOneDynamicOptions from './sourceOneDynamicOptions.json';
 
 import { Meta } from '@storybook/react';
 
@@ -73,3 +75,14 @@ export const CheckboxOneWithDetail: OrchestratorStory = {
 		source: sourceOneDetail,
 	},
 };
+
+export const CheckboxOneDynamicOptions: OrchestratorStory = {
+	args: {
+		source: sourceOneDynamicOptions,
+		data: dataFromObject({
+			NBHAB: 3,
+			PRENOM: ['Verso', 'Maëlle', 'Aline'],
+			AGE: [30, 16, 50],
+		}),
+	},
+};