@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/src/stories/suggester/source.json

@@ -0,0 +1,234 @@
+{
+	"maxPage": "4",
+	"suggesters": [
+		{
+			"name": "naf-rev2",
+			"fields": [
+				{
+					"name": "label",
+					"rules": ["[\\w]+"],
+					"language": "French",
+					"min": 2
+				},
+				{ "name": "id" }
+			],
+			"queryParser": {
+				"type": "tokenized",
+				"params": { "language": "French", "pattern": "[\\w.]+" }
+			},
+			"version": "1"
+		},
+		{
+			"name": "naf-rev2-stop",
+			"fields": [
+				{
+					"name": "label",
+					"rules": ["[\\w]+"],
+					"language": "French",
+					"min": 2
+				},
+				{ "name": "id" }
+			],
+			"queryParser": {
+				"type": "tokenized",
+				"params": { "language": "French", "pattern": "[\\w.]+" }
+			},
+			"version": "1"
+		},
+		{
+			"name": "cog-communes",
+			"fields": [
+				{ "name": "label", "rules": "soft" },
+				{ "name": "nccenr", "rules": "soft" },
+				{ "name": "id", "rules": "soft" }
+			],
+			"queryParser": { "type": "soft" },
+			"version": "1"
+		}
+	],
+	"components": [
+		{
+			"id": "nn",
+			"componentType": "InputNumber",
+			"mandatory": false,
+			"min": 1,
+			"max": 4,
+			"decimals": 0,
+			"label": { "value": "\"Number of inhabitants\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"response": {
+				"name": "NUM"
+			},
+			"page": "1"
+		},
+		{
+			"id": "idLoop",
+			"label": { "value": "\"Boucle individu\"", "type": "VTL|MD" },
+			"componentType": "Loop",
+			"iterations": { "value": "cast(NUM, integer)", "type": "VTL" },
+			"paginatedLoop": false,
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"loopDependencies": ["NUM"],
+			"page": "2",
+			"components": [
+				{
+					"id": "k3ym6x16",
+					"label": { "value": "\"Prénom :\"", "type": "VTL|MD" },
+					"componentType": "Input",
+					"conditionFilter": { "value": "true", "type": "VTL" },
+					"mandatory": false,
+					"response": {
+						"name": "PRENOM"
+					},
+					"page": "2"
+				}
+			]
+		},
+		{
+			"id": "idLoopInd",
+			"label": { "value": "\"Boucle individu\"", "type": "VTL|MD" },
+			"componentType": "Loop",
+			"iterations": { "value": "count(PRENOM)", "type": "VTL" },
+			"paginatedLoop": true,
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"loopDependencies": ["PRENOM"],
+			"page": "3",
+			"maxPage": "3",
+			"components": [
+				{
+					"id": "k3ym61vfzzzzzzzzzzzz",
+					"componentType": "Sequence",
+					"label": {
+						"value": "\"Questionnaire de : \" || PRENOM",
+						"type": "VTL|MD"
+					},
+					"conditionFilter": {
+						"value": "not(isnull(PRENOM))",
+						"type": "VTL"
+					},
+					"page": "3.1"
+				},
+				{
+					"id": "sugg1",
+					"componentType": "Suggester",
+					"mandatory": false,
+					"label": {
+						"value": "PRENOM || \" what's your favorite NAF code? (default stop words)\"",
+						"type": "VTL|MD"
+					},
+					"storeName": "naf-rev2",
+					"conditionFilter": {
+						"value": "not(isnull(PRENOM))",
+						"type": "VTL"
+					},
+					"response": {
+						"name": "NAF"
+					},
+					"page": "3.2"
+				},
+				{
+					"id": "sugg2",
+					"componentType": "Suggester",
+					"mandatory": false,
+					"label": "PRENOM || \" what's your favorite NAF code? (without stop words)\"",
+					"storeName": "naf-rev2-stop",
+					"conditionFilter": {
+						"value": "not(isnull(PRENOM))",
+						"type": "VTL"
+					},
+					"response": {
+						"name": "NAF_STOP"
+					},
+					"page": "3.2"
+				},
+				{
+					"id": "sugg-communes",
+					"componentType": "Suggester",
+					"mandatory": false,
+					"label": {
+						"value": "PRENOM || \" what's your favorite city?\"",
+						"type": "VTL|MD"
+					},
+					"storeName": "cog-communes",
+					"conditionFilter": {
+						"value": "not(isnull(PRENOM))",
+						"type": "VTL"
+					},
+					"response": {
+						"name": "CITY"
+					},
+					"page": "3.3"
+				}
+			]
+		},
+		{
+			"id": "kk",
+			"componentType": "Sequence",
+			"label": { "value": "\"END\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"page": "4"
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NUM",
+			"componentRef": "nn",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "PRENOM",
+			"componentRef": "idLoop",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTED": [null]
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "NAF",
+			"componentRef": "idLoopInd",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTED": [null]
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "NAF_STOP",
+			"componentRef": "idLoopInd",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTED": [null]
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "CITY",
+			"componentRef": "idLoopInd",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTED": [null]
+			}
+		}
+	]
+}

package/src/stories/suggester/suggester.stories.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Orchestrator from '../utils/orchestrator';
+import source from './source';
+import defaultArgTypes from '../utils/default-arg-types';
+
+const stories = {
+	title: 'Components/Suggester',
+	component: Orchestrator,
+	argTypes: defaultArgTypes,
+};
+
+export default stories;
+
+const Template = (args) => <Orchestrator {...args} />;
+export const Default = Template.bind({});
+
+const suggesterFetcher = (url) =>
+	fetch(url, {
+		headers: { Accept: 'application/json' },
+	});
+
+Default.args = {
+	id: 'suggester',
+	source,
+	autoSuggesterLoading: true,
+	suggesters: {
+		'naf-rev2': {
+			url: 'https://inseefr.github.io/Lunatic/storybook/naf-rev2.json',
+		},
+		'naf-rev2-stop': {
+			url: 'https://inseefr.github.io/Lunatic/storybook/naf-rev2.json',
+			stopWords: [],
+		},
+		'cog-communes': {
+			url: 'https://inseefr.github.io/Lunatic/storybook/communes-2019.json',
+		},
+	},
+	suggesterFetcher,
+	pagination: true,
+};

package/src/stories/switch/README.md

@@ -0,0 +1,31 @@
+# CheckboxOne 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     |
+|   options \*    | array  |                    -                     |    ✓     | Options of the checkbox                 |
+|  handleChange   |  func  |                    -                     |    ✓     | Handler of the checkbox                 |
+|    disabled     |  bool  |                  false                   |          | Is the checkbox options disabled        |
+|     focused     |  bool  |                  false                   |          | Is the checkbox options focused         |
+| positioning \*  | string |                "DEFAULT"                 |          | Checkbox options positioning            |
+| 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 | { fieldsetStyle: {}, modalityStyle: {} } |          | 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}`
+- `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
+
+**CheckboxOne** component has for classes `checkbox-group-list`, `checkbox-modality` and `checkbox-lunatic`.

package/src/stories/switch/SwitchMaterialUI.js

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import Switch from '@mui/material/Switch';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+function SwitchMaterialUI({
+	checked,
+	disabled,
+	handleChange,
+	statusLabel,
+	labelId,
+}) {
+	const onClick = useCallback(
+		function () {
+			handleChange(!checked);
+		},
+		[checked, handleChange]
+	);
+
+	const { true: trueStatus, false: falseStatue } = statusLabel;
+	return (
+		<Stack direction="row" spacing={1} alignItems="center">
+			<Typography>{falseStatue}</Typography>
+			<Switch
+				checked={checked}
+				onClick={onClick}
+				disabled={disabled}
+				inputProps={{ 'aria-labelledby': labelId, 'aria-checked': checked }}
+			/>
+			<Typography>{trueStatus}</Typography>
+		</Stack>
+	);
+}
+
+export default SwitchMaterialUI;

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

@@ -0,0 +1,48 @@
+{
+	"components": [
+		{
+			"id": "1",
+			"componentType": "Switch",
+			"mandatory": false,
+			"label": "➡ 1. Are you ready?",
+			"response": {
+				"name": "READY"
+			}
+		},
+		{
+			"id": "2",
+			"componentType": "Switch",
+			"mandatory": false,
+			"label": "➡ 2. Are you always ready?",
+			"response": {
+				"name": "READY2"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "READY",
+			"componentRef": "1",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": true,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "READY2",
+			"componentRef": "2",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": true,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/switch/data.json

@@ -0,0 +1,80 @@
+{
+	"components": [
+		{
+			"id": "1",
+			"componentType": "Switch",
+			"mandatory": false,
+			"label": "➡ 1. Are you ready?",
+			"statusLabel": { "true": "Yes", "false": "No" },
+			"response": {
+				"name": "READY"
+			},
+			"missingResponse": {
+				"name": "READY_MISSING"
+			}
+		},
+		{
+			"id": "2",
+			"componentType": "Switch",
+			"mandatory": false,
+			"label": "➡ 2. Are you always ready?",
+			"response": {
+				"name": "READY2"
+			},
+			"missingResponse": {
+				"name": "READY2_MISSING"
+			},
+			"statusLabel": { "true": "Always", "false": "Never" }
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "READY",
+			"componentRef": "1",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "READY_MISSING",
+			"componentRef": "1",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "READY2",
+			"componentRef": "2",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": true,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "READY2_MISSING",
+			"componentRef": "2",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/switch/switch.js

@@ -0,0 +1,72 @@
+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';
+import data from './data';
+import dataForced from './data-forced';
+import { boolean, select, object } from '@storybook/addon-knobs/react';
+import { positioningOptions, featuresOptions } from '../utils/options';
+import { SwitchMui } from '../custom-mui';
+
+const stories = storiesOf('switch', 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 />;
+});
+
+stories.addWithJSX('Custom Switch', function () {
+	const custom = { Switch: SwitchMui };
+	return (
+		<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)}
+			custom={custom}
+		/>
+	);
+});

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

@@ -0,0 +1,28 @@
+* {
+	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;
+}
+
+.waiting-orchestrator {
+	font-size: 1.5em;
+	font-weight: bold;
+}

package/src/stories/utils/default-arg-types.js

@@ -0,0 +1,29 @@
+const fields = [
+	'source',
+	'id',
+	'pagination',
+	'data',
+	'management',
+	'modalForControls',
+	'features',
+	'initialPage',
+	'getStoreInfo',
+	'missing',
+	'shortcut',
+	'activeGoNextForMissing',
+	'filterDescription',
+];
+
+const defaultArgTypes = fields.reduce(
+	(acc, f) => ({
+		...acc,
+		[f]: {
+			table: {
+				disable: true,
+			},
+		},
+	}),
+	{}
+);
+
+export default defaultArgTypes;

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'],
+};