POC : Recap component

lunatic-schema.json

@@ -39,7 +39,29 @@
 			"additionalProperties": {
 				"type": "object",
 				"additionalProperties": {
-					"type": "string"
+					"oneOf": [
+						{
+							"type": "string"
+						},
+						{
+							"type": "array",
+							"items": {
+								"type": "object",
+								"properties": {
+									"expression": {
+										"type": "string"
+									},
+									"shapeFrom": {
+										"type": "string"
+									},
+									"isAggregatorUsed": {
+										"type": "boolean"
+									}
+								},
+								"required": ["expression", "isAggregatorUsed"]
+							}
+						}
+					]
 				}
 			}
 		},
@@ -364,6 +386,9 @@
 				},
 				{
 					"$ref": "#/$defs/ComponentAccordion"
+				},
+				{
+					"$ref": "#/$defs/ComponentRecapDefinition"
 				}
 			]
 		},
@@ -1024,6 +1049,39 @@
 				}
 			]
 		},
+		"ComponentRecapDefinition": {
+			"type": "object",
+			"properties": {
+				"componentType": {
+					"type": "string",
+					"const": "Recap"
+				},
+				"fields": {
+					"type": "array",
+					"items": {
+						"type": "object",
+						"properties": {
+							"label": {
+								"type": "string"
+							},
+							"pairwise": {
+								"type": "string"
+							},
+							"value": {
+								"$ref": "#/$defs/VTLExpression"
+							}
+						},
+						"required": ["label", "value"]
+					}
+				}
+			},
+			"required": ["componentType", "fields"],
+			"allOf": [
+				{
+					"$ref": "#/$defs/ComponentDefinitionBase"
+				}
+			]
+		},
 		"ComponentText": {
 			"type": "object",
 			"properties": {

src/components/Recap/Recap.tsx

@@ -0,0 +1,37 @@
+import { slottableComponent } from '../shared/HOC/slottableComponent';
+import type { LunaticComponentProps } from '../type';
+
+/**
+ * Display a page that list collected data
+ */
+export const Recap = slottableComponent<LunaticComponentProps<'Recap'>>(
+	'Recap',
+	function Recap({ label, fields }) {
+		return (
+			<div>
+				<h2>{label}</h2>
+				<ul>
+					{fields.map((field) => (
+						<li>
+							<strong>{field.label}</strong>
+							<RecapList value={field.value} />
+						</li>
+					))}
+				</ul>
+			</div>
+		);
+	}
+);
+
+function RecapList({ value }: { value: string | string[] }) {
+	if (Array.isArray(value)) {
+		return (
+			<ul>
+				{value.map((v) => (
+					<li key={v}>{v}</li>
+				))}
+			</ul>
+		);
+	}
+	return value;
+}

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 { Recap } from './Recap/Recap';
 
 // List of all the "componentType"
 export const library = {
@@ -51,6 +52,7 @@ export const library = {
 	Suggester: Suggester,
 	Summary: Summary,
 	Accordion: Accordion,
+	Recap: Recap,
 } 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 { Recap } from '../../Recap/Recap';
 
 /**
  * Contain the type of every customizable components.
@@ -109,6 +110,7 @@ export type LunaticSlotComponents = {
 	>;
 	MarkdownLink: typeof MarkdownLink;
 	Accordion: typeof Accordion;
+	Recap: typeof Recap;
 };
 
 const empty = {} as Partial<LunaticSlotComponents> | undefined;

src/components/type.ts

@@ -312,6 +312,15 @@ export type ComponentPropsByType = {
 				iterations?: VtlExpression;
 			}>;
 		};
+	Recap: LunaticBaseProps<null> &
+		LunaticExtraProps & {
+			componentType?: 'Recap';
+			label: string;
+			fields: {
+				label: string;
+				value: string;
+			}[];
+		};
 };
 
 export type LunaticComponentType = keyof ComponentPropsByType;

src/stories/recap/recap.stories.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Orchestrator from '../utils/orchestrator';
+import source from './source.json';
+import defaultArgTypes from '../utils/default-arg-types';
+import { objectToData } from '../utils/data';
+
+const stories = {
+	title: 'Components/Recap',
+	component: Orchestrator,
+	argTypes: defaultArgTypes,
+};
+
+export default stories;
+
+const Template = (args) => <Orchestrator {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+	id: 'recap',
+	source: source,
+	data: objectToData({
+		PRENOM: ['Maman', 'Papa', 'Fils'],
+		AGE: [22, 25, 12],
+		LINKS: [
+			[null, '1', '3'],
+			['1', null, '3'],
+			['2', '2'],
+		],
+	}),
+	pagination: true,
+	initialPage: '4',
+};