paris 0.23.0 → 0.24.0

package/src/stories/drawer/DrawerPage.tsx

@@ -1,37 +0,0 @@
-'use client';
-
-import { type ReactNode, useEffect, useState } from 'react';
-import { useIsPageActive } from './DrawerPageContext';
-
-export type DrawerPageProps<TPageID extends string = string> = {
-    /** Unique identifier for this page. Must match a pagination page ID. */
-    id: TPageID;
-    /** Defer first mount until page becomes active. Once mounted, stays mounted. */
-    lazy?: boolean;
-    /** Page content. */
-    children: ReactNode;
-};
-
-export const DrawerPage = <TPageID extends string = string>({ lazy = false, children }: DrawerPageProps<TPageID>) => {
-    const isActive = useIsPageActive();
-    const [hasBeenActive, setHasBeenActive] = useState(isActive);
-
-    useEffect(() => {
-        if (isActive && !hasBeenActive) {
-            setHasBeenActive(true);
-        }
-    }, [isActive, hasBeenActive]);
-
-    if (lazy && !hasBeenActive) {
-        return null;
-    }
-
-    return <>{children}</>;
-};
-
-/** Type guard to check if a React element is a DrawerPage */
-export const isDrawerPageElement = (element: unknown): element is React.ReactElement<DrawerPageProps> =>
-    element != null &&
-    typeof element === 'object' &&
-    'type' in element &&
-    (element as { type: unknown }).type === DrawerPage;

package/src/stories/drawer/DrawerPageContext.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { createContext, type ReactNode, useContext, useMemo } from 'react';
-
-export type DrawerPageContextValue = {
-    isActive: boolean;
-    pageID: string;
-};
-
-const DrawerPageContext = createContext<DrawerPageContextValue | null>(null);
-
-export function useDrawerPageContext(): DrawerPageContextValue | null {
-    return useContext(DrawerPageContext);
-}
-
-export function useIsPageActive(): boolean {
-    const context = useContext(DrawerPageContext);
-    if (!context) {
-        return true;
-    }
-    return context.isActive;
-}
-
-export function DrawerPageProvider({
-    isActive,
-    pageID,
-    children,
-}: {
-    isActive: boolean;
-    pageID: string;
-    children: ReactNode;
-}) {
-    const value = useMemo(() => ({ isActive, pageID }), [isActive, pageID]);
-    return <DrawerPageContext.Provider value={value}>{children}</DrawerPageContext.Provider>;
-}

package/src/stories/drawer/DrawerPaginationContext.tsx

@@ -1,22 +0,0 @@
-'use client';
-
-import { createContext, type ReactNode, useContext } from 'react';
-import type { PaginationState } from '../pagination';
-
-type AnyPaginationState = PaginationState<string[] | readonly string[]>;
-
-const DrawerPaginationContext = createContext<AnyPaginationState | null>(null);
-
-export function useDrawerPagination(): AnyPaginationState | null {
-    return useContext(DrawerPaginationContext);
-}
-
-export function DrawerPaginationProvider({
-    pagination,
-    children,
-}: {
-    pagination: AnyPaginationState | null;
-    children: ReactNode;
-}) {
-    return <DrawerPaginationContext.Provider value={pagination}>{children}</DrawerPaginationContext.Provider>;
-}

package/src/stories/drawer/DrawerProgressBar.tsx

@@ -1,72 +0,0 @@
-'use client';
-
-import { useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
-import styles from './Drawer.module.scss';
-import { useDrawerPagination } from './DrawerPaginationContext';
-import { useDrawerSlotContext } from './DrawerSlotContext';
-
-export type DrawerProgressBarStyleProps = {
-    /** Fill color. @default 'var(--pte-new-colors-contentPrimary)' */
-    fill?: string;
-    /** Track (unfilled) color. @default 'var(--pte-new-colors-borderMedium)' */
-    track?: string;
-    /** Bar height as a CSS value. @default '2px' */
-    height?: string | number;
-};
-
-export type DrawerProgressBarProps = DrawerProgressBarStyleProps & {
-    /** Page IDs in order. Determines fill percentage based on the current page. */
-    steps?: readonly string[];
-    /** Fill percentage (0–100). When provided, takes precedence over the auto-calculated value from `steps`. */
-    value?: number;
-};
-
-export const DrawerProgressBar = ({ steps, value, fill, track, height }: DrawerProgressBarProps) => {
-    const pagination = useDrawerPagination();
-    const slotContext = useDrawerSlotContext();
-
-    const registerProgressBar = slotContext?.registerProgressBar;
-    useLayoutEffect(() => {
-        if (!registerProgressBar) return;
-        return registerProgressBar();
-    }, [registerProgressBar]);
-
-    let progress: number;
-    if (value != null) {
-        progress = Math.max(0, Math.min(100, value));
-    } else if (steps && steps.length > 0 && pagination) {
-        const activeIndex = steps.indexOf(pagination.currentPage);
-        progress = ((activeIndex + 1) / steps.length) * 100;
-    } else {
-        progress = 0;
-    }
-
-    if (!slotContext?.progressBarRef.current) {
-        return null;
-    }
-
-    return createPortal(
-        <div
-            className={styles.progressBar}
-            role="progressbar"
-            aria-valuemin={0}
-            aria-valuenow={Math.round(progress)}
-            aria-valuemax={100}
-            aria-label="Page progress"
-            style={{
-                ...(track && { background: track }),
-                ...(height != null && { height: typeof height === 'number' ? `${height}px` : height }),
-            }}
-        >
-            <div
-                className={styles.progressBarFill}
-                style={{
-                    width: `${progress}%`,
-                    ...(fill && { background: fill }),
-                }}
-            />
-        </div>,
-        slotContext.progressBarRef.current,
-    );
-};

package/src/stories/drawer/DrawerSlotContext.tsx

@@ -1,172 +0,0 @@
-'use client';
-
-import {
-    createContext,
-    type ReactNode,
-    type RefObject,
-    useCallback,
-    useContext,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
-
-export type BottomPanelEntry = {
-    id: string;
-    mode: 'replace' | 'append';
-    priority: number;
-};
-
-export type DrawerSlotContextValue = {
-    titleRef: RefObject<HTMLDivElement | null>;
-    actionsRef: RefObject<HTMLDivElement | null>;
-    bottomPanelRef: RefObject<HTMLDivElement | null>;
-    /** Callback ref for the bottom panel portal target — triggers re-render when assigned */
-    bottomPanelCallbackRef: (node: HTMLDivElement | null) => void;
-    /** Whether the bottom panel portal target is mounted in the DOM */
-    isBottomPanelMounted: boolean;
-
-    /** Portal target for the progress bar, rendered at the very top of the bottom panel */
-    progressBarRef: RefObject<HTMLDivElement | null>;
-
-    hasTitleSlot: boolean;
-    hasActionsSlot: boolean;
-    hasProgressBar: boolean;
-
-    /** Whether a replace-mode bottom panel is registered */
-    hasBottomPanelReplace: boolean;
-    /** Whether any bottom panel slot (replace or append) is registered */
-    hasAnyBottomPanelSlot: boolean;
-    /** Sorted list of append-mode bottom panel entries */
-    bottomPanelAppendEntries: BottomPanelEntry[];
-
-    registerTitleSlot: () => () => void;
-    registerActionsSlot: () => () => void;
-    registerProgressBar: () => () => void;
-    registerBottomPanel: (entry: BottomPanelEntry) => () => void;
-};
-
-const DrawerSlotContext = createContext<DrawerSlotContextValue | null>(null);
-
-export function useDrawerSlotContext(): DrawerSlotContextValue | null {
-    return useContext(DrawerSlotContext);
-}
-
-export function DrawerSlotProvider({ children }: { children: ReactNode }) {
-    const titleRef = useRef<HTMLDivElement | null>(null);
-    const actionsRef = useRef<HTMLDivElement | null>(null);
-    const progressBarRef = useRef<HTMLDivElement | null>(null);
-    const bottomPanelRef = useRef<HTMLDivElement | null>(null);
-    const [isBottomPanelMounted, setIsBottomPanelMounted] = useState(false);
-
-    const bottomPanelCallbackRef = useCallback((node: HTMLDivElement | null) => {
-        bottomPanelRef.current = node;
-        setIsBottomPanelMounted(node !== null);
-    }, []);
-
-    const [titleSlotCount, setTitleSlotCount] = useState(0);
-    const [actionsSlotCount, setActionsSlotCount] = useState(0);
-    const [progressBarCount, setProgressBarCount] = useState(0);
-    const [bottomPanelEntries, setBottomPanelEntries] = useState<BottomPanelEntry[]>([]);
-
-    const registerTitleSlot = useCallback((): (() => void) => {
-        setTitleSlotCount((prev) => {
-            const next = prev + 1;
-            if (process.env.NODE_ENV === 'development' && next > 1) {
-                console.warn(
-                    'DrawerSlotContext: Multiple title slots registered simultaneously. Only one is expected.',
-                );
-            }
-            return next;
-        });
-        return () => {
-            setTitleSlotCount((prev) => Math.max(0, prev - 1));
-        };
-    }, []);
-
-    const registerActionsSlot = useCallback((): (() => void) => {
-        setActionsSlotCount((prev) => {
-            const next = prev + 1;
-            if (process.env.NODE_ENV === 'development' && next > 1) {
-                console.warn(
-                    'DrawerSlotContext: Multiple actions slots registered simultaneously. Only one is expected.',
-                );
-            }
-            return next;
-        });
-        return () => {
-            setActionsSlotCount((prev) => Math.max(0, prev - 1));
-        };
-    }, []);
-
-    const registerProgressBar = useCallback((): (() => void) => {
-        setProgressBarCount((prev) => prev + 1);
-        return () => {
-            setProgressBarCount((prev) => Math.max(0, prev - 1));
-        };
-    }, []);
-
-    const registerBottomPanel = useCallback((entry: BottomPanelEntry): (() => void) => {
-        setBottomPanelEntries((prev) => {
-            if (process.env.NODE_ENV === 'development' && entry.mode === 'replace') {
-                const existingReplace = prev.find((e) => e.mode === 'replace');
-                if (existingReplace) {
-                    console.warn(
-                        `DrawerSlotContext: Multiple replace-mode bottom panels registered (existing: "${existingReplace.id}", new: "${entry.id}"). Only one replace-mode panel is expected.`,
-                    );
-                }
-            }
-            return [...prev, entry];
-        });
-        return () => {
-            setBottomPanelEntries((prev) => prev.filter((e) => e.id !== entry.id));
-        };
-    }, []);
-
-    const hasTitleSlot = titleSlotCount > 0;
-    const hasActionsSlot = actionsSlotCount > 0;
-    const hasProgressBar = progressBarCount > 0;
-    const hasBottomPanelReplace = bottomPanelEntries.some((e) => e.mode === 'replace');
-    const hasAnyBottomPanelSlot = bottomPanelEntries.length > 0;
-    const bottomPanelAppendEntries = useMemo(
-        () => bottomPanelEntries.filter((e) => e.mode === 'append').sort((a, b) => a.priority - b.priority),
-        [bottomPanelEntries],
-    );
-
-    const value = useMemo<DrawerSlotContextValue>(
-        () => ({
-            titleRef,
-            actionsRef,
-            progressBarRef,
-            bottomPanelRef,
-            bottomPanelCallbackRef,
-            isBottomPanelMounted,
-            hasTitleSlot,
-            hasActionsSlot,
-            hasProgressBar,
-            hasBottomPanelReplace,
-            hasAnyBottomPanelSlot,
-            bottomPanelAppendEntries,
-            registerTitleSlot,
-            registerActionsSlot,
-            registerProgressBar,
-            registerBottomPanel,
-        }),
-        [
-            bottomPanelCallbackRef,
-            isBottomPanelMounted,
-            hasTitleSlot,
-            hasActionsSlot,
-            hasProgressBar,
-            hasBottomPanelReplace,
-            hasAnyBottomPanelSlot,
-            bottomPanelAppendEntries,
-            registerTitleSlot,
-            registerActionsSlot,
-            registerProgressBar,
-            registerBottomPanel,
-        ],
-    );
-
-    return <DrawerSlotContext.Provider value={value}>{children}</DrawerSlotContext.Provider>;
-}

package/src/stories/drawer/DrawerTitle.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { type ReactNode, useId, useLayoutEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { TextWhenString } from '../utility/TextWhenString';
-import { useIsPageActive } from './DrawerPageContext';
-import { useDrawerSlotContext } from './DrawerSlotContext';
-
-export type DrawerTitleProps = {
-    children: ReactNode;
-};
-
-export const DrawerTitle = ({ children }: DrawerTitleProps) => {
-    const isActive = useIsPageActive();
-    const slotContext = useDrawerSlotContext();
-    const id = useId();
-
-    useLayoutEffect(() => {
-        if (!isActive || !slotContext) return;
-        const unregister = slotContext.registerTitleSlot();
-        return unregister;
-    }, [isActive, slotContext]);
-
-    if (!isActive || !slotContext?.titleRef.current) {
-        return null;
-    }
-
-    return createPortal(
-        <TextWhenString kind="paragraphSmall" weight="medium">
-            {children}
-        </TextWhenString>,
-        slotContext.titleRef.current,
-        id,
-    );
-};

package/src/stories/field/Field.stories.ts

@@ -1,36 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { createElement } from 'react';
-import { Field } from './Field';
-
-const meta: Meta<typeof Field> = {
-    title: 'Inputs/Field',
-    component: Field,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Field>;
-
-export const Default: Story = {
-    args: {
-        label: 'Label',
-        description: 'Description.',
-        children: createElement(
-            'div',
-            {
-                style: {
-                    backgroundColor: 'var(--pte-new-colors-inputFill)',
-                    height: '36px',
-                    width: '100%',
-                    display: 'flex',
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'flex-start',
-                    paddingLeft: '12px',
-                    border: '1px solid pink',
-                },
-            },
-            'Children are inserted here.',
-        ),
-    },
-};

package/src/stories/field/Field.test.tsx

@@ -1,146 +0,0 @@
-import { render, screen } from '../../test/render';
-import { Field } from './Field';
-
-describe('Field', () => {
-    it('renders children', () => {
-        render(
-            <Field label="Name">
-                <input data-testid="child" />
-            </Field>,
-        );
-        expect(screen.getByTestId('child')).toBeInTheDocument();
-    });
-
-    it('renders a string label as a <label> element', () => {
-        render(
-            <Field label="Email" htmlFor="email-input">
-                <input id="email-input" />
-            </Field>,
-        );
-        const label = screen.getByText('Email');
-        expect(label.tagName).toBe('LABEL');
-        expect(label).toHaveAttribute('for', 'email-input');
-    });
-
-    it('renders a ReactNode label wrapped in a plain <label>', () => {
-        render(
-            <Field label={<span data-testid="custom-label">Custom</span>} htmlFor="input-id">
-                <input id="input-id" />
-            </Field>,
-        );
-        const customLabel = screen.getByTestId('custom-label');
-        expect(customLabel).toBeInTheDocument();
-        // The wrapping <label> should have the htmlFor
-        expect(customLabel.closest('label')).toHaveAttribute('for', 'input-id');
-    });
-
-    it('hides the label visually when hideLabel is true', () => {
-        render(
-            <Field label="Hidden Label" hideLabel>
-                <input />
-            </Field>,
-        );
-        const label = screen.getByText('Hidden Label');
-        expect(label).toHaveClass('hidden');
-    });
-
-    it('renders a string description', () => {
-        render(
-            <Field label="Name" description="Enter your full name" htmlFor="name">
-                <input id="name" />
-            </Field>,
-        );
-        expect(screen.getByText('Enter your full name')).toBeInTheDocument();
-    });
-
-    it('hides the description when hideDescription is true', () => {
-        render(
-            <Field label="Name" description="Helper text" hideDescription htmlFor="name">
-                <input id="name" />
-            </Field>,
-        );
-        const desc = screen.getByText('Helper text');
-        expect(desc).toHaveClass('hidden');
-    });
-
-    it('hides the description element when no description is provided', () => {
-        render(
-            <Field label="Name" htmlFor="test-id">
-                <input id="test-id" />
-            </Field>,
-        );
-        const descEl = document.getElementById('test-id-description');
-        expect(descEl).toBeInTheDocument();
-        expect(descEl).toHaveClass('hidden');
-    });
-
-    it('renders description at the bottom by default', () => {
-        const { container } = render(
-            <Field label="Name" description="Below input" htmlFor="name">
-                <input id="name" />
-            </Field>,
-        );
-        const rootDiv = container.firstElementChild!;
-        const children = Array.from(rootDiv.children);
-        // Order: label, children (input), description
-        const labelIdx = children.findIndex((el) => el.textContent === 'Name');
-        const descIdx = children.findIndex((el) => el.textContent === 'Below input');
-        expect(descIdx).toBeGreaterThan(labelIdx);
-    });
-
-    it('renders description above children when descriptionPosition is top', () => {
-        const { container } = render(
-            <Field label="Name" description="Above input" descriptionPosition="top" htmlFor="name">
-                <input id="name" data-testid="input" />
-            </Field>,
-        );
-        const rootDiv = container.firstElementChild!;
-        const children = Array.from(rootDiv.children);
-        // When top: label and description are in a labelContainer div, then children
-        const labelContainer = children[0];
-        expect(labelContainer).toHaveClass('labelContainer');
-        expect(labelContainer.textContent).toContain('Name');
-        expect(labelContainer.textContent).toContain('Above input');
-    });
-
-    it('focuses the input when the container is clicked', async () => {
-        const { user } = render(
-            <Field label="Click me" htmlFor="focusable">
-                <input id="focusable" data-testid="focusable" />
-            </Field>,
-        );
-        const label = screen.getByText('Click me');
-        await user.click(label);
-        expect(screen.getByTestId('focusable')).toHaveFocus();
-    });
-
-    it('does not focus the input when disabled', async () => {
-        const { user, container } = render(
-            <Field label="Disabled" htmlFor="disabled-input" disabled>
-                <input id="disabled-input" data-testid="disabled-input" />
-            </Field>,
-        );
-        await user.click(container.firstElementChild!);
-        expect(screen.getByTestId('disabled-input')).not.toHaveFocus();
-    });
-
-    it('applies overrides.container props', () => {
-        render(
-            <Field label="Test" overrides={{ container: { 'data-testid': 'custom-container' } }}>
-                <input />
-            </Field>,
-        );
-        expect(screen.getByTestId('custom-container')).toBeInTheDocument();
-    });
-
-    it('renders ReactNode description in a div', () => {
-        render(
-            <Field label="Name" description={<em data-testid="em-desc">Emphasized</em>} htmlFor="name">
-                <input id="name" />
-            </Field>,
-        );
-        const emDesc = screen.getByTestId('em-desc');
-        expect(emDesc).toBeInTheDocument();
-        expect(emDesc.closest('div')).toHaveAttribute('id', 'name-description');
-    });
-});