0
271
ViewsSorting in Storybook: Possible to force an order for nested stories?
My Storybook uses the following grouping for stories:
Introduction
Styleguide
Atoms
Component
๐ README
๐ Examples
Component
๐ README
๐ Examples
Molecules
Component
๐ README
๐ Examples
Organisms
Component
๐ README
๐ Examples
- Basically three groups: Atoms, Molecules, and Organisms.
- Each group should have alphabetized components. This currently works.
- Each component has a README mdx file, and then all stories nested under Examples.
Iโm currently sorting stories like this:
options: {
storySort: {
method: 'alphabetical',
order: ['Introduction', 'Styleguide', 'Atoms', 'Molecules', 'Organisms'],
locales: 'en-US',
}
},
This gets me close, but the README and Examples within component stories appear in alphabetical order when I want README to appear first.
Is this possible?
1 answers
Answer question0
I had a similar problem, and I could find a way of doing as you requested, after finding this info on the storybook documentation:
For your specific case, I think that you could do something like this:
options: {
storySort: {
method: 'alphabetical',
order: ['Introduction', 'Styleguide', 'Atoms', ['Readme', '*'], 'Molecules', ['Readme', '*'], 'Organisms', ['Readme', '*']],
locales: 'en-US',
}
},
Basically, you just have to add , ['Readme', '*'] after every group that you like to sort by using the Readme first custom order.
This just indicates storybook to display the Readme story first, and then the rest of the stories.
This approach solves the problem, but I think that the solution could be improved by writing your own storySort functions, as indicated on this comment in github
I hope this answer would be helpful for your scenario too.
Regards