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

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.

[JohnAlbin]

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

[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.