paris 0.23.1 → 0.24.0

package/src/stories/dialog/Dialog.test.tsx

@@ -1,244 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-import { getCloseButton, render, screen, waitFor } from '../../test/render';
-import { Dialog } from './Dialog';
-
-describe('Dialog', () => {
-    it('renders when isOpen is true', async () => {
-        render(
-            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
-                Dialog content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-    });
-
-    it('does not render when isOpen is false', () => {
-        render(
-            <Dialog isOpen={false} title="Test Dialog" onClose={vi.fn()}>
-                Dialog content
-            </Dialog>,
-        );
-
-        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
-
-    it('renders children content', async () => {
-        render(
-            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
-                <p>Hello from Dialog</p>
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByText('Hello from Dialog')).toBeInTheDocument();
-        });
-    });
-
-    it('renders the title', async () => {
-        render(
-            <Dialog isOpen={true} title="My Dialog Title" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByText('My Dialog Title')).toBeInTheDocument();
-        });
-    });
-
-    it('visually hides title when hideTitle is true but keeps it accessible', async () => {
-        render(
-            <Dialog isOpen={true} title="Hidden Title" hideTitle={true} onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByText('Hidden Title')).toBeInTheDocument();
-        });
-    });
-
-    it('renders the close button by default', async () => {
-        render(
-            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(getCloseButton()).toBeInTheDocument();
-        });
-    });
-
-    it('hides the close button when hideCloseButton is true', async () => {
-        render(
-            <Dialog isOpen={true} title="Test Dialog" hideCloseButton={true} onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-
-        expect(getCloseButton()).not.toBeInTheDocument();
-    });
-
-    it('calls onClose when the close button is clicked', async () => {
-        const onClose = vi.fn();
-        const { user } = render(
-            <Dialog isOpen={true} title="Test Dialog" onClose={onClose}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(getCloseButton()).toBeInTheDocument();
-        });
-
-        const closeButton = getCloseButton()!;
-        await user.click(closeButton);
-
-        expect(onClose).toHaveBeenCalledWith(false);
-    });
-
-    it('applies simple appearance by default', async () => {
-        render(
-            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-    });
-
-    it('accepts glass appearance', async () => {
-        render(
-            <Dialog isOpen={true} title="Test Dialog" appearance="glass" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-    });
-
-    it('accepts width presets', async () => {
-        const { rerender } = render(
-            <Dialog isOpen={true} title="Test Dialog" width="compact" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-
-        rerender(
-            <Dialog isOpen={true} title="Test Dialog" width="large" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-    });
-
-    it('accepts custom width as CSSLength', async () => {
-        render(
-            <Dialog isOpen={true} title="Test Dialog" width="500px" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-    });
-
-    it('accepts full height', async () => {
-        render(
-            <Dialog isOpen={true} title="Test Dialog" height="full" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-    });
-
-    it('accepts grey overlay style', async () => {
-        render(
-            <Dialog isOpen={true} title="Test Dialog" overlayStyle="grey" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-    });
-
-    it('renders with overrides applied', async () => {
-        render(
-            <Dialog
-                isOpen={true}
-                title="Test Dialog"
-                onClose={vi.fn()}
-                overrides={{
-                    root: { 'data-testid': 'dialog-root' } as any,
-                    panel: { 'data-testid': 'dialog-panel' } as any,
-                }}
-            >
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByTestId('dialog-root')).toBeInTheDocument();
-            expect(screen.getByTestId('dialog-panel')).toBeInTheDocument();
-        });
-    });
-
-    it('renders a ReactNode title', async () => {
-        render(
-            <Dialog isOpen={true} title={<span data-testid="custom-title">Custom Title</span>} onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByTestId('custom-title')).toBeInTheDocument();
-        });
-    });
-
-    it('does not render when isOpen transitions from true to false', async () => {
-        const { rerender } = render(
-            <Dialog isOpen={true} title="Test Dialog" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.getByRole('dialog')).toBeInTheDocument();
-        });
-
-        rerender(
-            <Dialog isOpen={false} title="Test Dialog" onClose={vi.fn()}>
-                Content
-            </Dialog>,
-        );
-
-        await waitFor(() => {
-            expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-        });
-    });
-});

package/src/stories/dialog/Dialog.tsx

@@ -1,283 +0,0 @@
-'use client';
-
-import { DialogPanel, DialogTitle, Dialog as HDialog, Transition, TransitionChild } from '@headlessui/react';
-import type { CSSLength } from '@ssh/csstypes';
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
-import { useEffect, useMemo, useState } from 'react';
-import { Button } from '../button';
-import { Close, Icon } from '../icon';
-import { Text } from '../text';
-import { RemoveFromDOM } from '../utility/RemoveFromDOM';
-import { TextWhenString } from '../utility/TextWhenString';
-import { VisuallyHidden } from '../utility/VisuallyHidden';
-import styles from './Dialog.module.scss';
-
-export const DialogWidthPresets = ['compact', 'default', 'large', 'full'] as const;
-
-export type DialogProps = {
-    /**
-     * The dialog's open state.
-     */
-    isOpen?: boolean;
-    /**
-     * A callback that will be called when the user closes the dialog by clicking the close button or the backdrop overlay.
-     * @param value {boolean} - The new open state of the dialog.
-     */
-    onClose?: (value: boolean) => void | Promise<void>;
-    /**
-     * The title of the dialog. Required for accessibility, but can be hidden with the `hideTitle` prop.
-     *
-     * If a string is passed, it will be wrapped in a {@link Text} component with `headingXSmall` styling.
-     */
-    title: ReactNode;
-    /**
-     * Whether the title should be hidden. If `true`, the title will be visually hidden but still accessible to screen readers.
-     *
-     * If you're hiding the title to add a custom header, you can also hide the close button and render your own by using the `hideCloseButton` prop.
-     *
-     * @default false
-     */
-    hideTitle?: boolean;
-    /**
-     * Whether the close button should be hidden. This will entirely remove the close button from the DOM, so you should provide your own way to close the dialog.
-     *
-     * @default false
-     */
-    hideCloseButton?: boolean;
-    /**
-     * The width of the dialog. Either a preset or a valid {@link CSSLength} string.
-     *
-     * @see DialogWidthPresets
-     * @default 'default'
-     */
-    width?: (typeof DialogWidthPresets)[number] | CSSLength;
-    /**
-     * The height of the dialog.
-     *
-     * @default 'content'
-     */
-    height?: 'content' | 'full';
-    /**
-     * Whether the dialog can be moved with mouse dragging.
-     *
-     * @default true
-     */
-    draggable?: boolean;
-    /**
-     * The dialog's appearance styling. `simple` is a simple white dialog with a border. `glass` is a glassmorphic dialog with a blurred background.
-     *
-     * @default 'simple'
-     */
-    appearance?: 'simple' | 'glass';
-    /**
-     * The overlay style for the dialog. `grey` is a simple grey overlay. `blur` is a blurred overlay.
-     *
-     * @default 'blur'
-     */
-    overlayStyle?: 'grey' | 'blur';
-    /**
-     * Optional overrides for props of each dialog component.
-     *
-     * Valid keys are: `root`, `overlayContainer`, `overlay`, `panelContainer`, `panel`, `panelHeader`, `panelTitle`, `panelCloseButton`.
-     */
-    overrides?: {
-        /** The root element containing all elements */
-        root?: ComponentPropsWithoutRef<'div'>;
-        /** The container for the backdrop overlay */
-        overlayContainer?: ComponentPropsWithoutRef<'div'>;
-        /** The backdrop overlay */
-        overlay?: ComponentPropsWithoutRef<'div'>;
-        /** The container for the dialog panel */
-        panelContainer?: ComponentPropsWithoutRef<'div'>;
-        /** The dialog panel */
-        panel?: ComponentPropsWithoutRef<'div'>;
-        /** The header of the dialog panel, which contains the title and close button */
-        panelHeader?: ComponentPropsWithoutRef<'div'>;
-        /** The title within the dialog panel */
-        panelTitle?: ComponentPropsWithoutRef<'h1'>;
-        /** The close button within the dialog panel */
-        panelCloseButton?: ComponentPropsWithoutRef<'button'>;
-    };
-};
-
-/**
- * Dialogs are modal components that appear on top of the main content and require user interaction to dismiss.
- *
- * They render to a Portal, so they can be used anywhere in the DOM.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Dialog } from 'paris/dialog';
- * ```
- * @constructor
- */
-export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
-    isOpen = false,
-    onClose = () => {},
-    title,
-    hideTitle = false,
-    hideCloseButton = false,
-    overrides = {},
-    width = 'default',
-    height = 'content',
-    draggable = false,
-    appearance = 'simple',
-    overlayStyle = 'blur',
-    children,
-}) => {
-    const widthIsPreset = useMemo(() => (DialogWidthPresets as readonly string[]).includes(width), [width]);
-
-    const [dragging, setDragging] = useState(false);
-    const [position, setPosition] = useState({ top: 0, left: 0 });
-    const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
-
-    const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
-        if (draggable) {
-            setDragging(true);
-            setStartPosition({ x: e.clientX, y: e.clientY });
-        }
-    };
-
-    const handleMouseUp = () => {
-        if (draggable) {
-            setDragging(false);
-        }
-    };
-
-    const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
-        if (dragging && draggable) {
-            setPosition({
-                top: position.top + (e.clientY - startPosition.y),
-                left: position.left + (e.clientX - startPosition.x),
-            });
-            setStartPosition({ x: e.clientX, y: e.clientY });
-        }
-    };
-
-    useEffect(() => {
-        if (isOpen) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect
-            setDragging(false);
-            setPosition({ top: 0, left: 0 });
-            setStartPosition({ x: 0, y: 0 });
-        }
-    }, [isOpen]);
-
-    return (
-        <Transition appear show={isOpen}>
-            <HDialog
-                as="div"
-                onClose={onClose}
-                {...overrides.root}
-                className={clsx(styles.root, overrides.root?.className)}
-                role="dialog"
-            >
-                <div
-                    {...overrides.overlayContainer}
-                    className={clsx(
-                        overlayStyle === 'blur' && styles.overlayBlurContainer,
-                        overlayStyle === 'grey' && styles.overlayGreyContainer,
-                        overrides.overlayContainer?.className,
-                    )}
-                >
-                    <TransitionChild
-                        enter={styles.enter}
-                        enterFrom={styles.enterFrom}
-                        enterTo={styles.enterTo}
-                        leave={styles.leave}
-                        leaveFrom={styles.leaveFrom}
-                        leaveTo={styles.leaveTo}
-                    >
-                        <div
-                            {...overrides.overlay}
-                            className={clsx(
-                                styles.overlay,
-                                overlayStyle === 'blur' && styles.overlayBlur,
-                                overlayStyle === 'grey' && styles.overlayGrey,
-                                overrides.overlay?.className,
-                            )}
-                        />
-                    </TransitionChild>
-                </div>
-
-                <div
-                    {...overrides.panelContainer}
-                    className={clsx(styles.panelContainer, overrides.panelContainer?.className)}
-                >
-                    <TransitionChild
-                        enter={styles.enter}
-                        enterFrom={styles.enterFrom}
-                        enterTo={styles.enterTo}
-                        leave={styles.leave}
-                        leaveFrom={styles.leaveFrom}
-                        leaveTo={styles.leaveTo}
-                    >
-                        <DialogPanel
-                            {...overrides.panel}
-                            className={clsx(
-                                styles.panel,
-                                styles[appearance],
-                                { [styles[`w-${width}`]]: widthIsPreset },
-                                styles[`h-${height}`],
-                                overrides.panel?.className,
-                            )}
-                            style={{
-                                top: `${position.top}px`,
-                                left: `${position.left}px`,
-                                ...(!widthIsPreset ? { maxWidth: width } : {}),
-                                ...overrides.panel?.style,
-                            }}
-                            onMouseDown={handleMouseDown}
-                            onMouseUp={handleMouseUp}
-                            onMouseMove={handleMouseMove}
-                        >
-                            <VisuallyHidden when={hideTitle && hideCloseButton}>
-                                <div
-                                    {...overrides.panelHeader}
-                                    className={clsx(styles.header, overrides.panelHeader?.className)}
-                                    style={
-                                        (hideTitle && !hideCloseButton) || (!hideTitle && hideCloseButton)
-                                            ? {
-                                                  marginBottom: '-16px',
-                                              }
-                                            : {}
-                                    }
-                                >
-                                    <VisuallyHidden when={hideTitle}>
-                                        <DialogTitle
-                                            {...overrides.panelTitle}
-                                            as="h1"
-                                            className={clsx(styles.title, overrides.panelTitle?.className)}
-                                        >
-                                            <TextWhenString kind="headingXSmall">{title}</TextWhenString>
-                                        </DialogTitle>
-                                    </VisuallyHidden>
-                                    <RemoveFromDOM when={hideCloseButton}>
-                                        <div className={clsx(styles.closeButton)}>
-                                            <Button
-                                                kind="tertiary"
-                                                shape="circle"
-                                                onClick={() => onClose(false)}
-                                                startEnhancer={<Icon size={20} icon={Close} />}
-                                                {...overrides.panelCloseButton}
-                                                data-title-hidden={hideTitle}
-                                                className={clsx(overrides.panelCloseButton?.className)}
-                                            >
-                                                Close dialog
-                                            </Button>
-                                        </div>
-                                    </RemoveFromDOM>
-                                </div>
-                            </VisuallyHidden>
-                            {children}
-                        </DialogPanel>
-                    </TransitionChild>
-                </div>
-            </HDialog>
-        </Transition>
-    );
-};