@inseefr/lunatic 0.2.61 → 0.3.1-experimental

package/src/components/table/table.js

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import componentWrapper from '../component-wrapper';
 import * as lunatic from '../components';
 import Declarations from '../declarations';
 import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
+import * as C from '../../constants';
+import { interpret } from '../../utils/to-expose';
 import './table.scss';
 
 const Table = ({
@@ -13,8 +15,15 @@ const Table = ({
 	cells,
 	handleChange,
 	lines: initLines,
+	positioning,
 	declarations,
-	tooltip,
+	features,
+	bindings,
+	addBtnLabel,
+	hideBtn,
+	management,
+	numberAsTextfield,
+	logFunction,
 }) => {
 	const minLines = initLines
 		? Math.max(initLines.min, U.getRosterInitLines(cells))
@@ -22,27 +31,31 @@ const Table = ({
 	const maxLines = initLines ? initLines.max : undefined;
 	const [lines, setLines] = useState(minLines);
 
-	const width = `${100 / Math.max(...cells.map(line => line.length))}%`;
+	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}
+				features={features}
+				bindings={bindings}
 			/>
 			{tableLabel && (
 				<label
 					htmlFor={`table-one-axis-${tableId}`}
 					id={`table-one-axis-label-${tableId}`}
 				>
-					{tableLabel}
+					{interpret(features, logFunction)(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>
@@ -66,11 +79,18 @@ const Table = ({
 												style={{ width }}
 											>
 												<Component
-													label={label}
+													label={label || ' '}
 													handleChange={handleChange}
 													preferences={preferences}
-													tooltip={tooltip}
+													positioning={positioning}
+													management={management}
+													features={features}
+													bindings={bindings}
 													{...componentProps}
+													zIndex={cells.length - i || 0}
+													numberAsTextfield
+													logFunction={logFunction}
+													shortcut={false}
 												/>
 											</td>
 										);
@@ -81,10 +101,14 @@ const Table = ({
 										colSpan: colspan || 1,
 										rowSpan: rowspan || 1,
 									};
+									const interpretedLabel = interpret(
+										features,
+										logFunction
+									)(bindings)(label);
 									return headerCell ? (
-										<th {...cellOptions}>{label}</th>
+										<th {...cellOptions}>{interpretedLabel}</th>
 									) : (
-										<td {...cellOptions}>{label}</td>
+										<td {...cellOptions}>{interpretedLabel}</td>
 									);
 								})}
 							</tr>
@@ -92,19 +116,23 @@ const Table = ({
 					)}
 				</tbody>
 			</table>
-			{Number.isInteger(minLines) && lines < maxLines && (
+			{Number.isInteger(minLines) && lines < maxLines && !hideBtn && (
 				<Button
 					label="addLine"
-					value="Add a line"
+					value={addBtnLabel}
 					onClick={() => setLines(lines + 1)}
+					id={tableId}
+					logFunction={logFunction}
 				/>
 			)}
 			<Declarations
 				id={tableId}
 				type={C.DETACHABLE}
 				declarations={declarations}
+				features={features}
+				bindings={bindings}
 			/>
-		</React.Fragment>
+		</>
 	);
 };
 
@@ -113,8 +141,13 @@ Table.defaultProps = {
 	preferences: ['COLLECTED'],
 	cells: [],
 	lines: {},
+	positioning: 'DEFAULT',
 	declarations: [],
-	tooltip: false,
+	features: [],
+	bindings: {},
+	addBtnLabel: 'Add a line',
+	management: false,
+	hideBtn: false,
 	style: {},
 };
 
@@ -125,9 +158,14 @@ Table.propTypes = {
 	cells: PropTypes.array,
 	handleChange: PropTypes.func.isRequired,
 	lines: U.linesPropTypes,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
 	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	addBtnLabel: PropTypes.string,
+	hideBtn: PropTypes.bool,
+	management: PropTypes.bool,
 	style: PropTypes.object,
 };
 
-export default Table;
+export default componentWrapper(React.memo(Table, U.areEqual));

package/src/components/table/table.scss

@@ -1,23 +1,26 @@
-@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;
+.lunatic-component {
+	.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,117 +1,11 @@
-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 React from 'react';
+import componentWrapper from '../component-wrapper';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
 import './textarea.scss';
 
-const Textarea = ({
-	id,
-	label,
-	preferences,
-	response,
-	placeholder,
-	handleChange,
-	rows,
-	maxLength,
-	readOnly,
-	labelPosition,
-	required,
-	focused,
-	declarations,
-	tooltip,
-	style,
-}) => {
-	const inputRef = useRef();
+const Textarea = (props) => (
+	<InputDeclarationsWrapper type={null} roleType="textarea" {...props} />
+);
 
-	useEffect(() => {
-		if (focused) inputRef.current.focus();
-	}, [focused]);
-
-	return (
-		<div className={U.getLabelPositionClass(labelPosition)}>
-			<Declarations
-				id={id}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			{label && (
-				<label
-					htmlFor={`textarea-${id}`}
-					id={`textarea-label-${id}`}
-					className={`${required ? 'required' : ''}`}
-				>
-					{label}
-				</label>
-			)}
-			<Declarations
-				id={id}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-			/>
-			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
-					<textarea
-						id={`textarea-${id}`}
-						ref={inputRef}
-						placeholder={placeholder}
-						value={U.getResponseByPreference(preferences)(response)}
-						className="textarea-lunatic"
-						style={U.buildStyleObject(style)}
-						rows={rows}
-						maxLength={maxLength}
-						readOnly={readOnly}
-						required={required}
-						aria-required={required}
-						onChange={e =>
-							handleChange({
-								[U.getResponseName(response)]: e.target.value,
-							})
-						}
-					/>
-				</div>
-				{tooltip && (
-					<div className="tooltip">
-						<TooltipResponse id={id} response={response} />
-					</div>
-				)}
-			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
-		</div>
-	);
-};
-
-Textarea.defaultProps = {
-	preferences: ['COLLECTED'],
-	response: {},
-	placeholder: '',
-	rows: 5,
-	readOnly: false,
-	labelPosition: 'DEFAULT',
-	required: false,
-	focused: false,
-	declarations: [],
-	tooltip: false,
-	style: {},
-};
-
-Textarea.propTypes = {
-	id: PropTypes.string,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	response: U.responsePropTypes,
-	placeholder: PropTypes.string,
-	handleChange: PropTypes.func.isRequired,
-	rows: PropTypes.number.isRequired,
-	maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-	readOnly: PropTypes.bool,
-	labelPosition: PropTypes.oneOf(['DEFAULT', 'TOP', 'BOTTOM', 'LEFT', 'RIGHT']),
-	required: PropTypes.bool,
-	focused: PropTypes.bool,
-	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default Textarea;
+export default componentWrapper(React.memo(Textarea, areEqual));

package/src/components/textarea/index.js

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

package/src/components/textarea/textarea.scss

@@ -1,16 +1,8 @@
-@import 'src/components/index.scss';
+// see input.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;
+.lunatic-component {
+	.textarea-lunatic {
+		height: 3em;
+		width: 100%;
 	}
 }

package/src/components/tooltip/img/index.js

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

package/src/components/tooltip/index.js

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

package/src/components/tooltip/response.js

@@ -1,42 +1,52 @@
-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;
+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,35 +1,30 @@
+// Import index once for bundle
 @import 'src/components/index.scss';
 
-/* Tooltip container */
-.tooltip-lunatic {
-	position: relative;
-	display: inline-block;
-	align-items: center;
-}
-
-/* Tooltip text */
-.tooltip-lunatic .tooltip-text {
-	visibility: hidden;
-	width: 20em;
-	background-color: $main_color;
-	color: #fff;
-	padding: 5px 0;
-	border-radius: 6px;
-	text-align: left;
-
-	/* Position the tooltip text */
-	position: absolute;
-	z-index: 1;
-	bottom: 120%;
-	left: -10em;
-
-	/* Fade in tooltip */
-	opacity: 0;
-	transition: opacity 0.3s;
-}
+.lunatic-component {
+	/* Tooltip container */
+	.tooltip-lunatic {
+		position: relative;
+		display: inline-block;
+		align-items: center;
+	}
 
-/* Show the tooltip text when you mouse over the tooltip container */
-.tooltip-lunatic:hover .tooltip-text {
-	visibility: visible;
-	opacity: 1;
+	/* 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

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

package/src/{utils/constants.js → constants/declarations.js}

@@ -1,14 +1,14 @@
-// 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';
+// 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/event-types.js

@@ -0,0 +1,13 @@
+// Event types for paradata
+export const EVENT_FOCUS_IN = 'focus-in';
+export const EVENT_FOCUS_OUT = 'focus-out';
+export const EVENT_SELECTION = 'selection';
+export const EVENT_CLICK = 'click';
+export const EVENT_VALUE_CHANGE = 'value-changed';
+
+// Category of object
+export const INPUT_CATEGORY = 'lunatic-input';
+export const BUTTON_CATEGORY = 'lunatic-button';
+export const LINK_CATEGORY = 'lunatic-link';
+export const TOOLTIP_CATEGORY = 'lunatic-tooltip';
+export const CALCULATED_VAR_CATEGORY = 'lunatic-calculated-var';

package/src/constants/index.js

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

package/src/constants/supported-preferences.js

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,4 @@
+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 +1,14 @@
-# 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`.
+# 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`.