@elyx-code/editor-ui 0.0.2

package/src/lib/text-field/TextField.tsx

@@ -0,0 +1,218 @@
+import React, { forwardRef, useRef } from 'react';
+import './text-field.css';
+import Loader from '../loader/Loader';
+import { debounce } from '../../utils';
+import { TextFieldType } from '.';
+
+interface Props {
+	onChange?: (value: string, event: UIEvent) => any;
+	onInput?: (value: string, event: UIEvent) => any;
+	onBlur?: (value: string, event: UIEvent) => any;
+	onDebouncedInput?: (value: string, event: UIEvent) => any;
+	value?: string;
+	defaultValue?: string;
+	disabled?: boolean;
+	color?: 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'grey';
+	variant?: 'underlined' | 'filled';
+	size?: 'small' | 'medium' | 'large';
+	loading?: boolean;
+	required?: boolean;
+	// iconStart?: string;
+	iconEnd?: string;
+	type?: TextFieldType;
+	label?: string;
+	helper?: string;
+	name?: string;
+	form?: string;
+	placeholder?: string;
+	onIconClick?: (event: UIEvent) => any;
+	autocomplete?: string;
+	autoFocus?: boolean;
+	rootProps?: {
+		[key: string]: any;
+	};
+	inputProps?: {
+		[key: string]: any;
+	};
+	[key: string]: any;
+}
+
+const defaultVariant = 'underlined';
+
+const TextField = forwardRef<HTMLInputElement, Props>(
+	(props: Props, ref: React.ForwardedRef<HTMLInputElement>) => {
+		const rootElementRef = useRef(null);
+
+		const handleStateChange = (event: UIEvent): void => {
+			const variant = props.variant ?? defaultVariant;
+
+			const selectorClass = `.omrs-input-${variant}`;
+
+			const rootElement = rootElementRef.current;
+
+			// @ts-ignore
+			const newValue = event.target.value;
+
+			// @ts-ignore
+			if (newValue.trim() !== '') {
+				// If the input field is not empty after blur, add the class
+				rootElement.classList.add('not-empty');
+			} else {
+				rootElement.classList.remove('not-empty');
+			}
+		};
+
+		// Based on the input type return the correct data type
+		const sanitizeValue = (value: string): string | number => {
+			const type = props.type ?? 'text';
+
+			if (type === 'number') {
+				return value;
+			}
+
+			return value;
+		};
+
+		// Destructure all know props and leave other props to be cascaded down to the root element
+		const {
+			onChange,
+			value,
+			defaultValue,
+			disabled,
+			color,
+			variant = defaultVariant,
+			size,
+			loading,
+			iconStart,
+			iconEnd,
+			required,
+			type = 'text',
+			label = '',
+			helper = '',
+			name = '',
+			form = '',
+			placeholder = '',
+			autocomplete = '',
+			rootProps = {},
+			inputProps = {},
+			onIconClick,
+			onInput,
+			onDebouncedInput,
+			...otherProps
+		} = props;
+
+		const isLoading = (loading ?? false) && !disabled;
+
+		const isDisabled = disabled ?? false;
+
+		const isRequired = required ?? false;
+
+		const { classes: rootClasses = [], ...remainingRootProps } =
+			rootProps || {};
+		const { classes: inputClasses = [], ...remainingInputProps } =
+			inputProps || {};
+
+		const autoFocus = props.autoFocus ?? false;
+
+		const debouncedInputHandler = debounce((value: any, event: any) => {
+			// @ts-ignore
+			onDebouncedInput?.(value, event);
+		}, 200);
+
+		return (
+			<div className='omrs-input-group' ref={rootElementRef}>
+				<label
+					className={[
+						'omrs-input',
+						'omrs-input-' + variant,
+						...(color ? ['omrs-input-' + color] : []),
+						...(value ? ['not-empty'] : []),
+					].join(' ')}
+				>
+					<input
+						ref={ref}
+						required={isRequired}
+						disabled={isDisabled}
+						type={type}
+						name={name}
+						form={form}
+						autoFocus={autoFocus}
+						autoComplete={!!autocomplete ? autocomplete : 'off'}
+						placeholder={placeholder}
+						className={[...inputClasses].join(' ')}
+						onInput={(event) => {
+							if (onInput) {
+								handleStateChange(event as any);
+								onInput?.(
+									sanitizeValue(
+										(event.target as HTMLInputElement).value
+									) as string,
+									event as any
+								);
+							}
+
+							if (onDebouncedInput) {
+								handleStateChange(event as any);
+
+								debouncedInputHandler(
+									sanitizeValue(
+										(event.target as HTMLInputElement).value
+									) as string,
+									event
+								);
+							}
+						}}
+						onChange={(event) => {
+							handleStateChange(event as any);
+							onChange?.(
+								sanitizeValue(
+									(event.target as HTMLInputElement).value
+								) as string,
+								event as any
+							);
+						}}
+						onBlur={(event) => {
+							handleStateChange(event as any);
+							props.onBlur?.(
+								sanitizeValue(
+									(event.target as HTMLInputElement).value
+								) as string,
+								event as any
+							);
+						}}
+						value={value}
+						defaultValue={defaultValue}
+						{...remainingInputProps}
+					/>
+					<span className='omrs-input-label'>{label}</span>
+					<span
+						className={[
+							'omrs-input-helper',
+							...(!helper ? ['invisible'] : []),
+						].join(' ')}
+					>
+						{helper || 'helper'}
+					</span>
+					{(iconEnd || isLoading) && (
+						<i
+							className={[
+								'omrs-input-icon',
+								'fa-solid',
+								'fa-' + (isLoading ? '' : iconEnd),
+							].join(' ')}
+							onClick={(event) => {
+								if (onIconClick && !isLoading) {
+									onIconClick(event as any);
+								}
+							}}
+						>
+							{isLoading && <Loader size={18} variant='text' />}
+						</i>
+					)}
+				</label>
+			</div>
+		);
+	}
+);
+
+export default TextField;

package/src/lib/text-field/index.ts

@@ -0,0 +1,8 @@
+export type TextFieldType =
+	| 'text'
+	| 'password'
+	| 'date'
+	| 'email'
+	| 'number'
+	| 'tel'
+	| 'url';

package/src/lib/text-field/text-field.css

@@ -0,0 +1,201 @@
+:root {
+  --omrs-color-ink-lowest-contrast: rgba(47, 60, 85, 0.18);
+  --omrs-color-ink-low-contrast: rgba(60, 60, 67, 0.3);
+  --omrs-color-ink-medium-contrast: rgba(19, 19, 21, 0.6);
+  --omrs-color-interaction: var(--color-main-primary);
+  /* --omrs-color-interaction-minus-two: var(--color-background-primary); */
+  --omrs-color-error: #b50706;
+  --omrs-color-bg-low-contrast: #eff1f2;
+  --omrs-color-ink-high-contrast: #121212;
+  --omrs-color-bg-high-contrast: #ffffff;
+}
+
+/** END: Non Openmrs CSS **/
+div.omrs-input-group {
+  position: relative;
+}
+
+/* Input */
+.omrs-input-underlined>input,
+.omrs-input-filled>input {
+  border: none;
+  border-bottom: 2px solid var(--omrs-color-ink-medium-contrast);
+  /* 0.125rem */
+  width: 100%;
+  height: 42px;
+  /* 2rem */
+  /* 1.0625rem */
+  padding-left: 14px;
+  /* 0.875rem */
+  line-height: 147.6%;
+  padding-top: 13.2px;
+  /* 0.825rem */
+  padding-bottom: 8px;
+  /* 0.5rem */
+}
+
+.omrs-input-filled>input {
+  border-radius: 4px;
+}
+
+.omrs-input-underlined>input:focus,
+.omrs-input-filled>input:focus {
+  outline: none;
+}
+
+.omrs-input-underlined>.omrs-input-label,
+.omrs-input-filled>.omrs-input-label {
+  position: absolute;
+  top: 10px;
+  /* 0.9375rem */
+  left: 14px;
+  font-size: 15px;
+  /* 0.875rem */
+  line-height: 147.6%;
+  color: var(--omrs-color-ink-medium-contrast);
+  transition: top 0.2s;
+}
+
+.omrs-input-icon:hover {
+  cursor: pointer;
+  transform: scale(1.1);
+}
+
+.omrs-input-underlined>i,
+.omrs-input-filled>i {
+  position: absolute;
+  top: 13px;
+  /* 0.9375rem */
+  right: 14px;
+  /* 0.875rem */
+  color: var(--omrs-color-ink-medium-contrast);
+}
+
+.omrs-input-underlined>.omrs-input-helper,
+.omrs-input-filled>.omrs-input-helper {
+  font-size: 12px;
+  /* 0.9375rem */
+  color: var(--omrs-color-ink-medium-contrast);
+  letter-spacing: 0.44px;
+  /* 0.0275rem */
+  margin: 2px 14px;
+  /* 0.125rem 0.875rem */
+}
+
+.omrs-input-underlined>input:hover,
+.omrs-input-filled>input:hover {
+  /* background: var(--color-background-primary); */
+  border-color: var(--omrs-color-ink-high-contrast);
+}
+
+.omrs-input-underlined>input:focus+.omrs-input-label,
+.omrs-input-filled>input:focus+.omrs-input-label,
+.omrs-input-underlined.not-empty>.omrs-input-label,
+.omrs-input-filled.not-empty>.omrs-input-label {
+  top: 0;
+  font-size: 12px;
+  /* 0.9375rem */
+  margin-bottom: 32px;
+}
+
+.omrs-input-underlined:not(.omrs-input-error)>input:focus+.omrs-input-label,
+.omrs-input-filled:not(.omrs-input-error)>input:focus+.omrs-input-label {
+  color: var(--omrs-color-interaction);
+}
+
+.omrs-input-underlined:not(.omrs-input-error)>input:focus,
+.omrs-input-filled:not(.omrs-input-error)>input:focus {
+  border-color: var(--omrs-color-interaction);
+}
+
+.omrs-input-underlined:not(.omrs-input-error)>input:focus~i,
+.omrs-input-filled:not(.omrs-input-error)>input:focus~i {
+  color: var(--omrs-color-ink-high-contrast);
+}
+
+/** DISABLED **/
+
+.omrs-input-underlined>input:disabled,
+.omrs-input-filled>input:disabled {
+  background: var(--omrs-color-bg-low-contrast);
+  cursor: not-allowed;
+}
+
+.omrs-input-underlined>input:disabled+.omrs-input-label,
+.omrs-input-filled>input:disabled+.omrs-input-label,
+.omrs-input-underlined>input:disabled~.omrs-input-helper,
+.omrs-input-filled>input:disabled~.omrs-input-helper {
+  color: var(--omrs-color-ink-low-contrast);
+}
+
+.omrs-input-underlined>input:disabled~i,
+.omrs-input-filled>input:disabled~i {
+  color: var(--omrs-color-ink-low-contrast);
+  cursor: not-allowed;
+}
+
+/** DANGER **/
+
+.omrs-input-underlined.omrs-input-error>.omrs-input-label,
+.omrs-input-underlined.omrs-input-error>.omrs-input-helper,
+.omrs-input-filled.omrs-input-error>.omrs-input-label,
+.omrs-input-filled.omrs-input-error>.omrs-input-helper {
+  color: var(--omrs-color-error);
+}
+
+.omrs-input-error>i {
+  color: var(--omrs-color-error);
+}
+
+.omrs-input-error>input {
+  border-color: var(--omrs-color-error);
+}
+
+.omrs-input-underlined>input {
+  background: var(--omrs-color-bg-high-contrast);
+}
+
+.omrs-input-filled>input {
+  background: var(--omrs-color-bg-low-contrast);
+}
+
+/* Don't render the placeholder of input type date */
+.omrs-input-underlined>input[type="date"]::-webkit-input-placeholder,
+.omrs-input-filled>input[type="date"]::-webkit-input-placeholder {
+  color: transparent;
+}
+
+/* Don't render the value of input type date */
+.omrs-input-underlined>input[type="date"]::-webkit-datetime-edit,
+.omrs-input-filled>input[type="date"]::-webkit-datetime-edit {
+  color: transparent;
+}
+
+/*
+  Render the value again of input type date when the class ".not-empty" is present,
+  or when input is focused
+*/
+.omrs-input-underlined.not-empty>input[type="date"]::-webkit-datetime-edit,
+.omrs-input-filled.not-empty>input[type="date"]::-webkit-datetime-edit,
+.omrs-input-underlined>input[type="date"]:focus::-webkit-datetime-edit,
+.omrs-input-filled>input[type="date"]:focus::-webkit-datetime-edit {
+  color: unset;
+}
+
+/* Move calendar icon on input type date to the left for 8px */
+.omrs-input-underlined>input[type="date"]::-webkit-calendar-picker-indicator,
+.omrs-input-filled>input[type="date"]::-webkit-calendar-picker-indicator {
+  margin-right: 8px;
+}
+
+/* If a field is empty and not focused, don't render the placeholder for any input type */
+.omrs-input-underlined:not(.not-empty)>input::-webkit-input-placeholder,
+.omrs-input-filled:not(.not-empty)>input::-webkit-input-placeholder {
+  color: transparent;
+}
+
+/* if a field is focused and empty, render the placeholder */
+.omrs-input-underlined>input:focus::-webkit-input-placeholder,
+.omrs-input-filled>input:focus::-webkit-input-placeholder {
+  color: var(--omrs-color-ink-medium-contrast);
+}

package/src/lib/tooltip/Tooltip.tsx

@@ -0,0 +1,24 @@
+import React, { Component, ReactNode } from 'react';
+import './tooltip.css';
+import Popup, { IPopupProps } from '../popup/Popup';
+
+interface ITooltipProps extends IPopupProps {
+	children: ReactNode;
+}
+
+export default class Tooltip extends Component<ITooltipProps> {
+	render() {
+		const { children, ...popupProps } = this.props;
+
+		return (
+			// @ts-ignore
+			<Popup
+				{...popupProps}
+				containerClasses={['tooltip']}
+				arrowClasses={['tooltip-arrow']}
+			>
+				{children}
+			</Popup>
+		);
+	}
+}

package/src/lib/tooltip/tooltip.css

@@ -0,0 +1,17 @@
+.tooltip {
+  background: #222;
+  color: white;
+  padding: 5px;
+  border-radius: 4px;
+  font-size: 90%;
+}
+
+.popup-arrow {
+  background: #222;
+  width: 8px;
+  height: 8px;
+}
+
+.tooltip--large-font {
+  font-size: 20px;
+}

package/src/localization/index.ts

@@ -0,0 +1,47 @@
+// Get the browser locale
+function getBrowserLocales(options = {}) {
+	const defaultOptions = {
+		languageCodeOnly: false,
+	};
+
+	const opt = {
+		...defaultOptions,
+
+		...options,
+	};
+
+	const browserLocales =
+		navigator.languages === undefined
+			? [navigator.language]
+			: navigator.languages;
+
+	if (!browserLocales) {
+		return undefined;
+	}
+
+	return browserLocales.map((locale) => {
+		const trimmedLocale = locale.trim();
+
+		return opt.languageCodeOnly ? trimmedLocale.split(/-|_/)[0] : trimmedLocale;
+	});
+}
+
+const browserLocales = getBrowserLocales();
+const defaultLocale = browserLocales[0];
+
+const defaultFormatter = new Intl.NumberFormat(defaultLocale, {
+	style: 'currency',
+	currency: 'EUR',
+});
+
+export const formatCurrencyToDefault = (value: number) => {
+	return defaultFormatter.format(value);
+};
+
+export const formatCurrency = (value: number, currency: string) => {
+  const formatter = new Intl.NumberFormat(defaultLocale, {
+		style: 'currency',
+		currency: currency,
+	});
+	return formatter.format(value);
+};