@inseefr/lunatic 0.2.0-v2 → 0.2.1-prisme

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

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

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

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

@@ -1,21 +0,0 @@
-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/lunatic-table.js

@@ -1,63 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { LunaticField } from '../commons';
-import Table from './components/table';
-import { createLunaticComponent } from '../commons';
-import TableOrchestrator from './table-orchestrator';
-
-function LunaticTable({
-	htmlFor,
-	labelId,
-	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

@@ -1,44 +0,0 @@
-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/lunatic-textarea.js

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

@@ -1,41 +0,0 @@
-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/i18n/build-dictionary.js

@@ -1,43 +0,0 @@
-/**
- * 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

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

package/src/i18n/index.js

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

package/src/stories/custom-mui/checkbox-boolean-mui.js

@@ -1,23 +0,0 @@
-import React, { useCallback } from 'react';
-import Checkbox from '@mui/material/Checkbox';
-
-function CheckboxBooleanMui({ checked, id, disabled, onClick, labelId }) {
-	const handleClick = useCallback(
-		function () {
-			onClick(!checked);
-		},
-		[checked, onClick]
-	);
-
-	return (
-		<Checkbox
-			disabled={disabled}
-			checked={checked}
-			id={id}
-			onClick={handleClick}
-			aria-labelledby={labelId}
-		/>
-	);
-}
-
-export default CheckboxBooleanMui;

package/src/stories/custom-mui/checkbox-group-mui.js

@@ -1,63 +0,0 @@
-import React, { useCallback } from 'react';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Checkbox from '@mui/material/Checkbox';
-
-function CheckBoxOption({
-	checkboxId,
-	labelId,
-	label,
-	checked,
-	handleChange,
-	response,
-}) {
-	const onClickOption = useCallback(
-		function () {
-			handleChange(response, !checked);
-		},
-		[handleChange, response, checked]
-	);
-
-	return (
-		<FormControlLabel
-			id={checkboxId}
-			control={<Checkbox checked={checked} onClick={onClickOption} />}
-			label={label}
-			aria-labelledby={labelId}
-		/>
-	);
-}
-
-function CheckboxGroup({ options, value, id, handleChange }) {
-	const optionsEl = options.map(function (option, index) {
-		const { label, response } = option;
-
-		if (response && value) {
-			const { name } = response;
-
-			if (name in value) {
-				const checked = value[name] || false;
-				const checkboxId = `lunatic-checkbox-${id}-${name}`;
-				const labelId = `lunatic-checkbox-label-${id}-${name}`;
-
-				return (
-					<CheckBoxOption
-						key={name}
-						checkboxId={checkboxId}
-						index={index}
-						label={label}
-						labelId={labelId}
-						checked={checked}
-						response={response}
-						handleChange={handleChange}
-					/>
-				);
-			}
-		}
-		return null;
-	});
-
-	return <FormGroup>{optionsEl}</FormGroup>;
-}
-
-export default CheckboxGroup;

package/src/stories/custom-mui/checkbox-one-mui.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-function CheckboxOneMui() {
-	return <>Use Radio group please!</>;
-}
-
-export default CheckboxOneMui;

package/src/stories/custom-mui/index.js

@@ -1,15 +0,0 @@
-export { default as InputNumberMui } from './input-number-mui';
-export { default as SwitchMui } from './switch-mui';
-export { default as TableMui } from './table-mui';
-export { default as TheadMui } from './thead-mui';
-export { default as TbodyMui } from './tbody-mui';
-export { default as ThMui } from './th-mui';
-export { default as TdMui } from './td-mui';
-export { default as InputMui } from './input-mui';
-export { default as TrMui } from './tr-mui';
-export { default as TextareaMui } from './textarea-mui';
-export { default as SuggesterMui } from './suggester-mui';
-export { default as CheckboxBooleanMui } from './checkbox-boolean-mui';
-export { default as CheckboxGroupMui } from './checkbox-group-mui';
-export { default as CheckboxOneMui } from './checkbox-one-mui';
-export { default as RadioMui } from './radio-mui';

package/src/stories/custom-mui/input-mui.js

@@ -1,50 +0,0 @@
-import React, { useCallback } from 'react';
-import classnames from 'classnames';
-import TextField from '@mui/material/TextField';
-
-function checkValue(value) {
-	return value || '';
-}
-
-function InputMui({
-	value,
-	onChange,
-	disabled,
-	required,
-	maxLength,
-	id,
-	labelledBy,
-	readOnly,
-}) {
-	const handleChange = useCallback(
-		function (e) {
-			const value = e.target.value;
-			onChange(value);
-		},
-		[onChange]
-	);
-	return (
-		<TextField
-			id={`lunatic-mui-${id}`}
-			aria-labelledby={labelledBy}
-			autoComplete="off"
-			type="text"
-			disabled={disabled}
-			className={classnames('lunatic-mui-input')}
-			value={checkValue(value)}
-			onChange={handleChange}
-			aria-required={required}
-			required={required}
-			maxLength={maxLength}
-			readOnly={readOnly}
-		/>
-	);
-}
-
-InputMui.defaultProps = {
-	disabled: false,
-	required: true,
-	maxLength: Number.MAX_SAFE_INTEGER,
-};
-
-export default InputMui;

package/src/stories/custom-mui/input-number-mui.js

@@ -1,36 +0,0 @@
-import React, { useCallback } from 'react';
-import TextField from '@mui/material/TextField';
-
-function InputNumberMui({
-	value,
-	onChange,
-	disabled,
-	readOnly,
-	labelId,
-	min,
-	max,
-	step,
-}) {
-	const handleChange = useCallback(
-		function (e) {
-			const value = e.target.value;
-			onChange(value);
-		},
-		[onChange]
-	);
-	return (
-		<TextField
-			type="number"
-			onChange={handleChange}
-			value={value}
-			disabled={disabled}
-			aria-labelledby={labelId}
-			min={min}
-			max={max}
-			step={step}
-			readOnly={readOnly}
-		/>
-	);
-}
-
-export default InputNumberMui;

package/src/stories/custom-mui/radio-mui.js

@@ -1,39 +0,0 @@
-import React, { useCallback } from 'react';
-import Radio from '@mui/material/Radio';
-import RadioGroup, { useRadioGroup } from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-
-function RadioButtonMui({ value, onClick, ...rest }) {
-	const radioGroup = useRadioGroup();
-	const checked = value === radioGroup.value;
-	const handleClick = useCallback(
-		function () {
-			onClick(value);
-		},
-		[value, onClick]
-	);
-	return <Radio checked={checked} onClick={handleClick} />;
-}
-
-function RadioMui({ labelId, options, value, id, onClick }) {
-	const radios = options.map(function ({ value: valueOption, label }) {
-		return (
-			<FormControlLabel
-				key={valueOption}
-				value={valueOption}
-				control={<RadioButtonMui value={valueOption} onClick={onClick} />}
-				label={label}
-			/>
-		);
-	});
-	return (
-		<FormControl>
-			<RadioGroup aria-labelledby={labelId} value={value} id={id}>
-				{radios}
-			</RadioGroup>
-		</FormControl>
-	);
-}
-
-export default RadioMui;

package/src/stories/custom-mui/suggester-mui/index.js

@@ -1 +0,0 @@
-export { default } from './suggester-mui';