feat: DialogProvider component (#198)

* feat: somewhat working DialogProvider

* feat: handle multiple dialogs properly, initial focus

let's just ignore that showFocus=true doesn't work with "nested" dialogs

Co-authored-by: Razboy20 <Razboy20@users.noreply.github.com>

* feat: rework code

* feat: add default styles to prompts

* refactor: fix stylings

---------

Co-authored-by: Razboy20 <Razboy20@users.noreply.github.com>
Co-authored-by: Razboy20 <razboy20@gmail.com>

src/views/components/common/Dialog.tsx

@@ -10,6 +10,7 @@ export interface _DialogProps {
     className?: string;
     title?: JSX.Element;
     description?: JSX.Element;
+    initialFocusHidden?: boolean;
 }
 
 /**
@@ -21,7 +22,12 @@ export type DialogProps = _DialogProps & Omit<TransitionRootProps<typeof HDialog
  * A reusable popup component that can be used to display content on the page
  */
 export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Element {
-    const { children, className, open, ...rest } = props;
+    const { children, className, open, initialFocusHidden, ...rest } = props;
+    const initialFocusHiddenRef = React.useRef<HTMLDivElement>(null);
+
+    if (initialFocusHidden) {
+        rest.initialFocus = initialFocusHiddenRef;
+    }
 
     return (
         <Transition show={open} as={HDialog} {...rest}>
@@ -53,8 +59,11 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
                                 className
                             )}
                         >
-                            {props.title && <HDialog.Title>{props.title}</HDialog.Title>}
-                            {props.description && <HDialog.Description>{props.description}</HDialog.Description>}
+                            {initialFocusHidden && <div className='hidden' ref={initialFocusHiddenRef} />}
+                            {props.title && <HDialog.Title as={Fragment}>{props.title}</HDialog.Title>}
+                            {props.description && (
+                                <HDialog.Description as={Fragment}>{props.description}</HDialog.Description>
+                            )}
                             {children}
                         </HDialog.Panel>
                     </div>

src/views/components/common/DialogProvider/DialogProvider.tsx

@@ -0,0 +1,116 @@
+import type { CloseWrapper, DialogInfo, ShowDialogFn } from '@views/contexts/DialogContext';
+import { DialogContext, useDialog } from '@views/contexts/DialogContext';
+import type { ReactNode } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
+
+import Dialog from '../Dialog';
+import Text from '../Text/Text';
+
+type DialogElement = (show: boolean) => ReactNode;
+export interface PromptInfo extends Omit<DialogInfo, 'buttons' | 'className' | 'title' | 'description'> {
+    title: JSX.Element | string;
+    description: JSX.Element | string;
+    onClose?: () => void;
+    buttons: NonNullable<DialogInfo['buttons']>;
+}
+
+function unwrapCloseWrapper<T>(obj: T | CloseWrapper<T>, close: () => void): T {
+    if (typeof obj === 'function') {
+        return (obj as CloseWrapper<T>)(close);
+    }
+
+    return obj;
+}
+
+/**
+ * Hook to show prompt with default stylings.
+ */
+export function usePrompt(): (info: PromptInfo) => void {
+    const showDialog = useDialog();
+
+    return (info: PromptInfo) => {
+        showDialog({
+            ...info,
+            title: (
+                <Text variant='h2' as='h1' className='text-theme-black'>
+                    {info.title}
+                </Text>
+            ),
+            description: (
+                <Text variant='p' as='p' className='text-ut-black'>
+                    {info.description}
+                </Text>
+            ),
+            className: 'max-w-[400px] flex flex-col gap-2.5 p-6.25',
+        });
+    };
+}
+
+// Unique ID counter is safe to be global
+let nextId = 1;
+
+/**
+ * Allows descendant to show dialogs via a function, handling animations and stacking.
+ */
+export default function DialogProvider(props: { children: ReactNode }): JSX.Element {
+    const dialogQueue = useRef<DialogElement[]>([]);
+    const [openDialog, setOpenDialog] = useState<DialogElement | undefined>();
+    const openRef = useRef<typeof openDialog>();
+    openRef.current = openDialog;
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const showDialog = useCallback<ShowDialogFn>(info => {
+        const id = nextId++;
+
+        const handleClose = () => {
+            setIsOpen(false);
+        };
+
+        const infoUnwrapped = unwrapCloseWrapper(info, handleClose);
+        const buttons = unwrapCloseWrapper(infoUnwrapped.buttons, handleClose);
+
+        const onLeave = () => {
+            setOpenDialog(undefined);
+
+            if (dialogQueue.current.length > 0) {
+                const newOpen = dialogQueue.current.pop();
+                setOpenDialog(() => newOpen);
+                setIsOpen(true);
+            }
+
+            infoUnwrapped.onClose?.();
+        };
+
+        const dialogElement = (show: boolean) => (
+            <Dialog
+                key={id}
+                onClose={handleClose}
+                afterLeave={onLeave}
+                title={infoUnwrapped.title}
+                description={infoUnwrapped.description}
+                appear
+                show={show}
+                initialFocusHidden={infoUnwrapped.initialFocusHidden}
+                className={infoUnwrapped.className}
+            >
+                <div className='mt-0.75 w-full flex justify-end gap-2.5'>{buttons}</div>
+            </Dialog>
+        );
+
+        if (openRef.current) {
+            dialogQueue.current.push(openRef.current);
+        }
+
+        setOpenDialog(() => dialogElement);
+        setIsOpen(true);
+    }, []);
+
+    return (
+        <DialogContext.Provider value={showDialog}>
+            {props.children}
+
+            {openDialog?.(isOpen)}
+        </DialogContext.Provider>
+    );
+}