@inseefr/lunatic 0.2.0-v2 → 0.2.1-prisme

package/src/components/loop/roster-for-loop/row.js

@@ -1,67 +0,0 @@
-import React, { useCallback } from 'react';
-import { Tr, Td } from '../../commons/components/html-table';
-
-import { OrchestratedComponent } from '../../commons';
-
-function Row({
-	id,
-	components,
-	valueMap,
-	rowIndex,
-	handleChange,
-	features,
-	missing,
-	shortcut,
-	management,
-	preferences,
-	executeExpression,
-	custom,
-}) {
-	const handleChangeRow = useCallback(
-		function (response, value) {
-			handleChange(response, value, { index: rowIndex });
-		},
-		[handleChange, rowIndex]
-	);
-
-	if (Array.isArray(components)) {
-		return (
-			<Tr id={id} custom={custom} row={rowIndex}>
-				{components.map(function (component) {
-					const { response, id } = component;
-					const idComponent = `${id}-${rowIndex + 1} `;
-					let value = undefined;
-					const key = `${id}-${rowIndex}`;
-					if (response) {
-						const { name } = response;
-						if (name in valueMap) {
-							value = valueMap[name][rowIndex] || '';
-						}
-					}
-
-					return (
-						<Td id={idComponent} key={key} custom={custom}>
-							<OrchestratedComponent
-								component={component}
-								handleChange={handleChangeRow}
-								features={features}
-								missing={missing}
-								shortcut={shortcut}
-								management={management}
-								value={value}
-								id={idComponent}
-								preferences={preferences}
-								iteration={rowIndex}
-								executeExpression={executeExpression}
-								custom={custom}
-							/>
-						</Td>
-					);
-				})}
-			</Tr>
-		);
-	}
-	return <Tr id={id}></Tr>;
-}
-
-export default Row;

package/src/components/modal-controls/close-or-skip.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import Button from '../button';
-
-function CloseOrSkip({ errors, onClose, onSkip }) {
-	const bloc = Object.values(errors)
-		.flat()
-		.reduce(function (status, { criticality }) {
-			return status || criticality === 'WARN';
-		}, false);
-
-	if (bloc) {
-		return (
-			<Button className="modal-button" onClick={onClose}>
-				Close
-			</Button>
-		);
-	}
-	return (
-		<Button className="modal-button" onClick={onSkip}>
-			Next
-		</Button>
-	);
-}
-
-export default CloseOrSkip;

package/src/components/modal-controls/index.js

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

package/src/components/modal-controls/modal-container.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-function ModalContainer({ children }) {
-	return ReactDOM.createPortal(
-		<div className="lunatic-modal-controls">
-			<div className="modal">{children}</div>
-		</div>,
-		document.body
-	);
-}
-
-export default ModalContainer;

package/src/components/modal-controls/modal-controls.js

@@ -1,42 +0,0 @@
-import React, { useCallback } from 'react';
-import classnames from 'classnames';
-import ModalContainer from './modal-container';
-import CloseOrSkip from './close-or-skip';
-import './modal-controls.scss';
-
-function Error({ criticality, errorMessage }) {
-	const { value } = errorMessage;
-	return <li className={classnames(criticality)}>{value}</li>;
-}
-
-function ComponentErrors({ errors }) {
-	const content = errors.map(function (error, index) {
-		return <Error {...error} key={index} />;
-	}, []);
-	return <ul className={classnames('errors')}>{content}</ul>;
-}
-
-function ModalControls({ title, errors, goNext }) {
-	const onClose = useCallback(
-		function () {
-			goNext({ block: true });
-		},
-		[goNext]
-	);
-	if (typeof errors === 'object') {
-		const content = Object.entries(errors).map(function ([id, errors]) {
-			return <ComponentErrors errors={errors} key={id} />;
-		}, []);
-
-		return (
-			<ModalContainer>
-				<div className="title">{title}</div>
-				<div className="body">{content}</div>
-				<CloseOrSkip onSkip={goNext} onClose={onClose} errors={errors} />
-			</ModalContainer>
-		);
-	}
-	return null;
-}
-
-export default ModalControls;

package/src/components/pairwise/index.js

@@ -1,2 +0,0 @@
-export { default as PairwiseBlock } from './pairwise-block';
-export { default as PairwiseLinks } from './pairwise-links';

package/src/components/pairwise/pairwise-block.js

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const PairwiseBlock = () => <div>TODO: PairwiseBlock</div>;
-
-export default PairwiseBlock;

package/src/components/pairwise/pairwise-links.js

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const PairwiseLinks = () => <div>TODO: PairwiseLinks</div>;
-
-export default PairwiseLinks;

package/src/components/radio/lunatic-radio-group.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import RadioGroup from './radio-group';
-import { createLunaticComponent } from '../commons';
-import './radio.scss';
-
-function LunaticRadioGroup(props) {
-	const { id, options, value, onChange, checkboxStyle, custom } = props;
-	return (
-		<RadioGroup
-			id={id}
-			options={options}
-			value={value}
-			onClick={onChange}
-			checkboxStyle={checkboxStyle}
-			custom={custom}
-		/>
-	);
-}
-
-export default createLunaticComponent(LunaticRadioGroup, {
-	fieldset: true,
-	inputId: 'lunatic-radio-group',
-});

package/src/components/radio/radio-group.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import RadioOption from './radio-option';
-import { Label, useOptionsKeydown } from '../commons';
-import { createCustomizableLunaticField } from '../commons';
-
-function Radio({ options, value, id, onClick, checkboxStyle = false }) {
-	const onKeyDown = useOptionsKeydown(options, onClick);
-
-	return options.map(function (option, index) {
-		const { value: valueOption, label } = option;
-		const radioId = `lunatic-radio-${id}-${valueOption}`;
-		const labelId = `lunatic-radio-label-${id}-${valueOption}`;
-
-		return (
-			<div key={radioId} className="lunatic-radio-group-option">
-				<Label id={labelId} htmlFor={radioId}>
-					{label}
-				</Label>
-				<RadioOption
-					id={radioId}
-					labelledBy={labelId}
-					index={index}
-					checked={value === valueOption}
-					onClick={onClick}
-					value={valueOption}
-					onKeyDown={onKeyDown}
-					checkboxStyle={checkboxStyle}
-				/>
-			</div>
-		);
-	});
-}
-
-export default createCustomizableLunaticField(Radio);

package/src/components/radio/radio-option.js

@@ -1,89 +0,0 @@
-import React, { useEffect, useRef, useCallback } from 'react';
-import classnames from 'classnames';
-import {
-	RadioChecked,
-	RadioUnchecked,
-	CheckboxChecked,
-	CheckboxUnchecked,
-} from 'components/commons/icons';
-
-function getIcon(checked, checkboxStyle) {
-	if (checked) {
-		if (checkboxStyle) {
-			return CheckboxChecked;
-		}
-		return RadioChecked;
-	}
-	if (checkboxStyle) {
-		return CheckboxUnchecked;
-	}
-	return RadioUnchecked;
-}
-
-function RadioOption({
-	checked,
-	onClick,
-	value,
-	id,
-	disabled,
-	onKeyDown,
-	index,
-	labelledBy,
-	checkboxStyle,
-}) {
-	const spanEl = useRef();
-	const Icon = getIcon(checked, checkboxStyle);
-	const tabIndex = checked ? '0' : '-1';
-
-	const onClickOption = useCallback(
-		function () {
-			onClick(value);
-		},
-		[value, onClick]
-	);
-
-	const handleKeyDown = useCallback(
-		function (e) {
-			const { key } = e;
-			const { current } = spanEl;
-			onKeyDown({ key, index });
-			current.blur();
-		},
-		[onKeyDown, index, spanEl]
-	);
-
-	useEffect(
-		function () {
-			const { current } = spanEl;
-			if (current && checked) {
-				current.focus();
-			}
-		},
-		[checked, spanEl, value]
-	);
-
-	return (
-		<div
-			className={classnames('radio-modality', 'radio-modality-block', {
-				checked,
-				disabled,
-			})}
-		>
-			<span
-				id={id}
-				role="radio"
-				className="lunatic-input-radio"
-				aria-checked={checked}
-				tabIndex={tabIndex}
-				onClick={onClickOption}
-				onKeyDown={handleKeyDown}
-				aria-labelledby={labelledBy}
-				ref={spanEl}
-			>
-				<Icon />
-			</span>
-		</div>
-	);
-}
-
-export default RadioOption;

package/src/components/sequence/sequence.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import {
-	DeclarationsBeforeText,
-	DeclarationsAfterText,
-	DeclarationsDetachable,
-} from '../declarations';
-import { Label, safetyLabel } from '../commons';
-import './sequence.scss';
-
-function Sequence({ declarations, label, id, style }) {
-	return (
-		<>
-			<DeclarationsBeforeText declarations={declarations} />
-			<Label className="sequence-lunatic" id={`sequence-${id}`} style={style}>
-				{safetyLabel(label, id)}
-			</Label>
-			<DeclarationsAfterText declarations={declarations} />
-			<DeclarationsDetachable declarations={declarations} />
-		</>
-	);
-}
-
-export default Sequence;

package/src/components/subsequence/subsequence.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import {
-	DeclarationsBeforeText,
-	DeclarationsAfterText,
-	DeclarationsDetachable,
-} from '../declarations';
-
-function Subsequence({ id, declarations, label }) {
-	return (
-		<>
-			<DeclarationsBeforeText declarations={declarations} />
-			<div
-				aria-label={`sequence-${id}`}
-				className="sequence-lunatic"
-				id={`sequence-${id}`}
-			>
-				{label}
-			</div>
-			<DeclarationsAfterText declarations={declarations} />
-			<DeclarationsDetachable declarations={declarations} />
-		</>
-	);
-}
-
-export default Subsequence;

package/src/components/suggester/suggester.js

@@ -1,117 +0,0 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-
-import {
-	ComboBox,
-	DefaultOptionRenderer,
-	DefaultLabelRenderer,
-	createCustomizableLunaticField,
-} from '../commons';
-import './default-style.scss';
-
-function getSearch(search, value) {
-	if (!search.length) {
-		if (value) {
-			return value;
-		}
-	}
-
-	return '';
-}
-
-function Suggester({
-	className,
-	labelledBy,
-	placeholder,
-	onSelect,
-	labelRenderer,
-	optionRenderer,
-	value,
-	custom,
-	disabled,
-	id,
-	searching,
-}) {
-	const htmlFor = `lunatic-suggester-${id}`;
-	const [search, setSearch] = useState('');
-	const [options, setOptions] = useState([]);
-
-	const handleSelect = useCallback(
-		function (id) {
-			if (id) {
-				onSelect(id);
-			} else {
-				onSelect(null);
-			}
-		},
-		[onSelect]
-	);
-
-	const handleChange = useCallback(
-		async function (search) {
-			if (search && typeof searching === 'function') {
-				const { results, search: old } = await searching(search);
-				setOptions(results);
-				setSearch(search);
-			} else {
-				setOptions([]);
-				onSelect(null);
-				setSearch('');
-			}
-		},
-		[searching, onSelect]
-	);
-
-	const defaultSearch = getSearch(search, value);
-
-	return (
-		<ComboBox
-			id={id}
-			htmlFor={htmlFor}
-			className={className}
-			labelledBy={labelledBy}
-			onChange={handleChange}
-			disabled={disabled}
-			options={options}
-			editable={true}
-			onSelect={handleSelect}
-			value={value}
-			search={defaultSearch}
-			custom={custom}
-			optionRenderer={optionRenderer}
-			labelRenderer={labelRenderer}
-			placeholder={placeholder}
-		/>
-	);
-}
-
-Suggester.propTypes = {
-	id: PropTypes.string.isRequired,
-	className: PropTypes.string,
-	placeholder: PropTypes.string,
-	labelledBy: PropTypes.string,
-	optionRenderer: PropTypes.elementType,
-	labelRenderer: PropTypes.elementType,
-	onSelect: PropTypes.func,
-	value: PropTypes.oneOfType([
-		PropTypes.string,
-		PropTypes.number,
-		PropTypes.bool,
-		PropTypes.object,
-	]),
-	searching: PropTypes.func,
-};
-
-Suggester.defaultProps = {
-	className: 'lunatic-suggester-default-style',
-	labelledBy: undefined,
-	placeholder: 'Veuillez...',
-	optionRenderer: DefaultOptionRenderer,
-	labelRenderer: DefaultLabelRenderer,
-	language: 'French',
-	onSelect: () => null,
-	value: undefined,
-	searching: undefined,
-};
-
-export default createCustomizableLunaticField(Suggester);

package/src/components/switch/index.js

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

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

@@ -1,36 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import Switch from './switch';
-
-import { createLunaticComponent } from '../commons';
-
-function LunaticSwitch({ id, value, statusLabel, onChange, custom, labelId }) {
-	const booleanValue = value || false;
-	const onClick = useCallback(
-		function (status) {
-			onChange(status);
-		},
-		[onChange]
-	);
-
-	return (
-		<Switch
-			id={id}
-			checked={booleanValue}
-			onClick={onClick}
-			statusLabel={statusLabel}
-			labelId={labelId}
-			custom={custom}
-		/>
-	);
-}
-
-LunaticSwitch.propTypes = {
-	value: PropTypes.oneOf([null, true, false]),
-};
-
-LunaticSwitch.defaultProps = { statusLabel: { true: 'True', false: 'False' } };
-
-export default createLunaticComponent(LunaticSwitch, {
-	inputId: 'lunatic-switch',
-});

package/src/components/switch/switch.js

@@ -1,73 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { createCustomizableLunaticField } from '../commons';
-import './switch.scss';
-
-function Switch({ checked, disabled, onClick, statusLabel, labelId, id }) {
-	const handleClick = useCallback(
-		function () {
-			onClick(!checked);
-		},
-		[checked, onClick]
-	);
-
-	const handleKeyDown = useCallback(
-		function (e) {
-			const { code } = e;
-			if (code === 'Space') {
-				onClick();
-			}
-		},
-		[onClick]
-	);
-	const { true: labelTrue, false: labelFalse } = statusLabel;
-
-	return (
-		<div className="lunatic-switch" id={id}>
-			<div
-				className={classnames('lunatic-switch-label', { checked: !checked })}
-			>
-				{labelFalse}
-			</div>
-			<div
-				role="switch"
-				aria-checked={checked}
-				tabIndex="0"
-				className={classnames('lunatic-switch-container', {
-					disabled,
-					checked,
-				})}
-				onClick={handleClick}
-				onKeyDown={handleKeyDown}
-				labelledBy={labelId}
-			>
-				<div className="lunatic-switch-button"></div>
-			</div>
-			<div className={classnames('lunatic-switch-label', { checked })}>
-				{labelTrue}
-			</div>
-		</div>
-	);
-}
-
-Switch.propTypes = {
-	checked: PropTypes.bool.isRequired,
-	disabled: PropTypes.bool,
-	handleChange: PropTypes.func.isRequired,
-	statusLabel: PropTypes.shape({
-		true: PropTypes.string,
-		false: PropTypes.string,
-	}),
-	labelId: PropTypes.string.isRequired,
-};
-
-Switch.defaultProps = {
-	disabled: false,
-	statusLabel: {
-		true: 'True',
-		false: 'False',
-	},
-};
-
-export default createCustomizableLunaticField(Switch);

package/src/components/table/cell.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import { OrchestratedComponent } from '../commons';
-import { Td as HtmlTd } from '../commons/components/html-table';
-
-function collecteResponseValue(response, value) {
-	if (typeof response === 'object') {
-		const { name } = response;
-		if (name in value) {
-			return value[name];
-		}
-	}
-
-	return undefined;
-}
-
-function collecteArrayResponseValue(responses, value) {
-	const [response, ...rest] = responses;
-
-	if (response) {
-		return [
-			collecteResponseValue(response, value),
-			collecteArrayResponseValue(rest, value),
-		];
-	}
-	return [];
-}
-
-function collecteValue(component, value) {
-	const { response, responses } = component;
-
-	if (Array.isArray(responses)) {
-		return collecteArrayResponseValue(responses, value);
-	}
-	if (typeof response === 'object') {
-		return collecteResponseValue(response, value);
-	}
-	return {};
-}
-
-function Cell({
-	content,
-	id,
-	custom,
-	executeExpression,
-	iteration,
-	value,
-	row,
-	index,
-	handleChange,
-}) {
-	const { label, componentType, rowspan, colspan } = content;
-
-	if (componentType) {
-		const valueField = collecteValue(content, value);
-		return (
-			<HtmlTd
-				id={id}
-				row={row}
-				index={index}
-				rowSpan={rowspan}
-				colSpan={colspan}
-			>
-				<OrchestratedComponent
-					id={id}
-					component={content}
-					handleChange={handleChange}
-					value={valueField}
-					custom={custom}
-					executeExpression={executeExpression}
-					iteration={iteration}
-				/>
-			</HtmlTd>
-		);
-	}
-
-	return (
-		<HtmlTd id={id} row={row} index={index} rowSpan={rowspan} colSpan={colspan}>
-			{label || ''}
-		</HtmlTd>
-	);
-}
-
-export default Cell;