@inseefr/lunatic 0.2.0-experimental → 0.2.0-prisme

package/src/components/icon/icon.scss

@@ -1,13 +1,15 @@
-.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);
-	}
-}
+.lunatic-component {
+	.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 +1 @@
-export { default } from './component';
+export { default } from './component';

package/src/components/index.js

@@ -1,3 +1,5 @@
-export * from './components';
-export { default as Table } from './table';
-export * from '../utils/to-expose';
+import 'array-flat-polyfill';
+
+export * from './components';
+export { default as Table } from './table';
+export * from '../utils/to-expose';

package/src/components/index.scss

@@ -1,173 +1,177 @@
-* {
-	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;
+	}
+
+	.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,47 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
+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 = ({ numberAsTextfield, ...props }) => {
-	const { min, max, validators } = props;
-	return (
-		<InputDeclarationsWrapper
-			type={numberAsTextfield ? 'text' : 'number'}
-			roleType="input"
-			{...props}
-			validators={[minMaxValidator({ min, max }), ...validators]}
-			isInputNumber
-			numberAsTextfield
-		/>
-	);
-};
-
-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;
+const InputNumber = ({ numberAsTextfield, decimals, ...props }) => (
+	<InputDeclarationsWrapper
+		type={numberAsTextfield ? 'text' : 'number'}
+		roleType="input"
+		{...props}
+		decimals={decimals || 0}
+		isInputNumber
+		numberAsTextfield
+		validators={[getTypeControls]}
+		inputMode={decimals ? 'decimals' : 'numeric'}
+	/>
+);
 
 InputNumber.defaultProps = {
 	validators: [],
@@ -51,4 +27,4 @@ InputNumber.propTypes = {
 	validators: PropTypes.arrayOf(PropTypes.func),
 };
 
-export default missingWrapper(React.memo(InputNumber, areEqual));
+export default componentWrapper(React.memo(InputNumber, areEqual));

package/src/components/input/input.js

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

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 {
+	.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);
+	}
+}

package/src/components/loop/component.js

@@ -16,8 +16,6 @@ const Loop = ({
 	pagination,
 	paginatedLoop,
 	currentPage,
-	setPage,
-	flow,
 	depth: loopDepth,
 	...orchetratorProps
 }) => {
@@ -79,85 +77,12 @@ const Loop = ({
 		}
 	}, [bindings, todos, handleChange]);
 
-	/**
-	 * Handle init page
-	 */
-
-	if (
-		pagination &&
-		paginatedLoop &&
-		loopDepth > currentPage.split('.').length - 1
-	) {
-		if (flow === U.FLOW_NEXT) {
-			setPage(`${currentPage}.1#1`);
-		} else if (flow === U.FLOW_PREVIOUS) {
-			setPage(`${currentPage}.${maxPage}#${iterationNb}`);
-		}
-		return null;
-	}
-
 	const flattenComponents = U.buildLoopComponents(iterationNb)(components);
 
-	const {
-		currentRootPage,
-		currentComponentIndex,
-		currentIteration,
-		currentPageWithoutAnyIteration,
-	} = U.splitPage(currentPage, loopDepth);
-
-	if (
-		pagination &&
-		paginatedLoop &&
-		loopDepth === currentPage.split('.').length - 1
-	) {
-		// Previous at first component
-		if (currentComponentIndex < 1) {
-			setPage(`${currentRootPage}.${maxPage}#${currentIteration - 1}`);
-			return null;
-		}
-
-		// Next at last component
-		if (currentComponentIndex > maxPage) {
-			setPage(`${currentRootPage}.1#${currentIteration + 1}`);
-			return null;
-		}
-
-		// Previous at first iteration
-		if (currentIteration < 1) {
-			const splitRoot = currentRootPage.split('.');
-			if (splitRoot.length === 1) setPage(`${parseInt(splitRoot[0], 10) - 1}`);
-			else {
-				const subPagesToUpdate = splitRoot.slice().pop().split('#');
-				const newSubPage = `${parseInt(subPagesToUpdate[0], 10) - 1}#${
-					subPagesToUpdate[1]
-				}`;
-				const newPage = [
-					...splitRoot.slice(0, splitRoot.length - 1),
-					newSubPage,
-				].join('.');
-				setPage(`${newPage}`);
-			}
-			return null;
-		}
-
-		// Next at last iteration
-		if (currentIteration > iterationNb) {
-			const splitRoot = currentRootPage.split('#');
-			const newRootPage =
-				splitRoot.length === 1
-					? parseInt(splitRoot[0], 10) + 1
-					: splitRoot.slice(0, -1).join('#');
-			if (splitRoot.length === 1) setPage(`${newRootPage}`);
-			else {
-				const {
-					currentRootPage: newCurrentRootPage,
-					currentIteration: newCurrentIteration,
-				} = U.splitPage(currentRootPage, loopDepth);
-				setPage(`${newCurrentRootPage}.1#${newCurrentIteration + 1}`);
-			}
-			return null;
-		}
-	}
+	const { currentIteration, currentPageWithoutAnyIteration } = U.splitPage(
+		currentPage,
+		loopDepth
+	);
 
 	const localCache = {};
 
@@ -221,12 +146,11 @@ const Loop = ({
 							setTodos((t) => [...t, { up, rowNumber }]);
 						}}
 						bindings={loopBindings}
+						fullBindings={bindings}
 						bindingDependencies={bindingDependencies}
 						componentType={componentType}
 						pagination={pagination}
 						currentPage={currentPage}
-						setPage={setPage}
-						flow={flow}
 						conditionFilter={conditionFilter}
 						missingResponse={loopMissingResponse}
 					/>
@@ -236,19 +160,6 @@ const Loop = ({
 		[]
 	);
 
-	if (pagination && paginatedLoop && loopComponents.length === 0) {
-		if (flow === U.FLOW_NEXT) {
-			setPage(
-				`${currentRootPage}.${currentComponentIndex + 1}#${currentIteration}`
-			);
-		} else if (flow === U.FLOW_PREVIOUS) {
-			setPage(
-				`${currentRootPage}.${currentComponentIndex - 1}#${currentIteration}`
-			);
-		}
-		return null;
-	}
-
 	return (
 		<div id={`loop-${id}`} className="lunatic-loop">
 			{loopComponents}