paris 0.23.0 → 0.24.0

package/src/stories/tabs/Tabs.stories.tsx

@@ -1,209 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { Tabs } from './Tabs';
-
-const meta: Meta<typeof Tabs> = {
-    title: 'Surfaces/Tabs',
-    component: Tabs,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Tabs>;
-
-export const Default: Story = {
-    args: {
-        tabs: [
-            { title: 'Transactions', content: 'Tab 1 content' },
-            { title: 'Cards', content: 'Tab 2 content' },
-            { title: 'Documents', content: 'Tab 3 content' },
-            // { title: 'Tab 4', content: 'Tab 4 content' },
-            // { title: 'Tab 5', content: 'Tab 5 content' },
-            // { title: 'Tab 6', content: 'Tab 6 content' },
-            // { title: 'Tab 7', content: 'Tab 7 content' },
-            // { title: 'Tab 8', content: 'Tab 8 content' },
-            // { title: 'Tab 9', content: 'Tab 9 content' },
-            // { title: 'Tab 10', content: 'Tab 10 content' },
-        ],
-    },
-    render: (args) => (
-        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
-            <Tabs {...args} />
-        </div>
-    ),
-};
-
-export const Compact: Story = {
-    args: {
-        kind: 'compact',
-        tabs: [
-            { title: 'Albums', content: 'Tab 1 content' },
-            { title: 'EPs', content: 'Tab 2 content' },
-            { title: 'Singles', content: 'Tab 3 content' },
-        ],
-    },
-    render: (args) => (
-        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
-            <Tabs {...args} />
-        </div>
-    ),
-};
-
-export const Full: Story = {
-    args: {
-        kind: 'full',
-        barStyle: 'thin',
-        tabs: [
-            { title: 'Albums', content: 'Tab 1 content' },
-            { title: 'EPs', content: 'Tab 2 content' },
-            { title: 'Singles', content: 'Tab 3 content' },
-        ],
-    },
-    render: (args) => (
-        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
-            <Tabs {...args} />
-        </div>
-    ),
-};
-
-export const Glass: Story = {
-    args: {
-        kind: 'full',
-        barStyle: 'thin',
-        backgroundStyle: 'glass',
-        tabs: [
-            {
-                title: 'Albums',
-                content: (
-                    <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
-                        <p>Scroll down to see the glass blur effect on the tab bar.</p>
-                        <div
-                            style={{
-                                padding: '12px',
-                                background: 'var(--pte-new-colors-overlayMedium)',
-                                borderRadius: '8px',
-                            }}
-                        >
-                            Item 1
-                        </div>
-                        <div
-                            style={{
-                                padding: '12px',
-                                background: 'var(--pte-new-colors-overlayMedium)',
-                                borderRadius: '8px',
-                            }}
-                        >
-                            Item 2
-                        </div>
-                        <div
-                            style={{
-                                padding: '12px',
-                                background: 'var(--pte-new-colors-overlayMedium)',
-                                borderRadius: '8px',
-                            }}
-                        >
-                            Item 3
-                        </div>
-                        <div
-                            style={{
-                                padding: '12px',
-                                background: 'var(--pte-new-colors-overlayMedium)',
-                                borderRadius: '8px',
-                            }}
-                        >
-                            Item 4
-                        </div>
-                        <div
-                            style={{
-                                padding: '12px',
-                                background: 'var(--pte-new-colors-overlayMedium)',
-                                borderRadius: '8px',
-                            }}
-                        >
-                            Item 5
-                        </div>
-                        <div
-                            style={{
-                                padding: '12px',
-                                background: 'var(--pte-new-colors-overlayMedium)',
-                                borderRadius: '8px',
-                            }}
-                        >
-                            Item 6
-                        </div>
-                        <div
-                            style={{
-                                padding: '12px',
-                                background: 'var(--pte-new-colors-overlayMedium)',
-                                borderRadius: '8px',
-                            }}
-                        >
-                            Item 7
-                        </div>
-                        <div
-                            style={{
-                                padding: '12px',
-                                background: 'var(--pte-new-colors-overlayMedium)',
-                                borderRadius: '8px',
-                            }}
-                        >
-                            Item 8
-                        </div>
-                    </div>
-                ),
-            },
-            {
-                title: 'EPs',
-                content:
-                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus. Fusce blandit leo in lectus blandit, sed elementum enim accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque pretium erat at lacus ultricies tincidunt. Praesent non luctus magna, ac efficitur ligula. Sed a justo fermentum, feugiat mauris vel, ultrices turpis. Ut interdum malesuada lacus, ac posuere sapien feugiat et. Nulla dignissim bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus.',
-            },
-            {
-                title: 'Singles',
-                content: (
-                    <div
-                        style={{
-                            width: '100%',
-                            height: '300px',
-                            background: 'red',
-                        }}
-                    >
-                        <p>Hello world!</p>
-                    </div>
-                ),
-            },
-            { title: 'Invoices', content: 'Tab 4 content' },
-            { title: 'Payments', content: 'Tab 5 content' },
-            { title: 'Payroll', content: 'Tab 6 content' },
-            { title: 'Insights', content: 'Tab 7 content' },
-            { title: 'Settings', content: 'Tab 8 content' },
-            { title: 'Account', content: 'Tab 9 content' },
-        ],
-    },
-    render: (args) => (
-        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
-            <div style={{ height: '300px' }}>
-                <Tabs {...args} />
-            </div>
-        </div>
-    ),
-};
-
-export const Scroll: Story = {
-    args: {
-        tabs: [
-            { title: 'Transactions', content: 'Tab 1 content' },
-            { title: 'Cards', content: 'Tab 2 content' },
-            { title: 'Documents', content: 'Tab 3 content' },
-            { title: 'Invoices', content: 'Tab 4 content' },
-            { title: 'Payments', content: 'Tab 5 content' },
-            { title: 'Payroll', content: 'Tab 6 content' },
-            { title: 'Insights', content: 'Tab 7 content' },
-            { title: 'Settings', content: 'Tab 8 content' },
-            { title: 'Account', content: 'Tab 9 content' },
-        ],
-    },
-    render: (args) => (
-        <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
-            <Tabs {...args} />
-        </div>
-    ),
-};

package/src/stories/tabs/Tabs.test.tsx

@@ -1,167 +0,0 @@
-import { render, screen, waitFor } from '../../test/render';
-import { Tabs } from './Tabs';
-
-// Mock framer-motion to avoid layout animation issues in tests
-vi.mock('framer-motion', () => ({
-    motion: {
-        div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-    },
-    AnimatePresence: ({ children }: any) => <>{children}</>,
-    cubicBezier: (..._args: number[]) => [0, 0, 1, 1],
-}));
-
-const defaultTabs = [
-    { title: 'Transactions', content: 'Transactions content' },
-    { title: 'Cards', content: 'Cards content' },
-    { title: 'Documents', content: 'Documents content' },
-];
-
-describe('Tabs', () => {
-    it('renders all tab titles', () => {
-        render(<Tabs tabs={defaultTabs} />);
-
-        expect(screen.getByText('Transactions')).toBeInTheDocument();
-        expect(screen.getByText('Cards')).toBeInTheDocument();
-        expect(screen.getByText('Documents')).toBeInTheDocument();
-    });
-
-    it('renders the first tab panel content by default', () => {
-        render(<Tabs tabs={defaultTabs} />);
-
-        expect(screen.getByText('Transactions content')).toBeInTheDocument();
-    });
-
-    it('renders tab elements with correct roles', () => {
-        render(<Tabs tabs={defaultTabs} />);
-
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs).toHaveLength(3);
-        expect(screen.getByRole('tablist')).toBeInTheDocument();
-        expect(screen.getByRole('tabpanel')).toBeInTheDocument();
-    });
-
-    it('marks the first tab as selected by default', () => {
-        render(<Tabs tabs={defaultTabs} />);
-
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
-        expect(tabs[1]).toHaveAttribute('aria-selected', 'false');
-        expect(tabs[2]).toHaveAttribute('aria-selected', 'false');
-    });
-
-    it('switches active panel when clicking a different tab', async () => {
-        const { user } = render(<Tabs tabs={defaultTabs} />);
-
-        const tabs = screen.getAllByRole('tab');
-        await user.click(tabs[1]);
-
-        await waitFor(() => {
-            expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
-        });
-
-        expect(screen.getByText('Cards content')).toBeInTheDocument();
-    });
-
-    it('calls onTabChange when a tab is clicked', async () => {
-        const onTabChange = vi.fn();
-        const { user } = render(<Tabs tabs={defaultTabs} onTabChange={onTabChange} />);
-
-        const tabs = screen.getAllByRole('tab');
-        await user.click(tabs[2]);
-
-        await waitFor(() => {
-            expect(onTabChange).toHaveBeenCalledWith(2);
-        });
-    });
-
-    it('respects defaultIndex prop', () => {
-        render(<Tabs tabs={defaultTabs} defaultIndex={1} />);
-
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
-        expect(screen.getByText('Cards content')).toBeInTheDocument();
-    });
-
-    it('supports controlled index', () => {
-        const { rerender } = render(<Tabs tabs={defaultTabs} index={0} />);
-
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
-
-        rerender(<Tabs tabs={defaultTabs} index={2} />);
-
-        expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
-        expect(screen.getByText('Documents content')).toBeInTheDocument();
-    });
-
-    it('navigates tabs with keyboard arrow keys', async () => {
-        const { user } = render(<Tabs tabs={defaultTabs} />);
-
-        const tabs = screen.getAllByRole('tab');
-        await user.click(tabs[0]);
-        await user.keyboard('{ArrowRight}');
-
-        await waitFor(() => {
-            expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
-        });
-    });
-
-    it('renders with compact kind', () => {
-        render(<Tabs tabs={defaultTabs} kind="compact" />);
-
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs).toHaveLength(3);
-    });
-
-    it('renders with full kind', () => {
-        render(<Tabs tabs={defaultTabs} kind="full" />);
-
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs).toHaveLength(3);
-    });
-
-    it('renders with thin barStyle', () => {
-        render(<Tabs tabs={defaultTabs} barStyle="thin" />);
-
-        const tabs = screen.getAllByRole('tab');
-        expect(tabs).toHaveLength(3);
-    });
-
-    it('renders with glass backgroundStyle', () => {
-        render(<Tabs tabs={defaultTabs} backgroundStyle="glass" />);
-
-        expect(screen.getAllByRole('tab')).toHaveLength(3);
-    });
-
-    it('renders ReactNode content in tab panels', async () => {
-        const tabsWithJsx = [
-            { title: 'Tab 1', content: <div data-testid="custom-content">Custom JSX</div> },
-            { title: 'Tab 2', content: 'Plain text' },
-        ];
-
-        render(<Tabs tabs={tabsWithJsx} />);
-
-        expect(screen.getByTestId('custom-content')).toBeInTheDocument();
-        expect(screen.getByText('Custom JSX')).toBeInTheDocument();
-    });
-
-    it('handles a single tab', () => {
-        const singleTab = [{ title: 'Only Tab', content: 'Only content' }];
-        render(<Tabs tabs={singleTab} />);
-
-        expect(screen.getAllByRole('tab')).toHaveLength(1);
-        expect(screen.getByText('Only content')).toBeInTheDocument();
-    });
-
-    it('does not call onTabChange when clicking the already-selected tab', async () => {
-        const onTabChange = vi.fn();
-        const { user } = render(<Tabs tabs={defaultTabs} onTabChange={onTabChange} />);
-
-        const tabs = screen.getAllByRole('tab');
-        await user.click(tabs[0]);
-
-        // HeadlessUI may or may not call onChange for same-tab clicks.
-        // The important thing is it doesn't crash.
-        expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
-    });
-});

package/src/stories/tabs/Tabs.tsx

@@ -1,191 +0,0 @@
-'use client';
-
-import type { TabListProps } from '@ariakit/react';
-import type { TabGroupProps, TabPanelProps, TabProps } from '@headlessui/react';
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
-import type { CSSLength } from '@ssh/csstypes';
-import { clsx } from 'clsx';
-import { motion } from 'framer-motion';
-import type { ComponentPropsWithoutRef, CSSProperties, FC, ReactNode } from 'react';
-import { useId, useState } from 'react';
-import typography from '../text/Typography.module.css';
-import { easeInOutExpo } from '../utility';
-import styles from './Tabs.module.scss';
-
-export type TabsProps = {
-    /**
-     * The tabs to render.
-     */
-    tabs: {
-        /** The title of the tab. */
-        title: string;
-        /** The content of the tab. */
-        content: ReactNode;
-    }[];
-    /**
-     * The width of each tab. Defaults to `150px`.
-     */
-    tabWidth?: CSSLength;
-    /**
-     * Stylistic alternates for the tabs.
-     * `fixed` will rely on the `tabWidth` prop and default to 150px;
-     * `compact` will use an alternate intrinsically-sized style that ignores the `tabWidth` prop;
-     * `auto` will use fixed style on larger screens and switch to compact style on smaller screens (below 640px, the default Paris theme's medium breakpoint).
-     * `full` will use a full-width style that ignores the `tabWidth` prop, with a taller height as well
-     * @default auto
-     */
-    kind?: 'fixed' | 'compact' | 'auto' | 'full';
-    /**
-     * The thickness of the bottom bar. Defaults to `thick`.
-     */
-    barStyle?: 'thick' | 'thin';
-    /**
-     * The background style, with `default` being transparent and `glass` being a glassmorphism effect. Defaults to `default`.
-     */
-    backgroundStyle?: 'default' | 'glass';
-    /**
-     * The default index of the tab to render. Defaults to `0`.
-     */
-    defaultIndex?: number;
-    /**
-     * Pass in a controlled index to control the selected tab.
-     */
-    index?: number;
-    /**
-     * An optional handler for tab changes.
-     * @param index - The index of the tab that was selected.
-     */
-    onTabChange?: (index: number) => void | Promise<void>;
-    /**
-     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
-     */
-    overrides?: {
-        group?: TabGroupProps<'div'>;
-        panel?: TabPanelProps<'div'>;
-        panelContainer?: ComponentPropsWithoutRef<'div'>;
-        tabList?: TabListProps<'div'>;
-        tabListBorder?: ComponentPropsWithoutRef<'div'>;
-        tabBackground?: ComponentPropsWithoutRef<'div'>;
-        tab?: TabProps<'div'>;
-    };
-};
-
-/**
- * A Tabs component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Tabs } from 'paris/tabs';
- * ```
- * @constructor
- */
-export const Tabs: FC<TabsProps> = ({
-    tabs,
-    tabWidth = '150px',
-    kind = 'auto',
-    barStyle = 'thick',
-    backgroundStyle = 'default',
-    defaultIndex = 0,
-    index,
-    onTabChange,
-    overrides,
-}) => {
-    const id = useId();
-    const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
-
-    return (
-        <TabGroup
-            as="div"
-            selectedIndex={index ?? selectedIndex}
-            onChange={(i) => {
-                setSelectedIndex(i);
-                if (onTabChange) {
-                    onTabChange?.(i);
-                }
-            }}
-            {...overrides?.group}
-            className={clsx(styles.tabGroup, styles[backgroundStyle], overrides?.group?.className)}
-        >
-            <div
-                {...overrides?.tabBackground}
-                className={clsx(styles.tabBackground, styles[backgroundStyle], overrides?.tabBackground?.className)}
-                style={{
-                    ...(backgroundStyle === 'glass'
-                        ? {
-                              backdropFilter: 'var(--pte-new-blurs-strong)',
-                              WebkitBackdropFilter: 'var(--pte-new-blurs-strong)',
-                          }
-                        : {}),
-                    ...overrides?.tabBackground?.style,
-                }}
-            >
-                <TabList
-                    {...overrides?.tabList}
-                    style={
-                        {
-                            '--tab-width': tabWidth,
-                            '--tab-index': `${index ?? selectedIndex}`,
-                            ...(overrides?.tabList?.style || {}),
-                        } as CSSProperties
-                    }
-                    className={clsx(
-                        styles.tabList,
-                        styles[barStyle],
-                        styles[backgroundStyle],
-                        overrides?.tabList?.className,
-                    )}
-                >
-                    {tabs.map(({ title }, i) => (
-                        <Tab
-                            key={`${id}-tab-${title}`}
-                            {...overrides?.tab}
-                            className={clsx(typography.paragraphXSmall, styles.tab, styles[kind])}
-                        >
-                            {title}
-                            {i === (index ?? selectedIndex) && (
-                                <motion.div
-                                    key={`${id}-tab-active-border`}
-                                    className={clsx(styles.activeTabUnderline, styles[barStyle])}
-                                    layoutId={`${id}-tab-active-border`}
-                                    transition={{
-                                        ease: easeInOutExpo,
-                                    }}
-                                />
-                            )}
-                        </Tab>
-                    ))}
-
-                    {/* <div key={`${id}-tab-active-border`} className={styles.activeTabBorder} /> */}
-                </TabList>
-                <div
-                    {...overrides?.tabListBorder}
-                    className={clsx(styles.tabListBorder, styles[barStyle], overrides?.tabListBorder?.className)}
-                />
-            </div>
-
-            <TabPanels
-                {...overrides?.panelContainer}
-                className={clsx(styles.tabPanels, styles[backgroundStyle], overrides?.panelContainer?.className)}
-            >
-                {tabs.map(({ title, content }) => (
-                    <TabPanel
-                        key={`${id}-tab-${title}-content`}
-                        {...overrides?.panel}
-                        className={clsx(
-                            styles.panel,
-                            styles[backgroundStyle],
-                            styles[barStyle],
-                            styles[kind],
-                            overrides?.panel?.className,
-                        )}
-                    >
-                        {content}
-                    </TabPanel>
-                ))}
-            </TabPanels>
-        </TabGroup>
-    );
-};