@inseefr/lunatic 0.1.6 → 0.1.8-experimental

package/src/components/dropdown/dropdown-edit/option.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import classnames from 'classnames';
+import { lettersMatching, preparePrefix } from './prefix-tools';
+
+export default ({ label, active, prefix, selected }) => {
+	const initLetters = lettersMatching(label, prefix);
+	const what = label
+		.split('')
+		.reduce(
+			({ letters, stack }, c) => {
+				const m = preparePrefix(c);
+				const [first, ...rest] = letters;
+				if (m === first) {
+					return {
+						letters: rest,
+						stack: [...stack, { char: c, className: 'lunatic-prefix' }],
+					};
+				}
+
+				return {
+					letters,
+					stack: [...stack, { char: c, className: 'lunatic-normal' }],
+				};
+			},
+			{ letters: initLetters, stack: [] }
+		)
+		.stack.reduce(
+			({ last, stack }, { char, className }) => {
+				if (!last) {
+					return { last: className, stack: [{ part: char, className }] };
+				}
+				if (last !== className) {
+					return {
+						last: className,
+						stack: [{ part: char, className }, ...stack],
+					};
+				}
+				const [first, ...rest] = stack;
+				return {
+					last: className,
+					stack: [{ ...first, part: `${first.part}${char}` }, ...rest],
+				};
+			},
+			{ last: undefined, stack: [] }
+		)
+		.stack.reverse()
+		.map(({ part, className }, i) => (
+			<span className={className} key={i}>
+				{part}
+			</span>
+		));
+	return (
+		<span
+			className={classnames('lunatic-dropdown-option', {
+				'lunatic-dropdown-option-active': active,
+				'lunatic-dropdown-option-selected': selected,
+			})}
+		>
+			{what}
+		</span>
+	);
+};

package/src/components/dropdown/dropdown-edit/prefix-tools.js

@@ -0,0 +1,51 @@
+import removeAccents from 'remove-accents';
+
+export const preparePrefix = (prefix) =>
+	typeof prefix === 'string'
+		? removeAccents(prefix.toLowerCase()).replace(/[- ']/g, '')
+		: prefix;
+
+export const lettersMatching = (label, prefix = '') => {
+	const pref = prefix.split('');
+	let pos = -1;
+	const clean = preparePrefix(label);
+	return clean.split('').reduce((a, c, idx) => {
+		if (pos < pref.length && pref[pos + 1] === c) {
+			pos++;
+			return [...a, c];
+		}
+		return a;
+	}, []);
+};
+
+export const match = (label, prefix) => {
+	const pref = prefix.split('');
+	let pos = -1;
+	const clean = preparePrefix(label);
+	return (
+		clean.split('').reduce((a, c, idx) => {
+			if (pos < pref.length && pref[pos + 1] === c) {
+				pos++;
+				return a + 1;
+			}
+			return a / (idx * 0.0001 + 1);
+		}, 0) / prefix.length
+	);
+};
+
+/** */
+export const filterOption = (options, prefix) => {
+	if (!prefix || prefix.length === 0) {
+		return options;
+	}
+
+	return options
+		.reduce((acc, o) => {
+			const { label, search } = o;
+			const how = match(search || label, prefix);
+			return how >= 0.6
+				? [{ o, how }, ...acc].sort((a, b) => a.how <= b.how)
+				: acc;
+		}, [])
+		.map(({ o }) => o);
+};

package/src/components/dropdown/dropdown-simple/dropdown.js

@@ -0,0 +1,162 @@
+import React, { useReducer, useRef } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import * as actions from '../commons/actions';
+import Panel from '../commons/components/panel';
+import ClosedIcon from '../../../utils/icons/closed.icon';
+import OpenedIcon from '../../../utils/icons/opened.icon';
+import DropdownContainer from '../commons/components/dropdown';
+import reducer, { initial } from '../commons/reducer';
+import Option from './option';
+
+const Dropdown = ({
+	widthAuto,
+	id: initId,
+	label,
+	value,
+	options,
+	response,
+	onSelect,
+	placeholder,
+	disabled,
+	focused: initFocused,
+	mandatory,
+	labelPosition,
+	management,
+	className,
+	zIndex,
+}) => {
+	const containerEl = useRef();
+	const [state, dispatch] = useReducer(reducer, {
+		...initial,
+		id: `dropdown-${initId}-${new Date().getMilliseconds()}`,
+		disabled,
+		focused: initFocused,
+	});
+	const { focused, visible, activeIndex, id } = state;
+	const onSelect_ = createOnSelect(state, dispatch, onSelect);
+	const selectedOption = options.find((o) => o.value === value);
+	return (
+		<DropdownContainer
+			className={className || 'lunatic-dropdown'}
+			ref={containerEl}
+			state={state}
+			dispatch={dispatch}
+			options={options}
+			response={response}
+			management={management}
+			label={label}
+			labelPosition={labelPosition}
+			mandatory={mandatory}
+			onSelect={onSelect_}
+			value={value}
+			zIndex={zIndex}
+		>
+			<span className={classnames('lunatic-dropdown-input', { focused })}>
+				<input
+					type="button"
+					disabled={disabled}
+					value={selectedOption ? selectedOption.label : placeholder || ''}
+				/>
+			</span>
+			{getIcon(state, dispatch)(visible, containerEl)}
+			<div
+				tabIndex="0"
+				className={classnames('lunatic-transition', {
+					visible: isDisplay(state),
+					'width-auto': widthAuto,
+				})}
+			>
+				<Panel
+					idDropdown={id}
+					options={options}
+					display={isDisplay(state)}
+					activeIndex={activeIndex}
+					optionComponent={Option}
+					selectedOption={selectedOption}
+					onSelect={onSelect_}
+					handleActive={(index) => dispatch(actions.setActiveOption(index))}
+				/>
+			</div>
+		</DropdownContainer>
+	);
+};
+
+Dropdown.propTypes = {
+	widthAuto: PropTypes.bool,
+	disabled: PropTypes.bool,
+	focused: PropTypes.bool,
+	zIndex: PropTypes.number,
+	className: PropTypes.string,
+	id: PropTypes.string,
+	options: PropTypes.array.isRequired,
+	onSelect: PropTypes.func,
+	placeholder: PropTypes.string,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
+		PropTypes.bool,
+	]),
+};
+
+Dropdown.defaultProps = {
+	disabled: false,
+	focused: false,
+	options: [],
+	zIndex: 0,
+	onSelect: () => null,
+	placeholder: 'Search...',
+	widthAuto: false,
+};
+
+export default Dropdown;
+
+/* **/
+const isDisplay = ({ visible, options }) => visible && options.length > 0;
+
+/** */
+const getIcon =
+	({ disabled }, dispatch) =>
+	(visible, containerEl) => {
+		if (disabled) {
+			return (
+				<ClosedIcon className="lunatic-dropdown-icon" width={16} height={16} />
+			);
+		}
+		return (
+			<span
+				tabIndex="-1"
+				onMouseDown={(e) => {
+					e.stopPropagation();
+					e.preventDefault();
+
+					if (visible) {
+						dispatch(actions.hidePanel());
+					} else {
+						dispatch(actions.showPanel());
+						containerEl.current.focus();
+					}
+				}}
+			>
+				{visible ? (
+					<OpenedIcon
+						className="lunatic-dropdown-icon"
+						width={16}
+						height={16}
+					/>
+				) : (
+					<ClosedIcon
+						className="lunatic-dropdown-icon"
+						width={16}
+						height={16}
+					/>
+				)}
+			</span>
+		);
+	};
+
+const createOnSelect = (_, dispatch, onSelect) => (option) => {
+	dispatch(actions.setSelectedOption(option));
+	dispatch(actions.hidePanel());
+	onSelect(option);
+};

package/src/components/dropdown/dropdown-simple/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Dropdown from './dropdown';
+
+const childrenToOption = (children = []) =>
+	(Array.isArray(children) ? children : [children]).map(child => {
+		const { value } = child.props;
+		const label = child.props.children;
+		if (label === undefined || value === undefined) {
+			throw new Error('Ooops');
+		}
+		return { label, value };
+	});
+
+const createDropdown = Component => ({ children, options, ...props }) => {
+	const o = options || childrenToOption(children);
+	return <Component options={o} {...props} />;
+};
+
+export default createDropdown(Dropdown);
+export { default as Option } from './option';

package/src/components/dropdown/dropdown-simple/option.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import classnames from 'classnames';
+
+export default ({ label, active, selected }) => {
+	return (
+		<span
+			className={classnames('lunatic-dropdown-option', {
+				'lunatic-dropdown-option-active': active,
+				'lunatic-dropdown-option-selected': selected,
+			})}
+		>
+			{label}
+		</span>
+	);
+};

package/src/components/dropdown/dropdown.scss

@@ -0,0 +1,176 @@
+@mixin defaultFont {
+	font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+}
+
+@mixin disableSelect {
+	-moz-user-select: none; /* Firefox */
+	-ms-user-select: none; /* Internet Explorer */
+	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
+	-webkit-user-select: none; /* Chrome, Safari, and Opera */
+	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
+}
+
+.lunatic-dropdown {
+	display: block;
+	width: 100%;
+	margin-bottom: 1.5rem;
+	&:focus {
+		outline: none;
+	}
+
+	&.label-left {
+		display: flex;
+		flex-direction: row;
+	}
+
+	&.label-right {
+		display: flex;
+		flex-direction: row-reverse;
+	}
+
+	&.label-top {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&.label-bottom {
+		display: flex;
+		flex-direction: column-reverse;
+	}
+
+	.lunatic-dropdown-label {
+		opacity: 1;
+	}
+
+	.lunatic-dropdown-container {
+		ul {
+			padding-inline-start: 0px;
+			font-size: 1rem;
+		}
+		position: relative;
+		height: 2em;
+		width: 100%;
+		z-index: 1;
+
+		&.focused {
+			z-index: 2;
+		}
+		&:focus {
+			outline: none;
+		}
+
+		.lunatic-dropdown-content {
+			// background-color: var(--color-very-very-light);
+			border-color: white;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			height: auto;
+			&.visible {
+				// border-radius: 0 0 16px 16px;
+				height: auto;
+			}
+
+			&.disabled {
+				background-color: var(--color-disabled);
+			}
+
+			.lunatic-dropdown-input {
+				border-bottom: 1px solid var(--color-primary-dark);
+				padding: 6px 0 7px;
+				input {
+					@include defaultFont();
+					@include disableSelect();
+					margin: 0px 25px 0px 0px;
+					width: calc(100% - 37px);
+					background-color: transparent;
+					border-color: transparent;
+					height: 2em;
+					border: none;
+					outline: none;
+					text-align: left;
+					cursor: inherit;
+				}
+				&:hover {
+					cursor: pointer;
+					border-bottom: 2px solid var(--color-primary-main);
+				}
+				&.focused {
+					background-color: rgba(0, 0, 0, 0.05);
+					box-shadow: 12px 0 rgba(0, 0, 0, 0.05);
+				}
+			}
+
+			.lunatic-dropdown-icon {
+				cursor: pointer;
+				position: absolute;
+				right: 2px;
+				top: 2px;
+				svg {
+					fill: rgb(146, 146, 146);
+				}
+			}
+
+			.lunatic-transition {
+				opacity: 0;
+
+				&:focus {
+					outline: none;
+				}
+
+				&.visible {
+					visibility: visible;
+					opacity: 1;
+					transition: opacity var(--dropdown-transition-time) ease-out;
+				}
+
+				.lunatic-dropdown-panel-container {
+					box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.9),
+						0px 3px 4px 0px rgba(0, 0, 0, 0.14),
+						0px 1px 8px 0px rgba(0, 0, 0, 0.12);
+
+					.lunatic-dropdown-panel {
+						background-color: white;
+						margin: 0 0 12px 0;
+						border-radius: 4px;
+						z-index: 3;
+						padding-top: 3px;
+						list-style: none;
+						&:focus {
+							outline: none;
+						}
+						max-height: 100px;
+						overflow-y: auto;
+					}
+				}
+
+				/** options style */
+				.lunatic-dropdown-option {
+					padding-left: 10px;
+					cursor: pointer;
+					@include defaultFont();
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					color: black;
+					line-height: 2rem;
+					display: block;
+					&.lunatic-dropdown-option-active {
+						color: var(--color-primary-dark);
+						background-color: var(--color-dropdown-active);
+					}
+					&.lunatic-dropdown-option-selected {
+						background-color: var(--color-dropdown-selected);
+					}
+
+					.lunatic-prefix {
+						color: var(--color-prefix);
+						font-weight: bold;
+					}
+				}
+			}
+		}
+	}
+}

package/src/components/dropdown/index.js

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

package/src/components/filter-description/component.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { interpret } from '../../utils/to-expose';
+import { buildStyleObject } from '../../utils/lib';
+
+const FilterDescription = ({
+	id,
+	label,
+	filterDescription,
+	features,
+	bindings,
+	style,
+	logFunction,
+}) =>
+	filterDescription ? (
+		<div
+			id={`filter-description-${id}`}
+			aria-label={`filter-description`}
+			className="filter-description-lunatic"
+			style={buildStyleObject(style)}
+		>
+			{interpret(features, logFunction)(bindings)(label)}
+		</div>
+	) : null;
+
+FilterDescription.defaultProps = {
+	filterDescription: false,
+	features: [],
+	bindings: {},
+	style: {},
+};
+
+FilterDescription.propTypes = {
+	id: PropTypes.string.isRequired,
+	label: PropTypes.string.isRequired,
+	filterDescription: PropTypes.bool,
+	features: PropTypes.arrayOf(PropTypes.string),
+	bindings: PropTypes.object,
+	style: PropTypes.object,
+};
+
+export default FilterDescription;

package/src/components/filter-description/index.js

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

package/src/components/icon/assets/checkbox-checked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const CheckboxChecked = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="rgb(74,118,168)"
+	>
+		<path d="M0 0h24v24H0z" fill="none" />
+		<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+	</svg>
+);
+
+export default CheckboxChecked;

package/src/components/icon/assets/checkbox-unchecked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const CheckboxUnchecked = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="rgb(74,118,168)"
+	>
+		<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
+		<path d="M0 0h24v24H0z" fill="none" />
+	</svg>
+);
+
+export default CheckboxUnchecked;

package/src/components/icon/assets/index.js

@@ -0,0 +1,4 @@
+export { default as RadioChecked } from './radio-checked';
+export { default as RadioUnchecked } from './radio-unchecked';
+export { default as CheckboxChecked } from './checkbox-checked';
+export { default as CheckboxUnchecked } from './checkbox-unchecked';

package/src/components/icon/assets/radio-checked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const RadioChecked = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="rgb(74,118,168)"
+	>
+		<path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+		<path d="M0 0h24v24H0z" fill="none" />
+	</svg>
+);
+
+export default RadioChecked;

package/src/components/icon/assets/radio-unchecked.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const RadioUnchecked = () => (
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="rgb(74,118,168)"
+	>
+		<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
+		<path d="M0 0h24v24H0z" fill="none" />
+	</svg>
+);
+
+export default RadioUnchecked;

package/src/components/icon/component.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {
+	CheckboxChecked,
+	CheckboxUnchecked,
+	RadioChecked,
+	RadioUnchecked,
+} from './assets';
+import './icon.scss';
+
+const Content = ({ type, checked }) => {
+	if (type === 'radio') {
+		if (checked) return <RadioChecked />;
+		return <RadioUnchecked />;
+	}
+	if (type === 'checkbox') {
+		if (checked) return <CheckboxChecked />;
+		return <CheckboxUnchecked />;
+	}
+	return null;
+};
+
+const Icon = ({ type, checked, disabled, children }) => (
+	<>
+		<span className={`list-icon-wrapper`}>
+			<span className={`list-icon ${disabled ? 'list-icon-disabled' : ''}`}>
+				<Content type={type} checked={checked} />
+			</span>
+			{children}
+		</span>
+	</>
+);
+
+export default Icon;

package/src/components/icon/icon.scss

@@ -0,0 +1,13 @@
+.list-icon-wrapper {
+	&:focus-within svg {
+		fill: var(--color-primary-dark);
+	}
+}
+
+.list-icon {
+	position: absolute;
+	margin-top: -0.1rem;
+	&.list-icon-disabled svg {
+		background-color: var(--color-disabled);
+	}
+}

package/src/components/icon/index.js

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

package/src/components/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+export { default as Table } from './table';
+export * from '../utils/to-expose';