paris 0.17.9 → 0.18.0

package/src/stories/markdown/Markdown.module.scss

@@ -0,0 +1,384 @@
+/* ── Markdown renderer styles ─────────────────────────────────
+ * Uses Paris design tokens (--pte-*) for consistent theming.
+ * All styles are scoped via CSS modules.
+ * ──────────────────────────────────────────────────────────── */
+
+.markdown {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    width: 100%;
+    line-height: 1.7;
+    color: var(--pte-new-colors-contentPrimary);
+
+    // ── Headings ──────────────────────────────────────────
+    .heading {
+        margin-top: 1.5em;
+        margin-bottom: 0.6em;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    // ── Paragraphs ────────────────────────────────────────
+    .paragraph {
+        margin-bottom: 1em;
+        line-height: 1.7;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    // ── Strikethrough ─────────────────────────────────────
+    .strikethrough {
+        text-decoration: line-through;
+        text-decoration-color: var(--pte-new-colors-contentTertiary);
+    }
+
+    // ── Images ────────────────────────────────────────────
+    .imageWrapper {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin: 1em 0;
+    }
+
+    .image {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--pte-new-borders-radius-rounded);
+        border: 1px solid var(--pte-new-colors-borderSubtle);
+    }
+
+    // ── Blockquotes (Callout base styles + overrides) ─────
+    .blockquote {
+        margin: 1em 0;
+        .blockquote {
+            margin: 0.5em 0;
+        }
+
+        .paragraph {
+            margin-bottom: 0.5em;
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    // ── Horizontal rules ──────────────────────────────────
+    .hr {
+        border: none;
+        border-top: 1px solid var(--pte-new-colors-borderMedium);
+        margin: 1.5em 0;
+    }
+
+    // ── Lists ─────────────────────────────────────────────
+    .list {
+        margin: 0.5em 0 1em;
+        padding-left: 1.5em;
+    }
+
+    .unorderedList {
+        list-style-type: disc;
+
+        .unorderedList {
+            list-style-type: circle;
+            margin: 0.25em 0;
+
+            .unorderedList {
+                list-style-type: square;
+            }
+        }
+    }
+
+    .orderedList {
+        list-style-type: decimal;
+
+        .orderedList {
+            list-style-type: lower-alpha;
+            margin: 0.25em 0;
+
+            .orderedList {
+                list-style-type: lower-roman;
+            }
+        }
+    }
+
+    .listItem {
+        margin-bottom: 0.25em;
+        line-height: 1.7;
+        font-size: var(--markdown-base-font-size, 14px);
+
+        .paragraph {
+            margin-bottom: 0.25em;
+        }
+    }
+
+    // ── Task lists ────────────────────────────────────────
+    .taskList {
+        list-style: none;
+        padding-left: 0;
+    }
+
+    .taskListItem {
+        display: flex;
+        flex-direction: row;
+        align-items: baseline;
+        gap: 8px;
+
+        input[type='checkbox'] {
+            appearance: none;
+            width: 16px;
+            height: 16px;
+            border: 1.5px solid var(--pte-new-colors-borderStrong);
+            border-radius: 4px;
+            background: transparent;
+            cursor: default;
+            flex-shrink: 0;
+            position: relative;
+            top: 2px;
+
+            &:checked {
+                background-color: var(--pte-new-colors-contentAccent);
+                border-color: var(--pte-new-colors-contentAccent);
+
+                &::after {
+                    content: '✓';
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    font-size: 11px;
+                    font-weight: 700;
+                    color: white;
+                }
+            }
+        }
+    }
+
+    // ── Inline code ───────────────────────────────────────
+    .inlineCode {
+        font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
+        font-size: 0.875em;
+        padding: 2px 6px;
+        border-radius: 6px;
+        background-color: var(--pte-new-colors-backgroundSecondary);
+        border: 1px solid var(--pte-new-colors-borderSubtle);
+        color: var(--pte-new-colors-contentPrimary);
+        word-break: break-word;
+    }
+
+    // ── Code blocks ───────────────────────────────────────
+    .pre {
+        margin: 1em 0;
+        padding: 0;
+        background: transparent;
+        overflow: visible;
+    }
+
+    .codeBlockWrapper {
+        position: relative;
+        border-radius: var(--pte-new-borders-radius-rounded, 8px);
+        background-color: var(--pte-new-colors-backgroundSecondary);
+        border: 1px solid var(--pte-new-colors-borderSubtle);
+        overflow: hidden;
+    }
+
+    .codeLanguage {
+        display: flex;
+        align-items: center;
+        padding: 6px 16px;
+        border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
+        background-color: var(--pte-new-colors-backgroundSecondary);
+        color: var(--pte-new-colors-contentTertiary);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+
+    .codeBlock {
+        display: block;
+        padding: 16px;
+        overflow-x: auto;
+        font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
+        font-size: 13px;
+        line-height: 1.6;
+        tab-size: 4;
+        white-space: pre;
+        color: var(--pte-new-colors-contentPrimary);
+
+        &::-webkit-scrollbar {
+            height: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--pte-new-colors-borderMedium);
+            border-radius: 3px;
+        }
+    }
+
+    // ── Tables ────────────────────────────────────────────
+    .tableWrapper {
+        margin: 1em 0;
+        overflow-x: auto;
+        border-radius: var(--pte-new-borders-radius-rounded, 8px);
+        border: 1px solid var(--pte-new-colors-borderSubtle);
+
+        &::-webkit-scrollbar {
+            height: 6px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: var(--pte-new-colors-borderMedium);
+            border-radius: 3px;
+        }
+    }
+
+    .table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: var(--pte-new-typography-paragraphSmall-fontSize, 13px);
+    }
+
+    .thead {
+        background-color: var(--pte-new-colors-backgroundSecondary);
+    }
+
+    .th {
+        padding: 10px 16px;
+        text-align: left;
+        border-bottom: 1px solid var(--pte-new-colors-borderMedium);
+        white-space: nowrap;
+        color: var(--pte-new-colors-contentSecondary);
+    }
+
+    .td {
+        padding: 10px 16px;
+        border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
+        color: var(--pte-new-colors-contentPrimary);
+    }
+
+    .tr {
+        &:last-child .td {
+            border-bottom: none;
+        }
+    }
+
+    .tbody .tr {
+        transition: background-color 0.15s ease;
+
+        &:hover {
+            background-color: var(--pte-new-colors-backgroundSecondary);
+        }
+    }
+
+    // ── Accordion body (details/summary) ──────────────────
+    .accordionBody {
+        padding: 4px 0;
+
+        .paragraph {
+            margin-bottom: 0.5em;
+        }
+    }
+
+    // ── Keyboard keys ─────────────────────────────────────
+    .kbd {
+        display: inline-block;
+        font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
+        font-size: 0.8em;
+        padding: 2px 8px;
+        border-radius: 6px;
+        border: 1px solid var(--pte-new-colors-borderMedium);
+        background: linear-gradient(
+            180deg,
+            var(--pte-new-colors-backgroundPrimary) 0%,
+            var(--pte-new-colors-backgroundSecondary) 100%
+        );
+        box-shadow: 0 1px 0 1px var(--pte-new-colors-borderSubtle);
+        color: var(--pte-new-colors-contentSecondary);
+        line-height: 1.6;
+        white-space: nowrap;
+    }
+
+    // ── Superscript & subscript ───────────────────────────
+    .sup,
+    .sub {
+        font-size: 0.75em;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    .sup {
+        top: -0.5em;
+    }
+
+    .sub {
+        bottom: -0.25em;
+    }
+
+    // ── Highlight / mark ──────────────────────────────────
+    .mark {
+        background-color: var(--pte-new-colors-backgroundWarningMedium, #fef3c7);
+        color: inherit;
+        padding: 1px 4px;
+        border-radius: 3px;
+    }
+
+    // ── Definition lists ──────────────────────────────────
+    .dl {
+        margin: 1em 0;
+    }
+
+    .dt {
+        margin-top: 1em;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    .dd {
+        margin-left: 1.5em;
+        margin-top: 0.25em;
+        padding-left: 1em;
+        border-left: 2px solid var(--pte-new-colors-borderSubtle);
+    }
+
+    // ── Footnotes (generated by remark-gfm) ───────────────
+    section[data-footnotes] {
+        margin-top: 2em;
+        padding-top: 1em;
+        border-top: 1px solid var(--pte-new-colors-borderMedium);
+        font-size: 0.875em;
+        color: var(--pte-new-colors-contentSecondary);
+
+        h2 {
+            font-size: 0.875em;
+            font-weight: 600;
+            margin-bottom: 0.5em;
+        }
+
+        ol {
+            padding-left: 1.5em;
+        }
+
+        li {
+            margin-bottom: 0.25em;
+        }
+
+        a {
+            color: var(--pte-new-colors-contentAccent);
+        }
+    }
+}

package/src/stories/markdown/Markdown.stories.ts

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Markdown } from './Markdown';
+
+const meta: Meta<typeof Markdown> = {
+    title: 'Content/Markdown',
+    component: Markdown,
+    tags: ['autodocs'],
+    argTypes: {
+        size: {
+            control: 'select',
+            options: ['paragraphLarge', 'paragraphMedium', 'paragraphSmall', 'paragraphXSmall', 'paragraphXXSmall'],
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof Markdown>;
+
+export const Default: Story = {
+    args: {
+        children: `# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+This is a paragraph with **bold text**, *italic text*, and ~~strikethrough~~.
+
+Here is a [link to Paris](https://paris.slingshot.fm) and some \`inline code\`.
+
+---
+
+> This is a blockquote. It can contain **bold** and *italic* text.
+
+- Unordered list item 1
+- Unordered list item 2
+  - Nested item A
+  - Nested item B
+    - Deeply nested item
+- Unordered list item 3
+
+1. Ordered list item 1
+2. Ordered list item 2
+   1. Nested ordered item
+   2. Another nested item
+3. Ordered list item 3`,
+    },
+};
+
+export const CodeBlocks: Story = {
+    args: {
+        children: `## Code Examples
+
+Inline code: \`const x = 42;\`
+
+\`\`\`typescript
+interface User {
+    id: string;
+    name: string;
+    email: string;
+}
+
+function getUser(id: string): Promise<User> {
+    return fetch(\`/api/users/\${id}\`).then(res => res.json());
+}
+\`\`\`
+
+\`\`\`css
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 2rem;
+}
+\`\`\`
+
+\`\`\`bash
+bun install paris
+bun run storybook
+\`\`\``,
+    },
+};
+
+export const Tables: Story = {
+    args: {
+        children: `## Table Example
+
+| Component | Description | Status |
+|-----------|-------------|--------|
+| Text | Typography rendering | Stable |
+| Button | Interactive button | Stable |
+| Markdown | Markdown renderer | New |
+| Dialog | Modal dialog | Stable |
+
+## Alignment
+
+| Left | Center | Right |
+|:-----|:------:|------:|
+| A | B | C |
+| D | E | F |`,
+    },
+};
+
+export const RichContent: Story = {
+    args: {
+        children: `## Task Lists
+
+- [x] Design Markdown component
+- [x] Implement parser with react-markdown
+- [ ] Add syntax highlighting
+- [ ] Write documentation
+
+## Blockquotes
+
+> **Note:** This is an important callout rendered using the Paris Callout component.
+
+> Nested blockquotes work too.
+>
+> > This is a nested blockquote.
+
+## Horizontal Rule
+
+Content above the rule.
+
+---
+
+Content below the rule.
+
+## Images
+
+![Placeholder](https://placehold.co/600x200/1a1a2e/e0e0e0?text=Paris+Design+System)`,
+    },
+};
+
+export const HTMLPassthrough: Story = {
+    args: {
+        children: `## Keyboard Shortcuts
+
+Press <kbd>Cmd</kbd> + <kbd>K</kbd> to open the command palette.
+
+## Highlighted Text
+
+This is <mark>highlighted text</mark> within a paragraph.
+
+## Superscript and Subscript
+
+E = mc<sup>2</sup> and H<sub>2</sub>O
+
+## Details / Summary
+
+<details>
+<summary>Click to expand</summary>
+
+This content is hidden by default and rendered inside a Paris Accordion component.
+
+- Item one
+- Item two
+- Item three
+
+</details>
+
+## Definition Lists
+
+<dl>
+<dt>Paris</dt>
+<dd>Slingshot's React design system</dd>
+<dt>PTE</dt>
+<dd>Property Token Engine — generates CSS variables from TypeScript theme definitions</dd>
+</dl>`,
+    },
+};
+
+const sampleMarkdown = `## The Markdown Component
+
+This is a paragraph demonstrating the **size** prop. It controls the base font size for all body text — paragraphs, list items, bold, italic, and definition list terms.
+
+- List items follow the base size
+- So do **bold** and *italic* inline text
+- Headings and labels are unaffected
+
+> Blockquote content also inherits the base size.
+
+Here is some \`inline code\` within a paragraph.`;
+
+export const Large: Story = {
+    args: {
+        size: 'paragraphLarge',
+        children: sampleMarkdown,
+    },
+};
+
+export const Small: Story = {
+    args: {
+        size: 'paragraphSmall',
+        children: sampleMarkdown,
+    },
+};