@inseefr/lunatic 0.2.62 → 0.3.0-v2

package/src/components/commons/components/missing/missing.js

@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react';
+import useOnHandleChange from '../../use-on-handle-change';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import Button from '../../../button';
+import { DK, RF } from 'utils/constants';
+import D from 'i18n';
+import './missing.scss';
+
+const DEFAULT_SHORTCUT = { dontKnow: '', refused: '' };
+
+const Missing = (props) => {
+	const {
+		dontKnowButton = D.DK,
+		refusedButton = D.RF,
+		missingResponse,
+		handleChange,
+		missingStrategy,
+		missingShortcut = DEFAULT_SHORTCUT,
+		shortcut,
+		componentType,
+		paginatedLoop,
+	} = props;
+
+	const { value } = missingResponse;
+	const onClick = useOnHandleChange({
+		handleChange,
+		response: missingResponse,
+		value,
+	});
+
+	const handleMissingStrategy = useCallback(() => {
+		if (missingStrategy) missingStrategy();
+	}, [missingStrategy]);
+
+	const onClickDK = useCallback(() => {
+		onClick(DK);
+		handleMissingStrategy();
+	}, [onClick, handleMissingStrategy]);
+	const onClickRF = useCallback(() => {
+		onClick(RF);
+		handleMissingStrategy();
+	}, [onClick, handleMissingStrategy]);
+
+	if ((componentType === 'Loop' && paginatedLoop) || !missingResponse)
+		return null;
+
+	return (
+		<div className="missing-buttons">
+			<span
+				className={`missing-button${
+					value === DK ? '-active' : ''
+				} missing-button-dk${value === DK ? '-active' : ''}`}
+			>
+				<Button label={dontKnowButton} onClick={onClickDK} />
+			</span>
+			<span
+				className={`missing-button${
+					value === RF ? '-active' : ''
+				} missing-button-rf${value === RF ? '-active' : ''}`}
+			>
+				<Button label={refusedButton} onClick={onClickRF} />
+			</span>
+			{shortcut &&
+				missingShortcut &&
+				missingShortcut.dontKnow &&
+				missingShortcut.refused && (
+					<KeyboardEventHandler
+						handleKeys={Object.values(missingShortcut)}
+						onKeyEvent={(key, e) => {
+							e.preventDefault();
+							if (key === missingShortcut.dontKnow) onClick(DK)();
+							if (key === missingShortcut.refused) onClick(RF)();
+						}}
+						handleFocusableElements
+					/>
+				)}
+		</div>
+	);
+};
+
+export default Missing;

package/src/components/commons/components/missing/missing.scss

@@ -0,0 +1,30 @@
+.lunatic-component {
+	.missing-buttons {
+		margin-top: 1em;
+		.button-lunatic {
+			width: 4em;
+			font-size: 1em;
+			font-weight: normal;
+		}
+		.missing-button {
+			.button-lunatic {
+				background-color: var(--color-very-very-light);
+				color: var(--color-primary-dark);
+				&:hover {
+					background-color: white;
+					color: var(--color-primary-main);
+				}
+			}
+		}
+		.missing-button-active {
+			.button-lunatic {
+				background-color: var(--color-primary-dark);
+				color: var(--color-very-very-light);
+				&:hover {
+					background-color: var(--color-primary-main);
+					color: white;
+				}
+			}
+		}
+	}
+}

package/src/components/commons/components/nothing-to-display.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+function NothingToDisplay() {
+	return <div>Nothing to display!</div>;
+}
+
+export default NothingToDisplay;

package/src/components/commons/components/orchestrated-component.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+import * as lunatic from 'components';
+import { fillComponentExpressions } from '../../../use-lunatic/commons';
+
+function OrchestratedComponent({
+	id,
+	component,
+	handleChange,
+	features,
+	missing,
+	shortcut,
+	management,
+	preferences,
+	value,
+	iteration,
+	linksIterations,
+	executeExpression,
+	custom,
+}) {
+	const { componentType } = component;
+	const componentFilled = fillComponentExpressions(component, {
+		executeExpression,
+		pager: { iteration, linksIterations },
+	});
+	const Component = lunatic[componentType];
+
+	const isFiltered = componentFilled?.conditionFilter;
+
+	if (componentType in lunatic && isFiltered) {
+		return (
+			<Component
+				{...componentFilled}
+				id={id}
+				handleChange={handleChange}
+				preferences={preferences}
+				management={management}
+				features={features}
+				missing={missing}
+				shortcut={shortcut}
+				value={value}
+				executeExpression={executeExpression}
+				custom={custom}
+			/>
+		);
+	}
+	return null;
+}
+
+export default OrchestratedComponent;

package/src/components/commons/components/variable-status/index.js

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

package/src/components/commons/components/variable-status/variable-status.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import * as img from './img';
+import './variable-status.scss';
+
+const VariableResponse = ({ id, response, children }) => {
+	const [tooltipElements, setTooltipElements] = useState(() => ({
+		imgName: 'editedImg',
+		content: [{ key: 'bla bla', value: 'toto' }],
+	}));
+
+	// useEffect(() => {
+	// 	setTooltipElements({ imgName: 'edited', content: 'toto' });
+	// }, [response]);
+
+	const { content, imgName } = tooltipElements;
+
+	if (!content) return null;
+
+	const text = content
+		.map(({ key, value }) => `${key} : ${value}<br />`)
+		.join('');
+
+	return (
+		<div className="lunatic-component-container-test">
+			<div className="lunatic-component-body">{children}</div>
+			<div className="tooltip-lunatic">
+				<span
+					data-for={`${id}-management-tooltip`}
+					data-tip={text}
+					data-multiline
+				>
+					<img id={id} alt="img-tooltip" src={img[imgName]} />
+				</span>
+				<ReactTooltip
+					id={`${id}-management-tooltip`}
+					className="tooltip-text"
+					place="left"
+				/>
+			</div>
+		</div>
+	);
+};
+
+VariableResponse.defaultProps = {
+	response: {},
+};
+
+VariableResponse.propTypes = {
+	id: PropTypes.string,
+};
+
+export default VariableResponse;

package/src/components/commons/components/variable-status/variable-status.scss

@@ -0,0 +1,39 @@
+// Import index once for bundle
+@import 'src/components/index.scss';
+
+.lunatic-component-container-test {
+	display: flex;
+
+	.lunatic-component-body {
+		width: 80%;
+	}
+
+	/* Tooltip container */
+	.tooltip-lunatic {
+		margin: auto;
+		width: 20%;
+		position: relative;
+		display: block;
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	/* Tooltip text */
+	.tooltip-lunatic .tooltip-text {
+		min-width: 10em;
+		max-width: 20em;
+		background-color: var(--color-primary-dark);
+		color: #fff;
+		padding: 0.5em;
+		border-radius: 6px;
+		font-size: 1em;
+		&.place-left {
+			&::before {
+				border-left: 10px solid var(--color-primary-dark);
+			}
+			&::after {
+				content: none;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+function createCustomizableLunaticField(LunaticField) {
+	const Memoized = React.memo(LunaticField);
+	const { name } = LunaticField;
+
+	return function OverlayField(props) {
+		const { custom, ...rest } = props;
+		if (typeof custom === 'object' && name in custom) {
+			const CustomComponent = custom[name];
+			return <CustomComponent {...rest} />;
+		}
+
+		return <Memoized {...props} />;
+	};
+}
+
+export default createCustomizableLunaticField;

package/src/components/commons/create-row-orchestrator.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+function createRowOrchestrator(Row) {
+	return function RowOrchestrator({
+		id,
+		components,
+		nbRows,
+		valueMap,
+		handleChange,
+		features,
+		missing,
+		shortcut,
+		preferences,
+		executeExpression,
+		iteration,
+		xAxisIterations,
+		custom,
+	}) {
+		if (nbRows > 0) {
+			return new Array(nbRows).fill(null).map(function (_, index) {
+				const i = Math.trunc(index / xAxisIterations);
+				const j = index % xAxisIterations;
+				return (
+					<Row
+						key={index}
+						id={id}
+						rowIndex={index}
+						components={components}
+						valueMap={valueMap}
+						handleChange={handleChange}
+						executeExpression={executeExpression}
+						iteration={iteration}
+						linksIterations={[i, j]}
+						custom={custom}
+						/** */
+						features={features}
+						shortcut={shortcut}
+						preferences={preferences}
+						missing={missing}
+					/>
+				);
+			});
+		}
+		return null;
+	};
+}
+
+export default createRowOrchestrator;

package/src/components/commons/icons/checkbox-checked.icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function CheckboxCheckedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M0 0h24v24H0z" fill="none" />
+				<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default CheckboxCheckedIcon;

package/src/components/commons/icons/checkbox-unchecked.icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function CheckboxUncheckedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
+				<path d="M0 0h24v24H0z" fill="none" />
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default CheckboxUncheckedIcon;

package/src/components/commons/icons/closed.icon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function ClosedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 25.628748,11.329813 C 25.38152,11.109877 25.088459,11 24.749838,11 H 7.2500941 C 6.9113359,11 6.6184798,11.109877 6.3710468,11.329813 6.1236139,11.549992 6,11.810303 6,12.111233 c 0,0.300869 0.1236139,0.56118 0.3710468,0.781177 l 8.7499062,7.777534 C 15.368659,20.88988 15.661516,21 16,21 c 0.338484,0 0.631614,-0.11012 0.878842,-0.330056 l 8.749906,-7.777595 C 25.875907,12.672413 26,12.412102 26,12.111172 c 0,-0.300869 -0.124093,-0.56118 -0.371252,-0.781359 z"></path>
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default ClosedIcon;

package/src/components/commons/icons/cross.icon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function CrossIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 7.097006,7.0709627 C 6.4710386,7.6950801 6.0348033,8.5167883 6,9.3333333 l 6.666666,6.6666677 -6.6666655,6.666666 C 6.0406655,24.255963 7.7002437,25.930395 9.3333333,26 L 15.999999,19.333334 22.666665,26 C 24.255962,25.95934 25.930393,24.299755 26,22.666667 L 19.333332,16.000001 26,9.3333334 C 25.959335,7.7440359 24.299754,6.069605 22.666665,6 L 15.999999,12.666666 9.3333333,6 C 8.5386853,6.020332 7.7229758,6.4468492 7.097006,7.0709627 Z"></path>
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default CrossIcon;

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

@@ -0,0 +1,10 @@
+export { default as CrossIcon } from './cross.icon';
+export { default as ClosedIcon } from './closed.icon';
+export { default as OpenedIcon } from './opened.icon';
+export { default as LoadIcon } from './load.icon';
+export { default as NetworkIcon } from './network.icon';
+export { default as OnDragIcon } from './on-drag.icon';
+export { default as RadioChecked } from './radio-checked.icon';
+export { default as RadioUnchecked } from './radio-unchecked.icon';
+export { default as CheckboxChecked } from './checkbox-checked.icon';
+export { default as CheckboxUnchecked } from './checkbox-unchecked.icon';

package/src/components/commons/icons/load.icon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function ClosedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="m 10.628906,5.8808594 c -0.214987,-0.001 -0.42313,0.066105 -0.621094,0.203125 -0.197929,0.13695 -0.3337126,0.3059125 -0.4082026,0.5078125 -0.07434,0.20177 -0.063157,0.3725087 0.033203,0.5117187 L 10.667969,8.5996094 C 7.7654347,10.429719 6.000564,13.619938 6,17.054688 c 0,5.522849 4.477153,10 10,10 5.522847,0 10,-4.477151 10,-10 C 26.000084,13.846958 24.464581,10.867019 21.925781,9 l -2.167969,4.773438 c 0.779895,0.889532 1.238599,2.0462 1.242188,3.28125 0,2.76142 -2.238576,5 -5,5 -2.761424,0 -5,-2.238581 -5,-5 0.0042,-1.793391 0.969178,-3.443679 2.523438,-4.330079 l 1.089843,1.574219 c 0.09638,0.13927 0.25171,0.209318 0.466797,0.210938 0.215229,10e-4 0.421172,-0.06601 0.619141,-0.203125 0.19792,-0.13696 0.333879,-0.305933 0.408203,-0.507813 l 2.626953,-7.1386718 c 0.07422,-0.2019799 0.06311,-0.3725587 -0.0332,-0.5117187 -0.0963,-0.13917 -0.251768,-0.2093975 -0.4668,-0.2109375 z"></path>
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default ClosedIcon;

package/src/components/commons/icons/lunatic-icon.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import classnames from 'classnames';
+import './lunatic-icon.scss';
+
+function ClosedIcon({ className, children }) {
+	return <i className={classnames('lunatic-icon', className)}>{children}</i>;
+}
+
+export default ClosedIcon;

package/src/components/commons/icons/lunatic-icon.scss

@@ -0,0 +1,4 @@
+.lunatic-icon {
+	display: flex;
+	justify-content: center;
+}

package/src/components/commons/icons/network.icon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function CrossIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 16.211514,6 C 11.574486,6.008 7.1494292,7.94279 4,11.34621 c 0.067313,0.60594 0.3511557,1.08182 1.0781965,1.29181 2.8398143,-3.15866 6.8857655,-4.96513 11.1333175,-4.9708 4.246875,0.008 8.291469,1.81516 11.12987,4.9742 0.42856,-0.18331 0.899659,-0.21808 1.074753,-1.28833 C 25.269539,7.94895 20.847185,6.00922 16.211514,6 Z m 0,3.33452 c -3.859338,0.004 -7.5270269,1.68269 -10.055121,4.59867 0.082129,0.59595 0.3347147,1.09028 1.0747495,1.2918 2.214919,-2.67556 5.5069425,-4.22502 8.9803715,-4.22664 3.472148,0.004 6.761427,1.5572 8.973481,4.23352 0.574616,-0.21997 1.032388,-0.55661 1.081639,-1.30212 -2.528736,-2.91477 -6.196335,-4.59084 -10.05512,-4.59523 z m -0.0034,3.33101 c -3.084894,0.002 -5.995941,1.42878 -7.8883982,3.86498 0.015118,0.87625 0.5660293,1.08257 1.095416,1.31584 1.5613712,-2.20255 4.0931392,-3.51208 6.7929792,-3.51359 2.700508,0.004 5.231123,1.31845 6.789531,3.52395 0.886465,-0.21657 1.135403,-0.70692 1.098867,-1.31932 -1.891063,-2.43881 -4.802322,-3.8677 -7.888395,-3.87186 z m 0,3.33449 c -2.316849,0.002 -4.46631,1.20748 -5.676888,3.18293 L 16.211554,26 21.884999,19.18982 c -1.2089,-1.97805 -3.358668,-3.18598 -5.676885,-3.1898 z" />
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default CrossIcon;

package/src/components/commons/icons/on-drag.icon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function CrossIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 15.998805,0 C 15.791758,0 15.614821,0.068587 15.4636,0.2030911 L 10.109162,4.9578137 C 9.95798,5.0923491 9.884566,5.2516109 9.884566,5.4356753 c 0,0.1840189 0.07342,0.3431857 0.224596,0.4778615 0.151203,0.1345354 0.330468,0.2030913 0.537594,0.2030913 h 4.205182 V 14.854326 H 6.1166281 v -4.202792 c 0,-0.2072 -0.068555,-0.388637 -0.2030912,-0.539983 C 5.7788793,9.9602251 5.6197345,9.8845661 5.4356754,9.8845661 c -0.1840494,0 -0.3432982,0.07566 -0.4778615,0.2269849 L 0.2030911,15.4636 C 0.0685559,15.615109 1.2e-6,15.794159 0,16.001195 0,16.208242 0.068592,16.385179 0.2030911,16.5364 l 4.7547228,5.352049 c 0.1345352,0.151182 0.2937975,0.226985 0.4778615,0.226985 0.1840188,0 0.3431856,-0.07581 0.4778615,-0.226985 0.1345353,-0.151203 0.2030912,-0.328079 0.2030912,-0.535205 v -4.205182 h 8.7353099 v 8.73531 h -4.202794 c -0.207124,0 -0.388779,0.06855 -0.539982,0.203092 -0.151179,0.134675 -0.224596,0.293842 -0.224596,0.477861 0,0.184064 0.07341,0.343326 0.224596,0.477862 L 15.4636,31.796909 C 15.614821,31.931407 15.794147,32 16.001195,32 c 0.207036,-1e-6 0.383696,-0.06855 0.535205,-0.203091 l 5.352049,-4.754722 c 0.151326,-0.134563 0.226985,-0.293813 0.226985,-0.477862 0,-0.184058 -0.07566,-0.343204 -0.226985,-0.477861 -0.151346,-0.134536 -0.337561,-0.203092 -0.544762,-0.203092 h -4.198013 v -8.73531 h 8.737698 v 4.202793 c 0,0.207125 0.06855,0.386391 0.203092,0.537594 0.134675,0.151179 0.293842,0.226985 0.477861,0.226985 0.184064,0 0.343326,-0.0758 0.477862,-0.226985 L 31.796909,16.5364 C 31.931407,16.385179 32,16.205853 32,15.998805 31.999999,15.791768 31.93144,15.615109 31.796909,15.4636 L 27.042187,10.111551 C 26.907624,9.9602251 26.748374,9.8845661 26.564325,9.8845661 c -0.184058,0 -0.343204,0.07566 -0.477861,0.2269849 -0.134536,0.151346 -0.203092,0.335171 -0.203092,0.542372 v 4.200403 H 17.145674 V 6.1166281 h 4.200403 c 0.207201,0 0.391026,-0.068557 0.542372,-0.2030913 0.151326,-0.1346576 0.226985,-0.2938028 0.226985,-0.4778615 0,-0.1840494 -0.07566,-0.3432989 -0.226985,-0.4778616 L 16.5364,0.2030911 C 16.384891,0.0685559 16.205841,1.5e-6 15.998805,0 Z" />
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default CrossIcon;

package/src/components/commons/icons/opened.icon.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function OpenedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M 11.329813,6.371252 C 11.109877,6.61848 11,6.911541 11,7.250162 v 17.499744 c 0,0.338758 0.109877,0.631614 0.329813,0.879047 C 11.549992,25.876386 11.810303,26 12.111233,26 c 0.300869,0 0.56118,-0.123614 0.781177,-0.371047 l 7.777534,-8.749906 C 20.88988,16.631341 21,16.338484 21,16 21,15.661516 20.88988,15.368386 20.669944,15.121158 L 12.892349,6.371252 C 12.672413,6.124093 12.412102,6 12.111172,6 11.810303,6 11.549992,6.124093 11.329813,6.371252 Z"></path>
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default OpenedIcon;

package/src/components/commons/icons/radio-checked.icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function RadioCheckedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+				<path d="M0 0h24v24H0z" fill="none" />
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default RadioCheckedIcon;

package/src/components/commons/icons/radio-unchecked.icon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import LunaticIcon from './lunatic-icon';
+
+function RadioUncheckedIcon({ className, width = 32, height = 32 }) {
+	return (
+		<LunaticIcon className={className}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width={width}
+				height={height}
+				x="0"
+				y="0"
+				enableBackground="new 0 0 32 32"
+				version="1.1"
+				viewBox="0 0 32 32"
+				xmlSpace="preserve"
+			>
+				<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+				<path d="M0 0h24v24H0z" fill="none" />
+			</svg>
+		</LunaticIcon>
+	);
+}
+
+export default RadioUncheckedIcon;

package/src/components/commons/index.js

@@ -0,0 +1,18 @@
+export { default as FieldContainer } from './components/field-container';
+export { default as Label } from './components/label';
+export { default as Fieldset } from './components/fieldset';
+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';
+export { default as buildStyleObject } from './build-style-object';
+export { default as useDocumentAddEventListener } from './use-document-add-event-listener';
+export { default as NothingToDisplay } from './components/nothing-to-display';
+export { default as createRowOrchestrator } from './create-row-orchestrator';
+export { default as OrchestratedComponent } from './components/orchestrated-component';
+export { default as ComboBox } from './components/combo-box';
+export * as HtmlTable from './components/html-table';
+export { default as DefaultOptionRenderer } from './components/default-option-renderer';
+export { default as DefaultLabelRenderer } from './components/default-label-renderer';
+export { default as safetyLabel } from './safety-label';
+export { default as createLunaticComponent } from './components/create-lunatic-component';

package/src/{utils/lib → components/commons}/prop-types/declarations.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import * as C from '../../constants';
+import * as C from '../../../constants';
 
 export default PropTypes.arrayOf(
 	PropTypes.shape({

package/src/components/commons/prop-types/lines.js

@@ -0,0 +1,6 @@
+import PropTypes from 'prop-types';
+
+export default PropTypes.shape({
+	min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+});