@inseefr/lunatic 0.1.13-hackathon → 0.2.0-v2

package/src/stories/utils/orchestrator.js

@@ -1,20 +1,45 @@
-import React from 'react';
-import * as lunatic from 'components';
+import React, { memo } from 'react';
+import * as lunatic from '../../components';
 import './custom-lunatic.scss';
+import Waiting from './waiting';
 
 function getStoreInfoRequired() {
 	return {};
 }
 
-const OrchestratorForStories = ({
+function Pager({ goNext, goPrevious, isLast, isFirst, pageTag, maxPage }) {
+	if (maxPage && maxPage > 1) {
+		const Button = lunatic.Button;
+		return (
+			<>
+				<div className="pagination">
+					<Button onClick={goPrevious} disabled={isFirst}>
+						Previous
+					</Button>
+					<Button onClick={goNext} disabled={isLast}>
+						Next
+					</Button>
+				</div>
+				<div>PAGE: {pageTag}</div>
+			</>
+		);
+	}
+	return null;
+}
+
+const DEFAULT_DATA = {};
+const DEFAULT_FEATURES = ['VTL', 'MD'];
+
+function onLogChange(response, value, args) {
+	console.log('onChange', { response, value, args });
+}
+
+function OrchestratorForStories({
 	source,
-	suggesters,
-	data = {},
+	data = DEFAULT_DATA,
 	management = false,
-	pagination = false,
 	modalForControls = false,
-	features = ['VTL'],
-	bindings: initialBindings,
+	features = DEFAULT_FEATURES,
 	initialPage = '1',
 	getStoreInfo = getStoreInfoRequired,
 	missing = false,
@@ -22,89 +47,83 @@ const OrchestratorForStories = ({
 	activeGoNextForMissing = false,
 	suggesterFetcher,
 	autoSuggesterLoading,
+	addExternal,
+	preferences,
+	custom,
+	filterDescription = true,
 	...rest
-}) => {
-	const preferences = management
-		? ['COLLECTED', 'FORCED', 'EDITED']
-		: ['COLLECTED'];
-	const savingType = management ? 'EDITED' : 'COLLECTED';
+}) {
+	const { maxPage } = source;
+
 	const {
-		handleChange,
-		components,
-		bindings,
-		pagination: {
-			goNext,
-			goPrevious,
-			page,
-			setPage,
-			maxPage,
-			isFirstPage,
-			isLastPage,
-			flow,
-		},
-	} = lunatic.useLunatic(source, data, {
-		suggesters,
-		savingType,
-		preferences,
-		features,
-		management,
-		pagination,
-		modalForControls,
+		getComponents,
+		goNextPage,
+		goPreviousPage,
+		pageTag,
+		isFirstPage,
+		isLastPage,
+		waiting,
+		getErrors,
+	} = lunatic.useLunatic({
+		source,
+		data,
 		initialPage,
-		suggesterFetcher,
-		autoSuggesterLoading,
+		features,
+		preferences,
+		onChange: onLogChange,
 	});
-	const Button = lunatic.Button;
 
-	const missingStrategy = (b) => goNext(null, b);
+	const components = getComponents();
+	const errors = getErrors();
 
 	return (
 		<div className="container">
 			<div className="components">
-				{components.map((q) => {
-					const { id, componentType } = q;
+				{components.map(function (component) {
+					const { id, componentType, response, storeName, ...other } =
+						component;
 					const Component = lunatic[componentType];
-					const { storeName } = q;
+					const storeInfo = storeName ? getStoreInfo(storeName) : {};
 
 					return (
 						<div className="lunatic lunatic-component" key={`component-${id}`}>
 							<Component
+								id={id}
+								response={response}
+								{...other}
 								{...rest}
-								{...q}
-								{...getStoreInfo(storeName)}
-								handleChange={handleChange}
-								preferences={preferences}
-								savingType={savingType}
-								management={management}
-								features={features}
-								bindings={{ ...bindings, ...initialBindings }}
-								currentPage={page}
-								setPage={setPage}
-								flow={flow}
-								pagination={pagination}
+								{...component}
+								{...storeInfo}
 								missing={missing}
+								missingStrategy={goNextPage}
 								shortcut={shortcut}
-								missingStrategy={activeGoNextForMissing && missingStrategy}
+								custom={custom}
+								filterDescription={filterDescription}
 							/>
 						</div>
 					);
 				})}
 			</div>
-			{pagination && (
-				<>
-					<div className="pagination">
-						<Button
-							onClick={goPrevious}
-							disabled={isFirstPage}
-							value="Previous"
-						/>
-						<Button onClick={goNext} disabled={isLastPage} value="Next" />
-					</div>
-					<div>{`Page : ${page}/${maxPage}`}</div>
-				</>
-			)}
+			<Pager
+				goNext={goNextPage}
+				goPrevious={goPreviousPage}
+				isLast={isLastPage}
+				isFirst={isFirstPage}
+				pageTag={pageTag}
+				maxPage={maxPage}
+			/>
+			<lunatic.Modal
+				title="Des points requièrent votre attention."
+				errors={errors}
+				goNext={goNextPage}
+			/>
+			<Waiting status={waiting}>
+				<div className="waiting-orchestrator">
+					Initialisation des données de suggestion...
+				</div>
+			</Waiting>
 		</div>
 	);
-};
+}
 
-export default OrchestratorForStories;
+export default memo(OrchestratorForStories);

package/src/stories/utils/waiting/index.js

@@ -0,0 +1 @@
+export { default } from './waiting';

package/src/stories/utils/waiting/preloader.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><g><circle cx="16" cy="64" r="16" fill="#000"/><circle cx="16" cy="64" r="16" fill="#555" transform="rotate(45,64,64)"/><circle cx="16" cy="64" r="16" fill="#949494" transform="rotate(90,64,64)"/><circle cx="16" cy="64" r="16" fill="#ccc" transform="rotate(135,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(180,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(225,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(270,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(315,64,64)"/><animateTransform attributeName="transform" type="rotate" values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64" calcMode="discrete" dur="720ms" repeatCount="indefinite"></animateTransform></g></svg>

package/src/stories/utils/waiting/waiting.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './waiting.scss';
+import preloader from './preloader.svg';
+
+function Waiting({ status, children }) {
+	if (status) {
+		return (
+			<div className="waiting">
+				<img src={preloader} alt="loading" />
+				<div className="content">{children}</div>
+			</div>
+		);
+	}
+	return null;
+}
+
+Waiting.defaultProps = {
+	status: false,
+};
+
+export default React.memo(Waiting);

package/src/stories/utils/waiting/waiting.scss

@@ -0,0 +1,21 @@
+.waiting {
+	display: block;
+	position: fixed;
+	height: 100%;
+	width: 100%;
+	background-color: rgba(23, 59, 77, 0.8);
+	top: 0;
+	img {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		width: 10%;
+		margin-top: 120px;
+	}
+	.content {
+		display: block;
+		width: fit-content;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}

package/src/tests/sample.spec.js

@@ -0,0 +1,5 @@
+describe('sample', () => {
+	it('add fake test to avoid test script bug', () => {
+		expect(true).toBeTruthy();
+	});
+});

package/src/use-lunatic/actions.js

@@ -0,0 +1,32 @@
+export const GO_NEXT_PAGE = 'use-lunatic/go-next';
+export const goNextPage = ({ block }) => ({
+	type: GO_NEXT_PAGE,
+	payload: { block },
+});
+
+export const GO_PREVIOUS_PAGE = 'use-lunatic/go-previous';
+export const goPreviousPage = () => ({ type: GO_PREVIOUS_PAGE });
+
+export const ON_INIT = 'use-lunatic/on-init';
+export const onInit = ({
+	data,
+	source,
+	initialPage,
+	features,
+	handleChange,
+}) => ({
+	type: ON_INIT,
+	payload: { data, source, initialPage, features, handleChange },
+});
+
+export const HANDLE_CHANGE = 'use-lunatic/handle-change';
+export const handleChange = (response, value, args) => ({
+	type: HANDLE_CHANGE,
+	payload: { response, value, args },
+});
+
+export const ON_SET_WAITING = 'use-lunatic/on-set-waiting';
+export const onSetWaiting = (status) => ({
+	type: ON_SET_WAITING,
+	payload: { status },
+});

package/src/use-lunatic/commons/check-loops.js

@@ -0,0 +1,61 @@
+import isPaginatedLoop from './is-paginated-loop';
+
+function extractSubPages(component, previous = []) {
+	const { components } = component;
+	return components.reduce(function (pages, component) {
+		const { page } = component;
+
+		if (page && pages.indexOf(page) === -1) {
+			return [...pages, page];
+		}
+		return pages;
+	}, previous);
+}
+
+function extractLoop(components) {
+	return components.reduce(
+		function ({ isLoop, subPages, iterations, loopDependencies }, component) {
+			const currentIsLoop = isPaginatedLoop(component);
+			if (currentIsLoop) {
+				return {
+					isLoop: true,
+					subPages: extractSubPages(component, subPages),
+					iterations: iterations || component.iterations,
+					loopDependencies: loopDependencies || component.loopDependencies,
+				};
+			}
+			return { isLoop, subPages, iterations };
+		},
+		{
+			isLoop: false,
+			subPages: undefined,
+			iterations: undefined,
+			loopDependencies: undefined,
+		}
+	);
+}
+
+function checkLoops(pages) {
+	return Object.entries(pages).reduce(function (map, current) {
+		const [number, content] = current;
+		if (number !== 'unpaged') {
+			const { components } = content;
+			const { isLoop, subPages, iterations, loopDependencies } =
+				extractLoop(components);
+
+			return {
+				...map,
+				[number]: {
+					...content,
+					isLoop,
+					subPages,
+					iterations,
+					loopDependencies,
+				},
+			};
+		}
+		return map;
+	}, {});
+}
+
+export default checkLoops;

package/src/use-lunatic/commons/create-map-pages.js

@@ -0,0 +1,69 @@
+import isPaginatedLoop from './is-paginated-loop';
+
+function isUnpaginated(questionnaire) {
+	const { maxPage } = questionnaire;
+	return maxPage === undefined;
+}
+
+/**
+ *
+ * @param {*} component: object
+ * @param {*} page: string
+ * @param {*} map Map<page,{ components: Array<component>, isLoop: boolean, subPages: Array<page> }>
+ * @returns
+ */
+function mergeComponent(component, page, map) {
+	if (!page) {
+		return { ...map, unpaged: [...map.unpaged, component] };
+	}
+	if (page in map) {
+		const current = map[page];
+		const { components } = current;
+		return {
+			...map,
+			[page]: { ...current, components: [...components, component] },
+		};
+	}
+	return { ...map, [page]: { components: [component] } };
+}
+
+function mergeNestedComponents(components, map) {
+	return components.reduce(function (current, component) {
+		const { page } = component;
+		if (page) {
+			return mergeComponent(component, page, current);
+		}
+
+		return current;
+	}, map);
+}
+/**
+ *
+ * @param {*} components
+ * @returns
+ */
+function createPages(questionnaire) {
+	const { components } = questionnaire;
+	if (isUnpaginated(questionnaire)) {
+		return { 1: { components } }; // no page -> one page ;)
+	}
+	const map = components.reduce(
+		function (current, component) {
+			const { components, page } = component;
+			if (isPaginatedLoop(component)) {
+				return mergeComponent(
+					component,
+					page,
+					mergeNestedComponents(components, current)
+				);
+			}
+
+			return mergeComponent(component, page, current);
+		},
+		{ unpaged: [] }
+	);
+
+	return map;
+}
+
+export default createPages;

package/src/use-lunatic/commons/execute-condition-filter.js

@@ -0,0 +1,16 @@
+import getCompatibleVTLExpression from './get-compatible-vtl-expression';
+
+function executeConditionFilter(filter, execute, iteration) {
+	if (filter && typeof execute === 'function') {
+		const { value } = filter;
+
+		function logging(...args) {
+			console.warn(args);
+			console.warn('executeConditionFilter:', filter);
+		}
+		return execute(getCompatibleVTLExpression(value), { iteration, logging });
+	}
+	return undefined;
+}
+
+export default executeConditionFilter;

package/src/use-lunatic/commons/execute-expression/create-execute-expression.js

@@ -0,0 +1,194 @@
+import executeExpression from './execute-expression';
+import getSafetyExpression from './get-safety-expression';
+import getExpressionVariables from './get-expressions-variables';
+import createMemoizer from './create-memoizer';
+import createRefreshCalculated from './create-refresh-calculated';
+import { VTL, VTL_MD } from 'utils/constants';
+
+function validateExpression(expObject) {
+	if (typeof expObject === 'object') {
+		const { type } = expObject;
+		if (type === VTL || type === VTL_MD) {
+			return expObject;
+		}
+	}
+	throw new Error(`Non-VTL compatible expression : ${expObject}`);
+}
+
+function getVtlCompatibleValue(value) {
+	if (value === undefined) {
+		return null;
+	}
+	if (Array.isArray(value)) {
+		return {
+			dataStructure: { result: {} },
+			dataPoints: {
+				result: value,
+			},
+		};
+	}
+
+	return value;
+}
+
+function createBindings(variables) {
+	return Object.entries(variables).reduce(function (
+		bindings,
+		[name, { value }]
+	) {
+		return { ...bindings, [name]: value };
+	},
+	{});
+}
+
+/**
+ *
+ * @param {*} variables
+ * @returns
+ */
+function createExecuteExpression(variables, features) {
+	// on aimerait map d'expression, avec les bindings
+	const bindings = createBindings(variables);
+	const tokensMap = new Map();
+	const collectedUpdated = new Map();
+	const [memoize, getMemoizedValue] = createMemoizer();
+	const [refreshCalculated, setToRefreshCalculated] = createRefreshCalculated({
+		variables,
+		execute,
+		bindings,
+	});
+
+	/**
+	 *
+	 * @param {*} name
+	 */
+	function pushToLazy(name) {
+		const { CalculatedLinked = [] } = variables[name];
+
+		CalculatedLinked.forEach(function (variable) {
+			const { name } = variable;
+			setToRefreshCalculated(name, variable);
+		});
+	}
+
+	/**
+	 *
+	 * @param {*} name
+	 * @param {*} value
+	 */
+	function updateBindings(name, value) {
+		// update des bindings
+		if (name in bindings) {
+			bindings[name] = value;
+			collectedUpdated.set(name, []);
+		}
+		pushToLazy(name);
+	}
+
+	function getVariablesAndCach(expression) {
+		if (tokensMap.has(expression)) {
+			return tokensMap.get(expression);
+		}
+		const tokens = getExpressionVariables(expression, variables);
+		tokensMap.set(expression, tokens);
+		return tokens;
+	}
+
+	/**/
+	function collecteVariables(dependencies) {
+		if (Array.isArray(dependencies)) {
+			return dependencies.reduce(function (map, name) {
+				if (name in variables) {
+					const data = variables[name];
+					const { variable, type } = data;
+					if (!(name in map)) {
+						if (type === 'CALCULATED') {
+							const { expression } = variable;
+							const subDependencies = getVariablesAndCach(expression);
+
+							return {
+								...map,
+								[name]: { ...variable },
+								...collecteVariables(subDependencies),
+							};
+						}
+
+						return { ...map, [name]: { ...variable } };
+					}
+				} else {
+					throw new Error(`Unknown variable ${name}`);
+				}
+				return map;
+			}, {});
+		}
+		return {};
+	}
+
+	function resolveUseContext(name, { iteration }) {
+		const value = bindings[name];
+		if (iteration !== undefined && Array.isArray(value)) {
+			pushToLazy(name);
+			if (iteration < value.length) {
+				return value[iteration];
+			}
+			return null;
+		}
+		return getVtlCompatibleValue(value);
+	}
+
+	function fillVariablesValues(map, { iteration }) {
+		return Object.entries(map).reduce(function (sub, [name, _]) {
+			return {
+				...sub,
+				[name]: resolveUseContext(name, { iteration }),
+			};
+		}, {});
+	}
+
+	/**
+	 *
+	 * @param {*} vtlObject
+	 * @param {*} args
+	 * @returns
+	 */
+	function execute(expObject, args = {}) {
+		const { value: expression, type } = validateExpression(
+			getSafetyExpression(expObject)
+		);
+		const { iteration, logging } = args;
+		const bindingDependencies = getVariablesAndCach(expression);
+
+		function loggingDefault(_, bindings, e) {
+			if (process.env.NODE_ENV === 'development') {
+				console.warn(`VTL error :  ${expression}`, { ...args }, { bindings });
+				console.warn(e);
+			}
+		}
+
+		const vtlBindings = refreshCalculated(
+			fillVariablesValues(collecteVariables(bindingDependencies), {
+				iteration,
+			}),
+			{ rootExpression: expression, iteration }
+		);
+
+		const memoized = getMemoizedValue(expression, vtlBindings);
+		if (memoized === undefined) {
+			const result = executeExpression(
+				vtlBindings,
+				expression,
+				type,
+				features,
+				logging || loggingDefault
+			);
+			memoize(expression, vtlBindings, result);
+
+			return result;
+		}
+		return memoized;
+	}
+
+	return [execute, updateBindings];
+}
+
+export default createExecuteExpression;

package/src/use-lunatic/commons/execute-expression/create-memoizer.js

@@ -0,0 +1,42 @@
+import objectHash from 'object-hash';
+
+function createMemoizer() {
+	const expresionsMap = new Map();
+
+	function refillBindings(bindings) {
+		return Object.entries(bindings).reduce(function (map, [key, value]) {
+			const dataPointsValue = value?.result;
+			if (dataPointsValue) {
+				return { ...map, [key]: dataPointsValue };
+			}
+			return { ...map, [key]: value };
+		}, {});
+	}
+
+	function memoize(expression, bindings, value) {
+		const refill = refillBindings(bindings);
+		const hash = objectHash(refill);
+		let map = expresionsMap.get(expression);
+
+		if (!map) {
+			map = new Map();
+			expresionsMap.set(expression, map);
+		}
+		map.set(hash, value);
+	}
+
+	function getMemoizedValue(expression, bindings) {
+		let map = expresionsMap.get(expression);
+
+		if (map) {
+			const refill = refillBindings(bindings);
+			const hash = objectHash(refill);
+			return map.get(hash);
+		}
+		return undefined;
+	}
+
+	return [memoize, getMemoizedValue];
+}
+
+export default createMemoizer;