@inseefr/lunatic 0.1.6 → 0.1.8-experimental

package/src/components/index.scss

@@ -0,0 +1,173 @@
+* {
+	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);
+	--color-prefix: cornflowerblue;
+	--color-dropdown-active: rgba(0, 0, 0, 0.04);
+	--color-dropdown-selected: rgba(0, 0, 0, 0.08);
+
+	--dropdown-transition-time: 0.5s;
+}
+
+.mandatory:after {
+	content: ' *';
+	color: red;
+}
+
+.horizontal-options {
+	display: inline-block;
+	margin-right: 2em;
+}
+
+@mixin vertical-placement($reverse: false) {
+	display: flex;
+	flex-direction: if($reverse, column-reverse, column);
+}
+
+@mixin horizontal-placement($reverse: false) {
+	display: flex;
+	flex-direction: if($reverse, row-reverse, row);
+	align-items: baseline;
+
+	:first-child {
+		margin-right: 1rem;
+	}
+}
+
+// Label & Legend
+label,
+legend,
+.subsequence-lunatic,
+.lunatic-dropdown-label,
+.lunatic-dropdown-label focused {
+	color: var(--color-primary-dark);
+	background-color: var(--color-primary-contrast-text);
+	border: 0;
+	padding: 0;
+	font-size: 0.75rem;
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+	line-height: 0.75rem;
+	font-weight: bold;
+	margin-bottom: 0.375rem;
+}
+
+/* refactor proposition */
+.lunatic-component {
+	width: fit-content;
+}
+.lunatic-component-container {
+	display: flex;
+
+	&.label-left-ex {
+		flex-direction: row;
+		align-items: baseline;
+		.lunatic-label {
+			margin-right: 1em;
+		}
+	}
+	&.label-right-ex {
+		flex-direction: row-reverse;
+		align-items: baseline;
+		.lunatic-label {
+			margin-left: 1em;
+		}
+	}
+	&.label-top-ex {
+		flex-direction: column;
+	}
+	&.label-bottom-ex {
+		flex-direction: column-reverse;
+	}
+}
+
+/******/
+
+.label-top {
+	@include vertical-placement();
+}
+.label-bottom {
+	@include vertical-placement(true);
+}
+.label-right {
+	justify-content: flex-end;
+	@include horizontal-placement(true);
+}
+.label-left {
+	@include horizontal-placement();
+}
+
+.field-container {
+	display: flex;
+}
+
+.modality-label p {
+	display: inline;
+}
+
+.tooltip {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.field-with-tooltip {
+	width: calc(100% - 25px);
+	position: relative;
+}
+
+.field {
+	width: 100%;
+	position: relative;
+}
+
+.field,
+.field-with-tooltip {
+	display: flex;
+	.unit {
+		margin: auto 0;
+		color: var(--color-primary-dark);
+		font-weight: bold;
+	}
+}
+
+.link-md .field-md {
+	border-bottom: dashed 0.1em var(--color-primary-dark);
+	&:hover {
+		cursor: help;
+		color: var(--color-primary-contrast-text);
+		background-color: var(--color-primary-dark);
+	}
+}
+
+.link-md .tooltip-content {
+	min-width: 15em;
+	max-width: 25em;
+	background: var(--color-primary-dark);
+	color: var(--color-primary-contrast-text);
+	padding: 0.5em;
+	border-radius: 6px;
+	font-size: 1em;
+	&.place-bottom {
+		&::before {
+			border-bottom: 10px solid var(--color-primary-dark);
+		}
+		&::after {
+			content: none;
+		}
+	}
+}

package/src/components/input/index.js

@@ -0,0 +1,2 @@
+export { default as Input } from './input';
+export { default as InputNumber } from './input-number';

package/src/components/input/input-number.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import missingWrapper from '../missing-wrapper';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import './input.scss';
+
+const InputNumber = ({ numberAsTextfield, ...props }) => {
+	const { min, max, validators } = props;
+	return (
+		<InputDeclarationsWrapper
+			type={numberAsTextfield ? 'text' : 'number'}
+			roleType="input"
+			{...props}
+			validators={[minMaxValidator({ min, max }), ...validators]}
+			isInputNumber
+			numberAsTextfield
+		/>
+	);
+};
+
+const minMaxValidator =
+	({ min, max }) =>
+	(value) => {
+		if (!value) {
+			return undefined;
+		}
+		const valueNumber = Number(value);
+		if (!min && isDef(max) && valueNumber > max)
+			return <span>{`La valeur doit être inférieure à ${max}`}</span>;
+		else if (isDef(min) && !max && valueNumber < min)
+			return <span>{`La valeur doit être supérieure à ${min}`}</span>;
+		else if (
+			isDef(min) &&
+			isDef(max) &&
+			(valueNumber < min || valueNumber > max)
+		)
+			return (
+				<span>{`La valeur doit être comprise entre ${min} et ${max}`}</span>
+			);
+		return undefined;
+	};
+
+const isDef = (number) => number || number === 0;
+
+InputNumber.defaultProps = {
+	validators: [],
+};
+
+InputNumber.propTypes = {
+	validators: PropTypes.arrayOf(PropTypes.func),
+};
+
+export default React.memo(missingWrapper(InputNumber), areEqual);

package/src/components/input/input.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import missingWrapper from '../missing-wrapper';
+import './input.scss';
+
+const Input = (props) => (
+	<InputDeclarationsWrapper type="text" roleType="input" {...props} />
+);
+
+export default React.memo(missingWrapper(Input), areEqual);

package/src/components/input/input.scss

@@ -0,0 +1,35 @@
+.input-lunatic,
+.datepicker-lunatic,
+.textarea-lunatic {
+	font: inherit;
+	border: 0;
+	border-bottom: 0.125rem double rgba(0, 0, 0, 0.42);
+	margin: 0;
+	padding: 0.375rem 0 0.375rem 0.4375rem;
+	display: block;
+	min-width: 0;
+	box-sizing: content-box;
+	background: none;
+	&:focus {
+		outline: none;
+		border-bottom: 0.125rem solid var(--color-primary-main);
+	}
+	&:hover {
+		border-bottom: 0.125rem solid black;
+	}
+	&:read-only {
+		background-color: var(--color-disabled);
+	}
+}
+
+.warning {
+	box-sizing: border-box;
+	border: solid 2px var(--color-error);
+	background-color: var(--color-error);
+}
+
+.lunatic-input-number-errors .error {
+	color: var(--color-error);
+	font-size: 80%;
+	margin-top: 0.3125rem;
+}

package/src/components/loop/component.js

@@ -0,0 +1,258 @@
+import React, { useState, useEffect } from 'react';
+import * as lunatic from '../components';
+import { interpret } from '../../utils/to-expose';
+import * as U from '../../utils/lib';
+import './loop.scss';
+
+const Loop = ({
+	id,
+	label,
+	iterations,
+	components,
+	bindings,
+	handleChange,
+	loopDependencies,
+	maxPage,
+	pagination,
+	paginatedLoop,
+	currentPage,
+	setPage,
+	flow,
+	depth: loopDepth,
+	...orchetratorProps
+}) => {
+	const [todos, setTodos] = useState([]);
+	const vectorialBindings = U.buildVectorialBindings(bindings);
+	const { features } = orchetratorProps;
+	const featuresWithoutMD = features.filter((f) => f !== 'MD');
+	const iterationNb =
+		parseInt(interpret(featuresWithoutMD)(vectorialBindings)(iterations), 10) ||
+		0;
+	const involvedVariables = U.getInvolvedVariables(components);
+
+	/**
+	 * Handle the increase in the number of iterations
+	 * Assume we only want to update if iterationNb changes
+	 */
+	useEffect(() => {
+		const toUpdate = involvedVariables.reduce((acc, { name: iv, depth }) => {
+			if (bindings[iv]) {
+				if (iterationNb <= bindings[iv].length)
+					return {
+						...acc,
+						[iv]: [...bindings[iv].splice(0, iterationNb)],
+					};
+				return {
+					...acc,
+					[iv]: [
+						...bindings[iv],
+						...new Array(iterationNb - bindings[iv].length).fill(
+							U.buildEmptyValue(depth)
+						),
+					],
+				};
+			}
+			return acc;
+		}, {});
+		if (Object.keys(toUpdate).length !== 0) handleChange(toUpdate);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [iterationNb]);
+
+	useEffect(() => {
+		if (todos.length !== 0) {
+			const todosObj = todos.reduce((acc, { up, rowNumber }) => {
+				const entries = Object.entries(up);
+				if (entries.length === 0) return acc;
+				const toUpdate = entries.reduce((_, [key, value]) => {
+					const previousValue = bindings[key];
+					const newValue = previousValue.map((v, i) =>
+						i === rowNumber ? value : v
+					);
+					return { ..._, [key]: newValue };
+				}, {});
+
+				return { ...acc, ...toUpdate };
+			}, {});
+			handleChange(todosObj);
+			setTodos([]);
+		}
+	}, [bindings, todos, handleChange]);
+
+	/**
+	 * Handle init page
+	 */
+
+	if (
+		pagination &&
+		paginatedLoop &&
+		loopDepth > currentPage.split('.').length - 1
+	) {
+		if (flow === U.FLOW_NEXT) {
+			setPage(`${currentPage}.1#1`);
+		} else if (flow === U.FLOW_PREVIOUS) {
+			setPage(`${currentPage}.${maxPage}#${iterationNb}`);
+		}
+		return null;
+	}
+
+	const flattenComponents = U.buildLoopComponents(iterationNb)(components);
+
+	const {
+		currentRootPage,
+		currentComponentIndex,
+		currentIteration,
+		currentPageWithoutAnyIteration,
+	} = U.splitPage(currentPage, loopDepth);
+
+	if (
+		pagination &&
+		paginatedLoop &&
+		loopDepth === currentPage.split('.').length - 1
+	) {
+		// Previous at first component
+		if (currentComponentIndex < 1) {
+			setPage(`${currentRootPage}.${maxPage}#${currentIteration - 1}`);
+			return null;
+		}
+
+		// Next at last component
+		if (currentComponentIndex > maxPage) {
+			setPage(`${currentRootPage}.1#${currentIteration + 1}`);
+			return null;
+		}
+
+		// Previous at first iteration
+		if (currentIteration < 1) {
+			const splitRoot = currentRootPage.split('.');
+			if (splitRoot.length === 1) setPage(`${parseInt(splitRoot[0], 10) - 1}`);
+			else {
+				const subPagesToUpdate = splitRoot.slice().pop().split('#');
+				const newSubPage = `${parseInt(subPagesToUpdate[0], 10) - 1}#${
+					subPagesToUpdate[1]
+				}`;
+				const newPage = [
+					...splitRoot.slice(0, splitRoot.length - 1),
+					newSubPage,
+				].join('.');
+				setPage(`${newPage}`);
+			}
+			return null;
+		}
+
+		// Next at last iteration
+		if (currentIteration > iterationNb) {
+			const splitRoot = currentRootPage.split('#');
+			const newRootPage =
+				splitRoot.length === 1
+					? parseInt(splitRoot[0], 10) + 1
+					: splitRoot.slice(0, -1).join('#');
+			if (splitRoot.length === 1) setPage(`${newRootPage}`);
+			else {
+				const {
+					currentRootPage: newCurrentRootPage,
+					currentIteration: newCurrentIteration,
+				} = U.splitPage(currentRootPage, loopDepth);
+				setPage(`${newCurrentRootPage}.1#${newCurrentIteration + 1}`);
+			}
+			return null;
+		}
+	}
+
+	const localCache = {};
+
+	const loopComponents = flattenComponents.reduce(
+		(
+			acc,
+			{
+				componentType,
+				id: idC,
+				rowNumber,
+				conditionFilter,
+				page,
+				bindingDependencies = [],
+				missingResponse,
+				...rest
+			}
+		) => {
+			const loopVars = bindingDependencies.map((b) => {
+				if (bindings[b]) return [b, bindings[b]];
+				return [b, null];
+			});
+			const loopBindings = U.buildLoopBindings(rowNumber)(loopVars);
+
+			const loopMissingResponse =
+				U.buildLoopMissingResponse(rowNumber)(missingResponse);
+
+			if (!U.displayLoopQuestion(bindingDependencies)(loopBindings)) return acc;
+			const Component = lunatic[componentType];
+
+			const { bindingDependencies: filterDependencies = [], value = '' } =
+				conditionFilter;
+
+			const filterVars = filterDependencies.map((b) => {
+				if (bindings[b]) return [b, bindings[b]];
+				return [b, null];
+			});
+			const filterBindings = U.buildLoopBindings(rowNumber)(filterVars);
+			const set = () => {
+				const v = interpret(featuresWithoutMD)(filterBindings)(value);
+				localCache[`${value}-row-${rowNumber}`] = v;
+				return v;
+			};
+
+			const filterResult = localCache[value] || set();
+
+			if (
+				!filterResult ||
+				(pagination &&
+					(currentPageWithoutAnyIteration !== page ||
+						(paginatedLoop && rowNumber + 1 !== currentIteration)))
+			)
+				return acc;
+			return [
+				...acc,
+				<div key={`${idC}-loop-${rowNumber}`} className="loop-component">
+					<Component
+						{...orchetratorProps}
+						{...rest}
+						id={`${idC}-loop-${rowNumber}`}
+						handleChange={(up) => {
+							setTodos((t) => [...t, { up, rowNumber }]);
+						}}
+						bindings={loopBindings}
+						bindingDependencies={bindingDependencies}
+						componentType={componentType}
+						pagination={pagination}
+						currentPage={currentPage}
+						setPage={setPage}
+						flow={flow}
+						conditionFilter={conditionFilter}
+						missingResponse={loopMissingResponse}
+					/>
+				</div>,
+			];
+		},
+		[]
+	);
+
+	if (pagination && paginatedLoop && loopComponents.length === 0) {
+		if (flow === U.FLOW_NEXT) {
+			setPage(
+				`${currentRootPage}.${currentComponentIndex + 1}#${currentIteration}`
+			);
+		} else if (flow === U.FLOW_PREVIOUS) {
+			setPage(
+				`${currentRootPage}.${currentComponentIndex - 1}#${currentIteration}`
+			);
+		}
+		return null;
+	}
+
+	return (
+		<div id={`loop-${id}`} className="lunatic-loop">
+			{loopComponents}
+		</div>
+	);
+};
+
+export default React.memo(Loop, U.areEqual);

package/src/components/loop/index.js

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

package/src/components/loop/loop.scss

@@ -0,0 +1,11 @@
+.lunatic-loop {
+	.loop-label {
+		text-align: center;
+		font-weight: bold;
+		font-size: 2em;
+	}
+	.loop-component {
+		margin-top: 0.4em;
+		margin-bottom: 0.4em;
+	}
+}

package/src/components/loop/wrapper.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Loop from './component';
+import BlockForLoop from '../loop-constructor/block';
+
+const LoopWrapper = (props) => {
+	const { iterations } = props;
+	if (iterations) {
+		return <Loop {...props} />;
+	}
+	return <BlockForLoop {...props} />;
+};
+
+// TODO: need missingWrapper?
+
+export default LoopWrapper;

package/src/components/loop-constructor/block/block.scss

@@ -0,0 +1,8 @@
+.block-for-loop {
+	margin-top: 1em;
+	margin-bottom: 1em;
+	.block-component {
+		margin-top: 0.4em;
+		margin-bottom: 0.4em;
+	}
+}

package/src/components/loop-constructor/block/component.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import missingWrapper from '../../missing-wrapper';
+import LoopConstructorWrapper from '../wrapper';
+import * as U from '../../../utils/lib';
+import './block.scss';
+
+const BlockForLoop = (props) => <LoopConstructorWrapper {...props} />;
+
+export default React.memo(missingWrapper(BlockForLoop), U.areEqual);

package/src/components/loop-constructor/block/index.js

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

package/src/components/loop-constructor/index.js

@@ -0,0 +1 @@
+export { default as RosterForLoop } from './roster';

package/src/components/loop-constructor/roster/component.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import missingWrapper from '../../missing-wrapper';
+import LoopConstructorWrapper from '../wrapper';
+import * as U from '../../../utils/lib';
+
+const RosterForLoop = (props) => <LoopConstructorWrapper {...props} />;
+
+export default React.memo(missingWrapper(RosterForLoop), U.areEqual);

package/src/components/loop-constructor/roster/index.js

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