@inseefr/lunatic 2.0.1 → 2.0.2-v2

package/src/components/filter-description/component.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { interpret } from '../../utils/to-expose';
-import { buildStyleObject } from '../../utils/lib';
-
-const FilterDescription = ({
-	id,
-	label,
-	filterDescription,
-	features,
-	bindings,
-	style,
-}) =>
-	filterDescription ? (
-		<div
-			id={`filter-description-${id}`}
-			aria-label={`filter-description`}
-			className="filter-description-lunatic"
-			style={buildStyleObject(style)}
-		>
-			{interpret(features)(bindings)(label)}
-		</div>
-	) : null;
-
-FilterDescription.defaultProps = {
-	filterDescription: false,
-	features: [],
-	bindings: {},
-	style: {},
-};
-
-FilterDescription.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	filterDescription: PropTypes.bool,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	style: PropTypes.object,
-};
-
-export default FilterDescription;

package/src/components/filter-description/index.js

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

package/src/components/index.js

@@ -1,4 +0,0 @@
-export * from './components';
-// Avoid circular deps
-export { default as Table } from './table';
-export * from '../utils/to-expose';

package/src/components/index.scss

@@ -1,76 +0,0 @@
-// Define colors
-$main_color: #e80a4d;
-$second_color: #e07898;
-$progress_back: #d3d3d3;
-$background-warning: rgb(245, 12, 12);
-$disabled: rgb(235, 235, 228);
-
-* {
-	box-sizing: border-box;
-}
-
-.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,
-.lunatic-dropdown-label {
-	margin-bottom: 0.5em;
-}
-
-.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;
-}
-
-.tooltip {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-
-.field-with-tooltip {
-	// display: flex;
-	width: calc(100% - 25px);
-	position: relative;
-}
-
-.field {
-	width: 100%;
-	// display: flex;
-	position: relative;
-}

package/src/components/input/index.js

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

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

@@ -1,238 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../constants';
-import { interpret } from '../../utils/to-expose';
-import './input.scss';
-
-const InputNumber = ({
-	id,
-	label,
-	preferences,
-	response,
-	min,
-	max,
-	decimals,
-	placeholder,
-	handleChange,
-	readOnly,
-	disabled,
-	autoComplete,
-	focused,
-	style,
-	unit,
-	labelPosition,
-	unitPosition,
-	declarations,
-	features,
-	bindings,
-	management,
-	mandatory,
-	validators,
-}) => {
-	const inputRef = useRef();
-
-	const [value, setValue] = useState(() =>
-		U.getResponseByPreference(preferences)(response)
-	);
-
-	const [messagesError, setMessagesError] = useState(
-		[minMaxValidator({ min, max }), ...validators]
-			.map((v) => v(value))
-			.filter((m) => m !== undefined)
-	);
-
-	// Assume we only want to handle enable external updates
-	// Don't need to check all value changes
-	useEffect(() => {
-		if (U.getResponseByPreference(preferences)(response) !== value)
-			setValue(U.getResponseByPreference(preferences)(response));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [response, preferences]);
-
-	const handleChangeOnBlur = () => {
-		handleChange({
-			[U.getResponseName(response)]: value,
-		});
-		if (management && value === null) {
-			setValue(
-				U.getResponseByPreference(preferences)(
-					U.buildLocalResponse(response, value)
-				)
-			);
-		}
-	};
-
-	const validate = (v) => {
-		setMessagesError(
-			[minMaxValidator({ min, max }), ...validators]
-				.map((f) => f(v))
-				.filter((m) => m !== undefined)
-		);
-	};
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	useEffect(() => {
-		setMessagesError(
-			[minMaxValidator({ min, max }), ...validators]
-				.map((v) => v(value))
-				.filter((m) => m !== undefined)
-		);
-	}, [value, min, max, validators]);
-
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				<label
-					htmlFor={`input-${id}`}
-					id={`input-label-${id}`}
-					className={`${mandatory ? 'mandatory' : ''}`}
-				>
-					{interpret(features)(bindings)(label)}{' '}
-					<span className="unit">
-						{unit && ['DEFAULT', 'BEFORE'].includes(unitPosition)
-							? `(${unit})`
-							: ''}
-					</span>
-				</label>
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-					features={features}
-					bindings={bindings}
-				/>
-				<div className="field-container">
-					<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
-						<input
-							type="number"
-							id={`input-${id}`}
-							ref={inputRef}
-							aria-labelledby={`input-label-${id}`}
-							value={value || ''}
-							min={min}
-							max={max}
-							step={decimals ? `${Math.pow(10, -decimals)}` : '0'}
-							placeholder={placeholder}
-							className={`input-lunatic ${
-								messagesError.length > 0 ? 'warning' : ''
-							}`}
-							style={U.buildStyleObject(style)}
-							readOnly={readOnly}
-							disabled={disabled}
-							autoComplete={autoComplete ? 'on' : 'off'}
-							required={mandatory}
-							aria-required={mandatory}
-							onChange={({ target: { value: v } }) => {
-								validate(v);
-								setValue(v === '' ? null : v);
-							}}
-							onBlur={handleChangeOnBlur}
-						/>
-						{unitPosition === 'AFTER' && <span className="unit">{unit}</span>}
-					</div>
-					{management && (
-						<div className="tooltip">
-							<TooltipResponse
-								id={id}
-								response={U.buildLocalResponse(response, value)}
-							/>
-						</div>
-					)}
-				</div>
-				<div className="lunatic-input-number-errors">
-					{messagesError.map((m, i) => (
-						<div key={i} className="error">
-							{m}
-						</div>
-					))}
-				</div>
-			</div>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-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 = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	min: undefined,
-	max: undefined,
-	decimals: 0,
-	placeholder: '',
-	readOnly: false,
-	disabled: false,
-	autoComplete: false,
-	focused: false,
-	declarations: [],
-	features: [],
-	bindings: {},
-	labelPosition: 'DEFAULT',
-	unitPosition: 'DEFAULT',
-	mandatory: false,
-	management: false,
-	style: {},
-	validators: [],
-};
-
-InputNumber.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	min: PropTypes.number,
-	max: PropTypes.number,
-	decimals: PropTypes.number,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	readOnly: PropTypes.bool,
-	disabled: PropTypes.bool,
-	autoComplete: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	unitPosition: PropTypes.oneOf(['DEFAULT', 'BEFORE', 'AFTER']),
-	mandatory: PropTypes.bool,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-	validators: PropTypes.arrayOf(PropTypes.func),
-};
-
-export default React.memo(InputNumber, U.areEqual);

package/src/components/input/input.js

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

package/src/components/input/input.scss

@@ -1,27 +0,0 @@
-@import 'src/components/index.scss';
-
-.input-lunatic {
-	box-sizing: border-box;
-	border: solid 2px $main_color;
-	border-radius: 10px;
-	padding: 5px;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 10px $main_color;
-	}
-	&:read-only {
-		background-color: $disabled;
-	}
-}
-
-.warning {
-	box-sizing: border-box;
-	border: solid 2px $background-warning;
-	background-color: $background-warning;
-}
-
-.lunatic-input-number-errors {
-	.error {
-		color: $background-warning;
-	}
-}

package/src/components/loop/build-components.js

@@ -1,33 +0,0 @@
-export const buildLoopComponents = (iterations) => (components) => {
-	const toFlat = [...Array(iterations).keys()].map((rowNumber) =>
-		buildFlatten(rowNumber)(components).map((c) => ({ ...c, rowNumber }))
-	);
-	return toFlat.flat();
-};
-
-const buildFlatten = (i) => (parentComponents) =>
-	parentComponents.map((component) => {
-		const { response, responses, components } = component;
-		if (response) return buildFlattenResponse(i)(component);
-		else if (responses)
-			return {
-				...component,
-				responses: responses.map((r) => buildFlattenResponse(i)(r)),
-			};
-		else if (components)
-			return { ...component, components: buildFlatten(i)(components) };
-		else return component;
-	});
-
-const buildFlattenResponse = (i) => (component) => {
-	const { response, ...other } = component;
-	const { name, values } = response;
-	const newValues = Object.entries(values).reduce(
-		(acc, [key, value]) => ({ ...acc, [key]: value ? value[i] : null }),
-		{}
-	);
-	return {
-		...other,
-		response: { name, values: newValues },
-	};
-};

package/src/components/loop/component.js

@@ -1,94 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import * as lunatic from '../components';
-import { buildLoopComponents } from './build-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,
-	...orchetratorProps
-}) => {
-	const [todo, setTodo] = useState({});
-	const vectorialBindings = U.buildVectorialBindings(bindings);
-	const { features } = orchetratorProps;
-	const iterationNb = interpret(features)(vectorialBindings)(iterations);
-	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] && iterationNb > bindings[iv].length)
-				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 (Object.keys(todo).length !== 0) {
-			const { up, rowNumber } = todo;
-			const [key, value] = Object.entries(up)[0];
-			const previousValue = bindings[key];
-			const newValue = previousValue.map((v, i) =>
-				i === rowNumber ? value : v
-			);
-			handleChange({ [key]: newValue });
-			setTodo({});
-		}
-	}, [bindings, todo, handleChange]);
-
-	const flattenComponents = buildLoopComponents(iterationNb)(components);
-
-	if (!U.displayLoop(loopDependencies)(bindings)) return null;
-
-	const loopComponents = flattenComponents.map(
-		({ componentType, id: idC, rowNumber, conditionFilter, ...rest }) => {
-			const loopBindings = U.buildBindingsForDeeperComponents(rowNumber)(
-				bindings
-			);
-			if (!U.displayLoopQuestion(loopDependencies)(loopBindings)) return null;
-			const Component = lunatic[componentType];
-			if (interpret(features)(loopBindings, true)(conditionFilter) !== 'normal')
-				return null;
-			return (
-				<div key={`${idC}-loop-${rowNumber}`} className="loop-component">
-					<Component
-						{...orchetratorProps}
-						{...rest}
-						id={`${idC}-loop-${rowNumber}`}
-						handleChange={(up) => setTodo({ up, rowNumber })}
-						bindings={loopBindings}
-						componentType={componentType}
-					/>
-				</div>
-			);
-		}
-	);
-
-	return (
-		<div id={`loop-${id}`} className="lunatic-loop">
-			{loopComponents}
-		</div>
-	);
-};
-
-export default React.memo(Loop, U.areEqual);

package/src/components/loop/index.js

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

package/src/components/loop/loop.scss

@@ -1,17 +0,0 @@
-@import 'src/components/index.scss';
-
-.lunatic-loop {
-	margin-top: 1em;
-	margin-bottom: 1em;
-	border: solid 2px $main_color;
-	padding: 2em;
-	.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

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

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

@@ -1,10 +0,0 @@
-@import 'src/components/index.scss';
-
-.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

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

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

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

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

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

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

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

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

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