paris 0.23.0 → 0.24.0

package/src/stories/accordionselect/AccordionSelect.tsx

@@ -1,249 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import { useEffect, useRef } from 'react';
-import { useControllableState } from '../../helpers/useControllableState';
-import { Check, ChevronRight, Icon } from '../icon';
-import { TextWhenString } from '../utility';
-import styles from './AccordionSelect.module.scss';
-
-export type AccordionSelectOption<T = Record<string, unknown>> = {
-    /**
-     * A unique identifier for the option.
-     */
-    id: string;
-    /**
-     * The content to render for this option.
-     */
-    node: ReactNode;
-    /**
-     * Whether this option is disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Optional metadata associated with the option.
-     */
-    metadata?: T;
-};
-
-export type AccordionSelectProps<T = Record<string, unknown>> = {
-    /**
-     * The list of selectable options.
-     */
-    options: AccordionSelectOption<T>[];
-    /**
-     * The currently selected option ID.
-     */
-    value?: string | null;
-    /**
-     * The initial selected option ID for uncontrolled mode. If `value` is provided, this is ignored.
-     */
-    defaultValue?: string | null;
-    /**
-     * Called when the user selects an option.
-     */
-    onChange?: (option: AccordionSelectOption<T>) => void;
-    /**
-     * Custom content to render as the header when an option is selected.
-     * Receives the selected option. If not provided, the option's `node` is used.
-     */
-    renderSelected?: (option: AccordionSelectOption<T>) => ReactNode;
-    /**
-     * Custom content to render for each option in the dropdown.
-     * Receives the option and whether it's selected. If not provided, the option's `node` is used.
-     */
-    renderOption?: (option: AccordionSelectOption<T>, isSelected: boolean) => ReactNode;
-    /**
-     * Placeholder to show when no option is selected.
-     * @default 'Select an option'
-     */
-    placeholder?: ReactNode;
-    /**
-     * Whether the accordion is open. If provided, the component becomes controlled.
-     */
-    isOpen?: boolean;
-    /**
-     * Called when the open state changes.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Whether to close the accordion when an option is selected.
-     * @default true
-     */
-    closeOnSelect?: boolean;
-    /**
-     * Whether to close the accordion when clicking outside.
-     * @default true
-     */
-    closeOnClickOutside?: boolean;
-    /**
-     * Optional action to render at the bottom of the options list (e.g. "Add new" button).
-     */
-    action?: ReactNode;
-    /**
-     * Optional label to display on the header (e.g. a Tag).
-     */
-    label?: ReactNode;
-    /**
-     * Optional overrides for nested components.
-     */
-    overrides?: {
-        root?: ComponentPropsWithoutRef<'div'>;
-        header?: ComponentPropsWithoutRef<'div'>;
-        dropdown?: ComponentPropsWithoutRef<'div'>;
-        dropdownContent?: ComponentPropsWithoutRef<'div'>;
-        option?: ComponentPropsWithoutRef<'button'>;
-    };
-};
-
-/**
- * An AccordionSelect component. Displays the selected option in a card header that expands to reveal all options.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { AccordionSelect } from 'paris/accordionselect';
- * ```
- * @constructor
- */
-export const AccordionSelect: FC<AccordionSelectProps> = ({
-    options,
-    value,
-    defaultValue,
-    onChange,
-    renderSelected,
-    renderOption,
-    placeholder = 'Select an option',
-    isOpen: controlledOpen,
-    onOpenChange,
-    closeOnSelect = true,
-    closeOnClickOutside = true,
-    action,
-    label,
-    overrides,
-}) => {
-    const [open, setOpen] = useControllableState({
-        value: controlledOpen,
-        defaultValue: false,
-        onChange: onOpenChange,
-    });
-    const rootRef = useRef<HTMLDivElement>(null);
-
-    const [resolvedValue, setResolvedValue] = useControllableState<string | null>({
-        value,
-        defaultValue,
-        onChange: (id) => {
-            const option = options.find((o) => o.id === id);
-            if (option) onChange?.(option);
-        },
-    });
-
-    const selectedOption = options.find((o) => o.id === resolvedValue);
-
-    useEffect(() => {
-        if (!closeOnClickOutside || !open) {
-            return () => {};
-        }
-
-        const handleClickOutside = (e: MouseEvent) => {
-            if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
-                setOpen(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [closeOnClickOutside, open, setOpen]);
-
-    let headerContent: ReactNode = placeholder;
-    if (selectedOption) {
-        headerContent = renderSelected ? renderSelected(selectedOption) : selectedOption.node;
-    }
-
-    return (
-        <div
-            ref={rootRef}
-            {...overrides?.root}
-            className={clsx(styles.root, open && styles.open, overrides?.root?.className)}
-        >
-            <div
-                {...overrides?.header}
-                className={clsx(styles.header, open && styles.open, overrides?.header?.className)}
-                onClick={() => setOpen(!open)}
-                onKeyDown={(e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        setOpen(!open);
-                    }
-                }}
-                role="button"
-                tabIndex={0}
-            >
-                <div className={styles.headerContent}>
-                    <TextWhenString kind="paragraphSmall" weight="medium">
-                        {headerContent}
-                    </TextWhenString>
-                </div>
-                <div className={styles.headerEnd}>
-                    {label}
-                    <Icon icon={ChevronRight} size={16} className={clsx(styles.chevron, open && styles.open)} />
-                </div>
-            </div>
-
-            {/*
-             * Collapse animation uses the CSS grid-rows trick (`1fr` → `0fr`) instead
-             * of animating `height: auto`. JS-driven height-auto animations (e.g.
-             * framer-motion) flash an intermediate layout state on open/close that
-             * causes scrollable ancestors to clamp `scrollTop` to 0 in the first
-             * paint frame — visible as an instant scroll snap before the animation
-             * starts. The grid-rows approach keeps the layout stable across the
-             * entire transition.
-             */}
-            <div
-                {...overrides?.dropdown}
-                aria-hidden={!open}
-                className={clsx(styles.dropdown, open && styles.open, overrides?.dropdown?.className)}
-            >
-                <div
-                    {...overrides?.dropdownContent}
-                    className={clsx(styles.dropdownContent, overrides?.dropdownContent?.className)}
-                >
-                    {options.map((option) => {
-                        const isOptionSelected = option.id === resolvedValue;
-                        return (
-                            <button
-                                key={option.id}
-                                type="button"
-                                disabled={option.disabled || !open}
-                                tabIndex={open ? undefined : -1}
-                                data-selected={isOptionSelected}
-                                {...overrides?.option}
-                                className={clsx(styles.option, overrides?.option?.className)}
-                                onClick={() => {
-                                    setResolvedValue(option.id);
-                                    if (closeOnSelect) setOpen(false);
-                                }}
-                            >
-                                <div className={styles.optionContent}>
-                                    {renderOption ? (
-                                        renderOption(option, isOptionSelected)
-                                    ) : (
-                                        <TextWhenString kind="paragraphXSmall" weight="medium">
-                                            {option.node}
-                                        </TextWhenString>
-                                    )}
-                                </div>
-                                {isOptionSelected && <Icon icon={Check} size={13} className={styles.check} />}
-                            </button>
-                        );
-                    })}
-                    {action}
-                </div>
-            </div>
-        </div>
-    );
-};

package/src/stories/avatar/Avatar.module.scss

@@ -1,7 +0,0 @@
-.content {
-    border-radius: 100%;
-    aspect-ratio: 1;
-    border: 1px solid var(--frame-color);
-    overflow: clip;
-    box-shadow: var(--pte-new-lighting-subtlePopup);
-}

package/src/stories/avatar/Avatar.stories.ts

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { createElement } from 'react';
-import { Avatar } from './Avatar';
-
-const meta: Meta<typeof Avatar> = {
-    title: 'Content/Avatar',
-    component: Avatar,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Avatar>;
-
-export const Default: Story = {
-    args: {
-        width: '128px',
-        children: createElement('img', {
-            src: 'https://swift.slingshot.fm/sling/static/Billie-Eilish.jpg',
-            alt: 'Avatar',
-        }),
-    },
-};

package/src/stories/avatar/Avatar.test.tsx

@@ -1,77 +0,0 @@
-import { render, screen } from '../../test/render';
-import { Avatar } from './Avatar';
-
-describe('Avatar', () => {
-    it('renders children', () => {
-        render(
-            <Avatar>
-                <img src="/photo.jpg" alt="User" />
-            </Avatar>,
-        );
-        expect(screen.getByAltText('User')).toBeInTheDocument();
-    });
-
-    it('renders text children (initials)', () => {
-        render(<Avatar>AB</Avatar>);
-        expect(screen.getByText('AB')).toBeInTheDocument();
-    });
-
-    it('applies content class', () => {
-        const { container } = render(<Avatar>AB</Avatar>);
-        expect(container.firstElementChild).toHaveClass('content');
-    });
-
-    it('forwards className', () => {
-        const { container } = render(<Avatar className="extra">AB</Avatar>);
-        expect(container.firstElementChild).toHaveClass('content', 'extra');
-    });
-
-    it('sets fit-content width by default', () => {
-        const { container } = render(<Avatar>AB</Avatar>);
-        expect(container.firstElementChild).toHaveStyle({ width: 'fit-content' });
-    });
-
-    it('sets numeric width in pixels', () => {
-        const { container } = render(<Avatar width={48}>AB</Avatar>);
-        expect(container.firstElementChild).toHaveStyle({ width: '48px' });
-    });
-
-    it('sets string width as-is', () => {
-        const { container } = render(<Avatar width="3rem">AB</Avatar>);
-        expect(container.firstElementChild).toHaveStyle({ width: '3rem' });
-    });
-
-    it('applies frame color as CSS variable', () => {
-        const { container } = render(<Avatar frameColor="red">AB</Avatar>);
-        const el = container.firstElementChild as HTMLElement;
-        expect(el.style.getPropertyValue('--frame-color')).toBe('red');
-    });
-
-    it('applies default frame color CSS variable', () => {
-        const { container } = render(<Avatar>AB</Avatar>);
-        const el = container.firstElementChild as HTMLElement;
-        // Default is pvar('new.colors.borderMedium') which produces a var() string
-        expect(el.style.getPropertyValue('--frame-color')).toBeTruthy();
-    });
-
-    it('forwards HTML div attributes', () => {
-        render(
-            <Avatar data-testid="avatar" id="avatar-1">
-                AB
-            </Avatar>,
-        );
-        const avatar = screen.getByTestId('avatar');
-        expect(avatar).toHaveAttribute('id', 'avatar-1');
-    });
-
-    it('merges custom style with computed styles', () => {
-        const { container } = render(
-            <Avatar style={{ border: '2px solid blue' }} width={64}>
-                AB
-            </Avatar>,
-        );
-        const el = container.firstElementChild as HTMLElement;
-        expect(el.style.border).toBe('2px solid blue');
-        expect(el.style.width).toBe('64px');
-    });
-});

package/src/stories/avatar/Avatar.tsx

@@ -1,55 +0,0 @@
-import type { CSSLength } from '@ssh/csstypes';
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, CSSProperties, FC, ReactNode } from 'react';
-import { useMemo } from 'react';
-import { pvar } from '../theme';
-import styles from './Avatar.module.scss';
-
-export type AvatarProps = {
-    frameColor?: string;
-    /** The width of the Avatar, as a CSS length string or a number. If a number is provided, the assumed unit is pixels. */
-    width?: CSSLength | number;
-    /** The contents of the Avatar, usually an image element. */
-    children?: ReactNode;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
-
-/**
- * An Avatar component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Avatar } from 'paris/avatar';
- * ```
- * @constructor
- */
-export const Avatar: FC<AvatarProps> = ({
-    frameColor = pvar('new.colors.borderMedium'),
-    width = 'fit-content',
-    children,
-    className,
-    style,
-    ...props
-}) => {
-    const widthMemoized = useMemo(
-        () => (typeof width === 'number' ? `${width}px` : width) as CSSProperties['width'],
-        [width],
-    );
-    return (
-        <div
-            {...props}
-            style={
-                {
-                    width: widthMemoized,
-                    '--frame-color': frameColor,
-                    ...style,
-                } as CSSProperties
-            }
-            className={clsx(styles.content, className)}
-        >
-            {children}
-        </div>
-    );
-};

package/src/stories/button/Button.module.scss

@@ -1,167 +0,0 @@
-/*
- * Main styles
- */
-.button {
-    user-select: var(--pte-utils-defaultUserSelect);
-
-    border: 1px solid;
-    position: relative;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-
-    transition: var(--pte-animations-interaction);
-
-    & > span {
-        margin-block-end: var(--pte-typography-verticalMetricsAdjust);
-    }
-
-    &:hover {
-        cursor: default;
-        background-color: var(--pte-new-colors-buttonFillHover);
-    }
-
-    &[aria-disabled=false]:active {
-        opacity: 0.9;
-        transform: scale(0.98);
-    }
-
-    &[aria-disabled=true] {
-        pointer-events: none;
-    }
-}
-
-
-/*
- * KIND
- */
-
-.primary {
-    color: var(--pte-new-colors-contentInversePrimary);
-    background-color: var(--pte-new-colors-buttonFill);
-    border-color: var(--pte-new-colors-buttonFill);
-
-    &:hover {
-        border-color: var(--pte-new-colors-buttonFillHover);
-    }
-
-    &[aria-disabled=true] {
-        color: var(--pte-new-colors-contentDisabled);
-        background-color: var(--pte-new-colors-buttonFillDisabled);
-        border-color: var(--pte-new-colors-buttonFillDisabled);
-    }
-}
-
-.secondary {
-    color: var(--pte-new-colors-contentPrimary);
-    background-color: transparent;
-    border-color: var(--pte-new-colors-buttonBorder);
-
-    &:hover {
-        background-color: var(--pte-new-colors-overlayMedium);
-    }
-
-    &[aria-disabled=true] {
-        color: var(--pte-new-colors-contentDisabled);
-        border-color: var(--pte-new-colors-buttonBorderDisabled);
-    }
-}
-
-.tertiary {
-    color: var(--pte-new-colors-contentPrimary);
-    background-color: transparent;
-    border-color: transparent;
-
-    &:hover {
-        background-color: var(--pte-new-colors-overlayMedium);
-    }
-
-    &[aria-disabled=true] {
-        color: var(--pte-new-colors-contentDisabled);
-    }
-}
-
-
-/*
- * SIZE
- */
-
-.large {
-    height: 32px;
-    padding: 8px 15px;
-}
-
-.medium {
-    height: 28px;
-    padding: 6px 14px;
-}
-
-.small {
-    height: 20px;
-    padding: 4px 15px;
-}
-
-.xs {
-    height: 16px;
-    padding: 2px 8px;
-}
-
-
-/*
- * SHAPE
- */
-
-.pill {
-    border-radius: var(--pte-borders-radius-pill);
-}
-
-.circle {
-    border-radius: var(--pte-borders-radius-circle);
-}
-
-.square, .rectangle {
-    &.sharp {
-        border-radius: var(--pte-borders-radius-rectangle);
-    }
-
-    &.rounded {
-        border-radius: var(--pte-borders-radius-rounded);
-
-        &.small {
-            border-radius: var(--pte-borders-radius-roundedSmall);
-        }
-    }
-
-    &.roundedXL {
-        border-radius: var(--pte-borders-radius-roundedLarge);
-
-        &.small {
-            border-radius: var(--pte-borders-radius-rounded);
-        }
-    }
-}
-
-.circle, .square {
-    &.large {
-        width: 32px;
-        padding: 8px;
-    }
-
-    &.medium {
-        width: 28px;
-        padding: 4px;
-    }
-
-    &.small {
-        width: 20px;
-        padding: 4px;
-    }
-
-    &.xs {
-        width: 16px;
-        padding: 2px;
-    }
-}

package/src/stories/button/Button.stories.ts

@@ -1,93 +0,0 @@
-import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { createElement } from 'react';
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-    title: 'Inputs/Button',
-    component: Button,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-/**
- * By default, the Button component renders a primary large pill.
- *
- * **Primary** buttons are intended to represent primary or leading actions, such as "Submit" or "Save".
- */
-export const Primary: Story = {
-    args: {
-        children: 'Button',
-    },
-};
-
-/**
- * **Secondary** buttons are intended to represent secondary or trailing actions, such as "Cancel" or "Delete".
- */
-export const Secondary: Story = {
-    args: {
-        children: 'Button',
-        kind: 'secondary',
-    },
-};
-
-/**
- * **Tertiary** buttons offer a visual alternative for non-primary actions.
- */
-export const Tertiary: Story = {
-    args: {
-        children: 'Button',
-        kind: 'tertiary',
-    },
-};
-
-/**
- * Enhancers can be used to add icons at the start (left) or end (right) of a button.
- */
-export const WithEnhancer: Story = {
-    args: {
-        children: 'Button',
-        kind: 'primary',
-        startEnhancer: ({ size }) =>
-            createElement(FontAwesomeIcon, {
-                icon: faPlus,
-                width: `${size}px`,
-            }),
-    },
-};
-
-export const Circle: Story = {
-    args: {
-        children: 'Button',
-        shape: 'circle',
-        kind: 'tertiary',
-        startEnhancer: ({ size }) =>
-            createElement(FontAwesomeIcon, {
-                icon: faPlus,
-                width: `${size}px`,
-            }),
-    },
-};
-
-export const Rounded: Story = {
-    args: {
-        children: 'Button',
-        shape: 'rectangle',
-        corners: 'rounded',
-        startEnhancer: ({ size }) =>
-            createElement(FontAwesomeIcon, {
-                icon: faPlus,
-                width: `${size}px`,
-            }),
-    },
-};
-
-export const Notification: Story = {
-    args: {
-        children: 'Button',
-        displayNotificationDot: true,
-    },
-};