@inseefr/lunatic 0.3.1-experimental → 0.3.2-v2

package/src/stories/Introduction.stories.mdx

@@ -0,0 +1,114 @@
+import { Meta } from '@storybook/addon-docs';
+import Lunatic from '../../docs/img/lunatic-logo.png';
+
+<Meta title="Introduction" />
+
+<style>
+	{`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 900;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px 30px 20px 15px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span {
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Welcome to Lunatic storybook
+
+<p>
+	<img src={Lunatic} alt="Lunatic logo" />
+</p>

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

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

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

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

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

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

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

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