@inseefr/lunatic 3.5.6 → 3.5.8

package/src/stories/utils/orchestrator.jsx

@@ -1,267 +0,0 @@
-import './custom-lunatic.scss';
-import './orchestrator.scss';
-
-import {
-	Button,
-	components,
-	LunaticComponents,
-	ModalControls,
-	useLunatic,
-} from '../..';
-import React, { memo, useCallback, useEffect, useMemo, 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,
-	disableFilters = false,
-	disableFiltersDescription = true,
-	management = false,
-	shortcut = false,
-	activeControls = false,
-	features,
-	initialPage = '1',
-	missing = false,
-	missingStrategy = logMissingStrategy,
-	missingShortcut,
-	autoSuggesterLoading,
-	addExternal,
-	preferences,
-	slots,
-	showOverview = false,
-	getReferentiel,
-	dontKnowButton,
-	refusedButton,
-	readOnly = false,
-	disabled = false,
-	detailAlwaysDisplayed = false,
-	...rest
-}) {
-	const { maxPage } = source;
-
-	const componentsOptions = { detailAlwaysDisplayed };
-
-	const {
-		getComponents,
-		goPreviousPage,
-		goNextPage,
-		goToPage,
-		pager,
-		pageTag,
-		isFirstPage,
-		isLastPage,
-		waiting,
-		overview,
-		compileControls,
-		getData,
-		Provider,
-		hasPageResponse,
-	} = useLunatic(source, data, {
-		initialPage,
-		features,
-		preferences,
-		disableFilters, 
-		disableFiltersDescription,
-		onChange: onLogChange,
-		autoSuggesterLoading,
-		getReferentiel,
-		management,
-		missing,
-		missingStrategy,
-		lastReachedPage: rest.lastReachedPage,
-		missingShortcut,
-		shortcut,
-		activeControls,
-		withOverview: showOverview,
-		dontKnowButton,
-		refusedButton,
-		componentsOptions,
-	});
-
-	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],
-							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

@@ -1,66 +0,0 @@
-.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: 0.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: 0.3rem;
-	margin-bottom: 0.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: 0.75rem 1.25rem;
-	margin-bottom: 1rem;
-	border: 1px solid #f5c6cb;
-	border-radius: 0.25rem;
-}

package/src/stories/utils/overview.jsx

@@ -1,39 +0,0 @@
-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

@@ -1,37 +0,0 @@
-* {
-	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

@@ -1,7 +0,0 @@
-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/tests/utils/e2e.js

@@ -1,91 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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: {
-			COLLECTED: null,
-		},
-	};
-}

package/src/use-lunatic/replace-component-sequence.ts

@@ -1,25 +0,0 @@
-import type { LunaticComponentDefinition } from './type';
-
-/**
- * Pour le Question : les composants du fieldset n'existe pas dans pages.
- * Ils échappent donc aux controls. On les substitue ici au Question.
- * On ne peut pas les ajouter directement dans pages (en spécifiant un page), car ils s'afficheraient 2 fois : dans le fieldset et en dessus, comme
- * des composant à part entière.
- * D'autres composant pourraient un jour figurer ici.
- */
-export function replaceComponentSequence(
-	components: Array<LunaticComponentDefinition>
-) {
-	return components.reduce(function (
-		acc: Array<LunaticComponentDefinition>,
-		component
-	) {
-		const { componentType } = component;
-		switch (componentType) {
-			case 'Question':
-				return [...acc, ...component.components];
-			default:
-				return [...acc, component];
-		}
-	}, []);
-}

package/src/use-lunatic/test.utils.ts

@@ -1,17 +0,0 @@
-import { LunaticData } from './type';
-
-export const dataFromObject = (o: Record<string, unknown>): LunaticData => {
-	return {
-		EXTERNAL: {},
-		COLLECTED: Object.keys(o).reduce(
-			(acc, k) => ({
-				...acc,
-				[k]: {
-					COLLECTED: o[k],
-				},
-			}),
-			{}
-		),
-		CALCULATED: {},
-	};
-};

package/src/utils/is-object.ts

@@ -1,6 +0,0 @@
-/**
- * isObject function with type narrowing
- */
-export function isObject(v: unknown): v is Record<string, unknown> {
-	return typeof v === 'object' && v !== null;
-}

package/src/utils/to-number.ts

@@ -1,12 +0,0 @@
-/**
- * Convert an unknown value into a number
- */
-export function toNumber(v: unknown): number | null {
-	if (typeof v === 'number') {
-		return v;
-	}
-	if (typeof v === 'string') {
-		return parseInt(v, 10);
-	}
-	return null;
-}