@elyx-code/editor-ui 0.0.2

package/src/lib/dialog/SmallDialog.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import type * as CSS from 'csstype';
+import './dialog.css';
+
+export interface ISmallDialogProps {
+	onClose: (event: UIEvent) => void;
+	style?: CSS.Properties;
+	overlayStyle?: CSS.Properties;
+	children: React.ReactNode;
+}
+
+const SmallDialog = forwardRef(
+	(props: ISmallDialogProps, ref: React.Ref<HTMLDivElement>) => {
+		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';
+			};
+		}, []);
+
+		return createPortal(
+			<div
+				ref={ref}
+				style={{
+					position: 'fixed',
+					top: 0,
+					left: 0,
+					width: '100vw',
+					height: '100vh',
+					backgroundColor: 'rgba(0, 0, 0, 0.54)',
+					zIndex: 1250,
+					display: 'flex',
+					justifyContent: 'center',
+					...props.overlayStyle,
+				}}
+				onClick={(event: any) => {
+					props.onClose?.(event);
+				}}
+			>
+				<div
+					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();
+					}}
+					className='dialog__body__small'
+					style={props.style}
+				>
+					{props.children}
+				</div>
+			</div>,
+			document.body
+		);
+	}
+);
+
+export default SmallDialog;

package/src/lib/dialog/dialog.css

@@ -0,0 +1,40 @@
+.dialog_back_button {
+	align-items: center;
+	font-family: inherit;
+	font-weight: 500;
+	font-size: 16px;
+	color: var(--color-main-grey);
+	background: white;
+	border: none;
+	letter-spacing: 0.05em;
+	cursor: pointer;
+	user-select: none;
+	-webkit-user-select: none;
+	touch-action: manipulation;
+	/* margin-right: 16px; */
+	background-color: transparent;
+}
+
+.dialog_back_button:disabled {
+	cursor: not-allowed;
+	color: var(--color-light-grey);
+}
+
+.dialog_back_button:hover {
+	transform: scale(1.05);
+}
+
+.dialog__body__small {
+	position: absolute;
+	width: 350px;
+	min-height: 300px;
+	max-width: calc(100% - 20px);
+	max-height: calc(100% - 20px);
+	background-color: white;
+	z-index: 1;
+	padding: 30px;
+	border-radius: 8px;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}

package/src/lib/display-data-structure/index.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect } from 'react';
+
+interface Props {
+	value: any;
+	id?: string;
+}
+
+const DisplayDataStructure: React.FC<Props> = ({ value, id: propId }) => {
+	const id = propId || 'display-data-structure-slot';
+
+	useEffect(() => {
+		// @ts-ignore This is a third-party library loaded as a script tag through CDN in index.html and available as a global object
+		new JsonViewer({
+			value: value,
+		}).render('#' + id);
+	}, [value]);
+
+	return <div id={id}></div>;
+};
+
+export default DisplayDataStructure;

package/src/lib/dropdown/CanvasDropdownMenuCard.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import './dropdown-menu.css';
+import CanvasDropdownMenuCardOption, {
+	ICanvasDropdownMenuCardOption,
+} from './CanvasDropdownMenuCardOption';
+
+export interface ICanvasDropdownMenuCardProps<Value> {
+	options: ICanvasDropdownMenuCardOption<Value>[];
+	value?: Value;
+	header?: React.ReactNode;
+}
+
+export default function CanvasDropdownMenuCard<Value = string>(
+	props: ICanvasDropdownMenuCardProps<Value>
+) {
+	const { options = [] } = props;
+
+	return (
+		<div className='dropdown-menu-card'>
+			{props.header}
+			{options.map(
+				({
+					label,
+					iconEnd,
+					iconStart,
+					color = 'primary',
+					tooltip,
+					disabled = false,
+					navigateTo,
+					value,
+					child,
+					onClick,
+					parentCanvasObject,
+					style,
+					classes,
+					id,
+					project,
+				}) => {
+					if (!project) {
+						throw new Error('No editor instance in option')
+					}
+					return (
+					<CanvasDropdownMenuCardOption
+						key={id}
+						{...{
+							id,
+							label,
+							iconEnd,
+							iconStart,
+							color,
+							tooltip,
+							disabled,
+							navigateTo,
+							value,
+							child,
+							onClick,
+							style,
+							classes,
+							parentCanvasObject,
+							project,
+						}}
+					/>
+				)
+			}
+			)}
+		</div>
+	);
+}

package/src/lib/dropdown/CanvasDropdownMenuCardOption.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect } from 'react';
+import { useCanvasPopup } from '../../services/editor/CanvasPopup';
+import CanvasPopupBaseComponent from '../popup/CanvasPopupBaseComponent';
+import { RelativeObjectsState } from '../canvas';
+import { IDropdownMenuCardOption } from './DropdownMenuCard';
+import { EditorService } from '../../services/editor';
+
+export interface ICanvasDropdownMenuCardOption<Value = string>
+	extends IDropdownMenuCardOption<Value> {
+	id: string;
+	parentCanvasObject: RelativeObjectsState;
+	project: EditorService;
+}
+
+export default function CanvasDropdownMenuCardOption<Value = string>(
+	props: ICanvasDropdownMenuCardOption<Value>
+) {
+	const memoizedCanvasPopupBody = useCallback(
+		() => (
+			<CanvasPopupBaseComponent containerClasses={['tooltip', 'tooltip--large-font']}>
+				{props.tooltip}
+			</CanvasPopupBaseComponent>
+		),
+		[props.tooltip]
+	);
+
+	const canvasPopup = useCanvasPopup(
+		{
+			editor: props.project,
+			id: props.id,
+			arrowClasses: ['tooltip-arrow'],
+			anchorQuerySelector: '#dropdown-menu-card-option--' + props.id,
+			parentCanvasObject: props.parentCanvasObject,
+		},
+		memoizedCanvasPopupBody,
+	)
+		.setupHover({
+			closeDelay: 80,
+			openDelay: 600,
+		})
+		.onBeforeShow(() => {
+			// Only show if the 'tooltip' value is set
+			return !!props.tooltip;
+		});
+
+	// useEffect(() => {
+	// 	return () => {
+	// 		canvasPopup.destroy();
+	// 	};
+	// }, [canvasPopup]);
+
+	const {
+		label,
+		iconEnd,
+		iconStart,
+		color = 'primary',
+		disabled = false,
+		navigateTo,
+		value,
+		child,
+		onClick,
+		id,
+		style,
+		classes,
+	} = props;
+	const selected = value === props.value && !!value;
+
+	return (
+		<span>
+			{child ? (
+				child
+			) : navigateTo ? (
+				<a
+					style={style}
+					ref={canvasPopup.anchorRef}
+					href={navigateTo}
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						e.nativeEvent.stopImmediatePropagation();
+						if (!disabled) {
+							EditorService.navigate(navigateTo);
+						}
+					}}
+					id={'dropdown-menu-card-option--' + id}
+					className={[
+						'dropdown-menu-card-option',
+						'dropdown-menu-card-option__color-' + color,
+						disabled ? 'dropdown-menu-card-option__disabled' : '',
+						selected && !disabled ? 'dropdown-menu-card-option__selected' : '',
+						...(classes || []),
+					].join(' ')}
+				>
+					{iconStart && <i className={iconStart} />}
+					{label}
+					{(iconEnd || (!iconEnd && !iconStart)) && (
+						<i
+							className={[
+								'fa-solid',
+								iconEnd ? 'fa-' + iconEnd : 'fa-arrow-right',
+							].join(' ')}
+						/>
+					)}
+				</a>
+			) : (
+				<button
+					style={style}
+					ref={canvasPopup.anchorRef}
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						e.nativeEvent.stopImmediatePropagation();
+						onClick?.(value, e);
+					}}
+					id={'dropdown-menu-card-option--' + id}
+					className={[
+						'dropdown-menu-card-option',
+						'dropdown-menu-card-option__color-' + color,
+						disabled ? 'dropdown-menu-card-option__disabled' : '',
+						selected && !disabled ? 'dropdown-menu-card-option__selected' : '',
+						...(classes || []),
+					].join(' ')}
+					disabled={disabled}
+				>
+					<span style={{ display: 'flex', gap: '14px', alignItems: 'center' }}>
+						{iconStart && <i className={iconStart} />}
+						{label}
+					</span>
+					{(iconEnd || (!iconEnd && !iconStart)) && (
+						<i className={iconEnd || 'fa-solid fa-arrow-right'} />
+					)}
+				</button>
+			)}
+		</span>
+	);
+}

package/src/lib/dropdown/DropdownButton.tsx

@@ -0,0 +1,104 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import './dropdown-button.css';
+import DropdownMenuPopup from './DropdownMenuPopup';
+import { IDropdownMenuCardOption } from './DropdownMenuCard';
+import { onClickAway } from '../../utils/DOM';
+
+interface IDropdownButtonProps<Value> {
+	value: Value;
+	options: IDropdownMenuCardOption[];
+	id?: string;
+	popupId?: string;
+	clickAwayTarget?: Element;
+}
+
+export default function DropdownButton<Value extends string = string>({
+	value,
+	options,
+	id: propsId,
+	popupId: propsPopupId,
+	clickAwayTarget,
+}: IDropdownButtonProps<Value>) {
+	const [isOpen, setIsOpen] = useState(false);
+
+	// Fall back to a random id if none is provided
+	const id = useMemo(
+		() => propsId || Math.random().toString(36).substring(2, 9),
+		[propsId]
+	);
+	const popupId = useMemo(
+		() => propsPopupId || `${id}-popup`,
+		[propsPopupId, id]
+	);
+
+	const onClickHandler = useCallback(
+		(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+			e.stopPropagation();
+
+			if (isOpen) {
+				setIsOpen(false);
+				return;
+			}
+
+			const popupElement = document.getElementById(popupId);
+
+			onClickAway(
+				popupElement,
+				() => {
+					setIsOpen(false);
+				},
+				clickAwayTarget
+			);
+
+			setIsOpen(true);
+		},
+		[isOpen, popupId, clickAwayTarget]
+	);
+
+	const selectedOption = useMemo(
+		() => options.find((o) => o.value === value) || options[0],
+		[options, value]
+	);
+
+	return (
+		<div className='ds-dropdown-button'>
+			<button
+				className='ds-dropdown-button__button'
+				id={id}
+				onClick={onClickHandler}
+			>
+				<div style={{ display: 'flex', gap: 10 }}>
+					{selectedOption?.iconEnd || selectedOption?.iconStart ? (
+						<i
+							className={`fa-solid fa-${
+								selectedOption.iconEnd || selectedOption.iconStart
+							}`}
+						/>
+					) : null}
+					<span>{selectedOption?.label}</span>
+				</div>
+				<i className='fa-solid fa-caret-down' />
+			</button>
+			<DropdownMenuPopup<Value>
+				popupOptions={{
+					anchorQuerySelector: `#${id}`,
+					placement: 'bottom',
+					noArrow: true,
+					open: isOpen,
+					id: popupId,
+				}}
+				value={value}
+				// @ts-ignore
+				options={options.map((option) => ({
+					...option,
+					onClick: option.onClick
+						? (value, e) => {
+								setIsOpen(false);
+								option.onClick?.(value as Value, e);
+						  }
+						: undefined,
+				}))}
+			/>
+		</div>
+	);
+}