paris 0.18.1 → 0.20.0

package/src/stories/markdowneditor/useMarkdownEditor.ts

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEditor } from '@tiptap/react';
+import { useEffect, useMemo, useRef } from 'react';
+import type { MarkdownEditorFeature } from './features';
+import { ALL_FEATURES, buildExtensions } from './features';
+
+export type UseMarkdownEditorOptions = {
+    /** The markdown string value (controlled). */
+    value: string;
+    /** Fires with the updated markdown string on every edit. */
+    onChange?: (value: string) => void;
+    /** Whitelist of formatting features. Defaults to ALL_FEATURES. */
+    features?: MarkdownEditorFeature[];
+    /** Placeholder text when the editor is empty. */
+    placeholder?: string;
+    /** Whether the editor is editable. @default true */
+    editable?: boolean;
+    /** Whether to autofocus the editor on mount. @default false */
+    autofocus?: boolean;
+};
+
+export function useMarkdownEditor({
+    value,
+    onChange,
+    features = ALL_FEATURES,
+    placeholder,
+    editable = true,
+    autofocus = false,
+}: UseMarkdownEditorOptions) {
+    const featureSet = useMemo(() => new Set(features), [features]);
+    const extensions = useMemo(() => buildExtensions(featureSet, placeholder), [featureSet, placeholder]);
+
+    // Track the last value we sent via onChange to prevent circular updates
+    const lastOnChangeValue = useRef(value);
+
+    const editor = useEditor({
+        extensions,
+        // Empty strings produce no DOM nodes with contentType: 'markdown',
+        // which breaks the placeholder. Only use markdown parsing for non-empty content.
+        content: value || undefined,
+        contentType: value ? 'markdown' : undefined,
+        editable,
+        autofocus,
+        immediatelyRender: false,
+        onUpdate: ({ editor: ed }) => {
+            const markdown = ed.getMarkdown();
+            lastOnChangeValue.current = markdown;
+            onChange?.(markdown);
+        },
+    });
+
+    // Sync external value changes into the editor (controlled mode)
+    useEffect(() => {
+        if (!editor || editor.isDestroyed) return;
+
+        // Skip if this value came from our own onChange
+        if (value === lastOnChangeValue.current) return;
+
+        const currentMarkdown = editor.getMarkdown();
+        if (value !== currentMarkdown) {
+            editor.commands.setContent(value, { contentType: 'markdown', emitUpdate: false });
+            lastOnChangeValue.current = value;
+        }
+    }, [editor, value]);
+
+    // Sync editable state
+    useEffect(() => {
+        if (editor && !editor.isDestroyed) {
+            editor.setEditable(editable);
+        }
+    }, [editor, editable]);
+
+    return { editor, featureSet };
+}

package/src/stories/menu/Menu.module.scss

@@ -19,7 +19,7 @@
     align-items: flex-start;
 
     overflow: hidden;
-    z-index: 100;
+    z-index: var(--pte-new-layers-menu);
 
     transition: var(--pte-animations-interaction);
     opacity: 1;

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

@@ -0,0 +1,211 @@
+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();
+    });
+});

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

@@ -0,0 +1,259 @@
+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');
+    });
+});

package/src/stories/popover/Popover.test.tsx

@@ -0,0 +1,152 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '../../test/render';
+import { Popover } from './Popover';
+
+describe('Popover', () => {
+    it('renders the trigger element', () => {
+        render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <p>Popover content</p>
+            </Popover>,
+        );
+
+        expect(screen.getByText('Open Popover')).toBeInTheDocument();
+    });
+
+    it('does not show popover content initially', () => {
+        render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <p>Popover content</p>
+            </Popover>,
+        );
+
+        expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+    });
+
+    it('shows popover content when the trigger is clicked', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <p>Popover content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Popover content')).toBeInTheDocument();
+        });
+    });
+
+    it('hides popover content when the trigger is clicked again', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <p>Popover content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Popover content')).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.queryByText('Popover content')).not.toBeInTheDocument();
+        });
+    });
+
+    it('supports controlled isOpen state', () => {
+        render(
+            <Popover trigger={<button type="button">Open Popover</button>} isOpen={true} setIsOpen={vi.fn()}>
+                <p>Controlled content</p>
+            </Popover>,
+        );
+
+        expect(screen.getByText('Controlled content')).toBeInTheDocument();
+    });
+
+    it('does not show content when controlled isOpen is false', () => {
+        render(
+            <Popover trigger={<button type="button">Open Popover</button>} isOpen={false} setIsOpen={vi.fn()}>
+                <p>Controlled content</p>
+            </Popover>,
+        );
+
+        expect(screen.queryByText('Controlled content')).not.toBeInTheDocument();
+    });
+
+    it('calls setIsOpen when trigger is clicked in controlled mode', async () => {
+        const setIsOpen = vi.fn();
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>} isOpen={false} setIsOpen={setIsOpen}>
+                <p>Controlled content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        expect(setIsOpen).toHaveBeenCalledWith(true);
+    });
+
+    it('renders children content inside the popover', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>}>
+                <div>
+                    <h3>Title</h3>
+                    <p>Description text</p>
+                </div>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Title')).toBeInTheDocument();
+            expect(screen.getByText('Description text')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with custom positions', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>} positions={['top', 'bottom']}>
+                <p>Positioned content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Positioned content')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with custom alignment', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>} align="center">
+                <p>Aligned content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Aligned content')).toBeInTheDocument();
+        });
+    });
+
+    it('renders with custom padding', async () => {
+        const { user } = render(
+            <Popover trigger={<button type="button">Open Popover</button>} padding={16}>
+                <p>Padded content</p>
+            </Popover>,
+        );
+
+        await user.click(screen.getByText('Open Popover'));
+
+        await waitFor(() => {
+            expect(screen.getByText('Padded content')).toBeInTheDocument();
+        });
+    });
+});