paris 0.23.0 → 0.24.0

package/src/stories/pagination/usePagination.ts

@@ -1,117 +0,0 @@
-import { useState } from 'react';
-
-export type PaginationState<T extends string[] | readonly string[] = string[]> = {
-    /**
-     * The current page key.
-     */
-    currentPage: T[number];
-
-    /**
-     * Open a page and add it to the history.
-     * @param page - The page's unique key.
-     */
-    open: (page: T[number]) => void;
-
-    /**
-     * Check if the current page can go back.
-     */
-    canGoBack: () => boolean;
-
-    /**
-     * Go back to the previous page.
-     *
-     * If the current page is the first page, nothing happens.
-     */
-    back: () => void;
-
-    /**
-     * Check if the current page can go forward.
-     */
-    canGoForward: () => boolean;
-
-    /**
-     * Go forward to the next page.
-     *
-     * If there is no next page, nothing happens.
-     */
-    forward: () => void;
-
-    /**
-     * The page history.
-     */
-    history: T[number][];
-
-    /**
-     * Clear the page history and reset to the initial page.
-     */
-    reset: () => void;
-};
-
-/**
- * A hook to create a page history and navigate between pages.
- *
- * In TypeScript, you can pass in a string array to the generic type to explicitly define the page keys, which will add type safety and auto-completion for each method.
- *
- * @param initialPage - The initial page key.
- */
-export const usePagination = <T extends string[] | readonly string[] = string[]>(
-    initialPage: T[number],
-): PaginationState<T> => {
-    // The current page.
-    const [currentPage, setCurrentPage] = useState<T[number]>(initialPage);
-
-    // The page history.
-    const [history, setHistory] = useState<T[number][]>([initialPage]);
-
-    const open = (page: T[number]): void => {
-        // Do nothing if the page is already open.
-        if (page === currentPage) {
-            return;
-        }
-
-        // Open the page and add it to the history, removing all pages after it.
-        const index = history.indexOf(currentPage);
-        setCurrentPage(page);
-        setHistory((hist) => hist.slice(0, index + 1).concat(page));
-    };
-
-    const canGoBack = (): boolean => {
-        const index = history.indexOf(currentPage);
-        return index > 0;
-    };
-
-    const back = (): void => {
-        if (canGoBack()) {
-            const index = history.indexOf(currentPage);
-            setCurrentPage(history[index - 1]);
-        }
-    };
-
-    const canGoForward = (): boolean => {
-        const index = history.indexOf(currentPage);
-        return index < history.length - 1;
-    };
-
-    const forward = (): void => {
-        if (canGoForward()) {
-            const index = history.indexOf(currentPage);
-            setCurrentPage(history[index + 1]);
-        }
-    };
-
-    const reset = (): void => {
-        setCurrentPage(initialPage);
-        setHistory([initialPage]);
-    };
-
-    return {
-        currentPage,
-        open,
-        canGoBack,
-        back,
-        canGoForward,
-        forward,
-        reset,
-        history,
-    } as PaginationState<T>;
-};

package/src/stories/popover/Popover.module.scss

@@ -1,22 +0,0 @@
-@keyframes intro {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-
-.trigger {
-    width: fit-content;
-}
-
-.content {
-    background-color: var(--pte-new-colors-surfacePrimary);
-    animation: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOutExpo) 0s 1 intro;
-    width: fit-content;
-    border-radius: var(--pte-borders-radius-rounded);
-    box-shadow: var(--pte-new-lighting-shallowPopup);
-    border: var(--pte-new-borders-dropdown-border);
-}

package/src/stories/popover/Popover.stories.ts

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { createElement } from 'react';
-import { Button } from '../button';
-import { Popover } from './Popover';
-
-const meta: Meta<typeof Popover> = {
-    title: 'Surfaces/Popover',
-    component: Popover,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Popover>;
-
-export const Default: Story = {
-    args: {
-        trigger: createElement(Button, {}, 'Click me'),
-        children: 'Hello world!',
-    },
-};

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

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

package/src/stories/popover/Popover.tsx

@@ -1,89 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
-import { forwardRef } from 'react';
-import type { PopoverProps as RTPopoverProps } from 'react-tiny-popover';
-import { Popover as RTPopover } from 'react-tiny-popover';
-import { useControllableState } from '../../helpers/useControllableState';
-import typography from '../text/Typography.module.css';
-import styles from './Popover.module.scss';
-
-// TODO(URGENT): Figure out how to properly handle accessibility; the popover content should capture focus for tabbing and clicking, and `esc` should allow closing the popover. Might be better to use Radix popover instead of react-tiny-popover?
-
-export type PopoverProps = {
-    /** The trigger element for the Popover. */
-    trigger: ReactElement;
-    /** Optionally, manage state for the Popover yourself by passing `isOpen` and `setIsOpen` props. */
-    isOpen?: boolean;
-    /** Optionally, manage state for the Popover yourself by passing `isOpen` and `setIsOpen` props. */
-    setIsOpen?: (isOpen: boolean) => void;
-    /** The contents of the Popover. */
-    children?: ReactNode;
-} & Omit<RTPopoverProps, 'content' | 'children' | 'isOpen'>;
-
-interface TriggerProps extends ComponentPropsWithoutRef<'div'> {
-    onClick: () => void;
-}
-const Trigger = forwardRef<HTMLDivElement, TriggerProps>((props, ref) => (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-    <div className={styles.trigger} ref={ref} onClick={props.onClick}>
-        {props.children}
-    </div>
-));
-
-/**
- * A Popover component, based on [`react-tiny-popover`](https://github.com/alexkatz/react-tiny-popover). Refer to its docs for more information on positioning props.
- *
- * <hr />
- *
- * To use this component:
- *
- * ```js
- * import { Popover } from 'paris/popover';
- *
- * <Popover trigger={<button>Trigger</button>}>
- *    <p>Content</p>
- * </Popover>
- * ```
- * @constructor
- */
-export const Popover: FC<PopoverProps> = ({
-    trigger,
-    children,
-    padding,
-    positions,
-    align,
-    isOpen,
-    setIsOpen,
-    ...props
-}) => {
-    const [open, setOpen] = useControllableState({
-        value: isOpen,
-        defaultValue: false,
-        onChange: setIsOpen,
-    });
-
-    return (
-        <RTPopover
-            positions={positions || ['bottom', 'top', 'left', 'right']}
-            align={align || 'start'}
-            padding={padding || 8}
-            isOpen={open}
-            containerClassName={clsx(typography.paragraphSmall, styles.content)}
-            content={<>{children}</>}
-            onClickOutside={() => {
-                setOpen(false);
-            }}
-            {...props}
-        >
-            <Trigger
-                onClick={() => {
-                    setOpen((cur) => !cur);
-                }}
-            >
-                {trigger}
-            </Trigger>
-        </RTPopover>
-    );
-};

package/src/stories/select/Select.module.scss

@@ -1,311 +0,0 @@
-.container {
-    position: relative;
-    user-select: var(--pte-utils-defaultUserSelect);
-
-    & > * {
-        cursor: default;
-    }
-}
-
-.listboxButton {
-    &[aria-expanded = true] {
-        .chevron {
-            color: var(--pte-new-colors-contentPrimary);
-        }
-        border-color: var(--pte-new-colors-inputBorderFocus);
-        background-color: var(--pte-new-colors-inputFillFocus);
-    }
-}
-
-.field {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.options {
-    width: max(var(--button-width, 0px), var(--input-width, 0px));
-    max-height: var(--options-maxHeight, auto);
-    overflow-y: auto;
-    overflow-x: hidden;
-
-    z-index: var(--pte-new-layers-dropdown);
-
-    display: flex;
-    flex-direction: column;
-
-    background-color: var(--pte-new-colors-surfacePrimary);
-
-    border: var(--pte-new-borders-dropdown-border);
-    border-radius: var(--pte-borders-radius-rectangle);
-    box-shadow: var(--pte-new-lighting-deepBelow);
-
-    transition: opacity var(--pte-animations-interaction), transform var(--pte-animations-interaction);
-
-    &[data-closed] {
-        opacity: 0;
-        transform: translateY(-8px);
-    }
-
-    &:focus-within {
-        outline: none;
-    }
-}
-
-.option {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 8px;
-
-    padding: 6.5px 14px;
-    //margin: -1px;
-
-    // border: 1px solid var(--pte-borders-dropdown-color);
-    //border-right: 1px solid var(--pte-borders-dropdown-color);
-
-    transition: var(--pte-animations-interaction);
-    .check {
-        display: none;
-    }
-
-    &[data-selected] {
-        background-color: var(--pte-new-colors-overlaySubtle);
-
-        .check {
-            display: flex;
-        }
-    }
-
-    &:hover, &[data-active], &[data-focus] {
-        background-color: var(--pte-new-colors-overlayMedium);
-    }
-
-    &[data-status="disabled"], &[data-disabled] {
-        pointer-events: none;
-        cursor: default;
-
-        &, & * {
-            color: var(--pte-new-colors-contentDisabled);
-        }
-    }
-
-    &.optionBorder {
-        border-bottom: 0.5px solid var(--pte-new-colors-borderMedium);
-    }
-    &.optionBorder:last-child {
-        border-bottom: none;
-    }
-}
-
-.content {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-}
-
-.radioContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    justify-content: flex-start;
-    align-items: flex-start;
-}
-
-.radioOption {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    justify-content: flex-start;
-    align-items: center;
-
-    &[data-focus] {
-        .radioCircle {
-            border-color: var(--pte-new-colors-contentPrimary);
-        }
-    }
-
-    &[data-checked] {
-        .radioCircle {
-            border: 5px solid var(--pte-new-colors-contentPrimary);
-        }
-    }
-
-    &[data-status="disabled"], &[data-disabled] {
-        pointer-events: none;
-        cursor: default;
-
-        &, & * {
-            color: var(--pte-new-colors-contentDisabled);
-        }
-
-        .radioCircle {
-            border-color: var(--pte-new-colors-contentDisabled);
-        }
-    }
-
-    &[data-status="error"] {
-        .radioCircle {
-            border-color: var(--pte-new-colors-contentNegative);
-        }
-    }
-
-    &[data-status="success"] {
-        .radioCircle {
-            border-color: var(--pte-new-colors-contentPositive);
-        }
-    }
-}
-
-.radioCircle {
-    flex-shrink: 0;
-    margin: 0 8px;
-    width: 14px;
-    height: 14px;
-    border-radius: 100%;
-    border: 1.5px solid var(--pte-new-colors-contentTertiary);
-    transition: all var(--pte-animations-interaction);
-}
-
-.cardContainer {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    justify-content: flex-start;
-    align-items: flex-start;
-}
-
-.cardOption {
-    background-color: var(--pte-new-colors-surfacePrimary);
-    border-radius: 6px;
-    width: 100%;
-
-    &[data-focus] {
-        //.cardSurface {
-        //    background-color: var(--pte-new-colors-overlayWhiteSubtle);
-        //    border-color: var(--pte-new-colors-borderStrong);
-        //}
-    }
-
-    &[data-checked] {
-        .cardSurface {
-            background-color: var(--pte-new-colors-overlayMedium);
-            border-color: var(--pte-new-colors-borderUltrastrong);
-        }
-    }
-
-    &[data-status="disabled"], &[data-disabled] {
-        pointer-events: none;
-        cursor: default;
-
-        &, & * {
-            color: var(--pte-new-colors-contentDisabled);
-        }
-
-        //.cardSurface {
-        //    background-color: var(--pte-new-colors-overlayWhiteSubtle);
-        //    border-color: var(--pte-new-colors-borderStrong);
-        //}
-    }
-
-    &[data-status="error"] {
-        .cardSurface {
-            background-color: var(--pte-new-colors-backgroundNegative);
-        }
-    }
-
-    &[data-status="success"] {
-        .cardSurface {
-            background-color: var(--pte-new-colors-backgroundPositive);
-        }
-    }
-
-    &:hover {
-        .cardSurface {
-            background-color: var(--pte-new-colors-overlayStrong);
-        }
-    }
-}
-
-.cardSurface {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    transition: all var(--pte-animations-interaction);
-
-    border-radius: 6px;
-    background-color: var(--pte-new-colors-overlayWhiteSubtle);
-    border: 1px solid var(--pte-new-colors-borderStrong);
-
-    &.text {
-        padding: 4px 10px;
-    }
-}
-
-.segmentedContainer {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    background-color: var(--pte-new-colors-surfaceTertiary);
-    border-radius: var(--pte-new-borders-radius-roundedMedium);
-    padding: 4px;
-    gap: 2px;
-}
-
-.segmentedOption {
-    padding: 3px 20px;
-    border-radius: var(--pte-new-borders-radius-roundedSmall);
-    width: 100%;
-    color: var(--pte-new-colors-contentTertiary);
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    isolation: isolate;
-    transition: var(--pte-animations-interaction);
-
-    &.tall {
-        padding: 6px 20px;
-    }
-
-    &[data-status="disabled"], &[data-disabled] {
-        pointer-events: none;
-        cursor: default;
-
-        &, & * {
-            color: var(--pte-new-colors-contentDisabled);
-        }
-
-        //.cardSurface {
-        //    background-color: var(--pte-new-colors-overlayWhiteSubtle);
-        //    border-color: var(--pte-new-colors-borderStrong);
-        //}
-    }
-
-    &:hover {
-        color: var(--pte-new-colors-contentPrimary);
-    }
-
-    &[data-checked] {
-        color: var(--pte-new-colors-contentPrimary);
-    }
-}
-
-.segmentedBackground {
-    position: absolute;
-    height: 100%;
-    left: 0;
-    right: 0;
-    background-color: var(--pte-new-colors-surfaceQuaternary);
-    border-radius: var(--pte-new-borders-radius-roundedSmall);
-}
-
-.segmentedText {
-    z-index: 1;
-}