Allow storySort to sort nested stories below generic parent

[Dangoo]

Is your feature request related to a problem? Please describe
We maintain a component library where we want to sort all nested stories of Components (e.g. Components/Button) in the same order. Here's an example structure:

📄 Introduction
📄 About
📁 Components
  📁 Accordion
    📄 Overview
    📄 Accessibility
    📁 Variations
  📁 Button
    📄 Overview
    📄 Accessibility
    📁 Variations
  📁 ...
📄 FAQ

And here's what you would pass to options.storySort:

"options": {
  "storySort": {
    "method": "alphabetical",
    "order": [
      "Introduction",
      "About",
      "Components",
      ["Accordion", ["Overview", "Accessibility", "Variations"]],
      ["Button", ["Overview", "Accessibility", "Variations"]],
      "FAQ"
    ]
  }
}

Here the order for each section of Components/* must be defined separately.

Describe the solution you'd like
Given there already is a special * operator we thought we might declare the order as follows:

"options": {
  "storySort": {
    "method": "alphabetical",
    "order": [
      "Introduction",
      "About",
      "Components",
      ["*", ["Overview", "Accessibility", "Variations"]],
      "FAQ"
    ]
  }
}

Which would basically sort all children of Components with whats specified by method and apply the custom order to the next level. But as you might imagine from this issue this does not work out of the box.

Describe alternatives you've considered
For now we copied contents of storySort.ts and adjusted line 82 by adding special treatment for *:

82| // If a nested array is provided for a name or a '*' , use it for ordering.
83| const indexA = order.indexOf(nameA)
84| const indexWildcard = order.indexOf('*')
85| const index = indexA !== -1 ? indexA : indexWildcard
86| order = index !== -1 && Array.isArray(order[index + 1]) ? order[index + 1] : []

Are you able to assist to bring the feature to reality?
yes, I'd be glad to help

Additional context
A similar problem was described before here by @brandondurham:
https://stackoverflow.com/questions/68838338/sorting-in-storybook-possible-to-force-an-order-for-nested-stories

I've seen there's some shuffling around on the next branch, so I'm not able to tell whether sorting will work the same as right now in v6. But let me know what you think and maybe this valuable input for future versions as well :)

[mikaoelitiana]

Hello, I am also interested to help on this issue

[PedersenM-ELS]

Hey, has there been any progress on this issue? Would be nice to have it :)

[ahnxsj]

I'd like this to happen too! One workaround that works for me is when you export stories, name the one you'd like to show first in capital letter first, whereas the rest in lowercase first.

const Template: ComponentStory<typeof Button> = (args) => (
  <Button {...args} />
);

export const Examples = () => <Button />;
...
export const primary = Template.bind({});
...
export const secondary = Template.bind({});

would make it show in this order: Examples, Primary, Secondary

[kyrstenkelly]

+1 Would really like this feature

[suchali93]

I got nested sorting to work by setting method: 'configure' and adding includeNames: true to the storySort object.

options: {
  storySort: {
    method: 'configure',
    includeNames: true,
    order: [
         'Other',
        ['*', 'Typography', ['Usage']],
        'Components',
        'Customization',
        ['Styling', 'Theming', ['Overview', '*']],
    ]
  }
}

[Dangoo]

@suchali93 can you confirm that this approach works as well if you e.g. swapped Styling and Theming?
Since method: configure is using the default import order algorithm I have doubts that this works as it should described above where "every sub path below Components should be sorted like the given array" 🤔
Besides that, which "parent" would * in ['*', 'Typography', ['Usage']] refer to?

[suchali93]

It does. I've edited the example above to include the parents. I originally removed more than I should've, for the sake of the example. My bad.

['Styling', 'Theming', ['Overview', '*']]	['Theming', ['Overview', '*'], 'Styling']

[EloB]

I've added a PR to add that wildcard. Anyone have feedback on it? :)

#18243

[toljaEmbroker]

I've added a PR to add that wildcard. Anyone have feedback on it? :)

#18243

I tested this fix on my project and it's working for me.

I have this order

{
    storySort: {
            includeNames: true,
            order: [
                'Phoenix-UI-Layouts',
                'Phoenix-UI-Atoms',
                'Phoenix-UI-Components',
                ['*', ['Overview', 'Parameters']],
                '*',
                'Legacy',
            ],
        },
},

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-alpha.7 containing PR #18243 that references this issue. Upgrade today to the @future NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[adarsh-thakur]

I got nested sorting to work by setting method: 'configure' and adding includeNames: true to the storySort object.

options: {
  storySort: {
    method: 'configure',
    includeNames: true,
    order: [
         'Other',
        ['*', 'Typography', ['Usage']],
        'Components',
        'Customization',
        ['Styling', 'Theming', ['Overview', '*']],
    ]
  }
}

It worked for me