@inseefr/lunatic 0.2.61 → 0.3.1-experimental

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.2.61",
+	"version": "0.3.1-experimental",
+	"workersVersion": "0.2.1-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {
 		"type": "git",
@@ -8,6 +9,14 @@
 	},
 	"author": "INSEE (http://www.insee.fr)",
 	"contributor": [
+		{
+			"name": "Laurent Caouissin",
+			"email": "laurent.caouissin@agriculture.gouv.fr"
+		},
+		{
+			"name": "Renaud Genevois",
+			"email": "renaud.genevois@insee.fr"
+		},
 		{
 			"name": "Nicolas Laval",
 			"email": "nicolas.laval@insee.fr"
@@ -24,10 +33,15 @@
 		"test": "cross-env NODE_PATH=src/ jest",
 		"test-watch": "cross-env NODE_PATH=src/ jest --watchAll",
 		"test-coverage": "cross-env NODE_PATH=src/ jest --coverage",
-		"start-storybook": "cross-env NODE_PATH=src/ start-storybook -p 9999",
+		"storybook": "cross-env NODE_PATH=src/ start-storybook -s ./public -p 9999",
 		"build-storybook": "cross-env NODE_PATH=src/ build-storybook -o built-storybook/storybook",
 		"build": "rollup -c rollup.config.js",
-		"prepublish": "npm test && npm run build"
+		"prepublish": "npm test && npm run build",
+		"analyze": "yarn build && source-map-explorer lib/index.js --html bundle-report/lunatic.html",
+		"build-append-worker": "webpack --config ./webpack-append-worker.config.js",
+		"build-searching-worker": "webpack --config ./webpack-searching-worker.config.js",
+		"build-label-worker": "webpack --config ./webpack-label-worker.config.js",
+		"build-workers": "yarn build-append-worker && yarn build-searching-worker && yarn build-label-worker"
 	},
 	"keywords": [
 		"react",
@@ -36,62 +50,88 @@
 		"library"
 	],
 	"dependencies": {
+		"@inseefr/trevas": "^0.1.10",
+		"date-fns": "^2.25.0",
 		"lodash.camelcase": "^4.3.0",
-		"prop-types": "^15.6.0",
-		"react": "^16.8.6",
-		"react-dom": "^16.8.6"
+		"lodash.debounce": "^4.0.8",
+		"lodash.isequal": "^4.5.0",
+		"prop-types": "^15.7.2",
+		"react-keyboard-event-handler": "^1.5.4",
+		"react-markdown": "^5.0.3",
+		"react-tooltip": "^4.2.15",
+		"remove-accents": "^0.4.2",
+		"sass": "^1.32.2"
 	},
 	"devDependencies": {
-		"@storybook/addon-knobs": "^3.4.11",
-		"@storybook/addon-options": "^3.4.11",
-		"@storybook/addon-viewport": "^3.4.11",
-		"@storybook/react": "^3.4.11",
-		"babel-cli": "^6.26.0",
-		"babel-core": "^6.26.3",
-		"babel-eslint": "^10.0.2",
-		"babel-plugin-external-helpers": "^6.22.0",
-		"babel-plugin-transform-class-properties": "^6.24.1",
-		"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
-		"babel-plugin-transform-object-rest-spread": "^6.26.0",
-		"babel-preset-env": "^1.7.0",
-		"babel-preset-react": "^6.24.1",
-		"babel-register": "^6.26.0",
+		"@babel/core": "^7.9.0",
+		"@babel/plugin-proposal-class-properties": "^7.7.4",
+		"@babel/plugin-syntax-dynamic-import": "^7.7.4",
+		"@babel/plugin-transform-modules-commonjs": "^7.9.0",
+		"@babel/plugin-transform-react-jsx": "^7.9.0",
+		"@babel/plugin-transform-runtime": "^7.15.0",
+		"@babel/preset-env": "^7.9.5",
+		"@babel/preset-react": "^7.9.0",
+		"@storybook/addon-a11y": "^5.2.8",
+		"@storybook/addon-knobs": "^5.2.8",
+		"@storybook/addon-options": "^5.2.8",
+		"@storybook/addon-viewport": "^5.2.8",
+		"@storybook/react": "^5.2.8",
+		"@testing-library/react-hooks": "^7.0.0",
+		"@timdp/rollup-plugin-image": "^1.0.3",
+		"@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
+		"babel-eslint": "^10.0.3",
+		"babel-loader": "^8.0.6",
 		"classnames": "^2.2.5",
-		"coveralls": "^3.0.2",
-		"cross-env": "^5.2.0",
-		"css-loader": "^0.28.9",
+		"core-js": "^3.17.3",
+		"cross-env": "^7.0.2",
+		"css-loader": "^5.0.0",
+		"damerau-levenshtein": "^1.0.7",
 		"enzyme": "^3.7.0",
-		"enzyme-adapter-react-16": "^1.6.0",
-		"eslint": "5.6.0",
-		"eslint-config-prettier": "^3.1.0",
-		"eslint-config-react-app": "^2.1.0",
-		"eslint-plugin-flowtype": "^2.50.1",
-		"eslint-plugin-import": "^2.14.0",
+		"eslint": "7.30.0",
+		"eslint-config-prettier": "^7.2.0",
+		"eslint-config-react-app": "^6.0.0",
+		"eslint-plugin-flowtype": "^5.2.0",
+		"eslint-plugin-import": "^2.19.1",
 		"eslint-plugin-jsx-a11y": "^6.1.1",
-		"eslint-plugin-react": "^7.11.1",
-		"file-loader": "^4.0.0",
-		"jest": "^22.4.0",
+		"eslint-plugin-react": "^7.17.0",
+		"eslint-plugin-react-hooks": "^4.0.8",
+		"file-loader": "^6.0.0",
+		"identity-obj-proxy": "^3.0.0",
+		"jest": "^27.0.6",
+		"jest-sonar-reporter": "^2.0.0",
 		"jest-transform-stub": "^2.0.0",
-		"node-sass": "^4.7.2",
-		"postcss-scss": "^1.0.3",
-		"prettier": "^1.14.3",
-		"rollup": "^0.66.6",
-		"rollup-plugin-babel": "^3.0.3",
-		"rollup-plugin-commonjs": "^8.3.0",
-		"rollup-plugin-image": "^1.0.2",
-		"rollup-plugin-node-resolve": "^3.0.3",
-		"rollup-plugin-postcss": "^1.2.8",
-		"rollup-plugin-replace": "^2.0.0",
-		"rollup-plugin-serve": "^0.4.2",
-		"rollup-plugin-terser": "^3.0.0",
-		"rollup-plugin-uglify": "^6.0.0",
+		"jsdom": "^16.6.0",
+		"jsdom-global": "^3.0.2",
+		"postcss": "^8.2.6",
+		"postcss-scss": "^3.0.4",
+		"prettier": "^2.0.5",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"regenerator-runtime": "^0.13.7",
+		"remove-accents": "^0.4.2",
+		"rollup": "^2.52.8",
+		"rollup-plugin-babel": "^4.3.3",
+		"rollup-plugin-babel-minify": "^10.0.0",
+		"rollup-plugin-commonjs": "^10.1.0",
+		"rollup-plugin-node-resolve": "^5.2.0",
+		"rollup-plugin-postcss": "^4.0.0",
+		"rollup-plugin-replace": "^2.2.0",
+		"rollup-plugin-serve": "^1.0.1",
+		"rollup-plugin-terser": "^7.0.1",
+		"rollup-plugin-uglify": "^6.0.3",
+		"rollup-plugin-url": "^3.0.1",
 		"rollup-watch": "^4.3.1",
-		"sass-loader": "^7.1.0",
-		"storybook-addon-a11y": "^3.1.9",
-		"storybook-addon-jsx": "^5.4.0",
-		"storybook-readme": "^4.0.0-beta1",
-		"style-loader": "^0.20.2",
-		"url-loader": "^0.6.2"
+		"rxjs-marbles": "^6.0.1",
+		"sass-loader": "^10.0.3",
+		"snowball": "^0.3.1",
+		"source-map-explorer": "^2.4.2",
+		"storybook-addon-jsx": "^7.2.3",
+		"storybook-readme": "^5.0.8",
+		"string-tokenizer": "^0.0.8",
+		"style-loader": "^2.0.0",
+		"url-loader": "^4.1.0",
+		"webpack": "^5.53.0",
+		"webpack-cli": "^4.8.0"
 	},
 	"jest": {
 		"collectCoverageFrom": [
@@ -101,13 +141,21 @@
 		],
 		"testURL": "http://localhost",
 		"moduleNameMapper": {
-			"^.+\\.(css|less|scss)$": "babel-jest"
+			"^.+\\.(css|less|scss)$": "identity-obj-proxy"
 		},
 		"transform": {
 			"^.+\\.js$": "babel-jest",
 			".+\\.(png|jpg)$": "jest-transform-stub"
 		},
-		"setupTestFrameworkScriptFile": "<rootDir>/src/tests/setup/setupTests.js"
+		"setupFilesAfterEnv": [
+			"<rootDir>/src/tests/setup/setupTests.js"
+		],
+		"coverageProvider": "v8",
+		"testResultsProcessor": "jest-sonar-reporter",
+		"coveragePathIgnorePatterns": [
+			"/node_modules/"
+		],
+		"testEnvironment": "jsdom"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -118,5 +166,8 @@
 		"useTabs": true,
 		"bracketSpacing": true,
 		"trailingComma": "es5"
+	},
+	"peerDependencies": {
+		"react": "^17.0.2"
 	}
 }

package/src/components/breadcrumb/breadcrumb.scss

@@ -1,22 +1,22 @@
-@import 'src/components/index.scss';
+.lunatic-component {
+	.breadcrumb-lunatic {
+		width: 100%;
+		height: 40px;
+		box-sizing: border-box;
+		border-radius: 0px;
+		background-color: var(--color-primary-light);
+		color: white;
+		font-weight: bold;
+		font-size: 130%;
+		padding-left: 10px;
+		display: flex;
+		align-items: center;
+	}
 
-.breadcrumb-lunatic {
-	width: 100%;
-	height: 40px;
-	box-sizing: border-box;
-	border-radius: 0px;
-	background-color: $main_color;
-	color: white;
-	font-weight: bold;
-	font-size: 130%;
-	padding-left: 10px;
-	display: flex;
-	align-items: center;
-}
-
-.breadcrumb-element-lunatic:before {
-	content: '>';
-	color: white;
-	margin-left: 0.4em;
-	margin-right: 0.4em;
+	.breadcrumb-element-lunatic:before {
+		content: '>';
+		color: white;
+		margin-left: 0.4em;
+		margin-right: 0.4em;
+	}
 }

package/src/components/breadcrumb/component.js

@@ -1,29 +1,29 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './breadcrumb.scss';
-
-const Breadcrumb = ({ elements, style }) => (
-	<div
-		aria-label={`breadcrumb`}
-		className="breadcrumb-lunatic"
-		style={buildStyleObject(style)}
-	>
-		{elements.map((e, i) => (
-			<React.Fragment key={`breadcrumb-${e.toLowerCase()}`}>
-				{e && (
-					<span className={i !== 0 ? 'breadcrumb-element-lunatic' : undefined}>
-						{e}
-					</span>
-				)}
-			</React.Fragment>
-		))}
-	</div>
-);
-
-Breadcrumb.propTypes = {
-	elements: PropTypes.arrayOf(PropTypes.string).isRequired,
-	style: PropTypes.object,
-};
-
-export default Breadcrumb;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { buildStyleObject } from '../../utils/lib';
+import './breadcrumb.scss';
+
+const Breadcrumb = ({ elements, style }) => (
+	<div
+		aria-label={`breadcrumb`}
+		className="breadcrumb-lunatic"
+		style={buildStyleObject(style)}
+	>
+		{elements.map((e, i) => (
+			<React.Fragment key={`breadcrumb-${e.toLowerCase()}`}>
+				{e && (
+					<span className={i !== 0 ? 'breadcrumb-element-lunatic' : undefined}>
+						{e}
+					</span>
+				)}
+			</React.Fragment>
+		))}
+	</div>
+);
+
+Breadcrumb.propTypes = {
+	elements: PropTypes.arrayOf(PropTypes.string).isRequired,
+	style: PropTypes.object,
+};
+
+export default Breadcrumb;

package/src/components/breadcrumb/index.js

@@ -1 +1 @@
-export { default } from './component';
+export { default } from './component';

package/src/components/button/button.scss

@@ -1,26 +1,24 @@
-@import 'src/components/index.scss';
-
-.button-lunatic {
-	width: 100%;
-	color: white;
-	border-color: $main_color;
-	background-color: $main_color;
-	font-size: 1.5em;
-	font-weight: bold;
-	padding: 0.4em;
-	&:hover,
-	&:focus:hover {
-		color: $main_color;
-		background-color: white;
-		border-color: $main_color;
-	}
-	&:focus {
-		outline: none;
-		background-color: $second_color;
-		border-color: $second_color;
-	}
-	&:disabled {
-		background: #dddddd;
-		color: $main_color;
-	}
-}
+.button-lunatic {
+	min-width: 20%;
+	color: white;
+	border-color: var(--color-primary-dark);
+	background-color: var(--color-primary-dark);
+	font-size: 1.5em;
+	font-weight: bold;
+	padding: 0.4em;
+	&:hover,
+	&:focus:hover {
+		color: var(--color-primary-dark);
+		background-color: white;
+		border-color: var(--color-primary-dark);
+	}
+	&:focus {
+		outline: none;
+		background-color: var(--color-primary-light);
+		border-color: var(--color-primary-light);
+	}
+	&:disabled {
+		background: var(--color-disabled);
+		color: var(--color-primary-dark);
+	}
+}

package/src/components/button/component.js

@@ -1,25 +1,53 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/lib';
-import './button.scss';
-
-const Button = ({ label, value, onClick, disabled, style }) => (
-	<button
-		type="button"
-		aria-label={label || 'button'}
-		className="button-lunatic"
-		style={buildStyleObject(style)}
-		disabled={disabled}
-		onClick={onClick}
-	>
-		{value}
-	</button>
-);
-
-Button.propTypes = {
-	value: PropTypes.string.isRequired,
-	disabled: PropTypes.bool,
-	onClick: PropTypes.func.isRequired,
-};
-
-export default Button;
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+	buildStyleObject,
+	createObjectEvent,
+	isFunction,
+} from '../../utils/lib';
+import './button.scss';
+import { BUTTON_CATEGORY, EVENT_CLICK } from '../../constants';
+
+const Button = ({
+	label,
+	value,
+	onClick,
+	disabled,
+	style,
+	logFunction,
+	id,
+}) => {
+	const handleClick = (e) => {
+		onClick(e);
+		if (isFunction(logFunction))
+			logFunction(
+				createObjectEvent(
+					`button-lunatic-${id}`,
+					BUTTON_CATEGORY,
+					EVENT_CLICK,
+					null,
+					label
+				)
+			);
+	};
+	return (
+		<button
+			type="button"
+			aria-label={label || 'button'}
+			className="button-lunatic"
+			style={buildStyleObject(style)}
+			disabled={disabled}
+			onClick={handleClick}
+		>
+			{value}
+		</button>
+	);
+};
+
+Button.propTypes = {
+	value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+	disabled: PropTypes.bool,
+	onClick: PropTypes.func.isRequired,
+};
+
+export default Button;

package/src/components/button/index.js

@@ -1 +1 @@
-export { default } from './component';
+export { default } from './component';

package/src/components/checkbox/boolean.js

@@ -1,9 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import componentWrapper from '../component-wrapper';
+import debounce from 'lodash.debounce';
 import Declarations from '../declarations';
+import Icon from '../icon';
 import { TooltipResponse } from '../tooltip';
 import * as U from '../../utils/lib';
-import * as C from '../../utils/constants';
+import * as C from '../../constants';
+import { interpret } from '../../utils/to-expose';
 import './checkbox.scss';
 
 const CheckboxBoolean = ({
@@ -11,62 +15,126 @@ const CheckboxBoolean = ({
 	label,
 	preferences,
 	response,
-	handleChange,
+	handleChange: propsHandleChange,
 	disabled,
 	positioning,
 	focused,
 	declarations,
-	tooltip,
+	features,
+	bindings,
+	management,
 	style,
+	logFunction,
 }) => {
 	const inputRef = useRef();
 
+	const [value, setValue] = useState(() =>
+		U.getResponseByPreference(preferences)(response)
+	);
+
+	const handleChange = debounce((obj) => propsHandleChange(obj), 50);
+
+	const specificHandleChange = (e) => {
+		const [key, value] = Object.entries(e)[0];
+		if (value === false && U.responseToClean(response)(preferences))
+			handleChange({ [key]: null });
+		else handleChange(e);
+	};
+
+	// Assume we only want to handle enable external updates
+	// Don't need to check all value changes
+	useEffect(() => {
+		if (U.getResponseByPreference(preferences)(response) !== value)
+			setValue(U.getResponseByPreference(preferences)(response));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [response, preferences]);
+
 	useEffect(() => {
 		if (focused) inputRef.current.focus();
 	}, [focused]);
 
+	const interpretedLabel = interpret(features, logFunction)(bindings)(label);
+
 	const isVertical = positioning === 'VERTICAL';
+	const isHorizontal = positioning === 'HORIZONTAL';
 	const input = (
-		<input
-			type="checkbox"
-			id={`checkbox-boolean-${id}`}
-			ref={inputRef}
-			title={label ? label : 'empty-label'}
-			className={`checkbox-lunatic${isVertical ? '-no-margin' : ''}`}
-			style={U.buildStyleObject(style)}
-			checked={U.getResponseByPreference(preferences)(response)}
-			disabled={disabled}
-			onChange={e => {
-				handleChange({
-					[U.getResponseName(response)]: e.target.checked,
-				});
-			}}
-		/>
+		<>
+			<Icon type="checkbox" checked={value} disabled={disabled}>
+				<input
+					type="checkbox"
+					id={`checkbox-boolean-${id}`}
+					ref={inputRef}
+					title={interpretedLabel ? interpretedLabel : 'empty-label'}
+					className={`checkbox-boolean-lunatic`}
+					style={U.buildStyleObject(style)}
+					checked={value || false}
+					disabled={disabled}
+					onChange={({ target: { checked } }) => {
+						setValue(checked);
+						specificHandleChange({
+							[U.getResponseName(response)]: checked,
+						});
+						if (U.isFunction(logFunction))
+							logFunction(
+								U.createObjectEvent(
+									`checkbox-boolean-${id}`,
+									C.INPUT_CATEGORY,
+									C.EVENT_SELECTION,
+									U.getResponseName(response),
+									checked
+								)
+							);
+					}}
+				/>
+				{interpretedLabel && (
+					<label htmlFor={`checkbox-boolean-${id}`}>
+						{isHorizontal ? interpretedLabel : ''}
+					</label>
+				)}
+			</Icon>
+		</>
 	);
 	return (
-		<div key={`checkbox-boolean-${id}`} className={`checkbox-modality`}>
+		<div key={`checkbox-boolean-${id}`} className={`checkbox-boolean-modality`}>
 			<Declarations
 				id={id}
 				type={C.BEFORE_QUESTION_TEXT}
 				declarations={declarations}
+				features={features}
+				bindings={bindings}
 			/>
-			{label && <label htmlFor={`checkbox-boolean-${id}`}>{label}</label>}
+			{label && !isHorizontal && (
+				<label htmlFor={`checkbox-boolean-${id}`}>
+					{interpret(features, logFunction)(bindings)(label)}
+				</label>
+			)}
 			<Declarations
 				id={id}
 				type={C.AFTER_QUESTION_TEXT}
 				declarations={declarations}
+				features={features}
+				bindings={bindings}
 			/>
 			<div className="field-container">
-				<div className={`${tooltip ? 'field-with-tooltip' : 'field'}`}>
+				<div className={`${management ? 'field-with-tooltip' : 'field'}`}>
 					{isVertical ? <div>{input}</div> : input}
 				</div>
-				{tooltip && (
+				{management && (
 					<div className="tooltip">
-						<TooltipResponse id={id} response={response} />
+						<TooltipResponse
+							id={id}
+							response={U.buildBooleanTooltipResponse(response)}
+						/>
 					</div>
 				)}
 			</div>
-			<Declarations id={id} type={C.DETACHABLE} declarations={declarations} />
+			<Declarations
+				id={id}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
 		</div>
 	);
 };
@@ -79,7 +147,9 @@ CheckboxBoolean.defaultProps = {
 	positioning: 'DEFAULT',
 	focused: false,
 	declarations: [],
-	tooltip: false,
+	features: [],
+	bindings: {},
+	management: false,
 	style: {},
 };
 
@@ -93,8 +163,10 @@ CheckboxBoolean.propTypes = {
 	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
 	focused: PropTypes.bool,
 	declarations: U.declarationsPropTypes,
-	tooltip: PropTypes.bool,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	management: PropTypes.bool,
 	style: PropTypes.object,
 };
 
-export default CheckboxBoolean;
+export default componentWrapper(React.memo(CheckboxBoolean, U.areEqual));