@inseefr/lunatic 0.1.0-hackathon → 0.1.0-v2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "0.1.0-hackathon",
-	"workersVersion": "0.2.0-experimental",
+	"version": "0.1.0-v2",
+	"workersVersion": "0.2.4-experimental",
 	"description": "Library of questionnaire components",
 	"repository": {
 		"type": "git",
@@ -33,7 +33,7 @@
 		"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 -s ./public -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",
@@ -51,9 +51,13 @@
 	],
 	"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",
 		"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",
@@ -70,6 +74,10 @@
 		"@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/icons-material": "^5.5.0",
+		"@mui/material": "^5.5.0",
 		"@storybook/addon-a11y": "^5.2.8",
 		"@storybook/addon-knobs": "^5.2.8",
 		"@storybook/addon-options": "^5.2.8",
@@ -77,7 +85,6 @@
 		"@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",
@@ -85,7 +92,6 @@
 		"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",
@@ -146,9 +152,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/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 }) =>
+	null;
+	// <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/button/index.js

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

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

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

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,44 @@
+import React from 'react';
+import { CheckboxOption } from '../commons';
+import { useOnHandleChange, LunaticField } from '../../commons';
+
+function LunaticCheckboxBoolean({
+	value,
+	declarations,
+	label,
+	response,
+	id,
+	disabled,
+	handleChange,
+}) {
+	const onClick = useOnHandleChange({ handleChange, response, value });
+
+	const contentId = `lunatic-checkbox-boolean-${id}`;
+	const labelId = `lunatic-checkbox-boolean-label-${id}`;
+	const booleanValue = value === true ? value : false;
+
+	return (
+		<LunaticField
+			label={label}
+			contentId={contentId}
+			labelId={labelId}
+			declarations={declarations}
+			id={id}
+			value={value}
+			className="lunatic-checkbox-boolean"
+		>
+			<CheckboxOption
+				disabled={disabled}
+				checked={booleanValue}
+				id={id}
+				value={!booleanValue}
+				onClick={onClick}
+				labelledBy={labelId}
+			/>
+		</LunaticField>
+	);
+}
+
+LunaticCheckboxBoolean.defaultProps = { value: false };
+
+export default LunaticCheckboxBoolean;

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

@@ -0,0 +1,78 @@
+import React, { useCallback } from 'react';
+import { CheckboxOption } from '../commons';
+import { Label } from '../../commons';
+
+function onClick() {}
+
+function CheckBoxOptionWrapper({
+	checkboxId,
+	index,
+	labelId,
+	checked,
+	value,
+	onKeyDown,
+	handleChange,
+	response,
+}) {
+	const booleanValue = value || false;
+
+	const onClickOption = useCallback(
+		function (valueOption) {
+			handleChange(response, !valueOption);
+		},
+		[handleChange, response]
+	);
+
+	return (
+		<CheckboxOption
+			id={checkboxId}
+			labelledBy={labelId}
+			index={index}
+			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}
+							index={index}
+							labelId={labelId}
+							checked={optionValue}
+							value={optionValue}
+							onKeyDown={onClick}
+							response={response}
+							handleChange={handleChange}
+						/>
+					</CheckboxGroupContainer>
+				);
+			}
+		}
+		return null;
+	});
+}
+
+export default CheckboxGroup;

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

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import CheckboxChecked from '../../../utils/icons/checkbox-checked.icon';
+import CheckboxUnchecked from '../../../utils/icons/checkbox-unchecked.icon';
+
+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,32 @@
+import React from 'react';
+import { FieldContainer, Fieldset } from '../../commons';
+import CheckboxGroup from './checkbox-group';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../../declarations';
+
+function LunaticCheckboxGroup(props) {
+	const { id, declarations, value, label, handleChange, responses } = props;
+
+	return (
+		<>
+			<DeclarationsBeforeText declarations={declarations} />
+			<FieldContainer id={id} value={value}>
+				<Fieldset legend={label}>
+					<DeclarationsAfterText declarations={declarations} />
+					<CheckboxGroup
+						id={id}
+						options={responses}
+						value={value}
+						handleChange={handleChange}
+					/>
+				</Fieldset>
+			</FieldContainer>
+			<DeclarationsDetachable declarations={declarations} />
+		</>
+	);
+}
+
+export default LunaticCheckboxGroup;

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,49 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import CheckboxChecked from '../../../utils/icons/checkbox-checked.icon';
+import CheckboxUnchecked from '../../../utils/icons/checkbox-unchecked.icon';
+
+function CheckboxOption({ disabled, checked, id, value, 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/components/commons/components/field-container/field-container.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+import './field-container.scss';
+
+function Tooltip({ management, id }) {
+	if (management) {
+		return <div className="tooltip"></div>;
+	}
+	return null;
+}
+
+function FieldContainer({ children, management, value, id }) {
+	return (
+		<div className="field-container">
+			<div
+				className={classnames({
+					'field-with-tooltip': management,
+					field: !management,
+				})}
+			>
+				{children}
+			</div>
+			<Tooltip management={management} value={value} id={id} />
+		</div>
+	);
+}
+
+export default FieldContainer;

package/src/components/commons/components/field-container/index.js

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

package/src/components/commons/components/fieldset.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+function Fieldset({ children, legend }) {
+	return (
+		<fieldset>
+			<legend>{legend}</legend>
+			{children}
+		</fieldset>
+	);
+}
+
+export default Fieldset;

package/src/components/commons/components/input-container.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import LunaticField from './lunatic-field';
+
+function InputContainer({
+	declarations,
+	label,
+	id,
+	value,
+	inputId,
+	labelId,
+	children,
+	labelClassName,
+}) {
+	return (
+		<LunaticField
+			label={label}
+			labelClassName={labelClassName}
+			contentId={inputId}
+			labelId={labelId}
+			declarations={declarations}
+			id={id}
+			value={value}
+			className={labelClassName}
+		>
+			{children}
+		</LunaticField>
+	);
+}
+
+export default InputContainer;

package/src/components/commons/components/label.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+function Label({ children, id, htmlFor, className }) {
+	if (children) {
+		return (
+			<label htmlFor={htmlFor} id={id} className={className}>
+				{children}
+			</label>
+		);
+	}
+	return null;
+}
+
+export default Label;

package/src/components/commons/components/lunatic-field.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Label from './label';
+import FieldContainer from './field-container';
+import {
+	DeclarationsBeforeText,
+	DeclarationsAfterText,
+	DeclarationsDetachable,
+} from '../../declarations';
+
+function LunaticFields({
+	label,
+	contentId,
+	labelId,
+	declarations,
+	id,
+	value,
+	children,
+	className,
+}) {
+	return (
+		<>
+			<DeclarationsBeforeText declarations={declarations} />
+			<Label id={labelId} htmlFor={contentId} className={className}>
+				{label}
+			</Label>
+			<DeclarationsAfterText declarations={declarations} />
+			<FieldContainer value={value} id={id}>
+				{children}
+			</FieldContainer>
+			<DeclarationsDetachable declarations={declarations} />
+		</>
+	);
+}
+
+export default LunaticFields;

package/src/components/commons/create-customizable-field.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function createCustomizableLunaticField(LunaticField) {
+	return function OverlayField(props) {
+		const { custom: Custom, ...rest } = props;
+		if (typeof Custom === 'function') {
+			return <Custom {...rest} />;
+		}
+		return <LunaticField {...rest} />;
+	};
+}
+
+export default createCustomizableLunaticField;

package/src/components/commons/index.js

@@ -0,0 +1,9 @@
+export { default as FieldContainer } from './components/field-container';
+export { default as Label } from './components/label';
+export { default as InputContainer } from './components/input-container';
+export { default as Fieldset } from './components/fieldset';
+export { default as LunaticField } from './components/lunatic-field';
+export { default as usePrevious } from './use-previous';
+export { default as useOnHandleChange } from './use-on-handle-change';
+export { default as useOptionsKeydown } from './use-options-keydown';
+export { default as createCustomizableLunaticField } from './create-customizable-field';