@inseefr/lunatic 0.1.0-hackathon → 0.1.0-prisme

package/src/components/suggester-loader-widget/tools/tools.js

@@ -1,7 +1,7 @@
-import React from 'react';
-
-function Tools({ children }) {
-	return <div className="lunatic-widget-tools">{children}</div>;
-}
-
-export default Tools;
+import React from 'react';
+
+function Tools({ children }) {
+	return <div className="lunatic-widget-tools">{children}</div>;
+}
+
+export default Tools;

package/src/components/suggester-loader-widget/widget-container.js

@@ -1,35 +1,35 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import classnames from 'classnames';
-
-function WidgetContainer({ children, drag, absolute }, containerEl) {
-	if (absolute) {
-		return ReactDOM.createPortal(
-			<div
-				className={classnames('lunatic-suggester-widget-container', {
-					absolute,
-				})}
-				ref={containerEl}
-			>
-				<div className={classnames('lunatic-suggester-widget', { drag })}>
-					{children}
-				</div>
-			</div>,
-			document.body
-		);
-	}
-	return (
-		<div
-			className={classnames('lunatic-suggester-widget-container', {
-				absolute,
-			})}
-			ref={containerEl}
-		>
-			<div className={classnames('lunatic-suggester-widget', { drag })}>
-				{children}
-			</div>
-		</div>
-	);
-}
-
-export default React.forwardRef(WidgetContainer);
+import React from 'react';
+import ReactDOM from 'react-dom';
+import classnames from 'classnames';
+
+function WidgetContainer({ children, drag, absolute }, containerEl) {
+	if (absolute) {
+		return ReactDOM.createPortal(
+			<div
+				className={classnames('lunatic-suggester-widget-container', {
+					absolute,
+				})}
+				ref={containerEl}
+			>
+				<div className={classnames('lunatic-suggester-widget', { drag })}>
+					{children}
+				</div>
+			</div>,
+			document.body
+		);
+	}
+	return (
+		<div
+			className={classnames('lunatic-suggester-widget-container', {
+				absolute,
+			})}
+			ref={containerEl}
+		>
+			<div className={classnames('lunatic-suggester-widget', { drag })}>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export default React.forwardRef(WidgetContainer);

package/src/components/suggester-loader-widget/widget.scss

@@ -1,176 +1,176 @@
-$colorA: #e9d0d0;
-$colorB: darkred;
-$colorC: #320000;
-$colorD: goldenrod;
-
-@mixin preventSelect() {
-	-moz-user-select: -moz-none;
-	-khtml-user-select: none;
-	-webkit-user-select: none;
-}
-
-@mixin onDrag() {
-	&.drag {
-		box-shadow: $colorD 0px 3px 8px;
-		transition: box-shadow 0.5s;
-	}
-}
-
-.lunatic-suggester-widget-container {
-	&.absolute {
-		position: fixed;
-		z-index: 1;
-	}
-	.lunatic-suggester-widget {
-		position: relative;
-		border: solid $colorB 2px;
-		background-color: $colorA;
-		padding: 4px 4px;
-		border: 2px 2px;
-		width: 400px;
-		box-shadow: $colorC 0px 3px 8px;
-
-		@include onDrag();
-
-		.widget-row {
-			height: 22px;
-			display: flex;
-			flex-direction: row;
-			margin-bottom: 1px;
-			.store-name {
-				width: 60%;
-				color: $colorB;
-				font-size: 18px;
-				white-space: nowrap;
-				overflow-x: hidden;
-			}
-			.stats {
-				color: $colorB;
-				font-size: 18px;
-				white-space: nowrap;
-				overflow-x: hidden;
-				width: 40%;
-			}
-			.widget-button {
-				margin: 0 1px 0 0;
-				padding: 0;
-				border: none;
-				width: 18px;
-				height: 18px;
-				background-color: $colorB;
-
-				&.disabled {
-					background-color: gray;
-					cursor: default;
-				}
-
-				&:hover {
-					background-color: $colorC;
-					transition: background-color 1s;
-					cursor: pointer;
-				}
-
-				.lunatic-suggester-icon {
-					svg {
-						width: 18px;
-						height: 18px;
-						fill: $colorA;
-					}
-				}
-			}
-
-			.lunatic-suggester-loader-progress {
-				height: inherit;
-				border: solid 1px $colorB;
-				border-radius: 2px;
-				width: 70%;
-
-				&.done {
-					&:hover {
-						border-color: $colorC;
-						transition: border-color 1s;
-						.progress {
-							background-color: $colorC;
-							transition: background-color 1s;
-						}
-
-						cursor: pointer;
-					}
-				}
-
-				.content {
-					padding: 2px 2px;
-					height: calc(100%);
-					width: 100%;
-					.progress {
-						background-color: $colorB;
-						height: 100%;
-					}
-				}
-			}
-		}
-
-		.suggester-widget-network {
-			position: absolute;
-			border: solid $colorB 2px;
-			left: 6px;
-			background-color: $colorA;
-			border-radius: 50%;
-			padding: 2px 2px;
-			left: -22px;
-			top: -22px;
-			box-shadow: $colorC 0px 3px 8px;
-
-			&.online {
-				svg {
-					fill: forestgreen;
-				}
-			}
-
-			svg {
-				width: 24px;
-				height: 24px;
-				fill: $colorB;
-			}
-
-			@include onDrag();
-		}
-
-		.lunatic-widget-tools {
-			position: absolute;
-			right: 0;
-			top: -18px;
-			margin-top: -4px;
-
-			.lunatic-action-tool {
-				display: inline-block;
-				height: 18px;
-				width: 18px;
-				background-color: $colorB;
-				border-radius: 50%;
-				margin-left: 2px;
-
-				&:hover {
-					box-shadow: $colorC 0px 3px 8px;
-				}
-
-				&.drag {
-					background-color: $colorD;
-					transition: background-color 0.5s;
-				}
-
-				.on-drag-icon {
-					cursor: grab;
-					&.drag {
-						cursor: grabbing;
-					}
-					svg {
-						width: 16px;
-						height: 16px;
-						fill: $colorA;
-					}
-				}
-			}
-		}
-	}
-}
+$colorA: #e9d0d0;
+$colorB: darkred;
+$colorC: #320000;
+$colorD: goldenrod;
+
+@mixin preventSelect() {
+	-moz-user-select: -moz-none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+}
+
+@mixin onDrag() {
+	&.drag {
+		box-shadow: $colorD 0px 3px 8px;
+		transition: box-shadow 0.5s;
+	}
+}
+
+.lunatic-suggester-widget-container {
+	&.absolute {
+		position: fixed;
+		z-index: 1;
+	}
+	.lunatic-suggester-widget {
+		position: relative;
+		border: solid $colorB 2px;
+		background-color: $colorA;
+		padding: 4px 4px;
+		border: 2px 2px;
+		width: 400px;
+		box-shadow: $colorC 0px 3px 8px;
+
+		@include onDrag();
+
+		.widget-row {
+			height: 22px;
+			display: flex;
+			flex-direction: row;
+			margin-bottom: 1px;
+			.store-name {
+				width: 60%;
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+			}
+			.stats {
+				color: $colorB;
+				font-size: 18px;
+				white-space: nowrap;
+				overflow-x: hidden;
+				width: 40%;
+			}
+			.widget-button {
+				margin: 0 1px 0 0;
+				padding: 0;
+				border: none;
+				width: 18px;
+				height: 18px;
+				background-color: $colorB;
+
+				&.disabled {
+					background-color: gray;
+					cursor: default;
+				}
+
+				&:hover {
+					background-color: $colorC;
+					transition: background-color 1s;
+					cursor: pointer;
+				}
+
+				.lunatic-suggester-icon {
+					svg {
+						width: 18px;
+						height: 18px;
+						fill: $colorA;
+					}
+				}
+			}
+
+			.lunatic-suggester-loader-progress {
+				height: inherit;
+				border: solid 1px $colorB;
+				border-radius: 2px;
+				width: 70%;
+
+				&.done {
+					&:hover {
+						border-color: $colorC;
+						transition: border-color 1s;
+						.progress {
+							background-color: $colorC;
+							transition: background-color 1s;
+						}
+
+						cursor: pointer;
+					}
+				}
+
+				.content {
+					padding: 2px 2px;
+					height: calc(100%);
+					width: 100%;
+					.progress {
+						background-color: $colorB;
+						height: 100%;
+					}
+				}
+			}
+		}
+
+		.suggester-widget-network {
+			position: absolute;
+			border: solid $colorB 2px;
+			left: 6px;
+			background-color: $colorA;
+			border-radius: 50%;
+			padding: 2px 2px;
+			left: -22px;
+			top: -22px;
+			box-shadow: $colorC 0px 3px 8px;
+
+			&.online {
+				svg {
+					fill: forestgreen;
+				}
+			}
+
+			svg {
+				width: 24px;
+				height: 24px;
+				fill: $colorB;
+			}
+
+			@include onDrag();
+		}
+
+		.lunatic-widget-tools {
+			position: absolute;
+			right: 0;
+			top: -18px;
+			margin-top: -4px;
+
+			.lunatic-action-tool {
+				display: inline-block;
+				height: 18px;
+				width: 18px;
+				background-color: $colorB;
+				border-radius: 50%;
+				margin-left: 2px;
+
+				&:hover {
+					box-shadow: $colorC 0px 3px 8px;
+				}
+
+				&.drag {
+					background-color: $colorD;
+					transition: background-color 0.5s;
+				}
+
+				.on-drag-icon {
+					cursor: grab;
+					&.drag {
+						cursor: grabbing;
+					}
+					svg {
+						width: 16px;
+						height: 16px;
+						fill: $colorA;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/table/index.js

@@ -1 +1 @@
-export { default } from './table';
+export { default } from './table';

package/src/components/table/table.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import missingWrapper from '../missing-wrapper';
+import componentWrapper from '../component-wrapper';
 import * as lunatic from '../components';
 import Declarations from '../declarations';
 import * as U from '../../utils/lib';
@@ -24,6 +24,7 @@ const Table = ({
 	management,
 	numberAsTextfield,
 	logFunction,
+	...rest
 }) => {
 	const minLines = initLines
 		? Math.max(initLines.min, U.getRosterInitLines(cells))
@@ -79,6 +80,7 @@ const Table = ({
 												style={{ width }}
 											>
 												<Component
+													{...rest}
 													label={label || ' '}
 													handleChange={handleChange}
 													preferences={preferences}
@@ -88,7 +90,7 @@ const Table = ({
 													bindings={bindings}
 													{...componentProps}
 													zIndex={cells.length - i || 0}
-													numberAsTextfield
+													numberAsTextfield={numberAsTextfield}
 													logFunction={logFunction}
 													shortcut={false}
 												/>
@@ -168,4 +170,4 @@ Table.propTypes = {
 	style: PropTypes.object,
 };
 
-export default missingWrapper(React.memo(Table), U.areEqual);
+export default componentWrapper(React.memo(Table, U.areEqual));

package/src/components/textarea/component.js

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

package/src/components/textarea/index.js

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

package/src/components/tooltip/img/index.js

@@ -1,4 +1,4 @@
-import editedImg from './edited.png';
-import forcedImg from './forced.png';
-
-export { editedImg, forcedImg };
+import editedImg from './edited.png';
+import forcedImg from './forced.png';
+
+export { editedImg, forcedImg };

package/src/components/tooltip/index.js

@@ -1 +1 @@
-export { default as TooltipResponse } from './response';
+export { default as TooltipResponse } from './response';

package/src/components/tooltip/response.js

@@ -1,52 +1,52 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import ReactTooltip from 'react-tooltip';
-import * as U from '../../utils/lib';
-import * as img from './img';
-import './tooltip.scss';
-
-const TooltipResponse = ({ id, response }) => {
-	const [tooltipElements, setTooltipElements] = useState(() =>
-		U.buildTooltip(response)
-	);
-
-	useEffect(() => {
-		setTooltipElements(U.buildTooltip(response));
-	}, [response]);
-
-	const { content, imgName } = tooltipElements;
-
-	if (!content) return null;
-
-	const text = content
-		.map(({ key, value }) => `${key} : ${value}<br />`)
-		.join('');
-
-	return (
-		<div className="tooltip-lunatic">
-			<span
-				data-for={`${id}-management-tooltip`}
-				data-tip={text}
-				data-multiline
-			>
-				<img id={id} alt="img-tooltip" src={img[imgName].src || img[imgName]} />
-			</span>
-			<ReactTooltip
-				id={`${id}-management-tooltip`}
-				className="tooltip-text"
-				place="left"
-			/>
-		</div>
-	);
-};
-
-TooltipResponse.defaultProps = {
-	response: {},
-};
-
-TooltipResponse.propTypes = {
-	id: PropTypes.string,
-	response: U.responsePropTypes,
-};
-
-export default TooltipResponse;
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
+import * as U from '../../utils/lib';
+import * as img from './img';
+import './tooltip.scss';
+
+const TooltipResponse = ({ id, response }) => {
+	const [tooltipElements, setTooltipElements] = useState(() =>
+		U.buildTooltip(response)
+	);
+
+	useEffect(() => {
+		setTooltipElements(U.buildTooltip(response));
+	}, [response]);
+
+	const { content, imgName } = tooltipElements;
+
+	if (!content) return null;
+
+	const text = content
+		.map(({ key, value }) => `${key} : ${value}<br />`)
+		.join('');
+
+	return (
+		<div className="tooltip-lunatic">
+			<span
+				data-for={`${id}-management-tooltip`}
+				data-tip={text}
+				data-multiline
+			>
+				<img id={id} alt="img-tooltip" src={img[imgName].src || img[imgName]} />
+			</span>
+			<ReactTooltip
+				id={`${id}-management-tooltip`}
+				className="tooltip-text"
+				place="left"
+			/>
+		</div>
+	);
+};
+
+TooltipResponse.defaultProps = {
+	response: {},
+};
+
+TooltipResponse.propTypes = {
+	id: PropTypes.string,
+	response: U.responsePropTypes,
+};
+
+export default TooltipResponse;

package/src/constants/component-types.js

@@ -1 +1 @@
-export const CHECKBOX_GROUP = 'CheckboxGroup';
+export const CHECKBOX_GROUP = 'CheckboxGroup';

package/src/constants/declarations.js

@@ -1,14 +1,14 @@
-// Declaration position
-
-export const BEFORE_QUESTION_TEXT = 'BEFORE_QUESTION_TEXT';
-export const AFTER_QUESTION_TEXT = 'AFTER_QUESTION_TEXT';
-export const DETACHABLE = 'DETACHABLE';
-
-// Declaration types
-
-export const INSTRUCTION = 'INSTRUCTION';
-export const COMMENT = 'COMMENT';
-export const HELP = 'HELP';
-export const WARNING = 'WARNING';
-export const MESSAGE_FILTER = 'MESSAGE_FILTER';
-export const STATEMENT = 'STATEMENT';
+// Declaration position
+
+export const BEFORE_QUESTION_TEXT = 'BEFORE_QUESTION_TEXT';
+export const AFTER_QUESTION_TEXT = 'AFTER_QUESTION_TEXT';
+export const DETACHABLE = 'DETACHABLE';
+
+// Declaration types
+
+export const INSTRUCTION = 'INSTRUCTION';
+export const COMMENT = 'COMMENT';
+export const HELP = 'HELP';
+export const WARNING = 'WARNING';
+export const MESSAGE_FILTER = 'MESSAGE_FILTER';
+export const STATEMENT = 'STATEMENT';

package/src/constants/event-types.js

@@ -1,13 +1,13 @@
-// Event types for paradata
-export const EVENT_FOCUS_IN = 'focus-in';
-export const EVENT_FOCUS_OUT = 'focus-out';
-export const EVENT_SELECTION = 'selection';
-export const EVENT_CLICK = 'click';
-export const EVENT_VALUE_CHANGE = 'value-changed';
-
-// Category of object
-export const INPUT_CATEGORY = 'lunatic-input';
-export const BUTTON_CATEGORY = 'lunatic-button';
-export const LINK_CATEGORY = 'lunatic-link';
-export const TOOLTIP_CATEGORY = 'lunatic-tooltip';
-export const CALCULATED_VAR_CATEGORY = 'lunatic-calculated-var';
+// Event types for paradata
+export const EVENT_FOCUS_IN = 'focus-in';
+export const EVENT_FOCUS_OUT = 'focus-out';
+export const EVENT_SELECTION = 'selection';
+export const EVENT_CLICK = 'click';
+export const EVENT_VALUE_CHANGE = 'value-changed';
+
+// Category of object
+export const INPUT_CATEGORY = 'lunatic-input';
+export const BUTTON_CATEGORY = 'lunatic-button';
+export const LINK_CATEGORY = 'lunatic-link';
+export const TOOLTIP_CATEGORY = 'lunatic-tooltip';
+export const CALCULATED_VAR_CATEGORY = 'lunatic-calculated-var';