@inseefr/lunatic 0.2.0-experimental → 0.2.0-prisme

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

@@ -1,49 +1,50 @@
-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 './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)}
-		>
-			{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);
+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 './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);

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

@@ -23,6 +23,7 @@ const Subsequence = ({
 			aria-label={`subsequence-${id}`}
 			className="subsequence-lunatic"
 			style={U.buildStyleObject(style)}
+			aria-label={`subsequence-${id}`}
 		>
 			{interpret(features, logFunction)(bindings)(label)}
 		</div>

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/default-option-renderer.js

@@ -1,19 +1,27 @@
-import React from 'react';
-import classnames from 'classnames';
-
-function DefaultOptionRenderer({ option, selected }) {
-	const { id, label } = option;
-	return (
-		<div className={classnames('lunatic-suggester-option', { selected })}>
-			<span className="id">{id}</span>
-			{label && (
-				<>
-					<span> - </span>
-					<span className="label">{label}</span>
-				</>
-			)}
-		</div>
-	);
-}
-
-export default DefaultOptionRenderer;
+import React from 'react';
+import classnames from 'classnames';
+
+function DefaultOptionRenderer({ option, selected }) {
+	const { id, label } = option;
+
+	if (label && label.length) {
+		return (
+			<div className={classnames('lunatic-suggester-option', { selected })}>
+				<span className="id">{id}</span>
+				{label && (
+					<>
+						<span> - </span>
+						<span className="label">{label}</span>
+					</>
+				)}
+			</div>
+		);
+	}
+	return (
+		<div className={classnames('lunatic-suggester-option', { selected })}>
+			<span className="id">{id}</span>
+		</div>
+	);
+}
+
+export default DefaultOptionRenderer;

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}

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

@@ -1,21 +1,21 @@
-import React from 'react';
-import classnames from 'classnames';
-
-function PanelContainer({ children, focused, expended, id }) {
-	return (
-		<ul
-			id={id}
-			tabIndex="-1"
-			aria-label="suggestions"
-			className={classnames('lunatic-suggester-panel', {
-				focused,
-				expended,
-			})}
-			role="listbox"
-		>
-			{children}
-		</ul>
-	);
-}
-
-export default PanelContainer;
+import React from 'react';
+import classnames from 'classnames';
+
+function PanelContainer({ children, focused, expended, id }) {
+	return (
+		<ul
+			id={id}
+			tabIndex="-1"
+			aria-label="suggestions"
+			className={classnames('lunatic-suggester-panel', {
+				focused,
+				expended,
+			})}
+			role="listbox"
+		>
+			{children}
+		</ul>
+	);
+}
+
+export default PanelContainer;

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

@@ -3,14 +3,21 @@ import { SuggesterContext } from '../../state-management';
 import PanelContainer from './panel-container';
 import OptionContainer from './option-container';
 
-function getContent(options, OptionRender, selectedIndex, expended, value) {
+function getContent({
+	options,
+	OptionRender,
+	selectedIndex,
+	expended,
+	value,
+	search,
+}) {
 	if (expended) {
 		return options.map(function (option, index) {
 			const { id } = option;
 			const selected = selectedIndex === index;
 			return (
 				<OptionContainer key={id} index={index} selected={id === value}>
-					<OptionRender option={option} selected={selected} />
+					<OptionRender option={option} selected={selected} search={search} />
 				</OptionContainer>
 			);
 		});
@@ -20,14 +27,15 @@ function getContent(options, OptionRender, selectedIndex, expended, value) {
 
 function Panel({ optionRenderer: OptionRender, value }) {
 	const [state] = useContext(SuggesterContext);
-	const { options, focused, selectedIndex, expended, id } = state;
-	const content = getContent(
+	const { options, focused, selectedIndex, expended, id, search } = state;
+	const content = getContent({
 		options,
 		OptionRender,
 		selectedIndex,
 		expended,
-		value
-	);
+		value,
+		search,
+	});
 
 	return (
 		<PanelContainer expended={expended} focused={focused} id={`${id}-list`}>