@inseefr/lunatic 0.2.62 → 0.3.0-v2

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

@@ -1,171 +0,0 @@
-import React, { useState, 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';
-
-const InputNumber = ({
-	id,
-	label,
-	preferences,
-	response,
-	min,
-	max,
-	decimals,
-	placeholder,
-	handleChange,
-	readOnly,
-	autoComplete,
-	focused,
-	style,
-	unit,
-	labelPosition,
-	declarations,
-	tooltip,
-	required,
-	validators,
-}) => {
-	const [messagesError, setMessagesError] = useState(
-		[minMaxValidator({ min, max }), ...validators]
-			.map(v => v(U.getResponseByPreference(preferences)(response)))
-			.filter(m => m !== undefined)
-	);
-	const inputRef = useRef();
-
-	const validate = value => {
-		setMessagesError(
-			[minMaxValidator({ min, max }), ...validators]
-				.map(v => v(value))
-				.filter(m => m !== undefined)
-		);
-	};
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				<label
-					htmlFor={`input-${id}`}
-					id={`input-label-${id}`}
-					className={`${required ? 'required' : ''}`}
-				>{`${label} ${unit ? `(${unit})` : ''}`}</label>
-				<Declarations
-					id={id}
-					type={C.AFTER_QUESTION_TEXT}
-					declarations={declarations}
-				/>
-				<div className="field-container">
-					<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-						<input
-							type="number"
-							id={`input-${id}`}
-							ref={inputRef}
-							aria-labelledby={`input-label-${id}`}
-							value={U.getResponseByPreference(preferences)(response)}
-							min={min}
-							max={max}
-							step={decimals ? `${Math.pow(10, -decimals)}` : '0'}
-							placeholder={placeholder}
-							className={`input-lunatic ${
-								messagesError.length > 0 ? 'warning' : ''
-							}`}
-							style={U.buildStyleObject(style)}
-							readOnly={readOnly}
-							autoComplete={autoComplete ? 'on' : 'off'}
-							required={required}
-							aria-required={required}
-							onChange={e => {
-								const {
-									target: { value },
-								} = e;
-								validate(value);
-								handleChange({
-									[U.getResponseName(response)]:
-										value || value === 0 ? Number(value) : '',
-								});
-							}}
-						/>
-					</div>
-					{tooltip && (
-						<div className="tooltip">
-							<TooltipResponse id={id} response={response} />
-						</div>
-					)}
-				</div>
-				<div className="lunatic-input-number-errors">
-					{messagesError.map((m, i) => (
-						<div key={i} className="error">
-							{m}
-						</div>
-					))}
-				</div>
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
-	);
-};
-
-const minMaxValidator = ({ min, max }) => value => {
-	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 = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	min: Number.MIN_SAFE_INTEGER,
-	max: Number.MAX_SAFE_INTEGER,
-	decimals: 0,
-	placeholder: '',
-	readOnly: false,
-	autoComplete: false,
-	focused: false,
-	declarations: [],
-	labelPosition: 'DEFAULT',
-	required: false,
-	tooltip: false,
-	style: {},
-	validators: [],
-};
-
-InputNumber.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	min: PropTypes.number,
-	max: PropTypes.number,
-	decimals: PropTypes.number,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	readOnly: PropTypes.bool,
-	autoComplete: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	required: PropTypes.bool,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-	validators: PropTypes.arrayOf(PropTypes.func),
-};
-
-export default InputNumber;

package/src/components/progress-bar/component.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './progress-bar.scss';
-
-const ProgressBar = ({ id, value, style }) => {
-	let controledValue = value;
-	if (value < 0) controledValue = 0;
-	if (value > 100) controledValue = 100;
-	return (
-		<div
-			id={`progress-${id}`}
-			className="progress-lunatic"
-			style={buildStyleObject(style)}
-		>
-			{`${controledValue.toFixed(0)} %`}
-			<span style={{ width: `${controledValue}%` }} />
-		</div>
-	);
-};
-
-ProgressBar.propTypes = {
-	id: PropTypes.string.isRequired,
-	value: PropTypes.number.isRequired,
-	style: PropTypes.object,
-};
-
-export default ProgressBar;

package/src/components/progress-bar/index.js

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

package/src/components/progress-bar/progress-bar.scss

@@ -1,54 +0,0 @@
-@import 'src/components/index.scss';
-
-.progress-lunatic {
-	height: 30px;
-	position: relative;
-	background: $progress_back;
-	-moz-border-radius: 20px;
-	-webkit-border-radius: 20px;
-	border-radius: 20px;
-	padding: 5px;
-	box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-	text-align: center;
-	font-weight: bold;
-}
-
-.progress-lunatic > span {
-	display: block;
-	height: 100%;
-	border-radius: 20px;
-	background-color: $main_color;
-	opacity: 0.6;
-	box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
-		inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-	position: relative;
-	top: -18px;
-	overflow: hidden;
-}
-
-.progress-lunatic > span:after {
-	content: '';
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	background-image: linear-gradient(
-		-45deg,
-		rgba(255, 255, 255, 0.2) 25%,
-		transparent 25%,
-		transparent 50%,
-		rgba(255, 255, 255, 0.2) 50%,
-		rgba(255, 255, 255, 0.2) 75%,
-		transparent 75%,
-		transparent
-	);
-	z-index: 1;
-	background-size: 50px 50px;
-	animation: move 2s linear infinite;
-	border-top-right-radius: 8px;
-	border-bottom-right-radius: 8px;
-	border-top-left-radius: 20px;
-	border-bottom-left-radius: 20px;
-	overflow: hidden;
-}

package/src/components/radio/component.js

@@ -1,136 +0,0 @@
-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 './radio.scss';
-
-const Radio = ({
-	id,
-	label,
-	preferences,
-	response,
-	options,
-	handleChange,
-	disabled,
-	focused,
-	keyboardSelection,
-	declarations,
-	tooltip,
-	style,
-	positioning,
-}) => {
-	const inputRef = useRef();
-
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	const { fieldsetStyle, radioStyle } = style;
-	return (
-		<React.Fragment>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-					<fieldset
-						key={`radio-${id}`}
-						className="radio-group"
-						style={U.buildStyleObject(fieldsetStyle)}
-					>
-						<legend>{label}</legend>
-						<Declarations
-							id={id}
-							type={C.AFTER_QUESTION_TEXT}
-							declarations={declarations}
-						/>
-						{options.map(({ label: optionLabel, value: optionValue }, i) => {
-							const checked =
-								U.getResponseByPreference(preferences)(response) ===
-								optionValue;
-							return (
-								<div
-									key={`radio-${id}-${optionValue}`}
-									className={`radio-modality ${U.getItemsPositioningClass(
-										positioning
-									)}`}
-								>
-									<input
-										type="radio"
-										name={`radio-${id}`}
-										ref={inputRef}
-										id={`radio-${id}-${optionValue}`}
-										aria-labelledby={`input-label-${id}-${optionValue}`}
-										className="radio-lunatic"
-										style={U.buildStyleObject(style)}
-										checked={checked}
-										disabled={disabled}
-										onChange={() =>
-											handleChange({
-												[U.getResponseName(response)]: optionValue,
-											})
-										}
-									/>
-									<label
-										htmlFor={`radio-${id}-${optionValue}`}
-										id={`input-label-${id}-${optionValue}`}
-										style={checked ? U.buildStyleObject(radioStyle) : {}}
-									>
-										{keyboardSelection
-											? `${U.getAlphabet()[i].toUpperCase()} - ${optionLabel}`
-											: optionLabel}
-									</label>
-								</div>
-							);
-						})}
-					</fieldset>
-				</div>
-				{tooltip && (
-					<div className="tooltip">
-						<TooltipResponse
-							id={id}
-							response={U.buildResponse(options)(response)}
-						/>
-					</div>
-				)}
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</React.Fragment>
-	);
-};
-
-Radio.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	options: [],
-	disabled: false,
-	focused: false,
-	keyboardSelection: false,
-	positioning: 'DEFAULT',
-	declarations: [],
-	tooltip: false,
-	style: { fieldsetStyle: {}, radioStyle: {} },
-};
-
-Radio.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	options: U.optionsPropTypes,
-	handleChange: PropTypes.func.isRequired,
-	disabled: PropTypes.bool,
-	focused: PropTypes.bool,
-	keyboardSelection: PropTypes.bool,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Radio;

package/src/components/sequence/component.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './sequence.scss';
-
-const Sequence = ({ id, label, declarations, style }) => (
-	<React.Fragment>
-		<Declarations
-			id={id}
-			type={C.BEFORE_QUESTION_TEXT}
-			declarations={declarations}
-		/>
-		<div
-			aria-label={`sequence-${id}`}
-			className="sequence-lunatic"
-			style={U.buildStyleObject(style)}
-		>
-			{label}
-		</div>
-		<Declarations
-			id={id}
-			type={C.AFTER_QUESTION_TEXT}
-			declarations={declarations}
-		/>
-		<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-	</React.Fragment>
-);
-
-Sequence.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	declarations: U.declarationsPropTypes,
-	style: PropTypes.object,
-};
-
-Sequence.defaultProps = {
-	declarations: [],
-	style: {},
-};
-
-export default Sequence;

package/src/components/subsequence/component.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './subsequence.scss';
-
-const Subsequence = ({ id, label, declarations, style }) => (
-	<React.Fragment>
-		<Declarations
-			id={id}
-			type={C.BEFORE_QUESTION_TEXT}
-			declarations={declarations}
-		/>
-		<div
-			aria-label={`subsequence-${id}`}
-			className="subsequence-lunatic"
-			style={U.buildStyleObject(style)}
-		>
-			{label}
-		</div>
-		<Declarations
-			id={id}
-			type={C.AFTER_QUESTION_TEXT}
-			declarations={declarations}
-		/>
-		<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-	</React.Fragment>
-);
-
-Subsequence.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string.isRequired,
-	declarations: U.declarationsPropTypes,
-	style: PropTypes.object,
-};
-
-Subsequence.defaultProps = {
-	declarations: [],
-	style: {},
-};
-
-export default Subsequence;

package/src/components/subsequence/subsequence.scss

@@ -1,15 +0,0 @@
-@import 'src/components/index.scss';
-
-.subsequence-lunatic {
-	height: 20px;
-	box-sizing: border-box;
-	border-radius: 0px;
-	background-color: $main_color;
-	border: 0.1em solid $main_color;
-	color: white;
-	font-weight: bold;
-	font-size: 90%;
-	padding-left: 10px;
-	display: flex;
-	align-items: center;
-}

package/src/components/table/table.js

@@ -1,133 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import * as lunatic from '../components';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
-import './table.scss';
-
-const Table = ({
-	id: tableId,
-	label: tableLabel,
-	preferences,
-	cells,
-	handleChange,
-	lines: initLines,
-	declarations,
-	tooltip,
-}) => {
-	const minLines = initLines
-		? Math.max(initLines.min, U.getRosterInitLines(cells))
-		: undefined;
-	const maxLines = initLines ? initLines.max : undefined;
-	const [lines, setLines] = useState(minLines);
-
-	const width = `${100 / Math.max(...cells.map(line => line.length))}%`;
-	const Button = lunatic.Button;
-	return (
-		<React.Fragment>
-			<Declarations
-				id={tableId}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			{tableLabel && (
-				<label
-					htmlFor={`table-one-axis-${tableId}`}
-					id={`table-one-axis-label-${tableId}`}
-				>
-					{tableLabel}
-				</label>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<table id={`table-${tableId}`} className="table-lunatic">
-				<tbody>
-					{(minLines || minLines === 0 ? cells.slice(0, lines + 1) : cells).map(
-						(line, i) => (
-							<tr key={`table-${tableId}-line${i}`}>
-								{line.map((component, j) => {
-									const {
-										label,
-										headerCell,
-										colspan,
-										rowspan,
-										componentType,
-										...componentProps
-									} = component;
-									if (componentType) {
-										const Component = lunatic[componentType];
-										return (
-											<td
-												key={`table-${tableId}-line${i}-cell-${j}`}
-												style={{ width }}
-											>
-												<Component
-													label={label}
-													handleChange={handleChange}
-													preferences={preferences}
-													tooltip={tooltip}
-													{...componentProps}
-												/>
-											</td>
-										);
-									}
-									const cellOptions = {
-										key: `table-${tableId}-line${i}-cell-${j}`,
-										style: { width },
-										colSpan: colspan || 1,
-										rowSpan: rowspan || 1,
-									};
-									return headerCell ? (
-										<th {...cellOptions}>{label}</th>
-									) : (
-										<td {...cellOptions}>{label}</td>
-									);
-								})}
-							</tr>
-						)
-					)}
-				</tbody>
-			</table>
-			{Number.isInteger(minLines) && lines < maxLines && (
-				<Button
-					label="addLine"
-					value="Add a line"
-					onClick={() => setLines(lines + 1)}
-				/>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.DETACHABLE}
-				declarations={declarations}
-			/>
-		</React.Fragment>
-	);
-};
-
-Table.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	cells: [],
-	lines: {},
-	declarations: [],
-	tooltip: false,
-	style: {},
-};
-
-Table.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	cells: PropTypes.array,
-	handleChange: PropTypes.func.isRequired,
-	lines: U.linesPropTypes,
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Table;

package/src/components/table/table.scss

@@ -1,23 +0,0 @@
-@import 'src/components/index.scss';
-
-.table-lunatic {
-	table-layout: fixed;
-	border-collapse: collapse;
-	margin-top: 0.3em;
-	margin-bottom: 0.3em;
-	& td,
-	th {
-		border: 0.15em solid $main_color;
-		padding: 0.2em;
-		fieldset {
-			margin: none;
-			border: none;
-			.radio-modality {
-				margin-top: 0;
-			}
-			.checkbox-modality {
-				margin-top: 0;
-			}
-		}
-	}
-}