DRAFT feat: add fillers behaviour

e2e/fillers.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+import {
+	expectPageToHaveText,
+	gotoNextPage,
+	gotoPreviousPage,
+	goToStory,
+} from './utils';
+
+test.describe('Fillers', () => {
+	test(`can fill data`, async ({ page }) => {
+		await goToStory(page, 'behaviour-fillers--default#t100');
+
+		// First filling
+		await page.getByLabel('Code postal').fill('34000');
+		await gotoNextPage(page);
+		await expectPageToHaveText(page, 'Chargement');
+		await expect(page.getByLabel('Ville')).toHaveValue('Montpellier');
+
+		// Second filling
+		await gotoPreviousPage(page);
+		await page.getByLabel('Code postal').fill('31000');
+		await gotoNextPage(page);
+		await expect(page.getByLabel('Ville')).toHaveValue('Toulouse');
+	});
+});

lunatic-schema.json

@@ -172,6 +172,12 @@
 		},
 		"maxPage": {
 			"type": "string"
+		},
+		"fillers": {
+			"type": "array",
+			"items": {
+				"$ref": "#/$defs/FillerDefinition"
+			}
 		}
 	},
 	"required": ["components", "variables"],
@@ -1461,6 +1467,36 @@
 				}
 			},
 			"required": ["name", "fields", "queryParser", "version"]
+		},
+		"FillerDefinition": {
+			"type": "object",
+			"properties": {
+				"endpoint": {
+					"type": "object",
+					"properties": {
+						"url": {
+							"type": "string"
+						},
+						"type": {
+							"enum": ["VTL", "TXT"]
+						}
+					},
+					"required": ["url"]
+				},
+				"responses": {
+					"type": "array",
+					"items": {
+						"type": "object",
+						"properties": {
+							"name": {
+								"type": "string"
+							}
+						},
+						"required": ["name"]
+					}
+				}
+			},
+			"required": ["responses", "endpoint"]
 		}
 	}
 }

src/components/FillerLoader/FillerLoader.tsx

@@ -0,0 +1,11 @@
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+
+/**
+ * Displays a loader while fetching data to fill the form
+ */
+export const FillerLoader = slottableComponent(
+	'FillerLoader',
+	function FillerLoader(props: { id: string }) {
+		return <p>Chargement des données...</p>;
+	}
+);

src/components/library.ts

@@ -24,6 +24,7 @@ import { PairwiseLinks } from './PairwiseLinks/PairwiseLinks';
 import { CheckboxOne } from './CheckboxOne/CheckboxOne';
 import { Suggester } from './Suggester/Suggester';
 import { Summary } from './Summary/Summary';
+import { FillerLoader } from './FillerLoader/FillerLoader';
 
 // List of all the "componentType"
 export const library = {
@@ -51,6 +52,7 @@ export const library = {
 	Suggester: Suggester,
 	Summary: Summary,
 	Accordion: Accordion,
+	FillerLoader: FillerLoader,
 } satisfies {
 	[Property in LunaticComponentType]: ComponentType<
 		LunaticComponentProps<Property>

src/components/shared/HOC/slottableComponent.tsx

@@ -43,6 +43,7 @@ import type { SummaryResponses, SummaryTitle } from '../../Summary/Summary';
 import type { LunaticComponentProps } from '../../type';
 import type { MarkdownLink } from '../MDLabel/MarkdownLink';
 import type { Accordion } from '../../Accordion/Accordion';
+import type { FillerLoader } from '../../FillerLoader/FillerLoader';
 
 /**
  * Contains the type of every customizable component
@@ -109,6 +110,7 @@ export type LunaticSlotComponents = {
 	>;
 	MarkdownLink: typeof MarkdownLink;
 	Accordion: typeof Accordion;
+	FillerLoader: typeof FillerLoader;
 };
 
 const empty = {} as Partial<LunaticSlotComponents> | undefined;

src/components/type.ts

@@ -304,6 +304,10 @@ export type ComponentPropsByType = {
 				iterations?: VtlExpression;
 			}>;
 		};
+	FillerLoader: {
+		componentType?: 'FillerLoader';
+		id: string;
+	};
 };
 
 export type LunaticComponentType = keyof ComponentPropsByType;

src/stories/behaviour/fillers/fillers.stories.js

@@ -0,0 +1,32 @@
+import source from './source.json';
+import Orchestrator from '../../utils/orchestrator.jsx';
+
+export default {
+	title: 'Behaviour/Fillers',
+	component: Orchestrator,
+};
+
+export const Default = {
+	args: {
+		source: source,
+		data: {},
+		mockFiller: (url) => {
+			return new Promise((resolve) => {
+				setTimeout(
+					() => {
+						const code = new URL(url).searchParams.get('code');
+						if (code === '34000') {
+							return resolve({ CITY: 'Montpellier' });
+						} else if (code === '31000') {
+							return resolve({ CITY: 'Toulouse' });
+						}
+						return resolve({});
+					},
+					window.location.hash.startsWith('#t')
+						? parseInt(window.location.hash.replace('#t', ''), 10)
+						: 1500
+				);
+			});
+		},
+	},
+};

src/stories/behaviour/fillers/source.json

@@ -0,0 +1,78 @@
+{
+	"$schema": "../../../../lunatic-schema.json",
+	"maxPage": "2",
+	"fillers": [
+		{
+			"endpoint": {
+				"url": "\"https://inseefr.github.io/Lunatic/?code=\" || CODE",
+				"type": "VTL"
+			},
+			"responses": [
+				{
+					"name": "CODE"
+				}
+			]
+		}
+	],
+	"components": [
+		{
+			"id": "a",
+			"page": "1",
+			"componentType": "Input",
+			"label": {
+				"type": "TXT",
+				"value": "Code postal"
+			},
+			"response": {
+				"name": "CODE"
+			},
+			"declarations": [
+				{
+					"declarationType": "COMMENT",
+					"position": "DETACHABLE",
+					"id": "d_a",
+					"label": {
+						"value": "Ce code permettra de remplir la ville (34000 ou 31000)",
+						"type": "TXT"
+					}
+				}
+			]
+		},
+		{
+			"id": "a",
+			"page": "2",
+			"componentType": "Input",
+			"label": {
+				"type": "TXT",
+				"value": "Ville"
+			},
+			"response": {
+				"name": "CITY"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"values": {
+				"COLLECTED": null,
+				"EDITED": null,
+				"INPUTTED": null,
+				"FORCED": null,
+				"PREVIOUS": null
+			},
+			"name": "CODE"
+		},
+		{
+			"variableType": "COLLECTED",
+			"values": {
+				"COLLECTED": null,
+				"EDITED": null,
+				"INPUTTED": null,
+				"FORCED": null,
+				"PREVIOUS": null
+			},
+			"name": "CITY"
+		}
+	]
+}

src/stories/utils/orchestrator.jsx

@@ -119,6 +119,7 @@ function OrchestratorForStories({
 	refusedButton,
 	readOnly = false,
 	disabled = false,
+	mockFiller = null,
 	...rest
 }) {
 	const { maxPage } = source;
@@ -154,6 +155,9 @@ function OrchestratorForStories({
 		withOverview: showOverview,
 		dontKnowButton,
 		refusedButton,
+		mocks: {
+			filler: mockFiller,
+		},
 	});
 
 	const components = getComponents();

src/type.source.ts

@@ -337,6 +337,7 @@ export type LunaticSource = {
 			  };
 	};
 	maxPage?: string;
+	fillers?: FillerDefinition[];
 };
 export type VTLExpression = {
 	/**
@@ -467,3 +468,12 @@ export type SuggesterDefinition = {
 				type: 'soft';
 		  };
 };
+export type FillerDefinition = {
+	endpoint: {
+		url: string;
+		type?: 'VTL' | 'TXT';
+	};
+	responses: {
+		name: string;
+	}[];
+};