Angular: stories are not sorted by their export

[elenagarrone]

Describe the bug
Stories are not sorted according to their export instead, they are sorted alphabetically.:

while it should be:

Button
  Primary
  Secondary
  Large
  Small

To Reproduce
Code to reproduce here: https://github.com/elenagarrone/sb-bug-ng

npm i
npm run storybook

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (10) x64 Apple M1 Pro
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Firefox: 102.0.1
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9 
    @storybook/addon-essentials: ^6.5.9 => 6.5.9 
    @storybook/addon-interactions: ^6.5.9 => 6.5.9 
    @storybook/addon-links: ^6.5.9 => 6.5.9 
    @storybook/angular: ^6.5.9 => 6.5.9 
    @storybook/builder-webpack5: ^6.5.9 => 6.5.9 
    @storybook/manager-webpack5: ^6.5.9 => 6.5.9 
    @storybook/testing-library: 0.0.13 => 0.0.13 

Additional context
Using Angular 14.0.0 (reproduced also with 12.2.17) and Webpack 5.

This same issue was fixed for React: #15574

[EdgarPsda]

Hi @elenagarrone would you mind share how to reproduce de error please, I've tried but only I'm able to run the Angular default screen.

[elenagarrone]

@EdgarPsda apologies, it's not npm start but npm run storybook to see the issue.

[byjokese]

We are having the same issue with angular v14.2 and storybook v6.5.9

[ricovitch]

Same issue here with angular v15 and storybook v6.5.13 (with builder-webpack5)

[MichaelBagnasco]

Here is my workaround until it's fixed. I add a order property to the story export via Object.assign() then in the parameters.options.storySort function you can access that property with a[1].originalStoryFn.order.

In my *.stories.ts:

export const Primary = Object.assign(Template.bind({}), {order: 0});
export const Secondary = Object.assign(Template.bind({}), {order: 1});

Then in my .storybook/preview.ts

export const parameters = {
  options: {
    storySort: (a: any[], b: any[]) =>{
      return a[1].originalStoryFn.order - b[1].originalStoryFn.order;
    }
  },
};

It's not the cleanest but it works and you can order your stories any way you want without worrying about export or alphabetical order.

[atillasertkaya]

Hello @shilman @JReinhold, we are facing the same issue with Angular and would need a workaround as we cannot upgrade Storybook to v7 at the moment.

I tried to replace .ts extension of the story with .js, and the code seems to be working fine, but it looks like the Babel plugin isn't being applied to the .ts files.

I've come up with a solution to this issue by adding the __namedExportsOrder in the story file which is not ideal in the long run.

export const __namedExportsOrder = [
  'First Story',
  'Second Story',
];