@inseefr/lunatic 3.4.4 → 3.4.5-rc.0

package/src/stories/dropdown/source.json

@@ -0,0 +1,141 @@
+{
+	"maxPage": "1",
+	"components": [
+		{
+			"id": "j4nw5cqz",
+			"componentType": "Dropdown",
+			"mandatory": false,
+			"page": "1",
+			"label": {
+				"value": "\"In which state do The Simpsons reside?\"",
+				"type": "VTL|MD"
+			},
+			"response": {
+				"name": "STATE"
+			},
+			"options": [
+				{
+					"value": "1",
+					"label": { "value": "\"Washington\"", "type": "VTL|MD" }
+				},
+				{
+					"value": "2",
+					"label": { "value": "\"Kentucky\"", "type": "VTL|MD" }
+				},
+				{ "value": "3", "label": { "value": "\"Ohio\"", "type": "VTL|MD" } },
+				{ "value": "4", "label": { "value": "\"Maine\"", "type": "VTL|MD" } },
+				{
+					"value": "5",
+					"label": { "value": "\"North Dakota\"", "type": "VTL|MD" }
+				},
+				{ "value": "6", "label": { "value": "\"Florida\"", "type": "VTL|MD" } },
+				{
+					"value": "7",
+					"label": { "value": "\"North Takoma\"", "type": "VTL|MD" }
+				},
+				{
+					"value": "8",
+					"label": { "value": "\"California\"", "type": "VTL|MD" }
+				},
+				{ "value": "9", "label": { "value": "\"Texas\"", "type": "VTL|MD" } },
+				{
+					"value": "10",
+					"label": { "value": "\"Massachusetts\"", "type": "VTL|MD" }
+				},
+				{ "value": "11", "label": { "value": "\"Nevada\"", "type": "VTL|MD" } },
+				{
+					"value": "12",
+					"label": { "value": "\"Illinois\"", "type": "VTL|MD" }
+				},
+				{
+					"value": "13",
+					"label": {
+						"value": "\"Not in any state, you fool!\"",
+						"type": "VTL|MD"
+					}
+				}
+			]
+		},
+		{
+			"id": "j4nw5cqz-bis",
+			"componentType": "Dropdown",
+			"mandatory": false,
+			"page": "1",
+			"label": {
+				"value": "\"In which state do The Simpsons reside?\"",
+				"type": "VTL|MD"
+			},
+			"response": {
+				"name": "STATE2"
+			},
+			"options": [
+				{
+					"value": "1",
+					"label": { "value": "\"Washington\"", "type": "VTL|MD" }
+				},
+				{
+					"value": "2",
+					"label": { "value": "\"Kentucky\"", "type": "VTL|MD" }
+				},
+				{ "value": "3", "label": { "value": "\"Ohio\"", "type": "VTL|MD" } },
+				{ "value": "4", "label": { "value": "\"Maine\"", "type": "VTL|MD" } },
+				{
+					"value": "5",
+					"label": { "value": "\"North Dakota\"", "type": "VTL|MD" }
+				},
+				{ "value": "6", "label": { "value": "\"Florida\"", "type": "VTL|MD" } },
+				{
+					"value": "7",
+					"label": { "value": "\"North Takoma\"", "type": "VTL|MD" }
+				},
+				{
+					"value": "8",
+					"label": { "value": "\"California\"", "type": "VTL|MD" }
+				},
+				{ "value": "9", "label": { "value": "\"Texas\"", "type": "VTL|MD" } },
+				{
+					"value": "10",
+					"label": { "value": "\"Massachusetts\"", "type": "VTL|MD" }
+				},
+				{ "value": "11", "label": { "value": "\"Nevada\"", "type": "VTL|MD" } },
+				{
+					"value": "12",
+					"label": { "value": "\"Illinois\"", "type": "VTL|MD" }
+				},
+				{
+					"value": "13",
+					"label": {
+						"value": "\"Not in any state, you fool!\"",
+						"type": "VTL|MD"
+					}
+				}
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE",
+			"componentRef": "j4nw5cqz",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "2",
+				"FORCED": "3",
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE2",
+			"componentRef": "j4nw5cqz-bis",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "3",
+				"FORCED": "2",
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		}
+	]
+}

package/src/stories/duration/duration.stories.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import defaultArgTypes from '../utils/default-arg-types';
+import Orchestrator from '../utils/orchestrator';
+import moisSource from './mois';
+import timeSource from './time';
+
+const stories = {
+	title: 'Components/Duration',
+	component: Orchestrator,
+	argTypes: defaultArgTypes,
+};
+
+export default stories;
+
+const Template = (args) => <Orchestrator {...args} />;
+export const DateDuration = Template.bind({});
+
+DateDuration.args = { id: 'durationAnnéesMois', source: moisSource };
+
+export const TimeDuration = Template.bind({});
+
+TimeDuration.args = {
+	id: 'durationHeureMinute',
+	source: timeSource,
+};

package/src/stories/duration/mois.json

@@ -0,0 +1,32 @@
+{
+	"components": [
+		{
+			"id": "kxi788",
+			"componentType": "Duration",
+			"mandatory": false,
+			"format": "PnYnM",
+			"page": "1",
+			"maxPage": "1",
+			"label": {
+				"value": "\"➡ 1. \" || \"Duration (format: PnYnM) \"",
+				"type": "VTL|MD"
+			},
+			"description": { "value": "\"Description\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"response": { "name": "DUREE" }
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "DUREE",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "P4Y0M",
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		}
+	]
+}

package/src/stories/duration/time.json

@@ -0,0 +1,32 @@
+{
+	"components": [
+		{
+			"id": "kxi788",
+			"componentType": "Duration",
+			"mandatory": false,
+			"format": "PTnHnM",
+			"page": "1",
+			"maxPage": "1",
+			"label": {
+				"value": "\"➡ 1. \" || \"Duration (format: PTnHnM) \"",
+				"type": "VTL|MD"
+			},
+			"description": { "value": "\"Description\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"response": { "name": "DUREE" }
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "DUREE",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "PT12H50M",
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		}
+	]
+}

package/src/stories/filter-description/filter-description.stories.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Orchestrator from '../utils/orchestrator';
+import source from './source';
+import sourceOptions from './source-options';
+import defaultArgTypes from '../utils/default-arg-types';
+
+const stories = {
+	title: 'Components/FilterDescription',
+	component: Orchestrator,
+	argTypes: {
+		...defaultArgTypes,
+		filterDescription: {
+			table: { disable: false },
+			control: 'boolean',
+			defaultValue: true,
+		},
+	},
+};
+
+export default stories;
+
+const Template = (args) => <Orchestrator {...args} />;
+export const Default = Template.bind({});
+
+Default.args = { id: 'filter-description', source };
+
+export const Options = Template.bind({});
+
+Options.args = {
+	id: 'filter-description-options',
+	source: sourceOptions,
+	filterDescription: true,
+};

package/src/stories/filter-description/source-options.json

@@ -0,0 +1,81 @@
+{
+	"maxPage": "3",
+	"components": [
+		{
+			"componentType": "InputNumber",
+			"label": { "value": "\"How old are you?\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"max": "120",
+			"id": "q1",
+			"response": {
+				"name": "Q1"
+			},
+			"page": "1"
+		},
+		{
+			"componentType": "FilterDescription",
+			"label": {
+				"value": "\"If you are minor, you'll be redirected to page 3\"",
+				"type": "VTL|MD"
+			},
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"id": "desc",
+			"page": "1"
+		},
+		{
+			"componentType": "Input",
+			"label": { "value": "\"Fake Q2\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "cast(Q1, number) < 18", "type": "VTL" },
+			"id": "q2",
+			"response": {
+				"name": "Q2"
+			},
+			"page": "2"
+		},
+		{
+			"componentType": "Input",
+			"label": { "value": "\"Fake Q3\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"id": "q3",
+			"response": {
+				"name": "Q3"
+			},
+			"page": "3"
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "Q1",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "Q2",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "Q3",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		}
+	]
+}

package/src/stories/filter-description/source.json

@@ -0,0 +1,12 @@
+{
+	"maxPage": "1",
+	"components": [
+		{
+			"componentType": "FilterDescription",
+			"label": { "value": "I'm a filter description", "type": "VTL|MD" },
+			"id": "desc",
+			"page": "1"
+		}
+	],
+	"variables": []
+}

package/src/stories/input/data.json

@@ -0,0 +1 @@
+{}

package/src/stories/input/input.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Orchestrator from '../utils/orchestrator';
+import source from './source';
+import data from './data';
+import defaultArgTypes from '../utils/default-arg-types';
+
+const stories = {
+	title: 'Components/Input',
+	component: Orchestrator,
+	argTypes: defaultArgTypes,
+};
+
+export default stories;
+
+const Template = (args) => <Orchestrator {...args} />;
+export const Default = Template.bind({});
+
+Default.args = { id: 'input', source, data };

package/src/stories/input/source.json

@@ -0,0 +1,35 @@
+{
+	"components": [
+		{
+			"componentType": "Input",
+			"label": {
+				"value": "\"Nom de l'occupant principal.\"",
+				"type": "VTL|MD"
+			},
+			"maxLength": 30,
+			"id": "surname",
+			"description": {
+				"value": "\"For example, Bob.\"",
+				"type": "VTL|MD"
+			},
+			"response": {
+				"name": "NOM"
+			},
+			"page": "1"
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NOM",
+			"componentRef": "name",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		}
+	]
+}

package/src/stories/input-number/input-number.stories.jsx

@@ -0,0 +1,18 @@
+import defaultArgTypes from '../utils/default-arg-types';
+import Orchestrator from '../utils/orchestrator';
+import source from './source';
+import sourceEuro from './source-euro.json';
+
+export default {
+	title: 'Components/InputNumber',
+	component: Orchestrator,
+	argTypes: defaultArgTypes,
+};
+
+export const Default = {
+	args: { source },
+};
+
+export const DynamicUnit = {
+	args: { source: sourceEuro },
+};

package/src/stories/input-number/source-euro.json

@@ -0,0 +1,46 @@
+{
+	"$schema": "../../../lunatic-schema.json",
+	"components": [
+		{
+			"id": "kze792d8",
+			"componentType": "InputNumber",
+			"mandatory": false,
+			"page": "1",
+			"min": 0,
+			"max": 10,
+			"decimals": 0,
+			"unit": { "value": "\"€\"", "type": "VTL|MD" },
+			"label": { "value": "\"➡ 1. \" || \"NB \"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"bindingDependencies": ["NB"],
+			"response": { "name": "NB" }
+		},
+		{
+			"id": "kze792d8",
+			"componentType": "InputNumber",
+			"mandatory": false,
+			"page": "1",
+			"min": 0,
+			"max": 10,
+			"decimals": 0,
+			"unit": "$",
+			"label": { "value": "\"➡ 1. \" || \"NB \"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"bindingDependencies": ["NB"],
+			"response": { "name": "NB" }
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NB",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		}
+	]
+}

package/src/stories/input-number/source.json

@@ -0,0 +1,32 @@
+{
+	"$schema": "../../../lunatic-schema.json",
+	"components": [
+		{
+			"id": "kze792d8",
+			"componentType": "InputNumber",
+			"page": "1",
+			"min": 0,
+			"max": 100000,
+			"decimals": 2,
+			"label": {
+				"value": "\"➡ 1. \" || \"Input number (between 0 and 100 000)\"",
+				"type": "VTL|MD"
+			},
+			"description": { "value": "\"Description\"", "type": "VTL|MD" },
+			"response": { "name": "NB" }
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NB",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTTED": null
+			}
+		}
+	]
+}

package/src/stories/loop/loop.stories.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Orchestrator from '../utils/orchestrator';
+import sourceBloc from './source-bloc.json';
+import sourcePaginated from './source-paginated.json';
+import defaultArgTypes from '../utils/default-arg-types';
+
+const stories = {
+	title: 'Components/Loop',
+	component: Orchestrator,
+	argTypes: defaultArgTypes,
+};
+
+export default stories;
+
+const Template = (args) => <Orchestrator {...args} />;
+
+export const Default = Template.bind({});
+Default.args = { id: 'loop', source: sourceBloc };
+
+export const Paginated = Template.bind({});
+Paginated.args = {
+	id: 'loop-paginated',
+	source: sourcePaginated,
+	initialPage: '1',
+	data: {},
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = { id: 'bloc-for-loop', source: sourceBloc, readOnly: true };

package/src/stories/loop/roster-for-loop.stories.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Orchestrator from '../utils/orchestrator';
+import sourceRoster from './source-roster';
+import defaultArgTypes from '../utils/default-arg-types';
+import { playwrightToUserEvent } from '../../tests/utils/e2e';
+import { sleep } from '../../tests/utils/timer';
+import sourceWithHeader from './source-with-header.json';
+
+const stories = {
+	title: 'Components/RosterForLoop',
+	component: Orchestrator,
+	argTypes: defaultArgTypes,
+};
+
+export default stories;
+
+const Template = (args) => <Orchestrator {...args} />;
+export const Default = Template.bind({});
+export const ReadOnly = Template.bind({});
+export const WithHeader = Template.bind({});
+
+Default.args = { id: 'roster-for-loop', source: sourceRoster };
+ReadOnly.args = {
+	id: 'roster-for-loop-readonly',
+	source: sourceRoster,
+	readOnly: true,
+};
+
+WithHeader.args = { id: 'roster-for-loop-headers', source: sourceWithHeader };
+
+export const Filled = Template.bind({});
+Filled.args = { id: 'roster-for-loop', source: sourceRoster };
+
+Filled.play = async ({ args, canvasElement }) => {
+	const page = playwrightToUserEvent(canvasElement);
+	await sleep(100);
+	await page.getByRole('button', { name: 'Ajouter un individu' }).click();
+	await page.getByLabel('Prénom', { index: 0 }).fill('John');
+	await page.getByLabel('Prénom', { index: 1 }).fill('Jane');
+	await page.getByRole('button', { name: 'Next' }).click();
+	await page.getByLabel('John, quel est vôtre âge ?').fill('18');
+	await page.getByRole('button', { name: 'Next' }).click();
+	await page.getByLabel('Jane, quel est vôtre âge ?').fill('21');
+	await page.getByLabel(/Page/).fill('2.1#1');
+	await page.getByRole('button', { name: /Go to page/ }).click();
+	await page.getByRole('button', { name: 'Next' }).click();
+	await page.getByRole('button', { name: 'Next' }).click();
+	await page.getByText('End').shouldBeVisible();
+};

package/src/stories/loop/source-bloc.json

@@ -0,0 +1,87 @@
+{
+	"$schema": "../../../lunatic-schema.json",
+	"maxPage": "3",
+	"components": [
+		{
+			"id": "seq",
+			"componentType": "Sequence",
+			"label": {
+				"value": "\"Description des individus de votre logement\"",
+				"type": "VTL|MD"
+			},
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"page": "1"
+		},
+		{
+			"id": "loop-prenom",
+			"componentType": "Loop",
+			"label": { "value": "\"Ajouter un individu\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"bindingDependencies": ["PRENOM"],
+			"lines": {
+				"min": { "value": "1", "type": "VTL" },
+				"max": { "value": "10", "type": "VTL" }
+			},
+			"page": "1",
+			"paginatedLoop": false,
+			"components": [
+				{
+					"componentType": "Input",
+					"label": { "value": "\"Prénom\"", "type": "VTL|MD" },
+					"conditionFilter": { "value": "true", "type": "VTL" },
+					"maxLength": 30,
+					"bindingDependencies": ["PRENOM"],
+					"id": "prenom",
+					"response": {
+						"name": "PRENOM"
+					}
+				},
+				{
+					"componentType": "InputNumber",
+					"label": { "value": "\"Age\"", "type": "VTL|MD" },
+					"conditionFilter": { "value": "true", "type": "VTL" },
+					"maxLength": 30,
+					"bindingDependencies": ["AGE"],
+					"id": "Age",
+					"response": {
+						"name": "AGE"
+					}
+				}
+			]
+		},
+		{
+			"id": "seq-end",
+			"componentType": "Sequence",
+			"label": {
+				"value": "\"End\"",
+				"type": "VTL|MD"
+			},
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"page": "2"
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "PRENOM",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTTED": [null]
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "AGE",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTTED": [null]
+			}
+		}
+	]
+}