@inseefr/lunatic 0.1.6 → 0.1.8-experimental

package/src/components/suggester-loader-widget/widget.scss

@@ -0,0 +1,176 @@
+$colorA: #e9d0d0;
+$colorB: darkred;
+$colorC: #320000;
+$colorD: goldenrod;
+
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+@mixin onDrag() {
+	&.drag {
+		box-shadow: $colorD 0px 3px 8px;
+		transition: box-shadow 0.5s;
+	}
+}
+
+.lunatic-suggester-widget-container {
+	&.absolute {
+		position: fixed;
+		z-index: 1;
+	}
+	.lunatic-suggester-widget {
+		position: relative;
+		border: solid $colorB 2px;
+		background-color: $colorA;
+		padding: 4px 4px;
+		border: 2px 2px;
+		width: 400px;
+		box-shadow: $colorC 0px 3px 8px;
+
+		@include onDrag();
+
+		.widget-row {
+			height: 22px;
+			display: flex;
+			flex-direction: row;
+			margin-bottom: 1px;
+			.store-name {
+				width: 60%;
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+			}
+			.stats {
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+				width: 40%;
+			}
+			.widget-button {
+				margin: 0 1px 0 0;
+				padding: 0;
+				border: none;
+				width: 18px;
+				height: 18px;
+				background-color: $colorB;
+
+				&.disabled {
+					background-color: gray;
+					cursor: default;
+				}
+
+				&:hover {
+					background-color: $colorC;
+					transition: background-color 1s;
+					cursor: pointer;
+				}
+
+				.lunatic-suggester-icon {
+					svg {
+						width: 18px;
+						height: 18px;
+						fill: $colorA;
+					}
+				}
+			}
+
+			.lunatic-suggester-loader-progress {
+				height: inherit;
+				border: solid 1px $colorB;
+				border-radius: 2px;
+				width: 70%;
+
+				&.done {
+					&:hover {
+						border-color: $colorC;
+						transition: border-color 1s;
+						.progress {
+							background-color: $colorC;
+							transition: background-color 1s;
+						}
+
+						cursor: pointer;
+					}
+				}
+
+				.content {
+					padding: 2px 2px;
+					height: calc(100%);
+					width: 100%;
+					.progress {
+						background-color: $colorB;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		.suggester-widget-network {
+			position: absolute;
+			border: solid $colorB 2px;
+			left: 6px;
+			background-color: $colorA;
+			border-radius: 50%;
+			padding: 2px 2px;
+			left: -22px;
+			top: -22px;
+			box-shadow: $colorC 0px 3px 8px;
+
+			&.online {
+				svg {
+					fill: forestgreen;
+				}
+			}
+
+			svg {
+				width: 24px;
+				height: 24px;
+				fill: $colorB;
+			}
+
+			@include onDrag();
+		}
+
+		.lunatic-widget-tools {
+			position: absolute;
+			right: 0;
+			top: -18px;
+			margin-top: -4px;
+
+			.lunatic-action-tool {
+				display: inline-block;
+				height: 18px;
+				width: 18px;
+				background-color: $colorB;
+				border-radius: 50%;
+				margin-left: 2px;
+
+				&:hover {
+					box-shadow: $colorC 0px 3px 8px;
+				}
+
+				&.drag {
+					background-color: $colorD;
+					transition: background-color 0.5s;
+				}
+
+				.on-drag-icon {
+					cursor: grab;
+					&.drag {
+						cursor: grabbing;
+					}
+					svg {
+						width: 16px;
+						height: 16px;
+						fill: $colorA;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/table/index.js

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

package/src/components/table/table.js

@@ -0,0 +1,171 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import missingWrapper from '../missing-wrapper';
+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,
+	logFunction,
+}) => {
+	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, 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>
+					{(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
+													logFunction={logFunction}
+													shortcut={false}
+												/>
+											</td>
+										);
+									}
+									const cellOptions = {
+										key: `table-${tableId}-line${i}-cell-${j}`,
+										style: { width },
+										colSpan: colspan || 1,
+										rowSpan: rowspan || 1,
+									};
+									const interpretedLabel = interpret(
+										features,
+										logFunction
+									)(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)}
+					id={tableId}
+					logFunction={logFunction}
+				/>
+			)}
+			<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(missingWrapper(Table), U.areEqual);

package/src/components/table/table.scss

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import missingWrapper from '../missing-wrapper';
+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(missingWrapper(Textarea), areEqual);

package/src/components/textarea/index.js

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

package/src/components/textarea/textarea.scss

@@ -0,0 +1,6 @@
+// see input.scss
+
+.textarea-lunatic {
+	height: 3em;
+	width: 100%;
+}

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

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

package/src/components/tooltip/index.js

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

package/src/components/tooltip/response.js

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

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

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

package/src/constants/declarations.js

@@ -0,0 +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';

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

@@ -0,0 +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`.

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

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

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

package/src/stories/button/button.stories.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withReadme } from 'storybook-readme';
+import { Button } from 'components';
+import readme from './README.md';
+import { titleDecorator } from 'utils/lib';
+import { text, boolean } from '@storybook/addon-knobs/react';
+
+const stories = storiesOf('Button', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Button />" />;
+	});
+
+stories.addWithJSX('Default', () => (
+	<Button label="button-default" value="Click me !" onClick={console.log} />
+));
+
+stories.addWithJSX('Props', () => (
+	<Button
+		label="disabled-button"
+		value={text('Value', 'Click me !')}
+		onClick={console.log}
+		disabled={boolean('Disabled', false)}
+	/>
+));

package/src/stories/checkbox-boolean/README.md

@@ -0,0 +1,27 @@
+# CheckboxBoolean component
+
+## Props
+
+|      Props      |  Type  | Default value | Required | Description                             |
+| :-------------: | :----: | :-----------: | :------: | --------------------------------------- |
+|       id        | string |       -       |    ✓     | Id of the checkbox                      |
+|      label      | string |      ""       |          | Fieldset label of the checkbox          |
+| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage checkbox response |
+|   response \*   | object |      { }      |          | Response concerned by the component     |
+|  handleChange   |  func  |       -       |    ✓     | Handler of the checkbox                 |
+|    disabled     |  bool  |     false     |          | Is the checkbox item disabled           |
+| positioning \*  | string |   "DEFAULT"   |          | Checkbox item positioning               |
+|     focused     |  bool  |     false     |          | Is the checkbox item focused            |
+| declarations \* | array  |      [ ]      |          | Declarations of the checkbox            |
+|    features     | array  |      [ ]      |          | Component features for labels           |
+|    bindings     | object |      [ ]      |          | Questionnaire bindings                  |
+|   management    |  bool  |     false     |          | Management mode of the checkbox         |
+|      style      | object |      { }      |          | Style of the checkbox                   |
+
+- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
+- `response` props has to be a shape of `{name: string, values: object}`
+- `declarations` are documented in the `Declarations` component
+
+## Styles
+
+**CheckboxBoolean** component has for classes `checkbox-lunatic` and `checkbox-boolean-modality`.