@inseefr/lunatic 0.2.60 → 0.3.0-experimental

package/src/stories/textarea/README.md

@@ -1,29 +1,33 @@
-# Textarea component
-
-## Props
-
-|      Props      |      Type      | Default value | Required | Description                             |
-| :-------------: | :------------: | :-----------: | :------: | --------------------------------------- |
-|       id        |     string     |       -       |    ✓     | Id of the textarea                      |
-|      label      |     string     |       -       |    ✓     | Label of the textarea                   |
-| preferences \*  |     array      | ["COLLECTED"] |          | Preferences to manage textarea response |
-|   response \*   |     object     |      {}       |          | Response concerned by the component     |
-|   placeholder   |     string     |      ""       |          | Placeholder of the textarea             |
-|  handleChange   |      func      |       -       |    ✓     | Handler of the textarea                 |
-|      rows       |     number     |       5       |          | Number of rows of the textarea          |
-|    maxLength    | number, string |   Unlimited   |          | Maximum length of the textarea          |
-|    readOnly     |      bool      |     false     |          | Is the textarea read only               |
-|  labelPosition  |     string     |   "DEFAULT"   |          | Position of the textarea label          |
-|    required     |      bool      |     false     |          | Is the textarea required                |
-|     focused     |      bool      |     false     |          | Is the textarea focused                 |
-| declarations \* |     array      |      [ ]      |          | Declarations of the textarea            |
-|     tooltip     |      bool      |     false     |          | Tooltip of the textarea                 |
-|      style      |     object     |      {}       |          | Style of the textarea                   |
-
-- `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
-
-**Textarea** component has for classes `textarea-lunatic`.
+# Textarea component
+
+## Props
+
+|      Props       |      Type      | Default value | Required | Description                             |
+| :--------------: | :------------: | :-----------: | :------: | --------------------------------------- |
+|        id        |     string     |       -       |    ✓     | Id of the textarea                      |
+|      label       |     string     |       -       |    ✓     | Label of the textarea                   |
+|  preferences \*  |     array      | ["COLLECTED"] |          | Preferences to manage textarea response |
+|   response \*    |     object     |      {}       |          | Response concerned by the component     |
+|   placeholder    |     string     |      ""       |          | Placeholder of the textarea             |
+|   handleChange   |      func      |       -       |    ✓     | Handler of the textarea                 |
+|       rows       |     number     |       5       |          | Number of rows of the textarea          |
+|    maxLength     | number, string |    524288     |          | Maximum length of the textarea          |
+|     readOnly     |      bool      |     false     |          | Is the textarea read only               |
+|     disabled     |      bool      |     false     |          | Is the textarea disabled                |
+| labelPosition \* |     string     |   "DEFAULT"   |          | Position of the textarea label          |
+|    mandatory     |      bool      |     false     |          | Is the textarea mandatory               |
+|     focused      |      bool      |     false     |          | Is the textarea focused                 |
+| declarations \*  |     array      |      [ ]      |          | Declarations of the textarea            |
+|     features     |     array      |      [ ]      |          | Component features for labels           |
+|     bindings     |     object     |      [ ]      |          | Questionnaire bindings                  |
+|    management    |      bool      |     false     |          | Management mode of the textarea         |
+|      style       |     object     |      {}       |          | Style of the textarea                   |
+
+- `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}`
+- `labelPosition` props has to be one of `DEFAULT`, `TOP`, `BOTTOM`, `RIGHT` or `LEFT`
+- `declarations` are documented in the `Declarations` component
+
+## Styles
+
+**Textarea** component has for classes `textarea-lunatic`.

package/src/stories/textarea/data-forced.json

@@ -0,0 +1,28 @@
+{
+	"components": [
+		{
+			"id": "ta",
+			"componentType": "Textarea",
+			"mandatory": false,
+			"maxLength": "500",
+			"label": "➡ 1. Before starting, do you have any comments about the Simpsons family?",
+			"response": {
+				"name": "COMMENT"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "COMMENT",
+			"componentRef": "ta",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "Forced value",
+				"FORCED": "Hello",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/textarea/data.json

@@ -0,0 +1,43 @@
+{
+	"components": [
+		{
+			"id": "ta",
+			"componentType": "Textarea",
+			"mandatory": false,
+			"maxLength": "500",
+			"label": "➡ 1. Before starting, do you have any comments about the Simpsons family?",
+			"response": {
+				"name": "COMMENT"
+			},
+			"missingResponse": {
+				"name": "COMMENT_MISSING"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "COMMENT",
+			"componentRef": "ta",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "Simpsons family is the most famous family in the world for sure. Funny, crazy and full of societal references.",
+				"FORCED": "Hello",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "COMMENT_MISSING",
+			"componentRef": "ta",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/textarea/textarea.stories.js

@@ -1,85 +1,68 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Textarea } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import {
-	text,
-	boolean,
-	number,
-	color,
-	object,
-	select,
-} from '@storybook/addon-knobs/react';
-
-const labelPositionOptions = {
-	DEFAULT: 'Default',
-	TOP: 'Top',
-	RIGHT: 'Right',
-	BOTTOM: 'Bottom',
-	LEFT: 'Left',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'INPUT',
-		valueState: [
-			{ valueType: 'COLLECTED', value: 'My collected textarea' },
-			{ valueType: 'FORCED', value: 'My forced textarea' },
-			{ valueType: 'EDITED', value: 'My edited textarea' },
-		],
-	},
-};
-
-const stories = storiesOf('Textarea', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Textarea />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Textarea id="default" label="Label" {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<Textarea
-		id="props"
-		label={text('Label', "I'm the label of the textarea")}
-		placeholder={text('Placeholder', 'Placeholder')}
-		rows={number('Rows', 5)}
-		maxLength={number('Max length', 50)}
-		readOnly={boolean('Read only', false)}
-		required={boolean('Required', false)}
-		preferences={['COLLECTED', 'FORCED', 'EDITED']}
-		tooltip={boolean('Tooltip', false)}
-		focused={boolean('Focused', false)}
-		labelPosition={select('Label position', labelPositionOptions)}
-		{...defaultProps}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<Textarea
-		id="styled"
-		label={text('Label', "I'm the label of the textarea")}
-		handleChange={console.log}
-		style={object('Generated style', {
-			'border-color': color('Border color', '#e80a4d'),
-			'border-width': number('Border-width', 5, {
-				range: true,
-				min: 2,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 10, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-	/>
-));
+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 { labelPositionOptions, featuresOptions } from '../utils/options';
+import {
+	text,
+	boolean,
+	number,
+	object,
+	select,
+} from '@storybook/addon-knobs/react';
+
+const stories = storiesOf('Textarea', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Textarea />" />;
+	});
+
+stories.addWithJSX('Default', () => (
+	<Orchestrator id="default" source={data} />
+));
+
+stories.addWithJSX('Props', () => (
+	<Orchestrator
+		id="props"
+		source={data}
+		label={text('Label', '"Hello " || NAME')}
+		missing={boolean('Missing', false)}
+		placeholder={text('Placeholder', 'Placeholder')}
+		rows={number('Rows', 5)}
+		maxLength={number('Max length', 500)}
+		readOnly={boolean('Read only', false)}
+		mandatory={boolean('Mandatory', false)}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		bindings={object('Bindings', { NAME: 'Mauro' })}
+		management={boolean('Management', false)}
+		focused={boolean('Focused', false)}
+		labelPosition={select('Label position', labelPositionOptions, 'DEFAULT')}
+	/>
+));
+
+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 />;
+});

package/src/stories/tooltip-response/README.md

@@ -1,14 +1,14 @@
-# TooltipResponse component
-
-## Props
-
-|    Props    |  Type  | Default value | Required | Description             |
-| :---------: | :----: | :-----------: | :------: | ----------------------- |
-|     id      | string |       -       |    ✓     | Id of the tooltip       |
-| response \* | string |      " "      |          | Response of the tooltip |
-
-- `response` props has to be a shape of `{name: string, valueState: object}`
-
-## Styles
-
-**TooltipResponse** component has for classes `tooltip-lunatic`.
+# TooltipResponse component
+
+## Props
+
+|    Props    |  Type  | Default value | Required | Description             |
+| :---------: | :----: | :-----------: | :------: | ----------------------- |
+|     id      | string |       -       |    ✓     | Id of the               |
+| response \* | string |      " "      |          | Response of the tooltip |
+
+- `response` props has to be a shape of `{name: string, values: object}`
+
+## Styles
+
+**TooltipResponse** component has for classes `tooltip-lunatic`.

package/src/stories/tooltip-response/md-link.json

@@ -0,0 +1,31 @@
+{
+	"components": [
+		{
+			"id": "uu",
+			"componentType": "Radio",
+			"mandatory": false,
+			"label": "NAME || \", êtes-vous au [chômage](https://www.insee.fr/fr/metadonnees/definition/c1303) ?\"",
+			"response": {
+				"name": "UNEMPLOYMENT"
+			},
+			"options": [
+				{ "value": "0", "label": "Non" },
+				{ "value": "1", "label": "Yes" }
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "UNEMPLOYMENT",
+			"componentRef": "uu",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": "1",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/tooltip-response/md-tooltip.json

@@ -0,0 +1,31 @@
+{
+	"components": [
+		{
+			"id": "uu",
+			"componentType": "Radio",
+			"mandatory": false,
+			"label": "NAME || \", êtes-vous au [chômage](. 'Le chômage représente l\u2019ensemble des personnes de 15 ans et plus, privées d\u2019emploi et en recherchant un. Sa mesure est complexe. Les frontières entre emploi, chômage et inactivité ne sont pas toujours faciles à établir, ce qui amène souvent à parler d\u2019un « halo » autour du chômage. Il y a en France deux sources statistiques principales sur le chômage : les statistiques mensuelles du Ministère du travail, élaborées à partir des fichiers de demandeurs d\u2019emploi enregistrés par Pôle Emploi et l\u2019enquête Emploi de l\u2019Insee, qui mesure le chômage au sens du BIT.') ?\"",
+			"response": {
+				"name": "UNEMPLOYMENT"
+			},
+			"options": [
+				{ "value": "0", "label": "Non" },
+				{ "value": "1", "label": "Yes" }
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "UNEMPLOYMENT",
+			"componentRef": "uu",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": "1",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/tooltip-response/tooltip.stories.js

@@ -1,43 +1,83 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { TooltipResponse } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-
-const stories = storiesOf('TooltipResponse', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<TooltipResponse />" />;
-	});
-
-stories.addWithJSX('Default', () => <TooltipResponse id="default" />);
-
-stories.addWithJSX('Forced', () => (
-	<TooltipResponse
-		id="response"
-		response={{
-			name: 'response',
-			valueState: [
-				{ valueType: 'COLLECTED', value: 'Collected' },
-				{ valueType: 'FORCED', value: 'Forced' },
-				{ valueType: 'EDITED', value: '' },
-			],
-		}}
-	/>
-));
-
-stories.addWithJSX('Edited', () => (
-	<TooltipResponse
-		id="response"
-		response={{
-			name: 'response',
-			valueState: [
-				{ valueType: 'COLLECTED', value: 'Collected' },
-				{ valueType: 'FORCED', value: 'Forced' },
-				{ valueType: 'EDITED', value: 'Edited' },
-			],
-		}}
-	/>
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withReadme } from 'storybook-readme';
+import { TooltipResponse } from 'components';
+import Orchestrator from '../utils/orchestrator';
+import readme from './README.md';
+import { titleDecorator } from 'utils/lib';
+import mdLink from './md-link';
+import mdTooltip from './md-tooltip.json';
+import { positioningOptions, featuresOptions } from '../utils/options';
+import { boolean, object, select } from '@storybook/addon-knobs/react';
+
+const stories = storiesOf('Tooltip/Management', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Tooltip />" />;
+	});
+
+stories.addWithJSX('Forced', () => (
+	<div style={{ marginLeft: '50%' }}>
+		<TooltipResponse
+			id="response"
+			response={{
+				name: 'response',
+				values: {
+					COLLECTED: 'Collected',
+					FORCED: 'Forced',
+					EDITED: null,
+				},
+			}}
+		/>
+	</div>
+));
+
+stories.addWithJSX('Edited', () => (
+	<div style={{ marginLeft: '50%' }}>
+		<TooltipResponse
+			id="response"
+			response={{
+				name: 'response',
+				values: {
+					COLLECTED: 'Collected',
+					FORCED: 'Forced',
+					EDITED: 'Edited',
+				},
+			}}
+		/>
+	</div>
+));
+
+const storiesMD = storiesOf('Tooltip/Markdown', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="MD" />;
+	});
+
+storiesMD.addWithJSX('Link', () => (
+	<Orchestrator
+		id="link"
+		source={mdLink}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		bindings={object('Bindings', { NAME: 'Mauro' })}
+		disabled={boolean('Disabled', false)}
+		focused={boolean('Focused', false)}
+		management={boolean('Management', false)}
+	/>
+));
+
+storiesMD.addWithJSX('Tooltip', () => (
+	<Orchestrator
+		id="link"
+		source={mdTooltip}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		bindings={object('Bindings', { NAME: 'Mauro' })}
+		disabled={boolean('Disabled', false)}
+		focused={boolean('Focused', false)}
+		management={boolean('Management', false)}
+	/>
+));

package/src/stories/utils/custom-lunatic.scss

@@ -0,0 +1,23 @@
+* {
+	box-sizing: border-box;
+	--color-primary-dark: #2a5885;
+	--color-primary-light: #5181b8;
+	--color-primary-main: #4a73a4;
+	--color-primary-contrast-text: #ffffff;
+
+	--color-secondary-dark: #14202d;
+	--color-secondary-light: #f7f8fa;
+	--color-secondary-main: #1a293b;
+	--color-secondary-contrast-text: #ffffff;
+
+	--color-very-light: #dbe4ef;
+	--color-very-very-light: #e6eaee;
+	--color-current-item: #0d823e;
+
+	--color-error: #f50c0c;
+	--color-disabled: rgb(235, 235, 228);
+}
+
+.pagination {
+	margin-top: 2em;
+}

package/src/stories/utils/img/check_box.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>

package/src/stories/utils/img/check_box_outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/src/stories/utils/img/menu-down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="rgba(0, 0, 0, 0.54)"><path d="M7,10L12,15L17,10H7Z" /></svg>

package/src/stories/utils/img/menu-up.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7,15L12,10L17,15H7Z" /></svg>

package/src/stories/utils/img/radio_button_checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/src/stories/utils/img/radio_button_unchecked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/src/stories/utils/options.js

@@ -0,0 +1,25 @@
+export const positioningOptions = {
+	Default: 'DEFAULT',
+	Horizontal: 'HORIZONTAL',
+	Vertical: 'VERTICAL',
+};
+
+export const labelPositionOptions = {
+	Default: 'DEFAULT',
+	Top: 'TOP',
+	Right: 'RIGHT',
+	Bottom: 'BOTTOM',
+	Left: 'LEFT',
+};
+
+export const unitPositionOptions = {
+	Default: 'DEFAULT',
+	Before: 'BEFORE',
+	After: 'AFTER',
+};
+
+export const featuresOptions = {
+	None: [],
+	Vtl: ['VTL'],
+	'Vtl Md': ['VTL', 'MD'],
+};