@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

package/src/components/button/component.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-	buildStyleObject,
-	createObjectEvent,
-	isFunction,
-} from '../../utils/lib';
-import './button.scss';
-import { BUTTON_CATEGORY, EVENT_CLICK } from '../../constants';
-
-const Button = ({
-	label,
-	value,
-	onClick,
-	disabled,
-	style,
-	logFunction,
-	id,
-}) => {
-	const handleClick = (e) => {
-		onClick(e);
-		if (isFunction(logFunction))
-			logFunction(
-				createObjectEvent(
-					`button-lunatic-${id}`,
-					BUTTON_CATEGORY,
-					EVENT_CLICK,
-					null,
-					label
-				)
-			);
-	};
-	return (
-		<button
-			type="button"
-			aria-label={label || 'button'}
-			className="button-lunatic"
-			style={buildStyleObject(style)}
-			disabled={disabled}
-			onClick={handleClick}
-		>
-			{value}
-		</button>
-	);
-};
-
-Button.propTypes = {
-	value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
-	disabled: PropTypes.bool,
-	onClick: PropTypes.func.isRequired,
-};
-
-export default Button;

package/src/components/checkbox/boolean.js

@@ -1,172 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
-import debounce from 'lodash.debounce';
-import Declarations from '../declarations';
-import Icon from '../icon';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../constants';
-import { interpret } from '../../utils/to-expose';
-import './checkbox.scss';
-
-const CheckboxBoolean = ({
-	id,
-	label,
-	preferences,
-	response,
-	handleChange: propsHandleChange,
-	disabled,
-	positioning,
-	focused,
-	declarations,
-	features,
-	bindings,
-	management,
-	style,
-	logFunction,
-}) => {
-	const inputRef = useRef();
-
-	const [value, setValue] = useState(() =>
-		U.getResponseByPreference(preferences)(response)
-	);
-
-	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
-
-	const specificHandleChange = (e) => {
-		const [key, value] = Object.entries(e)[0];
-		if (value === false && U.responseToClean(response)(preferences))
-			handleChange({ [key]: null });
-		else handleChange(e);
-	};
-
-	// Assume we only want to handle enable external updates
-	// Don't need to check all value changes
-	useEffect(() => {
-		if (U.getResponseByPreference(preferences)(response) !== value)
-			setValue(U.getResponseByPreference(preferences)(response));
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [response, preferences]);
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	const interpretedLabel = interpret(features, logFunction)(bindings)(label);
-
-	const isVertical = positioning === 'VERTICAL';
-	const isHorizontal = positioning === 'HORIZONTAL';
-	const input = (
-		<>
-			<Icon type="checkbox" checked={value} disabled={disabled}>
-				<input
-					type="checkbox"
-					id={`checkbox-boolean-${id}`}
-					ref={inputRef}
-					title={interpretedLabel ? interpretedLabel : 'empty-label'}
-					className={`checkbox-boolean-lunatic`}
-					style={U.buildStyleObject(style)}
-					checked={value || false}
-					disabled={disabled}
-					onChange={({ target: { checked } }) => {
-						setValue(checked);
-						specificHandleChange({
-							[U.getResponseName(response)]: checked,
-						});
-						if (U.isFunction(logFunction))
-							logFunction(
-								U.createObjectEvent(
-									`checkbox-boolean-${id}`,
-									C.INPUT_CATEGORY,
-									C.EVENT_SELECTION,
-									U.getResponseName(response),
-									checked
-								)
-							);
-					}}
-				/>
-				{interpretedLabel && (
-					<label htmlFor={`checkbox-boolean-${id}`}>
-						{isHorizontal ? interpretedLabel : ''}
-					</label>
-				)}
-			</Icon>
-		</>
-	);
-	return (
-		<div key={`checkbox-boolean-${id}`} className={`checkbox-boolean-modality`}>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			{label && !isHorizontal && (
-				<label htmlFor={`checkbox-boolean-${id}`}>
-					{interpret(features, logFunction)(bindings)(label)}
-				</label>
-			)}
-			<Declarations
-				id={id}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<div className="field-container">
-				<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
-					{isVertical ? <div>{input}</div> : input}
-				</div>
-				{management && (
-					<div className="tooltip">
-						<TooltipResponse
-							id={id}
-							response={U.buildBooleanTooltipResponse(response)}
-						/>
-					</div>
-				)}
-			</div>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</div>
-	);
-};
-
-CheckboxBoolean.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	disabled: false,
-	positioning: 'DEFAULT',
-	focused: false,
-	declarations: [],
-	features: [],
-	bindings: {},
-	management: false,
-	style: {},
-};
-
-CheckboxBoolean.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default missingWrapper(React.memo(CheckboxBoolean, U.areEqual));

package/src/components/checkbox/group.js

@@ -1,231 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import KeyboardEventHandler from 'react-keyboard-event-handler';
-import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
-import debounce from 'lodash.debounce';
-import Declarations from '../declarations';
-import Icon from '../icon';
-import { TooltipResponse } from '../tooltip';
-import * as U from '../../utils/lib';
-import * as C from '../../constants';
-import { interpret } from '../../utils/to-expose';
-import './checkbox.scss';
-
-const CheckboxGroup = ({
-	id,
-	label,
-	preferences,
-	responses,
-	handleChange: propsHandleChange,
-	disabled,
-	focused,
-	shortcut,
-	positioning,
-	declarations,
-	features,
-	bindings,
-	management,
-	style,
-	logFunction,
-}) => {
-	const { fieldsetStyle, modalityStyle } = style;
-	const inputRef = useRef();
-
-	const [values, setValues] = useState(() =>
-		responses.map(({ response }) =>
-			U.getResponseByPreference(preferences)(response)
-		)
-	);
-
-	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
-
-	const specificHandleChange = (e) => {
-		const [key, value] = Object.entries(e)[0];
-		if (value === false && U.responsesToClean(responses)(preferences)(key))
-			handleChange({ [key]: null });
-		else handleChange(e);
-	};
-
-	// Assume we only want to handle enable external updates
-	// Don't need to check all value changes
-	useEffect(() => {
-		const newValues = responses.map(({ response }) =>
-			U.getResponseByPreference(preferences)(response)
-		);
-		if (newValues.join('|') !== values.join('|')) setValues(newValues);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [responses, preferences]);
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	const checkedArray = [];
-
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<fieldset
-				key={`checkbox-${id}`}
-				className="checkbox-group-list"
-				style={U.buildStyleObject(fieldsetStyle)}
-			>
-				<legend>{interpret(features, logFunction)(bindings)(label)}</legend>
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-					features={features}
-					bindings={bindings}
-				/>
-				{responses.map(({ id: modId, label: modLabel, response }, i) => {
-					const checked = values[i];
-					if (checked) checkedArray.push(modId);
-					const toRef =
-						i === 0 || (checkedArray[0] && checkedArray[0] === modId);
-					const interpretedLabel = interpret(features)(bindings)(modLabel);
-					const keyboardSelectionKey =
-						responses.length < 10 ? `${i + 1}` : U.getAlphabet()[i];
-					return (
-						<div
-							className={`${U.getItemsPositioningClass(positioning)}`}
-							key={`checkbox-${id}-${modId}`}
-						>
-							<div className="field-container">
-								<div
-									className={`${management ? 'field-with-tooltip' : 'field'}`}
-								>
-									<div
-										className={`checkbox-modality ${
-											checked ? 'content-checked' : ''
-										}`}
-									>
-										<Icon type="checkbox" checked={checked} disabled={disabled}>
-											<input
-												type="checkbox"
-												id={`checkbox-${id}-${modId}`}
-												ref={toRef ? inputRef : null}
-												key={`checkbox-${id}-${modId}`}
-												aria-labelledby={`input-label-${id}-${modId}`}
-												className="checkbox-lunatic"
-												checked={checked || false}
-												disabled={disabled}
-												onChange={({ target: { checked } }) => {
-													setValues(
-														values.map((v, j) => (i === j ? checked : v))
-													);
-													specificHandleChange({
-														[U.getResponseName(response)]: checked,
-													});
-													if (U.isFunction(logFunction))
-														logFunction(
-															U.createObjectEvent(
-																`checkbox-${id}-${modId}`,
-																C.INPUT_CATEGORY,
-																C.EVENT_SELECTION,
-																U.getResponseName(response),
-																checked
-															)
-														);
-												}}
-											/>
-											<label
-												htmlFor={`checkbox-${id}-${modId}`}
-												id={`input-label-${id}-${modId}`}
-												style={checked ? U.buildStyleObject(modalityStyle) : {}}
-												className="modality-label"
-											>
-												{shortcut && (
-													<span className="code-modality">
-														{keyboardSelectionKey.toUpperCase()}
-													</span>
-												)}
-												{interpretedLabel}
-											</label>
-										</Icon>
-									</div>
-								</div>
-								{management && (
-									<div className="tooltip">
-										<TooltipResponse
-											id={id}
-											response={U.buildBooleanTooltipResponse(response)}
-										/>
-									</div>
-								)}
-							</div>
-							{shortcut && (
-								<KeyboardEventHandler
-									handleKeys={[keyboardSelectionKey.toLowerCase()]}
-									onKeyEvent={(key, e) => {
-										e.preventDefault();
-										setValues(values.map((v, j) => (i === j ? !checked : v)));
-										specificHandleChange({
-											[U.getResponseName(response)]: !checked,
-										});
-										if (U.isFunction(logFunction))
-											logFunction(
-												U.createObjectEvent(
-													`checkbox-${id}-${modId}`,
-													C.INPUT_CATEGORY,
-													C.EVENT_SELECTION,
-													U.getResponseName(response),
-													!checked
-												)
-											);
-									}}
-									handleFocusableElements
-								/>
-							)}
-						</div>
-					);
-				})}
-			</fieldset>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-CheckboxGroup.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	responses: [],
-	disabled: false,
-	focused: false,
-	positioning: 'DEFAULT',
-	declarations: [],
-	features: [],
-	bindings: {},
-	management: false,
-	style: { fieldsetStyle: {}, modalityStyle: {} },
-};
-
-CheckboxGroup.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	focused: PropTypes.bool,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default missingWrapper(React.memo(CheckboxGroup), U.areEqual);

package/src/components/checkbox/one.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import missingWrapper from '../missing-wrapper';
-import { ListDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './checkbox.scss';
-
-const CheckboxOne = (props) => (
-	<ListDeclarationsWrapper type="checkbox" {...props} hasSpecificHandler />
-);
-
-export default missingWrapper(React.memo(CheckboxOne, areEqual));

package/src/components/datepicker/component.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import missingWrapper from '../missing-wrapper';
-import { InputDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './datepicker.scss';
-
-const Datepicker = (props) => (
-	<InputDeclarationsWrapper type="date" roleType="datepicker" {...props} />
-);
-
-export default missingWrapper(React.memo(Datepicker, areEqual));

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
-import { InputDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './input.scss';
-
-const InputNumber = ({ numberAsTextfield, ...props }) => {
-	const { min, max, validators } = props;
-	return (
-		<InputDeclarationsWrapper
-			type={numberAsTextfield ? 'text' : 'number'}
-			roleType="input"
-			{...props}
-			validators={[minMaxValidator({ min, max }), ...validators]}
-			isInputNumber
-			numberAsTextfield
-		/>
-	);
-};
-
-const minMaxValidator =
-	({ min, max }) =>
-	(value) => {
-		if (!value) {
-			return undefined;
-		}
-		const valueNumber = Number(value);
-		if (!min && isDef(max) && valueNumber > max)
-			return <span>{`La valeur doit être inférieure à ${max}`}</span>;
-		else if (isDef(min) && !max && valueNumber < min)
-			return <span>{`La valeur doit être supérieure à ${min}`}</span>;
-		else if (
-			isDef(min) &&
-			isDef(max) &&
-			(valueNumber < min || valueNumber > max)
-		)
-			return (
-				<span>{`La valeur doit être comprise entre ${min} et ${max}`}</span>
-			);
-		return undefined;
-	};
-
-const isDef = (number) => number || number === 0;
-
-InputNumber.defaultProps = {
-	validators: [],
-};
-
-InputNumber.propTypes = {
-	validators: PropTypes.arrayOf(PropTypes.func),
-};
-
-export default missingWrapper(React.memo(InputNumber, areEqual));

package/src/components/missing-wrapper/wrapper.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import Missing from './component';
-
-const missingWrapper = (Component) => (props) => {
-	const { missing } = props;
-	if (missing) return <Missing Component={Component} props={props} />;
-	return <Component {...props} />;
-};
-
-export default missingWrapper;

package/src/components/radio/component.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import missingWrapper from '../missing-wrapper';
-import { ListDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './radio.scss';
-
-const Radio = (props) => <ListDeclarationsWrapper type="radio" {...props} />;
-
-export default missingWrapper(React.memo(Radio, areEqual));

package/src/components/sequence/component.js

@@ -1,50 +0,0 @@
-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/subsequence/component.js

@@ -1,49 +0,0 @@
-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';
-
-const Subsequence = ({
-	id,
-	label,
-	declarations,
-	features,
-	bindings,
-	style,
-	logFunction,
-}) => (
-	<SimpleDeclarationsWrapper
-		id={id}
-		declarations={declarations}
-		features={features}
-		bindings={bindings}
-	>
-		<div
-			aria-label={`subsequence-${id}`}
-			className="subsequence-lunatic"
-			style={U.buildStyleObject(style)}
-			aria-label={`subsequence-${id}`}
-		>
-			{interpret(features, logFunction)(bindings)(label)}
-		</div>
-	</SimpleDeclarationsWrapper>
-);
-
-Subsequence.defaultProps = {
-	declarations: [],
-	features: [],
-	bindings: {},
-	style: {},
-};
-
-Subsequence.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(Subsequence, U.areEqual);

package/src/tests/components/breadcrumb.spec.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Breadcrumb } from 'components';
-
-describe('breadcrumb', () => {
-	it('renders without crashing', () => {
-		shallow(<Breadcrumb elements={[]} />);
-	});
-	it('renders with elements', () => {
-		const wrapper = shallow(<Breadcrumb elements={['One', 'Two']} />);
-		expect(wrapper.find('.breadcrumb-lunatic').children()).toHaveLength(2);
-	});
-});

package/src/tests/components/button.spec.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Button } from 'components';
-
-describe('button', () => {
-	const onClick = jest.fn();
-
-	it('renders without crashing', () => {
-		shallow(<Button value="Button" onClick={onClick} />);
-	});
-});