@inseefr/lunatic 0.1.7 → 0.1.8-experimental

package/src/stories/textarea/textarea.stories.js

@@ -0,0 +1,68 @@
+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 dataForced from './data-forced';
+import { labelPositionOptions, featuresOptions } from '../utils/options';
+import {
+	text,
+	boolean,
+	number,
+	object,
+	select,
+} from '@storybook/addon-knobs/react';
+
+const stories = storiesOf('Textarea', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Textarea />" />;
+	});
+
+stories.addWithJSX('Default', () => (
+	<Orchestrator id="default" source={data} />
+));
+
+stories.addWithJSX('Props', () => (
+	<Orchestrator
+		id="props"
+		source={data}
+		label={text('Label', '"Hello " || NAME')}
+		missing={boolean('Missing', false)}
+		placeholder={text('Placeholder', 'Placeholder')}
+		rows={number('Rows', 5)}
+		maxLength={number('Max length', 500)}
+		readOnly={boolean('Read only', false)}
+		mandatory={boolean('Mandatory', false)}
+		features={select('Features', featuresOptions, ['VTL', 'MD'])}
+		bindings={object('Bindings', { NAME: 'Mauro' })}
+		management={boolean('Management', false)}
+		focused={boolean('Focused', false)}
+		labelPosition={select('Label position', labelPositionOptions, 'DEFAULT')}
+	/>
+));
+
+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 />;
+});

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

@@ -0,0 +1,14 @@
+# TooltipResponse component
+
+## Props
+
+|    Props    |  Type  | Default value | Required | Description             |
+| :---------: | :----: | :-----------: | :------: | ----------------------- |
+|     id      | string |       -       |    ✓     | Id of the               |
+| response \* | string |      " "      |          | Response of the tooltip |
+
+- `response` props has to be a shape of `{name: string, values: object}`
+
+## Styles
+
+**TooltipResponse** component has for classes `tooltip-lunatic`.

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

@@ -0,0 +1,31 @@
+{
+	"components": [
+		{
+			"id": "uu",
+			"componentType": "Radio",
+			"mandatory": false,
+			"label": "NAME || \", êtes-vous au [chômage](https://www.insee.fr/fr/metadonnees/definition/c1303) ?\"",
+			"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/md-tooltip.json

@@ -0,0 +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
+			}
+		}
+	]
+}

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

@@ -0,0 +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)}
+	/>
+));

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

@@ -0,0 +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;
+}

package/src/stories/utils/img/check_box.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>

package/src/stories/utils/img/check_box_outline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/src/stories/utils/img/menu-down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24" fill="rgba(0, 0, 0, 0.54)"><path d="M7,10L12,15L17,10H7Z" /></svg>

package/src/stories/utils/img/menu-up.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7,15L12,10L17,15H7Z" /></svg>

package/src/stories/utils/img/radio_button_checked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

package/src/stories/utils/img/radio_button_unchecked.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="rgb(74,118,168)"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

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

package/src/stories/utils/orchestrator.js

@@ -0,0 +1,108 @@
+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;

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

@@ -0,0 +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);
+	});
+});

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

@@ -1,57 +1,45 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
+import { fakeSchedulers } from 'rxjs-marbles/jest';
 import { CheckboxBoolean } from 'components';
 
 describe('checkbox-boolean', () => {
-	const onChange = jest.fn();
+	const handleChange = jest.fn();
+	const defaultProps = { id: 'id', label: '', handleChange };
 
 	it('renders without crashing', () => {
-		shallow(<CheckboxBoolean id="id" label={''} handleChange={onChange} />);
+		shallow(<CheckboxBoolean {...defaultProps} />);
 	});
 
-	it('test state changes', () => {
-		const wrapper = shallow(
-			<CheckboxBoolean id="id" label="label" handleChange={onChange} />
-		);
-		expect(wrapper.state(['checked'])).toBeFalsy();
-		wrapper.setState({ checked: true });
-		expect(wrapper.state(['checked'])).toBeTruthy();
-		wrapper.setState({ checked: false });
-		expect(wrapper.state(['checked'])).toBeFalsy();
+	it('returns management component', () => {
+		shallow(<CheckboxBoolean {...defaultProps} label="label" management />);
 	});
 
-	it('test init checked', () => {
-		const wrapper = shallow(
-			<CheckboxBoolean
-				id="id"
-				value="1"
-				label={'label'}
-				handleChange={onChange}
-			/>
-		);
-		expect(wrapper.state(['checked'])).toBeTruthy();
+	it('returns disabled component', () => {
+		shallow(<CheckboxBoolean {...defaultProps} label="label" disabled />);
 	});
 
-	it('test handler', () => {
-		const wrapper = shallow(
-			<CheckboxBoolean id="id" label="label" handleChange={onChange} />
-		);
-		// Select first checkbox
-		wrapper.find('.checkbox-lunatic').simulate('change');
-		expect(wrapper.state(['checked'])).toBeTruthy();
-		// Change selected checkbox
-		wrapper.find('.checkbox-lunatic').simulate('change');
-		expect(wrapper.state(['checked'])).toBeFalsy();
+	it('renders firing useEffect', () => {
+		const wrapper = mount(<CheckboxBoolean {...defaultProps} />);
+		wrapper.setProps({ focused: true });
 	});
 
 	it('test VERTICAL positioning', () => {
-		shallow(
-			<CheckboxBoolean
-				id="id"
-				label={'label'}
-				handleChange={onChange}
-				positioning="VERTICAL"
-			/>
-		);
+		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 });
+		});
 	});
 });

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { fakeSchedulers } from 'rxjs-marbles/jest';
+import { CheckboxGroup } from 'components';
+
+describe('checkbox-group', () => {
+	const handleChange = jest.fn();
+	const responses = [
+		{
+			id: '1',
+			response: { name: 'a', values: { COLLECTED: true } },
+			label: 'France',
+		},
+		{
+			id: '2',
+			response: { name: 'b', values: { COLLECTED: false } },
+			label: 'Italy',
+		},
+	];
+	const defaultProps = { id: 'id', handleChange, responses };
+
+	it('returns management component', () => {
+		shallow(<CheckboxGroup {...defaultProps} management />);
+	});
+
+	it('returns disabled component', () => {
+		shallow(<CheckboxGroup {...defaultProps} label="label" disabled />);
+	});
+
+	it('renders firing useEffect', () => {
+		const wrapper = mount(<CheckboxGroup {...defaultProps} />);
+		wrapper.setProps({ focused: true });
+	});
+
+	it('should trigger the change event', () => {
+		fakeSchedulers((advance) => {
+			const wrapper = shallow(<CheckboxGroup {...defaultProps} />);
+			wrapper
+				.find('input')
+				.first()
+				.simulate('change', {
+					target: {
+						checked: false,
+					},
+				});
+			advance(400);
+			wrapper.update();
+			expect(handleChange).toHaveBeenCalled();
+			/*Cause specificHandler*/
+			expect(handleChange).toHaveBeenCalledWith({ a: null });
+		});
+	});
+});

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

@@ -1,50 +1,32 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import { CheckboxOne } from 'components';
 
-describe('checkbox-one', () => {
-	const onChange = jest.fn();
-	const options = [
-		{ value: 'france', label: 'France' },
-		{ value: 'italy', label: 'Italy' },
-	];
+const handleChange = jest.fn();
+const options = [
+	{ value: 'france', label: 'France' },
+	{ value: 'italy', label: 'Italy' },
+];
+const response = { values: { COLLECTED: 'italy' } };
+
+const defaultProps = {
+	id: 'id',
+	label: 'label',
+	handleChange,
+	options,
+	response,
+};
 
+describe('checkbox-one', () => {
 	it('renders without crashing', () => {
-		shallow(<CheckboxOne id={''} handleChange={onChange} options={options} />);
+		mount(<CheckboxOne {...defaultProps} />);
 	});
 
-	it('test state changes', () => {
-		const wrapper = shallow(
-			<CheckboxOne id="id" handleChange={onChange} options={options} />
-		);
-		expect(wrapper.state(['selectedValue'])).toBe('');
-		wrapper.setState({ selectedValue: 'france' });
-		expect(wrapper.state(['selectedValue'])).toBe('france');
-		wrapper.setState({ selectedValue: 'italy' });
-		expect(wrapper.state(['selectedValue'])).toBe('italy');
+	it('returns management component', () => {
+		shallow(<CheckboxOne {...defaultProps} management />);
 	});
 
-	it('test handler', () => {
-		const wrapper = shallow(
-			<CheckboxOne id="id" handleChange={onChange} options={options} />
-		);
-		// Select first checkbox
-		wrapper
-			.find('.checkbox-lunatic')
-			.first()
-			.simulate('change');
-		expect(wrapper.state(['selectedValue'])).toBe('france');
-		// Change selected checkbox
-		wrapper
-			.find('.checkbox-lunatic')
-			.at(1)
-			.simulate('change');
-		expect(wrapper.state(['selectedValue'])).toBe('italy');
-		// Cancel selected checkbox
-		wrapper
-			.find('.checkbox-lunatic')
-			.at(1)
-			.simulate('change');
-		expect(wrapper.state(['selectedValue'])).toBe('');
+	it('returns disabled component', () => {
+		shallow(<CheckboxOne {...defaultProps} label="label" disabled />);
 	});
 });

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Datepicker } from 'components';
+
+const handleChange = jest.fn();
+const defaultProps = {
+	id: 'id',
+	label: 'label',
+	handleChange,
+};
+
+describe('datepicker', () => {
+	it('renders without crashing', () => {
+		shallow(<Datepicker {...defaultProps} />);
+	});
+	it('returns management component', () => {
+		shallow(<Datepicker {...defaultProps} label="label" management />);
+	});
+	it('returns disabled & readOnly component', () => {
+		shallow(<Datepicker {...defaultProps} label="label" disabled readOnly />);
+	});
+});