[🔥AUDIT🔥] Storybook: Add remark-gfm plugin to add GFM MDX support (#2451

)

🖍 _This is an audit!_ 🖍

## Summary:

After the Storybook v8 upgrade, we lost the ability to use GFM in MDX files.
This PR adds the `remark-gfm` plugin to the MDX loader to re-enable GFM support.

For more context, GFM (GitHub Flavored Markdown) is a superset of the original
Markdown specification that adds additional features like tables, task lists,
and strikethrough text.

https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly

Issue: WB-XXXX

## Test plan:

Navigate to any docs page that renders markdown tables and verify that they are
rendered correctly.

/?path=/docs/packages-clickable-clickable-accessibility--docs

BEFORE | AFTER
<img width="1703" alt="Screenshot 2025-01-31 at 3 44 47 PM" src="https://github.com/user-attachments/assets/85281e16-1444-485e-bb22-b28514170105" />

Author: jandrade

Auditors: #wonder-blocks

Required Reviewers:

Approved By:

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ⏹️  [cancelled] Chromatic - Get results on regular PRs, ⏹️  [cancelled] Check build sizes, ⏹️  [cancelled] Test, ⏹️  [cancelled] Lint, ✅ gerald, ⏹️  [cancelled] Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏹️  [cancelled] Chromatic - Build and test on regular PRs / chromatic (ubuntu-latest, 20.x), ⏹️  [cancelled] Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2451

.storybook/main.ts

@@ -1,3 +1,4 @@
+import remarkGfm from "remark-gfm";
 import type {StorybookConfig} from "@storybook/react-vite";
 
 const config: StorybookConfig = {
@@ -11,6 +12,16 @@ const config: StorybookConfig = {
         "@storybook/addon-designs",
         "storybook-addon-pseudo-states",
         "@storybook/experimental-addon-test",
+        {
+            name: "@storybook/addon-docs",
+            options: {
+                mdxPluginOptions: {
+                    mdxCompileOptions: {
+                        remarkPlugins: [remarkGfm],
+                    },
+                },
+            },
+        },
     ],
     staticDirs: ["../static"],
     core: {

package.json

@@ -115,6 +115,7 @@
     "playwright": "^1.49.0",
     "prettier": "^2.8.1",
     "react-refresh": "^0.14.0",
+    "remark-gfm": "^4.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-node-externals": "^7.1.2",