@inseefr/lunatic 0.2.61 → 0.3.1-experimental

package/src/stories/input/input.stories.js

@@ -1,88 +1,72 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Input } 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 input' },
-			{ valueType: 'FORCED', value: 'My forced input' },
-		],
-	},
-};
-
-const stories = storiesOf('Input', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Input />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Input id="default" label="Label" {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<Input
-		id="props"
-		label={text('Label', "I'm the label of the input")}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		autoComplete={boolean('Autocomplete', false)}
-		required={boolean('Required', false)}
-		focused={boolean('Focused', false)}
-		preferences={['COLLECTED', 'FORCED']}
-		tooltip={boolean('Tooltip', false)}
-		labelPosition={select('Label position', labelPositionOptions)}
-		{...defaultProps}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<Input
-		id="styled"
-		label={text('Label', "I'm the label of the input")}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		autoComplete={boolean('Autocomplete', false)}
-		required={boolean('Required', false)}
-		focused={boolean('Focused', false)}
-		handleChange={console.log}
-		style={object('Generated style', {
-			'border-color': color('Border color', '#e80a4d'),
-			'border-width': number('Border-width', 2, {
-				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('Input', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Input />" />;
+	});
+
+stories.addWithJSX('Default', () => (
+	<Orchestrator id="default" source={data} />
+));
+
+stories.addWithJSX('Props', () => (
+	<Orchestrator
+		id="props"
+		source={data}
+		label={text('Label', '"I\'m the label of the input"')}
+		placeholder={text('Placeholder', 'Placeholder')}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		missing={boolean('Missing', false)}
+		bindings={object('Bindings', { test: 'test' })}
+		readOnly={boolean('Read only', false)}
+		maxLength={number('Max length', 50)}
+		autoComplete={boolean('Autocomplete', false)}
+		mandatory={boolean('Mandatory', false)}
+		focused={boolean('Focused', false)}
+		management={boolean('Management', 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}
+					management={boolean('Management', false)}
+				/>
+			</>
+		);
+	};
+	return <Fake />;
+});

package/src/stories/input-number/README.md

@@ -1,31 +1,37 @@
-# InputNumber 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  |
-|       min       | number | Number.MIN_SAFE_INTEGER |          | Minimum of the input                 |
-|       max       | number | Number.MAX_SAFE_INTEGER |          | Maximum of the input                 |
-|    decimals     | number |            0            |          | Number of decimals of the input      |
-|   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         |
-|     focused     |  bool  |          false          |          | Is the input focused                 |
-| declarations \* | array  |           [ ]           |          | Declarations of the input            |
-|  labelPosition  | string |        "DEFAULT"        |          | Position of the input label          |
-|    required     |  bool  |          false          |          | Is the input required                |
-|     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
-
-**InputNumber** component has for classes `.input-lunatic`, `.warning` and `.lunatic-input-number-errors > error`.
+# InputNumber 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  |
+|       min        | number |   undefined   |          | Minimum of the input                 |
+|       max        | number |   undefined   |          | Maximum of the input                 |
+|     decimals     | number |       0       |          | Number of decimals of the input      |
+|   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                |
+|   autoComplete   |  bool  |     false     |          | Is the input autocompletable         |
+|     focused      |  bool  |     false     |          | Is the input focused                 |
+| labelPosition \* | string |   "DEFAULT"   |          | Position of the input label          |
+| unitPosition \*  | string |   "DEFAULT"   |          | Position of the unit label           |
+| declarations \*  | array  |      [ ]      |          | Declarations of the input            |
+|     features     | array  |      [ ]      |          | Component features for labels        |
+|     bindings     | object |      [ ]      |          | Questionnaire bindings               |
+|    mandatory     |  bool  |     false     |          | Is the input mandatory               |
+|    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`
+- `unitPosition` props has to be one of `DEFAULT`, `BEFORE` or `AFTER`
+- `declarations` are documented in the `Declarations` component
+
+## Styles
+
+**InputNumber** component has for classes `.input-lunatic`, `.warning`, `.unit` and `.lunatic-input-number-errors > error`.

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

@@ -0,0 +1,27 @@
+{
+	"components": [
+		{
+			"id": "j6q9h8tj",
+			"componentType": "InputNumber",
+			"mandatory": false,
+			"label": "➡ 4. What is the current season number?",
+			"response": {
+				"name": "SEASON_NUMBER"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "SEASON_NUMBER",
+			"componentRef": "j6q9h8tj",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "29000",
+				"FORCED": "30000",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

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

@@ -0,0 +1,42 @@
+{
+	"components": [
+		{
+			"id": "j6q9h8tj",
+			"componentType": "InputNumber",
+			"mandatory": false,
+			"label": "➡ 4. What is the current season number?",
+			"response": {
+				"name": "SEASON_NUMBER"
+			},
+			"missingResponse": {
+				"name": "SEASON_NUMBER_MISSING"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "SEASON_NUMBER",
+			"componentRef": "j6q9h8tj",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "29",
+				"FORCED": "30",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "SEASON_NUMBER_MISSING",
+			"componentRef": "j6q9h8tj",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/input-number/input-number.stories.js

@@ -1,95 +1,81 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { InputNumber } 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_NUMBER',
-		valueState: [
-			{ valueType: 'COLLECTED', value: '1' },
-			{ valueType: 'FORCED', value: '2' },
-			{ valueType: 'EDITED', value: '3' },
-		],
-	},
-};
-
-const stories = storiesOf('InputNumber', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<InputNumber />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<InputNumber id="default" label="Label" {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<InputNumber
-		id="props"
-		label={text('Label', "I'm the label of the number input")}
-		unit={text('Unit', 'euros')}
-		min={number('Min', 0)}
-		max={number('Max', 10)}
-		decimals={number('Decimals', 1)}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		autoComplete={boolean('Autocomplete', false)}
-		required={boolean('Required', false)}
-		focused={boolean('Focused', false)}
-		tooltip={boolean('Tooltip', false)}
-		labelPosition={select('Label position', labelPositionOptions)}
-		preferences={['COLLECTED', 'FORCED', 'EDITED']}
-		{...defaultProps}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<InputNumber
-		id="styled"
-		label={text('Label', "I'm the label of the number input")}
-		min={number('Min', 0)}
-		max={number('Max', 0)}
-		decimals={number('Decimals', 0)}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		autoComplete={boolean('Autocomplete', false)}
-		focused={boolean('Focused', false)}
-		style={object('Generated style', {
-			'border-color': color('Border color', '#e80a4d'),
-			'border-width': number('Border-width', 2, {
-				range: true,
-				min: 2,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 10, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-		{...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 {
+	labelPositionOptions,
+	unitPositionOptions,
+	featuresOptions,
+} from '../utils/options';
+import {
+	text,
+	boolean,
+	number,
+	object,
+	select,
+} from '@storybook/addon-knobs/react';
+
+const stories = storiesOf('InputNumber', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<InputNumber />" />;
+	});
+
+stories.addWithJSX('Default', () => (
+	<Orchestrator id="default" source={data} />
+));
+
+stories.addWithJSX('Props', () => (
+	<Orchestrator
+		id="props"
+		source={data}
+		label={text('Label', '"I\'m the label of the number input"')}
+		missing={boolean('Missing', false)}
+		unit={text('Unit', 'euros')}
+		numberAsTextfield={boolean('numberAsTextfield', false)}
+		min={number('Min', -99)}
+		max={number('Max', 99)}
+		decimals={number('Decimals', 1)}
+		placeholder={text('Placeholder', 'Placeholder')}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		bindings={object('Bindings', { test: 'test' })}
+		readOnly={boolean('Read only', false)}
+		autoComplete={boolean('Autocomplete', false)}
+		mandatory={boolean('Mandatory', false)}
+		focused={boolean('Focused', false)}
+		management={boolean('Management', false)}
+		labelPosition={select('Label position', labelPositionOptions, 'DEFAULT')}
+		unitPosition={select('Unit position', unitPositionOptions, '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}
+					management={boolean('Management', false)}
+				/>
+			</>
+		);
+	};
+	return <Fake />;
+});

package/src/stories/loop/README.md

@@ -0,0 +1,25 @@
+# Loop component
+
+## Props
+
+|      Props      |  Type  | Default value | Required | Description                           |
+| :-------------: | :----: | :-----------: | :------: | ------------------------------------- |
+|       id        | string |       -       |    ✓     | Id of the table                       |
+|      label      | string |      ""       |          | Label of the table                    |
+| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage table response  |
+|    cells \*     | array  |      []       |          | Table cells                           |
+|  handleChange   |  func  |       -       |    ✓     | Handler of the table                  |
+|      lines      | object |      {}       |          | Min and max lines for evolutive table |
+| declarations \* | array  |      []       |          | Declarations of the table             |
+|    features     | array  |      [ ]      |          | Component features for labels         |
+|    bindings     | object |      [ ]      |          | Questionnaire bindings                |
+| positioning \*  | string |   "DEFAULT"   |          | Cell options positioning              |
+|   addBtnLabel   | string | "Add a line"  |          | Label of the button to add lines      |
+|     hideBtn     |  bool  |     false     |          | Hide the add button                   |
+|   management    |  bool  |     false     |          | Management mode of the table          |
+|      style      | object |      {}       |          | Style of the table                    |
+
+- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
+- `cells` props has to be an array of array's components
+- `positioning` props has to be one of `DEFAULT`, `HORIZONTAL` or `VERTICAL`
+- `declarations` are documented in the `Declarations` component

package/src/stories/loop/loop.stories.js

@@ -0,0 +1,88 @@
+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 * as R from './with-roster';
+import * as B from './with-loop';
+import { positioningOptions } from '../utils/options';
+import { select, boolean } from '@storybook/addon-knobs/react';
+
+const storiesR = storiesOf('Loop/With roster', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="Loop" />;
+	});
+
+storiesR.addWithJSX('Default Loop', () => (
+	<Orchestrator
+		id="default-loop"
+		source={R.dataLoopWithRoster}
+		missing={boolean('Missing', false)}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		features={['VTL']}
+	/>
+));
+
+storiesR.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 ? R.dataForcedWithRoster : R.dataLoopWithRoster}
+					features={['VTL']}
+				/>
+			</>
+		);
+	};
+	return <Fake />;
+});
+
+storiesR.addWithJSX('Deeper Loop', () => (
+	<Orchestrator
+		id="double-loop"
+		source={R.dataLoopDeeperWithRoster}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		features={['VTL']}
+	/>
+));
+
+const storiesB = storiesOf('Loop/With loop', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="Loop" />;
+	});
+
+storiesB.addWithJSX('Default Loop', () => (
+	<Orchestrator
+		id="default-loop"
+		source={B.dataLoopWithLoop}
+		missing={boolean('Missing', false)}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		features={['VTL']}
+	/>
+));
+
+storiesB.addWithJSX('Deeper Loop', () => (
+	<Orchestrator
+		id="double-loop"
+		source={B.dataLoopDeeperWithLoop}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		features={['VTL']}
+	/>
+));