@inseefr/lunatic 2.0.2 → 2.0.3-v2

package/src/components/dropdown/dropdown.scss

@@ -1,201 +0,0 @@
-@import 'src/components/index.scss';
-
-$inputHeight: 2em;
-$colorPrimaryDark: #2a5885;
-$colorPrimaryLight: rgb(81, 129, 184);
-$colorPrimaryMain: #4a73a4;
-$colorPrimaryFocused: $colorPrimaryLight;
-
-@mixin defaultFont {
-	font-family: Georgia, Times, 'Times New Roman', serif;
-	font-size: 16px;
-}
-
-@mixin disableSelect {
-	-moz-user-select: none; /* Firefox */
-	-ms-user-select: none; /* Internet Explorer */
-	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
-	-webkit-user-select: none; /* Chrome, Safari, and Opera */
-	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
-}
-
-.lunatic .lunatic-dropdown {
-	display: block;
-	width: 100%;
-	&:focus {
-		outline: none;
-	}
-
-	&.label-left {
-		display: flex;
-		flex-direction: row;
-	}
-
-	&.label-right {
-		display: flex;
-		flex-direction: row-reverse;
-	}
-
-	&.label-top {
-		display: flex;
-		flex-direction: column;
-	}
-
-	&.label-bottom {
-		display: flex;
-		flex-direction: column-reverse;
-	}
-
-	.lunatic-dropdown-label {
-		opacity: 1;
-	}
-
-	.lunatic-dropdown-container {
-		position: relative;
-		height: $inputHeight;
-		width: 100%;
-		z-index: 0;
-
-		&.focused {
-			z-index: 1;
-		}
-		&:focus {
-			outline: none;
-		}
-
-		.lunatic-dropdown-content {
-			background-color: lavenderblush;
-			// box-shadow: 0em 0em 0.1em 0.1em $colorPrimaryMain;
-			border-radius: 20px 20px;
-			border-color: white;
-			left: 0;
-			top: 0;
-			width: 100%;
-			height: 100%;
-			position: absolute;
-
-			&.visible {
-				border-radius: 16px 16px;
-				height: auto;
-			}
-
-			&.disabled {
-				background-color: whitesmoke;
-			}
-
-			.lunatic-dropdown-input {
-				border-radius: 10px 10px;
-				box-shadow: 0 0 0 0.2em $colorPrimaryDark;
-				input {
-					@include defaultFont();
-					@include disableSelect();
-					margin: 0px 25px 0px 12px;
-					width: calc(100% - 37px);
-					background-color: transparent;
-					border-color: transparent;
-					height: $inputHeight;
-					border: none;
-					outline: none;
-					text-align: left;
-				}
-				&.focused {
-					box-shadow: 0 0 0 0.2em $colorPrimaryMain,
-						-5px -5px 5px $colorPrimaryFocused,
-						5px -5px 5px $colorPrimaryFocused, -5px 5px 5px $colorPrimaryFocused,
-						5px 5px 5px $colorPrimaryFocused;
-				}
-			}
-
-			.lunatic-icone {
-				cursor: pointer;
-				position: absolute;
-				right: 10px;
-				top: 7px;
-				&:focus {
-					outline: none;
-				}
-			}
-
-			.lunatic-transition {
-				visibility: hidden;
-				overflow-y: hidden;
-				opacity: 0;
-
-				&:focus {
-					outline: none;
-				}
-
-				&.visible {
-					visibility: visible;
-					opacity: 1;
-					transition: opacity 1s ease-out;
-				}
-
-				.lunatic-dropdown-panel {
-					background-color: transparent;
-					margin: 0 10px 12px 10px;
-					padding-top: 3px;
-					list-style: none;
-					&:focus {
-						outline: none;
-					}
-					max-height: 100px;
-					overflow-y: auto;
-
-					&::-webkit-scrollbar {
-						width: 8px;
-					}
-					&::-webkit-scrollbar-track {
-						background-color: $colorPrimaryMain;
-					}
-					&::-webkit-scrollbar-thumb {
-						background: $colorPrimaryMain;
-					}
-					&::-webkit-scrollbar-thumb:hover {
-						background: $colorPrimaryDark;
-					}
-				}
-
-				/** options style */
-				.lunatic-dropdown-option {
-					cursor: pointer;
-					@include defaultFont();
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					color: black;
-
-					display: block;
-
-					&.lunatic-dropdown-option-active {
-						color: ivory;
-						background-color: $colorPrimaryMain;
-						.lunatic-prefix {
-							color: darkgoldenrod;
-							font-weight: bold;
-						}
-					}
-
-					&.lunatic-dropdown-option-selected {
-						color: snow;
-						background-color: rgb(136, 19, 151);
-						.lunatic-prefix {
-							color: lightgray;
-							font-weight: bold;
-						}
-
-						&.lunatic-dropdown-option-active {
-							color: khaki;
-							background-color: rgb(188, 90, 201);
-						}
-					}
-
-					.lunatic-prefix {
-						color: cornflowerblue;
-						font-weight: bold;
-					}
-				}
-			}
-		}
-	}
-}

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/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,232 +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,
-		});
-	};
-
-	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);
-								if (management) setValue(v);
-								else 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 },
-	};
-};