paris 0.18.1 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # paris
 
+## 0.20.0
+
+### Minor Changes
+
+- f40892e: Add semantic z-index layer tokens (`Theme.new.layers`) with six named layers: below, sticky, dropdown, overlay, popover, menu. Migrate all hardcoded z-index values to use CSS variable tokens. Fix stacking conflict where SegmentedControl labels bled through GlassTabs sticky bar.
+
+### Patch Changes
+
+- 680364a: MarkdownEditor: fix task list checkbox alignment, fix duplicate link extension, fix link popover not appearing, add handleImageUpload prop for file-based image insertion, match checkbox styling to Paris Checkbox component, use Lucide icons for toolbar, and update documentation.
+
+## 0.19.0
+
+### Minor Changes
+
+- 4a511cc: Add MarkdownEditor component — a WYSIWYG rich text editor built on Tiptap that outputs markdown. Features composable toolbars (FixedToolbar, FloatingToolbar), controlled value/onChange with markdown strings, feature gating via `features` prop, and Paris-styled content rendering. Adds lucide-react for toolbar icons.
+
 ## 0.18.1
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
     "name": "paris",
     "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
     "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-    "version": "0.18.1",
+    "version": "0.20.0",
     "homepage": "https://paris.slingshot.fm",
     "license": "MIT",
     "repository": {
@@ -36,6 +36,12 @@
         "generate:text": "ts-node --esm ./scripts/text.ts",
         "release": "bun run generate:exports && bunx changeset publish",
         "prepare": "test -n \"$CI\" || lefthook install",
+        "test": "vitest run --project unit",
+        "test:watch": "vitest --project unit",
+        "test:coverage": "vitest run --project unit --coverage",
+        "test:storybook": "vitest run --project storybook",
+        "test:all": "vitest run",
+        "test:coverage-check": "node scripts/checkTestCoverage.js",
         "typecheck": "tsc --noEmit",
         "lint": "biome check .",
         "lint:fix": "biome check --write .",
@@ -62,6 +68,7 @@
         "./informationaltooltip": "./src/stories/informationaltooltip/index.ts",
         "./input": "./src/stories/input/index.ts",
         "./markdown": "./src/stories/markdown/index.ts",
+        "./markdowneditor": "./src/stories/markdowneditor/index.ts",
         "./menu": "./src/stories/menu/index.ts",
         "./pagination": "./src/stories/pagination/index.ts",
         "./popover": "./src/stories/popover/index.ts",
@@ -87,9 +94,22 @@
         "@headlessui/react": "^2.2.4",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@tiptap/extension-image": "^3.22.2",
+        "@tiptap/extension-link": "^3.22.2",
+        "@tiptap/extension-placeholder": "^3.22.2",
+        "@tiptap/extension-table": "^3.22.2",
+        "@tiptap/extension-table-cell": "^3.22.2",
+        "@tiptap/extension-table-header": "^3.22.2",
+        "@tiptap/extension-table-row": "^3.22.2",
+        "@tiptap/extension-task-item": "^3.22.2",
+        "@tiptap/extension-task-list": "^3.22.2",
+        "@tiptap/markdown": "^3.22.2",
+        "@tiptap/react": "^3.22.2",
+        "@tiptap/starter-kit": "^3.22.2",
         "clsx": "^1.2.1",
         "font-color-contrast": "^11.1.0",
         "framer-motion": "^12.24.10",
+        "lucide-react": "^1.7.0",
         "pte": "^0.5.0",
         "react-hot-toast": "^2.4.1",
         "react-markdown": "^10.1.0",
@@ -114,18 +134,26 @@
         "@ssh/csstypes": "^1.1.0",
         "@storybook/addon-docs": "10.3.4",
         "@storybook/addon-links": "10.3.4",
+        "@storybook/addon-vitest": "10.3.4",
         "@storybook/nextjs-vite": "10.3.4",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
         "@types/node": "^22.0.0",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@vitest/browser-playwright": "4.1.2",
+        "@vitest/coverage-v8": "^4.1.2",
         "autoprefixer": "^10.4.14",
         "change-case": "^4.1.2",
         "csstype": "^3.1.2",
         "esbuild-sass-plugin": "^2.16.0",
+        "jsdom": "^29.0.1",
         "jss": "^10.10.0",
         "jss-preset-default": "^10.10.0",
         "lefthook": "^1.11.13",
         "next": "^16.2.2",
+        "playwright": "^1.59.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "sass": "^1.62.1",
@@ -136,6 +164,7 @@
         "tsup": "^7.2.0",
         "type-fest": "^3.10.0",
         "typescript": "^5.2.2",
-        "vite": "^7.0.0"
+        "vite": "^7.0.0",
+        "vitest": "^4.1.2"
     }
 }

package/src/stories/accordion/Accordion.test.tsx

@@ -0,0 +1,140 @@
+import { render, screen, waitFor } from '../../test/render';
+import { Accordion } from './Accordion';
+
+describe('Accordion', () => {
+    it('renders with a title', () => {
+        render(<Accordion title="My Accordion" />);
+        expect(screen.getByText('My Accordion')).toBeInTheDocument();
+    });
+
+    it('does not show children when collapsed', () => {
+        render(<Accordion title="Title">Hidden content</Accordion>);
+        expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
+    });
+
+    it('expands on click to reveal children', async () => {
+        const { user } = render(<Accordion title="Title">Revealed content</Accordion>);
+        await user.click(screen.getByRole('button'));
+        expect(screen.getByText('Revealed content')).toBeInTheDocument();
+    });
+
+    it('collapses on second click', async () => {
+        const { user } = render(<Accordion title="Title">Toggle content</Accordion>);
+        const button = screen.getByRole('button');
+
+        await user.click(button);
+        expect(screen.getByText('Toggle content')).toBeInTheDocument();
+
+        await user.click(button);
+        // AnimatePresence exit animation may keep element mounted briefly
+        await waitFor(() => {
+            expect(screen.queryByText('Toggle content')).not.toBeInTheDocument();
+        });
+    });
+
+    it('expands on Enter key', async () => {
+        const { user } = render(<Accordion title="Title">Keyboard content</Accordion>);
+        screen.getByRole('button').focus();
+        await user.keyboard('{Enter}');
+        expect(screen.getByText('Keyboard content')).toBeInTheDocument();
+    });
+
+    it('expands on Space key', async () => {
+        const { user } = render(<Accordion title="Title">Space content</Accordion>);
+        screen.getByRole('button').focus();
+        await user.keyboard(' ');
+        expect(screen.getByText('Space content')).toBeInTheDocument();
+    });
+
+    it('calls onOpenChange when toggled (uncontrolled)', async () => {
+        const onChange = vi.fn();
+        const { user } = render(
+            <Accordion title="Title" onOpenChange={onChange}>
+                Content
+            </Accordion>,
+        );
+        await user.click(screen.getByRole('button'));
+        expect(onChange).toHaveBeenCalledWith(true);
+
+        await user.click(screen.getByRole('button'));
+        expect(onChange).toHaveBeenCalledWith(false);
+        expect(onChange).toHaveBeenCalledTimes(2);
+    });
+
+    it('works as a controlled component', async () => {
+        const onChange = vi.fn();
+        const { rerender, user } = render(
+            <Accordion title="Title" isOpen={false} onOpenChange={onChange}>
+                Controlled content
+            </Accordion>,
+        );
+
+        expect(screen.queryByText('Controlled content')).not.toBeInTheDocument();
+
+        // Open externally
+        rerender(
+            <Accordion title="Title" isOpen={true} onOpenChange={onChange}>
+                Controlled content
+            </Accordion>,
+        );
+        expect(screen.getByText('Controlled content')).toBeInTheDocument();
+
+        // Click should call onOpenChange but not change state (controlled)
+        await user.click(screen.getByRole('button'));
+        expect(onChange).toHaveBeenCalledWith(false);
+    });
+
+    it('renders with kind="card"', () => {
+        render(
+            <Accordion title="Card Accordion" kind="card">
+                Card content
+            </Accordion>,
+        );
+        expect(screen.getByText('Card Accordion')).toBeInTheDocument();
+    });
+
+    it('renders with kind="default" by default', () => {
+        const { container } = render(<Accordion title="Default" />);
+        expect(container.firstElementChild).toHaveClass('default');
+    });
+
+    it('applies custom className via overrides', () => {
+        const { container } = render(
+            <Accordion title="Styled" overrides={{ container: { className: 'custom-class' } }}>
+                Styled content
+            </Accordion>,
+        );
+        expect(container.firstElementChild).toHaveClass('custom-class');
+    });
+
+    it('sets data-state attribute on the title container', () => {
+        render(<Accordion title="Title">Content</Accordion>);
+        const button = screen.getByRole('button');
+        expect(button).toHaveAttribute('data-state', 'closed');
+    });
+
+    it('updates data-state to open when expanded', async () => {
+        const { user } = render(<Accordion title="Title">Content</Accordion>);
+        const button = screen.getByRole('button');
+        await user.click(button);
+        expect(button).toHaveAttribute('data-state', 'open');
+    });
+
+    it('renders with size="large" for card kind', () => {
+        render(
+            <Accordion title="Large Card" kind="card" size="large">
+                Large content
+            </Accordion>,
+        );
+        expect(screen.getByRole('button')).toHaveClass('large');
+    });
+
+    it('starts open when isOpen is true initially', () => {
+        render(
+            <Accordion title="Pre-opened" isOpen={true}>
+                Visible from start
+            </Accordion>,
+        );
+        expect(screen.getByText('Visible from start')).toBeInTheDocument();
+    });
+});

package/src/stories/accordionselect/AccordionSelect.test.tsx

@@ -0,0 +1,252 @@
+import { useState } from 'react';
+import { render, screen, waitFor } from '../../test/render';
+import type { AccordionSelectOption } from './AccordionSelect';
+import { AccordionSelect } from './AccordionSelect';
+
+const options: AccordionSelectOption[] = [
+    { id: 'champagne', node: 'In an alleyway, drinking champagne' },
+    { id: 'rooftop', node: 'On a rooftop, watching the sunset' },
+    { id: 'garden', node: 'In a garden, under the stars' },
+];
+
+function ControlledAccordionSelect(props: Partial<React.ComponentProps<typeof AccordionSelect>>) {
+    const [value, setValue] = useState<string | null>((props.value as string | null) ?? null);
+
+    return (
+        <AccordionSelect
+            options={options}
+            value={value}
+            onChange={(opt) => {
+                setValue(opt.id);
+                props.onChange?.(opt);
+            }}
+            {...props}
+        />
+    );
+}
+
+describe('AccordionSelect', () => {
+    it('renders with placeholder when no value is selected', () => {
+        render(<AccordionSelect options={options} placeholder="Where were we?" />);
+        expect(screen.getByText('Where were we?')).toBeInTheDocument();
+    });
+
+    it('renders default placeholder when none is provided', () => {
+        render(<AccordionSelect options={options} />);
+        expect(screen.getByText('Select an option')).toBeInTheDocument();
+    });
+
+    it('displays the selected option in the header', () => {
+        render(<AccordionSelect options={options} value="champagne" />);
+        expect(screen.getByText('In an alleyway, drinking champagne')).toBeInTheDocument();
+    });
+
+    it('expands to show all options when header is clicked', async () => {
+        const { user } = render(<AccordionSelect options={options} value="champagne" />);
+
+        await user.click(screen.getByRole('button'));
+
+        await waitFor(() => {
+            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
+            expect(screen.getByText('In a garden, under the stars')).toBeInTheDocument();
+        });
+    });
+
+    it('calls onChange when an option is selected', async () => {
+        const handleChange = vi.fn();
+        const { user } = render(<ControlledAccordionSelect value="champagne" onChange={handleChange} />);
+
+        await user.click(screen.getByRole('button', { name: /champagne/i }));
+
+        await waitFor(() => {
+            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByText('On a rooftop, watching the sunset'));
+
+        expect(handleChange).toHaveBeenCalledWith(
+            expect.objectContaining({ id: 'rooftop', node: 'On a rooftop, watching the sunset' }),
+        );
+    });
+
+    it('closes the accordion after selection when closeOnSelect is true (default)', async () => {
+        const { user } = render(<ControlledAccordionSelect value="champagne" />);
+
+        await user.click(screen.getByRole('button', { name: /champagne/i }));
+        await waitFor(() => {
+            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByText('On a rooftop, watching the sunset'));
+
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: /garden/i })).not.toBeInTheDocument();
+        });
+    });
+
+    it('keeps the accordion open after selection when closeOnSelect is false', async () => {
+        const { user } = render(<ControlledAccordionSelect value="champagne" closeOnSelect={false} />);
+
+        await user.click(screen.getByRole('button', { name: /champagne/i }));
+        await waitFor(() => {
+            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
+        });
+
+        await user.click(screen.getByText('On a rooftop, watching the sunset'));
+
+        expect(screen.getByText('In a garden, under the stars')).toBeInTheDocument();
+    });
+
+    it('toggles open and closed on header click', async () => {
+        const { user } = render(<AccordionSelect options={options} value="champagne" />);
+
+        const header = screen.getByRole('button');
+
+        // Open
+        await user.click(header);
+        await waitFor(() => {
+            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
+        });
+
+        // Close
+        await user.click(header);
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: /rooftop/i })).not.toBeInTheDocument();
+        });
+    });
+
+    it('supports keyboard interaction on the header (Enter)', async () => {
+        const { user } = render(<AccordionSelect options={options} value="champagne" />);
+
+        const header = screen.getByRole('button');
+        header.focus();
+        await user.keyboard('{Enter}');
+
+        await waitFor(() => {
+            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
+        });
+    });
+
+    it('supports keyboard interaction on the header (Space)', async () => {
+        const { user } = render(<AccordionSelect options={options} value="champagne" />);
+
+        const header = screen.getByRole('button');
+        header.focus();
+        await user.keyboard(' ');
+
+        await waitFor(() => {
+            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
+        });
+    });
+
+    it('renders disabled options as disabled buttons', async () => {
+        const disabledOptions = [...options, { id: 'nowhere', node: 'Nowhere, it was all a dream', disabled: true }];
+        const { user } = render(<AccordionSelect options={disabledOptions} value="champagne" />);
+
+        await user.click(screen.getByRole('button', { name: /champagne/i }));
+
+        await waitFor(() => {
+            const disabledButton = screen.getByText('Nowhere, it was all a dream').closest('button');
+            expect(disabledButton).toBeDisabled();
+        });
+    });
+
+    it('calls onOpenChange when the accordion opens or closes', async () => {
+        const handleOpenChange = vi.fn();
+        const { user, container } = render(
+            <AccordionSelect options={options} value="champagne" onOpenChange={handleOpenChange} />,
+        );
+
+        // Click the header (the div[role=button][tabindex=0]) to open
+        const header = container.querySelector('[role="button"][tabindex="0"]') as HTMLElement;
+        await user.click(header);
+        expect(handleOpenChange).toHaveBeenCalledWith(true);
+
+        // Click the header again to close
+        await user.click(header);
+        expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it('renders custom content via renderSelected', () => {
+        render(
+            <AccordionSelect
+                options={options}
+                value="champagne"
+                renderSelected={(opt) => <span data-testid="custom-selected">{opt.id}</span>}
+            />,
+        );
+        expect(screen.getByTestId('custom-selected')).toHaveTextContent('champagne');
+    });
+
+    it('renders custom content via renderOption', async () => {
+        const { user } = render(
+            <AccordionSelect
+                options={options}
+                value="champagne"
+                renderOption={(opt, isSelected) => (
+                    <span data-testid={`custom-opt-${opt.id}`}>
+                        {opt.id} {isSelected ? '(selected)' : ''}
+                    </span>
+                )}
+            />,
+        );
+
+        await user.click(screen.getByRole('button'));
+
+        await waitFor(() => {
+            expect(screen.getByTestId('custom-opt-champagne')).toHaveTextContent('champagne (selected)');
+            expect(screen.getByTestId('custom-opt-rooftop')).toHaveTextContent('rooftop');
+        });
+    });
+
+    it('renders an action at the bottom of the dropdown', async () => {
+        const { user } = render(
+            <AccordionSelect options={options} value="champagne" action={<button type="button">Add new</button>} />,
+        );
+
+        await user.click(screen.getByRole('button', { name: /champagne/i }));
+
+        await waitFor(() => {
+            expect(screen.getByText('Add new')).toBeInTheDocument();
+        });
+    });
+
+    it('renders a label in the header', () => {
+        render(
+            <AccordionSelect
+                options={options}
+                value="champagne"
+                label={<span data-testid="header-label">Active</span>}
+            />,
+        );
+        expect(screen.getByTestId('header-label')).toHaveTextContent('Active');
+    });
+
+    it('closes on outside click when closeOnClickOutside is true (default)', async () => {
+        const { user } = render(
+            <div>
+                <AccordionSelect options={options} value="champagne" />
+                <button type="button">Outside</button>
+            </div>,
+        );
+
+        // Open
+        await user.click(screen.getByRole('button', { name: /champagne/i }));
+        await waitFor(() => {
+            expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
+        });
+
+        // Click outside
+        await user.click(screen.getByText('Outside'));
+        await waitFor(() => {
+            expect(screen.queryByRole('button', { name: /rooftop/i })).not.toBeInTheDocument();
+        });
+    });
+
+    it('respects controlled isOpen prop', () => {
+        render(<AccordionSelect options={options} value="champagne" isOpen />);
+        // When isOpen=true, dropdown content should be rendered
+        expect(screen.getByText('On a rooftop, watching the sunset')).toBeInTheDocument();
+        expect(screen.getByText('In a garden, under the stars')).toBeInTheDocument();
+    });
+});

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

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