@inseefr/lunatic 2.0.2 → 2.0.3-v2

package/src/components/breadcrumb/breadcrumb.scss

@@ -1,22 +0,0 @@
-@import 'src/components/index.scss';
-
-.breadcrumb-lunatic {
-	width: 100%;
-	height: 40px;
-	box-sizing: border-box;
-	border-radius: 0px;
-	background-color: $main_color;
-	color: white;
-	font-weight: bold;
-	font-size: 130%;
-	padding-left: 10px;
-	display: flex;
-	align-items: center;
-}
-
-.breadcrumb-element-lunatic:before {
-	content: '>';
-	color: white;
-	margin-left: 0.4em;
-	margin-right: 0.4em;
-}

package/src/components/breadcrumb/component.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './breadcrumb.scss';
-
-const Breadcrumb = ({ elements, style }) => (
-	<div
-		aria-label={`breadcrumb`}
-		className="breadcrumb-lunatic"
-		style={buildStyleObject(style)}
-	>
-		{elements.map((e, i) => (
-			<React.Fragment key={`breadcrumb-${e.toLowerCase()}`}>
-				{e && (
-					<span className={i !== 0 ? 'breadcrumb-element-lunatic' : undefined}>
-						{e}
-					</span>
-				)}
-			</React.Fragment>
-		))}
-	</div>
-);
-
-Breadcrumb.propTypes = {
-	elements: PropTypes.arrayOf(PropTypes.string).isRequired,
-	style: PropTypes.object,
-};
-
-export default Breadcrumb;

package/src/components/breadcrumb/index.js

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

package/src/components/button/button.scss

@@ -1,26 +0,0 @@
-@import 'src/components/index.scss';
-
-.button-lunatic {
-	width: 100%;
-	color: white;
-	border-color: $main_color;
-	background-color: $main_color;
-	font-size: 1.5em;
-	font-weight: bold;
-	padding: 0.4em;
-	&:hover,
-	&:focus:hover {
-		color: $main_color;
-		background-color: white;
-		border-color: $main_color;
-	}
-	&:focus {
-		outline: none;
-		background-color: $second_color;
-		border-color: $second_color;
-	}
-	&:disabled {
-		background: #dddddd;
-		color: $main_color;
-	}
-}

package/src/components/button/component.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './button.scss';
-
-const Button = ({ label, value, onClick, disabled, style }) => (
-	<button
-		type="button"
-		aria-label={label || 'button'}
-		className="button-lunatic"
-		style={buildStyleObject(style)}
-		disabled={disabled}
-		onClick={onClick}
-	>
-		{value}
-	</button>
-);
-
-Button.propTypes = {
-	value: PropTypes.string.isRequired,
-	disabled: PropTypes.bool,
-	onClick: PropTypes.func.isRequired,
-};
-
-export default Button;

package/src/components/button/index.js

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

package/src/components/checkbox/boolean.js

@@ -1,147 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-import Declarations from '../declarations';
-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,
-}) => {
-	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);
-	};
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	const isVertical = positioning === 'VERTICAL';
-	const isHorizontal = positioning === 'HORIZONTAL';
-	const input = (
-		<>
-			<input
-				type="checkbox"
-				id={`checkbox-boolean-${id}`}
-				ref={inputRef}
-				title={label ? label : 'empty-label'}
-				className={`checkbox-boolean-lunatic${isVertical ? '-no-margin' : ''}`}
-				style={U.buildStyleObject(style)}
-				checked={value}
-				disabled={disabled}
-				onChange={({ target: { checked } }) => {
-					setValue(checked);
-					specificHandleChange({
-						[U.getResponseName(response)]: checked,
-					});
-				}}
-			/>
-			{label && (
-				<label htmlFor={`checkbox-boolean-${id}`}>
-					{isHorizontal ? interpret(features)(bindings)(label) : ''}
-				</label>
-			)}
-		</>
-	);
-	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)(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 React.memo(CheckboxBoolean, U.areEqual);

package/src/components/checkbox/checkbox.scss

@@ -1,43 +0,0 @@
-@import 'src/components/index.scss';
-
-.checkbox-group {
-	border: 0.1em solid $main_color;
-}
-
-@mixin box-margin($margin: false) {
-	margin: 0;
-	margin-right: 1em;
-	margin-left: if($margin, 1em, 0);
-	margin-top: 0.5em;
-	&:focus {
-		outline: none;
-	}
-	&:checked + label {
-		border: 0.1em solid $main_color;
-		padding: 0.3em;
-	}
-}
-
-.checkbox-lunatic {
-	@include box-margin(true);
-	&:focus {
-		box-shadow: 0 0 0.3em 0.3em $main_color;
-	}
-}
-
-.checkbox-lunatic-no-margin {
-	@include box-margin(false);
-}
-
-.checkbox-modality {
-	margin-top: 1em;
-}
-
-.checkbox-boolean-modality {
-	margin-top: 1em;
-}
-
-.checkbox-alone {
-	margin-left: 0;
-	margin-top: 0.5em;
-}

package/src/components/checkbox/group.js

@@ -1,183 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-import Declarations from '../declarations';
-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,
-	keyboardSelection,
-	positioning,
-	declarations,
-	features,
-	bindings,
-	management,
-	style,
-}) => {
-	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);
-	};
-
-	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"
-				style={U.buildStyleObject(fieldsetStyle)}
-			>
-				<legend>{interpret(features)(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);
-					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' : ''
-										}`}
-									>
-										<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}
-											disabled={disabled}
-											onChange={({ target: { checked } }) => {
-												setValues(
-													values.map((v, j) => (i === j ? checked : v))
-												);
-												specificHandleChange({
-													[U.getResponseName(response)]: checked,
-												});
-											}}
-										/>
-										<label
-											htmlFor={`checkbox-${id}-${modId}`}
-											id={`input-label-${id}-${modId}`}
-											style={checked ? U.buildStyleObject(modalityStyle) : {}}
-										>
-											{keyboardSelection && (
-												<span className="code-modality">
-													{responses.length < 10
-														? i + 1
-														: U.getAlphabet()[i].toUpperCase()}
-												</span>
-											)}
-											{interpretedLabel}
-										</label>
-									</div>
-								</div>
-								{management && (
-									<div className="tooltip">
-										<TooltipResponse
-											id={id}
-											response={U.buildBooleanTooltipResponse(response)}
-										/>
-									</div>
-								)}
-							</div>
-						</div>
-					);
-				})}
-			</fieldset>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-CheckboxGroup.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	responses: [],
-	disabled: false,
-	focused: false,
-	keyboardSelection: 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,
-	keyboardSelection: 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 React.memo(CheckboxGroup, U.areEqual);

package/src/components/checkbox/index.js

@@ -1,3 +0,0 @@
-export { default as CheckboxGroup } from './group';
-export { default as CheckboxBoolean } from './boolean';
-export { default as CheckboxOne } from './one';

package/src/components/checkbox/one.js

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

package/src/components/components.js

@@ -1,16 +0,0 @@
-export { default as Breadcrumb } from './breadcrumb';
-export { default as Button } from './button';
-export * from './checkbox';
-export { default as Datepicker } from './datepicker';
-export { default as Declarations } from './declarations';
-export { default as Dropdown } from './dropdown';
-export * from './input';
-export { default as FilterDescription } from './filter-description';
-export { default as ProgressBar } from './progress-bar';
-export { default as Radio } from './radio';
-export { default as Loop } from './loop';
-export * from './loop-constructor';
-export { default as Sequence } from './sequence';
-export { default as Subsequence } from './subsequence';
-export { default as Textarea } from './textarea';
-export { TooltipResponse } from './tooltip';

package/src/components/datepicker/component.js

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

package/src/components/datepicker/datepicker.scss

@@ -1,16 +0,0 @@
-@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;
-	}
-}

package/src/components/datepicker/index.js

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

package/src/components/declarations/component.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as U from '../../utils/lib';
-import { interpret } from '../../utils/to-expose';
-import './declarations.scss';
-
-const Declarations = ({ id, type, declarations, features, bindings }) => {
-	const filtered = declarations.filter(({ position }) => position === type);
-	return (
-		<div id={`declarations-${id}-${type}`} className="declarations-lunatic">
-			{filtered.map(({ id: idD, label, declarationType }) => (
-				<div
-					key={`${idD}`}
-					className={`declaration-lunatic declaration-${declarationType.toLowerCase()}`}
-				>
-					{interpret(features)(bindings)(label)}
-				</div>
-			))}
-		</div>
-	);
-};
-
-Declarations.defaultProps = {
-	type: 'AFTER_QUESTION_TEXT',
-	declarations: [],
-	features: [],
-	bindings: {},
-};
-
-Declarations.propTypes = {
-	id: PropTypes.string.isRequired,
-	type: PropTypes.string,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-};
-
-export default Declarations;

package/src/components/declarations/declarations.scss

@@ -1,34 +0,0 @@
-.declaration-instruction {
-	font-style: italic;
-	font-size: 80%;
-}
-
-.declaration-comment {
-	font-size: 80%;
-}
-
-.declaration-statement {
-	font-style: italic;
-	font-size: 80%;
-	color: blue;
-}
-
-.declaration-help {
-	font-style: italic;
-	font-size: 80%;
-	color: green;
-}
-
-.declaration-warning {
-	font-style: bold;
-	font-size: 80%;
-	color: red;
-}
-
-.declaration-message_filter {
-	font-size: 100%;
-	color: rgb(73, 66, 66);
-	&:before {
-		content: '→ ';
-	}
-}

package/src/components/declarations/index.js

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

package/src/components/declarations/wrappers/index.js

@@ -1,3 +0,0 @@
-export { default as InputDeclarationsWrapper } from './input-declarations-wrapper';
-export { default as ListDeclarationsWrapper } from './list-declarations-wrapper';
-export { default as SimpleDeclarationsWrapper } from './simple-declarations-wrapper';