[WEB-4801] Add Admonition and Table MDX components

[jamiehenson]

Human preamble

Adds the Admonition and Table components for use in MDX templates. Table replaces the previous tables.tsx component, and Admonition is brand new. Look at the test-mdx-components.mdx file for usage examples.

To test, take a look at: https://ably-docs-web-4801-admo-cxtljx.herokuapp.com/docs/test-mdx-components

Admonitions on the test page:

Tables on the test page:

Summary

This PR adds two new MDX components for use in our documentation:

• Admonition component: Color-based callout boxes with variants (neutral, blue, green, red, yellow)
• Table component: Radix Themes-style table with proper styling and rounded corners

Changes

• Added Admonition.tsx with 5 color variants, optional titles, and dark mode support
• Added Table.tsx with composition API (Table.Root, Table.Header, Table.Body, etc.)
• Updated MDXWrapper.tsx to register both new components
• Removed old tables.tsx and replaced with new Table component
• Added test page to showcase all component variants

Component Features

Admonition

• Color variants: neutral, blue, green, red, yellow
• Optional custom titles
• Inline title and content layout
• Full dark mode support
• Rounded corners with left border

Table

• Radix Themes-style composition pattern
• Proper border-radius with border-separate spacing
• Responsive with horizontal scrolling
• Works with or without header rows
• Dark mode support

Test Plan

• View test page at /docs/test-mdx-components
• Verify all admonition variants render correctly
• Verify tables with and without headers render correctly
• Verify GFM table syntax works with new components

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch web-4801-admonitions-tables

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jamiehenson]

This file is purely to demonstrate the new components, it will be deleted prior to merge.

[jamiehenson]

Predominantly generated by Claude but with Radix as a very close guide.

[aralovelace]

I played around with the table and adding more th and it will look like this? how should it looks like when its longer than its width?

[jamiehenson]

@aralovelace isn't this just a corrupted table though? There shouldn't ever be more <th>s than <td>s

[aralovelace]

ahh yes its just need data in the body yes looks good to me