@inseefr/lunatic 2.3.0 → 2.4.0

package/src/components/radio/radio.scss

@@ -1,57 +0,0 @@
-.radio-group-list {
-	border: 0;
-	outline: 0;
-	padding: 0;
-	margin-top: 0.9375rem;
-}
-
-.radio-lunatic {
-	position: absolute;
-	opacity: 0;
-	margin-bottom: 0;
-	margin-top: 0.05rem;
-	margin-left: 0.2rem;
-	height: 20px;
-	width: 20px;
-	+ label {
-		margin-left: 2rem;
-	}
-	&:focus {
-		+ label {
-			background-color: rgba(0, 0, 0, 0.05);
-		}
-	}
-	+ label::before {
-		float: left;
-		line-height: 2rem;
-	}
-}
-
-.field,
-.field-with-tooltip {
-	.radio-group-list .radio-modality {
-		height: 1.375em;
-	}
-}
-
-.radio-group-list {
-	.radio-modality {
-		label {
-			display: flex;
-		}
-	}
-	.radio-modality.radio-modality-block label {
-		padding-top: 0.325em;
-	}
-	.radio-modality.radio-modality-block.horizontal-options label {
-		padding-top: 0;
-	}
-}
-
-.radio-modality {
-	margin-bottom: 0.8em;
-}
-
-.radio-lunatic + label {
-	margin-top: 0.325em;
-}

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,8 +0,0 @@
-.sequence-lunatic {
-	padding: 0;
-	font-size: 0.875rem;
-	color: var(--color-primary-light);
-	background-color: var(--color-secondary-contrast-text);
-	border: 0;
-	height: 1.875rem;
-}

package/src/components/subsequence/component.js

@@ -1,47 +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,
-}) => (
-	<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/suggester/component.js

@@ -1,103 +0,0 @@
-import React 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 '../../constants';
-import { interpret } from '../../utils/to-expose';
-
-const Suggester = ({
-	id,
-	label,
-	preferences,
-	response,
-	handleChange: propsHandleChange,
-	disabled,
-	positioning,
-	focused,
-	declarations,
-	features,
-	bindings,
-	management,
-	labelPosition,
-	style,
-}) => {
-	return (
-		<>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<div className={U.getLabelPositionClass(labelPosition)}>
-				{label && (
-					<label htmlFor={`suggester-${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'}`}>
-						TODO: Add suggester component
-					</div>
-					{management && (
-						<div className="tooltip">
-							<TooltipResponse
-								id={id}
-								response={U.buildBooleanTooltipResponse(response)}
-							/>
-						</div>
-					)}
-				</div>
-			</div>
-			<Declarations
-				id={id}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-Suggester.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	response: {},
-	disabled: false,
-	focused: false,
-	declarations: [],
-	features: [],
-	bindings: {},
-	management: false,
-	labelPosition: 'DEFAULT',
-	style: {},
-};
-
-Suggester.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,
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	management: PropTypes.bool,
-	path: PropTypes.string.isRequired,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	style: PropTypes.object,
-};
-
-export default React.memo(Suggester, U.areEqual);

package/src/components/suggester/index.js

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

package/src/components/table/index.js

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

package/src/components/table/table.js

@@ -1,162 +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,
-	numberAsTextfield,
-}) => {
-	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}
-													numberAsTextfield
-												/>
-											</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,24 +0,0 @@
-.table-lunatic {
-	table-layout: fixed;
-	border-collapse: collapse;
-	margin-top: 0.3em;
-	margin-bottom: 0.3em;
-	& td,
-	th {
-		border: 0.15em solid var(--color-primary-dark);
-		padding: 0.2em;
-	}
-	& td {
-		.field,
-		.field-with-tooltip {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-}
-
-.table-lunatic .tooltip-lunatic img {
-	height: 20px;
-	width: 20px;
-}

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,6 +0,0 @@
-// see input.scss
-
-.textarea-lunatic {
-	height: 3em;
-	width: 100%;
-}

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,52 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import ReactTooltip from 'react-tooltip';
-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;
-
-	const text = content
-		.map(({ key, value }) => `${key} : ${value}<br />`)
-		.join('');
-
-	return (
-		<div className="tooltip-lunatic">
-			<span
-				data-for={`${id}-management-tooltip`}
-				data-tip={text}
-				data-multiline
-			>
-				<img id={id} alt="img-tooltip" src={img[imgName].src || img[imgName]} />
-			</span>
-			<ReactTooltip
-				id={`${id}-management-tooltip`}
-				className="tooltip-text"
-				place="left"
-			/>
-		</div>
-	);
-};
-
-TooltipResponse.defaultProps = {
-	response: {},
-};
-
-TooltipResponse.propTypes = {
-	id: PropTypes.string,
-	response: U.responsePropTypes,
-};
-
-export default TooltipResponse;

package/src/components/tooltip/tooltip.scss

@@ -1,27 +0,0 @@
-@import 'src/components/index.scss';
-
-/* Tooltip container */
-.tooltip-lunatic {
-	position: relative;
-	display: inline-block;
-	align-items: center;
-}
-
-/* Tooltip text */
-.tooltip-lunatic .tooltip-text {
-	min-width: 10em;
-	max-width: 20em;
-	background-color: var(--color-primary-dark);
-	color: #fff;
-	padding: 0.5em;
-	border-radius: 6px;
-	font-size: 1em;
-	&.place-left {
-		&::before {
-			border-left: 10px solid var(--color-primary-dark);
-		}
-		&::after {
-			content: none;
-		}
-	}
-}

package/src/constants/component-types.js

@@ -1 +0,0 @@
-export const CHECKBOX_GROUP = 'CheckboxGroup';

package/src/constants/declarations.js

@@ -1,14 +0,0 @@
-// Declaration position
-
-export const BEFORE_QUESTION_TEXT = 'BEFORE_QUESTION_TEXT';
-export const AFTER_QUESTION_TEXT = 'AFTER_QUESTION_TEXT';
-export const DETACHABLE = 'DETACHABLE';
-
-// Declaration types
-
-export const INSTRUCTION = 'INSTRUCTION';
-export const COMMENT = 'COMMENT';
-export const HELP = 'HELP';
-export const WARNING = 'WARNING';
-export const MESSAGE_FILTER = 'MESSAGE_FILTER';
-export const STATEMENT = 'STATEMENT';

package/src/constants/index.js

@@ -1,4 +0,0 @@
-export * from './component-types';
-export * from './declarations';
-export * from './value-types';
-export * from './variable-types';

package/src/constants/supported-preferences.js

@@ -1,10 +0,0 @@
-import * as C from './value-types';
-
-// ORDERED ARRAY
-export const supportedPreferences = [
-	C.PREVIOUS,
-	C.COLLECTED,
-	C.FORCED,
-	C.EDITED,
-	C.INPUTED,
-];

package/src/constants/value-types.js

@@ -1,5 +0,0 @@
-export const PREVIOUS = 'PREVIOUS';
-export const COLLECTED = 'COLLECTED';
-export const FORCED = 'FORCED';
-export const EDITED = 'EDITED';
-export const INPUTED = 'INPUTED';

package/src/constants/variable-types.js

@@ -1,4 +0,0 @@
-export const EXTERNAL = 'EXTERNAL';
-export const CALCULATED = 'CALCULATED';
-// Already define in value-types
-//export const COLLECTED = 'COLLECTED';

package/src/stories/breadcrumb/README.md

@@ -1,14 +0,0 @@
-# Breadcrumb component
-
-## Props
-
-|    Props    |  Type  | Default value | Required | Description                |
-| :---------: | :----: | :-----------: | :------: | -------------------------- |
-| elements \* | array  |      [ ]      |          | Elements of the breadcrumb |
-|    style    | object |      { }      |          | Style of the breadcrumb    |
-
-- `elements` props has to be an array composed of ordered strings
-
-## Styles
-
-**Breadcrumb** component has for class `breadcrumb-lunatic`.

package/src/stories/breadcrumb/breadcrumb.stories.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { Breadcrumb } from 'components';
-import { withReadme } from 'storybook-readme';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-
-const elements = ['Sequence', 'Sub-sequence', 'Question'];
-
-const stories = storiesOf('Breadcrumb', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator((Component) => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Breadcrumb />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Breadcrumb id="default" elements={elements} />
-));

package/src/stories/button/README.md

@@ -1,14 +0,0 @@
-# Button component
-
-## Props
-
-|  Props   |   Type   | Default value | Required | Description                   |
-| :------: | :------: | :-----------: | :------: | ----------------------------- |
-|  label   |  string  |   "button"    |          | Aria label                    |
-|  value   |  string  |       -       |    ✓     | Label of the button           |
-| onClick  | function |       -       |    ✓     | Callback                      |
-| disabled | boolean  |     false     |          | Boolean to disable the button |
-
-## Styles
-
-**Button** component has for class `button-lunatic`.