@hrnec06/react_utils 1.4.1 → 1.5.0

package/src/components/Debugger/parser/DebugTerminal.tsx

@@ -0,0 +1,341 @@
+import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { LogItem, LogRole, LogType, Terminal } from "../DebuggerTerminal"
+import clsx from "clsx";
+import { KeyboardButton, matchBool, matchKeyEvent, matchMouseEvent, MouseButton, Optional } from "@hrnec06/util";
+import ParseValue from "./DebugParser";
+import { ChevronRight, CircleAlert, SendIcon, TerminalIcon, Trash, TriangleAlert } from "lucide-react";
+import ResizeableBox from "../../ResizeableBox/ResizeableBox";
+import { Chevron_Toggle } from "../DebuggerSymbols";
+
+interface LocalTerminalContext {
+	terminal: Terminal,
+	path: string[]
+}
+const LocalTerminalContext = createContext<Optional<LocalTerminalContext>>(undefined);
+
+function useLocalTerminalContext()
+{
+	const ctx = useContext(LocalTerminalContext);
+
+	if (!ctx)
+		throw new Error("useLocalTerminalContext may be used only within LocalTerminalContext.Provider!");
+
+	return ctx;
+}
+
+interface DebugTerminalProps {
+	terminal: Terminal,
+	path: string[],
+	defaultExpanded?: boolean
+}
+export default function DebugTerminal({ terminal, path, defaultExpanded }: DebugTerminalProps)
+{
+	const [showing, setShowing] = useState(!!defaultExpanded);
+
+	const handleToggle = (value: boolean) => {
+		setShowing(value);
+	}
+
+	return (
+		<LocalTerminalContext.Provider
+			value={{
+				terminal: terminal,
+				path: path
+			}}
+		>
+			<span className="text-white inline-flex items-center align-bottom">
+				<div className="mr-1">
+					<TerminalIcon className="size-5" />
+				</div>
+
+				<span>
+					{terminal.name}
+				</span>
+
+				<Chevron_Toggle
+					expanded={showing}
+					onToggle={handleToggle}
+				/>
+			</span>
+
+			<TerminalMain show={showing} />
+		</LocalTerminalContext.Provider>
+	)
+}
+
+interface TerminalMainProps {
+	show: boolean
+}
+function TerminalMain({ show }: TerminalMainProps)
+{
+	const [terminalHeight, setTerminalHeight] = useState(300);
+
+	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation();
+	}
+
+	if (!show)
+		return undefined;
+
+	return (
+		<div
+			className="block"
+			style={{
+				height: terminalHeight
+			}}
+		>
+			<ResizeableBox
+				$allowedSides={["bottom"]}
+				$onResize={(size) => {
+					setTerminalHeight(size[1]);
+				}}
+				$size={[0, terminalHeight]}
+			>
+				<div
+					className={clsx(
+						"flex flex-col h-full",
+						"border-b border-dashed border-b-zinc-700 pb-3"
+					)}
+
+					onMouseDown={handleMouseDown}
+				>
+					<TerminalLog />
+
+					<TerminalInput />
+				</div>
+			</ResizeableBox>
+		</div>
+	);
+}
+
+function TerminalLog()
+{
+	const { terminal } = useLocalTerminalContext();
+
+	const divRef = useRef<HTMLDivElement>(null);
+
+	useLayoutEffect(() => {
+		if (!divRef.current) return;
+
+		divRef.current.scrollTop = divRef.current.scrollHeight;
+	}, [divRef, terminal.getLog()]);
+
+	const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
+		e.stopPropagation();
+	}
+
+	return (
+		<div
+			className={clsx(
+				"grid flex-1 overflow-auto relative",
+				"bg-zinc-900 mt-2 p-2 rounded-md"
+			)}
+
+			onWheel={handleWheel}
+		>
+			{!!terminal.getLog().length && (<TerminalClearButton />)}
+
+			<div
+				ref={divRef}
+
+				className="flex flex-col max-h-full overflow-y-auto mt-auto relative"
+			>
+				{terminal.getLog().map((item, ix) => (
+					<TerminalItem
+						key={ix}
+						item={item}
+						index={ix}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}
+
+interface TerminalItemProps {
+	item: LogItem,
+	index: number
+}
+function TerminalItem({ item, index }: TerminalItemProps)
+{
+	const { path } = useLocalTerminalContext();
+
+	return (
+		<div
+			className={clsx(
+				"grid grid-cols-[18px_24px_1fr]",
+				matchBool({
+					"text-red-400": item.type === LogType.Error,
+					"text-yellow-400": item.type === LogType.Warning,
+				}) ?? "text-white"
+			)}
+		>
+			<div />
+
+			<div className="flex pt-0.5">
+				{(() => {
+					switch (true)
+					{
+						case item.role === LogRole.Input: 	return (<ChevronRight className="size-4" />);
+						case item.type === LogType.Error: 	return (<TriangleAlert className="size-4" />);
+						case item.type === LogType.Warning: return (<CircleAlert className="size-4" />)
+					}
+					return null;
+				})()}
+			</div>
+			<div>
+				{
+					typeof item.value === "string"
+						? (
+							<span
+								className={clsx(
+								
+								)}
+							>
+								{item.value}
+							</span>
+						)
+						: (
+							<ParseValue value={item.value} path={[...path, `${index}`]} />
+						)
+				}
+			</div>
+		</div>
+	);
+}
+
+function TerminalClearButton()
+{
+	const { terminal } = useLocalTerminalContext();
+
+	const handleClick = () => {
+		terminal.clear();
+	}
+
+	return (
+		<button
+			onClick={handleClick}
+			className={clsx(
+				"absolute right-8 top-2",
+				"text-zinc-500 hover:text-zinc-200 cursor-pointer"
+			)}
+		>
+			<Trash className="size-5" />
+		</button>
+	)
+}
+
+function TerminalInput()
+{
+	const { terminal } = useLocalTerminalContext();
+
+	const [input, setInput] = useState("");
+	const [historyOffset, setHistoryOffset] = useState(0);
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	if (!terminal.hasInput())
+		return undefined;
+
+	const send = () => {
+		const value = input.trim();
+
+		if (!value)
+			return;
+
+		setInput("");
+		setHistoryOffset(0);
+
+		const result = terminal.input(value);
+
+		console.log(result);
+	}
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setInput(e.target.value);
+	}
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		e.stopPropagation();
+
+		if (matchKeyEvent(e.nativeEvent, KeyboardButton.Enter))
+		{
+			send();
+		}
+		else if (matchKeyEvent(e.nativeEvent, KeyboardButton.ArrowUp))
+		{
+			e.preventDefault();
+
+			const history = terminal.getInputHistory();
+			const item = history[history.length - 1 - historyOffset];
+
+			if (item !== undefined)
+			{
+				setHistoryOffset(prev => prev + 1);
+				setInput(item);
+			}
+		}
+		else if (matchKeyEvent(e.nativeEvent, KeyboardButton.ArrowDown))
+		{
+			e.preventDefault();
+
+			const history = terminal.getInputHistory();
+			const item = history[history.length + 1 - historyOffset];
+
+			if (item !== undefined)
+			{
+				setHistoryOffset(prev => prev - 1);
+				setInput(item);
+			}
+			else
+			{
+				setInput("");
+				setHistoryOffset(0);
+			}
+		}
+	}
+
+	const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+		if (!matchMouseEvent(e.nativeEvent, MouseButton.Left)) return;
+
+		e.stopPropagation();
+
+		send();
+	}
+
+	return (
+		<div
+			className={clsx(
+				"flex shrink-0 overflow-hidden",
+				"bg-zinc-700 rounded-md text-white mt-2",
+				"focus-within:ring-2 ring-sky-500 transition-all"
+			)}
+		>
+			<div className="flex items-center justify-center px-2">
+				<TerminalIcon className="size-5 text-zinc-500" />
+			</div>
+
+			<input
+				ref={inputRef}
+
+				type="text"
+				className={clsx(
+					"flex-1",
+					"outline-none"
+				)}
+
+				onChange={handleChange}
+				onKeyDown={handleKeyDown}
+
+				value={input}
+			/>
+
+			<button
+				className="p-2 cursor-pointer hover:bg-zinc-600 transition-colors rounded-md"
+				onClick={handleClick}
+			>
+				<SendIcon className="size-5" />
+			</button>
+		</div>
+	)
+}

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,50 @@
+import { KeyboardButton } from "@hrnec06/util";
+import useKeyListener from "../../hooks/useKeyListener";
+import useTransition from "../../hooks/useTransition";
+import DialogBackdrop from "./DialogBackdrop";
+import DialogCloseButton from "./DialogCloseButton";
+import { DialogContext } from "./DialogContext";
+import DialogPanel from "./DialogPanel";
+import { useEffect } from "react";
+
+interface DialogProps extends React.PropsWithChildren {
+	open?: boolean,
+	duration?: number,
+	onClose?: () => void
+}
+function Dialog({
+	open = false,
+	duration = 300,
+	onClose,
+	children,
+}: DialogProps)
+{
+	const pressingEsc = useKeyListener(KeyboardButton.Escape);
+
+	useEffect(() => {
+		if (!open || !pressingEsc) return;
+
+		onClose?.();
+	}, [pressingEsc]);
+
+	return (
+		<DialogContext.Provider
+			value={{
+				open: open,
+				onClose: onClose,
+
+				options: {
+					animationDuration: duration
+				},
+			}}
+		>
+			{children}
+		</DialogContext.Provider>
+	);
+}
+
+Dialog.Backdrop = DialogBackdrop;
+Dialog.CloseButton = DialogCloseButton;
+Dialog.Panel = DialogPanel;
+
+export default Dialog;

package/src/components/Dialog/DialogBackdrop.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import useDialog from "./DialogContext";
+import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
+import { useRef } from "react";
+
+interface DialogBackdropProps extends Omit<React.HTMLProps<HTMLDivElement>, 'children'>
+{
+	$transition?: boolean	
+}
+export default function DialogBackdrop({
+	$transition = false,
+
+	...props
+}: DialogBackdropProps)
+{
+	const dialog = useDialog();
+
+	const divRef = useRef<HTMLDivElement>(null);
+
+	const [visible, transitionData] = useTransition($transition, divRef.current, dialog.open);
+	
+	if (!visible)
+		return undefined;
+
+	const handleClick = () => {
+		console.log("close");
+
+		dialog.onClose?.();
+	}
+
+	return (
+		<div
+			{...props}
+			{...transitionDataAttributes(transitionData)}
+
+			ref={divRef}
+			
+			onClick={handleClick}
+
+			className={clsx(
+				props.className,
+			)}
+		/>
+	)
+}

package/src/components/Dialog/DialogCloseButton.tsx

@@ -0,0 +1,25 @@
+import useDialog from "./DialogContext";
+
+interface DialogCloseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+
+}
+export default function DialogCloseButton({
+	...props
+}: DialogCloseButtonProps)
+{
+	const dialog = useDialog();
+
+	const handleClick = () => {
+		dialog.onClose?.();
+	}
+
+	return (
+		<button
+			{...props}
+
+			onClick={handleClick}
+		>
+			{props.children}
+		</button>
+	)
+}

package/src/components/Dialog/DialogContext.ts

@@ -0,0 +1,21 @@
+import { Optional } from "@hrnec06/util";
+import { createContext, useContext } from "react";
+
+interface DialogContext {
+	open: boolean,
+	options: {
+		animationDuration: number,
+	},
+	onClose?: () => void
+}
+export const DialogContext = createContext<Optional<DialogContext>>(undefined);
+
+export default function useDialog()
+{
+	const ctx = useContext(DialogContext);
+
+	if (!ctx)
+		throw new Error("useDialog may be used only within DialogContext.Provider!");
+
+	return ctx;
+}

package/src/components/Dialog/DialogPanel.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import useDialog from "./DialogContext";
+import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
+import { useRef } from "react";
+
+interface DialogPanelProps extends React.HTMLProps<HTMLDivElement> {
+	$transition?: boolean
+}
+export default function DialogPanel({
+	$transition = false,
+	...props
+}: DialogPanelProps)
+{
+	const dialog = useDialog();
+
+	const divRef = useRef<HTMLDivElement>(null);
+
+	const [visible, transitionData] = useTransition($transition, divRef.current, dialog.open);
+
+	if (!visible)
+		return undefined;
+
+	return (
+		<div
+			{...props}
+			{...transitionDataAttributes(transitionData)}
+			
+			ref={divRef}
+
+			className={props.className}
+		>
+			{props.children}
+		</div>
+	)
+}

package/src/components/ResizeableBox/DragAreas.tsx

@@ -100,29 +100,32 @@ function DragArea({
 	onMove,
 	applyReposition = false,
 
-	...enabledSides
+	...assignedSides
 }: DragAreaProps)
 {
 	const box = useResizeableBox();
 
 	const isAllowed = (side: RB.DragSide) => box.options.allowedSides.includes(side);
 
+	// Is a corner and allowCorners are either empty or false
 	if (isCorner && !box.options.allowCorners)
 		return undefined;
 
-	if (
-		(enabledSides.top && !isAllowed('top')) ||
-		(enabledSides.right && !isAllowed('right')) ||
-		(enabledSides.bottom && !isAllowed('bottom')) ||
-		(enabledSides.left && !isAllowed('left'))
-	)
-		return undefined;
-
+	// Is corner and allowedCorners are array
 	if (isCorner && Array.isArray(box.options.allowCorners))
 	{
-		if (!box.options.allowCorners.some((combo) => enabledSides[combo[0]] && enabledSides[combo[1]]))
+		if (!box.options.allowCorners.some((combo) => assignedSides[combo[0]] && assignedSides[combo[1]]))
 			return undefined;
 	}
+	else if (
+		(assignedSides.top && !isAllowed('top')) ||
+		(assignedSides.right && !isAllowed('right')) ||
+		(assignedSides.bottom && !isAllowed('bottom')) ||
+		(assignedSides.left && !isAllowed('left'))
+	)
+	{
+		return undefined;
+	}
 
 	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
 		if (box.drag.value !== null || !matchMouseEvent(e.nativeEvent, MouseButton.Left))
@@ -160,21 +163,21 @@ function DragArea({
 					box.options.dragAreaSize === 'big'		&& 'w-6'
 				),
 
-				enabledSides.top 		&& clsx('bottom-full', box.options.insetAreas && 'translate-y-1/2'),
-				enabledSides.right 	&& clsx('left-full', box.options.insetAreas && '-translate-x-1/2'),
-				enabledSides.bottom	&& clsx('top-full', box.options.insetAreas && '-translate-y-1/2'),
-				enabledSides.left		&& clsx('right-full', box.options.insetAreas && 'translate-x-1/2'),
+				assignedSides.top 	&& clsx('bottom-full', box.options.insetAreas && 'translate-y-1/2'),
+				assignedSides.right 	&& clsx('left-full', box.options.insetAreas && '-translate-x-1/2'),
+				assignedSides.bottom	&& clsx('top-full', box.options.insetAreas && '-translate-y-1/2'),
+				assignedSides.left	&& clsx('right-full', box.options.insetAreas && 'translate-x-1/2'),
 
 				matchBool({
-					"cursor-nw-resize": enabledSides.top && enabledSides.left,
-					"cursor-ne-resize": enabledSides.top && enabledSides.right,
-					"cursor-se-resize": enabledSides.bottom && enabledSides.right,
-					"cursor-sw-resize": enabledSides.bottom && enabledSides.left,
-
-					"cursor-n-resize": enabledSides.top,
-					"cursor-e-resize": enabledSides.right,
-					"cursor-s-resize": enabledSides.bottom,
-					"cursor-w-resize": enabledSides.left
+					"cursor-nw-resize": assignedSides.top && assignedSides.left,
+					"cursor-ne-resize": assignedSides.top && assignedSides.right,
+					"cursor-se-resize": assignedSides.bottom && assignedSides.right,
+					"cursor-sw-resize": assignedSides.bottom && assignedSides.left,
+
+					"cursor-n-resize": assignedSides.top,
+					"cursor-e-resize": assignedSides.right,
+					"cursor-s-resize": assignedSides.bottom,
+					"cursor-w-resize": assignedSides.left
 				}),
 			)}
 		/>

package/src/components/ResizeableBox/ResizeableBox.tsx

@@ -32,8 +32,12 @@ interface ResizeableBoxProps extends React.HTMLProps<HTMLDivElement>
 	 */
 	$allowedSides?: RB.DragSide[],
 	/**
-	 * Allow corner resizers?
-	 * A corner will be visible only if the 2 neighbouring sides are visible
+	 * Allow corner resizers
+	 * 
+	 * Possible values:
+	 * - `true`: Corners will be applied automatically based on allowed sides
+	 * - `false`: No corners
+	 * - `Vector2<RB.DragSide>[]`: Explicitely define allowed corners
 	 */
 	$allowCorners?: boolean | Vector2<RB.DragSide>[],
 	/**

package/src/hooks/useDisposables.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+import { disposables } from '@hrnec06/util';
+
+/**
+ * @credit https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/hooks/use-disposables.ts
+ */
+export default function useDisposables() {
+  const [_disposables] = useState(disposables);
+
+  useEffect(() => () => _disposables.dispose(), [_disposables]);
+
+  return _disposables;
+}

package/src/hooks/useFlags.ts

@@ -0,0 +1,32 @@
+import { Flags, ReactUtils } from "@hrnec06/util";
+import { useCallback, useMemo, useState } from "react";
+
+export class FlagsManager extends Flags
+{
+  constructor(
+    private setState: ReactUtils.SetState<number>,
+    initialFlags?: number,
+  )
+  {
+    super(initialFlags);
+  }
+
+  public setFlags(flags: number): Flags {
+    this.flags = flags;
+    
+    this.setState(flags);
+
+    return this;
+  }
+}
+
+function useFlags(initialFlags: number = 0): FlagsManager
+{
+  const [_, setFlags] = useState(initialFlags);
+
+  const manager = useMemo(() => new FlagsManager(setFlags), []);
+
+  return manager;
+}
+
+export default useFlags;

package/src/hooks/useNamespacedId.ts

@@ -0,0 +1,19 @@
+import { useState } from "react";
+
+const namespaces: Record<string, number> = {};
+
+function getId(namespace: string): string
+{
+	const nextID = (namespaces[namespace] ?? 0) + 1;
+
+	namespaces[namespace] = nextID;
+
+	return `nid_${namespace}_${nextID}`;
+}
+
+export default function useNamespacedId(namespace: string): string
+{
+	const [id] = useState(() => getId(namespace));
+
+	return id;
+}