@inseefr/lunatic 0.2.0-experimental → 0.2.0-v2

package/src/components/index.scss

@@ -1,173 +1,139 @@
-* {
-	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;
-		}
-	}
-}
+* {
+	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;
+}
+
+@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;
+	}
+}
+
+.lunatic-component {
+	.mandatory:after {
+		content: ' *';
+		color: red;
+	}
+
+	.horizontal-options {
+		display: inline-block;
+		margin-right: 2em;
+	}
+
+	// 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;
+	}
+
+
+	.field {
+		width: 100%;
+		position: relative;
+	}
+
+
+	.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);
+		}
+	}
+}

package/src/components/input/index.js

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

package/src/components/input/input.js

@@ -1,11 +1,48 @@
-import React from 'react';
-import { InputDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import missingWrapper from '../missing-wrapper';
-import './input.scss';
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { createCustomizableLunaticField } from '../commons';
 
-const Input = (props) => (
-	<InputDeclarationsWrapper type="text" roleType="input" {...props} />
-);
+function checkValue(value) {
+	return value || '';
+}
 
-export default missingWrapper(React.memo(Input, areEqual));
+function Input({
+	value,
+	onChange,
+	disabled,
+	required,
+	maxLength,
+	id,
+	labelledBy,
+}) {
+	const handleChange = useCallback(
+		function (e) {
+			const value = e.target.value;
+			onChange(value);
+		},
+		[onChange]
+	);
+	return (
+		<input
+			id={id}
+			labelledbby={labelledBy}
+			autoComplete="off"
+			type="text"
+			disabled={disabled}
+			className={classnames('lunatic-input')}
+			value={checkValue(value)}
+			onChange={handleChange}
+			aria-required={required}
+			required={required}
+			maxLength={maxLength}
+		/>
+	);
+}
+
+Input.defaultProps = {
+	disabled: false,
+	required: true,
+	maxLength: Number.MAX_SAFE_INTEGER,
+};
+
+export default createCustomizableLunaticField(Input);

package/src/components/input/input.scss

@@ -1,35 +1,31 @@
-.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;
-}
+.lunatic-component {
+	.lunatic-input,
+	.lunatic-datepicker,
+	.lunatic-textarea {
+		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);
+	}
+}

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

@@ -0,0 +1,13 @@
+import Input from './input';
+import { createLunaticComponent } from '../commons';
+import './input.scss';
+
+const LunaticInput = createLunaticComponent(Input, {
+	inputId: 'lunatic-input',
+});
+
+LunaticInput.defaultProps = {
+	className: 'todo',
+};
+
+export default LunaticInput;

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

@@ -0,0 +1 @@
+export { default } from './lunatic-input-number';

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { createCustomizableLunaticField } from '../commons';
+import './input-number.scss';
+
+function InputNumber({
+	value,
+	onChange,
+	disabled,
+	readOnly,
+	labelId,
+	min,
+	max,
+	step,
+}) {
+	const valueEffective = value ?? '';
+	const handleChange = useCallback(
+		function (e) {
+			const val = e.target.value;
+			onChange(val);
+		},
+		[onChange]
+	);
+	return (
+		<input
+			className={classnames('lunatic-input', { disabled, readOnly })}
+			type="number"
+			onChange={handleChange}
+			value={valueEffective}
+			labelledby={labelId}
+			readOnly={readOnly}
+			disabled={disabled}
+			min={min}
+			max={max}
+			step={step}
+		/>
+	);
+}
+
+export default createCustomizableLunaticField(InputNumber);

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

@@ -0,0 +1,8 @@
+import InputNumber from './input-number';
+import { createLunaticComponent } from '../commons';
+
+const LunaticInputNumber = createLunaticComponent(InputNumber, {
+	inputId: 'lunatic-input-number',
+});
+
+export default LunaticInputNumber;

package/src/components/loop/block-for-loop/block-for-loop-ochestrator.js

@@ -0,0 +1,6 @@
+import { createRowOrchestrator } from '../../commons';
+import Row from './row';
+
+const BlockForLoopOrchestrator = createRowOrchestrator(Row);
+
+export default BlockForLoopOrchestrator;

package/src/components/loop/block-for-loop/block-for-loop.js

@@ -0,0 +1,93 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../../declarations';
+import BlockForLoopOrchestrator from './block-for-loop-ochestrator';
+
+function BlockForLoop({
+	declarations,
+	lines,
+	components,
+	handleChange,
+	valueMap,
+	missing,
+	shortcut,
+	features,
+	preferences,
+	management,
+	executeExpression,
+	iterations,
+	custom,
+}) {
+	const [nbRows, setNbRows] = useState(-1);
+	const [min, setMin] = useState(undefined);
+	const [max, setMax] = useState(undefined);
+
+	useEffect(
+		function () {
+			if (lines) {
+				const { min, max } = lines;
+				if (min !== undefined && max !== undefined) {
+					setMin(min);
+					setMax(max);
+				}
+			}
+		},
+		[lines]
+	);
+
+	useEffect(
+		function () {
+			if (Number.parseInt(iterations)) {
+				setNbRows(iterations);
+			} else if (min && max) {
+				setNbRows(min);
+			}
+		},
+		[min, max, iterations]
+	);
+
+	const handleChangeLoop = useCallback(
+		function (response, value, args) {
+			handleChange(response, value, { ...args, loop: true, length: nbRows });
+		},
+		[handleChange, nbRows]
+	);
+
+	if (nbRows > 0) {
+		return (
+			<>
+				<DeclarationsBeforeText declarations={declarations} custom={custom} />
+				<DeclarationsAfterText declarations={declarations} custom={custom} />
+				<BlockForLoopOrchestrator
+					components={components}
+					handleChange={handleChangeLoop}
+					nbRows={nbRows}
+					valueMap={valueMap}
+					management={management}
+					missing={missing}
+					shortcut={shortcut}
+					features={features}
+					preferences={preferences}
+					executeExpression={executeExpression}
+					custom={custom}
+				/>
+				<DeclarationsDetachable declarations={declarations} custom={custom} />
+			</>
+		);
+	}
+	return null;
+}
+
+export default BlockForLoop;
+
+// handleChange={handleChange}
+// preferences={preferences}
+// savingType={savingType}
+// management={management}
+// features={features}
+// bindings={bindings}
+// missing={missing}
+// shortcut={shortcut}

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

@@ -0,0 +1 @@
+export { default } from './block-for-loop';

package/src/components/loop/block-for-loop/row.js

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import { OrchestratedComponent } from '../../commons';
+
+function RestValue() {
+	return <></>;
+}
+
+function Row({
+	components,
+	valueMap = {},
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	rowIndex,
+	executeExpression,
+	custom,
+}) {
+	const handleChangeRow = useCallback(
+		function (response, value) {
+			handleChange(response, value, { index: rowIndex });
+		},
+		[handleChange, rowIndex]
+	);
+
+	return components.reduce(function (row, component) {
+		const { response, id } = component;
+		const idComponent = `${id}-${rowIndex + 1} `;
+
+		let value = undefined;
+		if (response) {
+			const { name } = response;
+			const valueArray = valueMap[name];
+			if (Array.isArray(valueArray)) {
+				value = valueArray[rowIndex] || '';
+			}
+		}
+
+		return [
+			...row,
+			<OrchestratedComponent
+				component={component}
+				key={idComponent}
+				handleChange={handleChangeRow}
+				features={features}
+				missing={missing}
+				shortcut={shortcut}
+				management={management}
+				value={value}
+				id={idComponent}
+				preferences={preferences}
+				iteration={rowIndex}
+				executeExpression={executeExpression}
+				custom={custom}
+			/>,
+		];
+	}, []);
+}
+
+export default Row;

package/src/components/loop/commons/index.js

@@ -0,0 +1,2 @@
+export { default as RowComponent } from './row-component';
+// export { default as createLoopOrchestrator } from './create-loop-orchestrator';