fix(storybook): support mdx

[virtuoushub]

closes #5348

[netlify]

✅ Deploy Preview for redwoodjs-docs canceled.

Name	Link
🔨 Latest commit	3303cfe
🔍 Latest deploy log	https://app.netlify.com/sites/redwoodjs-docs/deploys/628cde0bdafdf200085b3cb4

[simoncrypta]

Hey Peter ! Is it ready for review ? I'm excited to try out 😄

[virtuoushub]

Hey Peter ! Is it ready for review ? I'm excited to try out 😄

👋🏻 hi @simoncrypta , yes it is ready. I was going to add an MDX file to our smoke test to verify; but please feel free to try it out if you are excited.

[virtuoushub]

@simoncrypta in order to get this to work it looks like we need to yarn add -D @storybook/addon-docs in web.

@shilman - any hint as to why even with @storybook/addon-essentials installed which includes @storybook/addon-docs according to the docs, we need to explicitly install @storybook/addon-docs to get this to work?

We are wiring it up here but we also do some stuff in there that may be affecting how Storybook expected to be configured.

(cc @jtoar)

[virtuoushub]

storybookjs/storybook#14429 looks related

[dac09]

Looking good, but a couple of minor comments!

[dac09]

👍I think the duplication is okay really - unless you wanted to move the mdx into a string - but not sure how much cleaner that is!

I know it's weird about the codemod folder - but short of renaming applyCodemod to applyCodeshift - not sure what else we could do that's an improvement. Atleast this way we know all the code in this folder will change the project somehow.

I just fixed the rebuild fixture with Dom’s help a few PRs ago btw - so you can actually regenerate the fixture now with yarn build:test-project ``-``-rebuild-fixture

[virtuoushub]

@dac09 - I know this is your favorite topic so please don't 🔫 the messenger, but it seems like we have some flakey CI/CD tests.

These failed due to timeout, when every other run passed -

• https://github.com/redwoodjs/redwood/runs/6533374445?check_suite_focus=true#step:8:1877
• https://github.com/redwoodjs/redwood/runs/6533614751?check_suite_focus=true#step:8:1816

It seems mostly unrelated to this PR, but if adding MDX to Storybook increases the load on CI/CD we might want to rethink adding it as a smoke test.

[dac09]

Timeouts usually mean storybook hasn't started up correctly I'm afraid. The timeout happens because the tests are looking for the elements, but can't find it.

Also just noticed there aren't actually any smoke tests for mdx haha. Up to you if you want to add it - I really don't want to be master of smoke tests.

[virtuoushub]

@jtoar this fix most likely warrants a codemod to install @storybook/addon-docs to web if it is not already installed. Thoughts? addon-docs is already added, no need to make a codemod

[dac09]

Everything looks LGTM! Awaiting confirmation on where @storybook/addon-docs goes.

I personally don't think we need to modify the template, because rwjs/testing (which now includes addon-docs) is already is a dependency - but will defer to someone else on this.