@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

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

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { storiesOf } from '@storybook/react';
 import Orchestrator from '../utils/orchestrator';
 import { titleDecorator } from 'utils/lib';
 import calcVar from './calc-var';
 import logement from './logement';
+import logementQueen from './logement-queen';
 import logementS2 from './logement-s2';
 import logementSequence from './logement-sequence';
-import dataLogement from './data-logement.json';
+import dataLogement from './data-logement';
 import simpsons from './simpsons';
 import arithmetic from './arithmetic';
+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';
 
@@ -32,18 +35,20 @@ def.addWithJSX('Calculated Variables', () => (
 	/>
 ));
 
-def.addWithJSX('Logement', () => (
-	<Orchestrator
-		id="props"
-		source={logement}
-		missing={boolean('Missing', false)}
-		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('Logement', function () {
+	return (
+		<Orchestrator
+			id="props"
+			source={logement}
+			missing={boolean('Missing', false)}
+			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', () => (
 	<Orchestrator
@@ -89,21 +94,42 @@ paginated.addWithJSX('Calculated Variables', () => (
 	/>
 ));
 
-paginated.addWithJSX('Logement', () => (
-	<Orchestrator
-		id="props"
-		source={logement}
-		data={dataLogement}
-		missing={boolean('Missing', false)}
-		activeGoNextForMissing={boolean('Active go next for missing', false)}
-		features={select('Features', featuresOptions, ['VTL', 'MD'])}
-		positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
-		disabled={boolean('Disabled', false)}
-		focused={boolean('Focused', false)}
-		management={boolean('Management', false)}
-		pagination
-	/>
-));
+paginated.addWithJSX('Logement', function () {
+	return (
+		<Orchestrator
+			id="props"
+			source={logement}
+			data={dataLogement}
+			missing={boolean('Missing', false)}
+			activeGoNextForMissing={boolean('Active go next for missing', false)}
+			features={select('Features', featuresOptions, ['VTL', 'MD'])}
+			positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+			disabled={boolean('Disabled', false)}
+			focused={boolean('Focused', false)}
+			management={boolean('Management', false)}
+			pagination
+			modalForControls
+		/>
+	);
+});
+
+paginated.addWithJSX('Logement - Queen', function () {
+	return (
+		<Orchestrator
+			id="props"
+			source={logementQueen}
+			data={dataLogement}
+			missing={boolean('Missing', false)}
+			activeGoNextForMissing={boolean('Active go next for missing', false)}
+			features={select('Features', featuresOptions, ['VTL', 'MD'])}
+			positioning={select('Items positioning', positioningOptions, 'DEFAULT')}
+			disabled={boolean('Disabled', false)}
+			focused={boolean('Focused', false)}
+			management={boolean('Management', false)}
+			pagination
+		/>
+	);
+});
 
 paginated.addWithJSX('Logement - Sequence', () => (
 	<Orchestrator
@@ -152,3 +178,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/bailleurs-sociaux-2021/fetch-bailleurs.js

@@ -0,0 +1,12 @@
+const FILE_NAME = 'bailleurs-sociaux-2021.json';
+
+async function fetchBailleurs(path = '') {
+	const sbPath =
+		process.env.NODE_ENV === 'development'
+			? `${path}/${FILE_NAME}`
+			: `/Lunatic/storybook/${FILE_NAME}`;
+	const response = await fetch(sbPath);
+	return response.json();
+}
+
+export default fetchBailleurs;

package/src/stories/suggester/bailleurs-sociaux-2021/index.js

@@ -0,0 +1 @@
+export { default as fetch } from './fetch-bailleurs';

package/src/stories/suggester/data-auto.json

@@ -55,6 +55,7 @@
 			"max": 4,
 			"decimals": 0,
 			"label": "Number of inhabitants",
+			"conditionFilter": { "value": "true" },
 			"response": {
 				"name": "NUM"
 			},

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" }
@@ -58,7 +61,26 @@
 			"stopWords": ["de", "la", "les", "du", "et", "au", "aux", "en"],
 			"max": 12,
 			"version": "1"
-		}
+		},{
+			"name": "bailleurs-sociaux-2021",
+			"fields": [
+			  {
+				"name": "label",
+				"rules": ["[\\w]+"],
+				"stemmer": true,
+				"synonyms": [{ "source": "saint", "target": ["st"] }]
+			  },
+	  
+			  { "name": "id" }
+			],
+			"max": 12,
+			"stopWords": ["de", "la", "les", "du", "et", "au", "aux", "en"],
+			"queryParser": {
+			  "type": "tokenized",
+			  "params": { "language": "French", "min": 1, "pattern": "[\\w]+" }
+			},
+			"version": "1"
+		  }
 	],
 	"components": [
 		{
@@ -93,6 +115,17 @@
 			"response": {
 				"name": "BAILLEURS"
 			}
+		},
+		{
+			"id": "bailleurs-sociaux-2021",
+			"componentType": "Suggester",
+			"mandatory": false,
+			"label": "Bailleurs sociaux 2021",
+			"path": "data/bailleurs-2021",
+			"storeName": "bailleurs-sociaux-2021",
+			"response": {
+				"name": "BAILLEURS"
+			}
 		}
 	],
 	"variables": [

package/src/stories/suggester/lunatic-suggester-mui.scss

@@ -0,0 +1,27 @@
+.lunatic-suggester-mui {
+	position: relative;
+	height: 37px;
+	margin-bottom: 18px;
+
+	.lunatic-suggester-mui-content {
+		position: absolute;
+		top: 0;
+		left: 0;
+
+		.lunatic-suggester-mui-selection {
+			z-index: 0;
+		}
+
+		.lunatic-suggester-mui-panel {
+			background-color: snow;
+			opacity: 1;
+			z-index: 10;
+
+			.lunatic-suggester-mui-option {
+				&.selected {
+					background-color: yellow;
+				}
+			}
+		}
+	}
+}

package/src/stories/suggester/suggester-material-ui.js

@@ -0,0 +1,148 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react';
+import classnames from 'classnames';
+import TextField from '@mui/material/TextField';
+import IconButton from '@mui/material/IconButton';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Stack from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import useDocumentAddEventListener from '../../utils/to-expose/hooks/use-document-add-event-listener';
+import './lunatic-suggester-mui.scss';
+
+function SuggesterContainer({
+	children,
+	onBlur,
+	onFocus,
+	onKeyDown,
+	labelledBy,
+}) {
+	const handleClickAway = useCallback(
+		function (e) {
+			onBlur();
+		},
+		[onBlur]
+	);
+
+	return (
+		<ClickAwayListener onClickAway={handleClickAway}>
+			<>{children}</>
+		</ClickAwayListener>
+	);
+	// const ref = useRef();
+
+	// const onClick = useCallback(
+	// 	function (e) {
+	// 		const { current } = ref;
+	// 		if (!current.contains(e.target)) {
+	// 			onBlur();
+	// 		}
+	// 	},
+	// 	[ref, onBlur]
+	// );
+
+	// useDocumentAddEventListener('mousedown', onClick);
+
+	// return (
+	// 	<div
+	// 		className="lunatic-suggester-mui"
+	// 		ref={ref}
+	// 		onFocus={onFocus}
+	// 		onBlur={onBlur}
+	// 		onKeyDown={onKeyDown}
+	// 	>
+	// 		<div className="lunatic-suggester-mui-content">{children}</div>
+	// 	</div>
+	// );
+}
+
+function Selection({ search, onChange }) {
+	return (
+		<TextField
+			value={search}
+			onChange={onChange}
+			className="lunatic-suggester-mui-selection"
+		/>
+	);
+}
+
+function OptionMUI({ label, id, selected }) {
+	return (
+		<MenuItem
+			className={classnames('lunatic-suggester-mui-option', { selected })}
+		>
+			<Stack direction="row" spacing={1} alignItems="center">
+				<Typography>{id}</Typography>
+				<Typography>{label}</Typography>
+			</Stack>
+		</MenuItem>
+	);
+}
+
+function Panel({ options, expended, selectedIndex }) {
+	console.log({ options, expended });
+	if (Array.isArray(options) && options.length && expended) {
+		const items = options.map(function (option, index) {
+			const { label, id } = option;
+			const selected = index === selectedIndex;
+			return <OptionMUI key={id} id={id} label={label} selected={selected} />;
+		});
+		return (
+			<Paper>
+				<MenuList className="lunatic-suggester-mui-panel">{items}</MenuList>
+			</Paper>
+		);
+	}
+	return null;
+}
+
+function SuggesterMaterialUI({
+	className,
+	placeholderList,
+	labelledBy,
+	optionRenderer,
+	labelRenderer,
+	onSelect,
+	onBlur,
+	onDelete,
+	onKeyDown,
+	onChange,
+	onClickOption,
+	value,
+	onFocus,
+	disabled,
+	id,
+	messageError,
+	search,
+	focused,
+	options,
+	expended,
+	selectedIndex,
+	displayLabel,
+}) {
+	const onChangeEx = useCallback(
+		function (e) {
+			onChange(e.target.value);
+		},
+		[onChange]
+	);
+
+	return (
+		<SuggesterContainer
+			onBlur={onBlur}
+			onFocus={onFocus}
+			onKeyDown={onKeyDown}
+			labelledBy={labelledBy}
+		>
+			<Selection search={search} onChange={onChangeEx} />
+			<Panel
+				options={options}
+				expended={expended}
+				selectedIndex={selectedIndex}
+			/>
+		</SuggesterContainer>
+	);
+}
+
+export default SuggesterMaterialUI;

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

@@ -15,6 +15,10 @@ function fetchNaf() {
 	return fetch('naf-rev2.json').then((r) => r.json());
 }
 
+function fetchBailleurs2021() {
+	return fetch('bailleurs-sociaux-2021.json').then((r) => r.json());
+}
+
 async function fetchBailleurs(path = '') {
 	const response = await fetch('/bailleurs-sociaux.json');
 	const naf = await response.json();
@@ -53,7 +57,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' },
 	],
@@ -83,6 +90,27 @@ const infoNaf = {
 	version: '1',
 };
 
+const infoBailleurs2021 = {
+	name: 'bailleurs-sociaux-2021',
+	fields: [
+		{
+			name: 'label',
+			rules: ['[\\w]+'],
+			stemmer: false,
+			synonyms: [{ source: 'saint', target: ['st'] }],
+		},
+
+		{ name: 'id' },
+	],
+	max: 12,
+	stopWords: ['de', 'la', 'les', 'du', 'et', 'au', 'aux', 'en'],
+	queryParser: {
+		type: 'tokenized',
+		params: { language: 'French', min: 1, pattern: '[\\w]+' },
+	},
+	version: '1',
+};
+
 async function loadCog() {
 	const { name } = infoCog;
 	const communes = await fetchCog();
@@ -103,6 +131,16 @@ async function loadBailleurs() {
 	await insertEntity(db, CONSTANTES.STORE_INFO_NAME, bailleursSociaux);
 }
 
+async function loadBailleurs2021() {
+	const { name } = infoBailleurs2021;
+	const bailleurs = await fetchBailleurs2021();
+	const db = await openOnCreateDb(name);
+	await clearDb(db, CONSTANTES.STORE_DATA_NAME);
+	await clearDb(db, CONSTANTES.STORE_INFO_NAME);
+	await append(infoBailleurs2021, '1', bailleurs, console.log);
+	await insertEntity(db, CONSTANTES.STORE_INFO_NAME, infoBailleurs2021);
+}
+
 async function loadNaf() {
 	const { name } = infoNaf;
 	const rubriques = await fetchNaf();
@@ -173,6 +211,15 @@ stories.addWithJSX('Default', () => {
 					/>
 					<Search storeInfo={bailleursSociaux} defaultValue="123" />
 				</li>
+
+				<li>
+					<input
+						type="button"
+						value="load bailleurs sociaux 2021"
+						onClick={loadBailleurs2021}
+					/>
+					<Search storeInfo={infoBailleurs2021} defaultValue="" />
+				</li>
 			</ul>
 		</>
 	);

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

@@ -13,7 +13,8 @@ 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';
+import SuggesterMaterialUI from './suggester-material-ui';
 /**
  *
  */
@@ -24,6 +25,8 @@ function getSuggesterInfo(name) {
 		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 {};
@@ -39,6 +42,8 @@ function getWidgetLoaderInfo(name) {
 		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 {};
@@ -131,3 +136,24 @@ storiesAuto.addWithJSX('Default', () => (
 		pagination
 	/>
 ));
+
+stories.addWithJSX('Custom suggester', function () {
+	const { components } = data;
+	const customized = components.map(function (component) {
+		const { componentType } = component;
+		if (componentType === 'Suggester') {
+			return { ...component, custom: SuggesterMaterialUI };
+		}
+		return component;
+	});
+
+	return (
+		<Orchestrator
+			id="default"
+			source={{ ...data, components: customized }}
+			suggesterFetcher={suggesterFetcher}
+			autoSuggesterLoading
+			pagination
+		/>
+	);
+});

package/src/stories/switch/README.md

@@ -0,0 +1,31 @@
+# CheckboxOne component
+
+## Props
+
+|      Props      |  Type  |              Default value               | Required | Description                             |
+| :-------------: | :----: | :--------------------------------------: | :------: | --------------------------------------- |
+|       id        | string |                    -                     |    ✓     | Id of the checkbox                      |
+|      label      | string |                    ""                    |          | Fieldset label of the checkbox          |
+| preferences \*  | array  |              ["COLLECTED"]               |          | Preferences to manage checkbox response |
+|   response \*   | object |                    {}                    |          | Response concerned by the component     |
+|   options \*    | array  |                    -                     |    ✓     | Options of the checkbox                 |
+|  handleChange   |  func  |                    -                     |    ✓     | Handler of the checkbox                 |
+|    disabled     |  bool  |                  false                   |          | Is the checkbox options disabled        |
+|     focused     |  bool  |                  false                   |          | Is the checkbox options focused         |
+| positioning \*  | string |                "DEFAULT"                 |          | Checkbox options positioning            |
+| declarations \* | array  |                    []                    |          | Declarations of the checkbox            |
+|    features     | array  |                   [ ]                    |          | Component features for labels           |
+|    bindings     | object |                   [ ]                    |          | Questionnaire bindings                  |
+|   management    |  bool  |                  false                   |          | Management mode of the checkbox         |
+|    style \*     | object | { fieldsetStyle: {}, modalityStyle: {} } |          | Style of the checkbox                   |
+
+- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
+- `response` props has to be a shape of `{name: string, values: object}`
+- `options` props has to be an array made by objects with a shape of `{label: string, value: string}`
+- `positioning` props has to be one of `DEFAULT`, `HORIZONTAL` or `VERTICAL`
+- `declarations` are documented in the `Declarations` component
+- `style` props has to be composed of `fieldsetStyle` and `modalityStyle`
+
+## Styles
+
+**CheckboxOne** component has for classes `checkbox-group-list`, `checkbox-modality` and `checkbox-lunatic`.

package/src/stories/switch/SwitchMaterialUI.js

@@ -0,0 +1,35 @@
+import React, { useCallback } from 'react';
+import Switch from '@mui/material/Switch';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+function SwitchMaterialUI({
+	checked,
+	disabled,
+	handleChange,
+	statusLabel,
+	labelId,
+}) {
+	const onClick = useCallback(
+		function () {
+			handleChange(!checked);
+		},
+		[checked, handleChange]
+	);
+
+	const { true: trueStatus, false: falseStatue } = statusLabel;
+	return (
+		<Stack direction="row" spacing={1} alignItems="center">
+			<Typography>{falseStatue}</Typography>
+			<Switch
+				checked={checked}
+				onClick={onClick}
+				disabled={disabled}
+				inputProps={{ 'aria-labelledby': labelId, 'aria-checked': checked }}
+			/>
+			<Typography>{trueStatus}</Typography>
+		</Stack>
+	);
+}
+
+export default SwitchMaterialUI;