@inseefr/lunatic 0.2.61 → 0.3.1-experimental

package/src/stories/dropdown/data-props.json

@@ -0,0 +1,111 @@
+{
+	"components": [
+		{
+			"id": "j4nw5cqz",
+			"componentType": "Dropdown",
+			"mandatory": false,
+			"label": "\"In which state do The \" || NAME || \" reside?\"",
+			"response": {
+				"name": "STATE"
+			},
+			"missingResponse": {
+				"name": "STATE_MISSING"
+			},
+			"options": [
+				{
+					"value": "1",
+					"label": "Washington Washington Washington Washington Washington Washington"
+				},
+				{ "value": "2", "label": "Kentucky" },
+				{ "value": "3", "label": "Ohio" },
+				{ "value": "4", "label": "Maine" },
+				{ "value": "5", "label": "North Dakota" },
+				{ "value": "6", "label": "Florida" },
+				{ "value": "7", "label": "North Takoma" },
+				{ "value": "8", "label": "California" },
+				{ "value": "9", "label": "TEXAS" },
+				{ "value": "10", "label": "Massachusetts" },
+				{ "value": "11", "label": "Nevada" },
+				{ "value": "12", "label": "Illinois" },
+				{ "value": "13", "label": "Not in any state, you fool!" }
+			]
+		},
+		{
+			"id": "j4nw5cqz-bis",
+			"componentType": "Dropdown",
+			"mandatory": false,
+			"label": "\"In which state do The \" || NAME || \" reside?\"",
+			"response": {
+				"name": "STATE2"
+			},
+			"missingResponse": {
+				"name": "STATE2_MISSING"
+			},
+			"options": [
+				{ "value": "1", "label": "Washington" },
+				{ "value": "2", "label": "Kentucky" },
+				{ "value": "3", "label": "Ohio" },
+				{ "value": "4", "label": "Maine" },
+				{ "value": "5", "label": "North Dakota" },
+				{ "value": "6", "label": "Florida" },
+				{ "value": "7", "label": "North Takoma" },
+				{ "value": "8", "label": "California" },
+				{ "value": "9", "label": "TEXAS" },
+				{ "value": "10", "label": "Massachusetts" },
+				{ "value": "11", "label": "Nevada" },
+				{ "value": "12", "label": "Illinois" },
+				{ "value": "13", "label": "Not in any state, you fool!" }
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE",
+			"componentRef": "j4nw5cqz",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "2",
+				"FORCED": "3",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE_MISSING",
+			"componentRef": "j4nw5cqz",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE2",
+			"componentRef": "j4nw5cqz-bis",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "3",
+				"FORCED": "2",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE2_MISSING",
+			"componentRef": "j4nw5cqz-bis",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/dropdown/data.json

@@ -0,0 +1,98 @@
+{
+	"components": [
+		{
+			"id": "j4nw5cqz",
+			"componentType": "Dropdown",
+			"mandatory": false,
+			"label": "In which state do The Simpsons reside?",
+			"response": {
+				"name": "STATE"
+			},
+			"declarations": [
+				{
+					"id": "d1",
+					"declarationType": "COMMENT",
+					"position": "BEFORE_QUESTION_TEXT",
+					"label": "Test declaration before"
+				},
+				{
+					"id": "d2",
+					"declarationType": "COMMENT",
+					"position": "AFTER_QUESTION_TEXT",
+					"label": "Test declaration after"
+				},
+				{
+					"id": "d3",
+					"declarationType": "COMMENT",
+					"position": "DETACHABLE",
+					"label": "Test detachable declaration"
+				}
+			],
+			"options": [
+				{ "value": "1", "label": "Washington" },
+				{ "value": "2", "label": "Kentucky" },
+				{ "value": "3", "label": "Ohio" },
+				{ "value": "4", "label": "Maine" },
+				{ "value": "5", "label": "North Dakota" },
+				{ "value": "6", "label": "Florida" },
+				{ "value": "7", "label": "North Takoma" },
+				{ "value": "8", "label": "California" },
+				{ "value": "9", "label": "Texas" },
+				{ "value": "10", "label": "Massachusetts" },
+				{ "value": "11", "label": "Nevada" },
+				{ "value": "12", "label": "Illinois" },
+				{ "value": "13", "label": "Not in any state, you fool!" }
+			]
+		},
+		{
+			"id": "j4nw5cqz-bis",
+			"componentType": "Dropdown",
+			"mandatory": false,
+			"label": "In which state do The Simpsons reside?",
+			"response": {
+				"name": "STATE2"
+			},
+			"options": [
+				{ "value": "1", "label": "Washington" },
+				{ "value": "2", "label": "Kentucky" },
+				{ "value": "3", "label": "Ohio" },
+				{ "value": "4", "label": "Maine" },
+				{ "value": "5", "label": "North Dakota" },
+				{ "value": "6", "label": "Florida" },
+				{ "value": "7", "label": "North Takoma" },
+				{ "value": "8", "label": "California" },
+				{ "value": "9", "label": "Texas" },
+				{ "value": "10", "label": "Massachusetts" },
+				{ "value": "11", "label": "Nevada" },
+				{ "value": "12", "label": "Illinois" },
+				{ "value": "13", "label": "Not in any state, you fool!" }
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE",
+			"componentRef": "j4nw5cqz",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "2",
+				"FORCED": "3",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "STATE2",
+			"componentRef": "j4nw5cqz-bis",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "3",
+				"FORCED": "2",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/dropdown/dropdown.stories.js

@@ -1,70 +1,89 @@
 import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import { withReadme } from 'storybook-readme';
-import { Dropdown } from 'components';
+import Orchestrator from '../utils/orchestrator';
 import readme from './README.md';
 import { titleDecorator } from 'utils/lib';
+import data from './data';
+import dataProps from './data-props';
+import dataForced from './data-forced';
+import dataNAF from './data-naf';
+import { labelPositionOptions, featuresOptions } from '../utils/options';
 import {
 	text,
 	boolean,
-	number,
-	color,
-	object,
 	select,
+	object,
+	number,
 } from '@storybook/addon-knobs/react';
 
 const stories = storiesOf('Dropdown', module)
 	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
+	.addDecorator((Component) => {
 		const WrappedComponent = titleDecorator(Component);
 		return <WrappedComponent title="<Dropdown />" />;
 	});
 
-const options = [
-	{ value: 'belgium', label: 'Belgium' },
-	{ value: 'france', label: 'France' },
-	{ value: 'italy', label: 'Italy' },
-	{ value: 'netherland', label: 'Netherland' },
-	{ value: 'spain', label: 'Spain' },
-	{ value: 'sweden', label: 'Sweden' },
-];
-
-const labelPositionOptions = {
-	DEFAULT: 'Default',
-	TOP: 'Top',
-	RIGHT: 'Right',
-	BOTTOM: 'Bottom',
-	LEFT: 'Left',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'DROPDOWN',
-		valueState: [
-			{ valueType: 'COLLECTED', value: 'belgium' },
-			{ valueType: 'FORCED', value: 'italy' },
-		],
-	},
-	options,
-	labelPositionOptions,
-};
-
 stories.addWithJSX('Default', () => (
-	<Dropdown id="default" label="Default dropdown" {...defaultProps} />
+	<Orchestrator id="default" source={data} />
 ));
 
 stories.addWithJSX('Props', () => (
-	<Dropdown
-		{...defaultProps}
+	<Orchestrator
+		id="props"
+		source={dataProps}
+		placeholderList={text('Placeholder', 'Placeholder')}
+		missing={boolean('Missing', false)}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		bindings={object('Bindings', { NAME: 'Simpsons', TEXAS: 'Texas' })}
+		disabled={boolean('Disabled', false)}
+		focused={boolean('Focused', false)}
+		writable={boolean('Writable', false)}
+		widthAuto={boolean('Options auto width', false)}
+		labelPosition={select('Label position', labelPositionOptions, 'DEFAULT')}
+		mandatory={boolean('Mandatory', false)}
+		management={boolean('Management', false)}
+		zIndex={number('zIndex', 0)}
+		freezeOptions={boolean('Freeze options', 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 : dataProps} />
+			</>
+		);
+	};
+	return <Fake />;
+});
+
+stories.addWithJSX('Naf', () => (
+	<Orchestrator
 		id="props"
-		label={text('Label', "I'm the label of the dropdown")}
-		options={options}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
+		source={dataNAF}
+		placeholderList={text('Placeholder', 'Placeholder')}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		bindings={object('Bindings', { NAME: 'Simpsons', TEXAS: 'Texas' })}
+		disabled={boolean('Disabled', false)}
+		focused={boolean('Focused', false)}
 		writable={boolean('Writable', false)}
-		labelPosition={select('Label position', labelPositionOptions)}
-		preferences={['COLLECTED', 'FORCED']}
-		tooltip={boolean('Tooltip', false)}
+		labelPosition={select('Label position', labelPositionOptions, 'DEFAULT')}
+		mandatory={boolean('Mandatory', false)}
+		management={boolean('Management', false)}
+		zIndex={number('zIndex', 0)}
+		freezeOptions={boolean('Freeze options', true)}
 	/>
 ));

package/src/stories/filter-description/README.md

@@ -0,0 +1,15 @@
+# FilterDescription component
+
+## Props
+
+|       Props       |  Type  | Default value | Required | Description                     |
+| :---------------: | :----: | :-----------: | :------: | ------------------------------- |
+|       label       | string |       -       |    ✓     | Label of the filter description |
+| filterDescription |  bool  |     false     |          | Is filter description displayed |
+|     features      | array  |      [ ]      |          | Component features for label    |
+|     bindings      | object |      [ ]      |          | Questionnaire bindings          |
+|       style       | object |      { }      |          | Style of the filter description |
+
+## Styles
+
+**Breadcrumb** component has for class `filter-description-lunatic`.

package/src/stories/filter-description/filter-description.stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Orchestrator from '../utils/orchestrator';
+import { withReadme } from 'storybook-readme';
+import readme from './README.md';
+import { titleDecorator } from 'utils/lib';
+import { featuresOptions } from '../utils/options';
+import { text, boolean, select, object } from '@storybook/addon-knobs/react';
+
+const stories = storiesOf('FilterDescription', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<FilterDescription />" />;
+	});
+
+const data = {
+	components: [
+		{
+			id: 'j6p6my1d',
+			componentType: 'FilterDescription',
+			filterDescription: true,
+			label: 'If you are not ready, please go to the end of the questionnaire',
+		},
+	],
+};
+
+stories.addWithJSX('Default', () => <Orchestrator source={data} />);
+
+const dataProps = {
+	components: [
+		{
+			id: 'j6p6my1d',
+			componentType: 'FilterDescription',
+			filterDescription: true,
+			label:
+				'"If you are not ready, please go to the end of the questionnaire: " || TITLE',
+		},
+	],
+};
+
+stories.addWithJSX('Props', () => (
+	<Orchestrator
+		source={dataProps}
+		label={text(
+			'Label',
+			'"If you are not ready, please go to the end of the questionnaire: " || TITLE'
+		)}
+		filterDescription={boolean('Filter description', true)}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		bindings={object('Bindings', { TITLE: 'Title' })}
+	/>
+));

package/src/stories/icons/icons.stories.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import CrossIcon from '../../utils/icons/cross.icon';
+import ClosedIcon from '../../utils/icons/closed.icon';
+import OpenedIcon from '../../utils/icons/opened.icon';
+import LoadIcon from '../../utils/icons/load.icon';
+import NetworkIcon from '../../utils/icons/network.icon';
+import OnDragIcon from '../../utils/icons/on-drag.icon';
+
+storiesOf('Icons', module)
+	.add('cross', () => <CrossIcon />)
+	.add('opened', () => <OpenedIcon />)
+	.add('closed', () => <ClosedIcon />)
+	.add('load', () => <LoadIcon />)
+	.add('network', () => <NetworkIcon />)
+	.add('on-drag', () => <OnDragIcon />);

package/src/stories/icons/lunatic-icon.scss

@@ -0,0 +1,10 @@
+.lunatic-icon {
+	display: inline-block;
+	width: 32px;
+	height: 32px;
+	// background-color: red;
+	&.mini {
+		width: 16px;
+		height: 16px;
+	}
+}

package/src/stories/input/README.md

@@ -1,28 +1,33 @@
-# Input component
-
-## Props
-
-|      Props      |  Type  | Default value | Required | Description                          |
-| :-------------: | :----: | :-----------: | :------: | ------------------------------------ |
-|       id        | string |       -       |    ✓     | Id of the input                      |
-|      label      | string |      ""       |          | Label of the input                   |
-| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage input response |
-|   response \*   | object |      {}       |          | Response concerned by the component  |
-|   placeholder   | string |      " "      |          | Placeholder of the input             |
-|  handleChange   |  func  |       -       |    ✓     | Handler of the input                 |
-|    readOnly     |  bool  |     false     |          | Is the input read only               |
-|  autoComplete   |  bool  |     false     |          | Is the input autocompletable         |
-|  labelPosition  | string |   "DEFAULT"   |          | Position of the input label          |
-|    required     |  bool  |     false     |          | Is the input required                |
-|     focused     |  bool  |     false     |          | Is the input focused                 |
-| declarations \* | array  |      []       |          | Declarations of the input            |
-|     tooltip     |  bool  |     false     |          | Tooltip of the input                 |
-|      style      | object |      {}       |          | Style of the input                   |
-
-- `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
-
-**Input** component has for class `.input-lunatic`.
+# Input component
+
+## Props
+
+|      Props       |      Type      | Default value | Required | Description                          |
+| :--------------: | :------------: | :-----------: | :------: | ------------------------------------ |
+|        id        |     string     |       -       |    ✓     | Id of the input                      |
+|      label       |     string     |      ""       |          | Label of the input                   |
+|  preferences \*  |     array      | ["COLLECTED"] |          | Preferences to manage input response |
+|   response \*    |     object     |      {}       |          | Response concerned by the component  |
+|   placeholder    |     string     |      " "      |          | Placeholder of the input             |
+|   handleChange   |      func      |       -       |    ✓     | Handler of the input                 |
+|     readOnly     |      bool      |     false     |          | Is the input read only               |
+|     disabled     |      bool      |     false     |          | Is the input disabled                |
+|    maxLength     | number, string |    524 288    |          | Maximum length of the input          |
+|   autoComplete   |      bool      |     false     |          | Is the input autocompletable         |
+| labelPosition \* |     string     |   "DEFAULT"   |          | Position of the input label          |
+|    mandatory     |      bool      |     false     |          | Is the input mandatory               |
+|     focused      |      bool      |     false     |          | Is the input focused                 |
+| declarations \*  |     array      |      []       |          | Declarations of the input            |
+|     features     |     array      |      [ ]      |          | Component features for labels        |
+|     bindings     |     object     |      [ ]      |          | Questionnaire bindings               |
+|    management    |      bool      |     false     |          | Management mode of the input         |
+|      style       |     object     |      {}       |          | Style of the input                   |
+
+- `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
+
+**Input** component has for class `.input-lunatic`.

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

@@ -0,0 +1,41 @@
+{
+	"components": [
+		{
+			"id": "j3343qhx",
+			"componentType": "Input",
+			"mandatory": false,
+			"maxLength": "30",
+			"label": "➡ 3. Who is the producer?",
+			"response": {
+				"name": "PRODUCER"
+			},
+			"missingResponse": "PRODUCER_MISSING"
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "PRODUCER",
+			"componentRef": "j3343qhx",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "James L. Brooks",
+				"FORCED": null,
+				"EDITED": "Matt Groening",
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "PRODUCER_MISSING",
+			"componentRef": "j3343qhx",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/input/data.json

@@ -0,0 +1,41 @@
+{
+	"components": [
+		{
+			"id": "j3343qhx",
+			"componentType": "Input",
+			"mandatory": false,
+			"maxLength": "30",
+			"label": "➡ 3. Who is the producer?",
+			"response": {
+				"name": "PRODUCER"
+			},
+			"missingResponse": { "name": "PRODUCER_MISSING" }
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "PRODUCER",
+			"componentRef": "j3343qhx",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "Matt Groening",
+				"FORCED": null,
+				"EDITED": "Matt Groening and James L. Brooks",
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "PRODUCER_MISSING",
+			"componentRef": "j3343qhx",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "DK",
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}