@inseefr/lunatic 0.2.2-experimental → 0.2.3-prisme

package/src/components/table/table.js

@@ -1,171 +1,173 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
-import * as lunatic from '../components';
-import Declarations from '../declarations';
-import * as U from '../../utils/lib';
-import * as C from '../../constants';
-import { interpret } from '../../utils/to-expose';
-import './table.scss';
-
-const Table = ({
-	id: tableId,
-	label: tableLabel,
-	preferences,
-	cells,
-	handleChange,
-	lines: initLines,
-	positioning,
-	declarations,
-	features,
-	bindings,
-	addBtnLabel,
-	hideBtn,
-	management,
-	numberAsTextfield,
-	logFunction,
-}) => {
-	const minLines = initLines
-		? Math.max(initLines.min, U.getRosterInitLines(cells))
-		: undefined;
-	const maxLines = initLines ? initLines.max : undefined;
-	const [lines, setLines] = useState(minLines);
-
-	const width = `${100 / Math.max(...cells.map((line) => line.length))}%`;
-	const Button = lunatic.Button;
-	return (
-		<>
-			<Declarations
-				id={tableId}
-				type={C.BEFORE_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			{tableLabel && (
-				<label
-					htmlFor={`table-one-axis-${tableId}`}
-					id={`table-one-axis-label-${tableId}`}
-				>
-					{interpret(features, logFunction)(bindings)(tableLabel)}
-				</label>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.AFTER_QUESTION_TEXT}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-			<table id={`table-${tableId}`} className="table-lunatic">
-				<tbody>
-					{(minLines || minLines === 0 ? cells.slice(0, lines + 1) : cells).map(
-						(line, i) => (
-							<tr key={`table-${tableId}-line${i}`}>
-								{line.map((component, j) => {
-									const {
-										label,
-										headerCell,
-										colspan,
-										rowspan,
-										componentType,
-										...componentProps
-									} = component;
-									if (componentType) {
-										const Component = lunatic[componentType];
-										return (
-											<td
-												key={`table-${tableId}-line${i}-cell-${j}`}
-												style={{ width }}
-											>
-												<Component
-													label={label || ' '}
-													handleChange={handleChange}
-													preferences={preferences}
-													positioning={positioning}
-													management={management}
-													features={features}
-													bindings={bindings}
-													{...componentProps}
-													zIndex={cells.length - i || 0}
-													numberAsTextfield
-													logFunction={logFunction}
-													shortcut={false}
-												/>
-											</td>
-										);
-									}
-									const cellOptions = {
-										key: `table-${tableId}-line${i}-cell-${j}`,
-										style: { width },
-										colSpan: colspan || 1,
-										rowSpan: rowspan || 1,
-									};
-									const interpretedLabel = interpret(
-										features,
-										logFunction
-									)(bindings)(label);
-									return headerCell ? (
-										<th {...cellOptions}>{interpretedLabel}</th>
-									) : (
-										<td {...cellOptions}>{interpretedLabel}</td>
-									);
-								})}
-							</tr>
-						)
-					)}
-				</tbody>
-			</table>
-			{Number.isInteger(minLines) && lines < maxLines && !hideBtn && (
-				<Button
-					label="addLine"
-					value={addBtnLabel}
-					onClick={() => setLines(lines + 1)}
-					id={tableId}
-					logFunction={logFunction}
-				/>
-			)}
-			<Declarations
-				id={tableId}
-				type={C.DETACHABLE}
-				declarations={declarations}
-				features={features}
-				bindings={bindings}
-			/>
-		</>
-	);
-};
-
-Table.defaultProps = {
-	label: '',
-	preferences: ['COLLECTED'],
-	cells: [],
-	lines: {},
-	positioning: 'DEFAULT',
-	declarations: [],
-	features: [],
-	bindings: {},
-	addBtnLabel: 'Add a line',
-	management: false,
-	hideBtn: false,
-	style: {},
-};
-
-Table.propTypes = {
-	id: PropTypes.string.isRequired,
-	label: PropTypes.string,
-	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
-	cells: PropTypes.array,
-	handleChange: PropTypes.func.isRequired,
-	lines: U.linesPropTypes,
-	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
-	declarations: U.declarationsPropTypes,
-	features: PropTypes.arrayOf(PropTypes.string),
-	bindings: PropTypes.object,
-	addBtnLabel: PropTypes.string,
-	hideBtn: PropTypes.bool,
-	management: PropTypes.bool,
-	style: PropTypes.object,
-};
-
-export default missingWrapper(React.memo(Table), U.areEqual);
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import componentWrapper from '../component-wrapper';
+import * as lunatic from '../components';
+import Declarations from '../declarations';
+import * as U from '../../utils/lib';
+import * as C from '../../constants';
+import { interpret } from '../../utils/to-expose';
+import './table.scss';
+
+const Table = ({
+	id: tableId,
+	label: tableLabel,
+	preferences,
+	cells,
+	handleChange,
+	lines: initLines,
+	positioning,
+	declarations,
+	features,
+	bindings,
+	addBtnLabel,
+	hideBtn,
+	management,
+	numberAsTextfield,
+	logFunction,
+	...rest
+}) => {
+	const minLines = initLines
+		? Math.max(initLines.min, U.getRosterInitLines(cells))
+		: undefined;
+	const maxLines = initLines ? initLines.max : undefined;
+	const [lines, setLines] = useState(minLines);
+
+	const width = `${100 / Math.max(...cells.map((line) => line.length))}%`;
+	const Button = lunatic.Button;
+	return (
+		<>
+			<Declarations
+				id={tableId}
+				type={C.BEFORE_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			{tableLabel && (
+				<label
+					htmlFor={`table-one-axis-${tableId}`}
+					id={`table-one-axis-label-${tableId}`}
+				>
+					{interpret(features, logFunction)(bindings)(tableLabel)}
+				</label>
+			)}
+			<Declarations
+				id={tableId}
+				type={C.AFTER_QUESTION_TEXT}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+			<table id={`table-${tableId}`} className="table-lunatic">
+				<tbody>
+					{(minLines || minLines === 0 ? cells.slice(0, lines + 1) : cells).map(
+						(line, i) => (
+							<tr key={`table-${tableId}-line${i}`}>
+								{line.map((component, j) => {
+									const {
+										label,
+										headerCell,
+										colspan,
+										rowspan,
+										componentType,
+										...componentProps
+									} = component;
+									if (componentType) {
+										const Component = lunatic[componentType];
+										return (
+											<td
+												key={`table-${tableId}-line${i}-cell-${j}`}
+												style={{ width }}
+											>
+												<Component
+													{...rest}
+													label={label || ' '}
+													handleChange={handleChange}
+													preferences={preferences}
+													positioning={positioning}
+													management={management}
+													features={features}
+													bindings={bindings}
+													{...componentProps}
+													zIndex={cells.length - i || 0}
+													numberAsTextfield={numberAsTextfield}
+													logFunction={logFunction}
+													shortcut={false}
+												/>
+											</td>
+										);
+									}
+									const cellOptions = {
+										key: `table-${tableId}-line${i}-cell-${j}`,
+										style: { width },
+										colSpan: colspan || 1,
+										rowSpan: rowspan || 1,
+									};
+									const interpretedLabel = interpret(
+										features,
+										logFunction
+									)(bindings)(label);
+									return headerCell ? (
+										<th {...cellOptions}>{interpretedLabel}</th>
+									) : (
+										<td {...cellOptions}>{interpretedLabel}</td>
+									);
+								})}
+							</tr>
+						)
+					)}
+				</tbody>
+			</table>
+			{Number.isInteger(minLines) && lines < maxLines && !hideBtn && (
+				<Button
+					label="addLine"
+					value={addBtnLabel}
+					onClick={() => setLines(lines + 1)}
+					id={tableId}
+					logFunction={logFunction}
+				/>
+			)}
+			<Declarations
+				id={tableId}
+				type={C.DETACHABLE}
+				declarations={declarations}
+				features={features}
+				bindings={bindings}
+			/>
+		</>
+	);
+};
+
+Table.defaultProps = {
+	label: '',
+	preferences: ['COLLECTED'],
+	cells: [],
+	lines: {},
+	positioning: 'DEFAULT',
+	declarations: [],
+	features: [],
+	bindings: {},
+	addBtnLabel: 'Add a line',
+	management: false,
+	hideBtn: false,
+	style: {},
+};
+
+Table.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	preferences: PropTypes.arrayOf(U.valueTypePropTypes),
+	cells: PropTypes.array,
+	handleChange: PropTypes.func.isRequired,
+	lines: U.linesPropTypes,
+	positioning: PropTypes.oneOf(['DEFAULT', 'HORIZONTAL', 'VERTICAL']),
+	declarations: U.declarationsPropTypes,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	addBtnLabel: PropTypes.string,
+	hideBtn: PropTypes.bool,
+	management: PropTypes.bool,
+	style: PropTypes.object,
+};
+
+export default componentWrapper(React.memo(Table, U.areEqual));

package/src/components/table/table.scss

@@ -1,26 +1,26 @@
-.lunatic-component {
-	.table-lunatic {
-		table-layout: fixed;
-		border-collapse: collapse;
-		margin-top: 0.3em;
-		margin-bottom: 0.3em;
-		& td,
-		th {
-			border: 0.15em solid var(--color-primary-dark);
-			padding: 0.2em;
-		}
-		& td {
-			.field,
-			.field-with-tooltip {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-			}
-		}
-	}
-
-	.table-lunatic .tooltip-lunatic img {
-		height: 20px;
-		width: 20px;
-	}
-}
+.lunatic-component {
+	.table-lunatic {
+		table-layout: fixed;
+		border-collapse: collapse;
+		margin-top: 0.3em;
+		margin-bottom: 0.3em;
+		& td,
+		th {
+			border: 0.15em solid var(--color-primary-dark);
+			padding: 0.2em;
+		}
+		& td {
+			.field,
+			.field-with-tooltip {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+
+	.table-lunatic .tooltip-lunatic img {
+		height: 20px;
+		width: 20px;
+	}
+}

package/src/components/textarea/component.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import missingWrapper from '../missing-wrapper';
-import { InputDeclarationsWrapper } from '../declarations/wrappers';
-import { areEqual } from '../../utils/lib';
-import './textarea.scss';
-
-const Textarea = (props) => (
-	<InputDeclarationsWrapper type={null} roleType="textarea" {...props} />
-);
-
-export default missingWrapper(React.memo(Textarea, areEqual));
+import React from 'react';
+import componentWrapper from '../component-wrapper';
+import { InputDeclarationsWrapper } from '../declarations/wrappers';
+import { areEqual } from '../../utils/lib';
+import './textarea.scss';
+
+const Textarea = (props) => (
+	<InputDeclarationsWrapper type={null} roleType="textarea" {...props} />
+);
+
+export default componentWrapper(React.memo(Textarea, areEqual));

package/src/components/textarea/textarea.scss

@@ -1,8 +1,8 @@
-// see input.scss
-
-.lunatic-component {
-	.textarea-lunatic {
-		height: 3em;
-		width: 100%;
-	}
-}
+// see input.scss
+
+.lunatic-component {
+	.textarea-lunatic {
+		height: 3em;
+		width: 100%;
+	}
+}

package/src/components/tooltip/tooltip.scss

@@ -1,30 +1,30 @@
-// Import index once for bundle
-@import 'src/components/index.scss';
-
-.lunatic-component {
-	/* Tooltip container */
-	.tooltip-lunatic {
-		position: relative;
-		display: inline-block;
-		align-items: center;
-	}
-
-	/* 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;
-			}
-		}
-	}
-}
+// Import index once for bundle
+@import 'src/components/index.scss';
+
+.lunatic-component {
+	/* Tooltip container */
+	.tooltip-lunatic {
+		position: relative;
+		display: inline-block;
+		align-items: center;
+	}
+
+	/* 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/stories/checkbox-boolean/data.json

@@ -1,78 +1,78 @@
-{
-	"components": [
-		{
-			"id": "1",
-			"componentType": "CheckboxBoolean",
-			"mandatory": false,
-			"label": "➡ 1. Are you ready?",
-			"response": {
-				"name": "READY"
-			},
-			"missingResponse": {
-				"name": "READY_MISSING"
-			}
-		},
-		{
-			"id": "2",
-			"componentType": "CheckboxBoolean",
-			"mandatory": false,
-			"label": "➡ 2. Are you always ready?",
-			"response": {
-				"name": "READY2"
-			},
-			"missingResponse": {
-				"name": "READY2_MISSING"
-			}
-		}
-	],
-	"variables": [
-		{
-			"variableType": "COLLECTED",
-			"name": "READY",
-			"componentRef": "1",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "READY_MISSING",
-			"componentRef": "1",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "READY2",
-			"componentRef": "2",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": true,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		},
-		{
-			"variableType": "COLLECTED",
-			"name": "READY2_MISSING",
-			"componentRef": "2",
-			"values": {
-				"PREVIOUS": null,
-				"COLLECTED": null,
-				"FORCED": null,
-				"EDITED": null,
-				"INPUTED": null
-			}
-		}
-	]
-}
+{
+	"components": [
+		{
+			"id": "1",
+			"componentType": "CheckboxBoolean",
+			"mandatory": false,
+			"label": "➡ 1. Are you ready?",
+			"response": {
+				"name": "READY"
+			},
+			"missingResponse": {
+				"name": "READY_MISSING"
+			}
+		},
+		{
+			"id": "2",
+			"componentType": "CheckboxBoolean",
+			"mandatory": false,
+			"label": "➡ 2. Are you always ready?",
+			"response": {
+				"name": "READY2"
+			},
+			"missingResponse": {
+				"name": "READY2_MISSING"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "READY",
+			"componentRef": "1",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "READY_MISSING",
+			"componentRef": "1",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "READY2",
+			"componentRef": "2",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": true,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		},
+		{
+			"variableType": "COLLECTED",
+			"name": "READY2_MISSING",
+			"componentRef": "2",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/datepicker/data.json

@@ -11,7 +11,9 @@
 			"dateFormat": "jj/mm/aaaa",
 			"missingResponse": {
 				"name": "DATEFIRST_MISSING"
-			}
+			},
+			"min": "1900-01-01",
+			"max": "2099-12-31"
 		}
 	],
 	"variables": [