@inseefr/lunatic 0.2.1-experimental → 0.2.1-prisme

package/src/components/modal/component.js

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

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/progress-bar/component.js

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

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

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

@@ -1,52 +1,54 @@
-.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;
-}
+.lunatic-component {
+	.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

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

package/src/components/radio/index.js

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

package/src/components/radio/radio.scss

@@ -1,57 +1,59 @@
-.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;
-}
+.lunatic-component {
+	.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/index.js

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

package/src/components/sequence/sequence.scss

@@ -1,8 +1,10 @@
-.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;
-}
+.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 './component';

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

@@ -1,70 +1,68 @@
-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]
+	);
+
+	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">
+			La suggestion sur liste n'est pas possible sur votre navigateur, vous
+			pouvez passer la question en appuyant sur Enregistrer et Continuer
+		</div>
+	);
+}
+
+export default CheckStore;

package/src/components/suggester/commons-tools/binded-keys.js

@@ -1,11 +1,11 @@
-export const BINDED_KEYS = {
-	ArrowUp: 'ArrowUp',
-	ArrowDown: 'ArrowDown',
-	Home: 'Home',
-	End: 'End',
-	Enter: 'Enter',
-	Escape: 'Escape',
-	Tab: 'Tab',
-};
-
-export default BINDED_KEYS;
+export const BINDED_KEYS = {
+	ArrowUp: 'ArrowUp',
+	ArrowDown: 'ArrowDown',
+	Home: 'Home',
+	End: 'End',
+	Enter: 'Enter',
+	Escape: 'Escape',
+	Tab: 'Tab',
+};
+
+export default BINDED_KEYS;

package/src/components/suggester/commons-tools/index.js

@@ -1 +1 @@
-export { default as BINDED_KEYS } from './binded-keys';
+export { default as BINDED_KEYS } from './binded-keys';

package/src/components/suggester/components/create-on-keydown-callback.js

@@ -1,28 +1,28 @@
-import { actions } from '../state-management';
-import { BINDED_KEYS } from '../commons-tools';
-
-function create(dispatch) {
-	return function (e) {
-		const { key } = e;
-		switch (key) {
-			case BINDED_KEYS.Tab:
-				e.stopPropagation();
-				// e.preventDefault();
-				dispatch(actions.onKeyDown(key));
-				break;
-			case BINDED_KEYS.ArrowDown:
-			case BINDED_KEYS.ArrowUp:
-			case BINDED_KEYS.Home:
-			case BINDED_KEYS.End:
-			case BINDED_KEYS.Enter:
-			case BINDED_KEYS.Escape:
-				e.preventDefault();
-				e.stopPropagation();
-				dispatch(actions.onKeyDown(key));
-				break;
-			default:
-		}
-	};
-}
-
-export default create;
+import { actions } from '../state-management';
+import { BINDED_KEYS } from '../commons-tools';
+
+function create(dispatch) {
+	return function (e) {
+		const { key } = e;
+		switch (key) {
+			case BINDED_KEYS.Tab:
+				e.stopPropagation();
+				// e.preventDefault();
+				dispatch(actions.onKeyDown(key));
+				break;
+			case BINDED_KEYS.ArrowDown:
+			case BINDED_KEYS.ArrowUp:
+			case BINDED_KEYS.Home:
+			case BINDED_KEYS.End:
+			case BINDED_KEYS.Enter:
+			case BINDED_KEYS.Escape:
+				e.preventDefault();
+				e.stopPropagation();
+				dispatch(actions.onKeyDown(key));
+				break;
+			default:
+		}
+	};
+}
+
+export default create;

package/src/components/suggester/components/index.js

@@ -1,2 +1,2 @@
-export { default as Suggester } from './suggester';
-export { DefaultOptionRenderer } from './panel';
+export { default as Suggester } from './suggester';
+export { DefaultOptionRenderer } from './panel';

package/src/components/suggester/components/panel/index.js

@@ -1,2 +1,2 @@
-export { default } from './panel';
-export { default as DefaultOptionRenderer } from './default-option-renderer';
+export { default } from './panel';
+export { default as DefaultOptionRenderer } from './default-option-renderer';

package/src/components/suggester/components/panel/option-container.js

@@ -50,7 +50,7 @@ function OptionContainer({ children, index, selected }) {
 			className={classnames('lunatic-suggester-option', { selected })}
 			role="option"
 			aria-selected={selected}
-			onClick={onClick}
+			onMouseDown={onClick}
 			ref={ref}
 		>
 			{children}