@inseefr/lunatic 0.2.61 → 0.3.1-experimental

package/src/stories/suggester/data.json

@@ -0,0 +1,136 @@
+{
+	"suggesters": [
+		{
+			"name": "naf-rev2",
+			"url": "https://inseefr.github.io/Lunatic/storybook/naf-rev2.json",
+			"fields": [
+				{
+					"name": "label",
+					"rules": ["[\\w]+"],
+					"language": "French",
+					"synonyms": { "saint": ["st"] },
+					"min": 2
+				},
+				{ "name": "id" }
+			],
+			"queryParser": {
+				"type": "tokenized",
+				"params": { "language": "French", "pattern": "[\\w.]+", "min": 1 }
+			},
+			"version": "1"
+		},
+		{
+			"name": "cog-communes",
+			"url": "https://inseefr.github.io/Lunatic/storybook/communes-2019.json",
+			"fields": [
+				{ "name": "label", "rules": "soft" },
+				{ "name": "nccenr", "rules": "soft" },
+				{ "name": "id", "rules": "soft" }
+			],
+			"order": { "type": "ascending", "field": "label" },
+			"queryParser": { "type": "soft" },
+			"version": "1"
+		},
+		{
+			"name": "bailleurs-sociaux",
+			"url": "https://inseefr.github.io/Lunatic/storybook/bailleurs-sociaux.json",
+			"fields": [
+				{
+					"name": "libelle1",
+					"rules": ["[\\w]+"],
+					"language": "French",
+					"synonyms": { "st": ["saint"] },
+					"stemmer": false
+				},
+				{
+					"name": "libelle2",
+					"rules": ["[\\w]+"],
+					"language": "French",
+					"synonyms": { "st": ["saint"] },
+					"stemmer": false
+				},
+				{ "name": "code" }
+			],
+			"queryParser": {
+				"type": "tokenized",
+				"params": { "language": "French", "pattern": "[\\w]+", "min": "1" }
+			},
+			"stopWords": ["de", "la", "les", "du", "et", "au", "aux", "en"],
+			"max": 12,
+			"version": "1"
+		}
+	],
+	"components": [
+		{
+			"id": "sugg",
+			"componentType": "Suggester",
+			"mandatory": false,
+			"label": "Naf rev. 2",
+			"path": "data/cities",
+			"storeName": "naf-rev2",
+			"response": {
+				"name": "CITY"
+			}
+		},
+		{
+			"id": "sugg-communes",
+			"componentType": "Suggester",
+			"mandatory": false,
+			"label": "French municipalities",
+			"path": "data/communes",
+			"storeName": "cog-communes",
+			"response": {
+				"name": "COMMUNES"
+			}
+		},
+		{
+			"id": "bailleurs-sociaux",
+			"componentType": "Suggester",
+			"mandatory": false,
+			"label": "Bailleurs sociaux",
+			"path": "data/bailleurs",
+			"storeName": "bailleurs-sociaux",
+			"response": {
+				"name": "BAILLEURS"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "CITY",
+			"componentRef": "sugg",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "COMMUNES",
+			"componentRef": "sugg-communes",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "BAILLEURS",
+			"componentRef": "bailleurs-sociaux",
+			"values": {
+				"PREVIOUS": "123",
+				"COLLECTED": "123",
+				"FORCED": "123",
+				"EDITED": "123",
+				"INPUTED": "123"
+			}
+		}
+	]
+}

package/src/stories/suggester/naf-rev2/fetch-naf.js

@@ -0,0 +1,57 @@
+/**
+ * The way to fetch data. Each entity have an ID!
+ * It for dealing with the append worker.
+ * It also could be paged web service.
+ */
+async function fetchNaf(path = '') {
+	const sbPath =
+		process.env.NODE_ENV === 'development'
+			? `${path}/naf-rev2.json`
+			: `/Lunatic/storybook/naf-rev2.json`;
+	const response = await fetch(sbPath);
+	const naf = await response.json();
+	return naf;
+}
+
+// function splitArray(array, size = 100) {
+// 	return array
+// 		.reduce(
+// 			function (stack, entity) {
+// 				const [last, ...other] = stack;
+// 				if (last.length < size) {
+// 					return [[...last, entity], ...other];
+// 				}
+// 				return [[entity], last, ...other];
+// 			},
+// 			[[]]
+// 		)
+// 		.reverse();
+// }
+
+// const createNextPage = (pages) => (index) => {
+// 	if (index < pages.length - 1) {
+// 		return {
+// 			entities: pages[index],
+// 			next: async () => createNextPage(pages)(index + 1),
+// 		};
+// 	}
+// 	return { entities: pages[index] };
+// };
+
+/**
+ * Mock REST service.
+ * @param {} path
+ */
+// export async function createFetchNafPaged(path) {
+// 	const naf = await fetchNaf(path);
+// 	const pages = splitArray(naf).map(function (e) {
+// 		const { code: id } = e;
+// 		return { ...e, id };
+// 	});
+
+// 	return function () {
+// 		return createNextPage(pages)(0);
+// 	};
+// }
+
+export default fetchNaf;

package/src/stories/suggester/naf-rev2/index.js

@@ -0,0 +1,2 @@
+export { default as fetch, createFetchNafPaged } from './fetch-naf';
+export { default as OptionRenderer } from './option-naf-renderer';

package/src/stories/suggester/naf-rev2/option-naf-renderer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import classnames from 'classnames';
+import './theme.scss';
+
+function OptionNafRenderer({ option, selected }) {
+	const { label, code, niveau } = option;
+	return (
+		<div className={classnames('naf-option', { selected })}>
+			<span className={classnames('code', niveau)} title={`${niveau} ${code}`}>
+				{code}
+			</span>
+			<span className="label">{label}</span>
+		</div>
+	);
+}
+
+export default OptionNafRenderer;

package/src/stories/suggester/naf-rev2/theme.scss

@@ -0,0 +1,36 @@
+.naf-option {
+	white-space: nowrap;
+	overflow: hidden;
+
+	&.selected {
+		background-color: darkred;
+		.libelle {
+			color: honeydew;
+		}
+	}
+
+	.id {
+		color: snow;
+		text-align: center;
+		padding: 2px 4px;
+		border-radius: 3px;
+		width: 50px;
+		display: inline-block;
+
+		&.division {
+			background-color: olive;
+		}
+		&.section {
+			background-color: firebrick;
+		}
+		&.groupe {
+			background-color: royalblue;
+		}
+		&.classe {
+			background-color: sandybrown;
+		}
+		&.sous-classe {
+			background-color: darkorchid;
+		}
+	}
+}

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

@@ -0,0 +1,179 @@
+import React, { useCallback, useState } from 'react';
+import { storiesOf } from '@storybook/react';
+import { clearDb, openOnCreateDb, insertEntity } from '../../utils/idb-tools';
+import { CONSTANTES } from '../../utils/store-tools';
+import append from '../../utils/suggester-workers/append-to-index';
+import searching from '../../utils/suggester-workers/searching';
+
+const stories = storiesOf('Suggester/workers', module);
+
+function fetchCog() {
+	return fetch('/communes-2019.json').then((r) => r.json());
+}
+
+function fetchNaf() {
+	return fetch('naf-rev2.json').then((r) => r.json());
+}
+
+async function fetchBailleurs(path = '') {
+	const response = await fetch('/bailleurs-sociaux.json');
+	const naf = await response.json();
+	return naf.map(function (bailleur) {
+		const { code, libelle1 } = bailleur;
+
+		return { ...bailleur, id: code, label: libelle1, value: code };
+	});
+}
+
+const infoCog = {
+	name: 'cog-communes',
+	fields: [
+		{ name: 'label', rules: 'soft' },
+		{ name: 'nccenr', rules: 'soft' },
+		{ name: 'id', rules: 'soft' },
+	],
+	queryParser: { type: 'soft' },
+	version: '1',
+	display: 'label',
+	order: { type: 'ascending', field: 'label' },
+};
+
+const bailleursSociaux = {
+	name: 'bailleurs-sociaux',
+	fields: [
+		{
+			name: 'libelle1',
+			rules: ['[\\w]+'],
+			language: 'French',
+			stemmer: false,
+			synonyms: { st: ['saint'], ste: ['sainte'] },
+		},
+		{
+			name: 'libelle2',
+			rules: ['[\\w]+'],
+			language: 'French',
+			stemmer: false,
+			synonyms: { saint: ['st'], sainte: ['ste'] },
+		},
+		{ name: 'code' },
+	],
+	queryParser: {
+		type: 'tokenized',
+		params: { language: 'French', pattern: '[\\w]+', min: '1', stemmer: false },
+	},
+	max: 10,
+	version: '1',
+};
+
+const infoNaf = {
+	name: 'naf-rev2',
+	fields: [
+		{
+			name: 'label',
+			rules: ['[\\w]+'],
+			language: 'French',
+			min: 3,
+		},
+		{ name: 'id' },
+	],
+	queryParser: {
+		type: 'tokenized',
+		params: { language: 'French', pattern: '[\\w.]+' },
+	},
+	version: '1',
+};
+
+async function loadCog() {
+	const { name } = infoCog;
+	const communes = await fetchCog();
+	const db = await openOnCreateDb(name);
+	await clearDb(db, CONSTANTES.STORE_DATA_NAME);
+	await clearDb(db, CONSTANTES.STORE_INFO_NAME);
+	await append(infoCog, '1', communes, console.log);
+	await insertEntity(db, CONSTANTES.STORE_INFO_NAME, infoCog);
+}
+
+async function loadBailleurs() {
+	const { name } = bailleursSociaux;
+	const communes = await fetchBailleurs();
+	const db = await openOnCreateDb(name);
+	await clearDb(db, CONSTANTES.STORE_DATA_NAME);
+	await clearDb(db, CONSTANTES.STORE_INFO_NAME);
+	await append(bailleursSociaux, '1', communes, console.log);
+	await insertEntity(db, CONSTANTES.STORE_INFO_NAME, bailleursSociaux);
+}
+
+async function loadNaf() {
+	const { name } = infoNaf;
+	const rubriques = await fetchNaf();
+	const db = await openOnCreateDb(name);
+	await clearDb(db, CONSTANTES.STORE_DATA_NAME);
+	await clearDb(db, CONSTANTES.STORE_INFO_NAME);
+	await append(infoNaf, '1', rubriques, console.log);
+	await insertEntity(db, CONSTANTES.STORE_INFO_NAME, infoNaf);
+}
+
+function Search({ storeInfo, version = '1', max = 30, defaultValue = '' }) {
+	const { name, order } = storeInfo;
+	const [value, setValue] = useState(defaultValue);
+	const onClick = useCallback(
+		function () {
+			async function doIt() {
+				const results = await searching(value, {
+					name,
+					version,
+					max,
+					order,
+				});
+				console.log(results);
+			}
+			if (value.length) {
+				doIt();
+			}
+		},
+		[value, name, version, max]
+	);
+	return (
+		<>
+			<input
+				type="search"
+				value={value}
+				onChange={(e) => setValue(e.target.value)}
+			/>
+			<input type="button" onClick={onClick} value="Search!" />
+		</>
+	);
+}
+
+stories.addWithJSX('Default', () => {
+	return (
+		<>
+			<p>
+				Only for DEV purpose ! Juste pour tester l'intégration du code des
+				workers et faciliter leur mise à jour. Le chargement ne passe pas par
+				les web workers pour permettre le debug.
+			</p>
+			<ul
+				style={{ listStyleType: 'none', margin: 0, padding: 0, border: 'none' }}
+			>
+				<li>
+					<input type="button" value="load COG" onClick={loadCog} />
+					<Search storeInfo={infoCog} defaultValue="paris" />
+				</li>
+				<li></li>
+				<li>
+					<input type="button" value="load NAF" onClick={loadNaf} />
+					<Search storeInfo={infoNaf} defaultValue="culture du tabac" />
+				</li>
+				<li>
+					<input
+						type="button"
+						value="load bailleurs sociaux"
+						onClick={loadBailleurs}
+					/>
+					<Search storeInfo={bailleursSociaux} defaultValue="123" />
+				</li>
+			</ul>
+		</>
+	);
+});

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

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

package/src/stories/table/README.md

@@ -1,23 +1,29 @@
-# Table component
-
-## Props
-
-|      Props      |  Type  | Default value | Required | Description                           |
-| :-------------: | :----: | :-----------: | :------: | ------------------------------------- |
-|       id        | string |       -       |    ✓     | Id of the table                       |
-|      label      | string |      ""       |          | Label of the table                    |
-| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage table response  |
-|    cells \*     | array  |      []       |          | Table cells                           |
-|  handleChange   |  func  |       -       |    ✓     | Handler of the table                  |
-|      lines      | object |      {}       |          | Min and max lines for evolutive table |
-| declarations \* | array  |      []       |          | Declarations of the table             |
-|     tooltip     |  bool  |     false     |          | Tooltip of the table                  |
-|      style      | object |      {}       |          | Style of the table                    |
-
-- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
-- `cells` props has to be an array of array's components
-- `declarations` are documented in the `Declarations` component
-
-## Styles
-
-**Table** component has for class `table-lunatic`.
+# Table component
+
+## Props
+
+|      Props      |  Type  | Default value | Required | Description                           |
+| :-------------: | :----: | :-----------: | :------: | ------------------------------------- |
+|       id        | string |       -       |    ✓     | Id of the table                       |
+|      label      | string |      ""       |          | Label of the table                    |
+| preferences \*  | array  | ["COLLECTED"] |          | Preferences to manage table response  |
+|    cells \*     | array  |      []       |          | Table cells                           |
+|  handleChange   |  func  |       -       |    ✓     | Handler of the table                  |
+|      lines      | object |      {}       |          | Min and max lines for evolutive table |
+| declarations \* | array  |      []       |          | Declarations of the table             |
+|    features     | array  |      [ ]      |          | Component features for labels         |
+|    bindings     | object |      [ ]      |          | Questionnaire bindings                |
+| positioning \*  | string |   "DEFAULT"   |          | Cell options positioning              |
+|   addBtnLabel   | string | "Add a line"  |          | Label of the button to add lines      |
+|     hideBtn     |  bool  |     false     |          | Hide the add button                   |
+|   management    |  bool  |     false     |          | Management mode of the table          |
+|      style      | object |      {}       |          | Style of the table                    |
+
+- `preferences` props has to be an ordered array of `COLLECTED`, `FORCED` or `EDITED`
+- `cells` props has to be an array of array's components
+- `positioning` props has to be one of `DEFAULT`, `HORIZONTAL` or `VERTICAL`
+- `declarations` are documented in the `Declarations` component
+
+## Styles
+
+**Table** component has for class `table-lunatic`.

package/src/stories/table/data-default.json

@@ -0,0 +1,19 @@
+{
+	"components": [
+		{
+			"id": "j6p29i81",
+			"componentType": "Table",
+			"mandatory": false,
+			"cells": [
+				[
+					{ "label": "" },
+					{ "label": "Header 1", "headerCell": true },
+					{ "label": "Header 2", "headerCell": true }
+				],
+				[{ "label": "Line 1" }, { "label": "Cell 11" }, { "label": "Cell 12" }],
+				[{ "label": "Line 2" }, { "label": "Cell 21" }, { "label": "Cell 22" }],
+				[{ "label": "Line 3" }, { "label": "Cell 31" }, { "label": "Cell 32" }]
+			]
+		}
+	]
+}