Sorting in Storybook: Possible to force an order for nested stories?

user_347884 0
Viewed 3650

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?

storybook javascript
1 Answers

I had a similar problem, and I could find a way of doing as you requested, after finding this info on the storybook documentation: enter image description here

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

user_58459960
Related