@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/src/{utils/lib/prop-types/lines.js → components/commons/prop-types/response.js}

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
 export default PropTypes.shape({
-	min: PropTypes.number,
-	max: PropTypes.number,
+	name: PropTypes.string,
+	values: PropTypes.shape({}),
 });

package/src/components/commons/prop-types/value-type.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import * as C from 'utils/constants';
+
+export default PropTypes.oneOf([
+	C.COLLECTED,
+	C.PREVIOUS,
+	C.FORCED,
+	C.EDITED,
+	C.INPUTED,
+]);

package/src/components/commons/safety-label.js

@@ -0,0 +1,25 @@
+import { isElement } from 'utils/is-element';
+
+function safetyLabel(label) {
+	if (
+		typeof label === 'string' ||
+		typeof label === 'boolean' ||
+		typeof label === 'number'
+	) {
+		return label;
+	}
+	if (typeof label === 'object') {
+		if (isElement(label)) return label;
+		const { value } = label;
+		if (typeof value === 'string') {
+			return value;
+		}
+	}
+	if (typeof label === 'function') {
+		return label;
+	}
+
+	return ``;
+}
+
+export default safetyLabel;

package/src/components/commons/use-document-add-event-listener.js

@@ -0,0 +1,63 @@
+import { useEffect } from 'react';
+
+const CALLBACKS = {};
+
+function getSignature(event, options = {}) {
+	return Object.entries(options).reduce(function (a, [k, v]) {
+		return `${a}-${k}-${v}`;
+	}, event);
+}
+
+function createListener(event, options) {
+	const signature = getSignature(event, options);
+	const listener = function (e) {
+		if (signature in CALLBACKS) {
+			const { callbacks } = CALLBACKS[signature];
+			callbacks.forEach(function (c) {
+				c(e);
+			});
+		}
+	};
+	document.addEventListener(event, listener, options);
+	return listener;
+}
+
+function unmount(event, callback, options) {
+	const signature = getSignature(event, options);
+	if (signature in CALLBACKS) {
+		const { listener, callbacks } = CALLBACKS[signature];
+		const index = callbacks.indexOf(callback);
+		CALLBACKS[signature].callbacks.splice(index, 1);
+		if (CALLBACKS[signature].callbacks.length === 0) {
+			delete CALLBACKS[signature];
+			document.removeEventListener(event, listener);
+		}
+	}
+}
+
+function mount(event, callback, options) {
+	const signature = getSignature(event, options);
+	if (!(signature in CALLBACKS)) {
+		const listener = createListener(event, options);
+		CALLBACKS[signature] = { listener, callbacks: [callback] };
+	} else {
+		CALLBACKS[signature] = {
+			...CALLBACKS[signature],
+			callbacks: [...CALLBACKS[signature].callbacks, callback],
+		};
+	}
+}
+
+function useDocumentAddEventListener(event, callback, options) {
+	useEffect(
+		function () {
+			mount(event, callback, options);
+			return function () {
+				unmount(event, callback, options);
+			};
+		},
+		[event, callback, options]
+	);
+}
+
+export default useDocumentAddEventListener;

package/src/components/commons/use-on-handle-change.js

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+
+function useOnHandleChange({ handleChange, response, value }) {
+	const onHandlechange = useCallback(
+		function (valueOption) {
+			if (value !== valueOption) {
+				handleChange(response, valueOption);
+			}
+		},
+		[handleChange, response, value]
+	);
+
+	return onHandlechange;
+}
+
+export default useOnHandleChange;

package/src/components/commons/use-options-keydown.js

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+
+function useOptionsKeydown(options, onClick) {
+	const onKeyDown = useCallback(
+		function ({ key, index }) {
+			const { length } = options;
+
+			if (key === 'ArrowRight' || key === 'ArrowDown') {
+				const next = index === length - 1 ? 0 : index + 1;
+				onClick(options[next].value);
+			} else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+				const next = index === 0 ? length - 1 : index - 1;
+				onClick(options[next].value);
+			}
+		},
+		[onClick, options]
+	);
+
+	return onKeyDown;
+}
+
+export default useOptionsKeydown;

package/src/components/commons/use-previous.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+function usePrevious(value) {
+	const ref = useRef();
+	useEffect(() => {
+		ref.current = value;
+	}, [value]);
+	return ref.current;
+}
+
+export default usePrevious;

package/src/components/components.js

@@ -1,13 +1,19 @@
-export { default as Breadcrumb } from './breadcrumb';
 export { default as Button } from './button';
-export { CheckboxGroup, CheckboxOne, CheckboxBoolean } from './checkbox';
+export * from './checkbox';
 export { default as Datepicker } from './datepicker';
 export { default as Declarations } from './declarations';
 export { default as Dropdown } from './dropdown';
-export { Input, InputNumber } from './input';
-export { default as ProgressBar } from './progress-bar';
+export { default as Input } from './input';
+export { default as InputNumber } from './input-number';
+export { default as FilterDescription } from './filter-description';
+export { default as Loop } from './loop';
+export { default as Modal } from './modal-controls';
+export * from './pairwise';
 export { default as Radio } from './radio';
+export { default as RosterForLoop } from './loop';
 export { default as Sequence } from './sequence';
 export { default as Subsequence } from './subsequence';
+export { default as Suggester } from './suggester';
+export { default as Switch } from './switch';
 export { default as Textarea } from './textarea';
-export { TooltipResponse } from './tooltip';
+export { default as SuggesterLoaderWidget } from './suggester-loader-widget';

package/src/components/datepicker/datepicker.js

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import './datepicker.scss';
+
+function Datepicker({ disabled, readOnly, value, onChange, labelId, id }) {
+	const handleChange = useCallback(
+		function (e) {
+			const value = e.target.value;
+			onChange(value);
+		},
+		[onChange]
+	);
+
+	return (
+		<input
+			id={id}
+			className={classnames('lunatic-datepicker', { disabled, readOnly })}
+			type="date"
+			labelledby={labelId}
+			readOnly={readOnly}
+			disabled={disabled}
+			value={value}
+			onChange={handleChange}
+		/>
+	);
+}
+export default Datepicker;

package/src/components/datepicker/datepicker.scss

@@ -1,16 +1 @@
-@import 'src/components/index.scss';
-
-.datepicker-lunatic {
-	width: 100%;
-	box-sizing: border-box;
-	border: solid 2px $main_color;
-	border-radius: 10px;
-	padding: 5px;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 10px $main_color;
-	}
-	&:read-only {
-		background-color: $disabled;
-	}
-}
+// see input.scss

package/src/components/datepicker/index.js

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

package/src/components/datepicker/lunatic-datepicker.js

@@ -0,0 +1,7 @@
+import Datepicker from './datepicker';
+import { createLunaticComponent } from '../commons';
+import './datepicker.scss';
+
+export default createLunaticComponent(Datepicker, {
+	inputId: 'lunatic-datepicker',
+});

package/src/components/declarations/declaration.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classnames from 'classnames';
+import createCustomizableLunaticField from '../commons/create-customizable-field';
+
+function Declaration({ children, type }) {
+	return (
+		<div
+			className={classnames(
+				'declaration-lunatic',
+				`declaration-${type.toLowerCase()}`
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+export default createCustomizableLunaticField(Declaration);

package/src/components/declarations/declarations-after-text.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Declarations, { DECLARATION_POSITIONS } from './declarations';
+
+function DeclarationsAfterText(props) {
+	return <Declarations type={DECLARATION_POSITIONS.after} {...props} />;
+}
+
+export default DeclarationsAfterText;

package/src/components/declarations/declarations-before-text.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Declarations, { DECLARATION_POSITIONS } from './declarations';
+
+function DeclarationsBeforeText(props) {
+	return <Declarations type={DECLARATION_POSITIONS.before} {...props} />;
+}
+
+export default DeclarationsBeforeText;

package/src/components/declarations/declarations-detachable.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Declarations, { DECLARATION_POSITIONS } from './declarations';
+
+function DeclarationsDetachable(props) {
+	return <Declarations type={DECLARATION_POSITIONS.detachable} {...props} />;
+}
+
+export default DeclarationsDetachable;

package/src/components/declarations/declarations.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import './declarations.scss';
+import Declaration from './declaration';
+
+export const DECLARATION_POSITIONS = {
+	after: 'AFTER_QUESTION_TEXT',
+	before: 'BEFORE_QUESTION_TEXT',
+	detachable: 'DETACHABLE',
+};
+
+function Declarations({ id, type, declarations, logFunction, custom }) {
+	const filtered = declarations.filter(({ position }) => position === type);
+	if (filtered.length === 0) return null;
+
+	return (
+		<div id={`declarations-${id}-${type}`} className="lunatic-declarations">
+			{filtered.map(({ id: idD, label, declarationType }) => (
+				<Declaration
+					key={`${idD}`}
+					type={declarationType.toLowerCase()}
+					custom={custom}
+				>
+					{label}
+				</Declaration>
+			))}
+		</div>
+	);
+}
+
+Declarations.defaultProps = {
+	type: 'AFTER_QUESTION_TEXT',
+	declarations: [],
+	features: [],
+	bindings: {},
+};
+
+Declarations.propTypes = {};
+
+export default Declarations;

package/src/components/declarations/declarations.scss

@@ -1,34 +1,36 @@
-.declaration-instruction {
-	font-style: italic;
-	font-size: 80%;
-}
+.lunatic-component {
+	.lunatic-declarations {
+		margin-bottom: 0.4rem;
+	}
 
-.declaration-comment {
-	font-size: 80%;
-}
+	.declaration-instruction {
+		font-style: italic;
+		font-size: 80%;
+	}
 
-.declaration-statement {
-	font-style: italic;
-	font-size: 80%;
-	color: blue;
-}
+	.declaration-statement {
+		font-style: italic;
+		font-size: 80%;
+		color: blue;
+	}
 
-.declaration-help {
-	font-style: italic;
-	font-size: 80%;
-	color: green;
-}
+	.declaration-help {
+		font-style: italic;
+		font-size: 80%;
+		color: green;
+	}
 
-.declaration-warning {
-	font-style: bold;
-	font-size: 80%;
-	color: red;
-}
+	.declaration-codecard {
+		font-style: bold;
+		font-size: 80%;
+		color: purple;
+	}
 
-.declaration-message_filter {
-	font-size: 100%;
-	color: rgb(73, 66, 66);
-	&:before {
-		content: '→ ';
+	.declaration-message_filter {
+		font-size: 100%;
+		color: rgb(73, 66, 66);
+		&:before {
+			content: '→ ';
+		}
 	}
 }

package/src/components/declarations/index.js

@@ -1 +1,4 @@
-export { default } from './component';
+export { default, DECLARATION_POSITIONS } from './declarations';
+export { default as DeclarationsBeforeText } from './declarations-before-text';
+export { default as DeclarationsAfterText } from './declarations-after-text';
+export { default as DeclarationsDetachable } from './declarations-detachable';

package/src/components/dropdown/dropdown-simple/dropdown-simple.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ComboBox } from '../../commons';
+import SimpleOptionRenderer from './simple-option-renderer';
+import SimpleLabelRenderer from './simple-label-renderer';
+
+function DropdownSimple({
+	id,
+	htmlFor,
+	labelId,
+	disabled,
+	options,
+	onSelect,
+	className,
+	value,
+}) {
+	return (
+		<ComboBox
+			id={id}
+			className={className}
+			htmlFor={htmlFor}
+			labelledBy={labelId}
+			disabled={disabled}
+			options={options}
+			editable={false}
+			onSelect={onSelect}
+			optionRenderer={SimpleOptionRenderer}
+			labelRenderer={SimpleLabelRenderer}
+			value={value}
+		/>
+	);
+}
+
+export default DropdownSimple;

package/src/components/dropdown/dropdown-simple/index.js

@@ -0,0 +1 @@
+export { default } from './dropdown-simple';

package/src/components/dropdown/dropdown-simple/simple-label-renderer.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function getContent(option, search) {
+	if (option) {
+		const { value, label } = option;
+		return label ? `${value} - ${label}` : value;
+	}
+	if (search && search.trim().length) {
+		return search;
+	}
+	return null;
+}
+
+function SimpleLabelRenderer({ option, placeholder, search }) {
+	const content = getContent(option, search);
+	if (content) {
+		return <span className="selection">{content}</span>;
+	}
+	return <span className="placeholder">{placeholder}</span>;
+}
+
+SimpleLabelRenderer.propTypes = {
+	option: PropTypes.shape({
+		value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+	}),
+	placeholder: PropTypes.string,
+	search: PropTypes.string,
+};
+
+export default SimpleLabelRenderer;

package/src/components/dropdown/dropdown-simple/simple-option-renderer.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+
+function SimpleOptionRenderer({ option, selected }) {
+	const { value, label } = option;
+
+	if (label && label.length) {
+		return (
+			<div className={classnames('lunatic-dropdown-option', { selected })}>
+				<span className="id">{value}</span>
+				{label && (
+					<>
+						<span>&nbsp;&#x2014;&nbsp;</span>
+						<span className="label">{label}</span>
+					</>
+				)}
+			</div>
+		);
+	}
+	return (
+		<div className={classnames('lunatic-dropdown-option', { selected })}>
+			<span className="id">{value}</span>
+		</div>
+	);
+}
+
+export default SimpleOptionRenderer;

package/src/components/dropdown/dropdown-writable/dropdown-writable.js

@@ -0,0 +1,49 @@
+import React, { useCallback, useState } from 'react';
+import { ComboBox } from '../../commons';
+import WritableOptionRenderer from './writable-option-renderer';
+import WritableLabelRenderer from './writable-label-renderer';
+import filterOptions from './filter-tools/filter-options';
+
+function DropdownWritable({
+	id,
+	htmlFor,
+	labelId,
+	disabled,
+	options,
+	onSelect,
+	className,
+	value,
+}) {
+	const [filtered, setFiltered] = useState(options);
+
+	const onChange = useCallback(
+		function (search) {
+			if (search) {
+				setFiltered(filterOptions(options, search));
+			} else {
+				setFiltered(options);
+			}
+			onSelect(null);
+		},
+		[options, onSelect]
+	);
+
+	return (
+		<ComboBox
+			id={id}
+			className={className}
+			htmlFor={htmlFor}
+			labelledBy={labelId}
+			disabled={disabled}
+			options={filtered}
+			onSelect={onSelect}
+			onChange={onChange}
+			optionRenderer={WritableOptionRenderer}
+			labelRenderer={WritableLabelRenderer}
+			editable={true}
+			value={value}
+		/>
+	);
+}
+
+export default DropdownWritable;

package/src/components/dropdown/dropdown-writable/filter-tools/filter-options.js

@@ -0,0 +1,20 @@
+import match from './match';
+
+/** */
+function filterOptions(options, prefix) {
+	if (!prefix || prefix.length === 0) {
+		return options;
+	}
+
+	return options
+		.reduce((acc, o) => {
+			const { label, search } = o;
+			const how = match(search || label, prefix);
+			return how >= 0.6
+				? [{ o, how }, ...acc].sort((a, b) => a.how <= b.how)
+				: acc;
+		}, [])
+		.map(({ o }) => o);
+}
+
+export default filterOptions;

package/src/components/dropdown/dropdown-writable/filter-tools/letters-matching.js

@@ -0,0 +1,16 @@
+import preparePrefix from './prepare-prefix';
+
+function lettersMatching(label, prefix = '') {
+	const pref = prefix.split('');
+	let pos = -1;
+	const clean = preparePrefix(label);
+	return clean.split('').reduce((a, c, idx) => {
+		if (pos < pref.length && pref[pos + 1] === c) {
+			pos++;
+			return [...a, c];
+		}
+		return a;
+	}, []);
+}
+
+export default lettersMatching;

package/src/components/dropdown/dropdown-writable/filter-tools/match.js

@@ -0,0 +1,18 @@
+import preparePrefix from './prepare-prefix';
+
+function match(label, prefix) {
+	const pref = prefix.split('');
+	let pos = -1;
+	const clean = preparePrefix(label);
+	return (
+		clean.split('').reduce((a, c, idx) => {
+			if (pos < pref.length && pref[pos + 1] === c) {
+				pos++;
+				return a + 1;
+			}
+			return a / (idx * 0.0001 + 1);
+		}, 0) / prefix.length
+	);
+}
+
+export default match;

package/src/components/dropdown/dropdown-writable/filter-tools/prepare-prefix.js

@@ -0,0 +1,9 @@
+import removeAccents from 'remove-accents';
+
+function preparePrefix(prefix) {
+	return typeof prefix === 'string'
+		? removeAccents(prefix.toLowerCase()).replace(/[- ']/g, '')
+		: prefix;
+}
+
+export default preparePrefix;

package/src/components/dropdown/dropdown-writable/index.js

@@ -0,0 +1 @@
+export { default } from './dropdown-writable';

package/src/components/dropdown/dropdown-writable/writable-label-renderer.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+function getContent(option, search) {
+	if (option) {
+		const { value, label } = option;
+		return label ? `${value} - ${label}` : value;
+	}
+	if (search && search.trim().length) {
+		return search;
+	}
+	return null;
+}
+
+function WritableLabelRenderer({ option, placeholder, search }) {
+	const content = getContent(option, search);
+	if (content) {
+		return <span className="selection">{content}</span>;
+	}
+	return <span className="placeholder">{placeholder}</span>;
+}
+
+WritableLabelRenderer.propTypes = {
+	option: PropTypes.shape({
+		value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+	}),
+	placeholder: PropTypes.string,
+	search: PropTypes.string,
+};
+
+export default WritableLabelRenderer;