@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

package/src/components/loop/roster-for-loop/roster.scss

@@ -0,0 +1,42 @@
+// .lunatic-component {
+// 	.table-lunatic {
+// 		table-layout: fixed;
+// 		border-collapse: collapse;
+// 		margin-top: 0.3em;
+// 		margin-bottom: 0.3em;
+// 		& td,
+// 		th {
+// 			border: 0.15em solid var(--color-primary-dark);
+// 			padding: 0.2em;
+// 		}
+// 		& td {
+// 			.field,
+// 			.field-with-tooltip {
+// 				display: flex;
+// 				justify-content: center;
+// 				align-items: center;
+// 			}
+// 		}
+// 	}
+
+// 	.table-lunatic .tooltip-lunatic img {
+// 		height: 20px;
+// 		width: 20px;
+// 	}
+// }
+
+.lunatic-table {
+	table-layout: fixed;
+	border-collapse: collapse;
+	margin-top: 0.3em;
+	margin-bottom: 0.3em;
+	.lunatic-table-thead {
+		.lunatic-table-th {
+			border: 0.15em solid var(--color-primary-dark);
+			padding: 0.2em;
+		}
+	}
+
+	.lunatic-table-tbody {
+	}
+}

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

@@ -0,0 +1,65 @@
+import React, { useCallback } from 'react';
+import Tr from './html-table/tr';
+import Td from './html-table/td';
+import { RowComponent } from '../commons';
+
+function Row({
+	id,
+	components,
+	valueMap,
+	rowIndex,
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	executeExpression,
+}) {
+	const handleChangeRow = useCallback(
+		function (response, value) {
+			handleChange(response, value, { index: rowIndex });
+		},
+		[handleChange, rowIndex]
+	);
+
+	if (Array.isArray(components)) {
+		return (
+			<Tr id={id}>
+				{components.map(function (component, index) {
+					const { response, id } = component;
+					const idComponent = `${id}-${rowIndex + 1} `;
+					let value = undefined;
+					if (response) {
+						const { name } = response;
+						if (name in valueMap) {
+							value = valueMap[name][rowIndex] || '';
+						}
+					}
+
+					return (
+						<Td id={idComponent}>
+							<RowComponent
+								component={component}
+								key={id}
+								handleChange={handleChangeRow}
+								features={features}
+								missing={missing}
+								shortcut={shortcut}
+								management={management}
+								value={value}
+								id={idComponent}
+								preferences={preferences}
+								iteration={rowIndex}
+								executeExpression={executeExpression}
+							/>
+						</Td>
+					);
+				})}
+			</Tr>
+		);
+	}
+	return <Tr id={id}></Tr>;
+}
+
+export default Row;

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';
+ 

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

@@ -62,8 +62,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>
 									);
@@ -112,7 +115,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,42 @@
+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;
+
+function Modal() {
+	return null;
+}
+
+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/radio/index.js

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

package/src/components/radio/lunatic-radio-group.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import RadioGroup from './radio-group';
+import { FieldContainer, Fieldset, useOnHandleChange } from '../commons';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../declarations';
+import './radio.scss';
+
+function LunaticRadioGroup(props) {
+	const {
+		label,
+		id,
+		options,
+		value,
+		handleChange,
+		response,
+		declarations,
+		checkboxStyle,
+	} = props;
+
+	const onClick = useOnHandleChange({ handleChange, response, value });
+
+	return (
+		<>
+			<DeclarationsBeforeText declarations={declarations} />
+			<FieldContainer id={id} value={value}>
+				<Fieldset legend={label}>
+					<DeclarationsAfterText declarations={declarations} />
+					<RadioGroup
+						id={id}
+						options={options}
+						value={value}
+						onClick={onClick}
+						checkboxStyle={checkboxStyle}
+					/>
+				</Fieldset>
+			</FieldContainer>
+			<DeclarationsDetachable declarations={declarations} />
+		</>
+	);
+}
+
+export default React.memo(LunaticRadioGroup);

package/src/components/radio/radio-group.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import RadioOption from './radio-option';
+import { Label, useOptionsKeydown } from '../commons';
+
+function RadioGroup({ options, value, id, onClick, checkboxStyle = false }) {
+	const onKeyDown = useOptionsKeydown(options, onClick);
+
+	return options.map(function (option, index) {
+		const { value: valueOption, label } = option;
+		const radioId = `lunatic-radio-${id}-${valueOption}`;
+		const labelId = `lunatic-radio-label-${id}-${valueOption}`;
+
+		return (
+			<div key={radioId} className="lunatic-radio-group-option">
+				<Label id={labelId} htmlFor={radioId}>
+					{label}
+				</Label>
+				<RadioOption
+					id={radioId}
+					labelledBy={labelId}
+					index={index}
+					checked={value === valueOption}
+					onClick={onClick}
+					value={valueOption}
+					onKeyDown={onKeyDown}
+					checkboxStyle={checkboxStyle}
+				/>
+			</div>
+		);
+	});
+}
+
+export default RadioGroup;

package/src/components/radio/radio-option.js

@@ -0,0 +1,87 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import RadioChecked from '../../utils/icons/radio-checked.icon';
+import RadioUnchecked from '../../utils/icons/radio-unchecked.icon';
+import CheckboxChecked from '../../utils/icons/checkbox-checked.icon';
+import CheckboxUnchecked from '../../utils/icons/checkbox-unchecked.icon';
+
+function getIcon(checked, checkboxStyle) {
+	if (checked) {
+		if (checkboxStyle) {
+			return CheckboxChecked;
+		}
+		return RadioChecked;
+	}
+	if (checkboxStyle) {
+		return CheckboxUnchecked;
+	}
+	return RadioUnchecked;
+}
+
+function RadioOption({
+	checked,
+	onClick,
+	value,
+	id,
+	disabled,
+	onKeyDown,
+	index,
+	labelledBy,
+	checkboxStyle,
+}) {
+	const spanEl = useRef();
+	const Icon = getIcon(checked, checkboxStyle);
+	const tabIndex = checked ? '0' : '-1';
+
+	const onClickOption = useCallback(
+		function () {
+			onClick(value);
+		},
+		[value, onClick]
+	);
+
+	const handleKeyDown = useCallback(
+		function (e) {
+			const { key } = e;
+			const { current } = spanEl;
+			onKeyDown({ key, index });
+			current.blur();
+		},
+		[onKeyDown, index, spanEl]
+	);
+
+	useEffect(
+		function () {
+			const { current } = spanEl;
+			if (current && checked) {
+				current.focus();
+			}
+		},
+		[checked, spanEl, value]
+	);
+
+	return (
+		<div
+			className={classnames('radio-modality', 'radio-modality-block', {
+				checked,
+				disabled,
+			})}
+		>
+			<span
+				id={id}
+				role="radio"
+				className="lunatic-input-radio"
+				aria-checked={checked}
+				tabIndex={tabIndex}
+				onClick={onClickOption}
+				onKeyDown={handleKeyDown}
+				aria-labelledby={labelledBy}
+				ref={spanEl}
+			>
+				<Icon />
+			</span>
+		</div>
+	);
+}
+
+export default RadioOption;

package/src/components/radio/radio.scss

@@ -1,59 +1,59 @@
 .lunatic-component {
-	.radio-group-list {
-		border: 0;
-		outline: 0;
-		padding: 0;
-		margin-top: 0.9375rem;
-	}
+	// .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;
-		}
-	}
+	// .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;
-		}
-	}
+	// .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-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-modality {
+	// 	margin-bottom: 0.8em;
+	// }
 
-	.radio-lunatic + label {
-		margin-top: 0.325em;
-	}
+	// .radio-lunatic + label {
+	// 	margin-top: 0.325em;
+	// }
 }

package/src/components/sequence/index.js

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

package/src/components/sequence/sequence.js

@@ -0,0 +1,75 @@
+import React from 'react';
+// import PropTypes from 'prop-types';
+// import { SimpleDeclarationsWrapper } from '../declarations/wrappers';
+// import * as U from '../../utils/lib';
+// import { interpret } from '../../utils/to-expose';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../declarations';
+import './sequence.scss';
+
+// const Sequence = ({
+// 	id,
+// 	label,
+// 	declarations,
+// 	features,
+// 	bindings,
+// 	style,
+// 	logFunction,
+// }) => (
+// 	<SimpleDeclarationsWrapper
+// 		id={id}
+// 		declarations={declarations}
+// 		features={features}
+// 		bindings={bindings}
+// 	>
+// 		<div
+// 			aria-label={`sequence-${id}`}
+// 			className="sequence-lunatic"
+// 			style={U.buildStyleObject(style)}
+// 			id={`sequence-${id}`}
+// 		>
+// 			{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,
+// };
+
+// export default React.memo(Sequence, U.areEqual);
+
+function Sequence({ declarations, label, id, style }) {
+	return (
+		<>
+			<DeclarationsBeforeText declarations={declarations} />
+			<div
+				aria-label={`sequence-${id}`}
+				className="sequence-lunatic"
+				// style={{}}
+				id={`sequence-${id}`}
+			>
+				{label}
+			</div>
+			<DeclarationsAfterText declarations={declarations} />
+			<DeclarationsDetachable declarations={declarations} />
+		</>
+	);
+}
+
+export default Sequence;