Hierarchy order

[ton03]

Is your feature request related to a problem? Please describe.
I would prefer to have an option to set an order of the story hierarchies. In the case of the demo site, I may want to see "Basics" first, then "UI", etc.

Describe the solution you'd like
Set the order via manager.js?

hierarchyOrder: ['Basics', 'UI', ...], // manual

or

hierarchyOrder: true, // auto; alphabetical

the rest that are not mentioned would be rendered in whatever order they are rendered now.

It could default to a falsy value so storybook won't sort it

Describe alternatives you've considered
Something similar to storySort

addParameters({
  options: {
    hierarchySort: ...
  },
});

Are you able to assist bring the feature to reality?
I can give it a shot... 😅

Additional context
This would be useful to set a logical order of hierarchy in a Design System

[shilman]

You can currently achieve this by simply loading your stories in the desired order in main.js:

module.exports = {
  stories: [
    'Basics.stories.js',
    'UI.stories.js'
    ...
  ]
}

There's also an options argument to StorySort that basically does what you're asking for: #9188

I'm closing this as a dupe to #9188

[ton03]

Hi @shilman thanks for that but I don't think the default storySort function works well with hierarchy and custom separators. Should it also consider hierarchySeparator and hierarchyRootSeparator?

https://github.com/storybookjs/storybook/blob/next/lib/client-api/src/storySort.ts#L18

But here's my solution

storySort: (a, b) => {
  const getIndex = (s) => (
    ['Basics', 'UI', ... ]
      .findIndex((story) => s.startsWith(story))
  );
  return getIndex(a[1].kind) > getIndex(b[1].kind) ? 1 : 0;
},

[shilman]

@ton03 hierarchy separators are deprecated as of 5.3 and will be removed in 6.0

[StephanBijzitter]

@shilman what's the alternative to hierarchySeparator in that case? I just updated (for the require.requireActual bugfix), and I cannot really find any information on this change (yet)

Edit: found it, had to search through the pull requests :-)
https://github.com/storybookjs/storybook/pull/11344/files

I searched for hierarchySeparator in the codebase and found no mention of it, even in the changelog. So while the changelog (that you wrote) is very useful and clear (thanks!), next time mentioning the option that's been removed wouldn't hurt for a quick CTRL/CMD+F 😇

[shilman]

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-hierarchy-separators