@inseefr/lunatic 2.0.0 → 2.0.1-v2

package/src/components/loop-constructor/wrapper/component.js

@@ -1,152 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import * as lunatic from '../../components';
-import BodyComponent from './body-component';
-import Declarations from '../../declarations';
-import * as U from '../../../utils/lib';
-import * as C from '../../../constants';
-import { interpret } from '../../../utils/to-expose';
-
-const LoopConstructorWrapper = ({
-	id: mainId,
-	label: mainLabel,
-	components,
-	handleChange,
-	lines,
-	declarations,
-	features,
-	bindings,
-	addBtnLabel,
-	hideBtn,
-	componentType,
-	...otherProps
-}) => {
-	const [todo, setTodo] = useState({});
-	const minLines = Math.max(
-		lines.min || 0,
-		U.getLoopConstructorInitLines(components)
-	);
-	const maxLines = lines ? lines.max : undefined;
-
-	const width = `${100 / Math.max(...components.map((row) => row.length))}%`;
-	const Button = lunatic.Button;
-	const involvedVariables = U.getInvolvedVariables(components);
-
-	useEffect(() => {
-		if (Object.keys(todo).length !== 0) {
-			const { up, rowNumber } = todo;
-			const [key, value] = Object.entries(up)[0];
-			const previousValue = bindings[key];
-			const newValue = previousValue.map((v, i) =>
-				i === rowNumber ? value : v
-			);
-			handleChange({ [key]: newValue });
-			setTodo({});
-		}
-	}, [bindings, todo, handleChange]);
-
-	const addLine = () => {
-		const toHandle = involvedVariables.reduce(
-			(acc, { name: iv, depth }) => ({
-				...acc,
-				[iv]: [...bindings[iv], U.buildEmptyValue(depth)],
-			}),
-			{}
-		);
-		handleChange(toHandle);
-	};
-
-	const customBtnLabel =
-		(componentType === 'Loop' && interpret(features)(bindings)(mainLabel)) ||
-		addBtnLabel;
-
-	return (
-		<>
-			<Declarations
-				id={mainId}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			{componentType === 'RosterForLoop' && mainLabel && (
-				<label
-					htmlFor={`loops-constructor-${mainId}`}
-					id={`loops-constructor-label-${mainId}`}
-				>
-					{interpret(features)(bindings)(mainLabel)}
-				</label>
-			)}
-			<Declarations
-				id={mainId}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<BodyComponent
-				mainId={mainId}
-				componentType={componentType}
-				components={components}
-				bindings={bindings}
-				width={width}
-				features={features}
-				setTodo={setTodo}
-				{...otherProps}
-			/>
-			{!hideBtn && (
-				<Button
-					label="addLine"
-					value={customBtnLabel}
-					disabled={
-						(Number.isInteger(minLines) && minLines === maxLines) ||
-						U.lastLoopChildLineIsEmpty(bindings)(involvedVariables)
-					}
-					onClick={addLine}
-				/>
-			)}
-			<Declarations
-				id={mainId}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-LoopConstructorWrapper.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	components: [],
-	lines: {},
-	positioning: 'DEFAULT',
-	declarations: [],
-	features: [],
-	bindings: {},
-	addBtnLabel: 'Add a line',
-	management: false,
-	hideBtn: false,
-	style: {},
-};
-
-LoopConstructorWrapper.propTypes = {
-	componentType: PropTypes.string.isRequired,
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	components: PropTypes.array,
-	handleChange: PropTypes.func.isRequired,
-	lines: U.linesPropTypes,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	addBtnLabel: PropTypes.string,
-	hideBtn: PropTypes.bool,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default React.memo(LoopConstructorWrapper, U.areEqual);

package/src/components/loop-constructor/wrapper/index.js

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

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,8 +0,0 @@
-import React from 'react';
-import { ListDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './radio.scss';
-
-const Radio = (props) => <ListDeclarationsWrapper type="radio" {...props} />;
-
-export default React.memo(Radio, areEqual);

package/src/components/radio/index.js

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

package/src/components/radio/radio.scss

@@ -1,24 +0,0 @@
-@import 'src/components/index.scss';
-
-.radio-group {
-	border: 0.1em solid $main_color;
-}
-
-.radio-lunatic {
-	margin: 0;
-	margin-right: 1em;
-	margin-left: 1em;
-	margin-top: 0.5em;
-	&:focus {
-		outline: none;
-		box-shadow: 0 0 0.3em 0.3em $main_color;
-	}
-	&:checked + label {
-		border: 0.1em solid $main_color;
-		padding: 0.3em;
-	}
-}
-
-.radio-modality {
-	margin-top: 1em;
-}

package/src/components/sequence/component.js

@@ -1,41 +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 }) => (
-	<SimpleDeclarationsWrapper
-		id={id}
-		declarations={declarations}
-		features={features}
-		bindings={bindings}
-	>
-		<div
-			aria-label={`sequence-${id}`}
-			className="sequence-lunatic"
-			style={U.buildStyleObject(style)}
-		>
-			{interpret(features)(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/sequence/index.js

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

package/src/components/sequence/sequence.scss

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

package/src/components/subsequence/component.js

@@ -1,48 +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 './subsequence.scss';
-
-const Subsequence = ({
-	id,
-	label,
-	declarations,
-	features,
-	bindings,
-	style,
-}) => (
-	<SimpleDeclarationsWrapper
-		id={id}
-		declarations={declarations}
-		features={features}
-		bindings={bindings}
-	>
-		<div
-			aria-label={`subsequence-${id}`}
-			className="subsequence-lunatic"
-			style={U.buildStyleObject(style)}
-		>
-			{interpret(features)(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/components/subsequence/index.js

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

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/index.js

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

package/src/components/table/table.js

@@ -1,160 +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 '../../constants';
-import { interpret } from '../../utils/to-expose';
-import './table.scss';
-
-const Table = ({
-	id: tableId,
-	label: tableLabel,
-	preferences,
-	cells,
-	handleChange,
-	lines: initLines,
-	positioning,
-	declarations,
-	features,
-	bindings,
-	addBtnLabel,
-	hideBtn,
-	management,
-}) => {
-	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 (
-		<>
-			<Declarations
-				id={tableId}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			{tableLabel && (
-				<label
-					htmlFor={`table-one-axis-${tableId}`}
-					id={`table-one-axis-label-${tableId}`}
-				>
-					{interpret(features)(bindings)(tableLabel)}
-				</label>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<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}
-													positioning={positioning}
-													management={management}
-													features={features}
-													bindings={bindings}
-													{...componentProps}
-													zIndex={cells.length - i || 0}
-												/>
-											</td>
-										);
-									}
-									const cellOptions = {
-										key: `table-${tableId}-line${i}-cell-${j}`,
-										style: { width },
-										colSpan: colspan || 1,
-										rowSpan: rowspan || 1,
-									};
-									const interpretedLabel = interpret(features)(bindings)(label);
-									return headerCell ? (
-										<th {...cellOptions}>{interpretedLabel}</th>
-									) : (
-										<td {...cellOptions}>{interpretedLabel}</td>
-									);
-								})}
-							</tr>
-						)
-					)}
-				</tbody>
-			</table>
-			{Number.isInteger(minLines) && lines < maxLines && !hideBtn && (
-				<Button
-					label="addLine"
-					value={addBtnLabel}
-					onClick={() => setLines(lines + 1)}
-				/>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-Table.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	cells: [],
-	lines: {},
-	positioning: 'DEFAULT',
-	declarations: [],
-	features: [],
-	bindings: {},
-	addBtnLabel: 'Add a line',
-	management: false,
-	hideBtn: 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,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	addBtnLabel: PropTypes.string,
-	hideBtn: PropTypes.bool,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default React.memo(Table, U.areEqual);

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

package/src/components/textarea/component.js

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

package/src/components/textarea/index.js

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

package/src/components/textarea/textarea.scss

@@ -1,16 +0,0 @@
-@import 'src/components/index.scss';
-
-.textarea-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/tooltip/img/index.js

@@ -1,4 +0,0 @@
-import editedImg from './edited.png';
-import forcedImg from './forced.png';
-
-export { editedImg, forcedImg };

package/src/components/tooltip/index.js

@@ -1 +0,0 @@
-export { default as TooltipResponse } from './response';

package/src/components/tooltip/response.js

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import * as U from '../../utils/lib';
-import * as img from './img';
-import './tooltip.scss';
-
-const TooltipResponse = ({ id, response }) => {
-	const [tooltipElements, setTooltipElements] = useState(() =>
-		U.buildTooltip(response)
-	);
-
-	useEffect(() => {
-		setTooltipElements(U.buildTooltip(response));
-	}, [response]);
-
-	const { content, imgName } = tooltipElements;
-
-	if (!content) return null;
-	return (
-		<div className="tooltip-lunatic">
-			<img id={id} alt="img-tooltip" src={img[imgName].src || img[imgName]} />
-			<span className="tooltip-text">
-				<ul>
-					{content.map(({ key, value }) => (
-						<li key={`tooltip-${id}-content-${key}`}>{`${key} : ${value}`}</li>
-					))}
-				</ul>
-			</span>
-		</div>
-	);
-};
-
-TooltipResponse.defaultProps = {
-	response: {},
-};
-
-TooltipResponse.propTypes = {
-	id: PropTypes.string,
-	response: U.responsePropTypes,
-};
-
-export default TooltipResponse;