@inseefr/lunatic 0.3.8-experimental → 0.3.9-v2

package/README.md

@@ -14,6 +14,8 @@ The documentation can be found in the [docs](https://github.com/InseeFr/Lunatic/
 
 [Storybook](https://inseefr.github.io/Lunatic/storybook) is also available online.
 
+[Storybook of the future major release](https://inseefr.github.io/Lunatic/storybook-v2) under construction is also available online.
+
 ## Usage
 
 An [example](https://github.com/InseeFr/Lunatic/tree/master/example/orchestrator) of use of Lunatic is available. This simple orchestrator is deployed [online](https://inseefr.github.io/Lunatic/orchestrator).

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.3.8-experimental",
+	"version": "0.3.9-v2",
 	"workersVersion": "0.2.4-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {
@@ -23,25 +23,23 @@
 		}
 	],
 	"license": "MIT",
-	"main": "lib/index.js",
+	"main": "src/index.js",
 	"module": "src/index.js",
 	"files": [
-		"lib",
 		"src"
 	],
 	"scripts": {
 		"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",
-		"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",
 		"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"
+		"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",
@@ -50,15 +48,17 @@
 		"library"
 	],
 	"dependencies": {
-		"@inseefr/trevas": "^0.1.14",
-		"array-flat-polyfill": "^1.0.1",
+		"@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",
 		"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": "^5.0.3",
+		"react-markdown": "^8.0.3",
 		"react-tooltip": "^4.2.15",
 		"remove-accents": "^0.4.2",
 		"sass": "^1.32.2"
@@ -66,28 +66,33 @@
 	"devDependencies": {
 		"@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",
-		"@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",
+		"@emotion/react": "^11.9.3",
+		"@emotion/styled": "^11.9.3",
+		"@mui/material": "^5.8.6",
+		"@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",
-		"@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
 		"babel-eslint": "^10.0.3",
 		"babel-loader": "^8.0.6",
-		"classnames": "^2.2.5",
+		"classnames": "^2.3.1",
 		"core-js": "^3.17.3",
 		"cross-env": "^7.0.2",
 		"css-loader": "^5.0.0",
 		"damerau-levenshtein": "^1.0.7",
-		"enzyme": "^3.7.0",
 		"eslint": "7.30.0",
 		"eslint-config-prettier": "^7.2.0",
 		"eslint-config-react-app": "^6.0.0",
@@ -96,7 +101,6 @@
 		"eslint-plugin-jsx-a11y": "^6.1.1",
 		"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",
@@ -110,24 +114,10 @@
 		"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",
 		"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",
@@ -148,9 +138,6 @@
 			"^.+\\.js$": "babel-jest",
 			".+\\.(png|jpg)$": "jest-transform-stub"
 		},
-		"setupFilesAfterEnv": [
-			"<rootDir>/src/tests/setup/setupTests.js"
-		],
 		"coverageProvider": "v8",
 		"testResultsProcessor": "jest-sonar-reporter",
 		"coveragePathIgnorePatterns": [

package/src/components/button/button.scss

@@ -1,24 +1,24 @@
-.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);
-	}
-}
+.button-lunatic {
+	min-width: 20%;
+	color: white;
+	border-color: var(--color-primary-dark);
+	background-color: var(--color-primary-dark);
+	font-size: 1.2em;
+	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/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 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 '../../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,73 +1 @@
-.lunatic-component {
-	.checkbox-group,
-	.checkbox-group-list {
-		border: 0;
-		outline: 0;
-		padding: 0;
-	}
-
-	.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;
-		}
-		&:focus {
-			+ label {
-				background-color: rgba(0, 0, 0, 0.05);
-			}
-		}
-	}
-
-	.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-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-lunatic + label {
-		margin-top: 0.325em;
-	}
-
-	.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 '../../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;

package/src/components/commons/components/combo-box/combo-box-container.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+function ComboBoxContainer({ children, className, id, classStyle }) {
+	return (
+		<div
+			id={`lunatic-combo-box-container-${id}`}
+			className={classnames(
+				'lunatic-combo-box-container',
+				className,
+				classStyle
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+
+ComboBoxContainer.propTypes = {
+	id: PropTypes.string.isRequired,
+	className: PropTypes.string,
+	classStyle: PropTypes.string,
+};
+
+ComboBoxContainer.defaultProps = {
+	className: undefined,
+	classStyle: 'default-style',
+};
+
+export default ComboBoxContainer;