@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

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.stories.js

@@ -0,0 +1,78 @@
+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 { boolean, select, object } from '@storybook/addon-knobs/react';
+import { positioningOptions, featuresOptions } from '../utils/options';
+import SwitchMaterialUI from './SwitchMaterialUI';
+
+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 { components } = data;
+	const customized = components.map(function (component) {
+		const { componentType } = component;
+		if (componentType === 'Switch') {
+			return { ...component, custom: SwitchMaterialUI };
+		}
+		return component;
+	});
+	return (
+		<Orchestrator
+			source={{ ...data, components: customized }}
+			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)}
+		/>
+	);
+});

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

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

@@ -1,18 +1,41 @@
-import React from 'react';
+import React, { memo } from 'react';
 import * as lunatic from 'components';
 import './custom-lunatic.scss';
+import Waiting from './waiting';
 
 function getStoreInfoRequired() {
 	return {};
 }
 
-const OrchestratorForStories = ({
+function Pager({ goNext, goPrevious, isLast, isFirst, pageTag, maxPage }) {
+	if (maxPage && maxPage > 1) {
+		const Button = lunatic.Button;
+		return (
+			<>
+				<div className="pagination">
+					<Button onClick={goPrevious} disabled={isFirst}>
+						Previous
+					</Button>
+					<Button onClick={goNext} disabled={isLast}>
+						Next
+					</Button>
+				</div>
+				<div>PAGE: {pageTag}</div>
+			</>
+		);
+	}
+	return null;
+}
+
+const DEFAULT_DATA = {};
+const DEFAULT_FEATURES = ['VTL'];
+
+function OrchestratorForStories({
 	source,
-	suggesters,
-	data = {},
+	data = DEFAULT_DATA,
 	management = false,
-	pagination = false,
-	features = ['VTL'],
+	modalForControls = false,
+	features = DEFAULT_FEATURES,
 	bindings: initialBindings,
 	initialPage = '1',
 	getStoreInfo = getStoreInfoRequired,
@@ -21,88 +44,158 @@ const OrchestratorForStories = ({
 	activeGoNextForMissing = false,
 	suggesterFetcher,
 	autoSuggesterLoading,
+	addExternal,
 	...rest
-}) => {
+}) {
 	const preferences = management
 		? ['COLLECTED', 'FORCED', 'EDITED']
 		: ['COLLECTED'];
 	const savingType = management ? 'EDITED' : 'COLLECTED';
+	const { maxPage } = source;
 	const {
+		getComponents,
+		goNextPage,
+		goPreviousPage,
 		handleChange,
-		components,
-		bindings,
-		pagination: {
-			goNext,
-			goPrevious,
-			page,
-			setPage,
-			maxPage,
-			isFirstPage,
-			isLastPage,
-			flow,
-		},
-	} = lunatic.useLunatic(source, data, {
-		suggesters,
-		savingType,
-		preferences,
-		features,
-		management,
-		pagination,
+		pageTag,
+		isFirstPage,
+		isLastPage,
+		executeExpression,
+		waiting,
+	} = lunatic.useLunatic({
+		source,
+		data,
 		initialPage,
-		suggesterFetcher,
-		autoSuggesterLoading,
+		features,
 	});
-	const Button = lunatic.Button;
 
-	const missingStrategy = (b) => goNext(null, b);
+	const components = getComponents();
 
 	return (
 		<div className="container">
 			<div className="components">
-				{components.map((q) => {
-					const { id, componentType } = q;
+				{components.map(function (component) {
+					const { id, componentType, response, ...other } = component;
 					const Component = lunatic[componentType];
-					const { storeName } = q;
-
 					return (
 						<div className="lunatic lunatic-component" key={`component-${id}`}>
 							<Component
+								id={id}
+								response={response}
+								{...other}
 								{...rest}
-								{...q}
-								{...getStoreInfo(storeName)}
+								{...component}
 								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}
+								executeExpression={executeExpression}
 							/>
 						</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>
-				</>
-			)}
+			<Pager
+				goNext={goNextPage}
+				goPrevious={goPreviousPage}
+				isLast={isLastPage}
+				isFirst={isFirstPage}
+				pageTag={pageTag}
+				maxPage={maxPage}
+			/>
+			<Waiting status={waiting}>
+				<div className="waiting-orchestrator">
+					Initialisation des données de suggestion...
+				</div>
+			</Waiting>
 		</div>
 	);
-};
 
-export default OrchestratorForStories;
+	// /* */
+	// const {
+	// 	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 memo(OrchestratorForStories);

package/src/stories/utils/waiting/index.js

@@ -0,0 +1 @@
+export { default } from './waiting';

package/src/stories/utils/waiting/preloader.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><g><circle cx="16" cy="64" r="16" fill="#000"/><circle cx="16" cy="64" r="16" fill="#555" transform="rotate(45,64,64)"/><circle cx="16" cy="64" r="16" fill="#949494" transform="rotate(90,64,64)"/><circle cx="16" cy="64" r="16" fill="#ccc" transform="rotate(135,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(180,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(225,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(270,64,64)"/><circle cx="16" cy="64" r="16" fill="#e1e1e1" transform="rotate(315,64,64)"/><animateTransform attributeName="transform" type="rotate" values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64" calcMode="discrete" dur="720ms" repeatCount="indefinite"></animateTransform></g></svg>

package/src/stories/utils/waiting/waiting.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './waiting.scss';
+import preloader from './preloader.svg';
+
+function Waiting({ status, children }) {
+	if (status) {
+		return (
+			<div className="waiting">
+				<img src={preloader} alt="loading" />
+				<div className="content">{children}</div>
+			</div>
+		);
+	}
+	return null;
+}
+
+Waiting.defaultProps = {
+	status: false,
+};
+
+export default React.memo(Waiting);

package/src/stories/utils/waiting/waiting.scss

@@ -0,0 +1,21 @@
+.waiting {
+	display: block;
+	position: fixed;
+	height: 100%;
+	width: 100%;
+	background-color: rgba(23, 59, 77, 0.8);
+	top: 0;
+	img {
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+		width: 10%;
+		margin-top: 120px;
+	}
+	.content {
+		display: block;
+		width: fit-content;
+		margin-left: auto;
+		margin-right: auto;
+	}
+}

package/src/tests/sample.spec.js

@@ -0,0 +1,5 @@
+describe('sample', () => {
+	it('add fake test to avoid test script bug', () => {
+		expect(true).toBeTruthy();
+	});
+});

package/src/utils/icons/checkbox-checked.icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function CheckboxCheckedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<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>
+		</LunaticIcon>
+	);
+}
+
+export default CheckboxCheckedIcon;

package/src/utils/icons/checkbox-unchecked.icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function CheckboxUncheckedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<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>
+		</LunaticIcon>
+	);
+}
+
+export default CheckboxUncheckedIcon;

package/src/utils/icons/radio-checked.icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function RadioCheckedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<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>
+		</LunaticIcon>
+	);
+}
+
+export default RadioCheckedIcon;

package/src/utils/icons/radio-unchecked.icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function RadioUncheckedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<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>
+		</LunaticIcon>
+	);
+}
+
+export default RadioUncheckedIcon;

package/src/utils/lib/controls/index.js

@@ -0,0 +1 @@
+export * from './utils';