@inseefr/lunatic 0.1.7 → 0.1.8-experimental

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

@@ -0,0 +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;
+};

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

@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import * as lunatic from '../../components';
+import BodyComponent from './body-component';
+import Declarations from '../../declarations';
+import * as U from '../../../utils/lib';
+import * as C from '../../../constants';
+import { interpret } from '../../../utils/to-expose';
+
+const LoopConstructorWrapper = ({
+	id: mainId,
+	label: mainLabel,
+	components,
+	handleChange,
+	lines,
+	declarations,
+	features,
+	bindings,
+	addBtnLabel,
+	hideBtn,
+	componentType,
+	...otherProps
+}) => {
+	const [todo, setTodo] = useState({});
+
+	const featuresWithoutMD = features.filter((f) => f !== 'MD');
+
+	const minLines = Math.max(
+		parseInt(interpret(featuresWithoutMD)(bindings)(lines.min), 10) || 1,
+		U.getLoopConstructorInitLines(components)
+	);
+	const maxLines = lines
+		? parseInt(interpret(featuresWithoutMD)(bindings)(lines.max), 10)
+		: undefined;
+
+	const width = `${100 / Math.max(...components.map((row) => row.length))}%`;
+	const Button = lunatic.Button;
+	const involvedVariables = U.getInvolvedVariables(components);
+
+	const values = components.reduce(
+		(acc, c) => `${acc}|${Object.values(c.response?.values || {}).join('|')}`,
+		''
+	);
+
+	// TEMP: Set static number of occurence if min = max
+	useEffect(() => {
+		if (lines.min && lines.min === lines.max) {
+			const min =
+				parseInt(interpret(featuresWithoutMD)(bindings)(lines.min), 10) || 1;
+			const up = involvedVariables.reduce((acc, { name }) => {
+				if (min <= bindings[name].length)
+					return { ...acc, [name]: [...bindings[name].slice(0, min)] };
+				const toAdd = [...Array(min - bindings[name].length).keys()].map(
+					() => null
+				);
+				return { ...acc, [name]: [...bindings[name], ...toAdd] };
+			}, {});
+			handleChange(up);
+		}
+		// Assume to only execute this side effect at mount
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [values]);
+
+	useEffect(() => {
+		if (Object.keys(todo).length !== 0) {
+			const { up, rowNumber } = todo;
+			const entries = Object.entries(up);
+			const toUpdate = entries.reduce((_, [key, value]) => {
+				const previousValue = bindings[key];
+				const newValue = previousValue.map((v, i) =>
+					i === rowNumber ? value : v
+				);
+				return { ..._, [key]: newValue };
+			}, {});
+			handleChange(toUpdate);
+			setTodo({});
+		}
+	}, [bindings, todo, handleChange]);
+
+	const addLine = () => {
+		const toHandle = involvedVariables.reduce(
+			(acc, { name: iv }) => ({
+				...acc,
+				[iv]: [...bindings[iv], null],
+			}),
+			{}
+		);
+		handleChange(toHandle);
+	};
+
+	const customBtnLabel =
+		(componentType === 'Loop' &&
+			interpret(features, otherProps?.logFunction)(bindings)(mainLabel)) ||
+		addBtnLabel;
+
+	return (
+		<>
+			<Declarations
+				id={mainId}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			{componentType === 'RosterForLoop' && mainLabel && (
+				<label
+					htmlFor={`loops-constructor-${mainId}`}
+					id={`loops-constructor-label-${mainId}`}
+				>
+					{interpret(features, otherProps?.logFunction)(bindings)(mainLabel)}
+				</label>
+			)}
+			<Declarations
+				id={mainId}
+				type={C.AFTER_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<BodyComponent
+				mainId={mainId}
+				componentType={componentType}
+				components={components}
+				bindings={bindings}
+				width={width}
+				features={features}
+				setTodo={setTodo}
+				{...otherProps}
+			/>
+			{!hideBtn && Number.isInteger(minLines) && minLines !== maxLines && (
+				<Button
+					label="addLine"
+					value={customBtnLabel}
+					// disabled={
+					// Number.isInteger(minLines) && minLines === maxLines
+					//||
+					// Want to enable addition depsite of empty lines?
+					// 	U.lastLoopChildLineIsEmpty(bindings)(involvedVariables)
+					// }
+					onClick={addLine}
+					id={mainId}
+					logFunction={otherProps?.logFunction}
+				/>
+			)}
+			<Declarations
+				id={mainId}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
+	);
+};
+
+LoopConstructorWrapper.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	components: [],
+	lines: {},
+	positioning: 'DEFAULT',
+	declarations: [],
+	features: [],
+	bindings: {},
+	addBtnLabel: 'Add a line',
+	management: false,
+	hideBtn: false,
+	style: {},
+};
+
+LoopConstructorWrapper.propTypes = {
+	componentType: PropTypes.string.isRequired,
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	components: PropTypes.array,
+	handleChange: PropTypes.func.isRequired,
+	lines: U.linesPropTypes,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	addBtnLabel: PropTypes.string,
+	hideBtn: PropTypes.bool,
+	management: PropTypes.bool,
+	style: PropTypes.object,
+};
+
+export default React.memo(LoopConstructorWrapper, U.areEqual);

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

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

package/src/components/missing-wrapper/component.js

@@ -0,0 +1,119 @@
+import React, { useEffect } from 'react';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import Button from '../button';
+import * as U from '../../utils/lib';
+import './missing.scss';
+
+const Missing = ({ Component, props }) => {
+	const {
+		dontKnowButton = "Don't know",
+		refusedButton = 'Refused',
+		missingResponse,
+		handleChange,
+		preferences,
+		missingStrategy,
+		missingShortcut = { dontKnow: '', refused: '' },
+		response,
+		responses,
+		cells,
+		components,
+		savingType,
+		bindings,
+		shortcut,
+	} = props;
+
+	const buttonState = U.getResponseByPreference(preferences)(missingResponse);
+
+	useEffect(() => {
+		if (
+			buttonState !== null &&
+			U.hasToCleanMissing(savingType)({
+				response,
+				responses,
+				cells,
+				components,
+			})
+		) {
+			handleChange({ [U.getResponseName(missingResponse)]: null });
+		}
+	}, [
+		buttonState,
+		handleChange,
+		savingType,
+		response,
+		responses,
+		cells,
+		components,
+		missingResponse,
+	]);
+	const getVarsToClean = () =>
+		U.getToClean(savingType)({
+			response,
+			responses,
+			cells,
+			components,
+		});
+
+	const onClick = (value) => () => {
+		const isSameValue = buttonState === value;
+		const newValue = isSameValue ? null : value;
+		const toClean = getVarsToClean();
+		if (Object.keys(toClean)) {
+			handleChange(toClean);
+			if (U.isFunction(missingStrategy) && !isSameValue)
+				missingStrategy({ ...bindings, ...toClean });
+		} else {
+			if (U.isFunction(missingStrategy) && !isSameValue)
+				missingStrategy(bindings);
+		}
+		handleChange({ [U.getResponseName(missingResponse)]: newValue });
+	};
+
+	return (
+		<div className="missing-wrapper">
+			<div className="missing-component">
+				<Component {...props} />
+			</div>
+			<div className="missing-buttons">
+				<span
+					className={`missing-button${
+						buttonState === U.DK ? '-active' : ''
+					} missing-button-dk${buttonState === U.DK ? '-active' : ''}`}
+				>
+					<Button
+						label="dont-know-button"
+						value={dontKnowButton}
+						onClick={onClick(U.DK)}
+					/>
+				</span>
+				<span
+					className={`missing-button${
+						buttonState === U.RF ? '-active' : ''
+					} missing-button-rf${buttonState === U.RF ? '-active' : ''}`}
+				>
+					<Button
+						label="refused-button"
+						value={refusedButton}
+						onClick={onClick(U.RF)}
+					/>
+				</span>
+			</div>
+			{shortcut &&
+				missingShortcut &&
+				missingShortcut.dontKnow &&
+				missingShortcut.refused && (
+					<KeyboardEventHandler
+						handleKeys={Object.values(missingShortcut)}
+						onKeyEvent={(key, e) => {
+							e.preventDefault();
+							if (key === missingShortcut.dontKnow) onClick(U.DK)();
+							if (key === missingShortcut.refused) onClick(U.RF)();
+						}}
+						handleFocusableElements
+					/>
+				)}
+		</div>
+	);
+};
+
+export default Missing;

package/src/components/missing-wrapper/index.js

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

package/src/components/missing-wrapper/missing.scss

@@ -0,0 +1,30 @@
+.missing-wrapper {
+	.missing-buttons {
+		margin-top: 1em;
+		.button-lunatic {
+			width: 4em;
+			font-size: 1em;
+			font-weight: normal;
+		}
+		.missing-button {
+			.button-lunatic {
+				background-color: var(--color-very-very-light);
+				color: var(--color-primary-dark);
+				&:hover {
+					background-color: white;
+					color: var(--color-primary-main);
+				}
+			}
+		}
+		.missing-button-active {
+			.button-lunatic {
+				background-color: var(--color-primary-dark);
+				color: var(--color-very-very-light);
+				&:hover {
+					background-color: var(--color-primary-main);
+					color: white;
+				}
+			}
+		}
+	}
+}

package/src/components/missing-wrapper/wrapper.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Missing from './component';
+
+const missingWrapper = (Component) => (props) => {
+	const { missing } = props;
+	if (missing) return <Missing Component={Component} props={props} />;
+	return <Component {...props} />;
+};
+
+export default missingWrapper;

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

@@ -0,0 +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;

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

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

package/src/components/progress-bar/progress-bar.scss

@@ -0,0 +1,52 @@
+.progress-lunatic {
+	height: 30px;
+	position: relative;
+	background: var(--color-disabled);
+	-moz-border-radius: 20px;
+	-webkit-border-radius: 20px;
+	border-radius: 20px;
+	padding: 5px;
+	box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
+	text-align: center;
+	font-weight: bold;
+}
+
+.progress-lunatic > span {
+	display: block;
+	height: 100%;
+	border-radius: 20px;
+	background-color: var(--color-primary-light);
+	opacity: 0.6;
+	box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
+		inset 0 -2px 6px rgba(0, 0, 0, 0.4);
+	position: relative;
+	top: -18px;
+	overflow: hidden;
+}
+
+.progress-lunatic > span:after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	background-image: linear-gradient(
+		-45deg,
+		rgba(255, 255, 255, 0.2) 25%,
+		transparent 25%,
+		transparent 50%,
+		rgba(255, 255, 255, 0.2) 50%,
+		rgba(255, 255, 255, 0.2) 75%,
+		transparent 75%,
+		transparent
+	);
+	z-index: 1;
+	background-size: 50px 50px;
+	animation: move 2s linear infinite;
+	border-top-right-radius: 8px;
+	border-bottom-right-radius: 8px;
+	border-top-left-radius: 20px;
+	border-bottom-left-radius: 20px;
+	overflow: hidden;
+}

package/src/components/radio/component.js

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

package/src/components/radio/index.js

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

package/src/components/radio/radio.scss

@@ -0,0 +1,57 @@
+.radio-group-list {
+	border: 0;
+	outline: 0;
+	padding: 0;
+	margin-top: 0.9375rem;
+}
+
+.radio-lunatic {
+	position: absolute;
+	opacity: 0;
+	margin-bottom: 0;
+	margin-top: 0.05rem;
+	margin-left: 0.2rem;
+	height: 20px;
+	width: 20px;
+	+ label {
+		margin-left: 2rem;
+	}
+	&:focus {
+		+ label {
+			background-color: rgba(0, 0, 0, 0.05);
+		}
+	}
+	+ label::before {
+		float: left;
+		line-height: 2rem;
+	}
+}
+
+.field,
+.field-with-tooltip {
+	.radio-group-list .radio-modality {
+		height: 1.375em;
+	}
+}
+
+.radio-group-list {
+	.radio-modality {
+		label {
+			display: flex;
+		}
+	}
+	.radio-modality.radio-modality-block label {
+		padding-top: 0.325em;
+	}
+	.radio-modality.radio-modality-block.horizontal-options label {
+		padding-top: 0;
+	}
+}
+
+.radio-modality {
+	margin-bottom: 0.8em;
+}
+
+.radio-lunatic + label {
+	margin-top: 0.325em;
+}

package/src/components/sequence/component.js

@@ -1,26 +1,49 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/string-utils';
+import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
+import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
 import './sequence.scss';
 
-const Sequence = ({ id, label, style }) => (
-	<div
-		aria-label={`sequence-${id}`}
-		className="sequence-lunatic"
-		style={buildStyleObject(style)}
+const Sequence = ({
+	id,
+	label,
+	declarations,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) => (
+	<SimpleDeclarationsWrapper
+		id={id}
+		declarations={declarations}
+		features={features}
+		bindings={bindings}
 	>
-		{label}
-	</div>
+		<div
+			aria-label={`sequence-${id}`}
+			className="sequence-lunatic"
+			style={U.buildStyleObject(style)}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	</SimpleDeclarationsWrapper>
 );
 
+Sequence.defaultProps = {
+	declarations: [],
+	features: [],
+	bindings: {},
+	style: {},
+};
+
 Sequence.propTypes = {
 	id: PropTypes.string.isRequired,
 	label: PropTypes.string.isRequired,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
 	style: PropTypes.object,
 };
 
-Sequence.defaultProps = {
-	style: {},
-};
-
-export default Sequence;
+export default React.memo(Sequence, U.areEqual);

package/src/components/sequence/sequence.scss

@@ -1,15 +1,8 @@
-@import 'src/components/index.scss';
-
 .sequence-lunatic {
-	height: 40px;
-	box-sizing: border-box;
-	border-radius: 0px;
-	background-color: $main_color;
-	border: 0.1em solid $main_color;
-	color: white;
-	font-weight: bold;
-	font-size: 130%;
-	padding-left: 10px;
-	display: flex;
-	align-items: center;
+	padding: 0;
+	font-size: 0.875rem;
+	color: var(--color-primary-light);
+	background-color: var(--color-secondary-contrast-text);
+	border: 0;
+	height: 1.875rem;
 }

package/src/components/subsequence/component.js

@@ -1,26 +1,48 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/string-utils';
-import './subsequence.scss';
+import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
+import * as U from '../../utils/lib';
+import { interpret } from '../../utils/to-expose';
 
-const Subsequence = ({ id, label, style }) => (
-	<div
-		aria-label={`subsequence-${id}`}
-		className="subsequence-lunatic"
-		style={buildStyleObject(style)}
+const Subsequence = ({
+	id,
+	label,
+	declarations,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) => (
+	<SimpleDeclarationsWrapper
+		id={id}
+		declarations={declarations}
+		features={features}
+		bindings={bindings}
 	>
-		{label}
-	</div>
+		<div
+			aria-label={`subsequence-${id}`}
+			className="subsequence-lunatic"
+			style={U.buildStyleObject(style)}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	</SimpleDeclarationsWrapper>
 );
 
+Subsequence.defaultProps = {
+	declarations: [],
+	features: [],
+	bindings: {},
+	style: {},
+};
+
 Subsequence.propTypes = {
 	id: PropTypes.string.isRequired,
 	label: PropTypes.string.isRequired,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
 	style: PropTypes.object,
 };
 
-Subsequence.defaultProps = {
-	style: {},
-};
-
-export default Subsequence;
+export default React.memo(Subsequence, U.areEqual);