@inseefr/lunatic 0.2.0-experimental → 0.2.0-v2

package/src/components/loop/commons/row-component.js

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import * as lunatic from 'components';
+import { fillComponentExpressions } from '../../../use-lunatic/commons';
+
+function RowComponent({
+	id,
+	component,
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	value,
+	iteration,
+	executeExpression,
+}) {
+	const { componentType } = component;
+	const [componentFilled, setComponentFilled] = useState(component);
+	const Component = lunatic[componentType];
+	const [filled, setFilled] = useState(false);
+
+	useEffect(
+		function () {
+			setComponentFilled(
+				fillComponentExpressions(component, { executeExpression, iteration })
+			);
+			setFilled(true);
+		},
+		[component, executeExpression, iteration]
+	);
+
+	if (componentType in lunatic && filled) {
+		return (
+			<Component
+				{...componentFilled}
+				id={id}
+				handleChange={handleChange}
+				preferences={preferences}
+				management={management}
+				features={features}
+				missing={missing}
+				shortcut={shortcut}
+				value={value}
+				executeExpression={executeExpression}
+			/>
+		);
+	}
+	return null;
+}
+
+export default RowComponent;

package/src/components/loop/index.js

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

package/src/components/loop/loop.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import BlockForLoop from './block-for-loop';
+import RosterForLoop from './roster-for-loop';
+
+const LoopTypes = {
+	rosterForLoop: 'RosterForLoop',
+	blockForLoop: 'Loop',
+};
+
+function Loop(props) {
+	const {
+		declarations,
+		label,
+		lines,
+		iterations,
+		id,
+		components,
+		handleChange,
+		value,
+		executeExpression,
+		loopDependencies,
+		componentType,
+		headers,
+		shortcut,
+		management,
+		missing,
+		features,
+		preferences,
+		custom,
+	} = props;
+
+	switch (componentType) {
+		case LoopTypes.blockForLoop:
+			return (
+				<BlockForLoop
+					declarations={declarations}
+					label={label}
+					lines={lines}
+					iterations={iterations}
+					id={id}
+					components={components}
+					handleChange={handleChange}
+					valueMap={value}
+					management={management}
+					executeExpression={executeExpression}
+					loopDependencies={loopDependencies}
+					missing={missing}
+					shortcut={shortcut}
+					features={features}
+					preferences={preferences}
+					custom={custom}
+				/>
+			);
+		case LoopTypes.rosterForLoop:
+			return (
+				<RosterForLoop
+					declarations={declarations}
+					label={label}
+					lines={lines}
+					iterations={iterations}
+					id={id}
+					components={components}
+					handleChange={handleChange}
+					valueMap={value}
+					management={management}
+					executeExpression={executeExpression}
+					loopDependencies={loopDependencies}
+					missing={missing}
+					shortcut={shortcut}
+					features={features}
+					preferences={preferences}
+					headers={headers}
+					custom={custom}
+				/>
+			);
+		default:
+			return null;
+	}
+}
+
+export default Loop;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from '../../../components';
+
+function AddRowButton({ onClick, disabled, children }) {
+	return (
+		<Button onClick={onClick} disabled={disabled}>
+			{children}
+		</Button>
+	);
+}
+
+export default AddRowButton;

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

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { Tbody } from '../../commons/components/html-table';
+import RosterForLoopOrchestrator from './roster-for-loop-orchestrator';
+
+function Body({
+	id,
+	components,
+	nbRows,
+	executeExpression,
+	handleChange,
+	valueMap,
+	missing,
+	management,
+	features,
+	preferences,
+	custom,
+}) {
+	const handleChangeRow = useCallback(
+		function (response, value, args) {
+			handleChange(response, value, { ...args, loop: true, length: nbRows });
+		},
+		[nbRows, handleChange]
+	);
+
+	if (nbRows > 0) {
+		return (
+			<Tbody id={id} custom={custom}>
+				<RosterForLoopOrchestrator
+					components={components}
+					nbRows={nbRows}
+					handleChange={handleChangeRow}
+					executeExpression={executeExpression}
+					valueMap={valueMap}
+					missing={missing}
+					management={management}
+					features={features}
+					preferences={preferences}
+					custom={custom}
+				/>
+			</Tbody>
+		);
+	}
+	return null;
+}
+
+export default Body;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tr, Th, Thead } from '../../commons/components/html-table';
+
+function Header({ header, id, custom }) {
+	if (Array.isArray(header)) {
+		return (
+			<Thead id={id} custom={custom}>
+				<Tr id={id} custom={custom} row={0}>
+					{header.map(function ({ label }, index) {
+						return (
+							<Th
+								id={id}
+								index={index}
+								key={`${label}-${index}`}
+								custom={custom}
+							>
+								{label}
+							</Th>
+						);
+					})}
+				</Tr>
+			</Thead>
+		);
+	}
+	return null;
+}
+
+export default Header;

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

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

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

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

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

@@ -0,0 +1,92 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../../declarations';
+import RosterTable from './roster-table';
+import AddRowButton from './add-row-button';
+import D from 'i18n';
+
+const DEFAULT_MAX_ROWS = 12;
+
+function getTableLength(value) {
+	return Object.values(value).reduce(function (length, variable) {
+		if (Array.isArray(variable)) {
+			return Math.max(length, variable.length);
+		}
+		return length;
+	}, 1);
+}
+
+function RosterforLoop({
+	valueMap,
+	loopDependencies,
+	lines,
+	handleChange,
+	declarations,
+	label,
+	components,
+	executeExpression,
+	headers,
+	missing,
+	shortcut,
+	id,
+	management,
+	iteration,
+	custom,
+}) {
+	const max = lines?.max || DEFAULT_MAX_ROWS;
+	const [init, setInit] = useState(false);
+	const [nbRows, setNbRows] = useState(-1);
+
+	useEffect(
+		function () {
+			if (!init && valueMap) {
+				setNbRows(getTableLength(valueMap));
+				setInit(true);
+			}
+		},
+		[init, valueMap]
+	);
+
+	const disabled = nbRows === max;
+
+	const addRow = useCallback(
+		function () {
+			if (nbRows < max) {
+				setNbRows(nbRows + 1);
+			}
+		},
+		[max, nbRows]
+	);
+
+	if (nbRows > 0) {
+		return (
+			<>
+				<DeclarationsBeforeText declarations={declarations} custom={custom} />
+				<DeclarationsAfterText declarations={declarations} custom={custom} />
+				<RosterTable
+					id={id}
+					components={components}
+					nbRows={nbRows}
+					executeExpression={executeExpression}
+					header={headers}
+					handleChange={handleChange}
+					valueMap={valueMap}
+					management={management}
+					missing={missing}
+					shortcut={shortcut}
+					custom={custom}
+				/>
+				<DeclarationsDetachable declarations={declarations} custom={custom} />
+				<AddRowButton onClick={addRow} disabled={disabled} custom={custom}>
+					{label || D.DEFAULT_BUTTON_ADD}
+				</AddRowButton>
+			</>
+		);
+	}
+	return null;
+}
+
+export default RosterforLoop;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Table } from '../../commons/components/html-table';
+import Header from './header';
+import Body from './body';
+import './roster.scss';
+import { NothingToDisplay } from '../../commons';
+
+function RosterTable({
+	components,
+	nbRows,
+	executeExpression,
+	id,
+	header,
+	valueMap,
+	shortcut,
+	missing,
+	management,
+	handleChange,
+	custom,
+}) {
+	if (nbRows > 0) {
+		return (
+			<Table id={id} custom={custom}>
+				<Header header={header} id={id} custom={custom} />
+				<Body
+					id={id}
+					components={components}
+					handleChange={handleChange}
+					nbRows={nbRows}
+					valueMap={valueMap}
+					management={management}
+					missing={missing}
+					shortcut={shortcut}
+					executeExpression={executeExpression}
+					custom={custom}
+				/>
+			</Table>
+		);
+	}
+	return <NothingToDisplay />;
+}
+
+export default RosterTable;

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

package/src/components/modal-controls/close-or-skip.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from '../button';
+
+function CloseOrSkip({ errors, onClose, onSkip }) {
+	const bloc = Object.values(errors)
+		.flat()
+		.reduce(function (status, { criticality }) {
+			return status || criticality === 'WARN';
+		}, false);
+
+	if (bloc) {
+		return (
+			<Button className="modal-button" onClick={onClose}>
+				Close
+			</Button>
+		);
+	}
+	return (
+		<Button className="modal-button" onClick={onSkip}>
+			Next
+		</Button>
+	);
+}
+
+export default CloseOrSkip;

package/src/components/modal-controls/index.js

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

package/src/components/modal-controls/modal-container.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function ModalContainer({ children }) {
+	return ReactDOM.createPortal(
+		<div className="lunatic-modal-controls">
+			<div className="modal">{children}</div>
+		</div>,
+		document.body
+	);
+}
+
+export default ModalContainer;

package/src/components/modal-controls/modal-controls.js

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import ModalContainer from './modal-container';
+import CloseOrSkip from './close-or-skip';
+import './modal-controls.scss';
+
+function Error({ criticality, errorMessage }) {
+	const { value } = errorMessage;
+	return <li className={classnames(criticality)}>{value}</li>;
+}
+
+function ComponentErrors({ errors }) {
+	const content = errors.map(function (error, index) {
+		return <Error {...error} key={index} />;
+	}, []);
+	return <ul className={classnames('errors')}>{content}</ul>;
+}
+
+function ModalControls({ title, errors, goNext }) {
+	const onClose = useCallback(
+		function () {
+			goNext({ block: true });
+		},
+		[goNext]
+	);
+	if (typeof errors === 'object') {
+		const content = Object.entries(errors).map(function ([id, errors]) {
+			return <ComponentErrors errors={errors} key={id} />;
+		}, []);
+
+		return (
+			<ModalContainer>
+				<div className="title">{title}</div>
+				<div className="body">{content}</div>
+				<CloseOrSkip onSkip={goNext} onClose={onClose} errors={errors} />
+			</ModalContainer>
+		);
+	}
+	return null;
+}
+
+export default ModalControls;

package/src/components/modal-controls/modal-controls.scss

@@ -0,0 +1,63 @@
+.lunatic-modal-controls {
+	position: fixed;
+
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(50, 50, 50, 0.5);
+
+	.modal {
+		background-color: snow;
+		height: 200px;
+		width: 60%;
+		margin: auto;
+		margin-top: 20%;
+		position: relative;
+		border-radius: 8px;
+
+		.title {
+			height: 32px;
+			background-color: darkslateblue;
+			color: gainsboro;
+			font-size: 18px;
+			font-weight: bolder;
+			line-height: 32px;
+			padding: 0 12px;
+
+			border-radius: 8px 8px 0 0;
+		}
+
+		.body {
+			padding: 0 12px 0 12px;
+			height: 60%;
+			background-color: aquamarine;
+		}
+
+		.modal-button {
+			display: block;
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			margin: 0 12px 12px 0;
+		}
+	}
+
+	.errors {
+		ul,
+		li,
+		div,
+		span {
+			margin: 0;
+			padding: 0;
+			border: none;
+			list-style: none;
+		}
+
+		.warn {
+		}
+
+		.info {
+		}
+	}
+}

package/src/components/pairwise/index.js

@@ -0,0 +1,2 @@
+export { default as PairwiseBlock } from './pairwise-block';
+export { default as PairwiseLinks } from './pairwise-links';

package/src/components/pairwise/pairwise-block.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const PairwiseBlock = () => <div>TODO: PairwiseBlock</div>;
+
+export default PairwiseBlock;

package/src/components/pairwise/pairwise-links.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const PairwiseLinks = () => <div>TODO: PairwiseLinks</div>;
+
+export default PairwiseLinks;

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,23 @@
+import React from 'react';
+import RadioGroup from './radio-group';
+import { createLunaticComponent } from '../commons';
+import './radio.scss';
+
+function LunaticRadioGroup(props) {
+	const { id, options, value, onChange, checkboxStyle, custom } = props;
+	return (
+		<RadioGroup
+			id={id}
+			options={options}
+			value={value}
+			onClick={onChange}
+			checkboxStyle={checkboxStyle}
+			custom={custom}
+		/>
+	);
+}
+
+export default createLunaticComponent(LunaticRadioGroup, {
+	fieldset: true,
+	inputId: 'lunatic-radio-group',
+});