POC : Articulation de questionnaire

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "3.4.10",
+	"version": "3.5.0-rc.3",
 	"description": "Library of questionnaire components",
 	"repository": {
 		"type": "git",

src/index.ts

@@ -8,6 +8,7 @@ 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,

src/stories/behaviour/articulation/articulation.stories.tsx

@@ -0,0 +1,108 @@
+import Orchestrator from '../../utils/orchestrator';
+import source from './roundabout.json';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useMemo, useState } from 'react';
+import { getArticulation } from '../../../utils/getArticulation';
+
+type Source = Parameters<typeof getArticulation>[0];
+type Data = Parameters<typeof getArticulation>[1];
+
+type Props = {
+	source: Source;
+	data: Data;
+};
+
+function StoryComponent({ source, data }: Props) {
+	const [page, setPage] = useState(null as null | string);
+	const gotoNav = () => setPage(null);
+	const { items } = useMemo(
+		() => getArticulation(source, data),
+		[source, data]
+	);
+
+	if (page) {
+		return (
+			<div>
+				{page}
+				<button onClick={gotoNav}>&lt; Revenir à l'articulation</button>
+				{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+				{/*/ @ts-ignore */}
+				<Orchestrator source={source} data={data} initialPage={page} />
+			</div>
+		);
+	}
+
+	const progressLabel = (n: number) => {
+		if (n === -1) {
+			return 'Commencer';
+		}
+		if (n === 0) {
+			return 'Continuer';
+		}
+		return 'Complété';
+	};
+
+	return (
+		<div>
+			<h2>Articulation</h2>
+			<table style={{ borderCollapse: 'collapse' }}>
+				<thead>
+					<tr>
+						{items[0].cells.map((cell, k) => (
+							<th
+								style={{ border: 'solid 1px #00000024', padding: '.5rem 1rem' }}
+								key={k}
+							>
+								{cell.label}
+							</th>
+						))}
+						<th>Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{items.map((item, k) => (
+						<tr key={k}>
+							{item.cells.map((cell, kk) => (
+								<td
+									key={kk}
+									style={{
+										border: 'solid 1px #00000024',
+										padding: '.5rem 1rem',
+									}}
+								>
+									{cell.value}
+								</td>
+							))}
+							<td
+								style={{
+									border: 'solid 1px #00000024',
+									padding: '.5rem 1rem',
+								}}
+							>
+								<button onClick={() => console.log('ToDo')}>
+									{progressLabel(item.progress)}
+								</button>
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+
+const meta: Meta<typeof StoryComponent> = {
+	title: 'Behaviour/Articulation',
+	component: StoryComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StoryComponent>;
+
+export const Basic: Story = {
+	args: {
+		source: source as Source,
+		data: {},
+	},
+};