@inseefr/lunatic 2.3.1 → 2.4.0

package/src/components/dropdown/index.js

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

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/icon/assets/checkbox-checked.js

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const CheckboxChecked = () => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="rgb(74,118,168)"
-	>
-		<path d="M0 0h24v24H0z" fill="none" />
-		<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
-	</svg>
-);
-
-export default CheckboxChecked;

package/src/components/icon/assets/checkbox-unchecked.js

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const CheckboxUnchecked = () => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="rgb(74,118,168)"
-	>
-		<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
-		<path d="M0 0h24v24H0z" fill="none" />
-	</svg>
-);
-
-export default CheckboxUnchecked;

package/src/components/icon/assets/index.js

@@ -1,4 +0,0 @@
-export { default as RadioChecked } from './radio-checked';
-export { default as RadioUnchecked } from './radio-unchecked';
-export { default as CheckboxChecked } from './checkbox-checked';
-export { default as CheckboxUnchecked } from './checkbox-unchecked';

package/src/components/icon/assets/radio-checked.js

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const RadioChecked = () => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="rgb(74,118,168)"
-	>
-		<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
-		<path d="M0 0h24v24H0z" fill="none" />
-	</svg>
-);
-
-export default RadioChecked;

package/src/components/icon/assets/radio-unchecked.js

@@ -1,16 +0,0 @@
-import React from 'react';
-
-const RadioUnchecked = () => (
-	<svg
-		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
-		viewBox="0 0 24 24"
-		fill="rgb(74,118,168)"
-	>
-		<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
-		<path d="M0 0h24v24H0z" fill="none" />
-	</svg>
-);
-
-export default RadioUnchecked;

package/src/components/icon/component.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import {
-	CheckboxChecked,
-	CheckboxUnchecked,
-	RadioChecked,
-	RadioUnchecked,
-} from './assets';
-import './icon.scss';
-
-const Content = ({ type, checked }) => {
-	if (type === 'radio') {
-		if (checked) return <RadioChecked />;
-		return <RadioUnchecked />;
-	}
-	if (type === 'checkbox') {
-		if (checked) return <CheckboxChecked />;
-		return <CheckboxUnchecked />;
-	}
-	return null;
-};
-
-const Icon = ({ type, checked, disabled, children }) => (
-	<>
-		<span className={`list-icon-wrapper`}>
-			<span className={`list-icon ${disabled ? 'list-icon-disabled' : ''}`}>
-				<Content type={type} checked={checked} />
-			</span>
-			{children}
-		</span>
-	</>
-);
-
-export default Icon;

package/src/components/icon/icon.scss

@@ -1,13 +0,0 @@
-.list-icon-wrapper {
-	&:focus-within svg {
-		fill: var(--color-primary-dark);
-	}
-}
-
-.list-icon {
-	position: absolute;
-	margin-top: -0.1rem;
-	&.list-icon-disabled svg {
-		background-color: var(--color-disabled);
-	}
-}

package/src/components/icon/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,141 +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);
-	--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;
-}
-
-.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

@@ -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,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-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
-		/>
-	);
-};
-
-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(InputNumber, 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,35 +0,0 @@
-.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

@@ -1,105 +0,0 @@
-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,
-	depth: loopDepth,
-	...orchetratorProps
-}) => {
-	const [todo, setTodo] = 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] && iterationNb > bindings[iv].length)
-				return {
-					...acc,
-					[iv]: [
-						...bindings[iv],
-						...new Array(iterationNb - bindings[iv].length).fill(
-							U.buildEmptyValue(depth - loopDepth + 1)
-						),
-					],
-				};
-			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 todos = Object.entries(up).reduce((acc, [k, value], i) => {
-				const previousValue = bindings[k];
-				const newValue = previousValue.map((v, i) =>
-					i === rowNumber ? value : v
-				);
-				return { ...acc, [k]: newValue };
-			}, {});
-			handleChange(todos);
-			setTodo({});
-		}
-	}, [bindings, todo, handleChange]);
-
-	const flattenComponents = U.buildLoopComponents(iterationNb)(components);
-
-	const loopComponents = flattenComponents.map(
-		({ componentType, id: idC, rowNumber, conditionFilter, page, ...rest }) => {
-			const loopBindings = U.buildBindingsForDeeperComponents(rowNumber)(
-				bindings
-			);
-			if (!U.displayLoopQuestion(loopDependencies)(loopBindings)) return null;
-			const Component = lunatic[componentType];
-			if (
-				interpret(featuresWithoutMD)(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,11 +0,0 @@
-.lunatic-loop {
-	.loop-label {
-		text-align: center;
-		font-weight: bold;
-		font-size: 2em;
-	}
-	.loop-component {
-		margin-top: 0.4em;
-		margin-bottom: 0.4em;
-	}
-}