@elyx-code/editor-ui 0.0.2

package/src/lib/canvas/utils.ts

@@ -0,0 +1,59 @@
+function getDistanceToViewportCenter(element: HTMLElement) {
+	const rect = element.getBoundingClientRect();
+	const viewportWidth =
+		window.innerWidth || document.documentElement.clientWidth;
+	const viewportHeight =
+		window.innerHeight || document.documentElement.clientHeight;
+	const elementX = rect.left + rect.width / 2;
+	const elementY = rect.top + rect.height / 2;
+	const distanceX = Math.abs(elementX - viewportWidth / 2);
+	const distanceY = Math.abs(elementY - viewportHeight / 2);
+
+	return Math.sqrt(distanceX ** 2 + distanceY ** 2);
+}
+
+export function getClosestElementToViewportCenter(elements: HTMLElement[]) {
+	const distances = Array.from(elements).map((element) =>
+		getDistanceToViewportCenter(element)
+	);
+	const minDistance = Math.min(...distances);
+	const closestElementIndex = distances.findIndex(
+		(distance) => distance === minDistance
+	);
+
+	return elements[closestElementIndex];
+}
+
+export function createClickRef(
+	location: { x: number; y: number },
+	canvasElement: HTMLElement,
+	clickRef?: HTMLElement
+) {
+	const scaledLocation = {
+		x: location.x,
+		y: location.y,
+	};
+
+	// Create purple dot on the center of the click
+	const dot = document.createElement('div');
+	dot.style.position = 'absolute';
+	dot.style.width = '10px';
+	dot.style.height = '10px';
+	dot.style.borderRadius = '50%';
+	dot.style.transform = 'translate(-50%, -50%)';
+	dot.style.backgroundColor = 'var(--color-main-primary)';
+	dot.style.left = scaledLocation.x + 'px';
+	dot.style.top = scaledLocation.y + 'px';
+	dot.style.zIndex = '2';
+	dot.style.pointerEvents = 'none';
+	dot.id = 'last-canvas-click-marker';
+
+	// If the element exists and the element is a child of the canvas node, then remove it
+	if (clickRef && canvasElement.contains(clickRef)) {
+		canvasElement.removeChild(clickRef);
+	}
+
+	canvasElement.appendChild(dot);
+
+	return dot;
+}

package/src/lib/card/Card.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import './card.css';
+import Popup from '../popup/Popup';
+import { IPopupProps } from '../popup/Popup';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+interface CardProps {
+	onClick?: (...args: any[]) => any;
+	disabled?: boolean;
+	children?: React.ReactNode;
+	tooltip?: React.ReactNode;
+	id?: string;
+	popupOptions?: IPopupProps;
+}
+
+const Card: React.FC<CardProps> = ({
+	onClick,
+	disabled,
+	tooltip,
+	id,
+	popupOptions,
+	children,
+}) => {
+	let resolvedId = id;
+
+	if (!id && !popupOptions?.anchorQuerySelector) {
+		resolvedId = 'card-popup--' + Math.random().toString(36).substring(2, 9);
+	}
+
+	if (!resolvedId && !popupOptions?.anchorQuerySelector) {
+		Logger.warn(
+			'Card component: No id or anchorQuerySelector provided for tooltip. Tooltip will not work.'
+		);
+	}
+
+	return (
+		<>
+			<div
+				onClick={onClick}
+				id={resolvedId}
+				className={`card-background card-size`}
+				style={
+					disabled ? { opacity: 0.6, transform: 'none', cursor: 'unset' } : {}
+				}
+			>
+				{children}
+			</div>
+			{tooltip && (
+				<Popup
+					anchorQuerySelector={`#${resolvedId}`}
+					placement='bottom'
+					closeDelay={100}
+					{...popupOptions}
+				>
+					{tooltip}
+				</Popup>
+			)}
+		</>
+	);
+};
+
+export default Card;

package/src/lib/card/LoadingCard.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import './card.css';
+import Box from '@mui/material/Box';
+import LinearProgress from '@mui/material/LinearProgress';
+
+export function LinearDeterminate() {
+	const [progress, setProgress] = React.useState(0);
+
+	React.useEffect(() => {
+		const timer = setInterval(() => {
+			setProgress((oldProgress) => {
+				if (oldProgress === 100) {
+					return 0;
+				}
+				const diff = Math.random() * 10;
+				return Math.min(oldProgress + diff, 100);
+			});
+		}, 500);
+
+		return () => {
+			clearInterval(timer);
+		};
+	}, []);
+
+	return (
+		<Box sx={{ width: '100%' }}>
+			<LinearProgress variant='determinate' value={progress} />
+		</Box>
+	);
+}
+
+export interface ILoadingCardProps {
+	title?: string;
+	description?: string;
+	progress?: number;
+	viewMode?: 'grid' | 'rows';
+}
+
+const LoadingCard: React.FC<ILoadingCardProps> = (props: ILoadingCardProps) => {
+	const shouldShowProgress = props.progress !== undefined;
+
+	if (props.viewMode === 'rows') {
+		return (
+			<div className='gallery-row-card gallery-row-card--loading'>
+				<div className='gallery-row-card-left' style={{ flexGrow: 1 }}>
+					<div className='gallery-row-card-image bg-color-5 loading'></div>
+					<div className='gallery-row-card-info' style={{ flexGrow: 1 }}>
+						<h3 className='gallery-row-card-title loading' style={{ width: '40%', height: '14px' }}>
+							{props.title}
+						</h3>
+						<p className='gallery-row-card-description loading' style={{ width: '80%', height: '10px', marginTop: '6px' }}>
+							{props.description}
+						</p>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className='loading_card'>
+			<div className='loading_card__image'></div>
+			{shouldShowProgress && <LinearDeterminate />}
+			<div className='loading_card__content'>
+				<h3
+					className={`card-title truncated-title${
+						!!props.title ? '' : ' loading'
+					}`}
+				>
+					{props.title}
+				</h3>
+				<p
+					className={`card-description${!!props.description ? '' : ' loading'}`}
+				>
+					{props.description}
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export default LoadingCard;

package/src/lib/card/card.css

@@ -0,0 +1,259 @@
+.card-background {
+  background-color: white;
+  cursor: pointer;
+  border-radius: 10px;
+  box-shadow: 10px 0px 15px rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+}
+
+.card-background:hover {
+  transform: scale(1.05);
+  transition: transform 0.2s ease-in-out;
+}
+
+.card-background.disabled:hover {
+  transform: none;
+}
+
+.card-size {
+  height: 170px;
+  width: 170px;
+}
+
+.card-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.card-image {
+  height: 115px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  object-fit: cover;
+}
+
+.card-image.card-image--cover {
+  /* Make image cover entire space without stretching */
+  object-fit: cover;
+}
+
+.card-image.card-image--icon {
+  /* Make image cover entire space without stretching */
+  object-fit: contain;
+}
+
+.card-image img {
+  /* Make image darker */
+  filter: brightness(70%);
+}
+
+.bg-color-1 {
+  background-color: #FFF7B1;
+}
+
+.bg-color-2 {
+  background-color: #E8FFED;
+}
+
+.bg-color-3 {
+  background-color: #D8F0FF;
+}
+.bg-color-4 {
+  background-color: #FFC9C9;
+}
+
+.bg-color-5 {
+  background-color: #EFD6FF;
+}
+
+/* Add transparency to the default colors */
+.bg-color-1--light {
+  background-color: #fff7b197;
+}
+
+.bg-color-2--light {
+  background-color: #E8FFED97;
+}
+
+.bg-color-3--light {
+  background-color: #D8F0FF97;
+}
+.bg-color-4--light {
+  background-color: #FFC9C997;
+}
+
+.bg-color-5--light {
+  background-color: #EFD6FF97;
+}
+
+
+.card-image i {
+  font-size: 40px;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.card-info-section {
+  width: 100%;
+  height: 55px;
+  padding: 10px;
+  display: flex;
+}
+
+.card-info-section--left {
+  width: 100%;
+  flex-grow: 1;
+  /* max-width: calc(100% - 20px); */
+  /* border-top: 0.5px solid #dee2e6; */
+}
+
+.card-info-section--left--with-menu {
+  width: 100%;
+  flex-grow: 1;
+  max-width: calc(100% - 20px);
+  /* border-top: 0.5px solid #dee2e6; */
+}
+
+.card-info-section--right {
+  /* width: 100%; */
+  height: 55px;
+  padding: 10px;
+  /* border-top: 0.5px solid #dee2e6; */
+}
+
+.card-info-section--menu-icon {
+  color: var(--color-light-grey);
+  /* Remove all default button styles */
+  border: none;
+  background: none;
+  cursor: pointer;
+  height: 100%;
+}
+
+.truncated-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-title {
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+}
+
+.all-uppercase {
+  text-transform: uppercase;
+}
+
+.card-description {
+  font-size: 10px;
+  font-weight: 400;
+  padding: 0;
+  margin: 0;
+  color: #6c757d;
+
+  /* truncate with ellipsis */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-top-right-content {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+/* Loading card skeleton styles */
+.loading_card {
+  height: 170px;
+  width: 170px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 10px 0px 15px rgba(0, 0, 0, 0.06);
+  /* Loading cursor */
+  cursor: progress;
+}
+
+.loading_card__content {
+  padding: 10px;
+}
+
+@keyframes shine {
+  to {
+    background-position-x: -200%;
+  }
+}
+
+.loading_card__image,
+.loading_card h3.loading,
+.loading_card p.loading {
+  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+  border-radius: 5px;
+  background-size: 200% 100%;
+  animation: 1s shine linear infinite;
+}
+
+.loading_card__image {
+  height: 115px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.loading_card h3 {
+  height: 14px;
+  margin: 0px;
+}
+
+.loading_card p {
+  height: 18px;
+  width: 80%;
+  margin: 0px;
+  margin-top: 4px;
+}
+
+/* tag container in the top-left corner, above the image */
+.card-tags {
+  position: absolute;
+  top: 6px;              /* slightly tighter to help the smaller size */
+  left: 6px;
+  display: flex;
+  gap: 4px;              /* smaller gaps for compact tags */
+  flex-wrap: wrap;
+  max-width: calc(100% - 12px);
+  z-index: 1;            /* Ensure tags render above images that have opacity */
+}
+
+/* make chips pop/legible on images, but smaller overall */
+.card-tag.MuiChip-root {
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .02em;
+  box-shadow: 0 2px 6px rgba(0,0,0,.12);
+  border-radius: 999px;
+}
+
+/* small sizing tweaks beyond MUI's "small" */
+.card-tag.MuiChip-root.MuiChip-sizeSmall {
+  height: 18px;          /* down from ~24px */
+  font-size: 10px;       /* smaller text */
+  line-height: 1;
+}
+
+.card-tag.MuiChip-root .MuiChip-label {
+  padding-left: 6px;
+  padding-right: 6px;    /* tighter pill padding */
+}
+
+/* If the chip has an icon, nudge it so the whole chip stays compact */
+.card-tag.MuiChip-root .MuiChip-icon {
+  font-size: 14px;
+  margin-left: 4px;
+}

package/src/lib/chip/Chip.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import './chip.css';
+
+interface Props {
+	color?: 'primary' | 'secondary' | 'error' | 'warning' | 'success';
+	variant?: 'solid' | 'outlined';
+	children: React.ReactNode;
+}
+
+// Returns strings like: '1,34,255' so they still need to be formatted inline to end up as "rgb(1,34,255)" or "rgba(1,34,255,0.2)"
+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 'primary':
+		default:
+			return {
+				text: '98,2,238',
+				main: '98,2,238',
+				background: '98,2,238',
+				contrast: '255,255,255',
+			};
+	}
+}
+
+const Chip: React.FC<Props> = ({ color = 'primary', variant, children }) => {
+	const resolvedColor = resolveRgbColorValueFromProp(color);
+
+	return (
+		<span
+			style={{
+				display: 'flex',
+				justifyContent: 'center',
+				alignItems: 'center',
+				minWidth: '80px',
+				height: '18px',
+				borderRadius: '9px',
+				backgroundColor: `rgba(${resolvedColor.background}, 0.2)`,
+			}}
+		>
+			<p
+				style={{
+					margin: '0px',
+					fontSize: '10px',
+					textTransform: 'uppercase',
+					color: `rgb(${resolvedColor.text})`,
+				}}
+			>
+				{children}
+			</p>
+		</span>
+	);
+};
+
+export default Chip;

package/src/lib/dialog/Dialog.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import './dialog.css';
+import { IComponentLifecycleProps } from '../../utils/react';
+
+export interface IDialogProps extends IComponentLifecycleProps {
+	onClose: (event: any) => Promise<void> | void;
+	contentHeight?: boolean;
+	children?: React.ReactNode;
+}
+
+export default function Dialog(props: IDialogProps) {
+	const rootElementRef = useRef(null);
+	const shouldCloseRef = useRef(false);
+
+	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?.();
+	}, []);
+
+	useEffect(() => {
+		// Set overflow hidden on the body element to avoid the background of the dialog scrolling
+		document.body.style.overflow = 'hidden';
+
+		return () => {
+			// Reset overflow to its default value
+			document.body.style.overflow = 'auto';
+		};
+	}, []);
+
+	const handleBackdropMouseDown = () => {
+		shouldCloseRef.current = true; // started on backdrop
+	};
+
+	const handleDialogMouseDownCapture = () => {
+		// If mousedown started inside the dialog, don't close on backdrop click.
+		shouldCloseRef.current = false;
+	};
+
+	const handleBackdropClick = (e: React.MouseEvent) => {
+		const selectedText = window.getSelection()?.type === 'Range';
+		const selectedInput =
+			(document.activeElement instanceof HTMLInputElement ||
+				document.activeElement instanceof HTMLTextAreaElement) &&
+			document.activeElement.selectionStart !==
+				document.activeElement.selectionEnd;
+
+		if (selectedText || selectedInput) {
+			// Don't close the dialog if the user is selecting text or typing in an input
+			return;
+		}
+
+		// Only close for primary button and when the press started on backdrop
+		if (e.button === 0 && shouldCloseRef.current) {
+			props.onClose?.(e);
+		}
+	};
+
+	const contentHeight = props.contentHeight;
+
+	return createPortal(
+		<div
+			style={{
+				position: 'fixed',
+				top: 0,
+				left: 0,
+				width: '100vw',
+				height: '100vh',
+				backgroundColor: 'rgba(0, 0, 0, 0.54)',
+				zIndex: 1250,
+				display: 'flex',
+				justifyContent: 'center',
+			}}
+			onMouseDown={handleBackdropMouseDown}
+			onClick={handleBackdropClick}
+		>
+			<div
+				id='dialog-card'
+				onClick={(e) => {
+					// We want to stop the propagation of the click event so that it doesn't trigger the click event on the parent element
+					// The parent element is the screen overlay, when clicked, we want to close the dialog.
+					e.stopPropagation();
+				}}
+				onMouseDownCapture={handleDialogMouseDownCapture}
+				style={{
+					position: 'absolute',
+					width: 'calc(100% - 160px)',
+					...(contentHeight
+						? { maxHeight: 'calc(100% - 160px)' }
+						: { height: 'calc(100% - 160px)' }),
+					maxWidth: '1200px',
+					margin: '80px',
+					backgroundColor: 'white',
+					zIndex: 1,
+					borderRadius: '8px',
+					overflow: 'auto',
+				}}
+			>
+				{props.children}
+			</div>
+		</div>,
+		document.body
+	);
+}