@inseefr/lunatic 0.1.0-hackathon → 0.1.0-prisme

package/src/components/icon/component.js

@@ -1,33 +1,33 @@
-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;
+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/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

@@ -67,9 +67,11 @@
 	}
 
 	/* refactor proposition */
-	.lunatic-component {
-		width: fit-content;
-	}
+
+	// .lunatic-component {
+	// 	width: fit-content;
+	// }
+
 	.lunatic-component-container {
 		display: flex;
 

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,22 @@
 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]}
+	/>
+);
 
 InputNumber.defaultProps = {
 	validators: [],
@@ -51,4 +26,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

@@ -28,10 +28,4 @@
 		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

@@ -146,6 +146,7 @@ const Loop = ({
 							setTodos((t) => [...t, { up, rowNumber }]);
 						}}
 						bindings={loopBindings}
+						fullBindings={bindings}
 						bindingDependencies={bindingDependencies}
 						componentType={componentType}
 						pagination={pagination}

package/src/components/loop/index.js

@@ -1 +1 @@
-export { default } from './wrapper';
+export { default } from './wrapper';

package/src/components/loop/wrapper.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import Loop from './component';
-import BlockForLoop from '../loop-constructor/block';
-
-const LoopWrapper = (props) => {
-	const { iterations } = props;
-	if (iterations) {
-		return <Loop {...props} />;
-	}
-	return <BlockForLoop {...props} />;
-};
-
-// TODO: need missingWrapper?
-
-export default LoopWrapper;
+import React from 'react';
+import Loop from './component';
+import BlockForLoop from '../loop-constructor/block';
+
+const LoopWrapper = (props) => {
+	const { iterations } = props;
+	if (iterations) {
+		return <Loop {...props} />;
+	}
+	return <BlockForLoop {...props} />;
+};
+
+// TODO: need componentWrapper?
+
+export default LoopWrapper;

package/src/components/loop-constructor/block/component.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import missingWrapper from '../../missing-wrapper';
+import componentWrapper from '../../component-wrapper';
 import LoopConstructorWrapper from '../wrapper';
 import * as U from '../../../utils/lib';
 import './block.scss';
 
 const BlockForLoop = (props) => <LoopConstructorWrapper {...props} />;
 
-export default missingWrapper(React.memo(BlockForLoop), U.areEqual);
+export default componentWrapper(React.memo(BlockForLoop), U.areEqual);

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

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

package/src/components/loop-constructor/index.js

@@ -1 +1 @@
-export { default as RosterForLoop } from './roster';
+export { default as RosterForLoop } from './roster';

package/src/components/loop-constructor/roster/component.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import missingWrapper from '../../missing-wrapper';
+import componentWrapper from '../../component-wrapper';
 import LoopConstructorWrapper from '../wrapper';
 import * as U from '../../../utils/lib';
 
 const RosterForLoop = (props) => <LoopConstructorWrapper {...props} />;
 
-export default missingWrapper(React.memo(RosterForLoop), U.areEqual);
+export default componentWrapper(React.memo(RosterForLoop), U.areEqual);

package/src/components/loop-constructor/roster/index.js

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

package/src/components/loop-constructor/wrapper/body-component.js

@@ -23,6 +23,7 @@ const BodyComponent = ({
 		components,
 		headers,
 	});
+	const featuresWithoutMD = features.filter((f) => f !== 'MD');
 	if (componentType === 'RosterForLoop')
 		return (
 			<table id={`table-${mainId}`} className="table-lunatic">
@@ -38,10 +39,16 @@ const BodyComponent = ({
 									componentType,
 									id,
 									rowNumber,
+									conditionFilter,
 									...componentProps
 								} = component;
 								const localBindings =
 									U.buildBindingsForDeeperComponents(rowNumber)(bindings);
+								if (conditionFilter) {
+									const { value = '' } = conditionFilter;
+									if (!interpret(featuresWithoutMD)(localBindings)(value))
+										return null;
+								}
 								if (componentType) {
 									const Component = lunatic[componentType];
 									return (
@@ -62,8 +69,11 @@ const BodyComponent = ({
 												management={management}
 												features={features}
 												bindings={localBindings}
+												fullBindings={bindings}
+												missingLoopIteration={i}
 												zIndex={uiComponents.length - i || 0}
 												logFunction={logFunction}
+												focused={i === 0 && j === 0}
 											/>
 										</td>
 									);
@@ -97,11 +107,19 @@ const BodyComponent = ({
 						const Component = lunatic[componentType];
 						const localBindings =
 							U.buildBindingsForDeeperComponents(i)(bindings);
+						// ensure to have only N-1 missingResponse
+						const { missingResponse, conditionFilter } = componentProps;
+						if (conditionFilter) {
+							const { value = '' } = conditionFilter;
+							if (!interpret(featuresWithoutMD)(localBindings)(value))
+								return null;
+						}
 						return (
 							<div className="block-component" key={`${id}-row-${i}`}>
 								<Component
 									{...otherProps}
 									{...componentProps}
+									missingResponse={missingResponse}
 									id={`${id}-row-${i}`}
 									label={label}
 									handleChange={(up) => {
@@ -112,7 +130,10 @@ const BodyComponent = ({
 									management={management}
 									features={features}
 									bindings={localBindings}
+									fullBindings={bindings}
+									missingLoopIteration={i}
 									logFunction={logFunction}
+									focused={i === 0}
 								/>
 							</div>
 						);

package/src/components/loop-constructor/wrapper/build-components.js

@@ -1,33 +1,33 @@
-import * as C from '../../../constants';
-
-export const buildContentForLoopConstructor = ({ components, headers }) => {
-	// Start hack to find interation number
-	// Refactor if we have to handle complex components (vector, matrix)
-	const iterations =
-		components.find((c) => c.response).response.values[C.COLLECTED].length || 1;
-	// End
-	const initialArray = [...Array(iterations).keys()];
-	const uiComponents = components.map((comp) => {
-		const { response, ...other } = comp;
-		if (!response) return initialArray.map(() => comp);
-		// Handle reponses & cells components ?
-		const { name, values } = response;
-		return initialArray.map((rowNumber) => {
-			const newValues = Object.entries(values).reduce(
-				(acc, [key, value]) => ({
-					...acc,
-					[key]: value ? value[rowNumber] : null,
-				}),
-				{}
-			);
-			return {
-				...other,
-				response: { name, values: newValues },
-				rowNumber,
-			};
-		});
-	}, []);
-	const transpose = (m) => m[0].map((_, i) => m.map((x) => x[i]));
-	const rows = transpose(uiComponents);
-	return headers ? [headers, ...rows] : rows;
-};
+import * as C from '../../../constants';
+
+export const buildContentForLoopConstructor = ({ components, headers }) => {
+	// Start hack to find interation number
+	// Refactor if we have to handle complex components (vector, matrix)
+	const iterations =
+		components.find((c) => c.response).response.values[C.COLLECTED].length || 1;
+	// End
+	const initialArray = [...Array(iterations).keys()];
+	const uiComponents = components.map((comp) => {
+		const { response, ...other } = comp;
+		if (!response) return initialArray.map(() => comp);
+		// Handle reponses & cells components ?
+		const { name, values } = response;
+		return initialArray.map((rowNumber) => {
+			const newValues = Object.entries(values).reduce(
+				(acc, [key, value]) => ({
+					...acc,
+					[key]: value ? value[rowNumber] : null,
+				}),
+				{}
+			);
+			return {
+				...other,
+				response: { name, values: newValues },
+				rowNumber,
+			};
+		});
+	}, []);
+	const transpose = (m) => m[0].map((_, i) => m.map((x) => x[i]));
+	const rows = transpose(uiComponents);
+	return headers ? [headers, ...rows] : rows;
+};

package/src/components/loop-constructor/wrapper/index.js

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

package/src/components/modal/component.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Button from '../button';
+import './modal.scss';
+
+const Modal = ({ controls, cancelModal, validateModal }) => {
+	const disableValidation = controls
+		.map(({ criticality }) => criticality)
+		.includes('LOCK');
+	return (
+		<div className="lunatic-modal">
+			<div className="lunatic-modal-content">
+				<div className="lunatic-modal-text">
+					<ul>
+						{controls.map(({ id, errorMessage }) => (
+							<li key={id}>{errorMessage}</li>
+						))}
+					</ul>
+				</div>
+				<div className="lunatic-modal-buttons">
+					<div className="lunatic-modal-button">
+						<Button value="Corriger ma réponse" onClick={cancelModal} />
+					</div>
+					<div className="lunatic-modal-button">
+						<Button
+							value="Continuer"
+							onClick={validateModal}
+							disabled={disableValidation}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Modal;

package/src/components/modal/index.js

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

package/src/components/modal/modal.scss

@@ -0,0 +1,33 @@
+.lunatic-modal {
+	position: fixed;
+	padding-top: 50px;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgb(0, 0, 0);
+	background-color: rgba(0, 0, 0, 0.7);
+	z-index: 1000;
+	.lunatic-modal-content {
+		position: relative;
+		background-color: white;
+		padding: 20px;
+		margin: auto;
+		width: 50%;
+		-webkit-animation-name: animatetop;
+		-webkit-animation-duration: 0.4s;
+		animation-name: animatetop;
+		animation-duration: 0.4s;
+		.lunatic-modal-text {
+			font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+			font-size: 1em;
+		}
+		.lunatic-modal-buttons {
+			display: flex;
+			justify-content: space-around;
+			.lunatic-modal-button {
+				font-size: 0.8em;
+			}
+		}
+	}
+}

package/src/components/progress-bar/component.js

@@ -1,28 +1,28 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './progress-bar.scss';
-
-const ProgressBar = ({ id, value, style }) => {
-	let controledValue = value;
-	if (value < 0) controledValue = 0;
-	if (value > 100) controledValue = 100;
-	return (
-		<div
-			id={`progress-${id}`}
-			className="progress-lunatic"
-			style={buildStyleObject(style)}
-		>
-			{`${controledValue.toFixed(0)} %`}
-			<span style={{ width: `${controledValue}%` }} />
-		</div>
-	);
-};
-
-ProgressBar.propTypes = {
-	id: PropTypes.string.isRequired,
-	value: PropTypes.number.isRequired,
-	style: PropTypes.object,
-};
-
-export default ProgressBar;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { buildStyleObject } from '../../utils/lib';
+import './progress-bar.scss';
+
+const ProgressBar = ({ id, value, style }) => {
+	let controledValue = value;
+	if (value < 0) controledValue = 0;
+	if (value > 100) controledValue = 100;
+	return (
+		<div
+			id={`progress-${id}`}
+			className="progress-lunatic"
+			style={buildStyleObject(style)}
+		>
+			{`${controledValue.toFixed(0)} %`}
+			<span style={{ width: `${controledValue}%` }} />
+		</div>
+	);
+};
+
+ProgressBar.propTypes = {
+	id: PropTypes.string.isRequired,
+	value: PropTypes.number.isRequired,
+	style: PropTypes.object,
+};
+
+export default ProgressBar;

package/src/components/progress-bar/index.js

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

package/src/components/radio/component.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import missingWrapper from '../missing-wrapper';
+import componentWrapper from '../component-wrapper';
 import { ListDeclarationsWrapper } from '../declarations/wrappers';
 import { areEqual } from '../../utils/lib';
 import './radio.scss';
 
 const Radio = (props) => <ListDeclarationsWrapper type="radio" {...props} />;
 
-export default missingWrapper(React.memo(Radio, areEqual));
+export default componentWrapper(React.memo(Radio, areEqual));

package/src/components/radio/index.js

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

package/src/components/sequence/index.js

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

package/src/components/subsequence/index.js

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