Linting mdx stories

[bodograumann]

trafficstars

Is your feature request related to a problem? Please describe. When refactoring stories, I accidentally wrote <Story name="Foobar" /> instead of <Story name="Foobar">{Template.bind({})}</Story>. It still build fine, but the whole storybook did not load anymore and all I got were cryptic error messages.

Error loading story index: TypeError: render is undefined

Describe the solution you'd like A linter could help find common mistakes like these much more quickly. Here are some suggestions:

Reuse rules from csf:

• storybook/await-interactions
• storybook/use-storybook-expect
• storybook/use-storybook-testing-library

New rules:

• Story contains minimal data to be renderable (not self-closing tag; name required?)
• Only allow valid parameters (e.g. not define chromatic parameters directly, but only under the chromatic key)
• Use Meta-Tag with recommended attributes
• No duplicate story names (at least check in context of one file. often happens when copying stories)

Describe alternatives you've considered I also tried installing a pure mdx-linter, but setup was complicated and I expect to gain not as much from it, when most problems occur in the storybook-specific semantics. So I’ve postponed its setup for now.

Additional context This is in a vue-cli project, where there are already a lot of moving parts, especially wrt eslint. (vue sfc, script-setup, typescript, prettier)

[SalahAdDin]

Is your feature request related to a problem? Please describe. When refactoring stories, I accidentally wrote <Story name="Foobar" /> instead of <Story name="Foobar">{Template.bind({})}</Story>. It still build fine, but the whole storybook did not load anymore and all I got were cryptic error messages.

Error loading story index: TypeError: render is undefined

Describe the solution you'd like A linter could help find common mistakes like these much more quickly. Here are some suggestions:

Reuse rules from csf:

* storybook/await-interactions

* storybook/use-storybook-expect

* storybook/use-storybook-testing-library

New rules:

* Story contains minimal data to be renderable (not self-closing tag; name required?)

* Only allow valid parameters (e.g. not define chromatic parameters directly, but only under the chromatic key)

* Use Meta-Tag with recommended attributes

* No duplicate story names (at least check in the context of one file, this often happens when copying stories)

Describe alternatives you've considered I also tried installing a pure mdx-linter, but the setup was complicated and I expect to gain not as much from it when most problems occur in the storybook-specific semantics. So I’ve postponed its setup for now.

Additional context This is in a vue-cli project, where there are already a lot of moving parts, especially wrt eslint. (vue sfc, script-setup, typescript, prettier)

is there any plugin adding this feature?

[yannbf]

@SalahAdDin Unfortunately no. Contributions are welcome though! If anyone is willing to work on this, let me know :))

[bodograumann]

This might be helpful: https://github.com/mdx-js/vscode-mdx/issues/165

[bodograumann]

I think I read that stories within MDX files are deprecated now in storybook. Then this feature also wouldn't make much sense anymore. Did I understand that correctly, @yannbf ?

[SalahAdDin]

I think I read that stories within MDX files are deprecated now in storybook. Then this feature also wouldn't make much sense anymore. Did I understand that correctly, @yannbf ?

No way! Everyone writes their documentation in mdx format!

[bodograumann]

I was just as surprised when I heard it Here is the source: https://storybook.js.org/blog/storybook-7-docs/#automigration

[yannbf]

Hey @SalahAdDin @bodograumann indeed defining stories in mdx is deprecated, but not using MDX! You can still use MDX, in fact you will likely have a better experience with the new functionalities we introduced in Storybook 7!

cc @shilman

[SalahAdDin]

Hey @SalahAdDin @bodograumann indeed defining stories in mdx is deprecated, but not using MDX! You can still use MDX, in fact you will likely have a better experience with the new functionalities we introduced in Storybook 7!

cc @shilman

where can we check those?

[kylegach]

@SalahAdDin — The benefits are two-fold:

1. By defining stories in CSF and referencing them in MDX, you get full type safety and linting for your story definitions (both of which are difficult/impossible in MDX) and the same freedom to include any content you wish in the MDX. This was possible in Storybook 6, but wasn't well documented. As of Storybook 7, it's now the recommended way.
2. Nearly all of the doc blocks have been rewritten to use a consistent API (and are now fully documented for the first time)

If you have any further questions, feel free to reach out in Storybook's Discord server (I have the same username there).