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

Question

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?

Answer 1

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