Storybook: Add alphabetical and easy-to-use custom sorting options to storySort parameter

[JohnAlbin]

Is your feature request related to a problem? Please describe.

The current implementation of storySort only takes a function that can be used to sort stories. There's literally nothing preventing you from doing any sorting EXCEPT that's it's really hard to do. There is a readme that explains how to do alphabetical sorting:

addParameters({
  options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
  },
});

(BTW, there's a bug in that example, which just shows how hard it is to implement correctly.)

Describe the solution you'd like

In addition to the current API of:

storySort: (a, b) => { /* return -1, 0, or 1 */ },

Alternatively, a user could provide an object to storySort that looks like this:

storySort: {
  method: 'alphabetical', // Defaults to 'configure', i.e. just use Storybook's configure() ordering.
  order: []; // An array of story kinds to order by.
  locales: 'en-US', // A locales string to use when sorting alphabetically.
},

The order array could look like this: ['Intro', 'Pages', 'Components'] and that would sort story kinds that start with Intro, Pages, or Components (in that order) before any story kinds that don't start with one of those 3 items.

You could also do a nested array so that you could order 2nd-level story kinds. e.g.

[
  'Intro',
  'Pages', 
  [
    'Home',
    'Login',
    'Admin',
  ],
  'Components',
]

Which would result in this ordering:

1. Intro and Intro/* kinds.
2. Pages
3. Pages/Home and Pages/Home/*
4. Pages/Login and Pages/Login/*
5. Pages/Admin and Pages/Admin/*
6. Pages/*
7. Components and Components/*
8. Lastly, everything else.

Note that the order option is independent of the method option; you can sort the * stories by configure() or by method: 'alphabetical'.

Describe alternatives you've considered

The current method is flexible, but difficult to use. This proposal is about the 4th iteration of code I've used on a Storybook project.

Are you able to assist bring the feature to reality?
Yep. I've written a feature branch for it. With tests. And docs.

Additional context
Add any other context or screenshots about the feature request here.

[winterlamon]

I'm not sure what hierarchy separator you're using (I'm using | to create subheadings), but I'm +1 for the ability to sort subheadings and stories separately and custom sort subheadings.

[JohnAlbin]

The custom hierarchy separator is deprecated in 5.3 in favor of just using /.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[helloalexdodd]

Hey I'm not able to contribute to this at this time, but I would love to see something like this added in. Sorting stories right now is unnecessarily #$@&ing hard.

[shilman]

@helloalexdodd This has been released in 6.0.0-alpha per @JohnAlbin 's PR #9188 . Give it a try?

[matt-shine]

Thanks heaps for this change @JohnAlbin, life saver