@inseefr/lunatic 0.3.4-experimental → 0.3.4-v2

package/src/components/switch/switch.scss

@@ -0,0 +1,47 @@
+.lunatic-switch {
+	display: flex;
+	flex-direction: row;
+
+	.lunatic-switch-label {
+		height: 100%;
+		line-height: 26px;
+		&.checked {
+			font-weight: bold;
+		}
+	}
+
+	.lunatic-switch-container {
+		display: inline-block;
+		height: 26px;
+		width: 52px;
+		background-color: lightgrey;
+		border-radius: 13px;
+		position: relative;
+		margin: 2px;
+
+		cursor: pointer;
+
+		.lunatic-switch-button {
+			position: absolute;
+			height: 22px;
+			width: 22px;
+			background-color: white;
+			border-radius: 11px;
+			margin: 2px;
+
+			-webkit-transition: 0.3s;
+			transition: 0.3s;
+		}
+
+		&.disabled {
+		}
+		&.checked {
+			background-color: royalblue;
+			.lunatic-switch-button {
+				-webkit-transform: translateX(26px);
+				-ms-transform: translateX(26px);
+				transform: translateX(26px);
+			}
+		}
+	}
+}

package/src/components/table/cell.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { OrchestratedComponent } from '../commons';
+import { Td as HtmlTd } from '../commons/components/html-table';
+
+function collecteResponseValue(response, value) {
+	if (typeof response === 'object') {
+		const { name } = response;
+		if (name in value) {
+			return value[name];
+		}
+	}
+
+	return undefined;
+}
+
+function collecteArrayResponseValue(responses, value) {
+	const [response, ...rest] = responses;
+
+	if (response) {
+		return [
+			collecteResponseValue(response, value),
+			collecteArrayResponseValue(rest, value),
+		];
+	}
+	return [];
+}
+
+function collecteValue(component, value) {
+	const { response, responses } = component;
+
+	if (Array.isArray(responses)) {
+		return collecteArrayResponseValue(responses, value);
+	}
+	if (typeof response === 'object') {
+		return collecteResponseValue(response, value);
+	}
+	return {};
+}
+
+function Cell({
+	content,
+	id,
+	custom,
+	executeExpression,
+	iteration,
+	value,
+	row,
+	index,
+	handleChange,
+}) {
+	const { label, componentType, rowspan, colspan } = content;
+
+	if (componentType) {
+		const valueField = collecteValue(content, value);
+		return (
+			<HtmlTd
+				id={id}
+				row={row}
+				index={index}
+				rowSpan={rowspan}
+				colSpan={colspan}
+			>
+				<OrchestratedComponent
+					id={id}
+					component={content}
+					handleChange={handleChange}
+					value={valueField}
+					custom={custom}
+					executeExpression={executeExpression}
+					iteration={iteration}
+				/>
+			</HtmlTd>
+		);
+	}
+
+	return (
+		<HtmlTd id={id} row={row} index={index} rowSpan={rowspan} colSpan={colspan}>
+			{label || ''}
+		</HtmlTd>
+	);
+}
+
+export default Cell;

package/src/components/table/components/cell.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { OrchestratedComponent } from '../../commons';
+import { Td as HtmlTd } from '../../commons/components/html-table';
+
+function collecteResponseValue(response, value) {
+	if (typeof response === 'object') {
+		const { name } = response;
+		if (name in value) {
+			return value[name];
+		}
+	}
+
+	return undefined;
+}
+
+function collecteArrayResponseValue(responses, value) {
+	const [response, ...rest] = responses;
+
+	if (response) {
+		return [
+			collecteResponseValue(response, value),
+			collecteArrayResponseValue(rest, value),
+		];
+	}
+	return [];
+}
+
+function collecteValue(component, value) {
+	const { response, responses } = component;
+
+	if (Array.isArray(responses)) {
+		return collecteArrayResponseValue(responses, value);
+	}
+	if (typeof response === 'object') {
+		return collecteResponseValue(response, value);
+	}
+	return {};
+}
+
+function Cell({
+	content,
+	id,
+	custom,
+	executeExpression,
+	iteration,
+	value,
+	row,
+	index,
+	handleChange,
+}) {
+	const { label, componentType, rowspan, colspan } = content;
+
+	if (componentType) {
+		const valueField = collecteValue(content, value);
+		return (
+			<HtmlTd
+				id={id}
+				row={row}
+				index={index}
+				rowSpan={rowspan}
+				colSpan={colspan}
+			>
+				<OrchestratedComponent
+					id={id}
+					component={content}
+					handleChange={handleChange}
+					value={valueField}
+					custom={custom}
+					executeExpression={executeExpression}
+					iteration={iteration}
+				/>
+			</HtmlTd>
+		);
+	}
+
+	return (
+		<HtmlTd id={id} row={row} index={index} rowSpan={rowspan} colSpan={colspan}>
+			{label || ''}
+		</HtmlTd>
+	);
+}
+
+export default Cell;

package/src/components/table/components/header.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+	Thead as HtmlThead,
+	Tr as HtmlTr,
+	Th as HtmlTh,
+} from '../../commons/components/html-table';
+
+function Header({ custom, id, header }) {
+	if (Array.isArray(header)) {
+		const content = header.map(function ({ label, rowspan, colspan }, index) {
+			return (
+				<HtmlTh
+					id={id}
+					custom={custom}
+					row={0}
+					index={index}
+					rowSpan={rowspan}
+					colSpan={colspan}
+					key={index}
+				>
+					{label}
+				</HtmlTh>
+			);
+		});
+		return (
+			<HtmlThead id={id} custom={custom}>
+				<HtmlTr id={id} custom={custom} row={0}>
+					{content}
+				</HtmlTr>
+			</HtmlThead>
+		);
+	}
+	return null;
+}
+
+export default Header;

package/src/components/table/components/row.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Tr as HtmlTr } from '../../commons/components/html-table';
+import Cell from './cell';
+
+function Row({
+	id,
+	custom,
+	components,
+	executeExpression,
+	valueMap,
+	rowIndex,
+	iteration,
+	handleChange,
+}) {
+	const content = components.map(function (content, index) {
+		return (
+			<Cell
+				id={id}
+				content={content}
+				custom={custom}
+				value={valueMap}
+				executeExpression={executeExpression}
+				handleChange={handleChange}
+				iteration={iteration}
+				row={rowIndex}
+				index={index}
+				key={index}
+			/>
+		);
+	});
+	return (
+		<HtmlTr id={id} custom={custom} row={rowIndex}>
+			{content}
+		</HtmlTr>
+	);
+}
+
+export default Row;

package/src/components/table/components/table.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+	Table as HtmlTable,
+	Tbody as HtmlTbody,
+} from '../../commons/components/html-table';
+import Header from './header';
+
+import './table.scss';
+
+function Table({ custom, id, header, children }) {
+	return (
+		<HtmlTable id={id} custom={custom} className="lunatic-table">
+			<Header id={id} header={header} custom={custom} />
+			<HtmlTbody id={id} custom={custom}>
+				{children}
+			</HtmlTbody>
+		</HtmlTable>
+	);
+}
+
+export default Table;

package/src/components/table/{table.scss → components/table.scss}

@@ -1,5 +1,5 @@
 .lunatic-component {
-	.table-lunatic {
+	.lunatic-table {
 		table-layout: fixed;
 		border-collapse: collapse;
 		margin-top: 0.3em;

package/src/components/table/index.js

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

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

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Table from './components/table';
+import { createLunaticComponent } from '../commons';
+import TableOrchestrator from './table-orchestrator';
+
+function LunaticTable({
+	id,
+	handleChange,
+	value,
+	custom,
+	body,
+	header,
+	executeExpression,
+	iteration,
+}) {
+	const [nbRows, setNbRows] = useState(undefined);
+
+	useEffect(
+		function () {
+			if (Array.isArray(body)) {
+				const { length } = body;
+				setNbRows(length);
+			}
+		},
+		[body]
+	);
+
+	return (
+		<Table id={id} custom={custom} header={header}>
+			<TableOrchestrator
+				custom={custom}
+				id={id}
+				body={body}
+				executeExpression={executeExpression}
+				handleChange={handleChange}
+				iteration={iteration}
+				nbRows={nbRows}
+				valueMap={value}
+			/>
+		</Table>
+	);
+}
+
+LunaticTable.propTypes = {
+	id: PropTypes.string.isRequired,
+	custom: PropTypes.object,
+	value: PropTypes.object,
+	body: PropTypes.arrayOf(PropTypes.array).isRequired,
+	header: PropTypes.array,
+};
+
+LunaticTable.defaultProps = {
+	lines: undefined,
+	custom: undefined,
+	value: {},
+	header: [],
+};
+
+export default createLunaticComponent(LunaticTable);

package/src/components/table/table-orchestrator.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import Row from './components/row';
+
+function TableOrchestrator({
+	body,
+	custom,
+	id,
+	executeExpression,
+	valueMap,
+	handleChange,
+	iteration,
+	features,
+	shortcut,
+	preferences,
+	management,
+	missing,
+}) {
+	if (Array.isArray(body)) {
+		return body.map(function (components, index) {
+			return (
+				<Row
+					key={index}
+					rowIndex={index}
+					components={components}
+					id={id}
+					valueMap={valueMap}
+					handleChange={handleChange}
+					iteration={iteration}
+					executeExpression={executeExpression}
+					custom={custom}
+					/** */
+					features={features}
+					shortcut={shortcut}
+					preferences={preferences}
+					management={management}
+					missing={missing}
+				/>
+			);
+		});
+	}
+	return null;
+}
+
+export default TableOrchestrator;

package/src/components/textarea/index.js

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

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

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { createLunaticComponent } from '../commons';
+import Textarea from './textarea';
+
+const LunaticTextarea = createLunaticComponent(Textarea, {
+	inputId: 'lunatic-textarea',
+});
+
+Textarea.defaultProps = {
+	rows: 1,
+	maxLength: 100,
+	cols: 32,
+	placeholder: 'Please enter your text here',
+};
+
+Textarea.propTypes = {
+	rows: PropTypes.number,
+	maxLength: PropTypes.number,
+	cols: PropTypes.number,
+	placeholder: PropTypes.string,
+};
+
+export default LunaticTextarea;

package/src/components/textarea/textarea.js

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import { createCustomizableLunaticField } from '../commons';
+import classnames from 'classnames';
+import './textarea.scss';
+
+function checkValue(value) {
+	return value || '';
+}
+
+function Textarea({
+	id,
+	rows,
+	maxLength,
+	cols,
+	onChange,
+	value,
+	className,
+	placeholder,
+}) {
+	const handleChange = useCallback(
+		function (e) {
+			onChange(e.target.value);
+		},
+		[onChange]
+	);
+
+	return (
+		<textarea
+			id={id}
+			className={classnames('lunatic-textarea', className)}
+			rows={rows}
+			maxLength={maxLength}
+			cols={cols}
+			onChange={handleChange}
+			value={checkValue(value)}
+			placeholder={placeholder}
+		/>
+	);
+}
+
+export default createCustomizableLunaticField(Textarea);

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';

package/src/constants/index.js

@@ -1,5 +1,5 @@
-export * from './component-types';
-export * from './declarations';
-export * from './value-types';
-export * from './variable-types';
-export * from './event-types';
+export * from './component-types';
+export * from './declarations';
+export * from './value-types';
+export * from './variable-types';
+export * from './event-types';

package/src/constants/supported-preferences.js

@@ -1,10 +1,10 @@
-import * as C from './value-types';
-
-// ORDERED ARRAY
-export const supportedPreferences = [
-	C.PREVIOUS,
-	C.COLLECTED,
-	C.FORCED,
-	C.EDITED,
-	C.INPUTED,
-];
+import * as C from './value-types';
+
+// ORDERED ARRAY
+export const supportedPreferences = [
+	C.PREVIOUS,
+	C.COLLECTED,
+	C.FORCED,
+	C.EDITED,
+	C.INPUTED,
+];

package/src/constants/value-types.js

@@ -1,5 +1,5 @@
-export const PREVIOUS = 'PREVIOUS';
-export const COLLECTED = 'COLLECTED';
-export const FORCED = 'FORCED';
-export const EDITED = 'EDITED';
-export const INPUTED = 'INPUTED';
+export const PREVIOUS = 'PREVIOUS';
+export const COLLECTED = 'COLLECTED';
+export const FORCED = 'FORCED';
+export const EDITED = 'EDITED';
+export const INPUTED = 'INPUTED';

package/src/constants/variable-types.js

@@ -1,4 +1,4 @@
-export const EXTERNAL = 'EXTERNAL';
-export const CALCULATED = 'CALCULATED';
-// Already define in value-types
-//export const COLLECTED = 'COLLECTED';
+export const EXTERNAL = 'EXTERNAL';
+export const CALCULATED = 'CALCULATED';
+// Already define in value-types
+//export const COLLECTED = 'COLLECTED';

package/src/i18n/build-dictionary.js

@@ -0,0 +1,43 @@
+/**
+ * Based on the locale passed as a paremeter, this function will return
+ * the corresponding dictionary.
+ *
+ * @param {string} lang the lang of the user
+ * @param {any} dict
+ */
+export const createDictionary = (lang, dict) =>
+	Object.keys(dict).reduce((acc, k) => {
+		const hasChildObject = Object.keys(dict[k]).find(
+			(key) =>
+				dict[k][key] &&
+				typeof dict[k][key] === 'object' &&
+				dict[k][key].constructor === Object
+		);
+		return {
+			...acc,
+			[k]: !hasChildObject ? dict[k][lang] : createDictionary(lang, dict[k]),
+		};
+	}, {});
+
+/**
+ * This function will return only the lang part of a locale
+ * For example, with fr-FR, will return fr
+ * If the lang is not fr, will return en
+ * @param {string} lang the lang of the user
+ */
+
+export const firstLang = 'fr';
+export const secondLang = 'en';
+
+/**
+ * Return the current lang based of the settings of the browser
+ *
+ * @param {String=} defaultLang
+ * @returns {String}
+ */
+export const getLang = (defaultLang) =>
+	(defaultLang || navigator.language || navigator.browserLanguage).split(
+		'-'
+	)[0] === firstLang
+		? firstLang
+		: secondLang;

package/src/i18n/dictionary.js

@@ -0,0 +1,8 @@
+const dictionary = {
+	DEFAULT_BUTTON_ADD: { fr: 'Ajouter une ligne', en: 'Add row' },
+	DEFAULT_BUTTON_REMOVE: { fr: 'Supprimer une ligne', en: 'Remove row' },
+	DK: { fr: 'Ne sais pas', en: "Don't know" },
+	RF: { fr: 'Refus', en: 'Refused' },
+};
+
+export default dictionary;

package/src/i18n/index.js

@@ -0,0 +1,7 @@
+import { createDictionary, getLang } from './build-dictionary';
+import dictionary from './dictionary';
+
+const D1 = createDictionary('fr', dictionary);
+const D2 = createDictionary('en', dictionary);
+
+export default getLang() === 'fr' ? D1 : D2;