@inseefr/lunatic 0.2.62 → 0.3.0-v2

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/block/index.js

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

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

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

package/src/components/pairwise/index.js

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

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

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

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

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

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

@@ -0,0 +1,58 @@
+import React, { useCallback } from 'react';
+import LinksOrchestrator from './links-orchestrator';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../../declarations';
+
+const PairwiseLinks = ({
+	declarations,
+	components,
+	handleChange,
+	value,
+	missing,
+	shortcut,
+	features,
+	preferences,
+	management,
+	executeExpression,
+	xAxisIterations,
+	yAxisIterations,
+	custom,
+}) => {
+	const nbRows = xAxisIterations * yAxisIterations;
+	const handleChangeLinks = useCallback(
+		function (response, value, args) {
+			handleChange(response, value, args);
+		},
+		[handleChange]
+	);
+
+	if (nbRows > 0)
+		return (
+			<>
+				<DeclarationsBeforeText declarations={declarations} custom={custom} />
+				<DeclarationsAfterText declarations={declarations} custom={custom} />
+				<LinksOrchestrator
+					components={components}
+					handleChange={handleChangeLinks}
+					nbRows={nbRows}
+					valueMap={value}
+					management={management}
+					missing={missing}
+					shortcut={shortcut}
+					features={features}
+					preferences={preferences}
+					executeExpression={executeExpression}
+					custom={custom}
+					xAxisIterations={xAxisIterations}
+				/>
+				<DeclarationsDetachable declarations={declarations} custom={custom} />
+			</>
+		);
+
+	return null;
+};
+
+export default PairwiseLinks;

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

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+import { OrchestratedComponent } from '../../commons';
+
+function Row({
+	components,
+	valueMap = {},
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	executeExpression,
+	custom,
+	linksIterations,
+}) {
+	const handleChangeRow = useCallback(
+		function (response, value) {
+			handleChange(response, value, { linksIterations });
+		},
+		[handleChange, linksIterations]
+	);
+
+	return components.reduce(function (row, component) {
+		const { response, id } = component;
+		const [x, y] = linksIterations;
+		const idComponent = `${id}-${x + 1}-${y + 1} `;
+
+		let value = undefined;
+		if (response) {
+			const { name } = response;
+			const valueArray = valueMap[name];
+			if (Array.isArray(valueArray) && Array.isArray(valueArray[x])) {
+				value = valueArray[x][y] || '';
+			}
+		}
+
+		return [
+			...row,
+			<OrchestratedComponent
+				component={component}
+				key={idComponent}
+				handleChange={handleChangeRow}
+				features={features}
+				missing={missing}
+				shortcut={shortcut}
+				management={management}
+				value={value}
+				id={idComponent}
+				preferences={preferences}
+				linksIterations={linksIterations}
+				executeExpression={executeExpression}
+				custom={custom}
+			/>,
+		];
+	}, []);
+}
+
+export default Row;

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',
+});

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import RadioOption from './radio-option';
+import { Label, useOptionsKeydown } from '../commons';
+import { createCustomizableLunaticField } from '../commons';
+
+function Radio({ 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 createCustomizableLunaticField(Radio);

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

@@ -0,0 +1,89 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import classnames from 'classnames';
+import {
+	RadioChecked,
+	RadioUnchecked,
+	CheckboxChecked,
+	CheckboxUnchecked,
+} from 'components/commons/icons';
+
+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,24 +1,59 @@
-@import 'src/components/index.scss';
+.lunatic-component {
+	// .radio-group-list {
+	// 	border: 0;
+	// 	outline: 0;
+	// 	padding: 0;
+	// 	margin-top: 0.9375rem;
+	// }
 
-.radio-group {
-	border: 0.1em solid $main_color;
-}
+	// .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 {
-	margin: 0;
-	margin-right: 1em;
-	margin-left: 1em;
-	margin-top: 0.5em;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 0.3em 0.3em $main_color;
-	}
-	&:checked + label {
-		border: 0.1em solid $main_color;
-		padding: 0.3em;
-	}
-}
+	// .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-modality {
-	margin-top: 1em;
+	// .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,23 @@
+import React from 'react';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../declarations';
+import { Label, safetyLabel } from '../commons';
+import './sequence.scss';
+
+function Sequence({ declarations, label, id, style }) {
+	return (
+		<>
+			<DeclarationsBeforeText declarations={declarations} />
+			<Label className="sequence-lunatic" id={`sequence-${id}`} style={style}>
+				{safetyLabel(label, id)}
+			</Label>
+			<DeclarationsAfterText declarations={declarations} />
+			<DeclarationsDetachable declarations={declarations} />
+		</>
+	);
+}
+
+export default Sequence;

package/src/components/sequence/sequence.scss

@@ -1,15 +1,10 @@
-@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;
+.lunatic-component {
+	.sequence-lunatic {
+		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/index.js

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

package/src/components/subsequence/subsequence.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../declarations';
+
+function Subsequence({ id, declarations, label }) {
+	return (
+		<>
+			<DeclarationsBeforeText declarations={declarations} />
+			<div
+				aria-label={`sequence-${id}`}
+				className="sequence-lunatic"
+				id={`sequence-${id}`}
+			>
+				{label}
+			</div>
+			<DeclarationsAfterText declarations={declarations} />
+			<DeclarationsDetachable declarations={declarations} />
+		</>
+	);
+}
+
+export default Subsequence;

package/src/components/suggester/check-store.js

@@ -0,0 +1,70 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { openDb, getEntity } from '../../utils/idb-tools';
+import { CONSTANTES } from '../../utils/store-tools';
+
+function CheckStore({ storeName, version, setStore, children }) {
+	const [ready, setReady] = useState(0);
+	const [refresh, setRefresh] = useState(false);
+	const [disabled, setDisabled] = useState(false);
+
+	const checkStore = useCallback(
+		async function () {
+			try {
+				const db = await openDb(storeName, version);
+				const info = await getEntity(db, CONSTANTES.STORE_INFO_NAME, storeName);
+
+				if (db && info) {
+					setReady(200);
+					setStore(info);
+				}
+			} catch (e) {
+				setReady(400);
+			}
+		},
+		[storeName, version, setStore]
+	);
+
+	useEffect(
+		function () {
+			checkStore();
+		},
+		[checkStore]
+	);
+
+	useEffect(
+		function () {
+			if (refresh) {
+				setRefresh(false);
+				setDisabled(true);
+				async function go() {
+					await checkStore();
+					setDisabled(false);
+				}
+
+				go();
+			}
+		},
+		[refresh, checkStore]
+	);
+
+	if (ready === 0) {
+		return (
+			<div className="lunatic-suggester-in-progress">
+				Le store {storeName} est en cour de chargement.
+			</div>
+		);
+	}
+	if (ready === 200) {
+		return children;
+	}
+	return (
+		<div className="lunatic-suggester-unvailable">
+			Le store {storeName} n'est pas disponible.
+			<button disabled={disabled} onClick={() => setRefresh(true)}>
+				Refresh
+			</button>
+		</div>
+	);
+}
+
+export default CheckStore;