paris 0.23.0 → 0.24.0

package/src/stories/markdowneditor/MarkdownEditor.test.tsx

@@ -1,115 +0,0 @@
-import { render, screen } from '../../test/render';
-import { MarkdownEditor } from './MarkdownEditor';
-
-// ProseMirror needs real DOM measurement APIs that jsdom does not provide.
-const mockEditor = {
-    isDestroyed: false,
-    isEditable: true,
-    getMarkdown: () => 'mock',
-    commands: { setContent: vi.fn() },
-    setEditable: vi.fn(),
-};
-
-vi.mock('@tiptap/react', () => ({
-    useEditor: () => mockEditor,
-    EditorContent: ({ editor }: any) => (
-        <div data-testid="editor-content">{editor ? 'Editor loaded' : 'No editor'}</div>
-    ),
-}));
-
-describe('MarkdownEditor', () => {
-    it('renders without crashing', () => {
-        render(<MarkdownEditor value="" />);
-        expect(screen.getByTestId('editor-content')).toBeInTheDocument();
-    });
-
-    it('renders the editor content area', () => {
-        render(<MarkdownEditor value="" />);
-        expect(screen.getByText('Editor loaded')).toBeInTheDocument();
-    });
-
-    it('renders children (toolbar slot) inside the editor container', () => {
-        render(
-            <MarkdownEditor value="">
-                <div data-testid="custom-toolbar">Toolbar</div>
-            </MarkdownEditor>,
-        );
-        expect(screen.getByTestId('custom-toolbar')).toBeInTheDocument();
-    });
-
-    it('applies custom className to root element', () => {
-        const { container } = render(<MarkdownEditor value="" className="my-editor" />);
-        const root = container.firstElementChild;
-        expect(root).toHaveClass('my-editor');
-    });
-
-    it('sets data-status attribute based on status prop', () => {
-        const { container } = render(<MarkdownEditor value="" status="error" />);
-        const editorContainer = container.querySelector('[data-status]');
-        expect(editorContainer).toHaveAttribute('data-status', 'error');
-    });
-
-    it('sets data-status to success', () => {
-        const { container } = render(<MarkdownEditor value="" status="success" />);
-        const editorContainer = container.querySelector('[data-status]');
-        expect(editorContainer).toHaveAttribute('data-status', 'success');
-    });
-
-    it('sets data-status to default by default', () => {
-        const { container } = render(<MarkdownEditor value="" />);
-        const editorContainer = container.querySelector('[data-status]');
-        expect(editorContainer).toHaveAttribute('data-status', 'default');
-    });
-
-    it('sets data-disabled attribute when editable is false', () => {
-        const { container } = render(<MarkdownEditor value="" editable={false} />);
-        const editorContainer = container.querySelector('[data-disabled]');
-        expect(editorContainer).toHaveAttribute('data-disabled', 'true');
-    });
-
-    it('sets data-disabled to false when editable is true (default)', () => {
-        const { container } = render(<MarkdownEditor value="" />);
-        const editorContainer = container.querySelector('[data-disabled]');
-        expect(editorContainer).toHaveAttribute('data-disabled', 'false');
-    });
-
-    it('applies override props to root element', () => {
-        const { container } = render(
-            <MarkdownEditor
-                value=""
-                overrides={{
-                    root: { 'data-testid': 'root-override' },
-                }}
-            />,
-        );
-        expect(screen.getByTestId('root-override')).toBeInTheDocument();
-    });
-
-    it('applies override props to editor container element', () => {
-        render(
-            <MarkdownEditor
-                value=""
-                overrides={{
-                    editorContainer: { 'data-testid': 'container-override' },
-                }}
-            />,
-        );
-        expect(screen.getByTestId('container-override')).toBeInTheDocument();
-    });
-
-    it('sets the markdown base font size CSS variable', () => {
-        const { container } = render(<MarkdownEditor value="" size="paragraphMedium" />);
-        const editorContent = container.querySelector('[class*="editorContent"]');
-        expect(editorContent).toHaveStyle({
-            '--markdown-base-font-size': 'var(--pte-new-typography-styles-paragraphMedium-fontSize)',
-        });
-    });
-
-    it('uses paragraphSmall as the default size', () => {
-        const { container } = render(<MarkdownEditor value="" />);
-        const editorContent = container.querySelector('[class*="editorContent"]');
-        expect(editorContent).toHaveStyle({
-            '--markdown-base-font-size': 'var(--pte-new-typography-styles-paragraphSmall-fontSize)',
-        });
-    });
-});

package/src/stories/markdowneditor/MarkdownEditorContext.tsx

@@ -1,20 +0,0 @@
-'use client';
-
-import type { Editor } from '@tiptap/react';
-import { createContext, useContext } from 'react';
-import type { MarkdownEditorFeature } from './features';
-
-export type ImageUploadHandler = (file: File) => Promise<string>;
-
-export type MarkdownEditorContextValue = {
-    editor: Editor | null;
-    features: Set<MarkdownEditorFeature>;
-    handleImageUpload?: ImageUploadHandler;
-};
-
-export const MarkdownEditorContext = createContext<MarkdownEditorContextValue>({
-    editor: null,
-    features: new Set(),
-});
-
-export const useMarkdownEditorContext = () => useContext(MarkdownEditorContext);

package/src/stories/markdowneditor/ToolbarButton.module.scss

@@ -1,35 +0,0 @@
-.button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: none;
-    border-radius: 6px;
-    background: transparent;
-    color: var(--pte-new-colors-contentSecondary);
-    cursor: pointer;
-    padding: 0;
-    font-size: 13px;
-    font-family: inherit;
-    transition:
-        background-color var(--pte-new-animations-interaction, 150ms) ease,
-        color var(--pte-new-animations-interaction, 150ms) ease;
-    flex-shrink: 0;
-
-    &:hover {
-        background-color: var(--pte-new-colors-backgroundSecondary);
-        color: var(--pte-new-colors-contentPrimary);
-    }
-
-    &[data-active='true'] {
-        background-color: var(--pte-new-colors-borderSubtle);
-        color: var(--pte-new-colors-contentPrimary);
-    }
-
-    &:disabled {
-        color: var(--pte-new-colors-contentDisabled);
-        cursor: not-allowed;
-        background: transparent;
-    }
-}

package/src/stories/markdowneditor/ToolbarButton.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import styles from './ToolbarButton.module.scss';
-
-export type ToolbarButtonProps = {
-    /** Whether the button is currently active (e.g., bold is on). */
-    isActive?: boolean;
-    /** The action to perform when clicked. */
-    onAction: () => void;
-    /** Whether the button is disabled. */
-    disabled?: boolean;
-    /** Icon or label content. */
-    children: ReactNode;
-    /** Optional tooltip text. */
-    tooltip?: string;
-    /** Prop overrides for the button element. */
-    overrides?: {
-        button?: ComponentPropsWithoutRef<'button'>;
-    };
-};
-
-/**
- * A toolbar button used in FixedToolbar and FloatingToolbar.
- * Uses onMouseDown instead of onClick to prevent stealing editor focus.
- */
-export const ToolbarButton: FC<ToolbarButtonProps> = ({
-    isActive = false,
-    onAction,
-    disabled = false,
-    children,
-    tooltip,
-    overrides,
-}) => {
-    return (
-        <button
-            type="button"
-            title={tooltip}
-            disabled={disabled}
-            data-active={isActive}
-            {...overrides?.button}
-            className={clsx(styles.button, overrides?.button?.className)}
-            onMouseDown={(e) => {
-                e.preventDefault();
-                if (!disabled) onAction();
-            }}
-        >
-            {children}
-        </button>
-    );
-};

package/src/stories/markdowneditor/features.ts

@@ -1,92 +0,0 @@
-import Image from '@tiptap/extension-image';
-import Placeholder from '@tiptap/extension-placeholder';
-import { Table } from '@tiptap/extension-table';
-import TableCell from '@tiptap/extension-table-cell';
-import TableHeader from '@tiptap/extension-table-header';
-import TableRow from '@tiptap/extension-table-row';
-import TaskItem from '@tiptap/extension-task-item';
-import TaskList from '@tiptap/extension-task-list';
-import { Markdown } from '@tiptap/markdown';
-import type { Extensions } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-
-export const FEATURES = [
-    'bold',
-    'italic',
-    'strikethrough',
-    'heading',
-    'blockquote',
-    'horizontalRule',
-    'bulletList',
-    'orderedList',
-    'taskList',
-    'codeBlock',
-    'code',
-    'link',
-    'image',
-    'table',
-] as const;
-
-export type MarkdownEditorFeature = (typeof FEATURES)[number];
-
-export const ALL_FEATURES: MarkdownEditorFeature[] = [...FEATURES];
-
-/**
- * Builds the Tiptap extensions array based on enabled features.
- * Always includes: Document, Paragraph, Text, History, Markdown, Placeholder.
- * Conditionally includes StarterKit sub-extensions and standalone extensions.
- */
-export function buildExtensions(features: Set<MarkdownEditorFeature>, placeholder?: string): Extensions {
-    const extensions: Extensions = [
-        StarterKit.configure({
-            bold: features.has('bold') ? {} : false,
-            italic: features.has('italic') ? {} : false,
-            strike: features.has('strikethrough') ? {} : false,
-            heading: features.has('heading') ? { levels: [1, 2, 3, 4, 5, 6] } : false,
-            blockquote: features.has('blockquote') ? {} : false,
-            horizontalRule: features.has('horizontalRule') ? {} : false,
-            bulletList: features.has('bulletList') ? {} : false,
-            orderedList: features.has('orderedList') ? {} : false,
-            listItem: features.has('bulletList') || features.has('orderedList') ? {} : false,
-            codeBlock: features.has('codeBlock') ? {} : false,
-            code: features.has('code') ? {} : false,
-            link: features.has('link')
-                ? {
-                      openOnClick: false,
-                      HTMLAttributes: {
-                          rel: 'noopener noreferrer',
-                          target: '_blank',
-                      },
-                  }
-                : false,
-        }),
-        Markdown,
-        Placeholder.configure({
-            placeholder: placeholder ?? '',
-            showOnlyCurrent: false,
-        }),
-    ];
-
-    if (features.has('taskList')) {
-        extensions.push(TaskList);
-        extensions.push(TaskItem.configure({ nested: true }));
-    }
-
-    if (features.has('table')) {
-        extensions.push(Table.configure({ resizable: false }));
-        extensions.push(TableRow);
-        extensions.push(TableCell);
-        extensions.push(TableHeader);
-    }
-
-    if (features.has('image')) {
-        extensions.push(
-            Image.configure({
-                inline: false,
-                allowBase64: true,
-            }),
-        );
-    }
-
-    return extensions;
-}

package/src/stories/markdowneditor/useMarkdownEditor.ts

@@ -1,75 +0,0 @@
-'use client';
-
-import { useEditor } from '@tiptap/react';
-import { useEffect, useMemo, useRef } from 'react';
-import type { MarkdownEditorFeature } from './features';
-import { ALL_FEATURES, buildExtensions } from './features';
-
-export type UseMarkdownEditorOptions = {
-    /** The markdown string value (controlled). */
-    value: string;
-    /** Fires with the updated markdown string on every edit. */
-    onChange?: (value: string) => void;
-    /** Whitelist of formatting features. Defaults to ALL_FEATURES. */
-    features?: MarkdownEditorFeature[];
-    /** Placeholder text when the editor is empty. */
-    placeholder?: string;
-    /** Whether the editor is editable. @default true */
-    editable?: boolean;
-    /** Whether to autofocus the editor on mount. @default false */
-    autofocus?: boolean;
-};
-
-export function useMarkdownEditor({
-    value,
-    onChange,
-    features = ALL_FEATURES,
-    placeholder,
-    editable = true,
-    autofocus = false,
-}: UseMarkdownEditorOptions) {
-    const featureSet = useMemo(() => new Set(features), [features]);
-    const extensions = useMemo(() => buildExtensions(featureSet, placeholder), [featureSet, placeholder]);
-
-    // Track the last value we sent via onChange to prevent circular updates
-    const lastOnChangeValue = useRef(value);
-
-    const editor = useEditor({
-        extensions,
-        // Empty strings produce no DOM nodes with contentType: 'markdown',
-        // which breaks the placeholder. Only use markdown parsing for non-empty content.
-        content: value || undefined,
-        contentType: value ? 'markdown' : undefined,
-        editable,
-        autofocus,
-        immediatelyRender: false,
-        onUpdate: ({ editor: ed }) => {
-            const markdown = ed.getMarkdown();
-            lastOnChangeValue.current = markdown;
-            onChange?.(markdown);
-        },
-    });
-
-    // Sync external value changes into the editor (controlled mode)
-    useEffect(() => {
-        if (!editor || editor.isDestroyed) return;
-
-        // Skip if this value came from our own onChange
-        if (value === lastOnChangeValue.current) return;
-
-        const currentMarkdown = editor.getMarkdown();
-        if (value !== currentMarkdown) {
-            editor.commands.setContent(value, { contentType: 'markdown', emitUpdate: false });
-            lastOnChangeValue.current = value;
-        }
-    }, [editor, value]);
-
-    // Sync editable state
-    useEffect(() => {
-        if (editor && !editor.isDestroyed) {
-            editor.setEditable(editable);
-        }
-    }, [editor, editable]);
-
-    return { editor, featureSet };
-}

package/src/stories/menu/Menu.module.scss

@@ -1,71 +0,0 @@
-.menu {
-    position: relative;
-}
-
-.menuItems {
-    --anchor-gap: 6px;
-
-    border-radius: 8px;
-    background: var(--pte-new-colors-surfacePrimary);
-    box-shadow: var(--pte-new-lighting-deepBelow);
-    border: var(--pte-new-borders-dropdown-border);
-
-    display: flex;
-    width: 200px;
-    flex-direction: column;
-    align-items: flex-start;
-
-    overflow: hidden;
-    z-index: var(--pte-new-layers-menu);
-
-    transition: opacity var(--pte-animations-interaction), transform var(--pte-animations-interaction);
-    opacity: 1;
-    transform: translateY(0);
-
-    &[data-closed] {
-        opacity: 0;
-        transform: translateY(-8px);
-    }
-}
-
-.menuItem {
-    width: 100%;
-    padding: 8px 14px;
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    color: var(--pte-new-colors-contentPrimary);
-
-    border-bottom: 0.5px solid var(--pte-new-colors-borderMedium);
-
-    &:last-child {
-        border-bottom: none;
-    }
-
-    &:hover {
-        background-color: var(--pte-new-colors-overlayMedium);
-    }
-
-    @keyframes gradientFlow {
-        0% {
-            background-position: 0%;
-        }
-        100% {
-            background-position: 125%;
-        }
-    }
-}
-
-.newItem {
-    background: radial-gradient(circle, rgba(20,239,172,0.2) 0%, rgba(38,237,237,0.05) 75%);
-    background-size: 150% 100%;
-    animation: gradientFlow 2.5s ease-in-out infinite alternate;
-    background-position: 0%;
-
-    &:hover {
-        background-color: unset;
-        animation-play-state: paused;
-    }
-}

package/src/stories/menu/Menu.stories.tsx

@@ -1,37 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { Button } from '../button';
-import { ChevronRight, Ellipsis } from '../icon';
-import { Menu, MenuButton, MenuItem, MenuItems } from './Menu';
-
-const meta: Meta<typeof Menu> = {
-    title: 'Surfaces/Menu',
-    component: Menu,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Menu>;
-
-export const Default: Story = {
-    args: {
-        children: 'Hello world! This is a new Menu component.',
-    },
-    render: (_args) => (
-        <div style={{ height: '150px' }}>
-            <Menu as="div">
-                <MenuButton>
-                    <Button kind="tertiary" shape="circle" startEnhancer={<Ellipsis size={20} />}>
-                        Action menu
-                    </Button>
-                </MenuButton>
-                <MenuItems>
-                    <MenuItem as="button">Dispute</MenuItem>
-                    <MenuItem as="button">
-                        Transfer
-                        <ChevronRight size={20} />
-                    </MenuItem>
-                </MenuItems>
-            </Menu>
-        </div>
-    ),
-};