@inseefr/lunatic 0.3.0-experimental → 0.3.4-experimental

package/src/stories/questionnaire/questionnaire.stories.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import Orchestrator from '../utils/orchestrator';
+import OrchestratorSplit from '../utils/orchestrator-split';
 import { titleDecorator } from 'utils/lib';
 import calcVar from './calc-var';
 import logement from './logement';
@@ -10,6 +11,9 @@ import logementSequence from './logement-sequence';
 import dataLogement from './data-logement';
 import simpsons from './simpsons';
 import arithmetic from './arithmetic';
+import arithmeticManagement from './arithmetic-management';
+import updateExternalQuestionnaire from './update-external/questionnaire';
+import updateExternalData from './update-external/data';
 import { positioningOptions, featuresOptions } from '../utils/options';
 import { boolean, select } from '@storybook/addon-knobs/react';
 
@@ -33,26 +37,24 @@ def.addWithJSX('Calculated Variables', () => (
 	/>
 ));
 
-def.addWithJSX('Logement', () => (
+def.addWithJSX('Arithmetic', () => (
 	<Orchestrator
 		id="props"
-		source={logement}
-		missing={boolean('Missing', false)}
+		source={arithmetic}
 		features={select('Features', featuresOptions, ['VTL', 'MD'])}
 		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
 		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		management={boolean('Management', false)}
 	/>
 ));
 
-def.addWithJSX('Arithmetic', () => (
+def.addWithJSX('Arithmetic - Management', () => (
 	<Orchestrator
 		id="props"
-		source={arithmetic}
+		source={arithmeticManagement}
 		features={select('Features', featuresOptions, ['VTL', 'MD'])}
 		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
 		disabled={boolean('Disabled', false)}
+		management={boolean('Management', true)}
 	/>
 ));
 
@@ -91,7 +93,7 @@ paginated.addWithJSX('Calculated Variables', () => (
 ));
 
 paginated.addWithJSX('Logement', () => (
-	<Orchestrator
+	<OrchestratorSplit
 		id="props"
 		source={logement}
 		data={dataLogement}
@@ -108,11 +110,11 @@ paginated.addWithJSX('Logement', () => (
 ));
 
 paginated.addWithJSX('Logement - Queen', () => (
-	<Orchestrator
+	<OrchestratorSplit
 		id="props"
 		source={logementQueen}
 		data={dataLogement}
-		missing={boolean('Missing', false)}
+		missing={boolean('Missing', true)}
 		activeGoNextForMissing={boolean('Active go next for missing', false)}
 		features={select('Features', featuresOptions, ['VTL', 'MD'])}
 		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
@@ -124,7 +126,7 @@ paginated.addWithJSX('Logement - Queen', () => (
 ));
 
 paginated.addWithJSX('Logement - Sequence', () => (
-	<Orchestrator
+	<OrchestratorSplit
 		id="props"
 		source={logementSequence}
 		data={dataLogement}
@@ -140,7 +142,7 @@ paginated.addWithJSX('Logement - Sequence', () => (
 ));
 
 paginated.addWithJSX('Logement - S2', () => (
-	<Orchestrator
+	<OrchestratorSplit
 		id="props"
 		source={logementS2}
 		missing={boolean('Missing', false)}
@@ -170,3 +172,34 @@ paginated.addWithJSX('Simpsons', () => (
 		pagination
 	/>
 ));
+
+const other = storiesOf('Questionnaire/Other', module).addDecorator(
+	(Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Questionnaire />" />;
+	}
+);
+
+other.addWithJSX('Update external', () => {
+	const [addExternal, setAddExternal] = useState(null);
+	return (
+		<>
+			<button
+				onClick={() => setAddExternal({ PROMO: true })}
+			>{`Fire PROMO --> True`}</button>
+			<button
+				onClick={() => setAddExternal({ PROMO: false })}
+			>{`Fire PROMO --> False`}</button>
+			<Orchestrator
+				id="props"
+				source={updateExternalQuestionnaire}
+				data={updateExternalData}
+				features={select('Features', featuresOptions, ['VTL', 'MD'])}
+				positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+				disabled={boolean('Disabled', false)}
+				focused={boolean('Focused', false)}
+				addExternal={addExternal}
+			/>
+		</>
+	);
+});

package/src/stories/questionnaire/update-external/data.json

@@ -0,0 +1 @@
+{ "EXTERNAL": { "PROMO": null } }

package/src/stories/questionnaire/update-external/questionnaire.json

@@ -0,0 +1,75 @@
+{
+	"components": [
+		{
+			"id": "seq1",
+			"componentType": "Sequence",
+			"label": "\"I - Collect number\"",
+			"conditionFilter": { "value": "true" }
+		},
+		{
+			"id": "input1",
+			"componentType": "InputNumber",
+			"label": "Number",
+			"conditionFilter": { "value": "true" },
+			"response": { "name": "NUM" },
+			"bindingDependencies": ["NUM"]
+		},
+		{
+			"id": "seq2",
+			"componentType": "Sequence",
+			"label": "\"II - Promo rate\"",
+			"conditionFilter": {
+				"value": "PROMO = true",
+				"bindingDependencies": ["PROMO"]
+			},
+			"bindingDependencies": ["PROMO"]
+		},
+		{
+			"id": "input2",
+			"componentType": "InputNumber",
+			"label": "Rate",
+			"conditionFilter": {
+				"value": "PROMO = true",
+				"bindingDependencies": ["PROMO"]
+			},
+			"response": {
+				"name": "PROMO_RATE",
+				"bindingDependencies": ["PROMO_RATE"]
+			},
+			"bindingDependencies": ["PROMO", "PROMO_RATE"]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NUM",
+			"componentRef": "input1",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "PROMO_RATE",
+			"componentRef": "input2",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{ "variableType": "EXTERNAL", "name": "PROMO", "value": null },
+		{
+			"variableType": "CALCULATED",
+			"name": "DOUBLE_PROMO_RATE",
+			"expression": "cast(PROMO_RATE, integer) * 2",
+			"bindingDependencies": ["PROMO_RATE"]
+		}
+	]
+}

package/src/stories/suggester/data.json

@@ -46,7 +46,10 @@
 					"name": "libelle2",
 					"rules": ["[\\w]+"],
 					"language": "French",
-					"synonyms": { "st": ["saint"] },
+					"synonyms": [
+						{ "source": "saint", "target": ["st"] },
+						{ "source": "oph", "target": ["renaud", "nicolas"] }
+					],
 					"stemmer": false
 				},
 				{ "name": "code" }

package/src/stories/suggester/suggester-workers.stories.js

@@ -53,7 +53,10 @@ const bailleursSociaux = {
 			rules: ['[\\w]+'],
 			language: 'French',
 			stemmer: false,
-			synonyms: { saint: ['st'], sainte: ['ste'] },
+			synonyms: [
+				{ source: 'saint', target: ['st'] },
+				{ source: 'oph', target: ['renaud', 'nicolas'] },
+			],
 		},
 		{ name: 'code' },
 	],

package/src/stories/utils/orchestrator-split.js

@@ -0,0 +1,119 @@
+import React, { useEffect } from 'react';
+import * as lunatic from 'components';
+import './custom-lunatic.scss';
+
+function getStoreInfoRequired() {
+	return {};
+}
+
+const defaultFeatures = ['VTL'];
+
+const OrchestratorForStories = ({
+	source,
+	suggesters,
+	data,
+	management = false,
+	pagination = false,
+	modalForControls = false,
+	features = defaultFeatures,
+	bindings: initialBindings,
+	initialPage = '1',
+	getStoreInfo = getStoreInfoRequired,
+	missing = false,
+	shortcut = false,
+	activeGoNextForMissing = false,
+	suggesterFetcher,
+	autoSuggesterLoading,
+	addExternal,
+	...rest
+}) => {
+	const preferences = management
+		? ['COLLECTED', 'FORCED', 'EDITED']
+		: ['COLLECTED'];
+	const savingType = management ? 'EDITED' : 'COLLECTED';
+	const {
+		handleChange,
+		handleExternals,
+		components,
+		bindings,
+		pagination: {
+			goNext,
+			goPrevious,
+			page,
+			setPage,
+			maxPage,
+			isFirstPage,
+			isLastPage,
+			flow,
+		},
+	} = lunatic.useLunaticSplit(source, data, {
+		suggesters,
+		savingType,
+		preferences,
+		features,
+		management,
+		pagination,
+		modalForControls,
+		initialPage,
+		suggesterFetcher,
+		autoSuggesterLoading,
+	});
+
+	useEffect(() => {
+		handleExternals(addExternal);
+	}, [addExternal, handleExternals]);
+
+	const Button = lunatic.Button;
+
+	const missingStrategy = (b) => goNext(null, b);
+
+	return (
+		<div className="container">
+			<div className="components">
+				{components.map((q) => {
+					const { id, componentType } = q;
+					const Component = lunatic[componentType];
+					const { storeName } = q;
+
+					return (
+						<div className="lunatic lunatic-component" key={`component-${id}`}>
+							<Component
+								{...rest}
+								{...q}
+								{...getStoreInfo(storeName)}
+								handleChange={handleChange}
+								preferences={preferences}
+								savingType={savingType}
+								management={management}
+								features={features}
+								bindings={{ ...bindings, ...initialBindings }}
+								currentPage={page}
+								setPage={setPage}
+								flow={flow}
+								pagination={pagination}
+								missing={missing}
+								shortcut={shortcut}
+								missingStrategy={activeGoNextForMissing && missingStrategy}
+							/>
+						</div>
+					);
+				})}
+			</div>
+			{pagination && (
+				<>
+					<div className="pagination">
+						<Button
+							onClick={goPrevious}
+							disabled={isFirstPage}
+							value="Previous"
+						/>
+						<Button onClick={goNext} disabled={isLastPage} value="Next" />
+					</div>
+					<div>{`Page : ${page}/${maxPage}`}</div>
+				</>
+			)}
+		</div>
+	);
+};
+
+export default OrchestratorForStories;

package/src/stories/utils/orchestrator.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import * as lunatic from 'components';
 import './custom-lunatic.scss';
 
@@ -6,14 +6,16 @@ function getStoreInfoRequired() {
 	return {};
 }
 
+const defaultFeatures = ['VTL'];
+
 const OrchestratorForStories = ({
 	source,
 	suggesters,
-	data = {},
+	data,
 	management = false,
 	pagination = false,
 	modalForControls = false,
-	features = ['VTL'],
+	features = defaultFeatures,
 	bindings: initialBindings,
 	initialPage = '1',
 	getStoreInfo = getStoreInfoRequired,
@@ -22,6 +24,7 @@ const OrchestratorForStories = ({
 	activeGoNextForMissing = false,
 	suggesterFetcher,
 	autoSuggesterLoading,
+	addExternal,
 	...rest
 }) => {
 	const preferences = management
@@ -30,6 +33,7 @@ const OrchestratorForStories = ({
 	const savingType = management ? 'EDITED' : 'COLLECTED';
 	const {
 		handleChange,
+		handleExternals,
 		components,
 		bindings,
 		pagination: {
@@ -54,6 +58,11 @@ const OrchestratorForStories = ({
 		suggesterFetcher,
 		autoSuggesterLoading,
 	});
+
+	useEffect(() => {
+		handleExternals(addExternal);
+	}, [addExternal, handleExternals]);
+
 	const Button = lunatic.Button;
 
 	const missingStrategy = (b) => goNext(null, b);