paris 0.23.0 → 0.24.0

package/src/stories/menu/Menu.test.tsx

@@ -1,254 +0,0 @@
-import { render, screen, waitFor } from '../../test/render';
-import { Menu, MenuButton, MenuItem, MenuItems } from './Menu';
-
-function renderMenu(props?: { onItemClick?: () => void; position?: 'left' | 'right' }) {
-    return render(
-        <Menu>
-            <MenuButton>Options</MenuButton>
-            <MenuItems position={props?.position}>
-                <MenuItem as="button" onClick={props?.onItemClick}>
-                    Edit
-                </MenuItem>
-                <MenuItem as="button">Delete</MenuItem>
-                <MenuItem as="button" disabled>
-                    Archive
-                </MenuItem>
-            </MenuItems>
-        </Menu>,
-    );
-}
-
-describe('Menu', () => {
-    it('renders the menu button', () => {
-        renderMenu();
-
-        expect(screen.getByText('Options')).toBeInTheDocument();
-    });
-
-    it('does not show menu items initially', () => {
-        renderMenu();
-
-        expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-    });
-
-    it('opens menu when clicking the button', async () => {
-        const { user } = renderMenu();
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getByText('Edit')).toBeInTheDocument();
-        });
-
-        expect(screen.getByText('Delete')).toBeInTheDocument();
-        expect(screen.getByText('Archive')).toBeInTheDocument();
-    });
-
-    it('renders all menu items when open', async () => {
-        const { user } = renderMenu();
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getAllByRole('menuitem')).toHaveLength(3);
-        });
-    });
-
-    it('fires callback when clicking a menu item', async () => {
-        const onItemClick = vi.fn();
-        const { user } = renderMenu({ onItemClick });
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getByText('Edit')).toBeInTheDocument();
-        });
-
-        await user.click(screen.getByText('Edit'));
-
-        expect(onItemClick).toHaveBeenCalledOnce();
-    });
-
-    it('closes menu after clicking a menu item', async () => {
-        const { user } = renderMenu();
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getByText('Edit')).toBeInTheDocument();
-        });
-
-        await user.click(screen.getByText('Edit'));
-
-        await waitFor(() => {
-            expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-        });
-    });
-
-    it('closes menu when pressing Escape', async () => {
-        const { user } = renderMenu();
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getByText('Edit')).toBeInTheDocument();
-        });
-
-        await user.keyboard('{Escape}');
-
-        await waitFor(() => {
-            expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-        });
-    });
-
-    it('supports keyboard navigation with arrow keys', async () => {
-        const { user } = renderMenu();
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getByText('Edit')).toBeInTheDocument();
-        });
-
-        // HeadlessUI Menu uses arrow keys for navigation
-        await user.keyboard('{ArrowDown}');
-        await user.keyboard('{ArrowDown}');
-
-        // Verify focus moved (no crash)
-        const items = screen.getAllByRole('menuitem');
-        expect(items.length).toBeGreaterThan(0);
-    });
-
-    it('renders with isNew styling on a menu item', async () => {
-        const { user } = render(
-            <Menu>
-                <MenuButton>Options</MenuButton>
-                <MenuItems>
-                    <MenuItem as="button" isNew>
-                        New Feature
-                    </MenuItem>
-                </MenuItems>
-            </Menu>,
-        );
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getByText('New Feature')).toBeInTheDocument();
-        });
-    });
-
-    it('supports right position for menu items', async () => {
-        const { user } = renderMenu({ position: 'right' });
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getByText('Edit')).toBeInTheDocument();
-        });
-    });
-
-    it('supports left position for menu items', async () => {
-        const { user } = renderMenu({ position: 'left' });
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getByText('Edit')).toBeInTheDocument();
-        });
-    });
-
-    it('applies custom className to Menu', () => {
-        const { container } = render(
-            <Menu className="custom-menu">
-                <MenuButton>Options</MenuButton>
-                <MenuItems>
-                    <MenuItem as="button">Item</MenuItem>
-                </MenuItems>
-            </Menu>,
-        );
-
-        expect(container.querySelector('.custom-menu')).toBeInTheDocument();
-    });
-
-    it('renders menu button with correct role', () => {
-        renderMenu();
-
-        expect(screen.getByRole('button', { name: 'Options' })).toBeInTheDocument();
-    });
-
-    it('toggles menu open and closed with the button', async () => {
-        const { user } = renderMenu();
-
-        const button = screen.getByText('Options');
-
-        // Open
-        await user.click(button);
-        await waitFor(() => {
-            expect(screen.getByText('Edit')).toBeInTheDocument();
-        });
-
-        // Close
-        await user.click(button);
-        await waitFor(() => {
-            expect(screen.queryByText('Edit')).not.toBeInTheDocument();
-        });
-    });
-
-    it('handles disabled menu items', async () => {
-        const { user } = renderMenu();
-
-        await user.click(screen.getByText('Options'));
-
-        await waitFor(() => {
-            expect(screen.getByText('Archive')).toBeInTheDocument();
-        });
-
-        // The disabled item should be rendered but marked as disabled
-        const archiveItem = screen.getByText('Archive');
-        expect(archiveItem.closest('[data-disabled]')).toBeInTheDocument();
-    });
-
-    describe('onOpenChange', () => {
-        it('calls onOpenChange when the menu opens', async () => {
-            const handleOpenChange = vi.fn();
-            const { user } = render(
-                <Menu onOpenChange={handleOpenChange}>
-                    <MenuButton>Options</MenuButton>
-                    <MenuItems>
-                        <MenuItem as="button">Edit</MenuItem>
-                    </MenuItems>
-                </Menu>,
-            );
-
-            await user.click(screen.getByText('Options'));
-
-            await waitFor(() => {
-                expect(handleOpenChange).toHaveBeenCalledWith(true);
-            });
-        });
-
-        it('calls onOpenChange when the menu closes', async () => {
-            const handleOpenChange = vi.fn();
-            const { user } = render(
-                <Menu onOpenChange={handleOpenChange}>
-                    <MenuButton>Options</MenuButton>
-                    <MenuItems>
-                        <MenuItem as="button">Edit</MenuItem>
-                    </MenuItems>
-                </Menu>,
-            );
-
-            await user.click(screen.getByText('Options'));
-            await waitFor(() => {
-                expect(screen.getByText('Edit')).toBeInTheDocument();
-            });
-
-            await user.click(screen.getByText('Edit'));
-
-            await waitFor(() => {
-                expect(handleOpenChange).toHaveBeenCalledWith(false);
-            });
-        });
-    });
-});

package/src/stories/menu/Menu.tsx

@@ -1,95 +0,0 @@
-import type { MenuButtonProps, MenuItemProps, MenuItemsProps, MenuProps } from '@headlessui/react';
-import {
-    Menu as HeadlessMenu,
-    MenuButton as HMenuButton,
-    MenuItem as HMenuItem,
-    MenuItems as HMenuItems,
-} from '@headlessui/react';
-import { clsx } from 'clsx';
-import type { FC } from 'react';
-import { OpenChangeEffect } from '../../helpers/OpenChangeEffect';
-
-import styles from './Menu.module.scss';
-
-/**
- * Wraps the `HeadlessMenu` component from `@headlessui/react` to provide a styled dropdown menu.
- *
- * This component serves as the root of the menu and should wrap `MenuButton`, `MenuItems`, and `MenuItem` components.
- *
- * Usage:
- *
- * ```tsx
- * <Menu>
- *   <MenuButton>Options</MenuButton>
- *   <MenuItems>
- *     <MenuItem>Item 1</MenuItem>
- *     <MenuItem>Item 2</MenuItem>
- *   </MenuItems>
- * </Menu>
- * ```
- */
-export const Menu: FC<MenuProps<React.ElementType> & { onOpenChange?: (open: boolean) => void }> = ({
-    className,
-    children,
-    onOpenChange,
-    ...props
-}) => (
-    <HeadlessMenu as="div" className={clsx(styles.menu, className)} {...props}>
-        {({ open, close }) => (
-            <>
-                <OpenChangeEffect open={open} onOpenChange={onOpenChange} />
-                {typeof children === 'function' ? children({ open, close }) : children}
-            </>
-        )}
-    </HeadlessMenu>
-);
-
-/**
- * Renders a button that toggles the display of `MenuItems` in a `Menu`.
- *
- * Should be used inside a `Menu` component to serve as the toggle for `MenuItems`.
- */
-export const MenuButton: FC<MenuButtonProps<React.ElementType>> = ({ className, children, ...props }) => (
-    <HMenuButton className={clsx(styles.menuButton, className)} {...props}>
-        {children}
-    </HMenuButton>
-);
-
-/**
- * Container for menu item options, rendering the list of `MenuItem` components.
- *
- * Positions the menu items relative to the `MenuButton` based on the `position` prop.
- *
- * @param position - Controls the positioning of the menu items ('left' or 'right').
- */
-export const MenuItems: FC<
-    MenuItemsProps<React.ElementType> & {
-        position?: 'left' | 'right';
-    }
-> = ({ className, children, position = 'left', ...props }) => (
-    <HMenuItems
-        transition
-        anchor={position === 'left' ? 'bottom start' : 'bottom end'}
-        className={clsx(styles.menuItems, className)}
-        {...props}
-    >
-        {children}
-    </HMenuItems>
-);
-
-/**
- * Represents an individual item within a `MenuItems` container.
- *
- * Should be used inside `MenuItems` to represent selectable options in the menu.
- *
- * @param isNew - Whether the menu items should be styled as new items.
- */
-export const MenuItem: FC<
-    MenuItemProps<React.ElementType> & {
-        isNew?: boolean;
-    }
-> = ({ className, children, isNew = false, ...props }) => (
-    <HMenuItem className={clsx(styles.menuItem, isNew && styles.newItem, className)} {...props}>
-        {children}
-    </HMenuItem>
-);

package/src/stories/pagination/usePagination.test.ts

@@ -1,259 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { usePagination } from './usePagination';
-
-describe('usePagination', () => {
-    it('initializes with the given initial page', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        expect(result.current.currentPage).toBe('page1');
-    });
-
-    it('initializes history with the initial page', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        expect(result.current.history).toEqual(['page1']);
-    });
-
-    it('cannot go back from the initial page', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        expect(result.current.canGoBack()).toBe(false);
-    });
-
-    it('cannot go forward from the initial page', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        expect(result.current.canGoForward()).toBe(false);
-    });
-
-    it('opens a new page and updates currentPage', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        expect(result.current.currentPage).toBe('page2');
-    });
-
-    it('adds opened page to history', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        expect(result.current.history).toEqual(['page1', 'page2']);
-    });
-
-    it('can go back after opening a new page', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        expect(result.current.canGoBack()).toBe(true);
-    });
-
-    it('goes back to the previous page', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        act(() => {
-            result.current.back();
-        });
-
-        expect(result.current.currentPage).toBe('page1');
-    });
-
-    it('does nothing when going back on the first page', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.back();
-        });
-
-        expect(result.current.currentPage).toBe('page1');
-    });
-
-    it('can go forward after going back', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        act(() => {
-            result.current.back();
-        });
-
-        expect(result.current.canGoForward()).toBe(true);
-    });
-
-    it('goes forward to the next page in history', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        act(() => {
-            result.current.back();
-        });
-
-        act(() => {
-            result.current.forward();
-        });
-
-        expect(result.current.currentPage).toBe('page2');
-    });
-
-    it('does nothing when going forward at the end of history', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.forward();
-        });
-
-        expect(result.current.currentPage).toBe('page1');
-    });
-
-    it('truncates forward history when opening a new page after going back', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        act(() => {
-            result.current.open('page3');
-        });
-
-        act(() => {
-            result.current.back();
-        });
-
-        // Now on page2, open page4 — page3 should be removed from history
-        act(() => {
-            result.current.open('page4');
-        });
-
-        expect(result.current.currentPage).toBe('page4');
-        expect(result.current.history).toEqual(['page1', 'page2', 'page4']);
-        expect(result.current.canGoForward()).toBe(false);
-    });
-
-    it('does not add duplicate page when opening the current page', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page1');
-        });
-
-        expect(result.current.history).toEqual(['page1']);
-        expect(result.current.currentPage).toBe('page1');
-    });
-
-    it('resets to initial state', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        act(() => {
-            result.current.open('page3');
-        });
-
-        act(() => {
-            result.current.reset();
-        });
-
-        expect(result.current.currentPage).toBe('page1');
-        expect(result.current.history).toEqual(['page1']);
-        expect(result.current.canGoBack()).toBe(false);
-        expect(result.current.canGoForward()).toBe(false);
-    });
-
-    it('supports navigating through multiple pages in sequence', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        act(() => {
-            result.current.open('page3');
-        });
-
-        act(() => {
-            result.current.open('page4');
-        });
-
-        expect(result.current.history).toEqual(['page1', 'page2', 'page3', 'page4']);
-        expect(result.current.currentPage).toBe('page4');
-
-        act(() => {
-            result.current.back();
-        });
-
-        act(() => {
-            result.current.back();
-        });
-
-        expect(result.current.currentPage).toBe('page2');
-        expect(result.current.canGoBack()).toBe(true);
-        expect(result.current.canGoForward()).toBe(true);
-    });
-
-    it('supports typed page keys', () => {
-        const pages = ['home', 'settings', 'profile'] as const;
-        const { result } = renderHook(() => usePagination<typeof pages>('home'));
-
-        act(() => {
-            result.current.open('settings');
-        });
-
-        expect(result.current.currentPage).toBe('settings');
-
-        act(() => {
-            result.current.open('profile');
-        });
-
-        expect(result.current.history).toEqual(['home', 'settings', 'profile']);
-    });
-
-    it('back and forward are idempotent at boundaries', () => {
-        const { result } = renderHook(() => usePagination('page1'));
-
-        // Multiple backs at start should not throw or change state
-        act(() => {
-            result.current.back();
-        });
-
-        act(() => {
-            result.current.back();
-        });
-
-        expect(result.current.currentPage).toBe('page1');
-
-        act(() => {
-            result.current.open('page2');
-        });
-
-        // Multiple forwards at end should not throw or change state
-        act(() => {
-            result.current.forward();
-        });
-
-        act(() => {
-            result.current.forward();
-        });
-
-        expect(result.current.currentPage).toBe('page2');
-    });
-});