paris 0.23.0 → 0.24.0

package/src/stories/markdown/Markdown.tsx

@@ -1,293 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import type { FC, ReactNode } from 'react';
-import { Children, isValidElement, memo, useMemo } from 'react';
-import type { Components } from 'react-markdown';
-import ReactMarkdown from 'react-markdown';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import { Accordion } from '../accordion';
-import { Callout } from '../callout';
-import { StyledLink } from '../styledlink';
-import type { TextProps } from '../text';
-import { Text } from '../text';
-import { pvar } from '../theme';
-import styles from './Markdown.module.scss';
-
-export type MarkdownSize = Extract<
-    TextProps['kind'],
-    'paragraphLarge' | 'paragraphMedium' | 'paragraphSmall' | 'paragraphXSmall' | 'paragraphXXSmall'
->;
-
-const smallerSize: Record<MarkdownSize, MarkdownSize> = {
-    paragraphLarge: 'paragraphMedium',
-    paragraphMedium: 'paragraphSmall',
-    paragraphSmall: 'paragraphXSmall',
-    paragraphXSmall: 'paragraphXXSmall',
-    paragraphXXSmall: 'paragraphXXSmall',
-};
-
-/**
- * Extracts plain text from React children recursively.
- * Useful for generating IDs from heading content.
- */
-function extractText(children: ReactNode): string {
-    return Children.toArray(children)
-        .map((child) => {
-            if (typeof child === 'string') return child;
-            if (typeof child === 'number') return String(child);
-            if (isValidElement<{ children?: ReactNode }>(child) && child.props?.children) {
-                return extractText(child.props.children);
-            }
-            return '';
-        })
-        .join('');
-}
-
-/**
- * Maps heading level to Paris Text `kind` and HTML element.
- */
-const headingConfig = {
-    1: { kind: 'headingLarge', as: 'h1' },
-    2: { kind: 'headingMedium', as: 'h2' },
-    3: { kind: 'headingSmall', as: 'h3' },
-    4: { kind: 'headingXSmall', as: 'h4' },
-    5: { kind: 'headingXXSmall', as: 'h5' },
-    6: { kind: 'labelMedium', as: 'h6' },
-} as const;
-
-/**
- * Creates a heading component for a given level (1–6).
- */
-function createHeading(level: keyof typeof headingConfig) {
-    const { kind, as } = headingConfig[level];
-    const HeadingComponent: Components[`h${typeof level}`] = ({ children }) => {
-        const id = extractText(children)
-            .toLowerCase()
-            .replace(/\s+/g, '-')
-            .replace(/[^\w-]/g, '');
-        return (
-            <Text as={as} kind={kind} className={styles.heading} id={id}>
-                {children}
-            </Text>
-        );
-    };
-    return HeadingComponent;
-}
-
-/**
- * Builds the react-markdown component overrides for a given base text size.
- */
-function createMarkdownComponents(size: MarkdownSize): Components {
-    const ddSize = smallerSize[size];
-
-    return {
-        // ── Headings ──────────────────────────────────────────────
-        h1: createHeading(1),
-        h2: createHeading(2),
-        h3: createHeading(3),
-        h4: createHeading(4),
-        h5: createHeading(5),
-        h6: createHeading(6),
-
-        // ── Paragraphs & inline text ─────────────────────────────
-        p: ({ children }) => (
-            <Text as="p" kind={size} className={styles.paragraph}>
-                {children}
-            </Text>
-        ),
-        strong: ({ children }) => (
-            <Text as="span" kind={size} weight="semibold">
-                {children}
-            </Text>
-        ),
-        em: ({ children }) => (
-            <Text as="span" kind={size} fontStyle="italic">
-                {children}
-            </Text>
-        ),
-        del: ({ children }) => <span className={styles.strikethrough}>{children}</span>,
-
-        // ── Links & images ───────────────────────────────────────
-        a: ({ href, children }) => (
-            <StyledLink href={href} target="_blank" rel="noopener noreferrer">
-                {children}
-            </StyledLink>
-        ),
-        img: ({ src, alt }) => (
-            <span className={styles.imageWrapper}>
-                <img src={src} alt={alt || ''} className={styles.image} loading="lazy" />
-            </span>
-        ),
-
-        // ── Blockquotes ──────────────────────────────────────────
-        blockquote: ({ children }) => (
-            <Callout variant="default" icon={null} className={styles.blockquote}>
-                {children}
-            </Callout>
-        ),
-
-        // ── Horizontal rules ─────────────────────────────────────
-        hr: () => <hr className={styles.hr} />,
-
-        // ── Lists ────────────────────────────────────────────────
-        ul: ({ children, className }) => {
-            const isTaskList = className === 'contains-task-list';
-            return (
-                <ul className={clsx(styles.list, styles.unorderedList, isTaskList && styles.taskList)}>{children}</ul>
-            );
-        },
-        ol: ({ children, start }) => (
-            <ol className={clsx(styles.list, styles.orderedList)} start={start}>
-                {children}
-            </ol>
-        ),
-        li: ({ children, className }) => {
-            const isTask = className === 'task-list-item';
-            return <li className={clsx(styles.listItem, isTask && styles.taskListItem)}>{children}</li>;
-        },
-
-        // ── Code ─────────────────────────────────────────────────
-        code: ({ children, className }) => {
-            const languageMatch = className?.match(/language-(\w+)/);
-            const isBlock = !!languageMatch;
-
-            if (isBlock) {
-                return (
-                    <div className={styles.codeBlockWrapper}>
-                        {languageMatch?.[1] && (
-                            <div className={styles.codeLanguage}>
-                                <Text as="span" kind="labelXSmall" weight="medium">
-                                    {languageMatch[1]}
-                                </Text>
-                            </div>
-                        )}
-                        <code className={clsx(styles.codeBlock, className)}>{children}</code>
-                    </div>
-                );
-            }
-
-            return <code className={styles.inlineCode}>{children}</code>;
-        },
-        pre: ({ children }) => <pre className={styles.pre}>{children}</pre>,
-
-        // ── Tables ───────────────────────────────────────────────
-        table: ({ children }) => (
-            <div className={styles.tableWrapper}>
-                <table className={styles.table}>{children}</table>
-            </div>
-        ),
-        thead: ({ children }) => <thead className={styles.thead}>{children}</thead>,
-        tbody: ({ children }) => <tbody className={styles.tbody}>{children}</tbody>,
-        tr: ({ children }) => <tr className={styles.tr}>{children}</tr>,
-        th: ({ children, style }) => (
-            <th className={styles.th} style={style}>
-                <Text as="span" kind="labelXSmall" weight="semibold">
-                    {children}
-                </Text>
-            </th>
-        ),
-        td: ({ children, style }) => (
-            <td className={styles.td} style={style}>
-                {children}
-            </td>
-        ),
-
-        // ── HTML passthrough elements ────────────────────────────
-        details: ({ children }) => {
-            const childArray = Children.toArray(children);
-            let summaryContent: ReactNode = 'Details';
-            const bodyContent: ReactNode[] = [];
-
-            for (const child of childArray) {
-                if (isValidElement<{ children?: ReactNode }>(child) && child.type === 'summary') {
-                    summaryContent = child.props.children;
-                } else {
-                    bodyContent.push(child);
-                }
-            }
-
-            return (
-                <Accordion title={summaryContent} kind="card" size="small">
-                    <div className={styles.accordionBody}>{bodyContent}</div>
-                </Accordion>
-            );
-        },
-        summary: () => null,
-
-        kbd: ({ children }) => <kbd className={styles.kbd}>{children}</kbd>,
-        sup: ({ children }) => <sup className={styles.sup}>{children}</sup>,
-        sub: ({ children }) => <sub className={styles.sub}>{children}</sub>,
-        mark: ({ children }) => <mark className={styles.mark}>{children}</mark>,
-
-        // ── Definition lists (HTML passthrough) ──────────────────
-        dl: ({ children }) => <dl className={styles.dl}>{children}</dl>,
-        dt: ({ children }) => (
-            <dt className={styles.dt}>
-                <Text as="span" kind={size} weight="semibold">
-                    {children}
-                </Text>
-            </dt>
-        ),
-        dd: ({ children }) => (
-            <dd className={styles.dd}>
-                <Text as="span" kind={ddSize} color={pvar('new.colors.contentSecondary')}>
-                    {children}
-                </Text>
-            </dd>
-        ),
-    };
-}
-
-export type MarkdownProps = {
-    /** The markdown string to render. */
-    children: string;
-    /** An optional CSS class name for the wrapper element. */
-    className?: string;
-    /**
-     * The base text size for body content (paragraphs, list items, inline text).
-     * Maps to Paris paragraph typography variants. Headings and labels are unaffected.
-     * @default 'paragraphSmall'
-     */
-    size?: MarkdownSize;
-};
-
-/**
- * A `Markdown` component renders a markdown string using Paris design system components.
- *
- * It supports GitHub-flavored markdown (tables, task lists, strikethrough, footnotes)
- * and HTML passthrough for elements like `<kbd>`, `<mark>`, `<details>`, and `<dl>`.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```tsx
- * import { Markdown } from 'paris/markdown';
- *
- * export const Example: FC = () => (
- *     <Markdown>{`# Hello World\n\nThis is **bold** and *italic* text.`}</Markdown>
- * );
- * ```
- *
- * @constructor
- */
-export const Markdown: FC<MarkdownProps> = memo(({ children, className, size = 'paragraphSmall' }) => {
-    const components = useMemo(() => createMarkdownComponents(size), [size]);
-
-    return (
-        <div
-            className={clsx(styles.markdown, className)}
-            style={
-                {
-                    '--markdown-base-font-size': `var(--pte-new-typography-styles-${size}-fontSize)`,
-                } as React.CSSProperties
-            }
-        >
-            <ReactMarkdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]} components={components}>
-                {children}
-            </ReactMarkdown>
-        </div>
-    );
-});

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

@@ -1,24 +0,0 @@
-.toolbar {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    padding: 6px 8px;
-    border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
-    background-color: var(--pte-new-colors-backgroundPrimary);
-    flex-wrap: wrap;
-    position: relative;
-}
-
-.group {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-}
-
-.separator {
-    width: 1px;
-    height: 18px;
-    background-color: var(--pte-new-colors-borderSubtle);
-    margin: 0 4px;
-    flex-shrink: 0;
-}

package/src/stories/markdowneditor/FixedToolbar.tsx

@@ -1,274 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import {
-    Bold,
-    Code,
-    Heading1,
-    Heading2,
-    Heading3,
-    Image,
-    Italic,
-    Link,
-    List,
-    ListChecks,
-    ListOrdered,
-    Minus,
-    Quote,
-    SquareCode,
-    Strikethrough,
-    Table,
-} from 'lucide-react';
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import { Fragment, useCallback, useRef, useState } from 'react';
-import styles from './FixedToolbar.module.scss';
-import type { MarkdownEditorFeature } from './features';
-import { LinkPopover } from './LinkPopover';
-import { useMarkdownEditorContext } from './MarkdownEditorContext';
-import { ToolbarButton } from './ToolbarButton';
-
-export type FixedToolbarProps = {
-    /** An optional CSS class name. */
-    className?: string;
-    /** Prop overrides for sub-elements. */
-    overrides?: {
-        root?: ComponentPropsWithoutRef<'div'>;
-        group?: ComponentPropsWithoutRef<'div'>;
-        separator?: ComponentPropsWithoutRef<'div'>;
-    };
-};
-
-type ToolbarItem = {
-    feature: MarkdownEditorFeature;
-    label: ReactNode;
-    tooltip: string;
-    action: () => void;
-    isActive: () => boolean;
-};
-
-const ICON_SIZE = 14;
-
-/**
- * A fixed toolbar that renders above the editor content.
- * Reads the editor instance and enabled features from MarkdownEditorContext.
- *
- * Renders button groups: Inline marks | Blocks | Lists | Inserts.
- * Groups with no enabled features are hidden.
- */
-export const FixedToolbar: FC<FixedToolbarProps> = ({ className, overrides }) => {
-    const { editor, features, handleImageUpload } = useMarkdownEditorContext();
-    const [showLinkPopover, setShowLinkPopover] = useState(false);
-    const fileInputRef = useRef<HTMLInputElement>(null);
-
-    const handleLinkClick = useCallback(() => {
-        setShowLinkPopover((prev) => !prev);
-    }, []);
-
-    const handleImageClick = useCallback(() => {
-        fileInputRef.current?.click();
-    }, []);
-
-    const handleFileChange = useCallback(
-        async (e: React.ChangeEvent<HTMLInputElement>) => {
-            const file = e.target.files?.[0];
-            if (!file || !editor || !handleImageUpload) return;
-            try {
-                const url = await handleImageUpload(file);
-                editor.chain().focus().setImage({ src: url }).run();
-            } catch {
-                // Upload failed — consumer's handler should surface errors
-            }
-            // Reset so the same file can be re-selected
-            e.target.value = '';
-        },
-        [editor, handleImageUpload],
-    );
-
-    if (!editor) return null;
-
-    const inlineMarks: ToolbarItem[] = [
-        {
-            feature: 'bold',
-            label: <Bold size={ICON_SIZE} />,
-            tooltip: 'Bold (⌘B)',
-            action: () => editor.chain().focus().toggleBold().run(),
-            isActive: () => editor.isActive('bold'),
-        },
-        {
-            feature: 'italic',
-            label: <Italic size={ICON_SIZE} />,
-            tooltip: 'Italic (⌘I)',
-            action: () => editor.chain().focus().toggleItalic().run(),
-            isActive: () => editor.isActive('italic'),
-        },
-        {
-            feature: 'strikethrough',
-            label: <Strikethrough size={ICON_SIZE} />,
-            tooltip: 'Strikethrough (⌘⇧X)',
-            action: () => editor.chain().focus().toggleStrike().run(),
-            isActive: () => editor.isActive('strike'),
-        },
-        {
-            feature: 'code',
-            label: <Code size={ICON_SIZE} />,
-            tooltip: 'Inline code (⌘E)',
-            action: () => editor.chain().focus().toggleCode().run(),
-            isActive: () => editor.isActive('code'),
-        },
-    ];
-
-    const blocks: ToolbarItem[] = [
-        {
-            feature: 'heading',
-            label: <Heading1 size={ICON_SIZE} />,
-            tooltip: 'Heading 1',
-            action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-            isActive: () => editor.isActive('heading', { level: 1 }),
-        },
-        {
-            feature: 'heading',
-            label: <Heading2 size={ICON_SIZE} />,
-            tooltip: 'Heading 2',
-            action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-            isActive: () => editor.isActive('heading', { level: 2 }),
-        },
-        {
-            feature: 'heading',
-            label: <Heading3 size={ICON_SIZE} />,
-            tooltip: 'Heading 3',
-            action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-            isActive: () => editor.isActive('heading', { level: 3 }),
-        },
-        {
-            feature: 'blockquote',
-            label: <Quote size={ICON_SIZE} />,
-            tooltip: 'Blockquote',
-            action: () => editor.chain().focus().toggleBlockquote().run(),
-            isActive: () => editor.isActive('blockquote'),
-        },
-        {
-            feature: 'horizontalRule',
-            label: <Minus size={ICON_SIZE} />,
-            tooltip: 'Horizontal rule',
-            action: () => editor.chain().focus().setHorizontalRule().run(),
-            isActive: () => false,
-        },
-    ];
-
-    const lists: ToolbarItem[] = [
-        {
-            feature: 'bulletList',
-            label: <List size={ICON_SIZE} />,
-            tooltip: 'Bullet list (⌘⇧8)',
-            action: () => editor.chain().focus().toggleBulletList().run(),
-            isActive: () => editor.isActive('bulletList'),
-        },
-        {
-            feature: 'orderedList',
-            label: <ListOrdered size={ICON_SIZE} />,
-            tooltip: 'Ordered list (⌘⇧7)',
-            action: () => editor.chain().focus().toggleOrderedList().run(),
-            isActive: () => editor.isActive('orderedList'),
-        },
-        {
-            feature: 'taskList',
-            label: <ListChecks size={ICON_SIZE} />,
-            tooltip: 'Task list',
-            action: () => editor.chain().focus().toggleTaskList().run(),
-            isActive: () => editor.isActive('taskList'),
-        },
-    ];
-
-    const inserts: ToolbarItem[] = [
-        {
-            feature: 'link',
-            label: <Link size={ICON_SIZE} />,
-            tooltip: 'Link',
-            action: handleLinkClick,
-            isActive: () => editor.isActive('link'),
-        },
-        ...(handleImageUpload
-            ? [
-                  {
-                      feature: 'image' as const,
-                      label: <Image size={ICON_SIZE} />,
-                      tooltip: 'Image',
-                      action: handleImageClick,
-                      isActive: () => false,
-                  },
-              ]
-            : []),
-        {
-            feature: 'table',
-            label: <Table size={ICON_SIZE} />,
-            tooltip: 'Insert table',
-            action: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
-            isActive: () => false,
-        },
-        {
-            feature: 'codeBlock',
-            label: <SquareCode size={ICON_SIZE} />,
-            tooltip: 'Code block',
-            action: () => editor.chain().focus().toggleCodeBlock().run(),
-            isActive: () => editor.isActive('codeBlock'),
-        },
-    ];
-
-    const groupEntries = [
-        { name: 'inline', items: inlineMarks },
-        { name: 'blocks', items: blocks },
-        { name: 'lists', items: lists },
-        { name: 'inserts', items: inserts },
-    ];
-
-    // Filter each group to only include items whose feature is enabled
-    const filteredGroups = groupEntries
-        .map((g) => ({ name: g.name, items: g.items.filter((item) => features.has(item.feature)) }))
-        .filter((g) => g.items.length > 0);
-
-    if (filteredGroups.length === 0) return null;
-
-    return (
-        <div
-            role="toolbar"
-            aria-label="Formatting options"
-            {...overrides?.root}
-            className={clsx(styles.toolbar, className, overrides?.root?.className)}
-        >
-            {filteredGroups.map((group, groupIndex) => (
-                <Fragment key={group.name}>
-                    {groupIndex > 0 && (
-                        <div
-                            {...overrides?.separator}
-                            className={clsx(styles.separator, overrides?.separator?.className)}
-                            aria-hidden="true"
-                        />
-                    )}
-                    <div {...overrides?.group} className={clsx(styles.group, overrides?.group?.className)}>
-                        {group.items.map((item) => (
-                            <ToolbarButton
-                                key={item.tooltip}
-                                isActive={item.isActive()}
-                                onAction={item.action}
-                                tooltip={item.tooltip}
-                            >
-                                {item.label}
-                            </ToolbarButton>
-                        ))}
-                    </div>
-                </Fragment>
-            ))}
-            {showLinkPopover && features.has('link') && <LinkPopover onClose={() => setShowLinkPopover(false)} />}
-            {handleImageUpload && (
-                <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept="image/*"
-                    onChange={handleFileChange}
-                    style={{ display: 'none' }}
-                    tabIndex={-1}
-                />
-            )}
-        </div>
-    );
-};

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

@@ -1,21 +0,0 @@
-.toolbar {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    padding: 4px 6px;
-    background-color: var(--pte-new-colors-surfacePrimary, var(--pte-new-colors-backgroundPrimary));
-    border: 1px solid var(--pte-new-colors-borderSubtle);
-    border-radius: var(--pte-new-borders-radius-rounded, 8px);
-    box-shadow: var(
-        --pte-new-shadows-shallowPopup,
-        0 4px 12px rgba(0, 0, 0, 0.15)
-    );
-}
-
-.separator {
-    width: 1px;
-    height: 18px;
-    background-color: var(--pte-new-colors-borderSubtle);
-    margin: 0 2px;
-    flex-shrink: 0;
-}