@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

package/src/components/dropdown/component.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
+import componentWrapper from '../component-wrapper';
 import DropdownSimple from './dropdown-simple';
 import DropdownEdit from './dropdown-edit';
 import Declarations from '../declarations';
@@ -9,127 +9,133 @@ import * as C from '../../constants';
 import { interpret } from '../../utils/to-expose';
 import './dropdown.scss';
 
-function compileFeatures(features = []) {
-	return features.reduce((acc, f) => (f === 'MD' ? acc : [...acc, f]), []);
-}
+// function compileFeatures(features = []) {
+// 	return features.reduce((acc, f) => (f === 'MD' ? acc : [...acc, f]), []);
+// }
+
+// const Dropdown = ({
+// 	id,
+// 	label,
+// 	preferences,
+// 	response,
+// 	handleChange,
+// 	options,
+// 	writable,
+// 	declarations,
+// 	features,
+// 	bindings,
+// 	management,
+// 	freezeOptions,
+// 	...rest
+// }) => {
+// 	const [opts, setOpts] = useState(options);
 
-const Dropdown = ({
-	id,
-	label,
-	preferences,
-	response,
-	handleChange,
-	options,
-	writable,
-	declarations,
-	features,
-	bindings,
-	management,
-	freezeOptions,
-	...rest
-}) => {
-	const [opts, setOpts] = useState(options);
+// 	//TODO: improve feature support for MD, adding plainText to options & search input
+// 	const updatedFeatures = useMemo(() => compileFeatures(features), [features]);
 
-	//TODO: improve feature support for MD, adding plainText to options & search input
-	const updatedFeatures = useMemo(() => compileFeatures(features), [features]);
+// 	useEffect(() => {
+// 		if (!freezeOptions) {
+// 			const featOptions = options.map(
+// 				({ label: labelOption, ...restOpts }) => ({
+// 					label: interpret(updatedFeatures)(bindings)(labelOption),
+// 					...restOpts,
+// 				})
+// 			);
+// 			setOpts(featOptions);
+// 		}
+// 	}, [freezeOptions, updatedFeatures, features, bindings, options]);
 
-	useEffect(() => {
-		if (!freezeOptions) {
-			const featOptions = options.map(
-				({ label: labelOption, ...restOpts }) => ({
-					label: interpret(updatedFeatures)(bindings)(labelOption),
-					...restOpts,
-				})
-			);
-			setOpts(featOptions);
-		}
-	}, [freezeOptions, updatedFeatures, features, bindings, options]);
+// 	const interpretedLabel = interpret(features, rest?.logFunction)(bindings)(
+// 		label
+// 	);
+// 	const value = U.getResponseByPreference(preferences)(response);
 
-	const interpretedLabel = interpret(features, rest?.logFunction)(bindings)(
-		label
-	);
-	const value = U.getResponseByPreference(preferences)(response);
+// 	const onSelect = (e) =>
+// 		handleChange({
+// 			[U.getResponseName(response)]: e.value,
+// 		});
 
-	const onSelect = (e) =>
-		handleChange({
-			[U.getResponseName(response)]: e.value,
-		});
+// 	const DeclarationAfterLabel = () => (
+// 		<Declarations
+// 			id={id}
+// 			type={C.AFTER_QUESTION_TEXT}
+// 			declarations={declarations}
+// 			features={features}
+// 			bindings={bindings}
+// 		/>
+// 	);
 
-	const DeclarationAfterLabel = () => (
-		<Declarations
-			id={id}
-			type={C.AFTER_QUESTION_TEXT}
-			declarations={declarations}
-			features={features}
-			bindings={bindings}
-		/>
-	);
+// 	return (
+// 		<>
+// 			<Declarations
+// 				id={id}
+// 				type={C.BEFORE_QUESTION_TEXT}
+// 				declarations={declarations}
+// 				features={features}
+// 				bindings={bindings}
+// 			/>
+// 			{writable ? (
+// 				<DropdownEdit
+// 					{...rest}
+// 					id={id}
+// 					value={value}
+// 					response={response}
+// 					label={interpretedLabel}
+// 					options={opts}
+// 					onSelect={onSelect}
+// 					management={management}
+// 					DeclarationAfterLabel={DeclarationAfterLabel}
+// 				/>
+// 			) : (
+// 				<DropdownSimple
+// 					{...rest}
+// 					id={id}
+// 					value={value}
+// 					response={response}
+// 					label={interpretedLabel}
+// 					options={opts}
+// 					onSelect={onSelect}
+// 					management={management}
+// 					DeclarationAfterLabel={DeclarationAfterLabel}
+// 				/>
+// 			)}
+// 			<Declarations
+// 				id={id}
+// 				type={C.DETACHABLE}
+// 				declarations={declarations}
+// 				features={features}
+// 				bindings={bindings}
+// 			/>
+// 		</>
+// 	);
+// };
 
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			{writable ? (
-				<DropdownEdit
-					{...rest}
-					id={id}
-					value={value}
-					response={response}
-					label={interpretedLabel}
-					options={opts}
-					onSelect={onSelect}
-					management={management}
-					DeclarationAfterLabel={DeclarationAfterLabel}
-				/>
-			) : (
-				<DropdownSimple
-					{...rest}
-					id={id}
-					value={value}
-					response={response}
-					label={interpretedLabel}
-					options={opts}
-					onSelect={onSelect}
-					management={management}
-					DeclarationAfterLabel={DeclarationAfterLabel}
-				/>
-			)}
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
+// Dropdown.propTypes = {
+// 	disabled: PropTypes.bool,
+// 	writable: PropTypes.bool,
+// 	features: PropTypes.arrayOf(PropTypes.string),
+// 	handleChange: PropTypes.func,
+// 	label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+// 	className: PropTypes.string,
+// 	zIndex: PropTypes.number,
+// 	freezeOptions: PropTypes.bool,
+// };
 
-Dropdown.propTypes = {
-	disabled: PropTypes.bool,
-	writable: PropTypes.bool,
-	features: PropTypes.arrayOf(PropTypes.string),
-	handleChange: PropTypes.func,
-	label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-	className: PropTypes.string,
-	zIndex: PropTypes.number,
-	freezeOptions: PropTypes.bool,
-};
+// Dropdown.defaultProps = {
+// 	writable: false,
+// 	handleChange: () => null,
+// 	features: [],
+// 	label: undefined,
+// 	className: undefined,
+// 	zIndex: 0,
+// 	disabled: false,
+// 	freezeOptions: false,
+// };
 
-Dropdown.defaultProps = {
-	writable: false,
-	handleChange: () => null,
-	features: [],
-	label: undefined,
-	className: undefined,
-	zIndex: 0,
-	disabled: false,
-	freezeOptions: false,
-};
+// export default componentWrapper(React.memo(Dropdown, U.areEqual));
+
+function Dropdown() {
+	return null;
+}
 
-export default missingWrapper(React.memo(Dropdown), U.areEqual);
+export default Dropdown;

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

@@ -67,6 +67,12 @@ function Dropdown({
 
 	const selectedOption = options.find((o) => o.label === value);
 
+	useEffect(() => {
+		if (visible && !activeIndex) {
+			dispatch(actions.initActiveIndex());
+		}
+	}, [activeIndex, visible]);
+
 	useEffect(
 		function () {
 			const { current } = inputEl;

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

@@ -1,4 +1,4 @@
-import React, { useReducer, useRef } from 'react';
+import React, { useReducer, useRef, useEffect } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import * as actions from '../commons/actions';
@@ -37,6 +37,13 @@ const Dropdown = ({
 	const { focused, visible, activeIndex, id } = state;
 	const onSelect_ = createOnSelect(state, dispatch, onSelect);
 	const selectedOption = options.find((o) => o.value === value);
+
+	useEffect(() => {
+		if (visible && !activeIndex) {
+			dispatch(actions.initActiveIndex());
+		}
+	}, [activeIndex, visible]);
+
 	return (
 		<DropdownContainer
 			className={className || 'lunatic-dropdown'}

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

@@ -1,42 +1,48 @@
-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';
+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;
+
+function FilterDescription() {
+	return null;
+}
+
+export default FilterDescription;

package/src/components/icon/component.js

@@ -1,33 +1,31 @@
-import React from 'react';
-import {
-	CheckboxChecked,
-	CheckboxUnchecked,
-	RadioChecked,
-	RadioUnchecked,
-} from './assets';
-import './icon.scss';
-
-const Content = ({ type, checked }) => {
-	if (type === 'radio') {
-		if (checked) return <RadioChecked />;
-		return <RadioUnchecked />;
-	}
-	if (type === 'checkbox') {
-		if (checked) return <CheckboxChecked />;
-		return <CheckboxUnchecked />;
-	}
-	return null;
-};
-
-const Icon = ({ type, checked, disabled, children }) => (
-	<>
-		<span className={`list-icon-wrapper`}>
-			<span className={`list-icon ${disabled ? 'list-icon-disabled' : ''}`}>
-				<Content type={type} checked={checked} />
-			</span>
-			{children}
-		</span>
-	</>
-);
-
-export default Icon;
+import React from 'react';
+import {
+	CheckboxChecked,
+	CheckboxUnchecked,
+	RadioChecked,
+	RadioUnchecked,
+} from './assets';
+import './icon.scss';
+
+const Content = ({ type, checked }) => {
+	if (type === 'radio') {
+		if (checked) return <RadioChecked />;
+		return <RadioUnchecked />;
+	}
+	if (type === 'checkbox') {
+		if (checked) return <CheckboxChecked />;
+		return <CheckboxUnchecked />;
+	}
+	return null;
+};
+
+const Icon = ({ type, checked, disabled, children }) => (
+	<span className={`list-icon-wrapper`}>
+		<span className={`list-icon ${disabled ? 'list-icon-disabled' : ''}`}>
+			<Content type={type} checked={checked} />
+		</span>
+		{children}
+	</span>
+);
+
+export default Icon;

package/src/components/index.scss

@@ -67,9 +67,11 @@
 	}
 
 	/* refactor proposition */
-	.lunatic-component {
-		width: fit-content;
-	}
+
+	// .lunatic-component {
+	// 	width: fit-content;
+	// }
+
 	.lunatic-component-container {
 		display: flex;
 

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,47 @@
-import React from 'react';
-import { InputDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import missingWrapper from '../missing-wrapper';
-import './input.scss';
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
 
-const Input = (props) => (
-	<InputDeclarationsWrapper type="text" roleType="input" {...props} />
-);
+function checkValue(value) {
+	return value || '';
+}
 
-export default missingWrapper(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}
+			aria-labelledby={labelledBy}
+			autoComplete="off"
+			type="text"
+			disabled={disabled}
+			className={classnames('input-lunatic')}
+			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 Input;

package/src/components/input/input.scss

@@ -28,10 +28,4 @@
 		border: solid 2px var(--color-error);
 		background-color: var(--color-error);
 	}
-
-	.lunatic-input-number-errors .error {
-		color: var(--color-error);
-		font-size: 80%;
-		margin-top: 0.3125rem;
-	}
 }

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import Input from './input';
+import { InputContainer } from '../commons';
+import './input.scss';
+import { useOnHandleChange } from '../commons';
+
+function LunaticInput(props) {
+	const {
+		label,
+		id,
+		value,
+		handleChange,
+		response,
+		disabled,
+		declarations,
+		executeExpression,
+		iteration,
+		className,
+	} = props;
+
+	const onChange = useOnHandleChange({ handleChange, response, value });
+
+	const inputId = `lunatic-input-${id}`;
+	const labelId = `lunatic-input-label-${id}`;
+
+	return (
+		<InputContainer
+			declarations={declarations}
+			executeExpression={executeExpression}
+			label={label}
+			id={id}
+			value={value}
+			inputId={inputId}
+			labelId={labelId}
+			labelClassName={className}
+			iteration={iteration}
+		>
+			<Input
+				id={inputId}
+				labelledBy={labelId}
+				value={value}
+				onChange={onChange}
+				disabled={disabled}
+			/>
+		</InputContainer>
+	);
+}
+
+LunaticInput.defaultProps = {
+	className: 'todo',
+};
+
+export default React.memo(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,38 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import './input-number.scss';
+
+function InputNumber({
+	value,
+	onChange,
+	disabled,
+	readOnly,
+	labelId,
+	min,
+	max,
+	step,
+}) {
+	const handleChange = useCallback(
+		function (e) {
+			const value = e.target.value;
+			onChange(value);
+		},
+		[onChange]
+	);
+	return (
+		<input
+			className={classnames('input-lunatic', { disabled, readOnly })}
+			type="number"
+			onChange={handleChange}
+			value={value}
+			labelledby={labelId}
+			readOnly={readOnly}
+			disabled={disabled}
+			min={min}
+			max={max}
+			step={step}
+		/>
+	);
+}
+
+export default InputNumber;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { InputContainer } from '../commons';
+import InputNumber from './input-number';
+import { useOnHandleChange } from '../commons';
+
+function LunaticInputNumber({
+	value,
+	declarations,
+	label,
+	response,
+	id,
+	disabled,
+	readOnly,
+	handleChange,
+	min,
+	max,
+	step,
+	iteration,
+}) {
+	const onChange = useOnHandleChange({ handleChange, response, value });
+
+	const inputId = `lunatic-input-${id}`;
+	const labelId = `lunatic-input-label-${id}`;
+
+	return (
+		<InputContainer
+			declarations={declarations}
+			label={label}
+			id={id}
+			value={value}
+			inputId={inputId}
+			labelId={labelId}
+			labelClassName="todo"
+			iteration={iteration}
+		>
+			<InputNumber
+				labelledBy={labelId}
+				readOnly={readOnly}
+				disabled={disabled}
+				value={value}
+				onChange={onChange}
+				min={min}
+				max={max}
+				step={step}
+			/>
+		</InputContainer>
+	);
+}
+
+export default LunaticInputNumber;