@inseefr/lunatic 0.1.13-hackathon → 0.2.0-prisme

package/src/stories/tooltip-response/md-tooltip.json

@@ -1,31 +1,31 @@
-{
-	"components": [
-		{
-			"id": "uu",
-			"componentType": "Radio",
-			"mandatory": false,
-			"label": "NAME || \", êtes-vous au [chômage](. 'Le chômage représente l\u2019ensemble des personnes de 15 ans et plus, privées d\u2019emploi et en recherchant un. Sa mesure est complexe. Les frontières entre emploi, chômage et inactivité ne sont pas toujours faciles à établir, ce qui amène souvent à parler d\u2019un « halo » autour du chômage. Il y a en France deux sources statistiques principales sur le chômage : les statistiques mensuelles du Ministère du travail, élaborées à partir des fichiers de demandeurs d\u2019emploi enregistrés par Pôle Emploi et l\u2019enquête Emploi de l\u2019Insee, qui mesure le chômage au sens du BIT.') ?\"",
-			"response": {
-				"name": "UNEMPLOYMENT"
-			},
-			"options": [
-				{ "value": "0", "label": "Non" },
-				{ "value": "1", "label": "Yes" }
-			]
-		}
-	],
-	"variables": [
-		{
-			"variableType": "COLLECTED",
-			"name": "UNEMPLOYMENT",
-			"componentRef": "uu",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": "1",
-				"EDITED": null,
-				"INPUTED": null
-			}
-		}
-	]
-}
+{
+	"components": [
+		{
+			"id": "uu",
+			"componentType": "Radio",
+			"mandatory": false,
+			"label": "NAME || \", êtes-vous au [chômage](. 'Le chômage représente l\u2019ensemble des personnes de 15 ans et plus, privées d\u2019emploi et en recherchant un. Sa mesure est complexe. Les frontières entre emploi, chômage et inactivité ne sont pas toujours faciles à établir, ce qui amène souvent à parler d\u2019un « halo » autour du chômage. Il y a en France deux sources statistiques principales sur le chômage : les statistiques mensuelles du Ministère du travail, élaborées à partir des fichiers de demandeurs d\u2019emploi enregistrés par Pôle Emploi et l\u2019enquête Emploi de l\u2019Insee, qui mesure le chômage au sens du BIT.') ?\"",
+			"response": {
+				"name": "UNEMPLOYMENT"
+			},
+			"options": [
+				{ "value": "0", "label": "Non" },
+				{ "value": "1", "label": "Yes" }
+			]
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "UNEMPLOYMENT",
+			"componentRef": "uu",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": "1",
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/tooltip-response/tooltip.stories.js

@@ -1,83 +1,83 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { TooltipResponse } from 'components';
-import Orchestrator from '../utils/orchestrator';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import mdLink from './md-link';
-import mdTooltip from './md-tooltip.json';
-import { positioningOptions, featuresOptions } from '../utils/options';
-import { boolean, object, select } from '@storybook/addon-knobs/react';
-
-const stories = storiesOf('Tooltip/Management', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator((Component) => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Tooltip />" />;
-	});
-
-stories.addWithJSX('Forced', () => (
-	<div style={{ marginLeft: '50%' }}>
-		<TooltipResponse
-			id="response"
-			response={{
-				name: 'response',
-				values: {
-					COLLECTED: 'Collected',
-					FORCED: 'Forced',
-					EDITED: null,
-				},
-			}}
-		/>
-	</div>
-));
-
-stories.addWithJSX('Edited', () => (
-	<div style={{ marginLeft: '50%' }}>
-		<TooltipResponse
-			id="response"
-			response={{
-				name: 'response',
-				values: {
-					COLLECTED: 'Collected',
-					FORCED: 'Forced',
-					EDITED: 'Edited',
-				},
-			}}
-		/>
-	</div>
-));
-
-const storiesMD = storiesOf('Tooltip/Markdown', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator((Component) => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="MD" />;
-	});
-
-storiesMD.addWithJSX('Link', () => (
-	<Orchestrator
-		id="link"
-		source={mdLink}
-		features={select('Features', featuresOptions, ['VTL', 'MD'])}
-		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
-		bindings={object('Bindings', { NAME: 'Mauro' })}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		management={boolean('Management', false)}
-	/>
-));
-
-storiesMD.addWithJSX('Tooltip', () => (
-	<Orchestrator
-		id="link"
-		source={mdTooltip}
-		features={select('Features', featuresOptions, ['VTL', 'MD'])}
-		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
-		bindings={object('Bindings', { NAME: 'Mauro' })}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		management={boolean('Management', false)}
-	/>
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withReadme } from 'storybook-readme';
+import { TooltipResponse } from 'components';
+import Orchestrator from '../utils/orchestrator';
+import readme from './README.md';
+import { titleDecorator } from 'utils/lib';
+import mdLink from './md-link';
+import mdTooltip from './md-tooltip.json';
+import { positioningOptions, featuresOptions } from '../utils/options';
+import { boolean, object, select } from '@storybook/addon-knobs/react';
+
+const stories = storiesOf('Tooltip/Management', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Tooltip />" />;
+	});
+
+stories.addWithJSX('Forced', () => (
+	<div style={{ marginLeft: '50%' }}>
+		<TooltipResponse
+			id="response"
+			response={{
+				name: 'response',
+				values: {
+					COLLECTED: 'Collected',
+					FORCED: 'Forced',
+					EDITED: null,
+				},
+			}}
+		/>
+	</div>
+));
+
+stories.addWithJSX('Edited', () => (
+	<div style={{ marginLeft: '50%' }}>
+		<TooltipResponse
+			id="response"
+			response={{
+				name: 'response',
+				values: {
+					COLLECTED: 'Collected',
+					FORCED: 'Forced',
+					EDITED: 'Edited',
+				},
+			}}
+		/>
+	</div>
+));
+
+const storiesMD = storiesOf('Tooltip/Markdown', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="MD" />;
+	});
+
+storiesMD.addWithJSX('Link', () => (
+	<Orchestrator
+		id="link"
+		source={mdLink}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		bindings={object('Bindings', { NAME: 'Mauro' })}
+		disabled={boolean('Disabled', false)}
+		focused={boolean('Focused', false)}
+		management={boolean('Management', false)}
+	/>
+));
+
+storiesMD.addWithJSX('Tooltip', () => (
+	<Orchestrator
+		id="link"
+		source={mdTooltip}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+		bindings={object('Bindings', { NAME: 'Mauro' })}
+		disabled={boolean('Disabled', false)}
+		focused={boolean('Focused', false)}
+		management={boolean('Management', false)}
+	/>
+));

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

@@ -1,23 +1,23 @@
-* {
-	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;
-}
+* {
+	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;
+}

package/src/stories/utils/options.js

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

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);

package/src/tests/components/breadcrumb.spec.js

@@ -1,13 +1,13 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Breadcrumb } from 'components';
-
-describe('breadcrumb', () => {
-	it('renders without crashing', () => {
-		shallow(<Breadcrumb elements={[]} />);
-	});
-	it('renders with elements', () => {
-		const wrapper = shallow(<Breadcrumb elements={['One', 'Two']} />);
-		expect(wrapper.find('.breadcrumb-lunatic').children()).toHaveLength(2);
-	});
-});
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Breadcrumb } from 'components';
+
+describe('breadcrumb', () => {
+	it('renders without crashing', () => {
+		shallow(<Breadcrumb elements={[]} />);
+	});
+	it('renders with elements', () => {
+		const wrapper = shallow(<Breadcrumb elements={['One', 'Two']} />);
+		expect(wrapper.find('.breadcrumb-lunatic').children()).toHaveLength(2);
+	});
+});

package/src/tests/components/button.spec.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Button } from 'components';
-
-describe('button', () => {
-	const onClick = jest.fn();
-
-	it('renders without crashing', () => {
-		shallow(<Button value="Button" onClick={onClick} />);
-	});
-});
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Button } from 'components';
+
+describe('button', () => {
+	const onClick = jest.fn();
+
+	it('renders without crashing', () => {
+		shallow(<Button value="Button" onClick={onClick} />);
+	});
+});

package/src/tests/components/checkbox-boolean.spec.js

@@ -1,45 +1,45 @@
-import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { fakeSchedulers } from 'rxjs-marbles/jest';
-import { CheckboxBoolean } from 'components';
-
-describe('checkbox-boolean', () => {
-	const handleChange = jest.fn();
-	const defaultProps = { id: 'id', label: '', handleChange };
-
-	it('renders without crashing', () => {
-		shallow(<CheckboxBoolean {...defaultProps} />);
-	});
-
-	it('returns management component', () => {
-		shallow(<CheckboxBoolean {...defaultProps} label="label" management />);
-	});
-
-	it('returns disabled component', () => {
-		shallow(<CheckboxBoolean {...defaultProps} label="label" disabled />);
-	});
-
-	it('renders firing useEffect', () => {
-		const wrapper = mount(<CheckboxBoolean {...defaultProps} />);
-		wrapper.setProps({ focused: true });
-	});
-
-	it('test VERTICAL positioning', () => {
-		shallow(<CheckboxBoolean {...defaultProps} positioning="VERTICAL" />);
-	});
-
-	it('should trigger the change event', () => {
-		fakeSchedulers((advance) => {
-			const wrapper = shallow(<CheckboxBoolean {...defaultProps} />);
-			wrapper.find('input').simulate('change', {
-				target: {
-					checked: true,
-				},
-			});
-			advance(400);
-			wrapper.update();
-			expect(handleChange).toHaveBeenCalled();
-			expect(handleChange).toHaveBeenCalledWith({ '': true });
-		});
-	});
-});
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { fakeSchedulers } from 'rxjs-marbles/jest';
+import { CheckboxBoolean } from 'components';
+
+describe('checkbox-boolean', () => {
+	const handleChange = jest.fn();
+	const defaultProps = { id: 'id', label: '', handleChange };
+
+	it('renders without crashing', () => {
+		shallow(<CheckboxBoolean {...defaultProps} />);
+	});
+
+	it('returns management component', () => {
+		shallow(<CheckboxBoolean {...defaultProps} label="label" management />);
+	});
+
+	it('returns disabled component', () => {
+		shallow(<CheckboxBoolean {...defaultProps} label="label" disabled />);
+	});
+
+	it('renders firing useEffect', () => {
+		const wrapper = mount(<CheckboxBoolean {...defaultProps} />);
+		wrapper.setProps({ focused: true });
+	});
+
+	it('test VERTICAL positioning', () => {
+		shallow(<CheckboxBoolean {...defaultProps} positioning="VERTICAL" />);
+	});
+
+	it('should trigger the change event', () => {
+		fakeSchedulers((advance) => {
+			const wrapper = shallow(<CheckboxBoolean {...defaultProps} />);
+			wrapper.find('input').simulate('change', {
+				target: {
+					checked: true,
+				},
+			});
+			advance(400);
+			wrapper.update();
+			expect(handleChange).toHaveBeenCalled();
+			expect(handleChange).toHaveBeenCalledWith({ '': true });
+		});
+	});
+});