@inseefr/lunatic 3.5.0-rc.3 → 3.5.1-rc.1743691949561

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

@@ -5,12 +5,17 @@ exports[`Textarea > renders without crashing 1`] = `
   <div
     class="lunatic-textarea"
   >
-    <textarea
-      aria-invalid="false"
-      id="input"
+    <div
+      class="field-with-count"
     >
-      input
-    </textarea>
+      <textarea
+        aria-invalid="false"
+        aria-labelledby="label-input"
+        id="input"
+      >
+        input
+      </textarea>
+    </div>
   </div>
 </div>
 `;
@@ -20,13 +25,18 @@ exports[`Textarea > should handle readOnly 1`] = `
   <div
     class="lunatic-textarea"
   >
-    <textarea
-      aria-invalid="false"
-      id="textarea"
-      readonly=""
+    <div
+      class="field-with-count"
     >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </textarea>
+      <textarea
+        aria-invalid="false"
+        aria-labelledby="label-textarea"
+        id="textarea"
+        readonly=""
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </textarea>
+    </div>
   </div>
 </div>
 `;

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

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { CharactersCount } from './CharactersCount';
+import { render } from '@testing-library/react';
+
+describe('CharactersCount', () => {
+	const defaultProps = {
+		id: 'test-id',
+		maxLength: 20,
+		value: 'Hello',
+	};
+
+	it('renders correctly characters count if there is a maximum length', () => {
+		const { getByText } = render(<CharactersCount {...defaultProps} />);
+
+		expect(getByText('5/20')).toBeInTheDocument();
+	});
+
+	it('should apply the max-length-reached class when limit is reached', () => {
+		const props = { ...defaultProps, maxLength: 5 };
+		const { getByText } = render(<CharactersCount {...props} />);
+
+		expect(getByText('5/5')).toHaveClass('max-length-reached');
+	});
+
+	it('should not render anything when maxLength is not provided', () => {
+		const props = { ...defaultProps, maxLength: undefined };
+		const { container } = render(<CharactersCount {...props} />);
+
+		expect(container.firstChild).toBeNull();
+	});
+});

package/src/components/shared/CharactersCount/CharactersCount.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { getCharactersCountId } from '../utils/getCharactersCountId';
+
+type Props = {
+	id: string;
+	maxLength?: number;
+	value?: string | null;
+};
+
+export function CharactersCount({ id, maxLength, value }: Readonly<Props>) {
+	if (!maxLength) return null;
+
+	const currentLength = value?.length ?? 0;
+	const charactersCountId = getCharactersCountId(id, maxLength);
+	const hasReachedMaxLength = currentLength === maxLength;
+
+	return (
+		<span
+			id={charactersCountId}
+			className={classNames('characters-count', {
+				'max-length-reached': hasReachedMaxLength,
+			})}
+		>
+			{`${currentLength}/${maxLength}`}
+		</span>
+	);
+}

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

@@ -3,9 +3,9 @@ import { Label } from './Label';
 import { describe, it, expect } from 'vitest';
 
 describe('Label', () => {
-	it('renders null when children is falsy', () => {
+	it('renders null when children and description are falsy', () => {
 		const { container } = render(
-			<Label htmlFor="input" id="label" description="This is a label">
+			<Label htmlFor="input" id="label">
 				{null}
 			</Label>
 		);
@@ -34,8 +34,20 @@ describe('Label', () => {
 
 		const label = getByText('Name');
 		expect(label).toBeInTheDocument();
-		expect(label.parentNode).toHaveAttribute('for', 'kze792d8');
+		expect(label.closest('label')).toHaveAttribute('for', 'kze792d8');
 		const description = queryByText('This is a label');
 		expect(description).not.toBeInTheDocument();
 	});
+
+	it('renders a label with description and no label', () => {
+		const { container, queryByText } = render(
+			<Label htmlFor="kze792d8" id="label" description="This is a label" />
+		);
+
+		const label = container.querySelector('label');
+		expect(label).toBeInTheDocument();
+		expect(label).toHaveAttribute('for', 'kze792d8');
+		const description = queryByText('This is a label');
+		expect(description).toBeInTheDocument();
+	});
 });

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

@@ -27,7 +27,7 @@ function LunaticLabel({
 	style,
 	description,
 }: Props) {
-	if (!children) {
+	if (!children && !description) {
 		return null;
 	}
 	return (

package/src/components/shared/utils/getCharactersCountId.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest';
+import { getCharactersCountId } from './getCharactersCountId';
+
+describe('getCharacterCountId', () => {
+	it('should return the correct ID when maxLength is provided', () => {
+		expect(getCharactersCountId('test-id', 100)).toBe(
+			'characters-count-test-id'
+		);
+	});
+
+	it('should return undefined when maxLength is not provided', () => {
+		expect(getCharactersCountId('test-id')).toBeUndefined();
+	});
+});

package/src/components/shared/utils/getCharactersCountId.ts

@@ -0,0 +1,6 @@
+/**
+ * Get the correct id for characters count div, used for both input and textarea.
+ */
+export function getCharactersCountId(id: string, maxLength?: number) {
+	return maxLength ? `characters-count-${id}` : undefined;
+}

package/src/components/type.ts

@@ -9,7 +9,7 @@ import type {
 } from '../use-lunatic/type';
 import type { InterpretedOption } from '../use-lunatic/props/propOptions';
 
-type Formats = 'PTnHnM' | 'PnYnM';
+export type DurationFormat = 'PTnHnM' | 'PnYnM';
 export type VtlExpression = {
 	value: string;
 	type: 'VTL' | 'VTL|MD' | 'TXT';
@@ -78,7 +78,7 @@ export type ComponentPropsByType = {
 		};
 	Duration: LunaticBaseProps<string | null> &
 		LunaticExtraProps & {
-			format: Formats;
+			format: DurationFormat;
 			response: { name: string };
 			componentType?: 'Duration';
 		};
@@ -126,6 +126,7 @@ export type ComponentPropsByType = {
 			components: LunaticComponentProps[];
 			componentType?: 'Question';
 			iteration?: number;
+			value: Record<string, unknown>;
 		};
 	RosterForLoop: LunaticBaseProps<unknown> &
 		LunaticExtraProps & {

package/src/css/components/Input.scss

@@ -43,3 +43,13 @@
 		}
 	}
 }
+
+.characters-count {
+	display: block;
+	font-size: 12px;
+	padding-top: 0.3rem;
+}
+
+.max-length-reached {
+	color: red;
+}

package/src/css/components/Roundabout.scss

@@ -1,3 +1,13 @@
+.lunatic-roundabout__label {
+	color: var(--color-primary-dark);
+	background-color: var(--color-primary-contrast-text);
+	border: 0;
+	padding: 0;
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+	font-weight: bold;
+	margin-bottom: 0.375rem;
+}
+
 .lunatic-roundabout__items {
 	margin-top: 1rem;
 	display: flex;

package/src/index.ts

@@ -8,7 +8,6 @@ export { Button } from './components/shared/Button/Button';
 
 export { LunaticComponents } from './components/LunaticComponents';
 export { useLunatic } from './use-lunatic/use-lunatic';
-export { getArticulation } from './utils/getArticulation';
 
 export type {
 	LunaticComponentDefinition,

package/src/stories/accordion/source.json

@@ -37,11 +37,7 @@
 			"name": "NOM",
 			"componentRef": "name",
 			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTTED": null
+				"COLLECTED": null
 			}
 		}
 	]

package/src/stories/behaviour/cleaning/cleaning.stories.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Orchestrator from '../../utils/orchestrator';
 import source from './source.json';
 import sourceLoop from './source-loop.json';
+import sourceLoop2 from './loop.json';
 import defaultArgTypes from '../../utils/default-arg-types';
 
 const stories = {
@@ -56,3 +57,13 @@ Loop.args = {
 	pagination: true,
 	source: sourceLoop,
 };
+
+export const Loop2 = Template.bind({});
+Loop2.args = {
+	id: 'cleaning-loop-2',
+	pagination: true,
+	source: sourceLoop2,
+	data: {
+		COLLECTED: { PRENOM: { COLLECTED: ['Laurent', 'Alain', 'toto'] } },
+	},
+};

package/src/stories/behaviour/cleaning/loop.json

@@ -0,0 +1,246 @@
+{
+	"id": "m8ilargw",
+	"componentType": "Questionnaire",
+	"modele": "LCCLEANING",
+	"generatingDate": "21-03-2025 13:49:55",
+	"pagination": "question",
+	"maxPage": "4",
+	"label": { "value": "[LC]: cleaning mixe de scope", "type": "VTL|MD" },
+	"components": [
+		{
+			"id": "m8illrg8",
+			"componentType": "Sequence",
+			"page": "1",
+			"label": { "value": "\"I - \" || \"S1\"", "type": "VTL" },
+			"conditionFilter": { "value": "true", "type": "VTL" }
+		},
+		{
+			"id": "question-m8ilsr46",
+			"componentType": "Question",
+			"page": "2",
+			"label": { "value": "\"1\\. \" || \"Prénoms ?\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"components": [
+				{
+					"id": "m8ilsr46",
+					"componentType": "RosterForLoop",
+					"mandatory": false,
+					"page": "2",
+					"lines": {
+						"min": { "value": "1", "type": "VTL" },
+						"max": { "value": "10", "type": "VTL" }
+					},
+					"header": [
+						{ "label": { "value": "\"Prenoms ?\"", "type": "VTL|MD" } }
+					],
+					"components": [
+						{
+							"componentType": "Input",
+							"maxLength": 249,
+							"id": "m8ilsr46-RDOP-m8im0j91",
+							"response": { "name": "PRENOM" }
+						}
+					],
+					"positioning": "HORIZONTAL"
+				}
+			]
+		},
+		{
+			"id": "m8iltdbt",
+			"componentType": "Loop",
+			"page": "3",
+			"maxPage": "4",
+			"depth": 1,
+			"paginatedLoop": true,
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"loopDependencies": ["PRENOM"],
+			"components": [
+				{
+					"id": "m8ilmimd",
+					"componentType": "Sequence",
+					"page": "3.1",
+					"label": {
+						"value": "\"II - \" || \"Sequence de \" || PRENOM ",
+						"type": "VTL"
+					},
+					"conditionFilter": { "value": "true", "type": "VTL" }
+				},
+				{
+					"id": "question-m8ilvkbt",
+					"componentType": "Question",
+					"page": "3.2",
+					"label": {
+						"value": "\"2\\. \" || \"Cette question est pour tout le monde\"",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": { "value": "true", "type": "VTL" },
+					"components": [
+						{
+							"id": "m8ilvkbt",
+							"componentType": "Input",
+							"mandatory": false,
+							"page": "3.2",
+							"maxLength": 249,
+							"response": { "name": "CETTEQUEST" }
+						}
+					]
+				},
+				{
+					"id": "question-m8iljjiu",
+					"componentType": "Question",
+					"page": "3.3",
+					"label": {
+						"value": "\"3\\. \" || \"Cette question est pour Laurent uniquement\"",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": {
+						"value": "(nvl(PRENOM,\"\") = \"Laurent\")",
+						"type": "VTL"
+					},
+					"components": [
+						{
+							"id": "m8iljjiu",
+							"componentType": "Input",
+							"mandatory": false,
+							"page": "3.3",
+							"maxLength": 249,
+							"response": { "name": "ONLY_LAURENT" }
+						}
+					]
+				},
+				{
+					"id": "question-m8ili0k6",
+					"componentType": "Question",
+					"page": "3.4",
+					"label": {
+						"value": "\"4\\. \" || \"Cette question est pour Laurent uniquement et s'il y a au moins 3 personnes dans le tableau\"",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": {
+						"value": "(NB_PERS >= 3 and PRENOM = \"Laurent\")",
+						"type": "VTL"
+					},
+					"components": [
+						{
+							"id": "m8ili0k6",
+							"componentType": "Input",
+							"mandatory": false,
+							"page": "3.4",
+							"maxLength": 249,
+							"response": { "name": "ONLY_TROIS_LAURENT" }
+						}
+					]
+				}
+			],
+			"iterations": { "value": "count(PRENOM)", "type": "VTL" }
+		},
+		{
+			"id": "m8iluttj",
+			"componentType": "Sequence",
+			"page": "4",
+			"label": { "value": "\"III - \" || \"Fin\"", "type": "VTL" },
+			"conditionFilter": { "value": "true", "type": "VTL" }
+		}
+	],
+	"variables": [
+		{
+			"name": "NB_PERS",
+			"variableType": "CALCULATED",
+			"expression": { "value": "count(PRENOM)", "type": "VTL" },
+			"bindingDependencies": ["PRENOM"],
+			"dimension": 0
+		},
+		{
+			"name": "PRENOM",
+			"variableType": "COLLECTED",
+			"values": { "COLLECTED": [] },
+			"iterationReference": "m8ilsr46",
+			"dimension": 1
+		},
+		{
+			"name": "CETTEQUEST",
+			"variableType": "COLLECTED",
+			"values": { "COLLECTED": [] },
+			"iterationReference": "m8ilsr46",
+			"dimension": 1
+		},
+		{
+			"name": "ONLY_LAURENT",
+			"variableType": "COLLECTED",
+			"values": { "COLLECTED": [] },
+			"iterationReference": "m8ilsr46",
+			"dimension": 1
+		},
+		{
+			"name": "ONLY_TROIS_LAURENT",
+			"variableType": "COLLECTED",
+			"values": { "COLLECTED": [] },
+			"iterationReference": "m8ilsr46",
+			"dimension": 1
+		},
+		{
+			"name": "FILTER_RESULT_PRENOM",
+			"variableType": "CALCULATED",
+			"expression": { "value": "true", "type": "VTL" },
+			"shapeFrom": ["PRENOM"],
+			"iterationReference": "m8ilsr46",
+			"dimension": 1
+		},
+		{
+			"name": "FILTER_RESULT_CETTEQUEST",
+			"variableType": "CALCULATED",
+			"expression": { "value": "true", "type": "VTL" },
+			"shapeFrom": ["PRENOM"],
+			"iterationReference": "m8ilsr46",
+			"dimension": 1
+		},
+		{
+			"name": "FILTER_RESULT_ONLY_LAURENT",
+			"variableType": "CALCULATED",
+			"expression": {
+				"value": "(nvl(PRENOM,\"\") = \"Laurent\")",
+				"type": "VTL"
+			},
+			"bindingDependencies": ["PRENOM"],
+			"shapeFrom": ["PRENOM"],
+			"iterationReference": "m8ilsr46",
+			"dimension": 1
+		},
+		{
+			"name": "FILTER_RESULT_ONLY_TROIS_LAURENT",
+			"variableType": "CALCULATED",
+			"expression": {
+				"value": "(NB_PERS >= 3 and PRENOM = \"Laurent\")",
+				"type": "VTL"
+			},
+			"bindingDependencies": ["NB_PERS", "PRENOM"],
+			"shapeFrom": ["PRENOM"],
+			"iterationReference": "m8ilsr46",
+			"dimension": 1
+		}
+	],
+	"cleaning": {
+		"PRENOM": {
+			"ONLY_LAURENT": [
+				{
+					"expression": "nvl(PRENOM,\"\") = \"Laurent\"",
+					"shapeFrom": "PRENOM",
+					"isAggregatorUsed": false
+				}
+			],
+			"ONLY_TROIS_LAURENT": [
+				{
+					"expression": "NB_PERS >= 3 and PRENOM = \"Laurent\"",
+					"shapeFrom": "PRENOM",
+					"isAggregatorUsed": true
+				}
+			]
+		}
+	},
+	"resizing": {
+		"PRENOM": {
+			"size": "count(PRENOM)",
+			"variables": ["CETTEQUEST", "ONLY_LAURENT", "ONLY_TROIS_LAURENT"]
+		}
+	}
+}

package/src/stories/behaviour/cleaning/source-loop.json

@@ -15,33 +15,21 @@
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": ["John", "Jane"],
-				"EDITED": null,
-				"INPUTTED": null,
-				"FORCED": null,
-				"PREVIOUS": null
+				"COLLECTED": ["John", "Jane"]
 			},
 			"name": "PRENOM"
 		},
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": [null],
-				"EDITED": null,
-				"INPUTTED": null,
-				"FORCED": null,
-				"PREVIOUS": null
+				"COLLECTED": [null]
 			},
 			"name": "AGE"
 		},
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": [null],
-				"EDITED": null,
-				"INPUTTED": null,
-				"FORCED": null,
-				"PREVIOUS": null
+				"COLLECTED": [null]
 			},
 			"name": "HIDE_AGE"
 		}

package/src/stories/behaviour/cleaning/source.json

@@ -9,22 +9,14 @@
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": null,
-				"EDITED": null,
-				"INPUTTED": null,
-				"FORCED": null,
-				"PREVIOUS": null
+				"COLLECTED": null
 			},
 			"name": "ORIGIN"
 		},
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": null,
-				"EDITED": null,
-				"INPUTTED": null,
-				"FORCED": null,
-				"PREVIOUS": null
+				"COLLECTED": null
 			},
 			"name": "CITY"
 		}

package/src/stories/behaviour/controls/boucles-n.json

@@ -4,22 +4,14 @@
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": null,
-				"EDITED": null,
-				"INPUTTED": null,
-				"FORCED": null,
-				"PREVIOUS": null
+				"COLLECTED": null
 			},
 			"name": "COMMENT_QE"
 		},
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": [null],
-				"EDITED": [null],
-				"INPUTTED": [null],
-				"FORCED": [null],
-				"PREVIOUS": [null]
+				"COLLECTED": [null]
 			},
 			"name": "Q1"
 		},

package/src/stories/behaviour/controls/loop.json

@@ -118,22 +118,14 @@
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": ["John", "Jane"],
-				"EDITED": null,
-				"INPUTTED": null,
-				"FORCED": null,
-				"PREVIOUS": null
+				"COLLECTED": ["John", "Jane"]
 			},
 			"name": "PRENOMS"
 		},
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": [10, 12],
-				"EDITED": null,
-				"INPUTTED": null,
-				"FORCED": null,
-				"PREVIOUS": null
+				"COLLECTED": [10, 12]
 			},
 			"name": "AGES"
 		}

package/src/stories/behaviour/controls/roundabout.json

@@ -80,33 +80,21 @@
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": ["John", "Jane"],
-				"EDITED": null,
-				"INPUTTED": null,
-				"FORCED": null,
-				"PREVIOUS": null
+				"COLLECTED": ["John", "Jane"]
 			},
 			"name": "PRENOMS"
 		},
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": [null],
-				"EDITED": [null],
-				"INPUTTED": [null],
-				"FORCED": [null],
-				"PREVIOUS": [null]
+				"COLLECTED": [null]
 			},
 			"name": "PROGRESS"
 		},
 		{
 			"variableType": "COLLECTED",
 			"values": {
-				"COLLECTED": [17, 22],
-				"EDITED": [null],
-				"INPUTTED": [null],
-				"FORCED": [null],
-				"PREVIOUS": [null]
+				"COLLECTED": [17, 22]
 			},
 			"name": "AGES"
 		}