@inseefr/lunatic 0.2.3-experimental → 0.2.3-prisme

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

@@ -1,133 +1,138 @@
-import React, { useState, useCallback } 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 dataAuto from './data-auto';
-import dataVTL from './data-vtl';
-import { labelPositionOptions, featuresOptions } from '../utils/options';
-import { text, boolean, object, select } from '@storybook/addon-knobs/react';
-import { SuggesterLoaderWidget } from 'components';
-import * as NAF from './naf-rev2';
-import * as COG from './cog-communes';
-import * as BAILLEURS from './bailleurs-sociaux';
-
-/**
- *
- */
-function getSuggesterInfo(name) {
-	if (name === 'naf-rev2') {
-		return { optionRenderer: NAF.OptionRenderer, idbVersion: '1' };
-	} else if (name === 'cog-communes') {
-		return { optionRenderer: COG.OptionRenderer, idbVersion: '1' };
-	} else if (name === 'bailleurs-sociaux') {
-		return { optionRenderer: BAILLEURS.OptionRenderer, idbVersion: '1' };
-	}
-	console.warn(`Unknown store : ${name}`);
-	return {};
-}
-
-function getWidgetLoaderInfo(name) {
-	if (name === 'naf-rev2') {
-		return {
-			fetch: NAF.fetch,
-			idbVersion: '1',
-		};
-	} else if (name === 'cog-communes') {
-		return { fetch: COG.fetch, idbVersion: '1' };
-	} else if (name === 'bailleurs-sociaux') {
-		return { fetch: BAILLEURS.fetch, idbVersion: '1' };
-	}
-	console.warn(`Unknown store : ${name}`);
-	return {};
-}
-
-const stories = storiesOf('Suggester/Manual loading', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator((Component) => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Suggester />" />;
-	});
-
-stories.addWithJSX('Default', () => {
-	const [message, setMessage] = useState(undefined);
-	const onRefresh = useCallback(function (m) {
-		setMessage(m);
-	}, []);
-	return (
-		<>
-			<SuggesterLoaderWidget
-				source={data}
-				getStoreInfo={getWidgetLoaderInfo}
-				onRefresh={onRefresh}
-				absolute
-			/>
-			<Orchestrator
-				id="default"
-				source={data}
-				getStoreInfo={getSuggesterInfo}
-			/>
-			<div>{message}</div>
-		</>
-	);
-});
-
-stories.addWithJSX('Props', () => {
-	return (
-		<>
-			<SuggesterLoaderWidget source={data} getStoreInfo={getWidgetLoaderInfo} />
-			<Orchestrator
-				id="props"
-				source={dataVTL}
-				label={text('Label', '"Enjoy the suggester below"')}
-				features={select('Features', featuresOptions, ['VTL', 'MD'])}
-				bindings={object('Bindings', {})}
-				disabled={boolean('Disabled', false)}
-				focused={boolean('Focused', false)}
-				management={boolean('Management', false)}
-				labelPosition={select(
-					'Label position',
-					labelPositionOptions,
-					'DEFAULT'
-				)}
-				getStoreInfo={getSuggesterInfo}
-			/>
-		</>
-	);
-});
-
-const storiesAuto = storiesOf('Suggester/Auto loading', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator((Component) => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Suggester />" />;
-	});
-
-const suggesterFetcher = (url) =>
-	fetch(url, {
-		headers: { Accept: 'application/json' },
-	});
-
-storiesAuto.addWithJSX('Default', () => (
-	<Orchestrator
-		id="default"
-		source={dataAuto}
-		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={suggesterFetcher}
-		autoSuggesterLoading
-		pagination
-	/>
-));
+import React, { useState, useCallback } 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 dataAuto from './data-auto';
+import dataVTL from './data-vtl';
+import { labelPositionOptions, featuresOptions } from '../utils/options';
+import { text, boolean, object, select } from '@storybook/addon-knobs/react';
+import { SuggesterLoaderWidget } from 'components';
+import * as NAF from './naf-rev2';
+import * as COG from './cog-communes';
+import * as BAILLEURS from './bailleurs-sociaux';
+import * as BAILLEURS2021 from './bailleurs-sociaux-2021';
+
+/**
+ *
+ */
+function getSuggesterInfo(name) {
+	if (name === 'naf-rev2') {
+		return { optionRenderer: NAF.OptionRenderer, idbVersion: '1' };
+	} else if (name === 'cog-communes') {
+		return { optionRenderer: COG.OptionRenderer, idbVersion: '1' };
+	} else if (name === 'bailleurs-sociaux') {
+		return { optionRenderer: BAILLEURS.OptionRenderer, idbVersion: '1' };
+	} else if (name === 'bailleurs-sociaux-2021') {
+		return { idbVersion: '1' };
+	}
+	console.warn(`Unknown store : ${name}`);
+	return {};
+}
+
+function getWidgetLoaderInfo(name) {
+	if (name === 'naf-rev2') {
+		return {
+			fetch: NAF.fetch,
+			idbVersion: '1',
+		};
+	} else if (name === 'cog-communes') {
+		return { fetch: COG.fetch, idbVersion: '1' };
+	} else if (name === 'bailleurs-sociaux') {
+		return { fetch: BAILLEURS.fetch, idbVersion: '1' };
+	} else if (name === 'bailleurs-sociaux-2021') {
+		return { fetch: BAILLEURS2021.fetch, idbVersion: '1' };
+	}
+	console.warn(`Unknown store : ${name}`);
+	return {};
+}
+
+const stories = storiesOf('Suggester/Manual loading', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Suggester />" />;
+	});
+
+stories.addWithJSX('Default', () => {
+	const [message, setMessage] = useState(undefined);
+	const onRefresh = useCallback(function (m) {
+		setMessage(m);
+	}, []);
+	return (
+		<>
+			<SuggesterLoaderWidget
+				source={data}
+				getStoreInfo={getWidgetLoaderInfo}
+				onRefresh={onRefresh}
+				absolute
+			/>
+			<Orchestrator
+				id="default"
+				source={data}
+				getStoreInfo={getSuggesterInfo}
+			/>
+			<div>{message}</div>
+		</>
+	);
+});
+
+stories.addWithJSX('Props', () => {
+	return (
+		<>
+			<SuggesterLoaderWidget source={data} getStoreInfo={getWidgetLoaderInfo} />
+			<Orchestrator
+				id="props"
+				source={dataVTL}
+				label={text('Label', '"Enjoy the suggester below"')}
+				features={select('Features', featuresOptions, ['VTL', 'MD'])}
+				bindings={object('Bindings', {})}
+				disabled={boolean('Disabled', false)}
+				focused={boolean('Focused', false)}
+				management={boolean('Management', false)}
+				labelPosition={select(
+					'Label position',
+					labelPositionOptions,
+					'DEFAULT'
+				)}
+				getStoreInfo={getSuggesterInfo}
+			/>
+		</>
+	);
+});
+
+const storiesAuto = storiesOf('Suggester/Auto loading', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Suggester />" />;
+	});
+
+const suggesterFetcher = (url) =>
+	fetch(url, {
+		headers: { Accept: 'application/json' },
+	});
+
+storiesAuto.addWithJSX('Default', () => (
+	<Orchestrator
+		id="default"
+		source={dataAuto}
+		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={suggesterFetcher}
+		autoSuggesterLoading
+		pagination
+	/>
+));

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,108 +1,119 @@
-import React from 'react';
-import * as lunatic from 'components';
-import './custom-lunatic.scss';
-
-function getStoreInfoRequired() {
-	return {};
-}
-
-const OrchestratorForStories = ({
-	source,
-	suggesters,
-	data = {},
-	management = false,
-	pagination = false,
-	features = ['VTL'],
-	bindings: initialBindings,
-	initialPage = '1',
-	getStoreInfo = getStoreInfoRequired,
-	missing = false,
-	shortcut = false,
-	activeGoNextForMissing = false,
-	suggesterFetcher,
-	autoSuggesterLoading,
-	...rest
-}) => {
-	const preferences = management
-		? ['COLLECTED', 'FORCED', 'EDITED']
-		: ['COLLECTED'];
-	const savingType = management ? 'EDITED' : 'COLLECTED';
-	const {
-		handleChange,
-		components,
-		bindings,
-		pagination: {
-			goNext,
-			goPrevious,
-			page,
-			setPage,
-			maxPage,
-			isFirstPage,
-			isLastPage,
-			flow,
-		},
-	} = lunatic.useLunatic(source, data, {
-		suggesters,
-		savingType,
-		preferences,
-		features,
-		management,
-		pagination,
-		initialPage,
-		suggesterFetcher,
-		autoSuggesterLoading,
-	});
-	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;
+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.useLunatic(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;