@inseefr/lunatic 0.2.62 → 0.3.0-v2

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

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react';
+import classnames from 'classnames';
+import lettersMatching from './filter-tools/letters-matching';
+import preparePrefix from './filter-tools/prepare-prefix';
+
+function hightlightSearch(label, prefix) {
+	const initLetters = lettersMatching(label, prefix);
+	return label
+		.split('')
+		.reduce(
+			({ letters, stack }, c) => {
+				const m = preparePrefix(c);
+				const [first, ...rest] = letters;
+				if (m === first) {
+					return {
+						letters: rest,
+						stack: [...stack, { char: c, className: 'prefix' }],
+					};
+				}
+
+				return {
+					letters,
+					stack: [...stack, { char: c, className: 'normal' }],
+				};
+			},
+			{ letters: initLetters, stack: [] }
+		)
+		.stack.reduce(
+			({ last, stack }, { char, className }) => {
+				if (!last) {
+					return { last: className, stack: [{ part: char, className }] };
+				}
+				if (last !== className) {
+					return {
+						last: className,
+						stack: [{ part: char, className }, ...stack],
+					};
+				}
+				const [first, ...rest] = stack;
+				return {
+					last: className,
+					stack: [{ ...first, part: `${first.part}${char}` }, ...rest],
+				};
+			},
+			{ last: undefined, stack: [] }
+		)
+		.stack.reverse();
+}
+
+function WritableOptionRenderer({ option, selected, search }) {
+	const [parts, setParts] = useState([]);
+
+	const { value, label } = option;
+
+	useEffect(
+		function () {
+			setParts(hightlightSearch(label, search));
+		},
+		[search, label]
+	);
+
+	if (parts && parts.length) {
+		return (
+			<div className={classnames('lunatic-dropdown-option', { selected })}>
+				<span className="id">{value}</span>
+				<span>&nbsp;&#x2014;&nbsp;</span>
+				<span className="label">
+					{parts.map(({ part, className }, i) => (
+						<span className={className} key={i}>
+							{part}
+						</span>
+					))}
+				</span>
+			</div>
+		);
+	}
+	return (
+		<div className={classnames('lunatic-dropdown-option', { selected })}>
+			<span className="id">{value}</span>
+		</div>
+	);
+}
+
+export default WritableOptionRenderer;

package/src/components/dropdown/dropdown.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { createCustomizableLunaticField } from '../commons';
+import DropdownSimple from './dropdown-simple';
+import DropdownWritable from './dropdown-writable';
+import './dropdown.scss';
+
+function Dropdown({
+	id,
+	labelId,
+	disabled,
+	options,
+	onSelect,
+	htmlFor,
+	writable,
+	className,
+	value,
+}) {
+	if (writable) {
+		return (
+			<DropdownWritable
+				id={id}
+				className={className}
+				htmlFor={id}
+				labelId={labelId}
+				disabled={disabled}
+				options={options}
+				onSelect={onSelect}
+				value={value}
+			/>
+		);
+	}
+	return (
+		<DropdownSimple
+			id={id}
+			className={className}
+			htmlFor={htmlFor}
+			labelId={labelId}
+			disabled={disabled}
+			options={options}
+			onSelect={onSelect}
+			value={value}
+		/>
+	);
+}
+
+export default createCustomizableLunaticField(Dropdown);

package/src/components/dropdown/dropdown.scss

@@ -1,16 +1,41 @@
-@import 'src/components/index.scss';
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
 
-.dropdown-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;
+@mixin disableSelect {
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* Internet Explorer */
+	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
+	-webkit-user-select: none; /* Chrome, Safari, and Opera */
+	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
+}
+
+.lunatic-component {
+	.lunatic-dropdown {
+		.lunatic-dropdown-option {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			margin-bottom: 0.1em;
+			line-height: 2rem;
+			display: block;
+
+			&.selected {
+				color: var(--color-primary-dark);
+				background-color: goldenrod;
+			}
+
+			&:hover {
+				background-color: var(--color-primary-main);
+				color: white;
+			}
+
+			.prefix {
+				color: red;
+			}
+
+			.normal {
+			}
+		}
 	}
 }

package/src/components/dropdown/index.js

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

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createLunaticComponent } from '../commons';
+import Dropdown from './dropdown';
+
+function LunaticDropdown({
+	id,
+	onChange,
+	options,
+	writable,
+	disabled,
+	htmlFor,
+	labelId,
+	value,
+}) {
+	return (
+		<Dropdown
+			id={id}
+			htmlFor={htmlFor}
+			labelId={labelId}
+			writable={writable}
+			disabled={disabled}
+			options={options}
+			editable={writable}
+			onSelect={onChange}
+			value={value}
+			className="lunatic-dropdown"
+		/>
+	);
+}
+
+LunaticDropdown.propTypes = {
+	id: PropTypes.string.isRequired,
+	handleChange: PropTypes.func.isRequired,
+	options: PropTypes.arrayOf(
+		PropTypes.shape({
+			label: PropTypes.string.isRequired,
+			value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+				.isRequired,
+		})
+	).isRequired,
+	disabled: PropTypes.bool,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.array,
+	]),
+};
+
+LunaticDropdown.defaultProps = {
+	disabled: false,
+	value: null,
+};
+
+export default createLunaticComponent(LunaticDropdown);

package/src/components/filter-description/component.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const FilterDescription = ({ id, label, filterDescription }) =>
+	filterDescription ? (
+		<div
+			id={`filter-description-${id}`}
+			aria-label={`filter-description`}
+			className="filter-description-lunatic"
+		>
+			{label}
+		</div>
+	) : null;
+
+export default FilterDescription;

package/src/components/index.js

@@ -1,4 +1,3 @@
 export * from './components';
-// Avoid circular deps
 export { default as Table } from './table';
-export * from '../utils/to-expose';
+export { default as useLunatic } from '../use-lunatic';

package/src/components/index.scss

@@ -1,23 +1,26 @@
-// Define colors
-$main_color: #e80a4d;
-$second_color: #e07898;
-$progress_back: #d3d3d3;
-$background-warning: rgb(245, 12, 12);
-$disabled: rgb(235, 235, 228);
-
 * {
 	box-sizing: border-box;
-	font-family: 'Gotham SSm A', 'Gotham SSm B', sans-serif;
-}
+	--color-primary-dark: #2a5885;
+	--color-primary-light: #5181b8;
+	--color-primary-main: #4a73a4;
+	--color-primary-contrast-text: #ffffff;
 
-.required:after {
-	content: ' *';
-	color: red;
-}
+	--color-secondary-dark: #14202d;
+	--color-secondary-light: #f7f8fa;
+	--color-secondary-main: #1a293b;
+	--color-secondary-contrast-text: #ffffff;
+
+	--color-very-light: #dbe4ef;
+	--color-very-very-light: #e6eaee;
+	--color-current-item: #0d823e;
+
+	--color-error: #f50c0c;
+	--color-disabled: rgb(235, 235, 228);
+	--color-prefix: cornflowerblue;
+	--color-dropdown-active: rgba(0, 0, 0, 0.04);
+	--color-dropdown-selected: rgba(0, 0, 0, 0.08);
 
-.horizontal-options {
-	display: inline-block;
-	margin-right: 2em;
+	--dropdown-transition-time: 0.5s;
 }
 
 @mixin vertical-placement($reverse: false) {
@@ -29,47 +32,108 @@ $disabled: rgb(235, 235, 228);
 	display: flex;
 	flex-direction: if($reverse, row-reverse, row);
 	align-items: baseline;
+
 	:first-child {
 		margin-right: 1rem;
 	}
 }
 
-label {
-	margin-bottom: 0.5em;
-}
+.lunatic-component {
+	.mandatory:after {
+		content: ' *';
+		color: red;
+	}
 
-.label-top {
-	@include vertical-placement();
-}
-.label-bottom {
-	@include vertical-placement(true);
-}
-.label-right {
-	justify-content: flex-end;
-	@include horizontal-placement(true);
-}
-.label-left {
-	@include horizontal-placement();
-}
+	.horizontal-options {
+		display: inline-block;
+		margin-right: 2em;
+	}
 
-.field-container {
-	display: flex;
-}
+	// Label & Legend
+	label,
+	legend,
+	.subsequence-lunatic,
+	.lunatic-dropdown-label,
+	.lunatic-dropdown-label focused {
+		color: var(--color-primary-dark);
+		background-color: var(--color-primary-contrast-text);
+		border: 0;
+		padding: 0;
+		font-size: 0.75rem;
+		font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+		line-height: 0.75rem;
+		font-weight: bold;
+		margin-bottom: 0.375rem;
+	}
 
-.tooltip {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
+	/* refactor proposition */
 
-.field-with-tooltip {
-	display: flex;
-	flex-direction: column;
-}
+	// .lunatic-component {
+	// 	width: fit-content;
+	// }
 
-.field {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
+	.lunatic-component-container {
+		display: flex;
+
+		&.label-left-ex {
+			flex-direction: row;
+			align-items: baseline;
+			.lunatic-label {
+				margin-right: 1em;
+			}
+		}
+		&.label-right-ex {
+			flex-direction: row-reverse;
+			align-items: baseline;
+			.lunatic-label {
+				margin-left: 1em;
+			}
+		}
+		&.label-top-ex {
+			flex-direction: column;
+		}
+		&.label-bottom-ex {
+			flex-direction: column-reverse;
+		}
+	}
+
+	/******/
+
+	.label-top {
+		@include vertical-placement();
+	}
+	.label-bottom {
+		@include vertical-placement(true);
+	}
+	.label-right {
+		justify-content: flex-end;
+		@include horizontal-placement(true);
+	}
+	.label-left {
+		@include horizontal-placement();
+	}
+
+	.field-container {
+		display: flex;
+	}
+
+	.modality-label p {
+		display: inline;
+	}
+
+
+	.field {
+		width: 100%;
+		position: relative;
+	}
+
+
+	.link-md .field-md {
+		border-bottom: dashed 0.1em var(--color-primary-dark);
+		&:hover {
+			cursor: help;
+			color: var(--color-primary-contrast-text);
+			background-color: var(--color-primary-dark);
+		}
+	}
 }

package/src/components/input/index.js

@@ -1,2 +1 @@
-export { default as Input } from './input';
-export { default as InputNumber } from './input-number';
+export { default } from './lunatic-input';

package/src/components/input/input.js

@@ -1,118 +1,48 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './input.scss';
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { createCustomizableLunaticField } from '../commons';
 
-const Input = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	readOnly,
-	autoComplete,
-	labelPosition,
-	required,
-	declarations,
-	focused,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
+function checkValue(value) {
+	return value || '';
+}
 
+function Input({
+	value,
+	onChange,
+	disabled,
+	required,
+	maxLength,
+	id,
+	labelledBy,
+}) {
+	const handleChange = useCallback(
+		function (e) {
+			const value = e.target.value;
+			onChange(value);
+		},
+		[onChange]
+	);
 	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				{label && (
-					<label
-						htmlFor={`input-${id}`}
-						id={`input-label-${id}`}
-						className={`${required ? 'required' : ''}`}
-					>
-						{label}
-					</label>
-				)}
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-				/>
-				<div className="field-container">
-					<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-						<input
-							type="text"
-							id={`input-${id}`}
-							ref={inputRef}
-							value={U.getResponseByPreference(preferences)(response)}
-							placeholder={placeholder}
-							autoComplete={autoComplete ? 'on' : 'off'}
-							className="input-lunatic"
-							style={U.buildStyleObject(style)}
-							readOnly={readOnly}
-							required={required}
-							aria-required={required}
-							onChange={e =>
-								handleChange({
-									[U.getResponseName(response)]: e.target.value,
-								})
-							}
-						/>
-					</div>
-					{tooltip && (
-						<div className="tooltip">
-							<TooltipResponse id={id} response={response} />
-						</div>
-					)}
-				</div>
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
+		<input
+			id={id}
+			labelledbby={labelledBy}
+			autoComplete="off"
+			type="text"
+			disabled={disabled}
+			className={classnames('lunatic-input')}
+			value={checkValue(value)}
+			onChange={handleChange}
+			aria-required={required}
+			required={required}
+			maxLength={maxLength}
+		/>
 	);
-};
+}
 
 Input.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	placeholder: '',
-	readOnly: false,
-	autoComplete: false,
-	labelPosition: 'DEFAULT',
-	required: false,
-	focused: false,
-	declarations: [],
-	tooltip: false,
-	style: {},
-};
-
-Input.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	readOnly: PropTypes.bool,
-	autoComplete: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	required: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
+	disabled: false,
+	required: true,
+	maxLength: Number.MAX_SAFE_INTEGER,
 };
 
-export default Input;
+export default createCustomizableLunaticField(Input);

package/src/components/input/input.scss

@@ -1,27 +1,31 @@
-@import 'src/components/index.scss';
-
-.input-lunatic {
-	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;
+.lunatic-component {
+	.lunatic-input,
+	.lunatic-datepicker,
+	.lunatic-textarea {
+		font: inherit;
+		border: 0;
+		border-bottom: 0.125rem double rgba(0, 0, 0, 0.42);
+		margin: 0;
+		padding: 0.375rem 0 0.375rem 0.4375rem;
+		display: block;
+		min-width: 0;
+		box-sizing: content-box;
+		background: none;
+		&:focus {
+			outline: none;
+			border-bottom: 0.125rem solid var(--color-primary-main);
+		}
+		&:hover {
+			border-bottom: 0.125rem solid black;
+		}
+		&:read-only {
+			background-color: var(--color-disabled);
+		}
 	}
-}
-
-.warning {
-	box-sizing: border-box;
-	border: solid 2px $background-warning;
-	background-color: $background-warning;
-}
 
-.lunatic-input-number-errors {
-	.error {
-		color: $background-warning;
+	.warning {
+		box-sizing: border-box;
+		border: solid 2px var(--color-error);
+		background-color: var(--color-error);
 	}
 }

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

@@ -0,0 +1,13 @@
+import Input from './input';
+import { createLunaticComponent } from '../commons';
+import './input.scss';
+
+const LunaticInput = createLunaticComponent(Input, {
+	inputId: 'lunatic-input',
+});
+
+LunaticInput.defaultProps = {
+	className: 'todo',
+};
+
+export default LunaticInput;

package/src/components/input-number/index.js

@@ -0,0 +1 @@
+export { default } from './lunatic-input-number';