@evolve.ui/core-components 1.0.1 → 1.2.0

package/src/Menu/hooks/useMenu.tsx

@@ -0,0 +1,18 @@
+import { atom, useAtom } from 'jotai';
+import { useCallback } from 'react';
+
+const showMenuAtom = atom(false);
+
+export const useMenu = () => {
+    const [show, setShow] = useAtom(showMenuAtom);
+
+    const closeMenu = useCallback(() => {
+        setShow(false);
+    }, [setShow]);
+
+    return {
+        closeMenu,
+        setShow,
+        show,
+    };
+};

package/src/Menu/index.ts

@@ -0,0 +1,3 @@
+export { MenuItem } from './components/MenuItem/MenuItem';
+export { MenuDivider } from './components/MenuDivider/MenuDivider';
+export { Menu } from './Menu';

package/src/Modal/ComposableModal.tsx

@@ -0,0 +1,321 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useAtom, useAtomValue } from 'jotai';
+import { atomWithReset } from 'jotai/utils';
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { usePrevious } from '../hooks/usePrevious';
+import { useWindowIsMobile } from '../providers';
+import { Backdrop } from './components/Backdrop/Backdrop';
+import { PreventModalScroll } from './components/PreventModalScroll/PreventModalScroll';
+import { ModalContext } from './context';
+import { useCloseModal } from './hooks/useCloseModal';
+
+type Props = {
+    /**
+     * Content of the modal.
+     *
+     * Generally, the structure for a modal is:
+     * ```tsx
+     * <Modal>
+     *     <ModalHeader>
+     *         <BackButton />
+     *         <CloseButton />
+     *         <ModalTitle>Modal Title</ModalTitle>
+     *     </ModalHeader>
+     *     <ModalContent>
+     *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>
+     *         Content, whatever the main body of the modal is.
+     *     </ModalContent>
+     *     <ModalActions>Actions (usually buttons) go here</ModalActions>
+     * </Modal>
+     * ```
+     */
+    children: ReactNode;
+    className?: string;
+    /**
+     * If true, the modal will close when the backdrop is clicked.
+     */
+    closeModalOnBackdropClick?: boolean;
+    /**
+     * Optional data-testid for the dialog element
+     */
+    'data-testid'?: string;
+    /**
+     * This is a callback that is called when the modal is trying to close itself.
+     *
+     * It should look something like
+     * ```tsx
+     * handleClose={() => setShow(false)}
+     * ```
+     *
+     * It optionally recieves a data object that is passed to the `useCloseModal` function.
+     * For the close button, this is by default `"closed"`.
+     * For the backdrop, this is by default `"backdrop"`
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim
+    handleClose: (handleCloseData?: any) => void;
+    /**
+     * If true, the modal will have a content pager.
+     * This is needed to prevent the modal from scaling upon opening.
+     */
+    hasContentPager?: boolean;
+    /**
+     * Needed for the progress steps to be shown with the correct animation.
+     */
+    hasProgressSteps?: boolean;
+    /**
+     * If true, the modal will be full screen on mobile.
+     */
+    mobileFullScreen?: boolean;
+    /**
+     * This is a callback that is called when the modal close animation ends.
+     */
+    onModalCloseAnimationEnd?: () => void;
+    /**
+     * This is the position of the modal.
+     * It can be either `'center'` or `'top'`.
+     */
+    position?: 'center' | 'top';
+    /**
+     * Prevents scrolling of the page while the modal is open.
+     *
+     * @default true
+     */
+    preventScrollWhileOpen?: boolean;
+    /**
+     * The `show` prop is used to control the visibility of the modal. Should be set to false by `handleClose`.
+     */
+    show: boolean;
+};
+
+/**
+ * The actual modal logic. This is the "composable" version of the modal.
+ */
+export const ComposableModal = ({
+    children,
+    className,
+    closeModalOnBackdropClick = true,
+    'data-testid': dataTestId,
+    handleClose: handleCloseProp,
+    hasContentPager = false,
+    hasProgressSteps = false,
+    mobileFullScreen = false,
+    onModalCloseAnimationEnd,
+    position = 'center',
+    preventScrollWhileOpen = true,
+    show: showProp,
+}: Props) => {
+    const [modalTarget, setModalTarget] = useState<HTMLElement | null>(null);
+    const [show, setShow] = useState(showProp);
+    const isMobile = useWindowIsMobile();
+
+    const modalAtoms = useMemo(
+        () => ({
+            closeModalOnBackdropClickAtom: atomWithReset(true),
+            isMobileKeyboardOpen: atomWithReset<boolean>(false),
+            modalAnimationAtom: atomWithReset<'opening' | 'closing' | ''>(''),
+            modalFullScreenAtom: atomWithReset<boolean>(mobileFullScreen),
+            modalHasFooterAtom: atomWithReset<boolean>(false),
+            modalHasProgressStepsAtom: atomWithReset<boolean>(hasProgressSteps),
+            modalRefAtom: atomWithReset<{ current: HTMLDialogElement | null }>({ current: null }),
+            scrollTopAtom: atomWithReset(0),
+            showBottomScrollHintAtom: atomWithReset<boolean>(false),
+            showTopScrollHintAtom: atomWithReset<boolean>(false),
+        }),
+        [hasProgressSteps, mobileFullScreen]
+    );
+
+    const modalAnimation = useAtomValue(modalAtoms.modalAnimationAtom);
+    const [isMobileKeyboardOpen, setIsMobileKeyboardOpen] = useAtom(modalAtoms.isMobileKeyboardOpen);
+
+    const handleClose = useCallback(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- hammer-parity: handleCloseData is an arbitrary consumer-defined payload forwarded verbatim
+        (handleCloseData?: any) => {
+            setShow(false); // Must be triggered before the handleCloseProp
+
+            handleCloseProp(handleCloseData);
+        },
+        [handleCloseProp]
+    );
+
+    useEffect(() => {
+        const target = document.querySelector('.hui-modal-target');
+
+        if (!target) {
+            throw new Error('Modal target not found, add one in the DOM tree.');
+        }
+
+        setModalTarget(target as HTMLElement);
+    }, []);
+
+    const ref = useRef<HTMLDialogElement | null>(null);
+
+    const [viewportHeight, setViewportHeight] = useState({ current: 0, initial: 0 });
+
+    const updateViewport = useCallback(() => {
+        if (typeof window === 'undefined' || typeof window.visualViewport === 'undefined') {
+            return;
+        }
+
+        const currentViewportHeight = window.visualViewport?.height ?? 0;
+
+        // Get initial viewport height
+        if (viewportHeight.initial === 0) {
+            setViewportHeight({
+                current: currentViewportHeight,
+                initial: window.visualViewport?.height ?? 0,
+            });
+        } else {
+            // Get the difference between the current viewport height and the initial viewport height
+            // This is to check if mobile keyboard is open
+            const isLessThanInitial = Boolean(currentViewportHeight < viewportHeight.initial);
+            setIsMobileKeyboardOpen(isLessThanInitial);
+            setViewportHeight((prev) => ({
+                current: currentViewportHeight,
+                initial: prev.initial,
+            }));
+        }
+    }, [setIsMobileKeyboardOpen, viewportHeight.initial]);
+
+    useEffect(() => {
+        if (typeof window !== 'undefined' && typeof window.visualViewport !== 'undefined' && isMobile) {
+            updateViewport();
+
+            window.visualViewport?.addEventListener('resize', updateViewport);
+
+            return () => window.visualViewport?.removeEventListener('resize', updateViewport);
+        }
+
+        return undefined;
+    }, [isMobile, updateViewport]);
+
+    if (!modalTarget || !show) {
+        return (
+            <ModalContext.Provider value={{ handleClose, onModalCloseAnimationEnd, ...modalAtoms }}>
+                <HandleShowProp
+                    setShow={setShow}
+                    show={show}
+                    showProp={showProp}
+                />
+            </ModalContext.Provider>
+        );
+    }
+
+    const modal = createPortal(
+        <Backdrop
+            closeModalOnBackdropClick={closeModalOnBackdropClick}
+            show={show}
+        >
+            <dialog
+                aria-label="Modal"
+                className={cn(
+                    // GENERAL CLOSED
+                    'hui-modal-container group relative flex',
+                    // OPEN
+                    'max-h-[calc(100vh-64px)] w-[588px] flex-col overflow-hidden rounded-md border-none bg-background-primary p-0',
+                    // MOBILE
+                    'xsMax:w-[375px]',
+                    // SMALL MOBILE
+                    'mobileSmall:!w-full',
+                    // POSITION
+                    { 'absolute top-lg': position === 'top' },
+                    // GENERAL ANIMATION
+                    'transition-opacity duration-100 ease-in',
+                    // OPEN ANIMATION
+                    {
+                        'animate-fadeIn': modalAnimation === 'opening' && hasContentPager,
+                        'animate-fadeInScaled': modalAnimation === 'opening' && !hasContentPager,
+                    },
+                    // CLOSE ANIMATION
+                    { 'animate-fadeOut': modalAnimation === 'closing' },
+                    // FULL SCREEN
+                    {
+                        'group/fullscreen mobile:top-0 mobile:flex mobile:h-full mobile:max-h-full mobile:w-screen mobile:min-w-[100vw] mobile:rounded-none':
+                            mobileFullScreen,
+                    },
+                    className
+                )}
+                data-hui-id="Modal"
+                data-testid={dataTestId}
+                onAnimationEnd={(event) => {
+                    // `animationend` bubbles, so only the dialog's own close animation counts.
+                    // Under `prefers-reduced-motion: reduce` every animation collapses to ~1ms,
+                    // which compresses descendant completions into the same tick as the close —
+                    // without this check an animated child could close the modal early.
+                    if (event.target !== event.currentTarget) {
+                        return;
+                    }
+
+                    if (modalAnimation === 'closing') {
+                        onModalCloseAnimationEnd?.();
+                    }
+                }}
+                open={show}
+                ref={ref}
+            >
+                {preventScrollWhileOpen && <PreventModalScroll />}
+                {children}
+                <div
+                    className={cn('relative', {
+                        // Use CSS :has() selector to immediately apply min-height when footer exists
+                        // Apply 148px on desktop, 74px on mobile fullscreen
+                        'mobile:group-only/fullscreen:has-[#modal-footer.flex]:min-h-[74px] smMin:has-[#modal-footer.flex]:min-h-[148px]':
+                            hasContentPager,
+                        // Hide the actions portal when the mobile keyboard is open
+                        'mobile:group-only/fullscreen:hidden': isMobileKeyboardOpen && hasContentPager,
+                    })}
+                    id="modal-actions-portal"
+                />
+            </dialog>
+        </Backdrop>,
+        modalTarget
+    );
+
+    return (
+        <ModalContext.Provider value={{ handleClose, onModalCloseAnimationEnd, ...modalAtoms }}>
+            <HandleShowProp
+                setShow={setShow}
+                show={show}
+                showProp={showProp}
+            />
+            {modal}
+        </ModalContext.Provider>
+    );
+};
+
+const HandleShowProp = ({
+    setShow,
+    show,
+    showProp,
+}: {
+    setShow: (value: boolean) => void;
+    show: boolean;
+    showProp: boolean;
+}) => {
+    const previousShowProp = usePrevious(showProp);
+    const closeModal = useCloseModal('setShow set to false');
+
+    useEffect(() => {
+        if (previousShowProp === undefined) {
+            return;
+        }
+
+        const propChanged = showProp !== previousShowProp;
+        if (!propChanged) {
+            return;
+        }
+
+        const showMustChange = show !== showProp;
+        if (!showMustChange) {
+            return;
+        }
+        if (showProp) {
+            setShow(true);
+        } else {
+            closeModal();
+        }
+    }, [show, previousShowProp, showProp, closeModal, setShow]);
+
+    return null;
+};

package/src/Modal/Modal.tsx

@@ -0,0 +1,231 @@
+import { ComponentProps, ReactNode } from 'react';
+
+import {
+    BackButton,
+    CloseButton,
+    ModalActions,
+    ModalContent,
+    ModalHeader,
+    ModalSubTitle,
+    ModalTitle,
+} from './components';
+import { ComposableModal } from './ComposableModal';
+
+type TemplatedModalProps = {
+    /**
+     * This is the actions of the modal. Usually buttons.
+     * It is rendered at the bottom of the modal.
+     *
+     * `ModalActions` is not rendered if this is not passed.
+     */
+    actions?: ReactNode;
+    /**
+     *  This is the main content of the modal.
+     */
+    body?: ReactNode;
+    /**
+     * If you want to pass children, set `type="composable"`.
+     */
+    children?: never;
+    /**
+     * If true, the close button will not be shown.
+     */
+    hideClose?: boolean;
+    /**
+     * This is a callback that is called when the back button is clicked.
+     *
+     * When passed, the back button will be shown.
+     */
+    onBackClicked?: () => void;
+    /**
+     * If passed, this will be shown as a subtitle in the modal.
+     */
+    subtitle?: ReactNode;
+    /**
+     * If passed, this will be shown as a title in the modal.
+     *
+     * `ModalHeader` is not rendered if this is not passed.
+     */
+    title?: ReactNode;
+    /**
+     * Marks the type of modal as templated / simple.
+     */
+    type?: 'templated';
+};
+
+type ComposableModalProps = {
+    /**
+     * Content of the modal.
+     *
+     * Generally, the structure for a modal is:
+     * ```tsx
+     * <Modal>
+     *     <ModalHeader>
+     *         <BackButton />
+     *         <CloseButton />
+     *         <ModalTitle>Modal Title</ModalTitle>
+     *     </ModalHeader>
+     *     <ModalContent>
+     *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>
+     *         Content, whatever the main body of the modal is.
+     *     </ModalContent>
+     *     <ModalActions>Actions (usually buttons) go here</ModalActions>
+     * </Modal>
+     * ```
+     */
+    children: ReactNode;
+    /**
+     * Marks the type of modal as composable.
+     */
+    type: 'composable';
+};
+
+type Props = {
+    className?: string;
+    /**
+     * If true, the modal will close when the backdrop is clicked.
+     */
+    closeModalOnBackdropClick?: ComponentProps<typeof ComposableModal>['closeModalOnBackdropClick'];
+    /**
+     * Optional data-testid for the dialog element
+     */
+    'data-testid'?: string;
+    /**
+     * This is a callback that is called when the modal is trying to close itself.
+     *
+     * It should look something like
+     * ```tsx
+     * handleClose={() => setShow(false)}
+     * ```
+     *
+     * It optionally recieves a data object that is passed to the `useCloseModal` function.
+     * For the close button, this is by default `"closed"`.
+     * For the backdrop, this is by default `"backdrop"`
+     */
+    handleClose: ComponentProps<typeof ComposableModal>['handleClose'];
+    /**
+     * If true, the modal will have a content pager.
+     * This is needed to prevent the modal from scaling upon opening.
+     */
+    hasContentPager?: boolean;
+    /**
+     * Needed for the progress steps to be shown with the correct animation.
+     */
+    hasProgressSteps?: boolean;
+    /**
+     * If true, the modal will be full screen on mobile.
+     */
+    mobileFullScreen?: boolean;
+    /**
+     * This is a callback that is called when the modal close animation ends.
+     */
+    onModalCloseAnimationEnd?: ComponentProps<typeof ComposableModal>['onModalCloseAnimationEnd'];
+    /**
+     * This is the position of the modal.
+     * It can be either `'center'` or `'top'`.
+     */
+    position?: ComponentProps<typeof ComposableModal>['position'];
+    /**
+     * Prevents scrolling of the page while the modal is open.
+     *
+     * @default true
+     */
+    preventScrollWhileOpen?: ComponentProps<typeof ComposableModal>['preventScrollWhileOpen'];
+    /**
+     * The `show` prop is used to control the visibility of the modal. Should be set to false by `handleClose`.
+     */
+    show: ComponentProps<typeof ComposableModal>['show'];
+} & (TemplatedModalProps | ComposableModalProps);
+
+/**
+ * Primary component for creating modals.
+ * When rendered, it automatically opens the modal and backdrop.
+ *
+ * These preprovided components give you the styles of the modal.
+ *
+ * By default, you get a particular preset of the `Modal` component that is used for simple modals.
+ * It has (optionally) a title, subtitle, body, and actions.
+ *
+ * If you need to get a little bit more custom, be sure to read the docs and add `type="composable"` to the this component.
+ *
+ * Generally, the structure for a modal is:
+ * ```tsx
+ * <Modal>
+ *     <ModalHeader>
+ *         <BackButton />
+ *         <CloseButton />
+ *         <ModalTitle>Modal Title</ModalTitle>
+ *     </ModalHeader>
+ *     <ModalContent>
+ *         <ModalSubTitle>Modal Subtitle</ModalSubTitle>
+ *         Content, whatever the main body of the modal is.
+ *     </ModalContent>
+ *     <ModalActions>Actions (usually buttons) go here</ModalActions>
+ * </Modal>
+ * ```
+ */
+export const Modal = ({
+    className,
+    closeModalOnBackdropClick,
+    'data-testid': dataTestId,
+    handleClose,
+    hasContentPager,
+    hasProgressSteps,
+    mobileFullScreen,
+    onModalCloseAnimationEnd,
+    position,
+    preventScrollWhileOpen,
+    show,
+    ...rest
+}: Props) => {
+    if (rest.type === 'composable') {
+        return (
+            <ComposableModal
+                className={className}
+                closeModalOnBackdropClick={closeModalOnBackdropClick}
+                data-testid={dataTestId}
+                handleClose={handleClose}
+                hasContentPager={hasContentPager}
+                hasProgressSteps={hasProgressSteps}
+                mobileFullScreen={mobileFullScreen}
+                onModalCloseAnimationEnd={onModalCloseAnimationEnd}
+                position={position}
+                preventScrollWhileOpen={preventScrollWhileOpen}
+                show={show}
+            >
+                {rest.children}
+            </ComposableModal>
+        );
+    }
+
+    const { actions, body, hideClose, onBackClicked, subtitle, title } = rest;
+
+    return (
+        <ComposableModal
+            className={className}
+            closeModalOnBackdropClick={closeModalOnBackdropClick}
+            data-testid={dataTestId}
+            handleClose={handleClose}
+            hasContentPager={hasContentPager}
+            hasProgressSteps={hasProgressSteps}
+            mobileFullScreen={mobileFullScreen}
+            onModalCloseAnimationEnd={onModalCloseAnimationEnd}
+            position={position}
+            preventScrollWhileOpen={preventScrollWhileOpen}
+            show={show}
+        >
+            {onBackClicked && <BackButton onClick={onBackClicked} />}
+            {!hideClose && <CloseButton />}
+            {Boolean(title) && (
+                <ModalHeader>
+                    <ModalTitle>{title}</ModalTitle>
+                </ModalHeader>
+            )}
+            <ModalContent>
+                {Boolean(subtitle) && <ModalSubTitle>{subtitle}</ModalSubTitle>}
+                {Boolean(body) && body}
+            </ModalContent>
+            {Boolean(actions) && <ModalActions>{actions}</ModalActions>}
+        </ComposableModal>
+    );
+};

package/src/Modal/components/BackButton/BackButton.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@evolve.ui/theme-system';
+
+import { IconButton } from '../../../IconButton/IconButton';
+import { ArrowLeft } from '../../../Icons';
+import { useWindowIsMobile } from '../../../providers';
+
+type Props = {
+    /**
+     * @default 'Go Back'
+     */
+    'aria-label'?: string;
+    className?: string;
+    /**
+     * Function to be called when the button is clicked.
+     *
+     * This is intended to be a callback to control something like a `ContentPager`.
+     */
+    onClick: () => void;
+};
+
+/**
+ * Component for modal that triggers a callback when clicked.
+ */
+export const BackButton = ({ 'aria-label': ariaLabel = 'Go Back', className, onClick }: Props) => {
+    const isMobile = useWindowIsMobile();
+
+    return (
+        <IconButton
+            aria-label={ariaLabel}
+            className={cn(
+                // GENERAL
+                'absolute left-sm top-sm z-[2] cursor-pointer',
+                // MOBILE
+                'xsMax:left-[12px] xsMax:top-[13px]',
+                className
+            )}
+            hideTooltip
+            icon={ArrowLeft}
+            onClick={onClick}
+            size={isMobile ? 'sm' : 'md'}
+        />
+    );
+};

package/src/Modal/components/Backdrop/Backdrop.tsx

@@ -0,0 +1,62 @@
+import { cn } from '@evolve.ui/theme-system';
+import { useAtom } from 'jotai';
+import { ReactNode, useContext, useEffect, useRef } from 'react';
+
+import { effectEventListener } from '../../../utils/effectEventListener';
+import { ModalContext } from '../../context';
+import { useCloseModal } from '../../hooks/useCloseModal';
+
+type Props = {
+    children?: ReactNode;
+    closeModalOnBackdropClick?: boolean;
+    show: boolean;
+};
+
+export const Backdrop = ({ children, closeModalOnBackdropClick, show }: Props) => {
+    const closeModal = useCloseModal('backdrop');
+    const { modalAnimationAtom } = useContext(ModalContext);
+    const backdropRef = useRef<HTMLDivElement>(null);
+    const [modalAnimation, setModalAnimation] = useAtom(modalAnimationAtom);
+
+    // NEEDS A DELAY TO ALLOW THE MODAL TO ANIMATE IN
+    useEffect(() => {
+        if (show && modalAnimation === '') {
+            setModalAnimation('opening');
+        }
+    }, [modalAnimation, setModalAnimation, show]);
+
+    useEffect(() => {
+        if (!closeModalOnBackdropClick) {
+            return;
+        }
+
+        return effectEventListener(window, 'mousedown', (event: Event) => {
+            if (event.target === backdropRef.current) {
+                closeModal();
+            }
+        });
+    }, [closeModal, closeModalOnBackdropClick]);
+
+    return (
+        <div
+            className={cn(
+                // GENERAL CLOSED
+                'hui-modal-backdrop opacity-0',
+                // OPEN
+                {
+                    'fixed bottom-0 left-0 right-0 top-0 z-[1001] flex items-center justify-center bg-background-overlay':
+                        show,
+                },
+                // GENERAL ANIMATION
+                'transition-opacity duration-200 ease-in',
+                // OPEN ANIMATION
+                { 'opacity-100': modalAnimation === 'opening' },
+                // CLOSE ANIMATION
+                { 'opacity-0': modalAnimation === 'closing' }
+            )}
+            ref={backdropRef}
+        >
+            {children}
+        </div>
+    );
+};