Story order the same as stories are exported

[Hurtak]

Is your feature request related to a problem? Please describe. When there is lots of stories inside of one story file, order might become important.

The default sorting is alphabetic which is not ideal, if you want to have some kind of grouping, and the storyOrder settings requires manually setting the order and duplicating names of the exported stories there.

I think the most natural default behaviour could be to just have the stories in the order they were exported. That way you can change the order naturally inside of the story code, by just moving it up and down, and it does not require you to use additional sortOrder configuration.

Describe the solution you'd like Add new option to the storyOrder that would let you sort the stories by the export order. Potentially change the default sorting behavior to this one (I think it feels most natural, so it could be a good default)

Describe alternatives you've considered Perhaps some kind of magic prefix for the stories, like _1StoryName, _2StoryName that would would get ignored in the generated name but would affect the order?

Additional context I think Storybook also does this, if I understood correctly this chapter https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories

[tajo]

I think I still prefer alphabetical as the default but it definitely makes sense as an opt-in setting.

[tajo]

I haven't really get more asks for this, seems almost everyone is happy with alphabetical order and sometimes using storyOrder to move top level categories around.

[mayank99]

Recently migrated to ladle, and this is the only issue we've run into (quite impressed with ladle otherwise!).

Our stories are exported in an intentional order, starting from the most basic/common variant first. It would be nice if there was a way to keep that order without writing a super-specific hacky storyOrder function.

For example, consider the following story exports:

export const Basic = () => {};
export const Advanced = () => {};
export const Customized = () => {};

Desired order	Actual order
Basic, Advanced, Customized	Advanced, Basic, Customized

Maybe this issue can be re-opened? Or I can open a new one.

[tajo]

Maybe this issue can be re-opened? Or I can open a new one.

If someone wants to implement this, I am happy to support it.

[mayank99]

I can give it a shot, but I would need some pointers (unfamiliar codebase, etc).

How would the core logic even work? The namespace object doesn't preserve source order, so I'd imagine it would need some AST parsing on the story files to find the order of exports.

[tajo]

Ladle is creating this meta.json file, each story has locStart param. So you could use this data-structure, sort stories based on their locStart and use that to create the default value storyOrder.

[rasgo-cc]

I'd also appreciate if stories would keep the same order as they are exported. @tajo where is that meta.json file is generated? (link expired) I just tried using the config storyOrder expecting to get some meta I could use for sorting but it's only names :(

[mayank99]

Here's another example of meta.json: https://baseweb.design/ladle/meta.json

[rasgo-cc]

Thank you @mayank99 . Ended up giving up on this, alphabetically sorted will work for me.