@elyx-code/editor-ui 0.0.2

package/src/lib/dropdown/DropdownMenuCard.tsx

@@ -0,0 +1,324 @@
+import React from 'react';
+import './dropdown-menu.css';
+import Tooltip from '../tooltip/Tooltip';
+import { Link, useNavigate } from 'react-router-dom';
+import { IPopupProps } from '../popup/Popup';
+
+export interface IDropdownMenuCardOption<Value = string> {
+	onClick?: (
+		value: Value,
+		event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>,
+	) => void;
+	id?: string;
+	navigateTo?: string;
+	label?: string;
+	subLabel?: string;
+	child?: string | React.ReactNode;
+	iconEnd?: string;
+	iconEndSrc?: string;
+	iconEndSrcHover?: string;
+	iconStart?: string;
+	iconStartSrc?: string;
+	iconStartSrcHover?: string;
+	iconStartClasses?: string;
+	iconEndClasses?: string;
+	iconStartStyles?: React.CSSProperties;
+	iconEndStyles?: React.CSSProperties;
+	color?: 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'grey';
+	tooltip?: string;
+	disabled?: boolean;
+	value?: Value;
+	classes?: string[];
+	style?: React.CSSProperties;
+	popupOptions?: Partial<IPopupProps>;
+}
+
+export interface IDropdownMenuCardProps<Value> {
+	options: IDropdownMenuCardOption<Value>[];
+	value?: Value;
+	header?: string | React.ReactNode;
+}
+
+const DropdownMenuCard = <Value extends string = string>({
+	options = [],
+	value,
+	header,
+}: IDropdownMenuCardProps<Value>) => {
+	return (
+		<div className='dropdown-menu-card'>
+			{header}
+			{options.map(
+				({
+					label,
+					subLabel,
+					iconEnd,
+					iconEndSrc,
+					iconEndSrcHover,
+					iconStart,
+					iconStartSrc,
+					iconStartSrcHover,
+					iconStartClasses,
+					iconStartStyles,
+					iconEndClasses,
+					iconEndStyles,
+					color = 'primary',
+					tooltip,
+					disabled = false,
+					navigateTo,
+					value: optionValue,
+					child,
+					style,
+					onClick,
+					id,
+					popupOptions,
+				}) => {
+					// Random id
+					const resolvedId = id || Math.random().toString(36).substring(2, 9);
+					const selected = value === optionValue && !!value;
+
+					return (
+						<span key={resolvedId}>
+							{child ? (
+								child
+							) : navigateTo ? (
+								<Link
+									style={style}
+									to={navigateTo}
+									// onClick={(e) => {
+									// 	e.preventDefault();
+									// 	if (!disabled) {
+									// 		navigate(navigateTo);
+									// 	}
+									// }}
+									className={[
+										'dropdown-menu-card-option',
+										`dropdown-menu-card-option__color-${color}`,
+										disabled ? 'dropdown-menu-card-option__disabled' : '',
+										selected && !disabled
+											? 'dropdown-menu-card-option__selected'
+											: '',
+									].join(' ')}
+								>
+									{iconStart && (
+										<i
+											className={`${iconStart} ${iconStartClasses || ''}`}
+											style={iconStartStyles}
+										/>
+									)}
+									{iconStartSrc && (
+										<img
+											className={
+												(!!iconStartSrcHover
+													? 'dropdown-menu-option-icon-start-img__hoverable '
+													: '') +
+												'dropdown-menu-option-icon-start-img-default ' +
+												(iconStartClasses || '')
+											}
+											style={iconStartStyles}
+											src={iconStartSrc}
+										/>
+									)}
+									{iconStartSrcHover && (
+										<img
+											className={
+												'dropdown-menu-option-icon-start-img-hover ' +
+												(iconStartClasses || '')
+											}
+											style={iconStartStyles}
+											src={iconStartSrcHover}
+										/>
+									)}
+									<div
+										style={{
+											display: 'flex',
+											flexDirection: 'column',
+											lineHeight: 'normal',
+											gap: 2,
+										}}
+									>
+										{label}
+										{subLabel && (
+											<p className='dropdown-menu-card-option__sub-label'>
+												{subLabel}
+											</p>
+										)}
+									</div>
+									{!iconEnd &&
+										!iconStart &&
+										!iconEndSrc &&
+										!iconEndSrcHover &&
+										!iconStartSrc &&
+										!iconStartSrcHover && (
+											<i
+												className={`fa-solid fa-arrow-right ${
+													iconEndClasses || ''
+												}`}
+												style={iconEndStyles}
+											/>
+										)}
+									{!!iconEnd &&
+										!iconStart &&
+										!iconEndSrc &&
+										!iconEndSrcHover &&
+										!iconStartSrc &&
+										!iconStartSrcHover && (
+											<i
+												className={`${iconEnd} ${iconEndClasses || ''}`}
+												style={iconEndStyles}
+											/>
+										)}
+									{!!iconEndSrc && (
+										<img
+											className={
+												'dropdown-menu-option-icon-end-img-default ' +
+													iconEndClasses || ''
+											}
+											src={iconEndSrc}
+											style={iconEndStyles}
+										/>
+									)}
+									{!!iconEndSrcHover && (
+										<img
+											className={
+												'dropdown-menu-option-icon-end-img-hover ' +
+													iconEndClasses || ''
+											}
+											src={iconEndSrcHover}
+											style={iconEndStyles}
+										/>
+									)}
+								</Link>
+							) : (
+								<button
+									style={style}
+									onClick={(e) => {
+										onClick?.(optionValue, e);
+									}}
+									id={`dropdown-menu-card-option--${resolvedId}`}
+									className={[
+										'dropdown-menu-card-option',
+										`dropdown-menu-card-option__color-${color}`,
+										disabled ? 'dropdown-menu-card-option__disabled' : '',
+										selected && !disabled
+											? 'dropdown-menu-card-option__selected'
+											: '',
+									].join(' ')}
+									disabled={disabled}
+								>
+									<span
+										style={{
+											display: 'flex',
+											gap: '14px',
+											alignItems: 'center',
+										}}
+										className='dropdown-menu-card-option__content'
+									>
+										{iconStart && (
+											<i
+												className={`${iconStart} ${iconStartClasses || ''}`}
+												style={iconStartStyles}
+											/>
+										)}
+										{iconStartSrc && (
+											<img
+												className={
+													(!!iconStartSrcHover
+														? 'dropdown-menu-option-icon-start-img__hoverable '
+														: '') +
+													'dropdown-menu-option-icon-start-img-default ' +
+													(iconStartClasses || '')
+												}
+												style={iconStartStyles}
+												src={iconStartSrc}
+											/>
+										)}
+										{iconStartSrcHover && (
+											<img
+												className={
+													'dropdown-menu-option-icon-start-img-hover ' +
+													(iconStartClasses || '')
+												}
+												style={iconStartStyles}
+												src={iconStartSrcHover}
+											/>
+										)}
+										<div
+											style={{
+												display: 'flex',
+												flexDirection: 'column',
+												lineHeight: 'normal',
+												gap: 2,
+											}}
+										>
+											{label}
+											{subLabel && (
+												<p className='dropdown-menu-card-option__sub-label'>
+													{subLabel}
+												</p>
+											)}
+										</div>
+									</span>
+									{!iconEnd &&
+										!iconStart &&
+										!iconEndSrc &&
+										!iconEndSrcHover &&
+										!iconStartSrc &&
+										!iconStartSrcHover && (
+											<i
+												className={`fa-solid fa-arrow-right ${
+													iconEndClasses || ''
+												}`}
+												style={iconEndStyles}
+											/>
+										)}
+									{!!iconEnd &&
+										!iconStart &&
+										!iconEndSrc &&
+										!iconEndSrcHover &&
+										!iconStartSrc &&
+										!iconStartSrcHover && (
+											<i
+												className={`${iconEnd} ${iconEndClasses || ''}`}
+												style={iconEndStyles}
+											/>
+										)}
+									{!!iconEndSrc && (
+										<img
+											className={
+												'dropdown-menu-option-icon-end-img-default ' +
+													iconEndClasses || ''
+											}
+											src={iconEndSrc}
+											style={iconEndStyles}
+										/>
+									)}
+									{!!iconEndSrcHover && (
+										<img
+											className={
+												'dropdown-menu-option-icon-end-img-hover ' +
+													iconEndClasses || ''
+											}
+											src={iconEndSrcHover}
+											style={iconEndStyles}
+										/>
+									)}
+								</button>
+							)}
+							{tooltip && (
+								<Tooltip
+									anchorQuerySelector={`#dropdown-menu-card-option--${resolvedId}`}
+									placement='right'
+									{...(popupOptions || {})}
+								>
+									{tooltip}
+								</Tooltip>
+							)}
+						</span>
+					);
+				},
+			)}
+		</div>
+	);
+};
+
+export default DropdownMenuCard;

package/src/lib/dropdown/DropdownMenuPopup.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import './dropdown-menu.css';
+import Popup, { IPopupProps } from '../popup/Popup';
+import DropdownMenuCard, { IDropdownMenuCardProps } from './DropdownMenuCard';
+
+interface IDropdownMenuPopupProps<Value> extends IDropdownMenuCardProps<Value> {
+	popupOptions?: IPopupProps;
+}
+
+export default function DropdownMenuPopup<Value extends string = string>({
+	options = [],
+	popupOptions,
+	...props
+}: IDropdownMenuPopupProps<Value>) {
+	return (
+		// @ts-ignore
+		<Popup
+			anchorQuerySelector={popupOptions?.anchorQuerySelector}
+			closeDelay={400}
+			arrowClasses={['dropdown-menu-card-arrow']}
+			{...popupOptions}
+			placement={popupOptions?.placement || 'bottom'}
+		>
+			<DropdownMenuCard {...props} options={options} />
+		</Popup>
+	);
+}

package/src/lib/dropdown/dropdown-button.css

@@ -0,0 +1,76 @@
+/* variables */
+:root {
+  /* colors */
+  --li4-color-primary-hsl: 250, 84%, 54%;
+  --li4-color-bg-hsl: 0, 0%, 100%;
+  --li4-color-contrast-high-hsl: 230, 7%, 23%;
+  --li4-color-contrast-higher-hsl: 230, 13%, 9%;
+  --li4-color-bg-light-hsl: 0, 0%, 100%;
+  --li4-color-white-hsl: 0, 0%, 100%;
+  --li4-color-bg-dark-hsl: 240, 4%, 95%;
+  --li4-color-bg-lighter-hsl: 0, 0%, 100%;
+  --li4-color-black-hsl: 230, 13%, 9%;
+
+  /* spacing */
+  --li4-space-3xs: 0.25rem;
+  --li4-space-2xs: 0.375rem;
+  --li4-space-xs: 0.5rem;
+  --li4-space-sm: 0.75rem;
+}
+
+/* buttons */
+.ds-dropdown-button__button {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1em;
+  white-space: nowrap;
+  text-decoration: none;
+  background: hsl(var(--li4-color-bg-dark-hsl));
+  color: hsl(var(--li4-color-contrast-higher-hsl));
+  cursor: pointer;
+  text-decoration: none;
+  line-height: 1.2;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  transition: all 0.2s ease;
+  will-change: transform;
+  padding: var(--li4-space-2xs) var(--li4-space-sm);
+  border-radius: 0.25em;
+  display: flex;
+  gap: 20px;
+}
+
+.ds-dropdown-button__button:focus-visible {
+  box-shadow: 0px 0px 0px 2px hsl(var(--li4-color-bg-hsl)), 0px 0px 0px 4px hsla(var(--li4-color-contrast-higher-hsl), 0.15);
+  outline: none;
+}
+
+.ds-dropdown-button__button:active {
+  transform: translateY(2px);
+}
+
+.ds-dropdown-button__button {
+  background: hsl(var(--li4-color-bg-lighter-hsl));
+  color: hsl(var(--li4-color-contrast-higher-hsl));
+  box-shadow: inset 0px 1px 0px hsla(var(--li4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--li4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--li4-color-black-hsl), 0.2), 0 0.3px 0.4px rgba(0, 0, 0, 0.025), 0 0.9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
+}
+
+.ds-dropdown-button__button:hover {
+  background: hsl(var(--li4-color-bg-light-hsl));
+  box-shadow: inset 0px 1px 0px hsla(var(--li4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--li4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--li4-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
+}
+
+.ds-dropdown-button__button:focus {
+  box-shadow: inset 0px 1px 0px hsla(var(--li4-color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--li4-color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--li4-color-black-hsl), 0.2), 0 0.1px 0.3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12), 0px 0px 0px 2px hsl(var(--li4-color-bg-hsl)), 0px 0px 0px 4px hsl(var(--li4-color-contrast-high-hsl));
+}
+
+.ds-dropdown-button {
+  display: inline-block;
+  position: relative;
+}

package/src/lib/dropdown/dropdown-menu.css

@@ -0,0 +1,151 @@
+.dropdown-menu-card {
+	padding: 5px;
+	background-color: #111;
+	top: 70px;
+	left: 0;
+	/* width: 100%; */
+	border-radius: 4px;
+	display: block;
+	box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.4);
+	min-width: 200px;
+	background-color: #fff;
+	box-shadow: 0 14px 35px 0 rgba(9, 9, 12, 0.15);
+}
+
+.dropdown-menu-card a,
+.dropdown-menu-card button {
+	position: relative;
+	transition: all 200ms linear;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 500;
+	font-size: 15px;
+	border-radius: 2px;
+	padding: 5px 0;
+	padding-left: 20px;
+	padding-right: 15px;
+	margin: 2px 0;
+	text-align: left;
+	text-decoration: none;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-align-items: center;
+	-moz-align-items: center;
+	-ms-align-items: center;
+	align-items: center;
+	justify-content: space-between;
+	-ms-flex-pack: distribute;
+	min-height: 40px;
+	cursor: pointer;
+	border: none;
+	background-color: transparent;
+	width: 100%;
+}
+
+.dropdown-menu-card .dropdown-menu-card-option {
+	color: black;
+	/* Make sure there is a minimum horizontal gap between its own two children */
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 10px;
+}
+
+.dropdown-menu-card
+	.dropdown-menu-card-option
+	.dropdown-menu-card-option__sub-label {
+	font-size: 0.7em;
+	color: rgba(0, 0, 0, 0.54);
+	margin: 0;
+}
+
+/* Colors */
+.dropdown-menu-card
+	.dropdown-menu-card-option.dropdown-menu-card-option__color-error {
+	color: var(--color-main-error);
+}
+
+.dropdown-menu-card
+	.dropdown-menu-card-option.dropdown-menu-card-option__color-warning {
+	color: var(--color-main-warning);
+}
+
+.dropdown-menu-card .dropdown-menu-card-option:hover,
+.dropdown-menu-card .dropdown-menu-card-option__selected {
+	color: #fff;
+	background-color: var(--color-main-primary);
+}
+.dropdown-menu-card
+	.dropdown-menu-card-option:hover
+	.dropdown-menu-card-option__sub-label,
+.dropdown-menu-card
+	.dropdown-menu-card-option__selected
+	.dropdown-menu-card-option__sub-label {
+	color: rgba(255, 255, 255, 0.7);
+}
+
+/* Disabled */
+.dropdown-menu-card
+	.dropdown-menu-card-option.dropdown-menu-card-option__disabled,
+.dropdown-menu-card
+	.dropdown-menu-card-option.dropdown-menu-card-option__color-error.dropdown-menu-card-option__disabled {
+	color: var(--color-light-grey);
+	cursor: not-allowed;
+	background-color: unset;
+}
+
+.dropdown-menu-card
+	.dropdown-menu-card-option.dropdown-menu-card-option__disabled
+	.dropdown-menu-card-option__sub-label {
+	color: var(--color-light-grey);
+}
+
+.dropdown-menu-card
+	.dropdown-menu-card-option:hover
+	> .dropdown-menu-option-icon-start-img-hover,
+.dropdown-menu-card
+	.dropdown-menu-card-option:hover
+	> .dropdown-menu-option-icon-start-img-default,
+.dropdown-menu-card .dropdown-menu-card-option:hover > i {
+	transform: scale(1.2);
+	transition: transform 200ms linear;
+}
+
+.dropdown-menu-card
+	.dropdown-menu-card-option.dropdown-menu-card-option__disabled:hover
+	> i {
+	transform: unset;
+	transition: unset;
+}
+
+/* .dropdown-menu-card .popup-arrow, */
+.dropdown-menu-card-arrow {
+	background: #fff;
+	z-index: 2;
+}
+
+.dropdown-menu-card
+	.dropdown-menu-card-option
+	.dropdown-menu-option-icon-start-img-hover,
+.dropdown-menu-card
+	.dropdown-menu-card-option
+	.dropdown-menu-option-icon-end-img-hover {
+	display: none;
+}
+
+.dropdown-menu-card
+	.dropdown-menu-card-option:hover
+	.dropdown-menu-option-icon-start-img__hoverable,
+.dropdown-menu-card
+	.dropdown-menu-card-option:hover
+	.dropdown-menu-option-icon-end-img__hoverable {
+	display: none;
+}
+
+.dropdown-menu-card
+	.dropdown-menu-card-option:hover
+	.dropdown-menu-option-icon-start-img-hover,
+.dropdown-menu-card
+	.dropdown-menu-card-option:hover
+	.dropdown-menu-option-icon-end-img-hover {
+	display: block;
+}

package/src/lib/json-editor/RawJsonEditor.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef } from 'react';
+import JSONEditor, { ExpandOptions, JSONEditorOptions, OnNodeNameParams } from 'jsoneditor';
+import 'jsoneditor/dist/jsoneditor.css';
+import './json-editor.css';
+import { isEqual } from '../../utils';
+
+interface RawJsonEditorProps extends JSONEditorOptions {
+	text?: string;
+	onChangeText?: (text: string) => void;
+	onReady?: (jsoneditor: JSONEditor) => void;
+	onNodeName?: ((nodeName: OnNodeNameParams) => string | undefined) | undefined;
+	onExpand?: (expandParams: ExpandOptions) => void | undefined;
+}
+
+const RawJsonEditor: React.FC<RawJsonEditorProps> = (props) => {
+	const containerRef = useRef<HTMLDivElement | null>(null);
+	const jsoneditorRef = useRef<JSONEditor | null>(null);
+
+	// Ref Proxies
+	const onNodeNameRef = useRef(props.onNodeName);
+	const onChangeTextRef = useRef(props.onChangeText);
+	const onExpandRef = useRef(props.onExpand);
+
+	// 1. TRACK INTERACTION: Keep track of whether the update originated from the user
+	const isUserInteracting = useRef(false);
+
+	useEffect(() => {
+		onNodeNameRef.current = props.onNodeName;
+		onChangeTextRef.current = props.onChangeText;
+		onExpandRef.current = props.onExpand;
+	});
+
+	const schemaRef = useRef<any>(JSON.parse(JSON.stringify(props.schema)));
+	const schemaRefsRef = useRef<any>(
+		!!props.schemaRefs ? JSON.parse(JSON.stringify(props.schemaRefs)) : null
+	);
+
+	useEffect(() => {
+		const options: JSONEditorOptions = {
+			...props,
+			indentation: 4,
+			mainMenuBar: false,
+			navigationBar: false,
+
+			onNodeName: (params) => {
+				return onNodeNameRef.current?.({
+					...params,
+					path: params.path as string[],
+					type: params.type as 'object' | 'array',
+				});
+			},
+			onChangeText: (text) => {
+				// 2. FLAG INTERACTION: We (the editor) are causing this change.
+				isUserInteracting.current = true;
+				onChangeTextRef.current?.(text);
+			},
+			onExpand: (params) => {
+				onExpandRef.current?.(params);
+			},
+		};
+
+		// @ts-ignore
+		delete options.text;
+		// @ts-ignore
+		delete options.onReady;
+
+		if (containerRef.current) {
+			try {
+				jsoneditorRef.current = new JSONEditor(containerRef.current, options);
+			} catch (error) {
+				console.error('Failed to create JSONEditor:', error);
+			}
+
+			jsoneditorRef.current.setMode('tree');
+
+			if ('text' in props && props.text) {
+				try {
+					jsoneditorRef.current.setText(props.text);
+				} catch (error) {
+					console.error('Failed to set JSON text:', error);
+				}
+			}
+
+			if (props.onReady) {
+				props.onReady(jsoneditorRef.current);
+			}
+		}
+
+		return () => {
+			if (jsoneditorRef.current) {
+				jsoneditorRef.current.destroy();
+			}
+		};
+	}, []);
+
+	// Handle Updates
+	useEffect(() => {
+		if (jsoneditorRef.current) {
+			if ('text' in props && props.text !== undefined) {
+				// 3. CHECK FLAG: If the user just typed this, IGNORE the prop update.
+				if (isUserInteracting.current) {
+					// Reset the flag. We have successfully ignored the echo from React.
+					isUserInteracting.current = false;
+				} else {
+					// This update is EXTERNAL (e.g. "Format" button, or parent state change unrelated to typing)
+					try {
+						const currentText = jsoneditorRef.current.getText();
+						// Only update if actually different to minimize DOM thrashing
+						if (currentText !== props.text) {
+							jsoneditorRef.current.updateText(props.text);
+						}
+					} catch (error) {
+						console.error('Failed to update JSON text:', error);
+					}
+				}
+			}
+
+			const schemaChanged = !isEqual(props.schema, schemaRef.current);
+			const schemaRefsChanged = !isEqual(
+				props.schemaRefs,
+				schemaRefsRef.current
+			);
+
+			if (schemaChanged || schemaRefsChanged) {
+				schemaRef.current = JSON.parse(JSON.stringify(props.schema));
+				schemaRefsRef.current = !!props.schemaRefs
+					? JSON.parse(JSON.stringify(props.schemaRefs))
+					: null;
+				jsoneditorRef.current.setSchema(props.schema, props.schemaRefs);
+			}
+		}
+	}, [props.text, props.schema, props.schemaRefs]);
+
+	return <div className='jsoneditor-react-container' ref={containerRef} />;
+};
+
+export default RawJsonEditor;