@inseefr/lunatic 0.1.7 → 0.1.8-experimental

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.1.7",
+	"version": "0.1.8-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {
 		"type": "git",
@@ -24,10 +24,11 @@
 		"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",
+		"start-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"
 	},
 	"keywords": [
 		"react",
@@ -36,60 +37,79 @@
 		"library"
 	],
 	"dependencies": {
+		"@inseefr/trevas": "^0.1.9",
 		"lodash.camelcase": "^4.3.0",
-		"prop-types": "^15.6.0",
-		"radium": "^0.25.1",
-		"react": "^16.2.0"
+		"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.1",
-		"babel-jest": "^22.4.0",
-		"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",
+		"cross-env": "^7.0.2",
+		"css-loader": "^5.0.0",
 		"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",
-		"jest": "^22.4.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-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",
+		"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",
+		"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",
+		"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",
+		"source-map-explorer": "^2.4.2",
+		"storybook-addon-jsx": "^7.2.3",
+		"storybook-readme": "^5.0.8",
+		"style-loader": "^2.0.0",
+		"url-loader": "^4.1.0"
 	},
 	"jest": {
 		"collectCoverageFrom": [
@@ -99,9 +119,21 @@
 		],
 		"testURL": "http://localhost",
 		"moduleNameMapper": {
-			"^.+\\.(css|less|scss)$": "babel-jest"
+			"^.+\\.(css|less|scss)$": "identity-obj-proxy"
 		},
-		"setupTestFrameworkScriptFile": "<rootDir>/src/tests/setup/setupTests.js"
+		"transform": {
+			"^.+\\.js$": "babel-jest",
+			".+\\.(png|jpg)$": "jest-transform-stub"
+		},
+		"setupFilesAfterEnv": [
+			"<rootDir>/src/tests/setup/setupTests.js"
+		],
+		"coverageProvider": "v8",
+		"testResultsProcessor": "jest-sonar-reporter",
+		"coveragePathIgnorePatterns": [
+			"/node_modules/"
+		],
+		"testEnvironment": "jsdom"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -112,5 +144,8 @@
 		"useTabs": true,
 		"bracketSpacing": true,
 		"trailingComma": "es5"
+	},
+	"peerDependencies": {
+		"react": "^17.0.2"
 	}
 }

package/src/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,20 @@
+.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-element-lunatic:before {
+	content: '>';
+	color: white;
+	margin-left: 0.4em;
+	margin-right: 0.4em;
+}

package/src/components/breadcrumb/component.js

@@ -0,0 +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;

package/src/components/breadcrumb/index.js

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

package/src/components/button/button.scss

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

package/src/components/button/component.js

@@ -1,26 +1,53 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Radium from 'radium';
-import { buildStyleObject } from '../../utils/string-utils';
+import {
+	buildStyleObject,
+	createObjectEvent,
+	isFunction,
+} from '../../utils/lib';
 import './button.scss';
+import { BUTTON_CATEGORY, EVENT_CLICK } from '../../constants';
 
-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>
-);
+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.string.isRequired,
+	value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
 	disabled: PropTypes.bool,
 	onClick: PropTypes.func.isRequired,
 };
 
-export default Radium(Button);
+export default Button;

package/src/components/checkbox/boolean.js

@@ -1,59 +1,172 @@
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { buildStyleObject } from '../../utils/string-utils';
+import missingWrapper from '../missing-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 '../../constants';
+import { interpret } from '../../utils/to-expose';
 import './checkbox.scss';
 
-class CheckboxBoolean extends Component {
-	constructor(props) {
-		super(props);
-		const { value } = props;
-		this.state = { checked: value === '1' ? true : false };
-		this.onChange = () => {
-			props.handleChange(!this.state.checked ? '1' : '0');
-			this.setState({ checked: !this.state.checked });
-		};
-	}
-	render() {
-		const { checked } = this.state;
-		const { id, label, disabled, positioning, style } = this.props;
-		const isVertical = positioning === 'VERTICAL';
-		const input = (
-			<input
-				type="checkbox"
-				id={`checkbox-boolean-${id}`}
-				title={label ? label : 'empty-label'}
-				className={`checkbox-lunatic${isVertical ? '-no-margin' : ''}`}
-				style={buildStyleObject(style)}
-				checked={checked}
-				disabled={disabled}
-				onChange={this.onChange}
+const CheckboxBoolean = ({
+	id,
+	label,
+	preferences,
+	response,
+	handleChange: propsHandleChange,
+	disabled,
+	positioning,
+	focused,
+	declarations,
+	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 = (
+		<>
+			<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-boolean-modality`}>
+			<Declarations
+				id={id}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
 			/>
-		);
-		return (
-			<div key={`checkbox-boolean-${id}`} className={`checkbox-modality`}>
-				{label && <label htmlFor={`checkbox-boolean-${id}`}>{label}</label>}
-				{isVertical ? <div>{input}</div> : input}
+			{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={`${management ? 'field-with-tooltip' : 'field'}`}>
+					{isVertical ? <div>{input}</div> : input}
+				</div>
+				{management && (
+					<div className="tooltip">
+						<TooltipResponse
+							id={id}
+							response={U.buildBooleanTooltipResponse(response)}
+						/>
+					</div>
+				)}
 			</div>
-		);
-	}
-}
+			<Declarations
+				id={id}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</div>
+	);
+};
+
+CheckboxBoolean.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	response: {},
+	disabled: false,
+	positioning: 'DEFAULT',
+	focused: false,
+	declarations: [],
+	features: [],
+	bindings: {},
+	management: false,
+	style: {},
+};
 
 CheckboxBoolean.propTypes = {
 	id: PropTypes.string.isRequired,
 	label: PropTypes.string,
-	value: PropTypes.oneOf(['0', '1']),
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	response: U.responsePropTypes,
 	handleChange: PropTypes.func.isRequired,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
 	disabled: PropTypes.bool,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
+	focused: PropTypes.bool,
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	management: PropTypes.bool,
 	style: PropTypes.object,
 };
 
-CheckboxBoolean.defaultProps = {
-	label: '',
-	value: '0',
-	positioning: 'DEFAULT',
-	disabled: false,
-	style: {},
-};
-
-export default CheckboxBoolean;
+export default React.memo(missingWrapper(CheckboxBoolean), U.areEqual);

package/src/components/checkbox/checkbox.scss

@@ -1,33 +1,68 @@
-@import 'src/components/index.scss';
-
-.checkbox-group {
-	border: 0.1em solid $main_color;
+.checkbox-group,
+.checkbox-group-list {
+	border: 0;
+	outline: 0;
+	padding: 0;
 }
 
-@mixin box-margin($margin: false) {
-	margin: 0;
-	margin-right: 1em;
-	margin-left: if($margin, 1em, 0);
-	margin-top: 0.5em;
-	&:focus {
-		outline: none;
+.checkbox-lunatic,
+.checkbox-boolean-lunatic {
+	position: absolute;
+	opacity: 0;
+	margin-bottom: 0;
+	margin-top: 0.15rem;
+	margin-left: 0.2rem;
+	height: 18px;
+	width: 18px;
+	+ label {
+		margin-left: 2rem;
 	}
-	&:checked + label {
-		border: 0.1em solid $main_color;
-		padding: 0.3em;
+	&:focus {
+		+ label {
+			background-color: rgba(0, 0, 0, 0.05);
+		}
 	}
 }
 
-.checkbox-lunatic {
-	@include box-margin(true);
+.checkbox-boolean-lunatic + label::before {
+	margin-right: -0.3rem;
+}
+
+.checkbox-modality,
+.checkbox-boolean-modality {
+	margin-bottom: 0.6rem;
+}
+
+.field,
+.field-with-tooltip {
+	.checkbox-group-list .checkbox-modality {
+		height: 1.375em;
+	}
 }
 
-.checkbox-lunatic-no-margin {
-	@include box-margin(false);
+.checkbox-group,
+.checkbox-group-list {
+	.modality_NR {
+		margin-top: 1.5em;
+	}
+	.horizontal-options.modality_NR {
+		margin-top: 0;
+	}
+	.checkbox-modality {
+		label {
+			display: flex;
+		}
+	}
+	.checkbox-modality.checkbox-modality-block label {
+		padding-top: 0.325em;
+	}
+	.checkbox-modality.checkbox-modality-block.horizontal-options label {
+		padding-top: 0;
+	}
 }
 
-.checkbox-modality {
-	margin-top: 1em;
+.checkbox-lunatic + label {
+	margin-top: 0.325em;
 }
 
 .checkbox-alone {