paris 0.23.1 → 0.24.0

package/src/stories/table/Table.test.tsx

@@ -1,156 +0,0 @@
-import { render, screen } from '../../test/render';
-import { Table } from './Table';
-
-const columns = [{ title: 'Name' }, { title: 'Age' }, { title: 'Email' }];
-
-const rows = [
-    { name: 'Alice', age: 30, email: 'alice@example.com' },
-    { name: 'Bob', age: 25, email: 'bob@example.com' },
-    { name: 'Charlie', age: 35, email: 'charlie@example.com' },
-];
-
-describe('Table', () => {
-    it('renders column headers', () => {
-        render(<Table columns={columns} rows={rows} />);
-        expect(screen.getByText('Name')).toBeInTheDocument();
-        expect(screen.getByText('Age')).toBeInTheDocument();
-        expect(screen.getByText('Email')).toBeInTheDocument();
-    });
-
-    it('renders row data using Object.values by default', () => {
-        render(<Table columns={columns} rows={rows} />);
-        expect(screen.getByText('Alice')).toBeInTheDocument();
-        expect(screen.getByText('30')).toBeInTheDocument();
-        expect(screen.getByText('alice@example.com')).toBeInTheDocument();
-    });
-
-    it('renders all rows', () => {
-        render(<Table columns={columns} rows={rows} />);
-        expect(screen.getByText('Alice')).toBeInTheDocument();
-        expect(screen.getByText('Bob')).toBeInTheDocument();
-        expect(screen.getByText('Charlie')).toBeInTheDocument();
-    });
-
-    it('uses custom rowRenderFn', () => {
-        render(
-            <Table
-                columns={[{ title: 'Full Info' }]}
-                rows={rows}
-                rowRenderFn={(row) => ({
-                    key: row.name,
-                    cells: [`${row.name} (${row.age})`],
-                })}
-            />,
-        );
-        expect(screen.getByText('Alice (30)')).toBeInTheDocument();
-        expect(screen.getByText('Bob (25)')).toBeInTheDocument();
-    });
-
-    it('renders the table element', () => {
-        const { container } = render(<Table columns={columns} rows={rows} />);
-        expect(container.querySelector('table')).toBeInTheDocument();
-    });
-
-    it('renders thead and tbody', () => {
-        const { container } = render(<Table columns={columns} rows={rows} />);
-        expect(container.querySelector('thead')).toBeInTheDocument();
-        expect(container.querySelector('tbody')).toBeInTheDocument();
-    });
-
-    it('calls onRowClick when a row is clicked', async () => {
-        const onRowClick = vi.fn();
-        const { user } = render(<Table columns={columns} rows={rows} onRowClick={onRowClick} />);
-        const aliceCell = screen.getByText('Alice');
-        await user.click(aliceCell.closest('tr')!);
-        expect(onRowClick).toHaveBeenCalledWith(rows[0]);
-    });
-
-    it('does not call onRowClick when clickableRows is false', async () => {
-        const onRowClick = vi.fn();
-        const { user } = render(<Table columns={columns} rows={rows} onRowClick={onRowClick} clickableRows={false} />);
-        const aliceCell = screen.getByText('Alice');
-        await user.click(aliceCell.closest('tr')!);
-        expect(onRowClick).not.toHaveBeenCalled();
-    });
-
-    it('displays empty state when rows are empty', () => {
-        render(<Table columns={columns} rows={[]} emptyState="No data available" />);
-        expect(screen.getByText('No data available')).toBeInTheDocument();
-    });
-
-    it('does not display empty state when there are rows', () => {
-        render(<Table columns={columns} rows={rows} emptyState="No data available" />);
-        expect(screen.queryByText('No data available')).not.toBeInTheDocument();
-    });
-
-    it('applies table className via overrides', () => {
-        const { container } = render(
-            <Table columns={columns} rows={rows} overrides={{ table: { className: 'custom-table' } }} />,
-        );
-        expect(container.querySelector('table')).toHaveClass('custom-table');
-    });
-
-    it('applies thead className via overrides', () => {
-        const { container } = render(
-            <Table columns={columns} rows={rows} overrides={{ thead: { className: 'custom-thead' } }} />,
-        );
-        expect(container.querySelector('thead')).toHaveClass('custom-thead');
-    });
-
-    it('applies tbody className via overrides', () => {
-        const { container } = render(
-            <Table columns={columns} rows={rows} overrides={{ tbody: { className: 'custom-tbody' } }} />,
-        );
-        expect(container.querySelector('tbody')).toHaveClass('custom-tbody');
-    });
-
-    it('applies clickable class to rows when clickableRows is true', () => {
-        render(<Table columns={columns} rows={rows} clickableRows={true} />);
-        const aliceRow = screen.getByText('Alice').closest('tr')!;
-        expect(aliceRow).toHaveClass('clickable');
-    });
-
-    it('does not apply clickable class when clickableRows is false', () => {
-        render(<Table columns={columns} rows={rows} clickableRows={false} />);
-        const aliceRow = screen.getByText('Alice').closest('tr')!;
-        expect(aliceRow).not.toHaveClass('clickable');
-    });
-
-    it('supports keyboard navigation on clickable rows', async () => {
-        const onRowClick = vi.fn();
-        const { user } = render(<Table columns={columns} rows={rows} onRowClick={onRowClick} />);
-        const aliceRow = screen.getByText('Alice').closest('tr')!;
-        aliceRow.focus();
-        await user.keyboard('{Enter}');
-        expect(onRowClick).toHaveBeenCalledWith(rows[0]);
-    });
-
-    it('handles hideBelow column property', () => {
-        const columnsWithHide = [{ title: 'Name' }, { title: 'Age', hideBelow: 'md' as const }, { title: 'Email' }];
-        const { container } = render(<Table columns={columnsWithHide} rows={rows} />);
-        const ageHeader = screen.getByText('Age').closest('th');
-        expect(ageHeader).toHaveClass('md');
-    });
-
-    it('renders empty state with colSpan matching column count', () => {
-        const { container } = render(<Table columns={columns} rows={[]} emptyState="Empty" />);
-        const td = container.querySelector('td[colspan]');
-        expect(td).toHaveAttribute('colspan', String(columns.length));
-    });
-
-    it('renders ReactNode content in cells', () => {
-        const richRows = [{ name: 'Alice', age: 30, email: 'alice@example.com' }];
-        render(
-            <Table
-                columns={columns}
-                rows={richRows}
-                rowRenderFn={(row) => ({
-                    key: row.name,
-                    cells: [<strong key="name">{row.name}</strong>, String(row.age), row.email],
-                })}
-            />,
-        );
-        const strong = screen.getByText('Alice');
-        expect(strong.tagName).toBe('STRONG');
-    });
-});

package/src/stories/table/Table.tsx

@@ -1,182 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { useId, useMemo } from 'react';
-import typography from '../text/Typography.module.css';
-import styles from './Table.module.scss';
-
-export type TableLineData = [NonNullable<ReactNode>, ...ReactNode[]];
-export type RowRenderData = {
-    key: string;
-    cells: TableLineData;
-};
-/**
- * The data for a column in a table.
- */
-export type ColumnData = {
-    /**
-     * The column's header.
-     */
-    title: NonNullable<ReactNode>;
-    /**
-     * The breakpoint at which the column should be hidden. If omitted, the column will always be visible.
-     */
-    hideBelow?: 'sm' | 'md' | 'lg' | 'xl';
-};
-
-export type TableProps<
-    RowData extends Record<string, any>[],
-    // HeaderNodeArray extends TableLineData = TableLineData,
-> = {
-    /**
-     * The table headers. Must include at least one header.
-     */
-    columns: ColumnData[];
-    /**
-     * The table rows, as an array of objects.
-     */
-    rows: RowData;
-    /**
-     * A function that will be called for each row to compute the row's content. If omitted, the row will render the `Object.values` of the row data.
-     *
-     * The function should return an object containing a property named `key` for the row's React key (should be a unique id), and a property named `nodes` containing an array of React nodes to be rendered as cells in the row.
-     * @param row - The data for the row being rendered.
-     * @returns An object containing a property named `key` for the row's React key (should be a unique id), and a property named `cells` containing an array of React nodes to be rendered as cells in the row.
-     * @see RowRenderData
-     */
-    rowRenderFn?: (row: RowData[number]) => RowRenderData;
-    /**
-     * A function that will be called when a row is clicked.
-     * @param row - The data for the row being clicked.
-     */
-    onRowClick?: (row: RowData[number]) => void | Promise<void>;
-    /**
-     * Whether the rows should be clickable.
-     */
-    clickableRows?: boolean;
-
-    /**
-     * The content to display when the table is empty.
-     */
-    emptyState?: ReactNode;
-    /**
-     * Prop overrides for rendered elements.
-     */
-    overrides?: {
-        table?: ComponentPropsWithoutRef<'table'>;
-        thead?: ComponentPropsWithoutRef<'thead'>;
-        tbody?: ComponentPropsWithoutRef<'tbody'>;
-        trHead?: ComponentPropsWithoutRef<'tr'>;
-        th?: ComponentPropsWithoutRef<'th'>;
-        trBody?: ComponentPropsWithoutRef<'tr'>;
-        td?: ComponentPropsWithoutRef<'td'>;
-    };
-};
-
-/**
- * A Table component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Table } from 'paris/table';
- * ```
- * @constructor
- */
-export function Table<RowData extends Record<string, any>[]>({
-    columns,
-    rows,
-    rowRenderFn,
-    onRowClick,
-    clickableRows = true,
-    emptyState,
-    overrides,
-}: TableProps<RowData>) {
-    const id = useId();
-    const rowsRenderData = useMemo(
-        () =>
-            rows.map(
-                rowRenderFn ??
-                    ((row) => ({
-                        key: Object.values(row).join('-'),
-                        cells: Object.values(row),
-                    })),
-            ),
-        [rows, rowRenderFn],
-    );
-
-    const renderedRows = useMemo(
-        () =>
-            rowsRenderData.map(({ key, cells }, index) => (
-                <tr
-                    key={`${id}-row-${key}`}
-                    onClick={() => {
-                        if (clickableRows) onRowClick?.(rows[index]);
-                    }}
-                    onKeyDown={(e) => {
-                        if (clickableRows && (e.key === 'Enter' || e.key === ' ')) onRowClick?.(rows[index]);
-                    }}
-                    tabIndex={clickableRows ? 0 : undefined}
-                    {...overrides?.trBody}
-                    className={clsx(clickableRows && styles.clickable, overrides?.trBody?.className)}
-                >
-                    {cells.map((cell, i) => (
-                        <td
-                            key={`${id}-cell-${key}-${columns[i].title}`}
-                            {...overrides?.td}
-                            className={clsx(
-                                typography.paragraphXSmall,
-                                styles[columns[i].hideBelow ?? ''],
-                                overrides?.td?.className,
-                            )}
-                        >
-                            {cell}
-                        </td>
-                    ))}
-                </tr>
-            )),
-        [clickableRows, columns, id, onRowClick, overrides?.td, overrides?.trBody, rows, rowsRenderData],
-    );
-
-    return (
-        <table
-            {...{
-                ...overrides?.table,
-                className: clsx(styles.table, overrides?.table?.className),
-            }}
-        >
-            <thead {...overrides?.thead}>
-                <tr {...overrides?.trHead} className={clsx(styles.tableHeader, overrides?.trHead?.className)}>
-                    {columns.map((column) => (
-                        <th
-                            {...{
-                                ...overrides?.th,
-                                className: clsx(
-                                    typography.labelXSmall,
-                                    styles[column.hideBelow ?? ''],
-                                    overrides?.th?.className,
-                                ),
-                            }}
-                            key={`${id}-header-${column.title.toString()}`}
-                        >
-                            {column.title}
-                        </th>
-                    ))}
-                </tr>
-            </thead>
-            <tbody {...overrides?.tbody}>
-                {renderedRows.length === 0 && emptyState && (
-                    <tr className={styles.empty}>
-                        <td colSpan={columns.length} className={styles.emptyState}>
-                            {emptyState}
-                        </td>
-                    </tr>
-                )}
-                {renderedRows}
-            </tbody>
-        </table>
-    );
-}

package/src/stories/tabs/Tabs.module.scss

@@ -1,185 +0,0 @@
-.tabList {
-    //padding-bottom: 4px;
-    overflow-x: scroll;
-    //overflow-y: visible;
-    position: relative;
-
-    display: flex;
-    flex-direction: row;
-
-    scrollbar-width: none;
-    &::-webkit-scrollbar {
-        display: none;
-    }
-
-    &.thick {
-        padding-bottom: 4px;
-        //border-bottom: 4px solid var(--pte-new-colors-borderMedium);
-    }
-    &.thin {
-        padding-bottom: 1px;
-        //border-bottom: 1px solid var(--pte-new-colors-borderMedium);
-    }
-
-    &.full {
-        justify-content: stretch;
-    }
-    //&.glass {
-    //    position: absolute;
-    //    width: 100%;
-    //}
-}
-
-.tabBackground {
-    &.glass {
-        position: sticky;
-        top: 0;
-        width: 100%;
-        z-index: var(--pte-new-layers-sticky);
-        background: var(--pte-new-materials-primaryThin-background);
-    }
-}
-
-.tabGroup {
-    width: 100%;
-    overflow: auto;
-    height: 100%;
-
-    &.glass {
-        position: relative;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-}
-
-
-.tabListBorder {
-    width: 100%;
-    position: relative;
-
-    &.thick {
-        border-bottom: 4px solid var(--pte-new-colors-borderMedium);
-        margin-top: -4px;
-    }
-    &.thin {
-        border-bottom: 1px solid var(--pte-new-colors-borderMedium);
-        margin-top: -1px;
-    }
-}
-
-// I think activeTabBorder is no longer used?
-.activeTabBorder {
-    position: absolute;
-    bottom: 0;
-    width: var(--tab-width);
-    height: 4px;
-    background-color: var(--pte-new-colors-contentPrimary);
-
-    transition: transform var(--pte-animations-duration-slow) var(--pte-animations-timing-easeInOutExpo);
-
-    //noinspection CssInvalidFunction
-    transform: translateX(calc(var(--tab-width) * var(--tab-index)));
-}
-
-.activeTabUnderline {
-    position: absolute;
-    left: 0;
-    right: 0;
-    background-color: var(--pte-new-colors-contentPrimary);
-    z-index: 1;
-    overflow: visible;
-
-    &.thick {
-        bottom: -4px;
-        height: 4px;
-    }
-    &.thin {
-        bottom: -1px;
-        height: 1px;
-    }
-}
-
-@mixin tabCompactStyles {
-    width: auto;
-    padding: 4px 0 6px 0;
-    margin: 0 20px 0 0;
-};
-
-.tab {
-    position: relative;
-    font-weight: 500 !important;
-    padding: 9px 30px;
-    width: var(--tab-width);
-    flex-shrink: 0;
-    overflow: visible;
-    cursor: default;
-
-    transition: all var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOut);
-
-    &:not([aria-selected="true"]) {
-        color: var(--pte-new-colors-contentTertiary) !important;
-    }
-
-    &.compact {
-        @include tabCompactStyles;
-    }
-
-    &.full {
-        width: 100px;
-        padding: 13px 13px;
-        flex-grow: 1;
-    }
-
-    &.fixed, &.full {
-        &[aria-selected="true"]{
-            background-color: var(--pte-new-colors-overlayStrong);
-        }
-
-        &:hover {
-            background-color: var(--pte-new-colors-overlayMedium);
-        }
-
-        &:active {
-            background-color: var(--pte-new-colors-overlayStrong);
-        }
-    }
-
-    @container (min-width: 641px) {
-        &.auto {
-            &[aria-selected="true"] {
-                background-color: var(--pte-new-colors-overlayStrong);
-            }
-
-            &:hover {
-                background-color: var(--pte-new-colors-overlayMedium);
-            }
-
-            &:active {
-                background-color: var(--pte-new-colors-overlayStrong);
-            }
-        }
-    }
-    @container (max-width: 640px) {
-        &.auto {
-            @include tabCompactStyles;
-        }
-    }
-}
-
-.tabPanels {
-    &.glass {
-        width: 100%;
-    }
-}
-
-.panel {
-    padding-top: 16px;
-    overflow-y: scroll;
-    height: 100%;
-    width: 100%;
-
-    &.glass {
-        overflow-y: visible;
-        height: auto;
-    }
-}