paris 0.23.1 → 0.24.0

package/src/stories/select/Select.tsx

@@ -1,398 +0,0 @@
-'use client';
-
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Radio, RadioGroup } from '@headlessui/react';
-import { clsx } from 'clsx';
-import { motion } from 'framer-motion';
-import type { ComponentPropsWithoutRef, CSSProperties, ForwardedRef, ReactNode } from 'react';
-import { forwardRef, useId } from 'react';
-import { OpenChangeEffect } from '../../helpers/OpenChangeEffect';
-import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
-import { useControllableState } from '../../helpers/useControllableState';
-import { Field } from '../field';
-import { Check, Icon } from '../icon';
-import type { InputProps } from '../input';
-import inputStyles from '../input/Input.module.scss';
-import type { TextProps } from '../text';
-import { Text } from '../text';
-import { pget, theme } from '../theme';
-import { TextWhenString } from '../utility';
-import styles from './Select.module.scss';
-
-export type Option<T = Record<string, any>> = {
-    id: string;
-    node: ReactNode;
-    disabled?: boolean;
-    metadata?: T;
-};
-export type CommonSelectProps<T = Record<string, any>> = {
-    /**
-     * The  {@link Option}s to render in the select box.
-     *
-     * Each option should have an id (`string`) and node ({@link ReactNode}) property at minimum. You can also pass in any other metadata through the `metadata` attribute.
-     *
-     * For type safety, you can pass in a type parameter to `SelectProps` component. This will be used as the type for the `metadata` property of each option.
-     */
-    options: Option<T>[];
-    /**
-     * The size of the options dropdown, in pixels. Only applicable to kind="listbox".
-     */
-    maxHeight?: number;
-    /**
-     * Adds a bottom border to the dropdown options. Only applicable to kind="listbox".
-     * @default false
-     */
-    hasOptionBorder?: boolean;
-    /**
-     * Controls the height of the segment control. Only applicable to kind="segmented".
-     * @default compact
-     */
-    segmentedHeight?: 'compact' | 'tall';
-    /**
-     * Called when the listbox dropdown opens or closes. Only applicable to kind="listbox".
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
-     */
-    overrides?: {
-        container?: ComponentPropsWithoutRef<'div'>;
-        selectInput?: ComponentPropsWithoutRef<'button'>;
-        optionsContainer?: ComponentPropsWithoutRef<'div'>;
-        option?: ComponentPropsWithoutRef<'div'>;
-        label?: TextProps<'label'>;
-        description?: TextProps<'p'>;
-        startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
-        endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
-    };
-} & Omit<InputProps, 'type' | 'overrides'>;
-
-export type SingleSelectProps<T = Record<string, any>> = {
-    /**
-     * The option ID to render as selected in the select box.
-     *
-     * This should exactly match the option IDs passed in the `options` prop. If `null`, no option will be selected.
-     */
-    value?: Option<T>['id'] | null;
-    /** The initial value for uncontrolled mode. If `value` is provided, this is ignored. */
-    defaultValue?: Option<T>['id'] | null;
-    /**
-     * The interaction handler for the Select.
-     */
-    onChange?: (value: Option<T>['id'] | null) => void | Promise<void>;
-    /**
-     * The visual variant of the Select. `listbox` will render as a dropdown menu, `radio` will render as a radio group, `card` will render as selectable cards, and `segmented` will render as a segmented control.
-     * @default listbox
-     */
-    kind?: 'listbox' | 'radio' | 'card' | 'segmented';
-    multiple?: false;
-    multipleItemsName?: never;
-} & CommonSelectProps;
-
-export type MultiSelectProps<T = Record<string, any>> = {
-    /**
-     * Controls the text of the Multiselect button when multiple items selected, such as "All ___" or "2 ___"
-     * @default items
-     */
-    multipleItemsName?: string;
-    /**
-     * The visual variant of the Select. For multiselect, only `listbox` is supported.
-     * @default listbox
-     */
-    kind?: 'listbox';
-    /**
-     * Converts the single select into a multiselect.
-     */
-    multiple: true;
-    /**
-     * For multiselect, should be a string[] that matches the option IDs passed in the `options` prop. If `null`, no option will be selected.
-     */
-    value?: Option<T>['id'][] | null;
-    /** The initial value for uncontrolled multi-select. If `value` is provided, this is ignored. */
-    defaultValue?: Option<T>['id'][] | null;
-    /**
-     * The interaction handler for the Select.
-     */
-    onChange?: (value: Option<T>['id'][] | null) => void | Promise<void>;
-} & CommonSelectProps;
-
-type SelectProps<T = Record<string, any>> = SingleSelectProps<T> | MultiSelectProps<T>;
-
-/**
- * A Select component is used to render a `select` box.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Select } from 'paris/select';
- * ```
- * @constructor
- */
-export const Select = forwardRef(
-    <T = Record<string, any>>(
-        {
-            options,
-            value,
-            defaultValue,
-            onChange,
-            label,
-            status,
-            hideLabel,
-            description,
-            hideDescription,
-            descriptionPosition,
-            placeholder,
-            startEnhancer,
-            endEnhancer,
-            disabled,
-            kind = 'listbox',
-            maxHeight = 320,
-            hasOptionBorder = false,
-            multiple = false,
-            multipleItemsName,
-            segmentedHeight = 'compact',
-            onOpenChange,
-            overrides,
-        }: SelectProps<T>,
-        ref: ForwardedRef<any>,
-    ) => {
-        const inputID = useId();
-        const multiItems = multipleItemsName || 'items';
-
-        const [resolvedValue, setResolvedValue] = useControllableState<string | string[] | null>({
-            value: value as string | string[] | null | undefined,
-            defaultValue: defaultValue ?? (multiple ? ([] as string[]) : null),
-            onChange: onChange as ((value: string | string[] | null) => void) | undefined,
-        });
-
-        // TypeScript can't track discriminated union correlation through destructuring and JSX conditionals.
-        // For Listbox: supports both single and multi via overloads, needs explicit union types
-        // For RadioGroup: only supports single-select, needs narrowed types
-        const listboxValue = resolvedValue as string | string[] | null | undefined;
-        const listboxOnChange = setResolvedValue as (value: string | string[] | null) => void;
-        const singleValue = resolvedValue as string | null | undefined;
-        const singleOnChange = setResolvedValue as (value: string | null) => void;
-        const buttonText = () => {
-            if (!resolvedValue || (resolvedValue as string | string[]).length === 0) {
-                return placeholder || 'Select an option';
-            }
-            if (!multiple) {
-                return options?.find((o) => o.id === resolvedValue)?.node;
-            }
-            if (resolvedValue && (resolvedValue as string[]).length === 1) {
-                return options?.find((o) => o.id === (resolvedValue as string[])[0])?.node;
-            }
-            if ((resolvedValue as string[]).length === options.length) {
-                return `All ${multiItems}`;
-            }
-            return `${(resolvedValue as string[]).length} ${multiItems}`;
-        };
-        return (
-            <Field
-                htmlFor={inputID}
-                label={label}
-                hideLabel={hideLabel}
-                description={description}
-                hideDescription={hideDescription}
-                descriptionPosition={descriptionPosition}
-                disabled={disabled}
-                overrides={{
-                    container: overrides?.container,
-                    label: overrides?.label,
-                    description: overrides?.description,
-                }}
-            >
-                {kind === 'listbox' && (
-                    <Listbox as="div" ref={ref} value={listboxValue} onChange={listboxOnChange} multiple={multiple}>
-                        {({ open }) => (
-                            <>
-                                <OpenChangeEffect open={open} onOpenChange={onOpenChange} />
-                                <ListboxButton
-                                    id={inputID}
-                                    {...overrides?.selectInput}
-                                    aria-disabled={disabled}
-                                    data-status={disabled ? 'disabled' : status || 'default'}
-                                    className={clsx(
-                                        overrides?.selectInput?.className,
-                                        inputStyles.inputContainer,
-                                        styles.listboxButton,
-                                        styles.field,
-                                    )}
-                                >
-                                    {!!startEnhancer && (
-                                        <div
-                                            {...overrides?.startEnhancerContainer}
-                                            className={clsx(
-                                                inputStyles.enhancer,
-                                                overrides?.startEnhancerContainer?.className,
-                                            )}
-                                            data-status={disabled ? 'disabled' : status || 'default'}
-                                        >
-                                            {!!startEnhancer && (
-                                                <MemoizedEnhancer
-                                                    enhancer={startEnhancer}
-                                                    size={parseInt(
-                                                        pget('typography.styles.paragraphSmall.fontSize') ||
-                                                            theme.typography.styles.paragraphSmall.fontSize,
-                                                        10,
-                                                    )}
-                                                />
-                                            )}
-                                        </div>
-                                    )}
-                                    {buttonText()}
-                                    {endEnhancer ? (
-                                        <div
-                                            {...overrides?.endEnhancerContainer}
-                                            className={clsx(
-                                                inputStyles.enhancer,
-                                                overrides?.endEnhancerContainer?.className,
-                                            )}
-                                            data-status={disabled ? 'disabled' : status || 'default'}
-                                        >
-                                            {!!endEnhancer && (
-                                                <MemoizedEnhancer
-                                                    enhancer={endEnhancer}
-                                                    size={parseInt(
-                                                        pget('typography.styles.paragraphSmall.fontSize') ||
-                                                            theme.typography.styles.paragraphSmall.fontSize,
-                                                        10,
-                                                    )}
-                                                />
-                                            )}
-                                        </div>
-                                    ) : (
-                                        <FontAwesomeIcon
-                                            className={clsx(inputStyles.enhancer, styles.chevron)}
-                                            data-status={disabled ? 'disabled' : status || 'default'}
-                                            width="10px"
-                                            icon={faChevronDown}
-                                        />
-                                    )}
-                                </ListboxButton>
-                                <ListboxOptions
-                                    anchor="bottom start"
-                                    transition
-                                    className={clsx(overrides?.optionsContainer, styles.options)}
-                                    style={
-                                        {
-                                            '--options-maxHeight': `${maxHeight}px`,
-                                        } as CSSProperties
-                                    }
-                                >
-                                    {(options || []).map((option) => (
-                                        <ListboxOption
-                                            key={option.id}
-                                            value={option.id}
-                                            className={clsx(
-                                                overrides?.option,
-                                                styles.option,
-                                                hasOptionBorder && styles.optionBorder,
-                                            )}
-                                            disabled={option.disabled || false}
-                                        >
-                                            {typeof option.node === 'string' ? (
-                                                <Text as="span" kind="paragraphSmall">
-                                                    {option.node}
-                                                </Text>
-                                            ) : (
-                                                option.node
-                                            )}
-                                            <Icon icon={Check} size={12} className={styles.check} />
-                                        </ListboxOption>
-                                    ))}
-                                </ListboxOptions>
-                            </>
-                        )}
-                    </Listbox>
-                )}
-                {kind === 'radio' && (
-                    <RadioGroup
-                        ref={ref}
-                        as="div"
-                        className={styles.radioContainer}
-                        value={singleValue}
-                        onChange={singleOnChange}
-                    >
-                        {options.map((option) => (
-                            <Radio
-                                as="div"
-                                className={clsx(styles.radioOption)}
-                                key={option.id}
-                                value={option.id}
-                                disabled={option.disabled || false}
-                                data-status={disabled ? 'disabled' : status || 'default'}
-                            >
-                                <div className={styles.radioCircle} />
-                                <TextWhenString kind="paragraphXSmall">{option.node}</TextWhenString>
-                            </Radio>
-                        ))}
-                    </RadioGroup>
-                )}
-                {kind === 'card' && (
-                    <RadioGroup
-                        ref={ref}
-                        as="div"
-                        className={styles.cardContainer}
-                        value={singleValue}
-                        onChange={singleOnChange}
-                    >
-                        {options.map((option) => (
-                            <Radio
-                                as="div"
-                                className={clsx(styles.cardOption)}
-                                key={option.id}
-                                value={option.id}
-                                disabled={option.disabled || false}
-                                data-status={disabled ? 'disabled' : status || 'default'}
-                            >
-                                <div
-                                    className={clsx(styles.cardSurface, typeof option.node === 'string' && styles.text)}
-                                >
-                                    <TextWhenString kind="paragraphSmall">{option.node}</TextWhenString>
-                                </div>
-                            </Radio>
-                        ))}
-                    </RadioGroup>
-                )}
-                {kind === 'segmented' && (
-                    <RadioGroup
-                        ref={ref}
-                        as="div"
-                        className={styles.segmentedContainer}
-                        value={singleValue ?? options[0].id}
-                        onChange={singleOnChange}
-                    >
-                        {options.map((option) => (
-                            <Radio
-                                as="div"
-                                className={clsx(styles.segmentedOption, styles[segmentedHeight])}
-                                key={option.id}
-                                value={option.id}
-                                disabled={option.disabled || false}
-                                data-status={disabled ? 'disabled' : status || 'default'}
-                            >
-                                {(option.id === resolvedValue || (!resolvedValue && option.id === options[0].id)) && (
-                                    <motion.div
-                                        className={styles.segmentedBackground}
-                                        layoutId={`${inputID}-segmented-selected`}
-                                        transition={{
-                                            ease: [0.42, 0.0, 0.58, 1.0],
-                                            duration: 0.25,
-                                        }}
-                                    />
-                                )}
-                                <TextWhenString kind="paragraphXSmall" weight="medium" className={styles.segmentedText}>
-                                    {option.node}
-                                </TextWhenString>
-                            </Radio>
-                        ))}
-                    </RadioGroup>
-                )}
-            </Field>
-        );
-    },
-);

package/src/stories/styledlink/StyledLink.module.scss

@@ -1,11 +0,0 @@
-.link {
-    text-decoration: none;
-    border-bottom: 1px solid var(--pte-new-colors-borderMedium);
-    cursor: pointer;
-    font-weight: var(--pte-typography-fontWeights-medium);
-    transition: border-bottom-color var(--pte-animations-interaction);
-
-    &:hover {
-        border-bottom: 1px solid var(--pte-new-colors-contentPrimary);
-    }
-}

package/src/stories/styledlink/StyledLink.stories.ts

@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { StyledLink } from './StyledLink';
-
-const meta: Meta<typeof StyledLink> = {
-    title: 'Content/StyledLink',
-    component: StyledLink,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof StyledLink>;
-
-export const Default: Story = {
-    args: {
-        href: 'https://slingshot.fm',
-        target: '_blank',
-        children: 'Hello world! This is a styled link.',
-    },
-};
-
-export const AsButton: Story = {
-    args: {
-        as: 'button',
-        // eslint-disable-next-line no-alert
-        onClick: () => alert('Hello world!'),
-        children: 'Hello world! This is a StyledLink rendered as a button.',
-    },
-};

package/src/stories/styledlink/StyledLink.test.tsx

@@ -1,59 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '../../test/render';
-import { StyledLink } from './StyledLink';
-
-describe('StyledLink', () => {
-    it('renders children text', () => {
-        render(<StyledLink>Click me</StyledLink>);
-        expect(screen.getByText('Click me')).toBeInTheDocument();
-    });
-
-    it('renders as an anchor element by default', () => {
-        render(<StyledLink>Link</StyledLink>);
-        const el = screen.getByText('Link');
-        expect(el.tagName).toBe('A');
-    });
-
-    it('renders with href attribute', () => {
-        render(<StyledLink href="https://example.com">Example</StyledLink>);
-        const el = screen.getByText('Example');
-        expect(el.getAttribute('href')).toBe('https://example.com');
-    });
-
-    it('renders as a different element via the as prop', () => {
-        render(<StyledLink as="button">Button link</StyledLink>);
-        const el = screen.getByText('Button link');
-        expect(el.tagName).toBe('BUTTON');
-    });
-
-    it('applies the link style class', () => {
-        render(<StyledLink>Styled</StyledLink>);
-        const el = screen.getByText('Styled');
-        expect(el.className).toContain('link');
-    });
-
-    it('forwards className prop and merges with default class', () => {
-        render(<StyledLink className="custom-link">Custom</StyledLink>);
-        const el = screen.getByText('Custom');
-        expect(el.className).toContain('custom-link');
-        expect(el.className).toContain('link');
-    });
-
-    it('forwards additional HTML props', () => {
-        render(
-            <StyledLink target="_blank" rel="noopener noreferrer" data-testid="styled-link">
-                External
-            </StyledLink>,
-        );
-        const el = screen.getByTestId('styled-link');
-        expect(el.getAttribute('target')).toBe('_blank');
-        expect(el.getAttribute('rel')).toBe('noopener noreferrer');
-    });
-
-    it('renders without children', () => {
-        const { container } = render(<StyledLink href="/empty" />);
-        const anchor = container.querySelector('a');
-        expect(anchor).toBeInTheDocument();
-        expect(anchor?.getAttribute('href')).toBe('/empty');
-    });
-});

package/src/stories/styledlink/StyledLink.tsx

@@ -1,33 +0,0 @@
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, ElementType, FC, ReactNode } from 'react';
-import { createElement } from 'react';
-import styles from './StyledLink.module.scss';
-
-export type StyledLinkProps<T extends ElementType = 'a'> = {
-    /** The element to render the StyledLink as. */
-    as?: T;
-    /** The contents of the StyledLink. */
-    children?: ReactNode;
-} & ComponentPropsWithoutRef<T>;
-
-/**
- * A StyledLink component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { StyledLink } from 'paris/styledlink';
- * ```
- * @constructor
- */
-export const StyledLink: FC<StyledLinkProps<ElementType>> = ({ as = 'a', children, className, ...props }) =>
-    createElement(
-        as,
-        {
-            ...props,
-            className: clsx(className, styles.link),
-        },
-        children,
-    );

package/src/stories/table/Table.module.scss

@@ -1,74 +0,0 @@
-.table {
-    width: 100%;
-
-    &, & * {
-        cursor: default;
-    }
-
-    thead {
-        text-align: left;
-        user-select: none;
-    }
-
-    th {
-        color: var(--pte-new-colors-contentSecondary);
-        padding: 10px 12px;
-    }
-
-    td {
-        padding: 8px 12px;
-    }
-
-    tr {
-        border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
-    }
-
-    .tableHeader {
-        border-top: 1px solid var(--pte-new-colors-borderMedium);
-        border-bottom: 1px solid var(--pte-new-colors-borderMedium);
-    }
-
-    tr.empty {
-        border-bottom: none;
-
-        td {
-            padding: 20px 0 0 0;
-        }
-    }
-
-    tbody tr.clickable {
-        transition: background-color var(--pte-animations-interaction);
-
-        &:hover {
-            background-color: var(--pte-new-colors-overlayMedium);
-        }
-
-        &, & * {
-            cursor: pointer;
-        }
-    }
-}
-
-@container (max-width: 480px) {
-    .sm {
-        display: none;
-    }
-}
-
-@container (max-width: 640px) {
-    .md {
-        display: none;
-    }
-}
-
-@container (max-width: 768px) {
-    .lg {
-        display: none;
-    }
-}
-
-@container (max-width: 1280px) {
-    .xl {
-        display: none;
-    }
-}

package/src/stories/table/Table.stories.ts

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import type { TableProps } from './Table';
-import { Table } from './Table';
-
-const meta: Meta<typeof Table> = {
-    title: 'Content/Table',
-    component: Table,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Table>;
-
-export const Default: Story = {
-    // @ts-expect-error
-    args: {
-        columns: [
-            {
-                title: 'Name',
-            },
-            {
-                title: 'Role',
-                hideBelow: 'sm',
-            },
-            {
-                title: 'Email',
-            },
-        ],
-        rows: [
-            {
-                id: 1,
-                name: 'Mia Dolan',
-                type: 'Actress',
-                email: 'mia@slingshot.fm',
-            },
-            {
-                id: 2,
-                name: 'Sebastian Wilder',
-                type: 'Artist',
-                email: 'seb@slingshot.fm',
-            },
-            {
-                id: 3,
-                name: 'Amy Brandt',
-                type: 'Casting',
-                email: 'amy@slingshot.fm',
-            },
-        ],
-        rowRenderFn: (row) => ({
-            key: `${row.id}`,
-            cells: [row.name, row.type, row.email],
-        }),
-        onRowClick: (row) => console.log('Row clicked', row),
-    } satisfies TableProps<
-        {
-            id: number;
-            name: string;
-            type: string;
-            email: string;
-        }[]
-    >,
-};