@inseefr/lunatic 0.1.13-hackathon → 0.2.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

@@ -12,166 +12,29 @@
 
 .lunatic-component {
 	.lunatic-dropdown {
-		display: block;
-		width: 100%;
-		margin-bottom: 1.5rem;
-		&:focus {
-			outline: none;
-		}
-
-		&.label-left {
-			display: flex;
-			flex-direction: row;
-		}
-
-		&.label-right {
-			display: flex;
-			flex-direction: row-reverse;
-		}
-
-		&.label-top {
-			display: flex;
-			flex-direction: column;
-		}
-
-		&.label-bottom {
-			display: flex;
-			flex-direction: column-reverse;
-		}
-
-		.lunatic-dropdown-label {
-			opacity: 1;
-		}
-
-		.lunatic-dropdown-container {
-			ul {
-				padding-inline-start: 0px;
-				font-size: 1rem;
+		.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;
 			}
-			position: relative;
-			height: 2em;
-			width: 100%;
-			z-index: 1;
 
-			&.focused {
-				z-index: 2;
+			&:hover {
+				background-color: var(--color-primary-main);
+				color: white;
 			}
-			&:focus {
-				outline: none;
-			}
-
-			.lunatic-dropdown-content {
-				// background-color: var(--color-very-very-light);
-				border-color: white;
-				left: 0;
-				top: 0;
-				width: 100%;
-				height: 100%;
-				position: absolute;
-				height: auto;
-				&.visible {
-					// border-radius: 0 0 16px 16px;
-					height: auto;
-				}
-
-				&.disabled {
-					background-color: var(--color-disabled);
-				}
-
-				.lunatic-dropdown-input {
-					border-bottom: 1px solid var(--color-primary-dark);
-					padding: 6px 0 7px;
-					input {
-						@include defaultFont();
-						@include disableSelect();
-						margin: 0px 25px 0px 0px;
-						width: calc(100% - 37px);
-						background-color: transparent;
-						border-color: transparent;
-						height: 2em;
-						border: none;
-						outline: none;
-						text-align: left;
-						cursor: inherit;
-					}
-					&:hover {
-						cursor: pointer;
-						border-bottom: 2px solid var(--color-primary-main);
-					}
-					&.focused {
-						background-color: rgba(0, 0, 0, 0.05);
-						box-shadow: 12px 0 rgba(0, 0, 0, 0.05);
-					}
-				}
-
-				.lunatic-dropdown-icon {
-					cursor: pointer;
-					position: absolute;
-					right: 2px;
-					top: 2px;
-					svg {
-						fill: rgb(146, 146, 146);
-					}
-				}
-
-				.lunatic-transition {
-					opacity: 0;
 
-					&:focus {
-						outline: none;
-					}
-
-					&.visible {
-						visibility: visible;
-						opacity: 1;
-						transition: opacity var(--dropdown-transition-time) ease-out;
-					}
-
-					.lunatic-dropdown-panel-container {
-						box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.9),
-							0px 3px 4px 0px rgba(0, 0, 0, 0.14),
-							0px 1px 8px 0px rgba(0, 0, 0, 0.12);
-
-						.lunatic-dropdown-panel {
-							background-color: white;
-							margin: 0 0 12px 0;
-							border-radius: 4px;
-							z-index: 3;
-							padding-top: 3px;
-							list-style: none;
-							&:focus {
-								outline: none;
-							}
-							max-height: 100px;
-							overflow-y: auto;
-						}
-					}
-
-					/** options style */
-					.lunatic-dropdown-option {
-						padding-left: 10px;
-						cursor: pointer;
-						@include defaultFont();
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						color: black;
-						line-height: 2rem;
-						display: block;
-						&.lunatic-dropdown-option-active {
-							color: var(--color-primary-dark);
-							background-color: var(--color-dropdown-active);
-						}
-						&.lunatic-dropdown-option-selected {
-							background-color: var(--color-dropdown-selected);
-						}
+			.prefix {
+				color: red;
+			}
 
-						.lunatic-prefix {
-							color: var(--color-prefix);
-							font-weight: bold;
-						}
-					}
-				}
+			.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

@@ -1,42 +1,14 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { interpret } from '../../utils/to-expose';
-import { buildStyleObject } from '../../utils/lib';
-
-const FilterDescription = ({
-	id,
-	label,
-	filterDescription,
-	features,
-	bindings,
-	style,
-	logFunction,
-}) =>
-	filterDescription ? (
-		<div
-			id={`filter-description-${id}`}
-			aria-label={`filter-description`}
-			className="filter-description-lunatic"
-			style={buildStyleObject(style)}
-		>
-			{interpret(features, logFunction)(bindings)(label)}
-		</div>
-	) : null;
-
-FilterDescription.defaultProps = {
-	filterDescription: false,
-	features: [],
-	bindings: {},
-	style: {},
-};
-
-FilterDescription.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	filterDescription: PropTypes.bool,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	style: PropTypes.object,
-};
-
-export default FilterDescription;
+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/filter-description/index.js

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

package/src/components/index.js

@@ -1,3 +1,3 @@
-export * from './components';
-export { default as Table } from './table';
-export * from '../utils/to-expose';
+export * from './components';
+export { default as Table } from './table';
+export * from '../utils/to-expose';

package/src/components/index.scss

@@ -121,32 +121,12 @@
 		display: inline;
 	}
 
-	.tooltip {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.field-with-tooltip {
-		width: calc(100% - 25px);
-		position: relative;
-	}
 
 	.field {
 		width: 100%;
 		position: relative;
 	}
 
-	.field,
-	.field-with-tooltip {
-		display: flex;
-		.unit {
-			margin: auto 0;
-			color: var(--color-primary-dark);
-			font-weight: bold;
-		}
-	}
 
 	.link-md .field-md {
 		border-bottom: dashed 0.1em var(--color-primary-dark);
@@ -156,22 +136,4 @@
 			background-color: var(--color-primary-dark);
 		}
 	}
-
-	.link-md .tooltip-content {
-		min-width: 15em;
-		max-width: 25em;
-		background: var(--color-primary-dark);
-		color: var(--color-primary-contrast-text);
-		padding: 0.5em;
-		border-radius: 6px;
-		font-size: 1em;
-		&.place-bottom {
-			&::before {
-				border-bottom: 10px solid var(--color-primary-dark);
-			}
-			&::after {
-				content: none;
-			}
-		}
-	}
 }

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,11 +1,48 @@
-import React from 'react';
-import { InputDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import componentWrapper from '../component-wrapper';
-import './input.scss';
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { createCustomizableLunaticField } from '../commons';
 
-const Input = (props) => (
-	<InputDeclarationsWrapper type="text" roleType="input" {...props} />
-);
+function checkValue(value) {
+	return value || '';
+}
 
-export default componentWrapper(React.memo(Input, areEqual));
+function Input({
+	value,
+	onChange,
+	disabled,
+	required,
+	maxLength,
+	id,
+	labelledBy,
+}) {
+	const handleChange = useCallback(
+		function (e) {
+			const value = e.target.value;
+			onChange(value);
+		},
+		[onChange]
+	);
+	return (
+		<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 = {
+	disabled: false,
+	required: true,
+	maxLength: Number.MAX_SAFE_INTEGER,
+};
+
+export default createCustomizableLunaticField(Input);

package/src/components/input/input.scss

@@ -1,7 +1,7 @@
 .lunatic-component {
-	.input-lunatic,
-	.datepicker-lunatic,
-	.textarea-lunatic {
+	.lunatic-input,
+	.lunatic-datepicker,
+	.lunatic-textarea {
 		font: inherit;
 		border: 0;
 		border-bottom: 0.125rem double rgba(0, 0, 0, 0.42);

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';

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { createCustomizableLunaticField } from '../commons';
+import './input-number.scss';
+
+function InputNumber({
+	value,
+	onChange,
+	disabled,
+	readOnly,
+	labelId,
+	min,
+	max,
+	step,
+}) {
+	const valueEffective = value ?? '';
+	const handleChange = useCallback(
+		function (e) {
+			const val = e.target.value;
+			onChange(val);
+		},
+		[onChange]
+	);
+	return (
+		<input
+			className={classnames('lunatic-input', { disabled, readOnly })}
+			type="number"
+			onChange={handleChange}
+			value={valueEffective}
+			labelledby={labelId}
+			readOnly={readOnly}
+			disabled={disabled}
+			min={min}
+			max={max}
+			step={step}
+		/>
+	);
+}
+
+export default createCustomizableLunaticField(InputNumber);

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

@@ -0,0 +1,8 @@
+import InputNumber from './input-number';
+import { createLunaticComponent } from '../commons';
+
+const LunaticInputNumber = createLunaticComponent(InputNumber, {
+	inputId: 'lunatic-input-number',
+});
+
+export default LunaticInputNumber;

package/src/components/loop/block-for-loop/block-for-loop-ochestrator.js

@@ -0,0 +1,6 @@
+import { createRowOrchestrator } from '../../commons';
+import Row from './row';
+
+const BlockForLoopOrchestrator = createRowOrchestrator(Row);
+
+export default BlockForLoopOrchestrator;