@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.2.62",
+	"version": "0.3.0-v2",
+	"workersVersion": "0.2.4-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",
-		"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",
+		"storybook": "start-storybook -p 9999",
+		"build-storybook": "build-storybook"
 	},
 	"keywords": [
 		"react",
@@ -36,62 +50,94 @@
 		"library"
 	],
 	"dependencies": {
+		"@inseefr/trevas": "^0.1.10",
+		"@inseefr/vtl-2.0-antlr-tools": "^0.1.0",
+		"antlr4": "^4.9.3",
+		"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",
+		"object-hash": "^2.2.0",
+		"prop-types": "^15.7.2",
+		"react-keyboard-event-handler": "^1.5.4",
+		"react-markdown": "^8.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-proposal-private-methods": "^7.18.6",
+		"@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+		"@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",
+		"@emotion/react": "^11.8.1",
+		"@emotion/styled": "^11.8.1",
+		"@mui/material": "^5.5.0",
+		"@storybook/addon-actions": "^6.5.8",
+		"@storybook/addon-essentials": "^6.5.8",
+		"@storybook/addon-interactions": "^6.5.8",
+		"@storybook/addon-links": "^6.5.8",
+		"@storybook/builder-webpack5": "^6.5.8",
+		"@storybook/manager-webpack5": "^6.5.8",
+		"@storybook/react": "^6.5.8",
+		"@storybook/testing-library": "^0.0.11",
+		"@testing-library/react-hooks": "^7.0.0",
+		"@timdp/rollup-plugin-image": "^1.0.3",
+		"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",
-		"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",
+		"core-js": "^3.17.3",
+		"cross-env": "^7.0.2",
+		"css-loader": "^5.0.0",
+		"damerau-levenshtein": "^1.0.7",
+		"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",
+		"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",
+		"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 +147,18 @@
 		],
 		"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"
+		"coverageProvider": "v8",
+		"testResultsProcessor": "jest-sonar-reporter",
+		"coveragePathIgnorePatterns": [
+			"/node_modules/"
+		],
+		"testEnvironment": "jsdom"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -118,5 +169,8 @@
 		"useTabs": true,
 		"bracketSpacing": true,
 		"trailingComma": "es5"
+	},
+	"peerDependencies": {
+		"react": "^17.0.2"
 	}
 }

package/src/components/button/button.scss

@@ -1,26 +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,
 	&:focus:hover {
-		color: $main_color;
+		color: var(--color-primary-dark);
 		background-color: white;
-		border-color: $main_color;
+		border-color: var(--color-primary-dark);
 	}
 	&:focus {
 		outline: none;
-		background-color: $second_color;
-		border-color: $second_color;
+		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/index.js

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

package/src/components/button/lunatic-button.js

@@ -0,0 +1,48 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { isElement } from 'utils/is-element';
+import './button.scss';
+
+function Button({ children, onClick, disabled, label, className }) {
+	const handleClick = useCallback(
+		function (e) {
+			e.stopPropagation();
+			e.preventDefault();
+			onClick(e);
+		},
+		[onClick]
+	);
+
+	if (isElement(children))
+		return (
+			<button
+				disabled={disabled}
+				type="button"
+				className={classnames('button-lunatic', className, { disabled })}
+				onClick={handleClick}
+			>
+				{children}
+			</button>
+		);
+
+	return (
+		<>
+			<input
+				disabled={disabled}
+				type="button"
+				className={classnames('button-lunatic', className, { disabled })}
+				value={label || children}
+				onClick={handleClick}
+			/>
+		</>
+	);
+}
+
+Button.propTypes = {
+	value: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+	disabled: PropTypes.bool,
+	onClick: PropTypes.func.isRequired,
+};
+
+export default Button;

package/src/components/checkbox/checkbox-boolean/checkbox-boolean.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CheckboxOption } from '../commons';
+import { createCustomizableLunaticField } from '../../commons';
+
+function CheckboxBoolean({ checked, id, disabled, onClick, labelId }) {
+	return (
+		<CheckboxOption
+			disabled={disabled}
+			checked={checked}
+			id={id}
+			onClick={onClick}
+			labelledBy={labelId}
+			value={checked}
+		/>
+	);
+}
+
+export default createCustomizableLunaticField(CheckboxBoolean);

package/src/components/checkbox/checkbox-boolean/index.js

@@ -0,0 +1 @@
+export { default } from './lunatic-checkbox-boolean';

package/src/components/checkbox/checkbox-boolean/lunatic-checkbox-boolean.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import CheckboxBoolean from './checkbox-boolean';
+import { createLunaticComponent } from '../../commons';
+
+function LunaticCheckboxBoolean({
+	value,
+	id,
+	options,
+	disabled,
+	onChange,
+	custom,
+}) {
+	return (
+		<CheckboxBoolean
+			id={id}
+			options={options}
+			checked={value}
+			onClick={onChange}
+			disabled={disabled}
+			custom={custom}
+		/>
+	);
+}
+
+LunaticCheckboxBoolean.defaultProps = { value: false };
+
+export default createLunaticComponent(LunaticCheckboxBoolean, {
+	fieldset: true,
+	inputId: 'lunatic-checkbox-boolean',
+});

package/src/components/checkbox/checkbox-group/checkbox-group.js

@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+import { CheckboxOption } from '../commons';
+import { Label } from '../../commons';
+import { useOnHandleChange } from '../../commons';
+import { createCustomizableLunaticField } from '../../commons';
+
+function onClick() {}
+
+function CheckBoxOptionWrapper({
+	checkboxId,
+
+	labelId,
+	checked,
+	value,
+	onKeyDown,
+	handleChange,
+	response,
+}) {
+	const booleanValue = value || false;
+
+	const onClickOption = useOnHandleChange({
+		handleChange,
+		response,
+		value: booleanValue,
+	});
+
+	// const onClickOption = useCallback(
+	// 	function (valueOption) {
+	// 		handleChange(response, !valueOption);
+	// 	},
+	// 	[handleChange, response]
+	// );
+
+	return (
+		<CheckboxOption
+			id={checkboxId}
+			labelledBy={labelId}
+			checked={checked}
+			onClick={onClickOption}
+			value={booleanValue}
+			onKeyDown={onKeyDown}
+		/>
+	);
+}
+
+function CheckboxGroupContainer({ children }) {
+	return <div className="lunatic-checkbox-group-option">{children}</div>;
+}
+
+function CheckboxGroup({ options, value, id, handleChange }) {
+	return options.map(function (option, index) {
+		const { label, response } = option;
+
+		if (response && value) {
+			const { name } = response;
+
+			if (name in value) {
+				const optionValue = value[name];
+				const checkboxId = `lunatic-checkbox-${id}-${name}`;
+				const labelId = `lunatic-checkbox-label-${id}-${name}`;
+
+				return (
+					<CheckboxGroupContainer key={checkboxId}>
+						<Label id={labelId} htmlFor={checkboxId}>
+							{label}
+						</Label>
+						<CheckBoxOptionWrapper
+							checkboxId={checkboxId}
+							labelId={labelId}
+							checked={optionValue}
+							value={optionValue}
+							onKeyDown={onClick}
+							response={response}
+							handleChange={handleChange}
+						/>
+					</CheckboxGroupContainer>
+				);
+			}
+		}
+		return null;
+	});
+}
+
+export default createCustomizableLunaticField(CheckboxGroup);

package/src/components/checkbox/checkbox-group/checkbox-option.js

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { CheckboxChecked, CheckboxUnchecked } from 'components/commons/icons';
+
+function CheckboxOption({ disabled, checked, id, value, onClick, labelledBy }) {
+	const onClickOption = useCallback(
+		function () {
+			onClick(value);
+		},
+		[value, onClick]
+	);
+
+	const handleKeyDown = useCallback(function (e) {
+		const { key } = e;
+		if (key === 'Space') {
+			// TODO
+		}
+	}, []);
+
+	const Icon = checked ? CheckboxChecked : CheckboxUnchecked;
+
+	return (
+		<div
+			className={classnames('checkbox-modality', 'checkbox-modality-block', {
+				checked,
+				disabled,
+			})}
+		>
+			<span
+				id={id}
+				role="checkbox"
+				className={`lunatic-input-checkbox`}
+				aria-checked={checked}
+				tabIndex="0"
+				onClick={onClickOption}
+				onKeyDown={handleKeyDown}
+				aria-labelledby={labelledBy}
+			>
+				<Icon />
+			</span>
+		</div>
+	);
+}
+
+export default CheckboxOption;

package/src/components/checkbox/checkbox-group/index.js

@@ -0,0 +1 @@
+export { default } from './lunatic-checkbox-group';

package/src/components/checkbox/checkbox-group/lunatic-checkbox-group.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import CheckboxGroup from './checkbox-group';
+import { createLunaticComponent } from '../../commons';
+
+function LunaticCheckboxGroup({
+	id,
+	value,
+
+	responses,
+	custom,
+	handleChange,
+}) {
+	return (
+		<CheckboxGroup
+			id={id}
+			options={responses}
+			value={value}
+			handleChange={handleChange}
+			custom={custom}
+		/>
+	);
+}
+
+export default createLunaticComponent(LunaticCheckboxGroup, {
+	fieldset: true,
+	inputId: 'lunatic-checkbox-group',
+});

package/src/components/checkbox/checkbox-one/index.js

@@ -0,0 +1 @@
+export { default } from './lunatic-checkbox-one';

package/src/components/checkbox/checkbox-one/lunatic-checkbox-one.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import LunaticRadioGroup from '../../radio';
+
+function LunaticCheckboxOne(props) {
+	return <LunaticRadioGroup {...props} checkboxStyle={true} />;
+}
+export default LunaticCheckboxOne;

package/src/components/checkbox/checkbox.scss

@@ -1,39 +1 @@
-@import 'src/components/index.scss';
-
-.checkbox-group {
-	border: 0.1em solid $main_color;
-}
-
-@mixin box-margin($margin: false) {
-	margin: 0;
-	margin-right: 1em;
-	margin-left: if($margin, 1em, 0);
-	margin-top: 0.5em;
-	&:focus {
-		outline: none;
-	}
-	&:checked + label {
-		border: 0.1em solid $main_color;
-		padding: 0.3em;
-	}
-}
-
-.checkbox-lunatic {
-	@include box-margin(true);
-	&:focus {
-		box-shadow: 0 0 0.3em 0.3em $main_color;
-	}
-}
-
-.checkbox-lunatic-no-margin {
-	@include box-margin(false);
-}
-
-.checkbox-modality {
-	margin-top: 1em;
-}
-
-.checkbox-alone {
-	margin-left: 0;
-	margin-top: 0.5em;
-}
+.lunatic-checkbox-boolean{}

package/src/components/checkbox/commons/checkbox-option.js

@@ -0,0 +1,55 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import { CheckboxChecked, CheckboxUnchecked } from 'components/commons/icons';
+
+function CheckboxOption({
+	disabled,
+	checked,
+	id,
+	value = false,
+	onClick,
+	labelledBy,
+}) {
+	const onClickOption = useCallback(
+		function () {
+			onClick(!value);
+		},
+		[value, onClick]
+	);
+
+	const handleKeyDown = useCallback(
+		function (e) {
+			const { code } = e;
+			if (code === 'Space') {
+				onClickOption();
+			}
+		},
+		[onClickOption]
+	);
+
+	const Icon = checked ? CheckboxChecked : CheckboxUnchecked;
+
+	return (
+		<div
+			className={classnames('checkbox-modality', 'checkbox-modality-block', {
+				checked,
+				disabled,
+			})}
+		>
+			<span
+				id={id}
+				role="checkbox"
+				className={`lunatic-input-checkbox`}
+				aria-checked={checked}
+				tabIndex="0"
+				onClick={onClickOption}
+				onKeyDown={handleKeyDown}
+				aria-labelledby={labelledBy}
+			>
+				<Icon />
+			</span>
+		</div>
+	);
+}
+
+export default CheckboxOption;

package/src/components/checkbox/commons/index.js

@@ -0,0 +1 @@
+export { default as CheckboxOption } from './checkbox-option';

package/src/components/checkbox/index.js

@@ -1,3 +1,3 @@
-export { default as CheckboxGroup } from './group';
-export { default as CheckboxBoolean } from './boolean';
-export { default as CheckboxOne } from './one';
+export { default as CheckboxGroup } from './checkbox-group';
+export { default as CheckboxBoolean } from './checkbox-boolean';
+export { default as CheckboxOne } from './checkbox-one';

package/src/{utils/lib/style.js → components/commons/build-style-object.js}

@@ -1,10 +1,12 @@
 import camelCase from 'lodash.camelcase';
 
-export const buildStyleObject = obj =>
-	obj
+function buildStyleObject(obj) {
+	return obj
 		? Object.entries(obj).reduce((_, [key, value]) => {
 				if (key.startsWith(':')) _[key] = buildStyleObject(value);
 				else _[camelCase(key)] = value;
 				return _;
 		  }, {})
 		: {};
+}
+export default buildStyleObject;