@inseefr/lunatic 0.2.63 → 0.3.0-prisme

package/src/stories/subsequence/subsequence.stories.js

@@ -1,46 +1,32 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Subsequence } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import { text, number, color, object } from '@storybook/addon-knobs/react';
-
-const stories = storiesOf('Subsequence', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Subsequence />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Subsequence id="default" label="Label of my subsequence" />
-));
-
-stories.addWithJSX('Props', () => (
-	<Subsequence id="props" label={text('Label', 'Label of my subsequence')} />
-));
-
-stories.addWithJSX('Styled', () => (
-	<Subsequence
-		id="styled"
-		label={text('Label', 'Label of my subsequence')}
-		style={object('Generated style', {
-			color: color('Color', 'white'),
-			'background-color': color('Background color', '#e80a4d'),
-			'border-color': color('Border color', '#e80a4d'),
-			'border-width': number('Border-width', 0, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 0, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-	/>
-));
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withReadme } from 'storybook-readme';
+import { Subsequence } from 'components';
+import readme from './README.md';
+import { titleDecorator } from 'utils/lib';
+import { featuresOptions } from '../utils/options';
+import { text, object, select } from '@storybook/addon-knobs/react';
+
+const stories = storiesOf('Subsequence', module)
+	.addDecorator(withReadme(readme))
+	.addDecorator((Component) => {
+		const WrappedComponent = titleDecorator(Component);
+		return <WrappedComponent title="<Subsequence />" />;
+	});
+
+stories.addWithJSX('Default', () => (
+	<div className="lunatic-component">
+		<Subsequence id="default" label="Label of my subsequence" />
+	</div>
+));
+
+stories.addWithJSX('Props', () => (
+	<div className="lunatic-component">
+		<Subsequence
+			id="props"
+			label={text('Label', '"Label of my subsequence: " || test')}
+			features={select('Features', featuresOptions, ['VTL', 'MD'])}
+			bindings={object('Bindings', { test: 'test' })}
+		/>
+	</div>
+));

package/src/stories/suggester/README.md

@@ -0,0 +1,46 @@
+# Suggester component
+
+## Props
+
+|      Props       |  Type  |              Default value               | Required | Description                              |
+| :--------------: | :----: | :--------------------------------------: | :------: | ---------------------------------------- |
+|        id        | string |                    -                     |    ✓     | Id of the suggester                      |
+|      label       | string |                    ""                    |          | Fieldset label of the suggester          |
+|  preferences \*  | array  |              ["COLLECTED"]               |          | Preferences to manage suggester response |
+|   response \*    | object |                    {}                    |          | Response concerned by the component      |
+| placeholderList  | string |                    ""                    |          | Placeholder of the suggester             |
+|   handleChange   |  func  |                    -                     |    ✓     | Handler of the suggester                 |
+|     disabled     |  bool  |                  false                   |          | Is the suggester options disabled        |
+|     focused      |  bool  |                  false                   |          | Is the suggester options focused         |
+| declarations \*  | array  |                    []                    |          | Declarations of the suggester            |
+|     features     | array  |                   [ ]                    |          | Component features for labels            |
+|     bindings     | object |                   [ ]                    |          | Questionnaire bindings                   |
+|    management    |  bool  |                  false                   |          | Management mode of the suggester         |
+| labelPosition \* | string |                "DEFAULT"                 |          | Position of the input label              |
+|       path       | string |                    -                     |    ✓     | Path to data into indexdb                |
+|     style \*     | object | { fieldsetStyle: {}, modalityStyle: {} } |          | Style of the suggester                   |
+
+- `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}`
+- `labelPosition` props has to be one of `DEFAULT`, `TOP`, `BOTTOM`, `RIGHT` or `LEFT`
+- `declarations` are documented in the `Declarations` component
+
+## Styles
+
+**Suggester** component has for classes XXX.
+
+## Json-lunatic store-info
+
+{
+suggester: { [name] : {
+name,
+fields: [{ name: string, rules: [regexp]|'soft'|undefined, language: string|undefined, stemmer: boolean, min: integer }],
+queryParser:
+{type: 'soft'}|
+{type:'tokenized', params: { language: string, rules: [regexp]|undefined, stemmer: boolean|undefined },
+stopWords: [string]|undefined,
+order: { type: 'ascending'|'descending', field: string }|undefined,
+version: string
+}
+} , ...
+}

package/src/stories/suggester/bailleurs-sociaux/fetch-bailleurs.js

@@ -0,0 +1,15 @@
+async function fetchBailleurs(path = '') {
+	const sbPath =
+		process.env.NODE_ENV === 'development'
+			? `${path}/bailleurs-sociaux.json`
+			: `/Lunatic/storybook/bailleurs-sociaux.json`;
+	const response = await fetch(sbPath);
+	const naf = await response.json();
+	return naf.map(function (bailleur) {
+		const { code, libelle1 } = bailleur;
+
+		return { ...bailleur, id: code, label: libelle1, value: code };
+	});
+}
+
+export default fetchBailleurs;

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

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

package/src/stories/suggester/bailleurs-sociaux/option-bailleur-renderer.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import classnames from 'classnames';
+import findBestLabel from '../../../components/suggester/find-best-label';
+import './theme.scss';
+
+function getLabel(option, attribut) {
+	const { libelle1, libelle2, code } = option;
+	switch (attribut) {
+		case 'libelle2':
+			return `${code} - ${libelle2}`;
+		case 'libelle1':
+		case 'code':
+			return `${code} - ${libelle1}`;
+		default:
+			return ``;
+	}
+}
+
+function OptionBailleurRenderer({ option, selected, search }) {
+	const { typorg } = option;
+	const [computed, setComputed] = useState(false);
+	const [attribut, setAttribut] = useState(undefined);
+
+	useEffect(
+		function () {
+			let unmount = false;
+			async function doIt() {
+				const best = await findBestLabel(option, search);
+				if (!unmount) {
+					setAttribut(best);
+					setComputed(true);
+				}
+			}
+
+			doIt();
+
+			return function () {
+				unmount = true;
+			};
+		},
+		[option, search]
+	);
+
+	return (
+		<div
+			className={classnames('option-bailleur', `type-${typorg}`, {
+				selected,
+				computed,
+			})}
+		>
+			<span className={classnames('bailleur-label', {})} title={attribut}>
+				{getLabel(option, attribut)}
+			</span>
+		</div>
+	);
+}
+
+export default OptionBailleurRenderer;

package/src/stories/suggester/bailleurs-sociaux/preloader.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(30 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(60 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(120 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(150 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(210 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(240 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(300 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(330 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#fe718d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>

package/src/stories/suggester/bailleurs-sociaux/theme.scss

@@ -0,0 +1,22 @@
+.option-bailleur {
+	white-space: nowrap;
+	overflow: hidden;
+	background-image: url('./preloader.svg');
+	background-repeat: no-repeat;
+	background-size: 16px 16px;
+	background-color: gray; 
+	color: snow;
+
+	&.computed {
+		background-color: transparent; 
+		background-image:none;
+		color: black;
+
+	}
+
+	&.selected {
+		.bailleur-label {
+			color: goldenrod;
+		}
+	}
+}

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/cog-communes/fetch-cog.js

@@ -0,0 +1,15 @@
+async function fetchCOG(path = '') {
+	const sbPath =
+		process.env.NODE_ENV === 'development'
+			? `${path}/communes-2019.json`
+			: `/Lunatic/storybook/communes-2019.json`;
+	const response = await fetch(sbPath);
+	const cog = await response.json();
+
+	return cog.map(({ label, ...rest }) => ({
+		label,
+		...rest,
+	}));
+}
+
+export default fetchCOG;

package/src/stories/suggester/cog-communes/index.js

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

package/src/stories/suggester/cog-communes/option-cog-renderer.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classnames from 'classnames';
+import './theme.scss';
+
+function OptionCogRenderer({ option, selected }) {
+	const { label, id } = option;
+	return (
+		<div className={classnames('cog-option', { selected })}>
+			<span className="id">{id}</span>
+			<span className="label">{label}</span>
+		</div>
+	);
+}
+
+export default OptionCogRenderer;

package/src/stories/suggester/cog-communes/theme.scss

@@ -0,0 +1,12 @@
+.cog-option {
+	&.selected {
+		background-color: goldenrod;
+		.libelle {
+			color: darkgreen;
+		}
+	}
+	.id {
+		color: snow;
+		background-color: darkred;
+	}
+}

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

@@ -0,0 +1,232 @@
+{
+	"maxPage": "4",
+	"suggesters": [
+		{
+			"name": "naf-rev2",
+			"fields": [
+				{
+					"name": "label",
+					"rules": ["[\\w]+"],
+					"language": "French",
+					"min": 2
+				},
+				{ "name": "id" }
+			],
+			"queryParser": {
+				"type": "tokenized",
+				"params": { "language": "French", "pattern": "[\\w.]+" }
+			},
+			"version": "1"
+		},
+		{
+			"name": "naf-rev2-stop",
+			"fields": [
+				{
+					"name": "label",
+					"rules": ["[\\w]+"],
+					"language": "French",
+					"min": 2
+				},
+				{ "name": "id" }
+			],
+			"queryParser": {
+				"type": "tokenized",
+				"params": { "language": "French", "pattern": "[\\w.]+" }
+			},
+			"version": "1"
+		},
+		{
+			"name": "cog-communes",
+			"fields": [
+				{ "name": "label", "rules": "soft" },
+				{ "name": "nccenr", "rules": "soft" },
+				{ "name": "id", "rules": "soft" }
+			],
+			"queryParser": { "type": "soft" },
+			"version": "1"
+		}
+	],
+	"components": [
+		{
+			"id": "nn",
+			"componentType": "InputNumber",
+			"mandatory": false,
+			"min": 1,
+			"max": 4,
+			"decimals": 0,
+			"label": "Number of inhabitants",
+			"conditionFilter": { "value": "true" },
+			"response": {
+				"name": "NUM"
+			},
+			"page": "1"
+		},
+		{
+			"id": "idLoop",
+			"label": "boucle individu",
+			"componentType": "Loop",
+			"iterations": "cast(NUM, integer)",
+			"paginatedLoop": false,
+			"conditionFilter": { "value": "true" },
+			"loopDependencies": ["NUM"],
+			"bindingDependencies": ["PRENOM", "NUM"],
+			"page": "2",
+			"components": [
+				{
+					"id": "k3ym6x16",
+					"label": "Prénom :",
+					"componentType": "Input",
+					"conditionFilter": { "value": "true" },
+					"mandatory": false,
+					"bindingDependencies": ["PRENOM"],
+					"response": {
+						"name": "PRENOM"
+					},
+					"page": "2"
+				}
+			]
+		},
+		{
+			"id": "idLoopInd",
+			"label": "boucle individu",
+			"componentType": "Loop",
+			"iterations": "count(PRENOM)",
+			"paginatedLoop": true,
+			"conditionFilter": { "value": "true" },
+			"loopDependencies": ["PRENOM"],
+			"bindingDependencies": ["PRENOM", "NAF", "NAF_STOP", "CITY"],
+			"page": "3",
+			"maxPage": "3",
+			"components": [
+				{
+					"id": "k3ym61vfzzzzzzzzzzzz",
+					"componentType": "Sequence",
+					"label": "\"Questionnaire de : \" || PRENOM",
+					"conditionFilter": {
+						"value": "not(isnull(PRENOM))",
+						"bindingDependencies": ["PRENOM"]
+					},
+					"bindingDependencies": ["PRENOM"],
+					"page": "3.1"
+				},
+				{
+					"id": "sugg1",
+					"componentType": "Suggester",
+					"mandatory": false,
+					"label": "PRENOM || \" what's your favorite NAF code? (default stop words)\"",
+					"storeName": "naf-rev2",
+					"bindingDependencies": ["PRENOM", "NAF"],
+					"conditionFilter": {
+						"value": "not(isnull(PRENOM))",
+						"bindingDependencies": ["PRENOM"]
+					},
+					"response": {
+						"name": "NAF"
+					},
+					"page": "3.2"
+				},
+				{
+					"id": "sugg2",
+					"componentType": "Suggester",
+					"mandatory": false,
+					"label": "PRENOM || \" what's your favorite NAF code? (without stop words)\"",
+					"storeName": "naf-rev2-stop",
+					"bindingDependencies": ["PRENOM", "NAF_STOP"],
+					"conditionFilter": {
+						"value": "not(isnull(PRENOM))",
+						"bindingDependencies": ["PRENOM"]
+					},
+					"response": {
+						"name": "NAF_STOP"
+					},
+					"page": "3.2"
+				},
+				{
+					"id": "sugg-communes",
+					"componentType": "Suggester",
+					"mandatory": false,
+					"label": "PRENOM || \" what's your favorite city?\"",
+					"storeName": "cog-communes",
+					"conditionFilter": {
+						"value": "not(isnull(PRENOM))",
+						"bindingDependencies": ["PRENOM"]
+					},
+					"bindingDependencies": ["PRENOM", "CITY"],
+					"response": {
+						"name": "CITY"
+					},
+					"page": "3.3"
+				}
+			]
+		},
+		{
+			"id": "kk",
+			"componentType": "Sequence",
+			"label": "END",
+			"conditionFilter": { "value": "true" },
+			"page": "4"
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NUM",
+			"componentRef": "nn",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "PRENOM",
+			"componentRef": "idLoop",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTED": [null]
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "NAF",
+			"componentRef": "idLoopInd",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTED": [null]
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "NAF_STOP",
+			"componentRef": "idLoopInd",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTED": [null]
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "CITY",
+			"componentRef": "idLoopInd",
+			"values": {
+				"PREVIOUS": [null],
+				"COLLECTED": [null],
+				"FORCED": [null],
+				"EDITED": [null],
+				"INPUTED": [null]
+			}
+		}
+	]
+}

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

@@ -0,0 +1,82 @@
+{
+	"suggesters": [
+		{
+			"name": "naf-rev2",
+			"fields": [
+				{
+					"name": "label",
+					"rules": ["[\\w]+"],
+					"language": "French",
+					"min": 3
+				},
+				{ "name": "id" }
+			],
+			"queryParser": {
+				"type": "tokenized",
+			 	"params": { "language": "French", "pattern": "[\\w.]+" }
+			},
+			"version": "1"
+		},
+		{
+			"name": "cog-communes",
+			"fields": [
+				{ "name": "label", "rules": "soft" },
+				{ "name": "nccenr", "rules": "soft" },
+				{ "name": "id", "rules": "soft" }
+			],
+			"queryParser": { "type": "soft" },
+			"version": "1",
+			"display": "label"
+		}
+	],
+	"components": [
+		{
+			"id": "sugg",
+			"componentType": "Suggester",
+			"mandatory": false,
+			"label": "Enjoy the suggester below",
+			"path": "data/cities",
+			"storeName": "naf-rev2",
+			"response": {
+				"name": "CITY"
+			}
+		},
+		{
+			"id": "sugg-communes",
+			"componentType": "Suggester",
+			"mandatory": false,
+			"label": "Enjoy the suggester below",
+			"path": "data/communes",
+			"storeName": "cog-communes",
+			"response": {
+				"name": "COMMUNES"
+			}
+		}
+	],
+	"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
+			}
+		}
+	]
+}