UI: Support * wildcard option in storySort order array

[randak]

Issue: #14353

What I did

This PR adds support for a * option in the order array of the storySort function. When present, stories that do not match any of the kinds listed in the order array will be sorted to the location of the * option rather than sorted to the end of the list.

Example:
With the following order set, all stories will be sorted between Getting Started and WIP. The order within the * will depend on the method setting.

order: ['Getting Started', '*', 'WIP', 'Internal']

How to test

Is this testable with Jest or Chromatic screenshots?

This is testable with Jest. New tests have been added to validate the updated capability of the storySort function.

Does this need a new example in the kitchen sink apps?

No

Does this need an update to the documentation?

Yes, the documentation update is included in this PR.

[randak]

@shilman This is my first contribution. I tested everything through Jest, but I'm not super sure how to do a manual test of it in a demo instance, so the Jest tests are all I've done so far. Please let me know if there's any more steps I should take. Thanks!

[shilman]

@randak this is awesome! i'll give it a whirl in the next few days. in the meantime, if you want to test it out yourself in the monorepo, you can modify the settings in examples/official-storybook then:

yarn bootstrap --core
cd examples/official-storybook
yarn storybook

As you adjust the settings in the example you might need to re-run storybook, but you shouldn't need to bootstrap. See CONTRIBUTING.md for more info!

[randak]

Thanks, I did read the contributing guide but I missed that part. The label, "Working with the kitchen sink apps," is a little confusing for a newcomer and I didn't realize it was relevant. Testing now.

[randak]

This doesn't seem to be working correctly in the example storybook despite the new unit tests passing, so I'm investigating a bit more.

There was an issue in my development environment and I missed a step in the contributing guide. After testing, I can confirm that this does work correctly for the example storybook 🎉

[shilman]

Fantastic job. Great feature, great tests, documentation... really cool 💯

[gartenfeld]

https://github.com/storybookjs/storybook/pull/14531/files#diff-be1865c4c1d3f69a1d1dd189e2debcb7dd7ed77c961a5efb33ddf451ed998d9fL22

// Stories with a shorter depth should go first.
if (!storyKindA[depth]) { return -1; }

When you have a story file that exports multiple named stories, the title does not include the inferred story names

export default {
  title: 'Components/MyComponent',
  component: MyComponent,
} as Meta;

export const VariantOne = (args) => {}
export const VariantTwo = (args) => {}

According to the short-out sorting logic, these will always appear higher than other docs that have a defined name in the title

<Meta title="Components/MyComponent/Intro" />

But what if I what the "Intro" to be sorted higher than the other story variants, without grouping the inferred stories further under some path like Components/MyComponent/Stories?