@elyx-code/editor-ui 0.0.2

package/src/lib/json-editor/json-editor.css

@@ -0,0 +1,35 @@
+.jsoneditor-react-container {
+  width: 100%;
+  height: 100%;
+}
+
+/*
+  All children of the jsoneditor container should override the previously set styles in the application
+  for the editor to work properly.
+*/
+.jsoneditor-react-container * {
+  font-family: unset !important;
+}
+
+.jsoneditor {
+  border: none;
+}
+
+.jsoneditor-react-container .ace_editor {
+  font-family: consolas, menlo, monaco, "Ubuntu Mono", source-code-pro, monospace !important;
+}
+
+div.jsoneditor-outer.has-main-menu-bar {
+  margin-top: unset;
+  padding-top: unset;
+}
+
+.ace-jsoneditor .ace_gutter {
+  background-color: transparent;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.jsoneditor-statusbar {
+  background-color: transparent;
+  border-top: none;
+}

package/src/lib/loader/Loader.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import './loader.css';
+
+interface Props {
+	color?: 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'grey';
+	variant?: 'solid' | 'text' | 'outlined';
+	thickness?: 'thin' | 'medium' | 'thick';
+	size?: number;
+}
+
+function resolveRgbColorValueFromProp(color: string = 'primary'): {
+	text: string;
+	background: string;
+	contrast: string;
+	main: string;
+} {
+	switch (color) {
+		case 'error':
+			return {
+				text: '238,2,2',
+				main: '238,2,2',
+				background: '238,2,2',
+				contrast: '255,255,255',
+			};
+		case 'warning':
+			return {
+				text: '221,172,0',
+				main: '255,211,0',
+				background: '255,211,53',
+				contrast: '255,255,255',
+			};
+		case 'success':
+			return {
+				text: '95,216,85',
+				main: '95,216,85',
+				background: '95,216,85',
+				contrast: '255,255,255',
+			};
+		case 'grey':
+			return {
+				text: '63,63,64',
+				main: '63,63,64',
+				background: '63,63,64',
+				contrast: '255,255,255',
+			};
+		case 'primary':
+		default:
+			return {
+				text: '98,2,238',
+				main: '98,2,238',
+				background: '98,2,238',
+				contrast: '255,255,255',
+			};
+	}
+}
+
+const Loader: React.FC<Props> = ({
+	color = 'primary',
+	variant,
+	thickness = 'medium',
+	size = 80,
+}) => {
+	const thicknessMultiplier =
+		thickness === 'thin' ? 0.05 : thickness === 'medium' ? 0.1 : 0.2;
+	const smallSize = size * 0.8;
+	const lineWidth = size * thicknessMultiplier;
+	const positionCenterOffset = (size - smallSize) / 2;
+	const colorOptions = resolveRgbColorValueFromProp(color);
+	const borderColor =
+		variant === 'outlined' || variant === 'text'
+			? colorOptions.main
+			: colorOptions.contrast;
+
+	return (
+		<div className='lds-ring' style={{ width: size, height: size }}>
+			<div
+				style={{
+					width: smallSize,
+					height: smallSize,
+					borderWidth: lineWidth,
+					top: positionCenterOffset,
+					left: positionCenterOffset,
+					borderColor: `rgb(${borderColor}) transparent transparent transparent`,
+				}}
+			/>
+			<div
+				style={{
+					width: smallSize,
+					height: smallSize,
+					borderWidth: lineWidth,
+					top: positionCenterOffset,
+					left: positionCenterOffset,
+					borderColor: `rgb(${borderColor}) transparent transparent transparent`,
+				}}
+			/>
+			<div
+				style={{
+					width: smallSize,
+					height: smallSize,
+					borderWidth: lineWidth,
+					top: positionCenterOffset,
+					left: positionCenterOffset,
+					borderColor: `rgb(${borderColor}) transparent transparent transparent`,
+				}}
+			/>
+			<div
+				style={{
+					width: smallSize,
+					height: smallSize,
+					borderWidth: lineWidth,
+					top: positionCenterOffset,
+					left: positionCenterOffset,
+					borderColor: `rgb(${borderColor}) transparent transparent transparent`,
+				}}
+			/>
+		</div>
+	);
+};
+
+export default Loader;

package/src/lib/loader/loader.css

@@ -0,0 +1,38 @@
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  /* width: 80px;
+  height: 80px; */
+}
+
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  border-style: solid;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  /* border-color: #fff transparent transparent transparent; */
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/lib/pagination/Pagination.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+export interface IPaginationProps {
+	page: number;
+	onChange: (page: number) => any;
+	total: number;
+	disabled?: boolean;
+}
+
+const Pagination: React.FC<IPaginationProps> = ({ page, onChange, total, disabled }) => {
+	return (
+		<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+			<button
+				className='icon-button'
+				disabled={page === 1 || total === 1 || disabled}
+				onClick={() => onChange(1)}
+			>
+				<i className='fa-regular fa-backward-step'></i>
+			</button>
+			<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+				{page === 1 ? (
+					<div style={{ width: '24px', height: '24px' }}></div>
+				) : (
+					<button
+						className='icon-button'
+						disabled={total === 1 || disabled}
+						onClick={() => onChange(page - 1)}
+					>
+						{page - 1}
+					</button>
+				)}
+				<button
+					className={['icon-button', ...(total === 1 ? [] : ['selected'])].join(
+						' '
+					)}
+					disabled={total === 1 || disabled}
+					style={{ width: '32px', height: '32px', borderRadius: '50%' }}
+				>
+					{page}
+				</button>
+				{page === total ? (
+					<div style={{ width: '24px', height: '24px' }}></div>
+				) : (
+					<button
+						className='icon-button'
+						disabled={total === 1 || disabled}
+						onClick={() => onChange(page + 1)}
+					>
+						{page + 1}
+					</button>
+				)}
+			</div>
+			<button
+				className='icon-button'
+				disabled={page === total || total === 1 || disabled}
+				onClick={() => onChange(total)}
+			>
+				<i className='fa-regular fa-forward-step'></i>
+			</button>
+		</div>
+	);
+};
+
+export default Pagination;

package/src/lib/popup/CanvasPopupBaseComponent.tsx

@@ -0,0 +1,103 @@
+import React, { Component, useEffect, useLayoutEffect, useRef } from 'react';
+import cx from 'classnames';
+import { Logger } from '@elyx-code/common-ts-utils';
+import './popup.css';
+import { ICanvasElementComponentProps } from '../../services/editor/CanvasElement';
+
+export interface ICanvasPopupBaseComponentProps
+	extends Partial<ICanvasElementComponentProps> {
+	containerClasses?: string[];
+	arrowClasses?: string[];
+	onClick?: (event: any) => any;
+	id?: string;
+	children: React.ReactNode;
+}
+
+// Define an error boundary class that will catch errors in the child component.
+class ErrorBoundary extends Component<
+	{ children: React.ReactNode },
+	{ hasError: boolean }
+> {
+	constructor(props: { children: React.ReactNode }) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(error: any) {
+		return { hasError: true };
+	}
+
+	componentDidCatch(error: any, errorInfo: any) {
+		Logger.error('ErrorBoundary caught an error:', error, errorInfo);
+	}
+
+	render() {
+		if (this.state.hasError) {
+			// Optionally, you can render a fallback UI.
+			return null;
+		}
+		return this.props.children;
+	}
+}
+
+// The original functional component, renamed for clarity.
+function CanvasPopupBaseComponentFunctional(
+	props: ICanvasPopupBaseComponentProps
+) {
+	const rootElementRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+		if (element && document.contains(element)) {
+			props.onMount?.(element);
+		}
+
+		// When the component is unmounted.
+		return () => {
+			props.onUnmount?.();
+		};
+	}, []);
+
+	useEffect(() => {
+		const element = rootElementRef.current;
+		props.onUpdate?.(element);
+	});
+
+	useLayoutEffect(() => {
+		props.onBeforeUpdate?.();
+	}, []);
+
+	const {
+		containerClasses,
+		id,
+		onMount,
+		onUnmount,
+		onUpdate,
+		onBeforeUpdate,
+		...otherProps
+	} = props;
+
+	return (
+		<div
+			ref={rootElementRef}
+			id={id}
+			{...otherProps}
+			className={cx(['popup', ...(containerClasses || [])])}
+			style={{ display: 'revert', position: 'relative' }}
+			onClick={props?.onClick}
+		>
+			{props.children}
+		</div>
+	);
+}
+
+// Export the wrapped component so the API remains the same.
+export default function CanvasPopupBaseComponent(
+	props: ICanvasPopupBaseComponentProps
+) {
+	return (
+		<ErrorBoundary>
+			<CanvasPopupBaseComponentFunctional {...props} />
+		</ErrorBoundary>
+	);
+}

package/src/lib/popup/Popup.tsx

@@ -0,0 +1,243 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import {
+	computePosition,
+	Placement,
+	flip,
+	shift,
+	offset,
+	arrow,
+} from '@floating-ui/dom';
+import './popup.css';
+import { onClickAway } from '../../utils/DOM';
+
+export interface IPopupProps {
+	anchorQuerySelector: string;
+	placement: Placement;
+	containerClasses?: string[];
+	arrowClasses?: string[];
+	openDelay?: number;
+	closeDelay?: number;
+	noArrow?: boolean;
+	open?: boolean;
+	onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+	onClickAway?: (event: Event) => void;
+	id?: string;
+	autoPosition?: boolean;
+	children?: React.ReactNode;
+	offset?: number;
+	clickAwayTargets?: Element[];
+	style?: React.CSSProperties;
+	arrowStyle?: React.CSSProperties;
+}
+
+const Popup = forwardRef(
+	(props: IPopupProps, ref: React.Ref<HTMLDivElement>) => {
+		// This now runs only once per component instance, not on every render.
+		const [stableId] = useState(
+			() =>
+				props.id || 'popup-id--' + Math.random().toString(36).substring(2, 9),
+		);
+
+		const {
+			containerClasses = [],
+			arrowClasses = [],
+			noArrow,
+			onClick,
+			placement,
+			autoPosition,
+			offset: offsetValue = 10,
+			openDelay = 0,
+			closeDelay = 0,
+			open,
+			anchorQuerySelector,
+			arrowStyle,
+		} = props;
+
+		useEffect(() => {
+			// --- Setup DOM Node Queries ---
+			const anchor = document.querySelector(
+				anchorQuerySelector,
+			) as HTMLDivElement;
+
+			// Use the stableId to query for the tooltip and arrow
+			const tooltip = document.querySelector('#' + stableId) as HTMLDivElement;
+			const arrowElement = document.querySelector(
+				'#popup-arrow--' + stableId,
+			) as HTMLDivElement;
+
+			// If nodes don't exist yet, do nothing.
+			if (!anchor || !tooltip) {
+				return;
+			}
+
+			// --- Setup Floating UI ---
+			const middleware = [offset(offsetValue), shift({ padding: 5 })];
+
+			if (autoPosition === undefined || autoPosition) {
+				middleware.push(flip());
+			}
+
+			if (!noArrow && arrowElement) {
+				middleware.push(arrow({ element: arrowElement }));
+			}
+
+			const update = () => {
+				computePosition(anchor, tooltip, { placement, middleware }).then(
+					({ x, y, placement, middlewareData }: any) => {
+						tooltip.style.left = `${x}px`;
+						tooltip.style.top = `${y}px`;
+
+						if (!noArrow && arrowElement && middlewareData.arrow) {
+							const { x: arrowX, y: arrowY } = middlewareData.arrow;
+							const staticSide = (
+								{
+									top: 'bottom',
+									right: 'left',
+									bottom: 'top',
+									left: 'right',
+								} as any
+							)[(placement as string).split('-')[0]] as string;
+
+							arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';
+							arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';
+							(arrowElement.style as any)[staticSide] = '-4px';
+						}
+					},
+				);
+			};
+
+			// --- Handler and Timeout Setup ---
+			let openTimeout: ReturnType<typeof setTimeout> | null = null;
+			let closeTimeout: ReturnType<typeof setTimeout> | null = null;
+
+			const showTooltip = () => {
+				if (closeTimeout) clearTimeout(closeTimeout);
+				closeTimeout = null;
+				openTimeout = setTimeout(() => {
+					tooltip.style.display = 'block';
+					update();
+				}, openDelay);
+			};
+
+			const hideTooltip = () => {
+				if (openTimeout) clearTimeout(openTimeout);
+				openTimeout = null;
+				closeTimeout = setTimeout(() => {
+					tooltip.style.display = '';
+				}, closeDelay);
+			};
+
+			const clearClose = () => {
+				if (closeTimeout) clearTimeout(closeTimeout);
+				closeTimeout = null;
+			};
+
+			// --- Logic Branching & Listener Attachment ---
+			// Store all added listeners to remove them in the cleanup function
+			const activeListeners: {
+				target: HTMLElement | Document;
+				event: string;
+				handler: EventListener;
+			}[] = [];
+
+			if (open === true) {
+				showTooltip();
+			} else if (open === false) {
+				hideTooltip();
+			} else {
+				// Only add hover/focus listeners if `open` is not controlled
+				const tooltipListeners = [
+					['mouseenter', clearClose as EventListener],
+					['mouseleave', hideTooltip as EventListener],
+				];
+
+				const anchorListeners = [
+					['mouseenter', showTooltip as EventListener],
+					['mouseleave', hideTooltip as EventListener],
+					['focus', showTooltip as EventListener],
+					['blur', hideTooltip as EventListener],
+				];
+
+				tooltipListeners.forEach(([event, handler]) => {
+					tooltip.addEventListener(
+						event as keyof HTMLElementEventMap,
+						handler as EventListener,
+					);
+					activeListeners.push({
+						target: tooltip,
+						event: event as keyof HTMLElementEventMap,
+						handler: handler as EventListener,
+					});
+				});
+
+				anchorListeners.forEach(([event, handler]) => {
+					anchor.addEventListener(
+						event as keyof HTMLElementEventMap,
+						handler as EventListener,
+					);
+					activeListeners.push({
+						target: anchor,
+						event: event as keyof HTMLElementEventMap,
+						handler: handler as EventListener,
+					});
+				});
+			}
+
+			let cleanup: () => void = () => {};
+
+			// Click-away listener
+			if (!!props.onClickAway) {
+				cleanup = onClickAway(
+					tooltip,
+					props.onClickAway,
+					...(props.clickAwayTargets || []),
+				);
+			}
+
+			return () => {
+				// Clear any pending timeouts
+				if (openTimeout) clearTimeout(openTimeout);
+				if (closeTimeout) clearTimeout(closeTimeout);
+
+				// Run click-away cleanup if it was set
+				cleanup();
+
+				// Remove all event listeners this effect added
+				activeListeners.forEach(({ target, event, handler }) => {
+					target.removeEventListener(event, handler);
+				});
+			};
+		}, [
+			anchorQuerySelector,
+			placement,
+			autoPosition,
+			offsetValue,
+			noArrow,
+			openDelay,
+			closeDelay,
+			open,
+			stableId, // Re-run if our stableId changes (it won't, but it's a dep)
+		]);
+
+		return (
+			<div
+				ref={ref} // Pass the forwardedRef to the DOM element
+				className={['popup', ...containerClasses].join(' ')}
+				onClick={onClick}
+				id={stableId} // Use the stable ID
+				style={props.style}
+			>
+				{props.children}
+				{!noArrow && (
+					<div
+						id={`popup-arrow--${stableId}`} // Use the stable ID
+						className={['popup-arrow', ...arrowClasses].join(' ')}
+						style={arrowStyle}
+					/>
+				)}
+			</div>
+		);
+	},
+);
+
+export default Popup;

package/src/lib/popup/popup.css

@@ -0,0 +1,16 @@
+.popup {
+  width: max-content;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  z-index: 2;
+}
+
+.popup-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  transform: rotate(45deg);
+}
+