Open bodograumann opened 2 years ago
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?
@SalahAdDin Unfortunately no. Contributions are welcome though! If anyone is willing to work on this, let me know :))
This might be helpful: https://github.com/mdx-js/vscode-mdx/issues/165
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 ?
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!
I was just as surprised when I heard it Here is the source: https://storybook.js.org/blog/storybook-7-docs/#automigration
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
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?
@SalahAdDin — The benefits are two-fold:
If you have any further questions, feel free to reach out in Storybook's Discord server (I have the same username there).
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.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:
New rules:
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)