@inseefr/lunatic 0.2.61 → 0.3.1-experimental

package/src/components/index.scss

@@ -1,23 +1,26 @@
-// 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;
-	font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
-}
+	--color-primary-dark: #2a5885;
+	--color-primary-light: #5181b8;
+	--color-primary-main: #4a73a4;
+	--color-primary-contrast-text: #ffffff;
 
-.required:after {
-	content: ' *';
-	color: red;
-}
+	--color-secondary-dark: #14202d;
+	--color-secondary-light: #f7f8fa;
+	--color-secondary-main: #1a293b;
+	--color-secondary-contrast-text: #ffffff;
 
-.horizontal-options {
-	display: inline-block;
-	margin-right: 2em;
+	--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;
 }
 
 @mixin vertical-placement($reverse: false) {
@@ -29,47 +32,146 @@ $disabled: rgb(235, 235, 228);
 	display: flex;
 	flex-direction: if($reverse, row-reverse, row);
 	align-items: baseline;
+
 	:first-child {
 		margin-right: 1rem;
 	}
 }
 
-label {
-	margin-bottom: 0.5em;
-}
+.lunatic-component {
+	.mandatory:after {
+		content: ' *';
+		color: red;
+	}
 
-.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();
-}
+	.horizontal-options {
+		display: inline-block;
+		margin-right: 2em;
+	}
 
-.field-container {
-	display: flex;
-}
+	// 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;
+	}
 
-.tooltip {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
+	/* refactor proposition */
 
-.field-with-tooltip {
-	display: flex;
-	flex-direction: column;
-}
+	// .lunatic-component {
+	// 	width: fit-content;
+	// }
 
-.field {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
+	.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

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

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

@@ -1,171 +1,28 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React 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 '../../utils/constants';
+import componentWrapper from '../component-wrapper';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import { getTypeControls } from '../component-wrapper/controls/validators';
 import './input.scss';
 
-const InputNumber = ({
-	id,
-	label,
-	preferences,
-	response,
-	min,
-	max,
-	decimals,
-	placeholder,
-	handleChange,
-	readOnly,
-	autoComplete,
-	focused,
-	style,
-	unit,
-	labelPosition,
-	declarations,
-	tooltip,
-	required,
-	validators,
-}) => {
-	const [messagesError, setMessagesError] = useState(
-		[minMaxValidator({ min, max }), ...validators]
-			.map(v => v(U.getResponseByPreference(preferences)(response)))
-			.filter(m => m !== undefined)
-	);
-	const inputRef = useRef();
-
-	const validate = value => {
-		setMessagesError(
-			[minMaxValidator({ min, max }), ...validators]
-				.map(v => v(value))
-				.filter(m => m !== undefined)
-		);
-	};
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				<label
-					htmlFor={`input-${id}`}
-					id={`input-label-${id}`}
-					className={`${required ? 'required' : ''}`}
-				>{`${label} ${unit ? `(${unit})` : ''}`}</label>
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-				/>
-				<div className="field-container">
-					<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-						<input
-							type="number"
-							id={`input-${id}`}
-							ref={inputRef}
-							aria-labelledby={`input-label-${id}`}
-							value={U.getResponseByPreference(preferences)(response)}
-							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}
-							autoComplete={autoComplete ? 'on' : 'off'}
-							required={required}
-							aria-required={required}
-							onChange={e => {
-								const {
-									target: { value },
-								} = e;
-								validate(value);
-								handleChange({
-									[U.getResponseName(response)]:
-										value || value === 0 ? Number(value) : '',
-								});
-							}}
-						/>
-					</div>
-					{tooltip && (
-						<div className="tooltip">
-							<TooltipResponse id={id} response={response} />
-						</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} />
-		</React.Fragment>
-	);
-};
-
-const minMaxValidator = ({ min, max }) => value => {
-	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;
+const InputNumber = ({ numberAsTextfield, ...props }) => (
+	<InputDeclarationsWrapper
+		type={numberAsTextfield ? 'text' : 'number'}
+		roleType="input"
+		{...props}
+		isInputNumber
+		numberAsTextfield
+		validators={[getTypeControls]}
+	/>
+);
 
 InputNumber.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	min: Number.MIN_SAFE_INTEGER,
-	max: Number.MAX_SAFE_INTEGER,
-	decimals: 0,
-	placeholder: '',
-	readOnly: false,
-	autoComplete: false,
-	focused: false,
-	declarations: [],
-	labelPosition: 'DEFAULT',
-	required: false,
-	tooltip: 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,
-	autoComplete: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	required: PropTypes.bool,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
 	validators: PropTypes.arrayOf(PropTypes.func),
 };
 
-export default InputNumber;
+export default componentWrapper(React.memo(InputNumber, areEqual));

package/src/components/input/input.js

@@ -1,118 +1,11 @@
-import React, { 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 '../../utils/constants';
+import React from 'react';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import componentWrapper from '../component-wrapper';
 import './input.scss';
 
-const Input = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	readOnly,
-	autoComplete,
-	labelPosition,
-	required,
-	declarations,
-	focused,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
+const Input = (props) => (
+	<InputDeclarationsWrapper type="text" roleType="input" {...props} />
+);
 
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				{label && (
-					<label
-						htmlFor={`input-${id}`}
-						id={`input-label-${id}`}
-						className={`${required ? 'required' : ''}`}
-					>
-						{label}
-					</label>
-				)}
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-				/>
-				<div className="field-container">
-					<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-						<input
-							type="text"
-							id={`input-${id}`}
-							ref={inputRef}
-							value={U.getResponseByPreference(preferences)(response)}
-							placeholder={placeholder}
-							autoComplete={autoComplete ? 'on' : 'off'}
-							className="input-lunatic"
-							style={U.buildStyleObject(style)}
-							readOnly={readOnly}
-							required={required}
-							aria-required={required}
-							onChange={e =>
-								handleChange({
-									[U.getResponseName(response)]: e.target.value,
-								})
-							}
-						/>
-					</div>
-					{tooltip && (
-						<div className="tooltip">
-							<TooltipResponse id={id} response={response} />
-						</div>
-					)}
-				</div>
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
-	);
-};
-
-Input.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	placeholder: '',
-	readOnly: false,
-	autoComplete: false,
-	labelPosition: 'DEFAULT',
-	required: false,
-	focused: false,
-	declarations: [],
-	tooltip: false,
-	style: {},
-};
-
-Input.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	readOnly: PropTypes.bool,
-	autoComplete: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	required: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Input;
+export default componentWrapper(React.memo(Input, areEqual));

package/src/components/input/input.scss

@@ -1,27 +1,31 @@
-@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;
+.lunatic-component {
+	.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 $background-warning;
-	background-color: $background-warning;
-}
 
-.lunatic-input-number-errors {
-	.error {
-		color: $background-warning;
+	.warning {
+		box-sizing: border-box;
+		border: solid 2px var(--color-error);
+		background-color: var(--color-error);
 	}
 }