[Bug]: SB7 alphabetical story sorting doesn't work

[jackw]

Describe the bug

Whilst bumping our project to SB7 we've run into an issue where the storySort that was working fine in 6.5 now fails to sort stories alphabetically.

To Reproduce

https://stackblitz.com/edit/sb7-enchkx-broken-sort?file=.storybook/preview.ts

This should repro the issue. Notice that whilst the roots are sorted alphabetically the stories themselves are not. Additionally the order property should put the "Introduction" story first but it doesn't.

System

Not sure this is env related:

~/projects/sb7-enchkx-broken-sort 14m 15s
❯ npx storybook@latest info

Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.1.0-alpha.13 => 7.1.0-alpha.14 
    @storybook/addon-interactions: ^7.1.0-alpha.13 => 7.1.0-alpha.14 
    @storybook/addon-links: ^7.1.0-alpha.13 => 7.1.0-alpha.14 
    @storybook/blocks: ^7.1.0-alpha.13 => 7.1.0-alpha.14 
    @storybook/react: ^7.1.0-alpha.13 => 7.1.0-alpha.14 
    @storybook/react-webpack5: ^7.1.0-alpha.13 => 7.1.0-alpha.14 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

There's an open PR here which first highlighted the issue if it's of any further use.

[Bhupesh-Bajpai]

Hi can I work on this bug can you guide me the procedure to reproduce?

[shilman]

@jackw Thanks for providing a repro! I took a look at it and tracked down the issue. #18243 introduced a breaking change disguised as a feature (cc @kylegach who reviewed the PR).

In your example Introduction.mdx has the "title" Example/Introduction.

Before, specifying Introduction would target that anywhere in the title hierarchy, so sorting it with ['Introduction', '*'] would place it at the beginning of the list no matter how deep Introduction was nested.

#18243 makes it so that if you want to target it nested one level deep, you need to target it more precisely using something like ['*', ['Introduction', '*'], or ['Example', ['Introduction', '*'] if you want to target the "Example/Introduction" only. The generic user-supplied sort function is cleaner if you want to do anything complicated.

Short term, I'd classify this as "not a bug" and will update the migration docs accordingly. I think the sorting API is pretty awful, but changing it again is pretty disruptive and not very high value (IMHO) so I don't see that happening at any point soon.