5.0.0-rc.9: Option sortStoriesByKind is not working

[ghost]

addParameters(
  {
    options: {
      theme: create({
        base: "light",
        brandTitle: "Test",
      }),
      sortStoriesByKind: true,
    },
  },
);

sortStoriesByKind is not working, true/false it's the same.

5.0.0-rc.9

[SamKirkland]

Also an issue with the other options in the ui object: enableShortcuts and sidebarAnimations

[randak]

This is still happening in 5.0.1 for us.

[fictivecreations]

Uncertain if it's related but I've also found since updating to 5.0.1 (from a 4.* ver) that my welcome story that used to show up as the first thing is now showing up as the last, no matter how I play around with naming conventions or import order.

[simonhoss]

I have the same with this options

{ sortStoriesByKind: true, hierarchySeparator: null, hierarchyRootSeparator: null }

[jjspace]

It does not seem like sortStoriesByKind is implemented at all in v5+ based on this search which shows the only places it's referenced are in documentation about the feature but it's not actually used anywhere.

[nemoDreamer]

My hope is that there's some kind of API in the works that'll allow us to provide our own sorting function! ❤️

In v4, we had hacked something into .storybook/config.js which accessed window.__STORYBOOK_CLIENT_API__._storyStore.getStoryKinds() and sorted window.__STORYBOOK_CLIENT_API__._storyStore._data based on that, but that's obviously now broken w/ our update to v5.

Would be soooo sweet to be able to supply sortStories func in config that returns -1|0|1...

[dizlexik]

Still not working in v5.0.5

[rwieruch]

Not working in 5.0.6. for numeric ordering.

[simonhoss]

I found out that the order of the stories is now sorted by the folder name where there story is inside.

To make a correct ordering you can rename the folder to the same structure you want to see. I will rename my folders to 01_feature/... 02_feature/... and so on

[rwieruch]

Hm, I have the stories co-located to the actual implementation of the component. I wouldn't want to order my UI components in folders based on how Storybook wants to have it, but rather how it fits best for my UI libraries project folder structure. So that's no option for me unfortunately

[antitoxic]

It does not seem like sortStoriesByKind is implemented at all in v5+ based on this search which shows the only places it's referenced are in documentation about the feature but it's not actually used anywhere.

Pure WTF. @leoyli @shilman @ndelangen Please remove from documentation, or show a giant warning next to each option which is "todo"

[absgjames]

is there another way to sort these stories?

[tmeasday]

Looks like we'll have a way soon: #6472

[ndelangen]

We're in the final phase of the 5.1 release. I just had a short discussion with @shilman & @tmeasday about this, and although #6472 is very promising, we feel it's a bit too late into the process to merge this into 5.1.

This will be get fixed in v5.2.

Reason being:
The visual sorting & sorting of the keyboard shortcuts are kinda independent and haven't been thoroughly tested.

[ghost]

apparently was resolved in 5.1.0-rc.5 ?

[shilman]

@DanielG2002 We removed from the docs, but didn't actually solve the issue AFAIK. Is it working for you now?

[ghost]

@shilman well, I did a test on 5.1.1 and conclusions are:

• sortStoriesByKind is not working
• now the stories are sorted alphabetically (“byKind”) by default
• this solve my needs

[rwieruch]

If sortStoriesByKind is not working, the issue isn't resolved, is it?

[ghost]

correct!, not resolved

[tmeasday]

This is in the pipeline for 5.2 however!

[shilman]

We released #6472 in 5.2.0-alpha and I'll update MIGRATION.md accordingly

[rwieruch]

Thank you @shilman 🎉 Tried it in 5.2.0-alpha.35 and it worked.

Just in case: sortStoriesByKind changed to storySort and expects a function now.

addParameters({
  options: {
    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
  },
});

[mlegait]

Hello,

I'm sorry if it's a silly question 😅 But I'm not used to sortStoriesByKind and I don't find any documentation on storySort.

Where do these id come from? I would like to sort the stories manually. How can I do that?

Thank you for your help 😊

[rwieruch]

@mlegait I think id is the name of the story, without looking into it so I am not a 100% sure, but you can do the following to get clarity:

addParameters({
  options: {
    storySort: (a, b) => {
      console.log(a);
      console.log(b);

     // check whether the information from a or b helps you to sort ( see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) the values 

      return true; // return false;
    },
  },
});

[mlegait]

@rwieruch Thank you for your response :)

When I log a and b, I get something like that:

{
    id: "guidelines-content--empty-story",
    kind: "Guidelines|Content",
    name: "Empty story",
    story: "Empty story",
    [...]
}

So it's perfect if I want to sort stories alphabetically but I'd like to sort them manually. Is it possible to add a custom field order (or something like that) or should I do it in a completely different way?

[shilman]

@mlegait You could add a story parameter and sort by that?

storiesOf(...).add('foo', () => <Foo />, { order: 1 });

In the new component story format:

export const foo = () => <Foo/>;
foo.story = {
  parameters: { order: 1 }
};

Pretty sure it will show up in a.parameters.order, but I didn't verify.

[mlegait]

Thank you very much for your quick answer :)

I tried with storiesOf and I managed to have something like this:

{
    id: "components-dropdown--default",
    kind: "Components|Dropdown",
    name: "default",
    parameters:
    {
        order: 2,
        [...]
    },
    story: "default",
    [...]
}

It's perfect! It'll allow me to order stories manually.

I'm currently testing the new plugin addon-docs, which is so promising, and I was wondering if it's possible to do something similar in a mdx file in the Meta tag for example.

[shilman]

@mlegait Meta and Story in MDX can both provide parameters in the same way 👍

[rwieruch]

Perhaps the custom order is a a good addition for the docs :)

[shilman]

@rwieruch @mlegait Yeah, tho I think this is more of a workaround and probably not the "final" way to do it. Will noodle on that!

[mlegait]

<Meta title="Components|Button" component={Button} parameters={{ order: 3 }} />

works perfectly!

I'll use this workaround while waiting for the final version.

Thank you very much for your help 😄

[shilman]

@mlegait 💯💪🎉

[shilman]

FIXME: Need to deprecate this in favor of options.storySort parameter

[shilman]

This has been documented, closing: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storysort-option

[thefolake]

You can fix this with storySort, I had this issue but I figured it out.

To choose a file or component as your landing file, you can specify in your .storybook/preview.js file.
Just like this:

    export const parameters = {
      .........,
      options: {
        storySort: {
          order: ['Components', ['Forms', ['Select']]],
        },
      },
    };

To sort stories alphabetically, you can do this

    export const parameters = {
      .........,
      options: {
        storySort: (a, b) => a[1].id.localeCompare(b[1].id),
      },
    };