@inseefr/lunatic 0.1.13-hackathon → 0.2.0-v2

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

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,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,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/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

@@ -1,70 +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]
-	);
-
-	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;
+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;

package/src/components/suggester/idb-suggester.js

@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import SuggesterWrapper from './suggester-wrapper';
+import Suggester from './suggester';
 import createSearching from './searching';
 import CheckStore from './check-store';
 
@@ -15,8 +15,10 @@ function IDBSuggester({
 	onSelect,
 	disabled,
 	value,
+	custom,
 }) {
 	const [store, setStore] = useState(undefined);
+
 	const searching = useMemo(
 		function () {
 			if (store) {
@@ -33,7 +35,7 @@ function IDBSuggester({
 			idbVersion={idbVersion}
 			setStore={setStore}
 		>
-			<SuggesterWrapper
+			<Suggester
 				id={id}
 				className={className}
 				labelledBy={labelledBy}
@@ -41,9 +43,9 @@ function IDBSuggester({
 				labelRenderer={labelRenderer}
 				onSelect={onSelect}
 				searching={searching}
-				storeName={storeName}
 				disabled={disabled}
 				value={value}
+				custom={custom}
 			/>
 		</CheckStore>
 	);

package/src/components/suggester/index.js

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