@hrnec06/react_utils 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.ts"

package/src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,235 @@
+import React, { Children, createContext, forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useState } from "react";
+import CTXM from "./ContextMenu.types";
+import { Optional, Vector2 } from "@hrnec06/util";
+import useContextMenu, { ContextMenuContext, type ContextMenuContext as TContextMenuContext } from "./ContextMenuCtx";
+import useDefaultValue from "../../hooks/useDefaultValue";
+import { v4 as uuidv4} from 'uuid';
+import { createPortal } from "react-dom";
+import useListener from "../../hooks/useListener";
+import clsx from "clsx";
+import ContextMenuSection from "./ContextMenuSection";
+import ContextMenuRoot from "./ContextMenuRoot";
+import useSignal, { Signal } from "../../hooks/useSignal";
+
+type InheritCallback = (parent: TContextMenuContext) => (CTXM.ContextMenuRoot | { parent: string, children: CTXM.ContextMenuRoot });
+
+interface ContextMenuWrapperProps {
+	open: boolean,
+	position: Vector2,
+	menu: CTXM.ContextMenuRoot
+}
+function ContextMenuWrapper({
+	open,
+	position,
+	menu
+}: ContextMenuWrapperProps)
+{
+	if (!open)
+		return undefined;
+
+	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation();
+		e.preventDefault();
+	}
+
+	return createPortal((
+		<div
+			onMouseDownCapture={handleMouseDown}
+			onContextMenu={handleMouseDown}
+			className={clsx(
+				"fixed z-600 select-none"
+			)}
+			style={{
+				left: position[0],
+				top: position[1]
+			}}
+		>
+			<ContextMenuRoot menu={menu} />
+		</div>
+	), document.body);
+}
+
+
+interface ContextMenuReference {
+	isOpen: boolean,
+	close: () => void,
+	open: (position: Vector2) => void,
+}
+
+interface ContextMenuProps extends React.HTMLProps<HTMLDivElement> {
+	$menu: CTXM.ContextMenuRoot,
+	$open?: boolean,
+	$id?: string,
+	$inherit?: boolean | InheritCallback | Array<string | { id: string, parent: string }>,
+	/**
+	 * If disabled, context event is captured using useCTXMListener()
+	 */
+	$autoGenerateWrapper?: boolean,
+	$onOpen?: () => void,
+	$onClose?: () => void,
+	$onSelect?: (id: string, owner: unknown) => void,
+}
+const ContextMenu = forwardRef<ContextMenuReference, ContextMenuProps>(({
+	$open,
+	$menu,
+	$id,
+	$inherit = false,
+	$autoGenerateWrapper = false,
+	$onOpen,
+	$onClose,
+	$onSelect,
+
+	...props
+}, ref) => {
+	const parent = useContextMenu();
+
+	const open = useSignal(false);
+	const [position, setPosition] = useState<Vector2>([0, 0]);
+
+	const assignedID = useDefaultValue(() => $id ?? uuidv4());
+
+	const finalMenu = useMemo(() => {
+		if ($inherit === false)
+			return $menu;
+
+		const menu: CTXM.ContextMenuRoot = [
+			...$menu
+		];
+
+		let current = parent;
+		while (current !== undefined)
+		{
+			if ($inherit === true)
+			{
+				menu.push(...current.menu);
+			}
+			else if (Array.isArray($inherit))
+			{
+				for (const query of $inherit)
+				{
+					if (query === current.id)
+					{
+						menu.push(...current.menu);
+					}
+					else if (typeof query === "object" && query.id === current.id)
+					{
+						menu.push([
+							{
+								id: `inherit-${current.id}.${query.id}`,
+								label: query.parent,
+								children: current.menu
+							}
+						]);
+					}
+				}
+			}
+			else if (typeof $inherit === "function")
+			{
+				const result = $inherit(current);
+
+				if (Array.isArray(result))
+				{
+					menu.push(...result);
+				}
+				else
+				{
+					menu.push([
+						{
+							id: `inherit-${current.id}.callback`,
+							label: result.parent,
+							children: result.children
+						}
+					]);
+				}
+			}
+
+			current = current?.parent;
+		}
+
+		return menu;
+	}, [$menu, parent, $inherit]);
+
+	useImperativeHandle(ref, () => ({
+		isOpen: false,
+		close: () => {},
+		open: () => {}
+	}), []);
+
+	useListener(document, 'mousedown', () => {
+		if (!open.value)
+			return;
+
+		open.value = false;
+	}, [open]);
+
+	const close = () => {
+		open.value = false;
+	}
+
+	const handleContextmenu = (e: React.MouseEvent<HTMLElement>) => {
+		if (e.isPropagationStopped())
+			return;
+
+		e.stopPropagation();
+		e.preventDefault();
+
+		open.value = true;
+		setPosition([e.clientX, e.clientY]);
+	}
+
+	return (
+		<ContextMenuContext.Provider
+			value={{
+				exposed: {
+					onContextMenu: handleContextmenu
+				},
+				parent: parent,
+				id: assignedID,
+				menu: $menu,
+				close: close
+			}}
+		>
+			<ContextCapture
+				autoGenerateWrapper={$autoGenerateWrapper}
+				handleContextMenu={handleContextmenu}
+
+				{...props}
+			>
+				{props.children}
+			</ContextCapture>
+
+			<ContextMenuWrapper
+				open={open.value}
+				position={position}
+				menu={finalMenu}
+			/>
+		</ContextMenuContext.Provider>
+	)
+});
+
+interface ContextCaptureProps extends React.HTMLProps<HTMLDivElement> {
+	autoGenerateWrapper: boolean,
+	handleContextMenu: (event: React.MouseEvent<HTMLElement>) => void,
+}
+function ContextCapture({
+	autoGenerateWrapper,
+	handleContextMenu,
+	...props
+}: ContextCaptureProps)
+{
+	if (!autoGenerateWrapper)
+		return props.children;
+
+	return (
+		<div
+			{...props}
+
+			onContextMenu={handleContextMenu}
+		>
+			{props.children}
+
+		</div>
+	);
+}
+
+export default ContextMenu;

package/src/components/ContextMenu/ContextMenu.types.ts

@@ -0,0 +1,17 @@
+import { Nullable } from "@hrnec06/util";
+
+namespace CTXM {
+	export interface ContextMenuItem {
+		id: string,
+		label: string,
+		description?: string,
+		children?: ContextMenuRoot,
+		onClick?: () => void
+	}
+
+	export type ContextMenuSection = Array<Nullable<ContextMenuItem>>;
+
+	export type ContextMenuRoot = Array<Nullable<ContextMenuSection>>;
+}
+
+export default CTXM;

package/src/components/ContextMenu/ContextMenuCtx.tsx

@@ -0,0 +1,33 @@
+import { Optional } from "@hrnec06/util";
+import { createContext, useContext } from "react";
+import ContextError from "../../lib/errors/ContextError";
+import CTXM from "./ContextMenu.types";
+
+export interface ContextMenuContextExpose {
+	onContextMenu: (event: React.MouseEvent<HTMLElement>) => void
+}
+
+export interface ContextMenuContext {
+	exposed: ContextMenuContextExpose,
+	parent?: ContextMenuContext,
+	menu: CTXM.ContextMenuRoot,
+	id: string,
+	close: () => void
+}
+
+export const ContextMenuContext = createContext<Optional<ContextMenuContext>>(undefined);
+
+export function useCTXMListener(): ContextMenuContextExpose['onContextMenu']
+{
+	const ctx = useContextMenu();
+
+	if (!ctx)
+		throw new ContextError("CTXMListener");
+
+	return ctx.exposed.onContextMenu;
+}
+
+export default function useContextMenu()
+{
+	return useContext(ContextMenuContext);
+}

package/src/components/ContextMenu/ContextMenuItem.tsx

@@ -0,0 +1,147 @@
+import { ChevronRightIcon } from "lucide-react";
+import CTXM from "./ContextMenu.types";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import ContextMenuRoot from "./ContextMenuRoot";
+import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
+import clsx from "clsx";
+import useSyncRef from "../../hooks/useSyncRef";
+import { matchMouseEvent, MouseButton } from "@hrnec06/util";
+import useContextMenu from "./ContextMenuCtx";
+import ContextError from "../../lib/errors/ContextError";
+import useDebounce from "../../hooks/useDebounce";
+
+interface ContextMenuItemProps {
+	item: CTXM.ContextMenuItem
+}
+export default function ContextMenuItem({
+	item
+}: ContextMenuItemProps)
+{
+	const menu = useContextMenu();
+	if (!menu)
+		throw new ContextError("ContextMenu");
+
+	const [hover, setHover] = useState(false);
+	const expanded = useDebounce(hover && !!item.children?.length, !hover ? 200 : 300);
+
+	const isClickable = item.onClick !== undefined;
+	const isEnabled = isClickable || !!item.children?.length;
+
+	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation();
+
+		if (!isClickable || !matchMouseEvent(e.nativeEvent, MouseButton.Left)) return;
+
+		item.onClick?.();
+		menu.close();
+	}
+
+	const handleMouseOver = () => {
+		setHover(true);
+	}
+
+	const handleMouseOut = () => {
+		setHover(false);
+	}
+
+	return (
+		<div
+			onMouseEnter={handleMouseOver}
+			onMouseLeave={handleMouseOut}
+			role="menu"
+			className="relative"
+		>
+			<div
+				onClick={handleClick}
+				role="menuitem"
+				className={clsx(
+					"whitespace-nowrap px-1",
+					isEnabled && "cursor-pointer"
+				)}
+			>
+				<div
+					className={clsx(
+						"flex items-center rounded-sm py-0.5",
+						hover && isEnabled && "bg-ctxm-item-hover"
+					)}
+				>
+					<div
+						className={clsx(
+							"flex-1 text-sm py-0.5 px-6",
+							isEnabled ? clsx(
+								"text-ctxm-item-text",
+								hover && "text-ctxm-item-text-hover"
+							) : "text-ctxm-item-disabled"
+						)}
+					>
+						{item.label}
+					</div>
+					<div
+						className="flex-2 pl-8 pr-1"
+					>
+						{item.description && (
+							<div
+								className={clsx(
+									"text-sm text-right",
+									isEnabled ? clsx(
+										"text-ctxm-item-description",
+										hover && "text-ctxm-item-text-hover"
+									) : "text-ctxm-item-disabled",
+								)}
+							>
+								{item.description}
+							</div>
+						)}
+
+						{item.children && (
+							<ChevronRightIcon className="size-5 inline-block float-end text-ctxm-item-text-hover" />
+						)}
+					</div>
+				</div>
+			</div>
+
+			{ item.children && (
+				<ContextMenuItemChildren
+					open={expanded && isEnabled}
+					children={item.children}
+				/>
+			) }
+		</div>
+	)
+}
+
+interface ContextMenuItemChildrenProps {
+	children: CTXM.ContextMenuRoot,
+	open: boolean
+}
+function ContextMenuItemChildren({ children, open }: ContextMenuItemChildrenProps)
+{
+	const [localDivRef, setLocalDivRef] = useState<HTMLElement | null>(null)
+	const divRef = useRef<HTMLDivElement>(null);
+
+	const divRefSync = useSyncRef(
+		divRef,
+		setLocalDivRef
+	);
+
+	const [visible, transition] = useTransition(true, localDivRef, open);
+
+	if (!visible)
+		return undefined;
+
+	return (
+		<div
+			ref={divRefSync}
+			{...transitionDataAttributes(transition)}
+
+			className={clsx(
+				"absolute left-full -top-[5px] pl-1",
+				"transition duration-300 data-leave:duration-200 data-closed:opacity-0 data-leave:sm:scale-95 data-enter:ease-out data-leave:ease-in"
+			)}
+		>
+			<ContextMenuRoot
+				menu={children}
+			/>
+		</div>
+	);
+}

package/src/components/ContextMenu/ContextMenuRoot.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx"
+import CTXM from "./ContextMenu.types"
+import ContextMenuSection from "./ContextMenuSection"
+
+interface ContextMenuRootProps {
+	menu: CTXM.ContextMenuRoot
+}
+export default function ContextMenuRoot({
+	menu
+}: ContextMenuRootProps)
+{
+	return (
+		<div
+			className={clsx(
+				"bg-ctxm-primary border border-ctxm-border shadow-lg shadow-ctxm-shadow rounded-md"
+			)}
+		>
+			{
+				menu.map((section, sectionIx) => (
+					section && <ContextMenuSection
+						key={sectionIx}
+						section={section}
+					/>
+				))
+			}
+		</div>
+	)
+}

package/src/components/ContextMenu/ContextMenuSection.tsx

@@ -0,0 +1,28 @@
+import clsx from "clsx";
+import CTXM from "./ContextMenu.types";
+import ContextMenuItem from "./ContextMenuItem";
+
+interface ContextMenuSectionProps {
+	section: CTXM.ContextMenuSection
+}
+export default function ContextMenuSection({
+	section
+}: ContextMenuSectionProps)
+{
+	return (
+		<div
+			className={clsx(
+				"border-b border-b-ctxm-border last:border-none py-1"
+			)}
+		>
+			{
+				section.map((item) => (
+					item && <ContextMenuItem
+						key={item.id}
+						item={item}
+					/>
+				))
+			}
+		</div>
+	)
+}

package/src/components/Debugger/Debugger.tsx

@@ -1,4 +1,4 @@
-import { minmax, Nullable, Vector2 } from "@hrnec06/util";
+import { matchMouseEvent, minmax, MouseButton, Nullable, Vector2 } from "@hrnec06/util";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from 'react-dom';
 import {DebuggerContext} from "./DebuggerContext";
@@ -6,16 +6,49 @@ import clsx from "clsx";
 import ScrollBar from "./DebuggerScrollBar";
 import ParseValue from "./parser/DebugParser";
 import useKeyListener from "../../hooks/useKeyListener";
-import useUpdatedRef from "../../hooks/useUpdatedRef";
+import useUpdatedRef from "../../hooks/useLatestRef";
 import ResizeableBox from "../ResizeableBox/ResizeableBox";
 import useNamespacedId from "../../hooks/useNamespacedId";
 import useLocalStorage from "../../hooks/useLocalStorage";
 import z from "zod";
+import useDefaultValue from "../../hooks/useDefaultValue";
 
 const DEBUG_NAMESPACE = "debugger";
 
+function useDebuggerID(_customID?: string): string
+{
+	const customID = useDefaultValue(_customID);
+
+	if (customID)
+		return customID;
+
+	return useNamespacedId(DEBUG_NAMESPACE);
+}
+
+interface DebuggerLabelProps {
+	label: string
+}
+function DebuggerLabel({ label }: DebuggerLabelProps)
+{
+	return (
+		<div
+			className={clsx(
+				"px-3 py-1",
+				"text font-semibold text-white bg-[#181818]"
+			)}
+		>
+			{label}
+		</div>
+	)
+}
+
 interface DebugProps {
 	value: unknown,
+	/**
+	 * Assign a persistant ID if saved position breaks because of remounts.
+	 */
+	id?: string,
+	label?: string,
 	openPaths?: string[],
 	excludePaths?: string[],
 	size?: 'normal' | 'big' | 'tiny',
@@ -25,6 +58,8 @@ interface DebugProps {
 }
 function Debug({
 	value,
+	id: customID,
+	label,
 	openPaths,
 	excludePaths,
 	size = 'normal',
@@ -34,7 +69,7 @@ function Debug({
 }: DebugProps) {
 	// Config
 
-	const id = useNamespacedId(DEBUG_NAMESPACE);
+	const id = useDebuggerID(customID);
 
 	const { LS_POS_KEY, LS_SIZE_KEY, LS_EXPAND_KEY } = useMemo(() => ({
 		LS_POS_KEY: id + ".position",
@@ -146,6 +181,8 @@ function Debug({
 
 	// Handlers
 	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		if (!matchMouseEvent(e.nativeEvent, MouseButton.Left)) return;
+
 		e.preventDefault();
 
 		setGrab({
@@ -213,7 +250,7 @@ function Debug({
 					}
 				}}
 			>
-				<div className="fixed pointer-events-none w-full h-full left-0 top-0 overflow-hidden z-999999">
+				<div className="fixed pointer-events-none w-full h-full left-0 top-0 overflow-hidden z-500">
 					<div
 						className={clsx(
 							"absolute font-jetbrains pointer-events-auto",
@@ -235,25 +272,40 @@ function Debug({
 							$onResize={handleResize}
 						>
 							<div
-								onWheel={handleWheel}
-								className="bg-[#1f1f1f] shadow-lg rounded-md border border-[#4b4b4b] w-full h-full overflow-hidden flex"
+								// onMouseDown={handleMouseDown}
+								className={clsx(
+									"flex flex-col w-full h-full",
+									"bg-[#1f1f1f] border border-[#4b4b4b] shadow-lg rounded-md"
+								)}
 							>
+								{label && (
+									<DebuggerLabel
+										label={label}
+									/>
+								)}
+
 								<div
-									ref={containerRef}
-									onMouseDown={handleMouseDown}
-									className="cursor-grab w-full"
-									style={{
-										transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
-									}}
+									onWheel={handleWheel}
+									className="w-full h-full overflow-hidden flex"
 								>
-									<div className="p-3 pl-5">
-										<ParseValue value={value} />
+									<div
+										ref={containerRef}
+										onMouseDown={handleMouseDown}
+										className="cursor-grab w-full"
+										style={{
+											transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
+										}}
+									>
+										<div className="p-3 pl-5">
+											<ParseValue value={value} />
+										</div>
 									</div>
+									<ScrollBar
+										containerHeight={containerHeight}
+										scrollHeight={scrollHeight}
+									/>
 								</div>
-								<ScrollBar
-									containerHeight={containerHeight}
-									scrollHeight={scrollHeight}
-								/>
+
 							</div>
 						</ResizeableBox>
 					</div>

package/src/components/Debugger/DebuggerTerminal.tsx

@@ -282,9 +282,9 @@ function useTerminal(
 	// const history = useState<LogItem[]>(storage);
 	const inputHistory = useState<string[]>([]);
 
-	const terminal = useMemo(() => {
-		return new Terminal(id, name, history, inputHistory, onInput);
-	}, [name, history, onInput]);
+	const terminal = useMemo(() => 
+		new Terminal(id, name, history, inputHistory, onInput)
+	, [name, history, onInput]);
 
 	// useUpdateEffect(() => {
 	// 	setStorage(history[0]);