@inseefr/lunatic 3.5.7 → 3.5.8

package/src/stories/utils/Orchestrator.tsx

@@ -0,0 +1,310 @@
+import {
+	LunaticComponents,
+	type LunaticData,
+	type LunaticError,
+	type LunaticSlotComponents,
+	type LunaticSource,
+	ModalControls,
+	useLunatic,
+} from '../..';
+import React, {
+	memo,
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import Ajv from 'ajv/dist/2020.js';
+import LunaticSchema from '../../../lunatic-schema.json';
+import { Logger } from '../../utils/logger';
+import { OrchestratorOverview } from './OrchestratorOverview';
+import { SchemaValidator } from './SchemaValidator';
+import { OrchestratorData } from './OrchestratorData';
+import type { PageTag } from '../../use-lunatic/type';
+import type { IndexEntry } from '../../utils/search/SearchInterface';
+import { OrchestratorSidebar } from './OrchestratorSidebar';
+import type { Meta, StoryObj } from '@storybook/react';
+
+type Props = {
+	source: LunaticSource;
+	data: LunaticData;
+	// Starting page
+	initialPage?: PageTag;
+	// Function used to load a list of option in a suggester
+	getReferentiel: (name: string) => Promise<IndexEntry[]>;
+	// Display detail input even if the corresponding checkbox is not checked
+	detailAlwaysDisplayed?: boolean;
+	// Enable missing buttons
+	missing?: boolean;
+	// Readonly mode
+	readOnly: boolean;
+	// List of custom components
+	slots: Partial<LunaticSlotComponents>;
+	// Last reached paged (used in the overview)
+	lastReachedPage: PageTag;
+	// Preload suggester data at the start of the form
+	autoSuggesterLoading: boolean;
+	disableFiltersDescription?: boolean;
+	disableFilters?: boolean;
+	management?: boolean;
+	shortcut?: boolean;
+	activeControls?: boolean;
+	missingStrategy?: () => void;
+	showOverview?: boolean;
+	disabled?: boolean;
+	extraTabs?: TabEntry[];
+};
+
+type TabEntry = { label: ReactNode; children: ReactNode };
+
+function OrchestratorForStories(props: Readonly<Props>) {
+	const {
+		source,
+		data,
+		disableFilters,
+		disableFiltersDescription,
+		management,
+		shortcut,
+		activeControls,
+		initialPage,
+		missing,
+		missingStrategy,
+		slots,
+		showOverview,
+		getReferentiel,
+		readOnly,
+		disabled,
+		detailAlwaysDisplayed,
+		autoSuggesterLoading,
+		extraTabs = [],
+	} = props;
+
+	const componentsOptions = { detailAlwaysDisplayed };
+
+	const {
+		getComponents,
+		goPreviousPage,
+		goNextPage,
+		goToPage,
+		pager,
+		pageTag,
+		isFirstPage,
+		isLastPage,
+		overview,
+		compileControls,
+		getData,
+		Provider,
+		hasPageResponse,
+	} = useLunatic(source, data, {
+		initialPage,
+		disableFilters,
+		disableFiltersDescription,
+		onChange: onLogChange,
+		getReferentiel,
+		management,
+		missing,
+		missingStrategy,
+		lastReachedPage: props.lastReachedPage,
+		missingShortcut: { dontKnow: 'f2', refused: 'f4' },
+		shortcut,
+		activeControls,
+		withOverview: showOverview,
+		autoSuggesterLoading,
+		componentsOptions,
+	});
+
+	const components = getComponents();
+
+	const [errorActive, setErrorActive] = useState<
+		Record<PageTag, LunaticError[]>
+	>({});
+	const [errorsForModal, setErrorsForModal] = useState<null | ReturnType<
+		typeof compileControls
+	>>(null);
+
+	const skip = useCallback(() => {
+		setErrorsForModal(null);
+		goNextPage();
+	}, [goNextPage]);
+
+	const closeModal = useCallback(() => setErrorsForModal(null), []);
+
+	const handleGoNext = useCallback(() => {
+		const { currentErrors, isCritical } = compileControls();
+		setErrorActive((v) => ({ ...v, [pageTag]: currentErrors || {} }));
+		if (currentErrors && Object.keys(currentErrors).length > 0) {
+			setErrorsForModal({ currentErrors, isCritical });
+		} else {
+			goNextPage();
+		}
+	}, [compileControls, goNextPage, pageTag]);
+
+	// Allow PageDown / PageUp shortcut to ease navigation
+	useEffect(() => {
+		const listener = (e: KeyboardEvent) => {
+			let stopPropagation = false;
+			if (e.key === 'PageDown') {
+				handleGoNext();
+				stopPropagation = true;
+			}
+			if (e.key === 'PageUp') {
+				goPreviousPage();
+				stopPropagation = true;
+			}
+			if (stopPropagation) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		};
+		document.addEventListener('keydown', listener);
+		return () => {
+			document.removeEventListener('keydown', listener);
+		};
+	}, [handleGoNext, goPreviousPage]);
+
+	// Check that the source is valid against the schema
+	const errors = useMemo(() => {
+		const ajv = new Ajv({
+			removeAdditional: true,
+			strict: false,
+			allErrors: true,
+			discriminator: true,
+		});
+		const validator = ajv.compile(LunaticSchema);
+		const isSourceValid = validator(structuredClone(source)); // ajv mutate the object, send a clone
+		if (!isSourceValid) {
+			return validator.errors;
+		}
+		return [];
+	}, [source]);
+
+	const [tab, setTab] = useState(0);
+
+	const tabs = [
+		{
+			label: 'Form',
+			children: (
+				<LunaticComponents
+					slots={slots}
+					autoFocusKey={pageTag}
+					components={components}
+					componentProps={(p) => ({
+						errors: errorActive[pageTag],
+						disabled: disabled,
+						readOnly: 'readOnly' in p ? p.readOnly : readOnly,
+					})}
+				/>
+			),
+		},
+		{
+			label: 'Data',
+			children: <OrchestratorData getData={getData} source={source} />,
+		},
+		...extraTabs,
+	] as TabEntry[];
+
+	if (errors && errors.length > 0) {
+		tabs.push({
+			label: (
+				<>
+					Errors{' '}
+					<span className="badge badge-xs badge-error text-white">
+						{errors.length}
+					</span>
+				</>
+			),
+			children: <SchemaValidator errors={errors} />,
+		});
+	}
+
+	return (
+		<Provider>
+			<div className="container grid grid-cols-[1fr_300px] gap-4">
+				<div>
+					<div tabIndex={-1} role="tablist" className="tabs tabs-box mb-4">
+						{tabs.map((t, k) => (
+							<button
+								tabIndex={-1}
+								key={JSON.stringify(t.label)}
+								role="tab"
+								onClick={() => setTab(k)}
+								className={`tab gap-2 ${tab === k ? 'tab-active' : ''}`}
+							>
+								{t.label}
+							</button>
+						))}
+					</div>
+					<div>{tabs[tab].children}</div>
+				</div>
+				<OrchestratorSidebar
+					goPreviousPage={goPreviousPage}
+					goNextPage={handleGoNext}
+					goToPage={goToPage}
+					isLastPage={isLastPage}
+					isFirstPage={isFirstPage}
+					pageTag={pageTag}
+					pager={pager}
+					hasPageResponse={hasPageResponse()}
+					onLogData={() => console.log('Data', getData(true))}
+					onLogComponents={() => console.log('Components', components)}
+				>
+					{showOverview && (
+						<OrchestratorOverview overview={overview} goToPage={goToPage} />
+					)}
+				</OrchestratorSidebar>
+				{errorsForModal?.currentErrors && (
+					<ModalControls
+						errors={errorsForModal.currentErrors}
+						goNext={skip}
+						onClose={closeModal}
+						isCritical={errorsForModal.isCritical}
+					/>
+				)}
+			</div>
+		</Provider>
+	);
+}
+
+function onLogChange(args: unknown) {
+	Logger.log('onChange', args);
+}
+
+function logMissingStrategy() {
+	Logger.log('no missing strategy');
+}
+
+export const Orchestrator = memo(OrchestratorForStories);
+
+export const OrchestratorMeta: Meta<typeof Orchestrator> = {
+	component: Orchestrator,
+	argTypes: {
+		// Do not display controls for these args
+		source: { table: { disable: true } },
+		data: { table: { disable: true } },
+		getReferentiel: { table: { disable: true } },
+		initialPage: { table: { disable: true } },
+		slots: { table: { disable: true } },
+		lastReachedPage: { table: { disable: true } },
+		autoSuggesterLoading: { table: { disable: true } },
+		missingStrategy: { table: { disable: true } },
+		extraTabs: { table: { disable: true } },
+	},
+	args: {
+		disableFilters: false,
+		disableFiltersDescription: false,
+		management: false,
+		shortcut: false,
+		activeControls: true,
+		initialPage: '1',
+		missing: false,
+		missingStrategy: logMissingStrategy,
+		showOverview: false,
+		readOnly: false,
+		disabled: false,
+		detailAlwaysDisplayed: false,
+		autoSuggesterLoading: false,
+	},
+};
+
+export type OrchestratorStory = StoryObj<typeof Orchestrator>;

package/src/stories/utils/OrchestratorData.tsx

@@ -0,0 +1,176 @@
+import { useMemo, useState } from 'react';
+import type { LunaticSource, LunaticState } from '../../use-lunatic/type';
+import { isObject, objectFilter, objectKeys } from '../../utils/object';
+
+type Props = {
+	getData: LunaticState['getData'];
+	source: LunaticSource;
+};
+
+export function OrchestratorData({ getData, source }: Readonly<Props>) {
+	const data = useMemo(() => getData(true), [getData]);
+	const [search, setSearch] = useState('');
+	const [tab, setTab] = useState(0);
+
+	const tabs = [
+		{
+			label: 'Collected',
+			variables: objectFilter(data.COLLECTED ?? {}, (k) =>
+				search ? k.toLowerCase().includes(search.toLowerCase()) : true
+			),
+		},
+		{
+			label: 'Calculated',
+			variables: objectFilter(data.CALCULATED ?? {}, (k) =>
+				search ? k.startsWith(search) : true
+			),
+		},
+	];
+
+	const variables = tabs[tab].variables;
+	return (
+		<div>
+			<div className="flex justify-between">
+				<div role="tablist" className="tabs tabs-border mb-4">
+					{tabs.map((t, k) => (
+						<button
+							key={`variables-${t.label}`}
+							role="tab"
+							onClick={() => setTab(k)}
+							className={`tab gap-2 ${tab === k ? 'tab-active' : ''}`}
+						>
+							{t.label}
+						</button>
+					))}
+				</div>
+				<input
+					type="text"
+					className="input"
+					placeholder="Rechercher"
+					onInput={(e) => setSearch(e.currentTarget.value)}
+					value={search}
+				/>
+			</div>
+			<div className="overflow-x-auto rounded-box border border-base-content/5 bg-base-100">
+				<table className="table table-zebra">
+					<thead>
+						<tr>
+							<th>Variable</th>
+							<th>Infos</th>
+							<th>Value</th>
+						</tr>
+					</thead>
+					<tbody>
+						{Object.entries(variables).map(([key, value]) => (
+							<tr key={key}>
+								<td>{key}</td>
+								<td>
+									<div className="flex gap-2 flex-wrap">
+										{source.resizing &&
+										key in source.resizing &&
+										'variables' in source.resizing[key] ? (
+											<ResizeInfo resizing={source.resizing[key]} />
+										) : null}
+										{source.cleaning && key in source.cleaning ? (
+											<CleaningInfo cleaning={source.cleaning[key]} />
+										) : null}
+									</div>
+								</td>
+								<td>
+									{JSON.stringify(
+										isObject(value) && 'COLLECTED' in value
+											? value.COLLECTED
+											: value
+									)}
+								</td>
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+}
+
+const ResizeInfo = ({
+	resizing,
+}: {
+	resizing: {
+		size: string;
+		variables: string[];
+	};
+}) => {
+	const [expanded, setExpanded] = useState(false);
+	const toggle = () => setExpanded((v) => !v);
+	return (
+		<div className="space-y-2">
+			<button
+				className="flex gap-1 btn btn-primary rounded-full badge-sm whitespace-nowrap"
+				onClick={toggle}
+			>
+				{resizing.variables.length} resize(s)
+				<svg
+					className="size-4"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="currentColor"
+				>
+					<path d="M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"></path>
+				</svg>
+			</button>
+			{expanded && (
+				<div className="flex flex-wrap gap-2">
+					{resizing.variables.map((variable) => (
+						<div key={variable} className="kbd">
+							{variable}
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	);
+};
+
+const CleaningInfo = ({
+	cleaning,
+}: {
+	cleaning: {
+		[p: string]:
+			| string
+			| {
+					expression: string;
+					shapeFrom?: string;
+					isAggregatorUsed: boolean;
+			  }[];
+	};
+}) => {
+	const [expanded, setExpanded] = useState(false);
+	const toggle = () => setExpanded((v) => !v);
+	return (
+		<div className="space-y-2">
+			<button
+				className="flex gap-1 btn btn-secondary rounded-full badge-sm whitespace-nowrap"
+				onClick={toggle}
+			>
+				{Object.keys(cleaning).length} cleaning(s)
+				<svg
+					className="size-4"
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="currentColor"
+				>
+					<path d="M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"></path>
+				</svg>
+			</button>
+			{expanded && (
+				<div className="flex flex-wrap gap-2">
+					{objectKeys(cleaning).map((k) => (
+						<div key={k} className="kbd">
+							{k}
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	);
+};

package/src/stories/utils/OrchestratorOverview.tsx

@@ -0,0 +1,70 @@
+import type { InterpretedLunaticOverviewItem } from '../../use-lunatic/hooks/useOverview';
+import type { useLunatic } from '../../use-lunatic/use-lunatic';
+
+type Props = {
+	overview: InterpretedLunaticOverviewItem[];
+	goToPage: ReturnType<typeof useLunatic>['goToPage'];
+	depth?: number;
+};
+
+export const OrchestratorOverview = ({
+	overview: stateOverview,
+	goToPage,
+	depth = 0,
+}: Props) => {
+	return (
+		<div>
+			{depth === 0 && <h3 className="text-lg font-bold mb-2">Overview</h3>}
+			<ol style={{ paddingLeft: `${depth * 1.25}rem` }}>
+				{stateOverview.map((entry) => (
+					<OverviewItem
+						key={`view-${entry.id}-${entry.page}`}
+						overviewEntry={entry}
+						goToPage={goToPage}
+						depth={depth}
+					/>
+				))}
+			</ol>
+		</div>
+	);
+};
+
+type OverviewItemProps = {
+	overviewEntry: InterpretedLunaticOverviewItem;
+	goToPage: Props['goToPage'];
+	depth: number;
+};
+
+const OverviewItem = ({
+	overviewEntry,
+	goToPage,
+	depth,
+}: OverviewItemProps) => {
+	let color = 'text-base-content/50';
+	if (overviewEntry.reached) {
+		color = 'text-base-content';
+	}
+	if (overviewEntry.current) {
+		color = 'text-success';
+	}
+	return (
+		<li className={`${color}`}>
+			<button
+				style={{ display: 'contents' }}
+				onClick={() => goToPage({ page: overviewEntry.page })}
+			>
+				<div className="flex">
+					<span>{overviewEntry.label}</span>
+					<span className="dot-leader">{overviewEntry.page}</span>
+				</div>
+			</button>
+			{overviewEntry.children.length > 0 && (
+				<OrchestratorOverview
+					overview={overviewEntry.children}
+					goToPage={goToPage}
+					depth={depth + 1}
+				/>
+			)}
+		</li>
+	);
+};

package/src/stories/utils/OrchestratorSidebar.tsx

@@ -0,0 +1,119 @@
+import type { useLunatic } from '../../use-lunatic/use-lunatic';
+import { objectKeys } from '../../utils/object';
+import type { PropsWithChildren } from 'react';
+
+type Props = PropsWithChildren<
+	Pick<
+		ReturnType<typeof useLunatic>,
+		| 'goPreviousPage'
+		| 'goNextPage'
+		| 'goToPage'
+		| 'isLastPage'
+		| 'isFirstPage'
+		| 'pageTag'
+		| 'pager'
+	>
+> & {
+	hasPageResponse: unknown;
+	onLogData: () => void;
+	onLogComponents: () => void;
+};
+
+export function OrchestratorSidebar({
+	goPreviousPage,
+	goNextPage,
+	goToPage,
+	isLastPage,
+	isFirstPage,
+	pageTag,
+	pager,
+	children,
+	hasPageResponse,
+	onLogData,
+	onLogComponents,
+}: Props) {
+	return (
+		<aside className="space-y-4 card card-border border-base-300 p-2">
+			<div className="space-y-4">
+				{/* Next / Prev button */}
+				<div>
+					<div className="join mb-2 w-full">
+						<button
+							className="btn join-item btn-block shrink btn-primary"
+							onClick={goPreviousPage}
+							disabled={isFirstPage}
+						>
+							Previous
+						</button>
+						<button
+							className="btn join-item btn-block shrink btn-primary"
+							onClick={goNextPage}
+							disabled={isLastPage}
+						>
+							Next
+						</button>
+					</div>
+					<div className="textarea-sm text-base-content/70 text-center">
+						You can use PgDown / PgUp shortcut
+					</div>
+				</div>
+
+				{/* Reach a specific page */}
+				<form
+					className="join w-full"
+					onSubmit={(e) => {
+						e.preventDefault();
+						goToPage({
+							page: e.currentTarget.querySelector('input')!.valueAsNumber,
+						});
+					}}
+				>
+					<label className="input join-item">
+						<span className="label">Page</span>
+						<input type="number" placeholder="1" />
+					</label>
+					<button type="submit" className="join-item btn btn-neutral">
+						Reach
+					</button>
+				</form>
+
+				{/* Pager informations */}
+				<div>
+					<h3 className="text-lg font-bold mb-4">Pager</h3>
+					<ul className="flex flex-col">
+						<li className="flex gap-2">
+							<span>PageTag</span>
+							<span className="dot-leader">{JSON.stringify(pageTag)}</span>
+						</li>
+						{objectKeys(pager).map((key) => (
+							<li className="flex gap-2" key={key}>
+								<span>{key}</span>{' '}
+								<span className="dot-leader">{JSON.stringify(pager[key])}</span>
+							</li>
+						))}
+					</ul>
+				</div>
+			</div>
+			<div className="flex gap-2 w-full">
+				<button className="btn btn-warning grow" onClick={onLogComponents}>
+					Log components
+				</button>
+				<button className="btn btn-warning grow" onClick={onLogData}>
+					Log data
+				</button>
+			</div>
+			<div>
+				<h3 className="text-lg font-bold mb-2">Misc</h3>
+				<ul className="flex flex-col">
+					<li className="flex gap-2">
+						<span>pageHasResponse:</span>{' '}
+						<span className="dot-leader">
+							{JSON.stringify(hasPageResponse)}
+						</span>
+					</li>
+				</ul>
+			</div>
+			{children}
+		</aside>
+	);
+}

package/src/stories/utils/SchemaValidator.tsx

@@ -0,0 +1,29 @@
+import type { ErrorObject } from 'ajv';
+
+type Props = {
+	errors: ErrorObject<string, Record<string, any>, unknown>[];
+};
+
+export function SchemaValidator({ errors }: Readonly<Props>) {
+	if (!errors) {
+		return null;
+	}
+
+	return (
+		<div className="alert alert-error alert-outline text-xs">
+			<div>
+				<h4 className="mb-2">
+					<strong>{errors.length}</strong> erreurs
+				</h4>
+				<ul>
+					{errors.map((err) => (
+						<li key={err.instancePath}>
+							<strong>{err.instancePath}</strong> : {err.message}{' '}
+							<small>({err.schemaPath})</small>
+						</li>
+					))}
+				</ul>
+			</div>
+		</div>
+	);
+}

package/src/stories/utils/referentiel.ts

@@ -0,0 +1,9 @@
+import type { IndexEntry } from '../../utils/search/SearchInterface';
+
+export const getReferentiel = async (name: string) => {
+	return fetch(`./${name}.json`)
+		.then((r) => r.json())
+		.catch(() => {
+			throw new Error(`Unknown référentiel ${name}`);
+		}) as Promise<IndexEntry[]>;
+};