Storybook: storySort isn't find all stories in project.

[RyanHavoc]

Describe the bug
To control the order of my stories I have the following storySort function:

    storySort: (a, b) => {
      // Control root level sort order.
      const sort = [
        'Library/Base Components',
        'Library/Abstractions',
        'Library/Modules',
        'Library/Transient',
        'Library/Page Specific',
        'Library/Deprecated',
        'Library/Uncategorized',
        'Pages',
      ];
      const sortObj = {};

      sort.forEach(function(a, i) {
        sortObj[a] = i + 1;
      });

      const aSplit = a[1].kind.split('/');
      const bSplit = b[1].kind.split('/');

      if (aSplit && bSplit) {
        return (
          sortObj[`${aSplit[0]}/${aSplit[1]}`] -
          sortObj[`${bSplit[0]}/${bSplit[1]}`]
        );
      }

      return a - b;
    },

I have story files in two locations e.g. src/components/SomeComponet/SomeComponent.stories.js and src/pages/SomePage/SomePage.stories.js.

My main.js includes stories from these locations with stories: ['../src/**/*.stories.([tj]s|mdx)'],, all components appear Storybook however the stores in src/pages don't get ordered, and aren't available in the storySort. If I console.log(a[1].kind === 'Pages/SomePage') I never get true. If I do the same for any of the stories that live in src/components e.g. console.log(a[1].kind === 'Library/SomeComponent') I always get true.

To Reproduce
Repeat what I've outlined above.

Expected behavior
Using my sort function above I'd expect to see stories with a little starting with Pages to appear after Library.

Screenshots

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.132
    Firefox: 72.0.2
    Safari: 12.0.1
  npmPackages:
    @storybook/addon-backgrounds: ^5.3.13 => 5.3.13
    @storybook/addon-docs: ^6.0.0-alpha.9 => 6.0.0-alpha.12
    @storybook/addon-knobs: ^5.3.12 => 5.3.13
    @storybook/addon-storysource: ^5.3.13 => 5.3.13
    @storybook/preset-typescript: ^1.2.0 => 1.2.0
    @storybook/source-loader: ^5.3.13 => 5.3.13
    @storybook/vue: ^5.3.12 => 5.3.13

[shilman]

@RyanHavoc i doubt it's related, but you shouldn't mix 5.x and 6.x packages (i see you're using addon-docs 6.0.0-alpha.x)

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[dgreene1]

I'm experiencing the same issues (I believe). You can see below that even though I'm console.log'ing inside my storySort function, the console only shows my component stories, not my introduction stories.

import { addParameters } from '@storybook/react';

addParameters({
  options: {
    showRoots: true,
    storySort: (a, b) => {
      console.log(a);
      if(a.includes("Intro")){
        return -1000;
      }
      if(a.includes('Components')){
        return 900;
      }
      return 0
    },
  },
});

[shilman]

can one of you provide a public repro repo we can look at?

[tylermenezes]

storySort only sorts things with _stories._ It doesn't seem to be possible to sort pages with only documentation (and no stories), except by exclusion.

(That is, storySort: () => 1 does reliably put all the documentation pages on top, because everything else is always be sorted higher.)

You can verify this by setting storySort to console.log, and noticing that documentation pages are not even listed.

(I don't have a sample repo for you at the moment because I haven't pushed, but you can verify by adding a docs-only page and setting storySort to console.log as shown above.)