@inseefr/lunatic 0.2.62 → 0.3.0-v2

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

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

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

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

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

@@ -0,0 +1,285 @@
+import React, { useCallback, useRef, useState } from 'react';
+import IconButton from '@mui/material/IconButton';
+// import ClearIcon from '@mui/icons-material/Clear';
+import InputBase from '@mui/material/InputBase';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Stack from '@mui/material/Stack';
+import Paper from '@mui/material/Paper';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Popper from '@mui/material/Popper';
+
+// function getSelection(options, selectedIndex) {
+// 	if (selectedIndex !== undefined) {
+// 		return options[selectedIndex];
+// 	}
+// 	return undefined;
+// }
+
+function SuggesterContainer({
+	children,
+	onKeyDown,
+	labelledBy,
+	id,
+	className,
+	onBlur,
+	expended,
+}) {
+	// const handleClickAway = useCallback(function () {
+	// 	onBlur();
+	// }, []);
+	const zIndex = expended ? '1' : '0';
+	return (
+		<ClickAwayListener
+			mouseEvent="onMouseDown"
+			touchEvent="onTouchStart"
+			onClickAway={onBlur}
+		>
+			<Box
+				id={id}
+				aria-labelledby={labelledBy}
+				sx={{ position: 'relative', zIndex }}
+				className={className}
+			>
+				{children}
+			</Box>
+		</ClickAwayListener>
+	);
+}
+
+function getContent(selection, search) {
+	if (selection) {
+		const { id, label } = selection;
+		return `${id} - ${label}`;
+	}
+	return search ?? '';
+}
+
+function Delete({ onClick }) {
+	return (
+		<IconButton
+			color="primary"
+			sx={{ p: '8px', float: 'right' }}
+			aria-label="delete"
+			onClick={onClick}
+		>
+			C
+		</IconButton>
+	);
+}
+
+function nothing() {}
+
+const SelectionInput = React.forwardRef(function SelectionInput(
+	{ value, placeholder, onFocus, onChange = nothing, onDelete },
+	inputRef
+) {
+	return (
+		<Paper
+			component="form"
+			sx={{
+				p: '2px 4px',
+				display: 'flex',
+				alignItems: 'center',
+				width: 'fit-content',
+			}}
+		>
+			<InputBase
+				value={value}
+				onFocus={onFocus}
+				ref={inputRef}
+				placeholder={placeholder}
+				onChange={onChange}
+			/>
+			<Delete onClick={onDelete} />
+		</Paper>
+	);
+});
+
+const Selection = React.forwardRef(function Selection(
+	{ value, onChange, placeholderList, selection, onDelete, expended, onFocus },
+	inputRef
+) {
+	if (!expended) {
+		return (
+			<SelectionInput
+				value={getContent(selection, value)}
+				ref={inputRef}
+				placeholder={placeholderList}
+				onDelete={onDelete}
+				onFocus={onFocus}
+			/>
+		);
+	}
+
+	return (
+		<SelectionInput
+			value={value}
+			onChange={onChange}
+			ref={inputRef}
+			placeholder={placeholderList}
+			onDelete={onDelete}
+		/>
+	);
+});
+
+// const Selection = React.forwardRef(function Selection(
+// 	{ placeholder, onChange, onDelete, value, onFocus },
+// 	ref
+// ) {
+// 	return (
+// 		<Paper
+// 			component="form"
+// 			sx={{
+// 				p: '2px 4px',
+// 				display: 'flex',
+// 				alignItems: 'center',
+// 				width: 'fit-content',
+// 			}}
+// 		>
+// 			<SelectionInput
+// 				value={value}
+// 				placeholder={placeholder}
+// 				onChange={onChange}
+// 				ref={ref}
+// 				onFocus={onFocus}
+// 			/>
+// 			<Delete onClick={onDelete} />
+// 		</Paper>
+// 	);
+// });
+
+function OptionMUI({ label, id, selected, onClick, index }) {
+	const handleClick = useCallback(
+		function () {
+			onClick(index);
+		},
+		[index, onClick]
+	);
+
+	const backgroundColor = selected ? 'gold' : 'transparent';
+	return (
+		<MenuItem onClick={handleClick} sx={{ backgroundColor }}>
+			<Stack direction="row" spacing={1} alignItems="center">
+				<Typography>{id}</Typography>
+				<Typography>{label}</Typography>
+			</Stack>
+		</MenuItem>
+	);
+}
+
+function Panel({ options, expended, anchorEl, onClick, selectedIndex, index }) {
+	if (Array.isArray(options) && options.length && expended) {
+		const items = options.map(function (option, index) {
+			const { label, id } = option;
+
+			return (
+				<OptionMUI
+					key={id}
+					id={id}
+					label={label}
+					selected={index === selectedIndex}
+					index={index}
+					onClick={onClick}
+				/>
+			);
+		});
+		return (
+			<Popper
+				open={expended}
+				placement="bottom-start"
+				disablePortal={true}
+				anchorEl={anchorEl}
+			>
+				<Paper sx={{ backgroundColor: 'snow', zIndex: 10 }} elevation={2}>
+					<MenuList className="lunatic-suggester-mui-panel">{items}</MenuList>
+				</Paper>
+			</Popper>
+		);
+	}
+	return null;
+}
+
+function SuggesterMui({
+	className,
+	labelledBy,
+	placeholder,
+	optionRenderer,
+	onSelect,
+	options,
+	onChange,
+	labelRenderer,
+	value,
+	disabled,
+	id,
+}) {
+	const inputEl = useRef();
+
+	const [search, setSearch] = useState('');
+	const [expended, setExpended] = useState(false);
+	const [selectedIndex, setSelectedIndex] = useState(undefined);
+	const [selection, setSelection] = useState(undefined);
+
+	const onChangeEx = useCallback(
+		function (e) {
+			onChange(e.target.value);
+			setSearch(e.target.value);
+			console.log(e.target.value);
+		},
+		[onChange]
+	);
+
+	const onDelete = useCallback(function () {
+		setSearch('');
+		setSelectedIndex(undefined);
+		setSelection(undefined);
+	}, []);
+
+	const onBlur = useCallback(function () {
+		setExpended(false);
+	}, []);
+
+	const onFocus = useCallback(function () {
+		setExpended(true);
+	}, []);
+
+	const onClick = useCallback(
+		function (index) {
+			setSelectedIndex(index);
+			setSelection(options[index]);
+		},
+		[options]
+	);
+
+	return (
+		<SuggesterContainer
+			id={id}
+			labelledBy={labelledBy}
+			className={className}
+			onBlur={onBlur}
+			expended={expended}
+		>
+			<Selection
+				placeholder={placeholder}
+				onChange={onChangeEx}
+				onDelete={onDelete}
+				value={search}
+				onFocus={onFocus}
+				ref={inputEl}
+				expended={expended}
+				selection={selection}
+			/>
+			<Panel
+				options={options}
+				expended={expended}
+				anchorEl={inputEl.current}
+				onClick={onClick}
+				selectedIndex={selectedIndex}
+			/>
+		</SuggesterContainer>
+	);
+}
+
+export default SuggesterMui;

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

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import Switch from '@mui/material/Switch';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+function SwitchMui({ checked, disabled, onClick, statusLabel, labelId }) {
+	const handleClick = useCallback(
+		function () {
+			onClick(!checked);
+		},
+		[checked, onClick]
+	);
+
+	const { true: trueStatus, false: falseStatue } = statusLabel;
+	return (
+		<Stack direction="row" spacing={1} alignItems="center">
+			<Typography>{falseStatue}</Typography>
+			<Switch
+				checked={checked}
+				onClick={handleClick}
+				disabled={disabled}
+				inputProps={{ 'aria-labelledby': labelId, 'aria-checked': checked }}
+			/>
+			<Typography>{trueStatus}</Typography>
+		</Stack>
+	);
+}
+
+export default SwitchMui;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import Table from '@mui/material/Table';
+import classnames from 'classnames';
+import TableContainer from '@mui/material/TableContainer';
+import Paper from '@mui/material/Paper';
+
+function TableMui({ children, id, className }) {
+	return (
+		<TableContainer component={Paper}>
+			<Table
+				id={`lunatic-mui-table${id}`}
+				className={classnames('lunatic-mui-table', className)}
+			>
+				{children}
+			</Table>
+		</TableContainer>
+	);
+}
+
+export default TableMui;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import classnames from 'classnames';
+import TableBody from '@mui/material/TableBody';
+
+function TbodyMui({ children, id, className }) {
+	return (
+		<TableBody
+			id={`lunatic-mui-tbody-${id}`}
+			className={classnames('lunatic-mui-tbody', className)}
+		>
+			{children}
+		</TableBody>
+	);
+}
+
+export default TbodyMui;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import classnames from 'classnames';
+import TableCell from '@mui/material/TableCell';
+
+function TdMui({ id, children, row, index, className }) {
+	return (
+		<TableCell
+			id={`lunatic-mui-td-${id}-${row}-${index}`}
+			className={classnames('lunatic-mui-td', className)}
+		>
+			{children}
+		</TableCell>
+	);
+}
+
+export default TdMui;

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

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import classnames from 'classnames';
+import OutlinedInput from '@mui/material/OutlinedInput';
+
+function TextareaMui({
+	id,
+	rows,
+	maxLength,
+	cols,
+	onChange,
+	value,
+	className,
+	placeholder,
+}) {
+	const handleChange = useCallback(
+		function (e) {
+			onChange(e.target.value);
+		},
+		[onChange]
+	);
+	console.log({ maxLength, rows, cols });
+	return (
+		<OutlinedInput
+			id={`lunatic-mui-textarea-${id}`}
+			className={classnames('lunatic-mui-textarea', className)}
+			multiline
+			fullWidth
+			components={{ elementType: 'textarea' }}
+			onChange={handleChange}
+			value={value}
+			placeholder={placeholder}
+			maxLength={maxLength}
+			cols={cols}
+		></OutlinedInput>
+	);
+}
+
+export default TextareaMui;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import classnames from 'classnames';
+import TableCell from '@mui/material/TableCell';
+
+function ThMui({ id, index, children, className }) {
+	return (
+		<TableCell
+			id={`lunatic-mui-th-${id}-${index}`}
+			className={classnames('lunatic-mui-th', className)}
+		>
+			{children}
+		</TableCell>
+	);
+}
+
+export default ThMui;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import classnames from 'classnames';
+import TableHead from '@mui/material/TableHead';
+
+function TheadMui({ children, id, className }) {
+	return (
+		<TableHead
+			id={`lunatic-mui-thead-${id}`}
+			className={classnames('lunatic-mui-thead', className)}
+		>
+			{children}
+		</TableHead>
+	);
+}
+
+export default TheadMui;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import TableRow from '@mui/material/TableRow';
+
+function TrMui({ id, children, className, row }) {
+	return (
+		<TableRow
+			id={`lunatic-mui-tr-${id}-${row}`}
+			className={classnames('lunatic-mui-tr', className)}
+		>
+			{children}
+		</TableRow>
+	);
+}
+
+TrMui.propTypes = {
+	id: PropTypes.string.isRequired,
+	row: PropTypes.number.isRequired,
+	className: PropTypes.string,
+};
+
+TrMui.defaultProps = {
+	className: undefined,
+};
+
+export default TrMui;

package/src/stories/input/data.json

@@ -0,0 +1,5 @@
+{
+	"COLLECTED": {
+		"NAME": { "COLLECTED": "toto", "FORCED": "Titi", "EDITED": "Toto" }
+	}
+}

package/src/stories/input/input.stories.js

@@ -1,88 +1,18 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withReadme } from 'storybook-readme';
-import { Input } from 'components';
-import readme from './README.md';
-import { titleDecorator } from 'utils/lib';
-import {
-	text,
-	boolean,
-	number,
-	color,
-	object,
-	select,
-} from '@storybook/addon-knobs/react';
+import Orchestrator from '../utils/orchestrator';
+import source from './source';
+import data from './data';
+import defaultArgTypes from '../utils/default-arg-types';
 
-const labelPositionOptions = {
-	DEFAULT: 'Default',
-	TOP: 'Top',
-	RIGHT: 'Right',
-	BOTTOM: 'Bottom',
-	LEFT: 'Left',
+const stories = {
+	title: 'Components/Input',
+	component: Orchestrator,
+	argTypes: defaultArgTypes,
 };
 
-const defaultProps = {
-	handleChange: console.log,
-	response: {
-		name: 'INPUT',
-		valueState: [
-			{ valueType: 'COLLECTED', value: 'My collected input' },
-			{ valueType: 'FORCED', value: 'My forced input' },
-		],
-	},
-};
-
-const stories = storiesOf('Input', module)
-	.addDecorator(withReadme(readme))
-	.addDecorator(Component => {
-		const WrappedComponent = titleDecorator(Component);
-		return <WrappedComponent title="<Input />" />;
-	});
-
-stories.addWithJSX('Default', () => (
-	<Input id="default" label="Label" {...defaultProps} />
-));
+export default stories;
 
-stories.addWithJSX('Props', () => (
-	<Input
-		id="props"
-		label={text('Label', "I'm the label of the input")}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		autoComplete={boolean('Autocomplete', false)}
-		required={boolean('Required', false)}
-		focused={boolean('Focused', false)}
-		preferences={['COLLECTED', 'FORCED']}
-		tooltip={boolean('Tooltip', false)}
-		labelPosition={select('Label position', labelPositionOptions)}
-		{...defaultProps}
-	/>
-));
+const Template = (args) => <Orchestrator {...args} />;
+export const Default = Template.bind({});
 
-stories.addWithJSX('Styled', () => (
-	<Input
-		id="styled"
-		label={text('Label', "I'm the label of the input")}
-		placeholder={text('Placeholder', 'Placeholder')}
-		readOnly={boolean('Read only', false)}
-		autoComplete={boolean('Autocomplete', false)}
-		required={boolean('Required', false)}
-		focused={boolean('Focused', false)}
-		handleChange={console.log}
-		style={object('Generated style', {
-			'border-color': color('Border color', '#e80a4d'),
-			'border-width': number('Border-width', 2, {
-				range: true,
-				min: 2,
-				max: 20,
-				step: 1,
-			}),
-			'border-radius': number('Border-radius', 10, {
-				range: true,
-				min: 0,
-				max: 20,
-				step: 1,
-			}),
-		})}
-	/>
-));
+Default.args = { id: 'input', source, data };

package/src/stories/input/source.json

@@ -0,0 +1,28 @@
+{
+	"components": [
+		{
+			"componentType": "Input",
+			"label": { "value": "\"What's your name?\"", "type": "VTL|MD" },
+			"conditionFilter": { "value": "true", "type": "VTL" },
+			"maxLength": 30,
+			"id": "name",
+			"response": {
+				"name": "NAME"
+			}
+		}
+	],
+	"variables": [
+		{
+			"variableType": "COLLECTED",
+			"name": "NAME",
+			"componentRef": "name",
+			"values": {
+				"PREVIOUS": null,
+				"COLLECTED": null,
+				"FORCED": null,
+				"EDITED": null,
+				"INPUTED": null
+			}
+		}
+	]
+}

package/src/stories/pairwise/block/block.json

@@ -0,0 +1,3 @@
+{
+	"components": []
+}