@inseefr/lunatic 3.4.4 → 3.4.5-rc.0

package/src/stories/utils/orchestrator.jsx

@@ -0,0 +1,260 @@
+import './custom-lunatic.scss';
+import './orchestrator.scss';
+
+import {
+	Button,
+	components,
+	LunaticComponents,
+	ModalControls,
+	useLunatic,
+} from '../..';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+
+import { Logger } from '../../utils/logger';
+import { Overview } from './overview';
+import { SchemaValidator } from './SchemaValidator.jsx';
+
+const Input = components.Input;
+
+function DevOptions({ goToPage, getData }) {
+	const [toPage, setToPage] = useState(1);
+
+	function handleChange(_, value) {
+		setToPage(value);
+	}
+
+	return (
+		<div className="dev-options">
+			<div style={{ display: 'flex' }}>
+				<Button onClick={() => Logger.log(getData(true))}>Get Data</Button>
+				<Button onClick={() => goToPage({ page: `${toPage}` })}>
+					{`Go to "${toPage}"`}
+				</Button>
+			</div>
+			<Input
+				id="page-to-jump"
+				value={toPage}
+				handleChange={handleChange}
+				min={1}
+				label={'Page to reach : '}
+			/>
+		</div>
+	);
+}
+
+function Pager({
+	goPrevious,
+	goNext,
+	goToPage,
+	lastReachedPage,
+	isLast,
+	isFirst,
+	pageTag,
+	maxPage,
+	getData,
+	pager,
+}) {
+	return (
+		<>
+			<div className="pagination">
+				<Button onClick={goPrevious} disabled={isFirst}>
+					Previous
+				</Button>
+				<Button onClick={goNext} disabled={isLast}>
+					Next
+				</Button>
+				<div style={{ fontSize: '.8em', opacity: 0.7, marginTop: '.3em' }}>
+					You can use PgDown / PgUp shortcut
+				</div>
+			</div>
+			<DevOptions
+				goToPage={goToPage}
+				getData={getData}
+				lastReachedPage={lastReachedPage}
+			/>
+			<div className="story-pager">
+				<h3>Pager</h3>
+				<ul>
+					<li>
+						<strong>PageTag:</strong> {JSON.stringify(pageTag)}
+					</li>
+					{Object.keys(pager).map((key) => (
+						<li key={key}>
+							<strong>{key}:</strong> {JSON.stringify(pager[key])}
+						</li>
+					))}
+				</ul>
+			</div>
+		</>
+	);
+}
+
+function onLogChange(response, value, args) {
+	Logger.log('onChange', { response, value, args });
+}
+
+function logMissingStrategy() {
+	Logger.log('no missing strategy');
+}
+
+function OrchestratorForStories({
+	source,
+	data,
+	management = false,
+	shortcut = false,
+	activeControls = false,
+	features,
+	initialPage = '1',
+	missing = false,
+	missingStrategy = logMissingStrategy,
+	missingShortcut,
+	autoSuggesterLoading,
+	addExternal,
+	preferences,
+	slots,
+	showOverview = false,
+	filterDescription = true,
+	getReferentiel,
+	dontKnowButton,
+	refusedButton,
+	readOnly = false,
+	disabled = false,
+	...rest
+}) {
+	const { maxPage } = source;
+	const {
+		getComponents,
+		goPreviousPage,
+		goNextPage,
+		goToPage,
+		pager,
+		pageTag,
+		isFirstPage,
+		isLastPage,
+		waiting,
+		overview,
+		compileControls,
+		getData,
+		Provider,
+		hasPageResponse,
+	} = useLunatic(source, data, {
+		initialPage,
+		features,
+		preferences,
+		onChange: onLogChange,
+		autoSuggesterLoading,
+		getReferentiel,
+		management,
+		missing,
+		missingStrategy,
+		lastReachedPage: rest.lastReachedPage,
+		missingShortcut,
+		shortcut,
+		activeControls,
+		withOverview: showOverview,
+		dontKnowButton,
+		refusedButton,
+	});
+
+	const components = getComponents();
+	const { lastReachedPage } = pager;
+
+	const [errorActive, setErrorActive] = useState({});
+	const [errorsForModal, setErrorsForModal] = useState(null);
+
+	const skip = useCallback(
+		(arg) => {
+			setErrorsForModal(undefined);
+			goNextPage(arg);
+		},
+		[goNextPage]
+	);
+
+	const closeModal = useCallback(() => setErrorsForModal(undefined), []);
+
+	const handleGoNext = useCallback(() => {
+		const { currentErrors, isCritical } = compileControls();
+		setErrorActive({ ...errorActive, [pageTag]: currentErrors || {} });
+		if (currentErrors && Object.keys(currentErrors).length > 0) {
+			setErrorsForModal({ currentErrors, isCritical });
+		} else goNextPage();
+	}, [compileControls, errorActive, goNextPage, pageTag]);
+
+	// Allow PageDown / PageUp shortcut to ease navigation
+	useEffect(() => {
+		const listener = (e) => {
+			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]);
+
+	return (
+		<Provider>
+			<div className="container story-with-sidebar">
+				<div className="components">
+					<LunaticComponents
+						slots={slots}
+						autoFocusKey={pageTag}
+						components={components}
+						componentProps={() => ({
+							errors: errorActive[pageTag],
+							filterDescription: filterDescription,
+							disabled: disabled,
+							readOnly: readOnly,
+						})}
+					/>
+					<SchemaValidator source={source} />
+				</div>
+				<aside>
+					<Pager
+						goPrevious={goPreviousPage}
+						goNext={handleGoNext}
+						goToPage={goToPage}
+						lastReachedPage={lastReachedPage}
+						isLast={isLastPage}
+						isFirst={isFirstPage}
+						pageTag={pageTag}
+						maxPage={maxPage}
+						getData={getData}
+						pager={pager}
+					/>
+					<div className="story-pager">
+						<h3>Misc</h3>
+						<ul>
+							<li>
+								<strong>pageHasResponse:</strong>{' '}
+								{JSON.stringify(hasPageResponse())}
+							</li>
+						</ul>
+					</div>
+					{showOverview && <Overview overview={overview} goToPage={goToPage} />}
+					{errorsForModal && (
+						<ModalControls
+							errors={errorsForModal.currentErrors}
+							goNext={skip}
+							onClose={closeModal}
+							isCritical={errorsForModal.isCritical}
+						/>
+					)}
+				</aside>
+			</div>
+		</Provider>
+	);
+}
+
+export default memo(OrchestratorForStories);

package/src/stories/utils/orchestrator.scss

@@ -0,0 +1,64 @@
+.dev-options {
+	background-color: antiquewhite;
+	padding: 5px 5px;
+	border: solid burlywood 2px;
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 1rem;
+}
+
+.story-with-sidebar {
+	font-family: sans-serif;
+	display: grid;
+	height: 100%;
+	grid-template-columns: 1fr 300px;
+	align-items: flex-start;
+}
+
+.story-with-sidebar aside label {
+	display: block;
+	font-weight: bold;
+	margin-bottom: .3em;
+}
+
+.story-with-sidebar aside {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 1rem;
+	padding: 1rem;
+	box-shadow: 0 4px 3px rgba(0, 0, 0, 0.07), 0px 2px 2px rgba(0, 0, 0, 0.06);
+	background-color: #f1f5f9;
+
+	.pagination {
+		margin-top: 0;
+	}
+}
+
+.story-pager h3 {
+	font-size: 1rem;
+	padding-bottom: .3rem;
+	margin-bottom: .5rem;
+	border-bottom: solid 1px rgba(0, 0, 0, 0.3);
+}
+
+.story-pager ul {
+	margin: 0;
+	padding: 0 0 0 20px;
+	line-height: 1.4;
+	font-size: 0.9rem;
+	color: rgba(0, 0, 0, 0.75)
+}
+
+.story-pager ul strong {
+	color: #000;
+}
+
+.json-errors {
+	color: #721c24;
+	background-color: #f8d7da;
+	position: relative;
+	padding: .75rem 1.25rem;
+	margin-bottom: 1rem;
+	border: 1px solid #f5c6cb;
+	border-radius: .25rem;
+}

package/src/stories/utils/overview.jsx

@@ -0,0 +1,39 @@
+import { Fragment } from 'react';
+import './overview.scss';
+
+export const Overview = ({ overview: stateOverview, goToPage }) => {
+	return (
+		<ol className="orchestrator-overview">
+			{stateOverview.map((entry) => (
+				<OverviewItem
+					key={`view-${entry.id}-${entry.page}`}
+					overviewEntry={entry}
+					goToPage={goToPage}
+				/>
+			))}
+		</ol>
+	);
+};
+
+const OverviewItem = ({ overviewEntry, goToPage }) => {
+	let color = 'grey';
+	if (overviewEntry.reached) {
+		color = 'var(--color-primary-main)';
+	}
+	if (overviewEntry.current) {
+		color = 'green';
+	}
+	return (
+		<Fragment>
+			<li style={{ color: color }}>
+				<div onClick={() => goToPage({ page: overviewEntry.page })}>
+					<span>{overviewEntry.label}</span>
+					<span>({overviewEntry.page})</span>
+				</div>
+				{overviewEntry.children.length > 0 && (
+					<Overview overview={overviewEntry.children} goToPage={goToPage} />
+				)}
+			</li>
+		</Fragment>
+	);
+};

package/src/stories/utils/overview.scss

@@ -0,0 +1,38 @@
+* {
+	box-sizing: border-box;
+	--color-primary-dark: #2a5885;
+	--color-primary-light: #5181b8;
+	--color-primary-main: #4a73a4;
+	--color-primary-contrast-text: #ffffff;
+
+	--color-secondary-dark: #14202d;
+	--color-secondary-light: #f7f8fa;
+	--color-secondary-main: #1a293b;
+	--color-secondary-contrast-text: #ffffff;
+
+	--color-very-light: #dbe4ef;
+	--color-very-very-light: #e6eaee;
+	--color-current-item: #0d823e;
+
+	--color-error: #f50c0c;
+	--color-disabled: rgb(235, 235, 228);
+}
+
+.orchestrator-overview {
+	margin: 0;
+	padding: 0;
+
+	div {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	ol {
+		margin-left: 2rem;
+	}
+
+	li {
+		list-style: none;
+	}
+}
+

package/src/stories/utils/referentiel.js

@@ -0,0 +1,7 @@
+export const getReferentiel = async (name) => {
+	 try {
+		return fetch(`./${name}.json`).then((r) => r.json());
+	 } catch (error) {
+		throw new Error(`Unknown référentiel ${name}`);
+	 }
+	}

package/src/test.d.ts

@@ -0,0 +1,8 @@
+import 'vitest';
+import { TestingLibraryMatchers } from 'vitest-dom/matchers';
+
+declare global {
+	namespace Vi {
+		interface Assertion<T = any> extends TestingLibraryMatchers<T, void> {}
+	}
+}

package/src/tests/setup.ts

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom';
+import { afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+	cleanup();
+});
+
+// Mock for structuredClone on NodeJS
+(global as any).structuredClone = (val: any) => {
+	return JSON.parse(JSON.stringify(val));
+};
+
+// We need ResizeObserver to test Tooltip
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+	observe: vi.fn(),
+	unobserve: vi.fn(),
+	disconnect: vi.fn(),
+}));

package/src/tests/utils/e2e.js

@@ -0,0 +1,91 @@
+import { userEvent, waitFor, within, expect } from '@storybook/test';
+import { sleep } from './timer';
+
+/**
+ * Bridge between playwright tests and storybook tests
+ * This is used to have a similar API for both tests
+ */
+export function playwrightToUserEvent(canvas) {
+	return new Page(canvas);
+}
+
+class Page {
+	/**
+	 * @param {HTMLElement} canvas
+	 */
+	constructor(canvas) {
+		this.canvas = within(canvas);
+	}
+
+	getByRole(...args) {
+		return new Instruction(this.canvas.findByRole(...args));
+	}
+
+	getByText(...args) {
+		if (args[1] && args[1].index !== undefined) {
+			const index = args[1].index;
+			return new Instruction(
+				this.canvas.findAllByText(...args).then((r) => r[index])
+			);
+		}
+		return new Instruction(this.canvas.findByText(...args));
+	}
+
+	getByLabel(...args) {
+		if (args[1] && args[1].index !== undefined) {
+			const index = args[1].index;
+			return new Instruction(
+				this.canvas.findAllByLabelText(...args).then((r) => r[index])
+			);
+		}
+		return new Instruction(this.canvas.findByLabelText(...args));
+	}
+
+	async keyPress(char) {
+		return userEvent.keyboard(char);
+	}
+}
+
+class Instruction {
+	constructor(element) {
+		if (element instanceof Error) {
+			throw element;
+		}
+		this.element = element;
+	}
+
+	async shouldBeVisible() {
+		return waitFor(async () => expect(await this.element).toBeVisible());
+	}
+
+	locator(selector) {
+		return new Instruction(this.element.then((b) => b.querySelector(selector)));
+	}
+
+	getByRole(...args) {
+		return new Instruction(
+			this.element.then((b) => within(b).findByRole(...args))
+		);
+	}
+
+	getByText(...args) {
+		return new Instruction(
+			this.element.then((b) => within(b).findByText(...args))
+		);
+	}
+
+	async click() {
+		return userEvent.click(await this.element);
+	}
+
+	async fill(text) {
+		const element = await this.element;
+		try {
+			await userEvent.clear(element);
+			await sleep(1);
+		} catch (e) {
+			// Do nothing
+		}
+		return userEvent.type(element, text, { delay: 1 });
+	}
+}

package/src/tests/utils/lunatic.ts

@@ -0,0 +1,37 @@
+import type { LunaticData } from '../../use-lunatic/type';
+
+/**
+ * Generate LunaticData from a record of values
+ */
+export function generateData<T extends Record<string, unknown>>(
+	data: T
+): LunaticData {
+	return {
+		COLLECTED: Object.fromEntries(
+			Object.entries(data).map(([key, value]) => [
+				key,
+				{
+					CALCULATED: null,
+					EXTERNAL: null,
+					COLLECTED: value,
+				},
+			])
+		) as Record<string, any>,
+		CALCULATED: {},
+		EXTERNAL: {},
+	};
+}
+
+export function generateVariable({ type = 'COLLECTED', name = 'VARIABLE' }) {
+	return {
+		variableType: type,
+		name: name,
+		values: {
+			PREVIOUS: null,
+			COLLECTED: null,
+			FORCED: null,
+			EDITED: null,
+			INPUTTED: null,
+		},
+	};
+}

package/src/tests/utils/timer.ts

@@ -0,0 +1,3 @@
+export function sleep(duration: number) {
+	return new Promise((resolve) => setTimeout(resolve, duration));
+}