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.)

[rwieruch]

Using latest SB version: 6.4.19

Maybe I have the same issue: When I switch from a tier 3 to a tier 2 level hierarchy in the sidebar, the 2 level hierarchy does not get ordered anymore.

I did the switch over here: https://github.com/table-library/react-table-library/compare/bugg?expand=1

For example:

storiesOf('Compact/Column Grouping (WIP)', module).add('column group', () => {

became:

storiesOf('Compact', module).add('Column Grouping (WIP)', () => {

I didn't change the order property in my preview.js:

const Features = [
  'Theme',
  'Layout',
  'Resize',
  'Sort',
  'Search',
  'Filter',
  'Select',
  'Tree',
  'Expand',
  'Pagination',
  'Fixed Header',
  'Horizontal Scroll',
  'Pin',
  'Ten Thousand Rows',
  'Data Grid',
  'Column Hiding',
  'Column Ordering',
  'Column Grouping (WIP)',
];

export const parameters = {
  layout: 'fullscreen',
  previewTabs: {
    canvas: {
      hidden: true,
    },
  },
  viewMode: 'docs',
  options: {
    storySort: {
      order: [
        'Getting Started',
        ['Introduction', 'Roadmap'],
        'First Steps',
        ['Demo', 'Table', 'Create', 'Update', 'Delete'],
        'Library Themes',
        ['Material UI', 'Semantic UI', 'Bootstrap UI', 'Ant Design'],
        'Features',
        Features,
        'Compact',
        ['Base', ...Features],
        'Composites',
        ['Sort & Select', 'Tree & Select', 'Tree & Sort'],
        'Misc',
        ['Cell', 'Row', 'Column'],
        'Product Themes',
        ['Google Drive (WIP)', 'Stripe (WIP)'],
        'Recipes',
        ['Controlled'],
        'Server',
        [
          'Table',
          'Sort',
          'Search',
          'Filter',
          'Expand',
          'Fetch',
          'Tree',
          'Pagination',
          'Infinite Scroll (WIP)',
        ],
        'Server Recipes',
        ['Origin Table', 'Origin External', 'Origin Mixed', 'Debounce', 'Overlay', 'Hybrid'],
        'Kitchen Sink',
        ['CSV Download', 'PDF Download', 'Image Download'],
      ],
    },
  },
};

Still I'd assume to get for the tier 2 hierarchy the same ordering:

• Compact: Base
• Compact: Theme
• Compact: Layout
• ... and so on

But it doesn't work anymore. The bug can be reproduced by checking out this branch and npm install && npm run storybook:dev.

---

By using:

    storySort: (a, b) => {
      const componentA = a[1];
      const componentB = b[1];
      console.log(componentA, componentB);

I checked the difference between tier 2 and tier 3 stories.

tier 2:

* id: "compact--column-grouping-wip"
* kind: "Compact"
* name: "Column Grouping (WIP)"
* story: "Column Grouping (WIP)"
* title: "Compact"

tier 3:

* id: "features-search--with-callback"
* kind: "Features/Search"
* name: "with callback"
* story: "with callback"
* title: "Features/Search"

Mu guess is that the underlying implementation can deal with Features/Search and the order ['Feature', ['Search', ...]] but can't do the same for just 'Feature' (or in the above case 'Compact')