@elyx-code/editor-ui 0.0.2

package/src/lib/table/table.css

@@ -0,0 +1,249 @@
+.ds_table {
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  overflow: hidden;
+  background: white;
+  font-family: 'Outfit', 'Inter', sans-serif;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+
+.ds_table table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  background: white;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.ds_table table thead tr {
+  height: 55px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.ds_table table tbody tr {
+  height: 50px;
+}
+
+.ds_table table tbody tr:last-child {
+  border: 0;
+}
+
+.ds_table table td,
+.ds_table table th {
+  text-align: left;
+}
+
+.ds_table table td.l,
+.ds_table table th.l {
+  text-align: right;
+}
+
+.ds_table table td.c,
+.ds_table table th.c {
+  text-align: center;
+}
+
+.ds_table table td.r,
+.ds_table table th.r {
+  text-align: center;
+}
+
+.ds_table .ds_table-row,
+.ds_table .ds_table-head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ds_table .ds_table-head th {
+  font-size: 13px;
+  color: #4b5563;
+  line-height: 1.2;
+  font-weight: 600;
+  font-family: 'Outfit', 'Inter', sans-serif;
+}
+
+.ds_table tbody tr {
+  font-size: 13px;
+  color: #1f2937;
+  line-height: 1.2;
+  font-weight: unset;
+  border-bottom: 1px solid #f3f4f6;
+  background-color: #ffffff;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.ds_table tbody tr:hover {
+  color: #111827;
+  background-color: #f9fafb;
+  cursor: pointer;
+}
+
+.ds_table-column-selector_header {
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 13px;
+  padding: 4px 10px;
+}
+
+.ds_table-column-selector_option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 10px;
+  height: 100%;
+  box-sizing: unset;
+  color: var(--color-main-grey);
+  font-size: 13px;
+}
+
+/* Make inputs of type checkbox under this table have a pointer cursor */
+.ds_table input[type="checkbox"] {
+  cursor: pointer;
+}
+
+.ds_table input[type="checkbox"]:disabled {
+  cursor: unset;
+}
+
+.ds_table .ds_table-head-cell-config i {
+  font-size: 16px;
+  color: #4b5563;
+}
+
+.ds_table .ds_table-head-cell-config {
+  position: relative;
+  left: 9px;
+}
+
+.ds_table .ds_table-row-cell-group {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.ds_table .ds_table-head-cell,
+.ds_table .ds_table-row-cell {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-shrink: 0;
+}
+
+.ds_table .ds_table-head-cell .slot,
+.ds_table .ds_table-row-cell .slot {
+  width: 100%;
+}
+
+.ds_table .ds_table-head-cell.ds_table-sortable {
+  cursor: pointer;
+}
+
+/* Hide helper text are on header input fields */
+.ds_table .omrs-input-helper {
+  display: none;
+}
+
+.ds_table .ds_table-head-cell .ds_table-head-cell__search-icon {
+  animation: transform 0.2s ease-in-out;
+  font-size: 13px;
+  display: none;
+  cursor: pointer;
+  color: #6b7280;
+}
+
+.ds_table .ds_table-head-cell .ds_table-head-cell__primary-key-icon {
+  font-size: 13px;
+  color: #eab308; /* Star color */
+}
+
+/* Only hide the primary key icon if the search icon is present and we are hovering */
+.ds_table .ds_table-head-cell:hover .ds_table-head-cell__search-icon + .ds_table-head-cell__primary-key-icon {
+  display: none;
+}
+
+.ds_table .ds_table-head-cell:hover .ds_table-head-cell__search-icon {
+  display: block;
+}
+
+.ds_table .ds_table-head-cell:hover .ds_table-head-cell__search-icon:hover {
+  transform: scale(1.2);
+}
+
+.ds_table .ds_table-head-cell i.ds_table-head-cell-sort__asc {
+  position: relative;
+  top: 3px;
+  color: #6366f1;
+}
+
+.ds_table .ds_table-head-cell i.ds_table-head-cell-sort__desc {
+  position: relative;
+  top: -6px;
+  color: #6366f1;
+}
+
+.ds_table-cell-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ds_table .ds_table-column__size-xs {
+  width: 60px;
+}
+
+.ds_table .ds_table-column__size-sm {
+  /* Needs to fit the action buttons at the end of the row */
+  width: 112px;
+}
+
+.ds_table .ds_table-column__size-md {
+  width: 140px;
+}
+
+.ds_table .ds_table-column__size-lg {
+  width: 180px;
+}
+
+.ds_table .ds_table-column__size-xl {
+  width: 220px;
+}
+
+.ds_table .ds_table-column__size-xxl {
+  width: 260px;
+}
+
+.ds_table .ds_table-head-cell-checkbox {
+  padding-left: 16px;
+}
+
+.ds_table tfoot {
+  background-color: #ffffff;
+  border-top: 1px solid #e5e7eb;
+}
+
+.ds_table-resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 5px;
+  cursor: col-resize;
+  z-index: 10;
+  transition: background-color 0.2s ease;
+}
+
+.ds_table-resizer:hover {
+  background-color: rgba(99, 102, 241, 0.5); /* Modern purple tint */
+}

package/src/lib/table/types.ts

@@ -0,0 +1,108 @@
+import { IPaginationProps } from '../pagination/Pagination';
+import { IDropdownMenuCardOption } from '../dropdown/DropdownMenuCard';
+import { EditorService } from '../../services/editor';
+
+export type TableCellValue = string | number | boolean | null;
+
+export interface ITableRowDataPoint {
+	value: string | null;
+}
+
+export enum TableColumnType {
+	String = 'string',
+	UUID = 'uuid',
+	Number = 'number',
+	Boolean = 'boolean',
+	Date = 'date',
+	Relation = 'relation'
+}
+
+export interface ITableColumn extends ITableRowDataPoint {
+	label: string;
+	sortable: boolean;
+	sort: 'asc' | 'desc' | null;
+	searchable: boolean;
+	hidden: boolean;
+	editable: boolean;
+	type: TableColumnType;
+	primaryKey: boolean;
+	foreignKey: null | {
+		table: string;
+		key: string;
+	};
+	dataTypeLabel?: string;
+	nullable?: boolean;
+}
+
+export interface ITableColumnUI extends ITableColumn {
+	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export interface ITableRow {
+	data: ITableRowDataPoint[];
+	onSelect?: (value: string) => void;
+	menuOptions?: IDropdownMenuCardOption[];
+}
+
+export interface ICallbackValueEntry {
+	column: string;
+	value: TableCellValue;
+}
+
+export type ICallbackValues = ICallbackValueEntry[];
+
+export interface ITableSearch {
+	column: string;
+	value: string;
+}
+
+export enum TableSortType {
+	ASC = 'asc',
+	DESC = 'desc'
+}
+
+export interface ITableSort {
+	column: string;
+	direction: TableSortType;
+}
+
+export type IndexedTableRowSelection = {
+	index: number;
+};
+
+export type PrimaryKeyTableRowSelection = {
+	primaryKey: string | number;
+};
+
+export type TableRowSelection =
+	| IndexedTableRowSelection
+	| PrimaryKeyTableRowSelection;
+
+export interface ITableProps {
+	project?: EditorService;
+	totalItems?: number;
+	emptyMessage?: string;
+	hideCreate?: boolean;
+	hideSelection?: boolean;
+	hideRowActions?: boolean;
+	hideDelete?: boolean;
+	footerHelperText?: string;
+	columns: ITableColumnUI[];
+	rows: ITableRow[];
+	loading?: boolean;
+	pagination?: IPaginationProps;
+	searches?: ITableSearch[];
+	sorts?: ITableSort[];
+	selection?: TableRowSelection[];
+	tableKey: string;
+	onCreate?: (values: ICallbackValues) => any;
+	onUpdate?: (values: ICallbackValues) => any;
+	onDelete?: (value: TableRowSelection) => any;
+	onDeleteMany?: (values: TableRowSelection[]) => any;
+	onDeleteAll?: () => any;
+	onSearch?: (column: string, value: string) => any;
+	onSearchesUpdate?: (searches: ITableSearch[]) => any;
+	onSort?: (column: string, direction: TableSortType) => any;
+	onSortsUpdate?: (sorts: ITableSort[]) => any;
+	onSelection?: (entries: TableRowSelection[]) => any;
+}

package/src/lib/text-area/TextArea.tsx

@@ -0,0 +1,183 @@
+import React, { useRef } from 'react';
+import './text-area.css';
+import Loader from '../loader/Loader';
+import { debounce } from '../../utils';
+
+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;
+	iconEnd?: string;
+	label?: string;
+	helper?: string;
+	name?: string;
+	placeholder?: string;
+	onIconClick?: (event: UIEvent) => any;
+	autocomplete?: string;
+	rootProps?: {
+		[key: string]: any;
+	};
+	inputProps?: {
+		[key: string]: any;
+	};
+	[key: string]: any;
+}
+
+const defaultVariant = 'underlined';
+
+export default function TextArea(props: Props) {
+	const rootElementRef = useRef<HTMLDivElement>(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');
+		}
+	};
+
+	// Destructure all known props and leave other props to be cascaded down to the root element
+	const {
+		onChange,
+		value,
+		defaultValue,
+		disabled,
+		color,
+		variant = defaultVariant,
+		size,
+		loading,
+		iconEnd,
+		required,
+		label = '',
+		helper = '',
+		name = '',
+		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 debouncedInputHandler = debounce((value: any, event: any) => {
+		// @ts-ignore
+		onDebouncedInput?.(value, event);
+	}, 200);
+
+	return (
+		<div
+			className='omrs-input-group'
+			ref={rootElementRef}
+			{...remainingRootProps}
+		>
+			<label
+				className={[
+					'omrs-input',
+					'omrs-input-' + variant,
+					...(color ? ['omrs-input-' + color] : []),
+					...(value ? ['not-empty'] : []),
+				].join(' ')}
+			>
+				<textarea
+					required={isRequired}
+					disabled={isDisabled}
+					name={name}
+					autoComplete={autocomplete}
+					placeholder={placeholder}
+					className={[...inputClasses].join(' ')}
+					onInput={(event) => {
+						if (onInput) {
+							handleStateChange(event as any);
+							onInput?.(
+								(event.target as HTMLTextAreaElement).value,
+								event as any
+							);
+						}
+
+						if (onDebouncedInput) {
+							handleStateChange(event as any);
+
+							debouncedInputHandler(
+								(event.target as HTMLTextAreaElement).value,
+								event
+							);
+						}
+					}}
+					onChange={(event) => {
+						handleStateChange(event as any);
+						onChange?.(
+							(event.target as HTMLTextAreaElement).value,
+							event as any
+						);
+					}}
+					onBlur={(event) => {
+						handleStateChange(event as any);
+						props.onBlur?.(
+							(event.target as HTMLTextAreaElement).value,
+							event as any
+						);
+					}}
+					value={value}
+					defaultValue={defaultValue}
+					style={{ maxWidth: '100%' }}
+					{...remainingInputProps}
+				>
+					{value}
+				</textarea>
+				<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>
+	);
+}

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

@@ -0,0 +1,156 @@
+: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: rgba(73, 133, 224, 0.12);
+  --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>textarea,
+.omrs-input-filled>textarea {
+  border: none;
+  border-bottom: 2px solid var(--omrs-color-ink-medium-contrast);
+  /* 0.125rem */
+  width: 100%;
+  max-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>textarea {
+  border-radius: 4px;
+}
+
+.omrs-input-underlined>textarea:focus,
+.omrs-input-filled>textarea: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-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>textarea:hover,
+.omrs-input-filled>textarea:hover {
+  background: var(--omrs-color-interaction-minus-two);
+  border-color: var(--omrs-color-ink-high-contrast);
+}
+
+.omrs-input-underlined>textarea:focus+.omrs-input-label,
+.omrs-input-filled>textarea: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)>textarea:focus+.omrs-input-label,
+.omrs-input-filled:not(.omrs-input-error)>textarea:focus+.omrs-input-label {
+  color: var(--omrs-color-interaction);
+}
+
+.omrs-input-underlined:not(.omrs-input-error)>textarea:focus,
+.omrs-input-filled:not(.omrs-input-error)>textarea:focus {
+  border-color: var(--omrs-color-interaction);
+}
+
+.omrs-input-underlined:not(.omrs-input-error)>textarea:focus~i,
+.omrs-input-filled:not(.omrs-input-error)>textarea:focus~i {
+  color: var(--omrs-color-ink-high-contrast);
+}
+
+/** DISABLED **/
+
+.omrs-input-underlined>textarea:disabled,
+.omrs-input-filled>textarea:disabled {
+  background: var(--omrs-color-bg-low-contrast);
+  cursor: not-allowed;
+}
+
+.omrs-input-underlined>textarea:disabled+.omrs-input-label,
+.omrs-input-filled>textarea:disabled+.omrs-input-label,
+.omrs-input-underlined>textarea:disabled~.omrs-input-helper,
+.omrs-input-filled>textarea:disabled~.omrs-input-helper {
+  color: var(--omrs-color-ink-low-contrast);
+}
+
+.omrs-input-underlined>textarea:disabled~i,
+.omrs-input-filled>textarea: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>textarea {
+  border-color: var(--omrs-color-error);
+}
+
+.omrs-input-underlined>textarea {
+  background: var(--omrs-color-bg-high-contrast);
+}
+
+.omrs-input-filled>textarea {
+  background: var(--omrs-color-bg-low-contrast);
+}