@inseefr/lunatic 0.3.1-experimental → 0.3.2-v2

package/src/components/table/table.js

@@ -1,171 +0,0 @@
-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 '../../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 componentWrapper(React.memo(Table, U.areEqual));

package/src/components/textarea/component.js

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

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/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,21 +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', () => (
-	<div className="lunatic-component">
-		<Breadcrumb id="default" elements={elements} />
-	</div>
-));

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`.

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

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

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

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

@@ -1,29 +0,0 @@
-# CheckboxGroup 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 |
-|  responses \*   | object |                    []                    |          | Responses concerned by the component    |
-|  handleChange   |  func  |                    -                     |    ✓     | Handler of the checkbox                 |
-|    disabled     |  bool  |                  false                   |          | Is the checkbox responses disabled      |
-|     focused     |  bool  |                  false                   |          | Is the checkbox responses focused       |
-| positioning \*  | string |                "DEFAULT"                 |          | CheckboxGroup responses positioning     |
-| declarations \* | array  |                    []                    |          | Declarations of the checkbox            |
-|    features     | array  |                   [ ]                    |          | Component features for labels           |
-|    bindings     | object |                   [ ]                    |          | Questionnaire bindings                  |
-|   management    |  bool  |                  false                   |          | Management mode of the input            |
-|    style \*     | object | { fieldsetStyle: {}, modalityStyle: {} } |          | Style of the checkbox                   |
-
-- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
-- `responses` props has to be an array of shape of `{id: string, label: string, response: {name: string, values: object}}`
-- `positioning` props has to be one of `DEFAULT`, `HORIZONTAL` or `VERTICAL`
-- `declarations` are documented in the `Declarations` component
-- `style` props has to be composed of `fieldsetStyle` and `modalityStyle`
-
-## Styles
-
-**CheckboxGroup** component has for classes `checkbox-group-list`, `checkbox-modality` and `checkbox-lunatic`.

package/src/stories/checkbox-group/checkbox-group.stories.js

@@ -1,60 +0,0 @@
-import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import Orchestrator from '../utils/orchestrator';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import data from './data';
-import dataVTL from './data-vtl';
-import dataForced from './data-forced';
-import { positioningOptions, featuresOptions } from '../utils/options';
-import { text, boolean, object, select } from '@storybook/addon-knobs/react';
-
-const stories = storiesOf('CheckboxGroup', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator((Component) => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<CheckboxGroup />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Orchestrator id="default" source={data} />
-));
-
-stories.addWithJSX('Props', () => (
-	<Orchestrator
-		id="props"
-		source={dataVTL}
-		label={text('Label', '"I\'m the label of the checkbox group"')}
-		missing={boolean('Missing', false)}
-		shortcut={boolean('Shortcut', false)}
-		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
-		features={select('Features', featuresOptions, ['VTL', 'MD'])}
-		bindings={object('Bindings', { NAME: 'Mojo' })}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		management={boolean('Management', false)}
-	/>
-));
-
-stories.addWithJSX('External update', () => {
-	const Fake = () => {
-		const [up, setUp] = useState(false);
-		return (
-			<>
-				<button
-					type="button"
-					onClick={() => {
-						setUp(true);
-					}}
-					disabled={up}
-				>
-					Force external update
-				</button>
-
-				<Orchestrator id="default" source={up ? dataForced : dataVTL} />
-			</>
-		);
-	};
-	return <Fake />;
-});

package/src/stories/checkbox-group/data-forced.json

@@ -1,89 +0,0 @@
-{
-	"components": [
-		{
-			"id": "gg",
-			"componentType": "CheckboxGroup",
-			"label": "➡ 1. What are the pet names that the Simpsons family had?",
-			"responses": [
-				{
-					"id": "j334akov-QOP-jbgd8qmn",
-					"label": "Santa's Little Helper",
-					"response": {
-						"name": "PET1"
-					}
-				},
-				{
-					"id": "j334akov-QOP-jbgd60vl",
-					"label": "Snowball I",
-					"response": {
-						"name": "PET2"
-					}
-				},
-				{
-					"id": "j334akov-QOP-jbgda2jo",
-					"label": "Coltrane",
-					"response": {
-						"name": "PET3"
-					}
-				},
-				{
-					"id": "j334akov-QOP-jbgdfssy",
-					"label": "NAME || \" the Helper Monkey\"",
-					"response": {
-						"name": "PET4"
-					}
-				}
-			]
-		}
-	],
-	"variables": [
-		{
-			"variableType": "COLLECTED",
-			"name": "PET1",
-			"componentRef": "gg",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": false,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "PET2",
-			"componentRef": "gg",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": true,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "PET3",
-			"componentRef": "gg",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": true,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "PET4",
-			"componentRef": "gg",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		}
-	]
-}

package/src/stories/checkbox-group/data-vtl.json

@@ -1,102 +0,0 @@
-{
-	"components": [
-		{
-			"id": "gg",
-			"componentType": "CheckboxGroup",
-			"label": "➡ 1. What are the pet names that the Simpsons family had?",
-			"missingResponse": { "name": "PET_MISSING" },
-			"responses": [
-				{
-					"id": "j334akov-QOP-jbgd8qmn",
-					"label": "Santa's Little Helper",
-					"response": {
-						"name": "PET1"
-					}
-				},
-				{
-					"id": "j334akov-QOP-jbgd60vl",
-					"label": "Snowball I",
-					"response": {
-						"name": "PET2"
-					}
-				},
-				{
-					"id": "j334akov-QOP-jbgda2jo",
-					"label": "Coltrane",
-					"response": {
-						"name": "PET3"
-					}
-				},
-				{
-					"id": "j334akov-QOP-jbgdfssy",
-					"label": "NAME || \" the Helper Monkey\"",
-					"response": {
-						"name": "PET4"
-					}
-				}
-			]
-		}
-	],
-	"variables": [
-		{
-			"variableType": "COLLECTED",
-			"name": "PET1",
-			"componentRef": "gg",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": true,
-				"FORCED": false,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "PET2",
-			"componentRef": "gg",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": true,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "PET3",
-			"componentRef": "gg",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "PET4",
-			"componentRef": "gg",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "PET_MISSING",
-			"componentRef": "gg",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		}
-	]
-}