@inseefr/lunatic 0.2.63 → 0.3.0-prisme

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 '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;
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.tooltip-lunatic:hover .tooltip-text {
-	visibility: visible;
-	opacity: 1;
-}
+// Import index once for bundle
+@import 'src/components/index.scss';
+
+.lunatic-component {
+	/* 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/{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`.

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

@@ -1,35 +1,21 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Breadcrumb } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import { number, color, object } from '@storybook/addon-knobs/react';
-
-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('Props', () => <Breadcrumb elements={elements} />);
-
-stories.addWithJSX('Styled', () => (
-	<Breadcrumb
-		id="styled"
-		elements={elements}
-		style={object('Generated style', {
-			'background-color': color('Background color', '#e80a4d'),
-			color: color('Color', 'white'),
-			'border-radius': number('Border-radius', 0, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-	/>
-));
+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 +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`.
+# 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,63 +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,
-	number,
-	color,
-	object,
-} 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)}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<Button
-		label="styled-button"
-		value="Click me !"
-		onClick={console.log}
-		style={object('Generated style', {
-			'border-width': number('Border-width', 5, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 10, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-			color: color('Color', 'white'),
-			'background-color': color('Background color', '#e80a4d'),
-			'border-color': color('Border color', '#e80a4d'),
-			':hover': {
-				color: color('Hover : color', '#e80a4d'),
-				'background-color': color('Hover : background color', 'white'),
-				'border-color': color('Hover : border color', '#e80a4d'),
-			},
-		})}
-	/>
-));
+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,25 +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            |
-|     tooltip     |  bool  |     false     |          | Tooltip 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, valueState: object}`
-- `declarations` are documented in the `Declarations` component
-
-## Styles
-
-**CheckboxBoolean** component has for classes `checkbox-lunatic`, `checkbox-lunatic-no-margin` and `checkbox-modality`.
+# 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-boolean/checkbox-boolean.stories.js

@@ -1,49 +1,54 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { CheckboxBoolean } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import { text, boolean, select } from '@storybook/addon-knobs/react';
-
-const positioningOptions = {
-	DEFAULT: 'Default',
-	HORIZONTAL: 'Horizontal',
-	VERTICAL: 'Vertical',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'CHECKBOX_BOOLEAN',
-		valueState: [
-			{ valueType: 'COLLECTED', value: false },
-			{ valueType: 'FORCED', value: true },
-			{ valueType: 'EDITED', value: null },
-		],
-	},
-};
-
-const stories = storiesOf('CheckboxBoolean', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<CheckboxBoolean />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<CheckboxBoolean id="default" {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<CheckboxBoolean
-		id="props"
-		label={text('Label', "I'm the label of the boolean checkbox")}
-		positioning={select('Items positioning', positioningOptions)}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		preferences={['COLLECTED', 'FORCED', 'EDITED']}
-		tooltip={boolean('Tooltip', false)}
-		{...defaultProps}
-	/>
-));
+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 dataForced from './data-forced';
+import { boolean, select, object } from '@storybook/addon-knobs/react';
+import { positioningOptions, featuresOptions } from '../utils/options';
+
+const stories = storiesOf('CheckboxBoolean', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<CheckboxBoolean />" />;
+	});
+
+stories.addWithJSX('Default', () => <Orchestrator source={data} />);
+
+stories.addWithJSX('Props', () => (
+	<Orchestrator
+		source={data}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		missing={boolean('Missing', false)}
+		bindings={object('Bindings', { test: 'test' })}
+		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 : data} />
+			</>
+		);
+	};
+	return <Fake />;
+});