@inseefr/lunatic 0.2.60 → 0.3.0-experimental

package/src/stories/radio/README.md

@@ -1,30 +1,31 @@
-# Radio component
-
-## Props
-
-|       Props       |  Type  |             Default value             | Required | Description                            |
-| :---------------: | :----: | :-----------------------------------: | :------: | -------------------------------------- |
-|        id         | string |                   -                   |    ✓     | Id of the radio                        |
-|       label       | string |                  ""                   |          | Fieldset label of the radio            |
-|  preferences \*   | array  |             ["COLLECTED"]             |          | Preferences to manage radio response   |
-|    response \*    | object |                  {}                   |          | Response concerned by the component    |
-|    options \*     | array  |                  []                   |          | Options of the radio                   |
-|   handleChange    |  func  |                   -                   |    ✓     | Handler of the radio                   |
-|     disabled      |  bool  |                 false                 |          | Is the radio options disabled          |
-|      focused      |  bool  |                 false                 |          | Is the radio options focused           |
-| keyboardSelection |  bool  |                 false                 |          | Enable keyboard selection of the radio |
-|  positioning \*   | string |               "DEFAULT"               |          | Checkbox options positioning           |
-|  declarations \*  | array  |                  []                   |          | Declarations of the radio              |
-|      tooltip      |  bool  |                 false                 |          | Tooltip of the radio                   |
-|     style \*      | object | { fieldsetStyle: {}, radioStyle: {} } |          | Style of the radio                     |
-
-- `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}`
-- `options` props has to be an array made by objects with a shape of `{label: string, value: string}`
-- `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 `radioStyle`
-
-## Styles
-
-**CheckboxOne** component has for classes `radio-group`, `radio-modality` and `radio-lunatic`.
+# Radio component
+
+## Props
+
+|      Props      |  Type  |              Default value               | Required | Description                          |
+| :-------------: | :----: | :--------------------------------------: | :------: | ------------------------------------ |
+|       id        | string |                    -                     |    ✓     | Id of the radio                      |
+|      label      | string |                    ""                    |          | Fieldset label of the radio          |
+| preferences \*  | array  |              ["COLLECTED"]               |          | Preferences to manage radio response |
+|   response \*   | object |                    {}                    |          | Response concerned by the component  |
+|   options \*    | array  |                    []                    |          | Options of the radio                 |
+|  handleChange   |  func  |                    -                     |    ✓     | Handler of the radio                 |
+|    disabled     |  bool  |                  false                   |          | Is the radio options disabled        |
+|     focused     |  bool  |                  false                   |          | Is the radio options focused         |
+| positioning \*  | string |                "DEFAULT"                 |          | Checkbox options positioning         |
+| declarations \* | array  |                    []                    |          | Declarations of the radio            |
+|    features     | array  |                   [ ]                    |          | Component features for labels        |
+|    bindings     | object |                   [ ]                    |          | Questionnaire bindings               |
+|   management    |  bool  |                  false                   |          | Management mode of the radio         |
+|    style \*     | object | { fieldsetStyle: {}, modalityStyle: {} } |          | Style of the radio                   |
+
+- `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}`
+- `options` props has to be an array made by objects with a shape of `{label: string, value: string}`
+- `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
+
+**Radio** component has for classes `radio-group`, `radio-modality` and `radio-lunatic`.

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

@@ -0,0 +1,32 @@
+{
+	"components": [
+		{
+			"id": "rr",
+			"componentType": "Radio",
+			"mandatory": false,
+			"label": "➡ 1. In which city do the Simpsons reside?",
+			"response": {
+				"name": "CITY"
+			},
+			"options": [
+				{ "value": "00001", "label": "Springfield" },
+				{ "value": "00002", "label": "Shelbyville" },
+				{ "value": "00003", "label": "CITY" }
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "CITY",
+			"componentRef": "rr",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "00003",
+				"FORCED": "00002",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/radio/data-vtl.json

@@ -0,0 +1,47 @@
+{
+	"components": [
+		{
+			"id": "rr",
+			"componentType": "Radio",
+			"mandatory": false,
+			"label": "➡ 1. In which city do the Simpsons reside?",
+			"response": {
+				"name": "CITY"
+			},
+			"options": [
+				{ "value": "00001", "label": "Springfield" },
+				{ "value": "00002", "label": "Shelbyville" },
+				{ "value": "00003", "label": "CITY" }
+			],
+			"missingResponse": {
+				"name": "CITY_MISSING"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "CITY",
+			"componentRef": "rr",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "00002",
+				"FORCED": "00001",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "CITY_MISSING",
+			"componentRef": "rr",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/radio/data.json

@@ -0,0 +1,32 @@
+{
+	"components": [
+		{
+			"id": "rr",
+			"componentType": "Radio",
+			"mandatory": false,
+			"label": "➡ 1. In which city do the Simpsons reside?",
+			"response": {
+				"name": "CITY"
+			},
+			"options": [
+				{ "value": "00001", "label": "Springfield" },
+				{ "value": "00002", "label": "Shelbyville" },
+				{ "value": "00003", "label": "Seinfeld" }
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "CITY",
+			"componentRef": "rr",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": "00002",
+				"FORCED": "00001",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/radio/radio.stories.js

@@ -1,110 +1,64 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Radio } 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 stories = storiesOf('Radio', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Radio />" />;
-	});
-
-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 positioningOptions = {
-	DEFAULT: 'Default',
-	HORIZONTAL: 'Horizontal',
-	VERTICAL: 'Vertical',
-};
-
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'RADIO',
-		valueState: [
-			{ valueType: 'COLLECTED', value: 'belgium' },
-			{ valueType: 'FORCED', value: 'france' },
-		],
-	},
-};
-
-stories.addWithJSX('Default', () => (
-	<Radio id="default" options={options} {...defaultProps} />
-));
-
-stories.addWithJSX('Props', () => (
-	<Radio
-		id="props"
-		label={text('Label', "I'm the label of the radio")}
-		positioning={select('Items positioning', positioningOptions)}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		keyboardSelection={boolean('Keyboard selection', false)}
-		options={options}
-		preferences={['COLLECTED', 'FORCED']}
-		tooltip={boolean('Tooltip', false)}
-		{...defaultProps}
-	/>
-));
-
-stories.addWithJSX('Styled', () => (
-	<Radio
-		id="styled"
-		label={text('Label', "I'm the label of the radio")}
-		positioning={select('Items positioning', positioningOptions)}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		options={options}
-		style={object('Generated style', {
-			fieldsetStyle: {
-				'border-color': color('Fieldset color', '#e80a4d'),
-				'border-width': number('Border-width', 3, {
-					range: true,
-					min: 0,
-					max: 20,
-					step: 1,
-				}),
-				'border-radius': number('Border-radius', 5, {
-					range: true,
-					min: 0,
-					max: 20,
-					step: 1,
-				}),
-			},
-			radioStyle: {
-				'border-color': color('Checked label border color', '#e80a4d'),
-				'border-width': number('Checked label border width', 3, {
-					range: true,
-					min: 0,
-					max: 20,
-					step: 1,
-				}),
-				'border-radius': number('Checked label border radius', 5, {
-					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 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('Radio', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Radio />" />;
+	});
+
+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 radio"')}
+		missing={boolean('Missing', false)}
+		shortcut={boolean('Shortcut', false)}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		bindings={object('Bindings', { CITY: 'Springfield' })}
+		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}
+					management={boolean('Management', false)}
+				/>
+			</>
+		);
+	};
+	return <Fake />;
+});

package/src/stories/sequence/README.md

@@ -1,16 +1,18 @@
-# Sequence component
-
-## Props
-
-|      Props      |  Type  | Default value | Required | Description                  |
-| :-------------: | :----: | :-----------: | :------: | ---------------------------- |
-|       id        | string |       -       |    ✓     | Id of the sequence           |
-|      label      | string |       -       |    ✓     | Label of the sequence        |
-| declarations \* | array  |      [ ]      |          | Declarations of the sequence |
-|      style      | object |      { }      |          | Style of the sequence        |
-
-- `declarations` are documented in the `Declarations` component
-
-## Styles
-
-**Sequence** component has for class `sequence-lunatic`.
+# Sequence component
+
+## Props
+
+|      Props      |  Type  | Default value | Required | Description                   |
+| :-------------: | :----: | :-----------: | :------: | ----------------------------- |
+|       id        | string |       -       |    ✓     | Id of the sequence            |
+|      label      | string |       -       |    ✓     | Label of the sequence         |
+| declarations \* | array  |      [ ]      |          | Declarations of the sequence  |
+|    features     | array  |      [ ]      |          | Component features for labels |
+|    bindings     | object |      [ ]      |          | Questionnaire bindings        |
+|      style      | object |      { }      |          | Style of the sequence         |
+
+- `declarations` are documented in the `Declarations` component
+
+## Styles
+
+**Sequence** component has for class `sequence-lunatic`.

package/src/stories/sequence/sequence.stories.js

@@ -4,43 +4,29 @@ import { withReadme } from 'storybook-readme';
 import { Sequence } from 'components';
 import readme from './README.md';
 import { titleDecorator } from 'utils/lib';
-import { text, number, color, object } from '@storybook/addon-knobs/react';
+import { featuresOptions } from '../utils/options';
+import { text, object, select } from '@storybook/addon-knobs/react';
 
 const stories = storiesOf('Sequence', module)
 	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
+	.addDecorator((Component) => {
 		const WrappedComponent = titleDecorator(Component);
 		return <WrappedComponent title="<Sequence />" />;
 	});
 
 stories.addWithJSX('Default', () => (
-	<Sequence id="default" label="Label of my sequence" />
+	<div className="lunatic-component">
+		<Sequence id="default" label="Label of my sequence" />
+	</div>
 ));
 
 stories.addWithJSX('Props', () => (
-	<Sequence id="props" label={text('Label', 'Label of my sequence')} />
-));
-
-stories.addWithJSX('Styled', () => (
-	<Sequence
-		id="styled"
-		label={text('Label', 'Label of my sequence')}
-		style={object('Generated style', {
-			color: color('Color', 'white'),
-			'background-color': color('Background color', '#e80a4d'),
-			'border-color': color('Border color', '#e80a4d'),
-			'border-width': number('Border-width', 0, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 0, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-	/>
+	<div className="lunatic-component">
+		<Sequence
+			id="props"
+			label={text('Label', '"Label of my sequence: " || TEST')}
+			features={select('Features', featuresOptions, ['VTL', 'MD'])}
+			bindings={object('Bindings', { TEST: 'test' })}
+		/>
+	</div>
 ));

package/src/stories/subsequence/README.md

@@ -1,16 +1,18 @@
-# Subsequence component
-
-## Props
-
-|      Props      |  Type  | Default value | Required | Description                     |
-| :-------------: | :----: | :-----------: | :------: | ------------------------------- |
-|       id        | string |       -       |    ✓     | Id of the subsequence           |
-|      label      | string |       -       |    ✓     | Label of the subsequence        |
-| declarations \* | array  |      [ ]      |          | Declarations of the subsequence |
-|      style      | object |      {}       |          | Style of the subsequence        |
-
-- `declarations` are documented in the `Declarations` component
-
-## Styles
-
-**Subsequence** component has for class `subsequence-lunatic`.
+# Subsequence component
+
+## Props
+
+|      Props      |  Type  | Default value | Required | Description                     |
+| :-------------: | :----: | :-----------: | :------: | ------------------------------- |
+|       id        | string |       -       |    ✓     | Id of the subsequence           |
+|      label      | string |       -       |    ✓     | Label of the subsequence        |
+| declarations \* | array  |      [ ]      |          | Declarations of the subsequence |
+|    features     | array  |      [ ]      |          | Component features for labels   |
+|    bindings     | object |      [ ]      |          | Questionnaire bindings          |
+|      style      | object |      {}       |          | Style of the subsequence        |
+
+- `declarations` are documented in the `Declarations` component
+
+## Styles
+
+**Subsequence** component has for class `subsequence-lunatic`.

package/src/stories/subsequence/subsequence.stories.js

@@ -4,43 +4,29 @@ import { withReadme } from 'storybook-readme';
 import { Subsequence } from 'components';
 import readme from './README.md';
 import { titleDecorator } from 'utils/lib';
-import { text, number, color, object } from '@storybook/addon-knobs/react';
+import { featuresOptions } from '../utils/options';
+import { text, object, select } from '@storybook/addon-knobs/react';
 
 const stories = storiesOf('Subsequence', module)
 	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
+	.addDecorator((Component) => {
 		const WrappedComponent = titleDecorator(Component);
 		return <WrappedComponent title="<Subsequence />" />;
 	});
 
 stories.addWithJSX('Default', () => (
-	<Subsequence id="default" label="Label of my subsequence" />
+	<div className="lunatic-component">
+		<Subsequence id="default" label="Label of my subsequence" />
+	</div>
 ));
 
 stories.addWithJSX('Props', () => (
-	<Subsequence id="props" label={text('Label', 'Label of my subsequence')} />
-));
-
-stories.addWithJSX('Styled', () => (
-	<Subsequence
-		id="styled"
-		label={text('Label', 'Label of my subsequence')}
-		style={object('Generated style', {
-			color: color('Color', 'white'),
-			'background-color': color('Background color', '#e80a4d'),
-			'border-color': color('Border color', '#e80a4d'),
-			'border-width': number('Border-width', 0, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 0, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-	/>
+	<div className="lunatic-component">
+		<Subsequence
+			id="props"
+			label={text('Label', '"Label of my subsequence: " || test')}
+			features={select('Features', featuresOptions, ['VTL', 'MD'])}
+			bindings={object('Bindings', { test: 'test' })}
+		/>
+	</div>
 ));

package/src/stories/suggester/README.md

@@ -0,0 +1,46 @@
+# Suggester component
+
+## Props
+
+|      Props       |  Type  |              Default value               | Required | Description                              |
+| :--------------: | :----: | :--------------------------------------: | :------: | ---------------------------------------- |
+|        id        | string |                    -                     |    ✓     | Id of the suggester                      |
+|      label       | string |                    ""                    |          | Fieldset label of the suggester          |
+|  preferences \*  | array  |              ["COLLECTED"]               |          | Preferences to manage suggester response |
+|   response \*    | object |                    {}                    |          | Response concerned by the component      |
+| placeholderList  | string |                    ""                    |          | Placeholder of the suggester             |
+|   handleChange   |  func  |                    -                     |    ✓     | Handler of the suggester                 |
+|     disabled     |  bool  |                  false                   |          | Is the suggester options disabled        |
+|     focused      |  bool  |                  false                   |          | Is the suggester options focused         |
+| declarations \*  | array  |                    []                    |          | Declarations of the suggester            |
+|     features     | array  |                   [ ]                    |          | Component features for labels            |
+|     bindings     | object |                   [ ]                    |          | Questionnaire bindings                   |
+|    management    |  bool  |                  false                   |          | Management mode of the suggester         |
+| labelPosition \* | string |                "DEFAULT"                 |          | Position of the input label              |
+|       path       | string |                    -                     |    ✓     | Path to data into indexdb                |
+|     style \*     | object | { fieldsetStyle: {}, modalityStyle: {} } |          | Style of the suggester                   |
+
+- `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
+
+**Suggester** component has for classes XXX.
+
+## Json-lunatic store-info
+
+{
+suggester: { [name] : {
+name,
+fields: [{ name: string, rules: [regexp]|'soft'|undefined, language: string|undefined, stemmer: boolean, min: integer }],
+queryParser:
+{type: 'soft'}|
+{type:'tokenized', params: { language: string, rules: [regexp]|undefined, stemmer: boolean|undefined },
+stopWords: [string]|undefined,
+order: { type: 'ascending'|'descending', field: string }|undefined,
+version: string
+}
+} , ...
+}

package/src/stories/suggester/bailleurs-sociaux/fetch-bailleurs.js

@@ -0,0 +1,15 @@
+async function fetchBailleurs(path = '') {
+	const sbPath =
+		process.env.NODE_ENV === 'development'
+			? `${path}/bailleurs-sociaux.json`
+			: `/Lunatic/storybook/bailleurs-sociaux.json`;
+	const response = await fetch(sbPath);
+	const naf = await response.json();
+	return naf.map(function (bailleur) {
+		const { code, libelle1 } = bailleur;
+
+		return { ...bailleur, id: code, label: libelle1, value: code };
+	});
+}
+
+export default fetchBailleurs;

package/src/stories/suggester/bailleurs-sociaux/index.js

@@ -0,0 +1,2 @@
+export { default as fetch } from './fetch-bailleurs';
+export { default as OptionRenderer } from './option-bailleur-renderer';