fix(storybook): support mdx (#5456)

Co-authored-by: Dominic Saadi <[email protected]>
redwoodjs · May 24, 2022 · 7560fc9 · 7560fc9
1 parent 81c4719
commit 7560fc9
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 2 deletions.
diff --git a/__fixtures__/test-project/web/src/Redwood.stories.mdx b/__fixtures__/test-project/web/src/Redwood.stories.mdx
@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="Redwood" />
+
+<p align="center">
+  <img src="https://avatars2.githubusercontent.com/u/45050444?v=4" width="200" />
+  <h1 align="center">Redwood</h1>
+</p>
+
+_by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, and more than
+250 amazing contributors (see end of file for a full list)._
+
+**Redwood is an opinionated, full-stack, JavaScript/TypeScript web application
+framework designed to keep you moving fast as your app grows from side project
+to startup.**
diff --git a/packages/testing/config/storybook/main.js b/packages/testing/config/storybook/main.js
@@ -21,7 +21,9 @@ const baseConfig = {
     builder: 'webpack5',
   },
   stories: [
-    `${importStatementPath(rwjsPaths.web.src)}/**/*.stories.{tsx,jsx,js}`,
+    `${importStatementPath(
+      rwjsPaths.web.src
+    )}/**/*.stories.@(js|jsx|ts|tsx|mdx)`,
   ],
   addons: [
     '@storybook/addon-essentials',
@@ -97,7 +99,13 @@ const baseConfig = {
     ]
 
     // ** LOADERS **
-    sbConfig.module.rules = rwConfig.module.rules
+    const sbMdxRule = sbConfig.module.rules.find(
+      (rule) => rule.test.toString() === /(stories|story)\.mdx$/.toString()
+    )
+    console.assert(sbMdxRule, 'Storybook MDX rule not found')
+    sbConfig.module.rules = [...rwConfig.module.rules, sbMdxRule].filter(
+      Boolean
+    )
 
     // ** NODE **
     sbConfig.node = rwConfig.node

diff --git a/packages/testing/package.json b/packages/testing/package.json
@@ -33,6 +33,7 @@
     "@redwoodjs/router": "1.4.3",
     "@redwoodjs/web": "1.4.3",
     "@storybook/addon-a11y": "6.5.4",
+    "@storybook/addon-docs": "6.5.4",
     "@storybook/addon-essentials": "6.5.4",
     "@storybook/builder-webpack5": "6.5.4",
     "@storybook/manager-webpack5": "6.5.4",

diff --git a/tasks/smoke-test/tests/storybook.spec.ts b/tasks/smoke-test/tests/storybook.spec.ts
@@ -162,3 +162,27 @@ storybookTest(
     )
   }
 )
+
+storybookTest(
+  'Loads MDX Stories',
+  async ({ port, page, server }: PlaywrightTestArgs & StorybookFixture) => {
+    // We do this to make sure playwright doesn't bring the server down
+    console.log(server)
+    const STORYBOOK_URL = `http://localhost:${port}/`
+
+    await page.goto(STORYBOOK_URL)
+
+    // Click text=Redwood
+    await page.locator('text=Redwood').click()
+
+    await expect(page).toHaveURL(
+      `http://localhost:${port}/?path=/story/redwood--page`
+    )
+
+    await expect(
+      page.frameLocator('#storybook-preview-iframe').locator('body')
+    ).toContainText(
+      'Redwood is an opinionated, full-stack, JavaScript/TypeScript web application framework designed to keep you moving fast as your app grows from side project to startup.'
+    )
+  }
+)
diff --git a/tasks/test-project/codemods/Redwood.stories.mdx b/tasks/test-project/codemods/Redwood.stories.mdx
@@ -0,0 +1,15 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="Redwood" />
+
+<p align="center">
+  <img src="https://avatars2.githubusercontent.com/u/45050444?v=4" width="200" />
+  <h1 align="center">Redwood</h1>
+</p>
+
+_by Tom Preston-Werner, Peter Pistorius, Rob Cameron, David Price, and more than
+250 amazing contributors (see end of file for a full list)._
+
+**Redwood is an opinionated, full-stack, JavaScript/TypeScript web application
+framework designed to keep you moving fast as your app grows from side project
+to startup.**
diff --git a/tasks/test-project/tasks.js b/tasks/test-project/tasks.js
@@ -127,6 +127,21 @@ async function webTasks(outputPath, { linkWithLatestFwBuild, verbose }) {
           )
         },
       },
+      {
+        title: 'Creating MDX Storybook stories',
+        task: () => {
+          const redwoodMdxStoryContent = fs.readFileSync(
+            `${path.resolve(__dirname, 'codemods', 'Redwood.stories.mdx')}`
+          )
+
+          fs.writeFileSync(
+            fullPath('web/src/Redwood.stories.mdx', { addExtension: false }),
+            redwoodMdxStoryContent
+          )
+
+          return
+        },
+      },
     ])
   }
 

diff --git a/yarn.lock b/yarn.lock
@@ -6363,6 +6363,7 @@ __metadata:
     "@redwoodjs/router": 1.4.3
     "@redwoodjs/web": 1.4.3
     "@storybook/addon-a11y": 6.5.4
+    "@storybook/addon-docs": 6.5.4
     "@storybook/addon-essentials": 6.5.4
     "@storybook/builder-webpack5": 6.5.4
     "@storybook/manager-webpack5": 6.5.4