@inseefr/lunatic 0.2.0-v2 → 0.2.1-prisme

package/src/utils/to-expose/index.js

@@ -1,12 +1,11 @@
 // updateQuestionnaire is useless since 2.0 optimization efforts
 // export { updateQuestionnaire } from './handler';
-// export { mergeQuestionnaireAndData } from './init-questionnaire';
-// export {
-// 	getState,
-// 	getCollectedState,
-// 	getCollectedStateByValueType,
-// 	getBindings,
-// } from './state';
-// export { interpret } from './interpret';
-// export * from './hooks';
-export { default as useLunatic } from '../../use-lunatic';
+export { mergeQuestionnaireAndData } from './init-questionnaire';
+export {
+	getState,
+	getCollectedState,
+	getCollectedStateByValueType,
+	getBindings,
+} from './state';
+export { interpret } from './interpret';
+export { useLunatic, useLunaticSplit } from './hooks';

package/src/utils/to-expose/init-questionnaire.js

@@ -0,0 +1,164 @@
+import * as C from '../../constants';
+import { getCalculatedVariables } from './calculated-variables';
+import { isDev } from '../lib';
+
+const INITIAL_DEPTH = 1;
+
+export const mergeQuestionnaireAndData = (questionnaire) => (data) => {
+	if (!questionnaire || !questionnaire.components) return {};
+	if (questionnaire.components.length === 0) return questionnaire;
+	const { components, variables, ...props } = questionnaire;
+
+	const vars = buildVars(data || {})(variables);
+	const filledComponents = buildFilledComponents(vars[C.COLLECTED])(components)(
+		INITIAL_DEPTH
+	);
+
+	return { ...props, components: filledComponents, variables: vars };
+};
+
+const buildVars = (data) => (variables) => {
+	if (!Array.isArray(variables)) return {};
+
+	if (isDev) {
+		console.log('Start init vars');
+		var start = new Date().getTime();
+	}
+
+	const { COLLECTED: collectedData } = data;
+	const collected = variables
+		.filter(({ variableType }) => variableType === C.COLLECTED)
+		.reduce((acc, { values, name, componentRef }) => {
+			const d = (collectedData && collectedData[name]) || {};
+			return {
+				...acc,
+				[name]: {
+					componentRef,
+					values: { ...values, ...d },
+				},
+			};
+		}, {});
+	const EXTERNAL = variables
+		.filter(({ variableType }) => variableType === C.EXTERNAL)
+		.reduce((_, v) => ({ ..._, ...initExternalVariable(v)(data) }), {});
+	const bindings = Object.entries({ ...collected, ...EXTERNAL }).reduce(
+		(acc, [k, v]) => {
+			if (!v?.values)
+				return {
+					...acc,
+					[k]: v,
+				};
+			return {
+				...acc,
+				[k]: v.values[C.COLLECTED],
+			};
+		},
+		{}
+	);
+
+	const calcVarsAsObj = variables
+		.filter(({ variableType }) => variableType === C.CALCULATED)
+		.reduce((accV, { name, ...rest }) => ({ ...accV, [name]: rest }), {});
+
+	const CALCULATED = getCalculatedVariables(calcVarsAsObj)({
+		bindings,
+		init: true,
+	});
+
+	if (isDev) console.log(`End init vars: ${new Date().getTime() - start} ms`);
+
+	return {
+		EXTERNAL,
+		COLLECTED: collected,
+		CALCULATED,
+	};
+};
+
+const buildFilledComponents = (vars) => (components) => (depth) =>
+	components.map((c) => {
+		const component = { depth, ...c };
+		return buildFilledComponent(vars)(component);
+	});
+
+export const buildFilledComponent = (vars) => (component) => {
+	if (component.response) return buildResponseComponent(vars)(component);
+	else if (component.responses) return buildResponsesComponent(vars)(component);
+	else if (component.cells) return buildCellsComponent(vars)(component);
+	else if (component.components)
+		return buildComponentsComponent(vars)(component);
+	return component;
+};
+
+export const buildResponseComponent = (vars) => (c) => {
+	const { missingResponse } = c;
+	const response = {
+		name: c.response.name,
+		values: vars[c.response.name].values,
+	};
+	if (missingResponse)
+		return {
+			...c,
+			response,
+			missingResponse: {
+				name: missingResponse.name,
+				values: vars[missingResponse.name].values,
+			},
+		};
+	return {
+		...c,
+		response,
+	};
+};
+
+export const buildResponsesComponent = (vars) => (c) => {
+	const { responses, missingResponse, ...rest } = c;
+	const filledResponses = responses.map((r) => buildResponseComponent(vars)(r));
+	if (missingResponse)
+		return {
+			...rest,
+			responses: filledResponses,
+			missingResponse: {
+				name: missingResponse.name,
+				values: vars[missingResponse.name].values,
+			},
+		};
+	return { ...rest, responses: filledResponses };
+};
+
+export const buildCellsComponent = (vars) => (c) => {
+	const { cells, depth, missingResponse, ...rest } = c;
+	const filledCells = cells.map((row) =>
+		buildFilledComponents(vars)(row)(depth)
+	);
+	if (missingResponse)
+		return {
+			...rest,
+			cells: filledCells,
+			missingResponse: {
+				name: missingResponse.name,
+				values: vars[missingResponse.name].values,
+			},
+		};
+	return { ...rest, depth, cells: filledCells };
+};
+
+export const buildComponentsComponent = (vars) => (component) => {
+	const { components, depth, missingResponse, ...rest } = component;
+	const filledComponents = buildFilledComponents(vars)(components)(depth + 1);
+	if (missingResponse)
+		return {
+			...rest,
+			components: filledComponents,
+			missingResponse: {
+				name: missingResponse.name,
+				values: vars[missingResponse.name].values,
+			},
+		};
+	return { ...rest, depth, components: filledComponents };
+};
+
+const initExternalVariable =
+	({ name }) =>
+	(data) => ({
+		[name]: (data && data.EXTERNAL && data.EXTERNAL[name]) || null,
+	});

package/src/utils/to-expose/interpret/index.js

@@ -0,0 +1 @@
+export * from './main';

package/src/utils/to-expose/interpret/main.js

@@ -0,0 +1,16 @@
+import { interpretVTL } from './vtl';
+import { interpretMD } from './md';
+
+export const interpret =
+	(features, logFunction) => (bindings) => (expression) => {
+		if (!expression) return '';
+		if (!Array.isArray(features)) return expression;
+		if (features.includes('VTL')) {
+			const vtl = interpretVTL(bindings)(expression);
+			if (features.includes('MD')) {
+				return interpretMD(vtl)(logFunction);
+			}
+			return vtl;
+		}
+		return expression;
+	};

package/src/utils/to-expose/interpret/md.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import ReactTooltip from 'react-tooltip';
+import {
+	EVENT_CLICK,
+	LINK_CATEGORY,
+	TOOLTIP_CATEGORY,
+} from '../../../constants';
+import { createObjectEvent, isFunction } from '../../lib';
+
+const Link = (props) => {
+	const { href, children, title, logFunction } = props;
+	const listener =
+		(link = true) =>
+		() => {
+			if (isFunction(logFunction))
+				logFunction(
+					createObjectEvent(
+						link ? `link-${href}` : `tooltip-${title}`,
+						link ? LINK_CATEGORY : TOOLTIP_CATEGORY,
+						EVENT_CLICK
+					)
+				);
+		};
+	if (href.trim().startsWith('http'))
+		return (
+			<a
+				href={href}
+				target="_blank"
+				rel="noreferrer noopener"
+				onClick={listener()}
+			>
+				{children}
+			</a>
+		);
+	return (
+		<span className="link-md" onPointerUp={listener(false)}>
+			<span
+				data-for={`${title}-tooltip`}
+				data-tip={title}
+				data-multiline
+				className="field-md"
+			>
+				{children}
+			</span>
+			<ReactTooltip
+				id={`${title}-tooltip`}
+				className="tooltip-content"
+				place="bottom"
+				effect="solid"
+				globalEventOff="click"
+			/>
+		</span>
+	);
+};
+
+const renderers = (otherProps) => {
+	return {
+		paragraph: (props) => <p style={{ margin: '0' }}>{props.children}</p>,
+		link: (props) => Link({ ...otherProps, ...props }),
+	};
+};
+
+export const interpretMD = (expression) => (logFunction) =>
+	<ReactMarkdown source={expression} renderers={renderers({ logFunction })} />;

package/src/utils/to-expose/interpret/vtl.js

@@ -0,0 +1,18 @@
+import { interpret } from '@inseefr/trevas';
+
+const extractDSValue = (v) => {
+	if (v !== null && typeof v === 'object') {
+		const { dataPoints } = v;
+		return Object.values(dataPoints)[0];
+	}
+	return v;
+};
+
+export const interpretVTL = (bindings) => (expression) => {
+	try {
+		const res = interpret(expression, bindings);
+		return extractDSValue(res);
+	} catch (e) {
+		return expression;
+	}
+};

package/src/utils/to-expose/state.js

@@ -0,0 +1,66 @@
+import * as C from '../../constants';
+import { isDev } from '../lib';
+
+export const getState = (questionnaire) => {
+	const { variables } = questionnaire;
+	return {
+		[C.CALCULATED]: getCalculatedFromVariables(variables),
+		[C.COLLECTED]: getCollectedState(questionnaire),
+		[C.EXTERNAL]: getExternalFromVariables(variables),
+	};
+};
+
+export const getCollectedState = (questionnaire) => {
+	const { variables } = questionnaire;
+	return (
+		(variables &&
+			variables[C.COLLECTED] &&
+			Object.entries(variables[C.COLLECTED]).reduce(
+				(acc, [name, { values }]) => ({ ...acc, [name]: values }),
+				{}
+			)) ||
+		{}
+	);
+};
+
+const getCalculatedFromVariables = (variables) =>
+	variables && variables[C.CALCULATED]
+		? Object.entries(variables[C.CALCULATED]).reduce(
+				(_, [name, { value }]) => ({ ..._, [name]: value }),
+				{}
+		  )
+		: {};
+
+const getExternalFromVariables = (variables) =>
+	(variables && variables[C.EXTERNAL]) || {};
+
+export const getCollectedStateByValueType =
+	(questionnaire, collectedState) => (valueType, displayNull) =>
+		['PREVIOUS', 'COLLECTED', 'FORCED', 'EDITED', 'INPUTED'].includes(valueType)
+			? Object.entries(
+					collectedState || getCollectedState(questionnaire)
+			  ).reduce((_, v) => {
+					if (displayNull || v[1][valueType] !== null)
+						return {
+							..._,
+							[v[0]]: v[1][valueType],
+						};
+					return _;
+			  }, {})
+			: {};
+
+export const getBindings = (questionnaire) => {
+	if (isDev) {
+		console.log('Get bindings');
+		var start = new Date().getTime();
+	}
+	const { variables } = questionnaire;
+	const bindings = {
+		...getCollectedStateByValueType(questionnaire)('COLLECTED', true),
+		...getCalculatedFromVariables(variables),
+		...getExternalFromVariables(variables),
+	};
+	if (isDev)
+		console.log(`End get bindings: ${new Date().getTime() - start} ms`);
+	return bindings;
+};

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

@@ -1,33 +0,0 @@
-import React, { useCallback } from 'react';
-import classnames from 'classnames';
-import PropTypes from 'prop-types';
-import './button.scss';
-
-function Button({ children, onClick, disabled, label, className }) {
-	const handleClick = useCallback(
-		function (e) {
-			e.stopPropagation();
-			e.preventDefault();
-			onClick(e);
-		},
-		[onClick]
-	);
-
-	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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/components/commons/build-style-object.js

@@ -1,12 +0,0 @@
-import camelCase from 'lodash.camelcase';
-
-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;