Storybook: [question] How to order top-level sections?

[swese44]

We've just upgraded to latest version 5.0.5. I'm organizing stories into sections with the | character in storiesOf():

But the sections seem to be organized randomly. How can I declare the sections order? Thanks

[shilman]

I'm not sure it's possible. Related https://github.com/storybooks/storybook/issues/5827

[backbone87]

we maybe could do this via parameters:

addParameters({
  categoryOrder: ['Category A', 'Also a category'],
});

edit: as function

addParameters({
  categoryOrder: (a, b) => a < b,
});

[swese44]

array version would allow manual order so i'd be in favor of that approach.

for now i'm making sure the individual story files are imported in the section order i want, it works but isn't really scalable

[kevinSuttle]

The demo here seems to be _mostly_ alphabetical. https://storybooks-official.netlify.com/

Anyone know where the source for the storybook-react demo is?

[shilman]

@kevinSuttle All of our netlify deploys are in the repo in the /examples/* directories

[kevinSuttle]

Thanks! Ah, I see how I missed it. I was looking for react, not official 😅 .

https://github.com/storybooks/storybook/tree/next/examples/official-storybook

[shilman]

Closing this as a dupe to #3730

[dcts]

not sure if that is helpful to anyone but I had the same issue and solved it by simply changing the filenames of my *.stories.mdx files such that the components belonging to the section I wanted to be on top were alphabetically lower. So that they look like this:

1_atom_MyBttn.stories.mdx
1_atom_MyInput.stories.mdx
2_molecule_MyForm.stories.mdx

My setup is: I have a folder stories with all my *.stories.mdx files and inside .storybook/main.js i have added the following line to import these:

stories: ['../stories/*.stories.{js,mdx}'],

Then inside my *.stories.jsx files I specify the section (in my case I have 3 sections: atoms, molecules and ogranisms) with the pipe character | like that:

<Meta title="Atoms|my-button" parameters={{component: "my-button"}} />

I found it hard to find any documentation on this so i just share it here :)

[natearmagost]

In the same boat as everyone else, just sharing because it was such a headache.

// In the stories...
// export default {
//   title: 'Components|Accordion',
//   component: Accordion,
// };
// export default {
//   title: 'Getting Started|Welcome',
// };


// In config.js
// The order for the headers
const headers = [
  'Getting Started',
  'Components',
  'Forms',
  'Page Examples',
];

const storySort = (a, b) => {
  // a[1].kind is something like: Components|Accordion. Using "Components" for the headers array.
  // Using Components from ^^^
  const aHeader = a[1].kind.substr(0, a[1].kind.indexOf('|'));
  const bHeader = b[1].kind.substr(0, b[1].kind.indexOf('|'));

  if (aHeader !== bHeader) {
    // Comparing something like "components-accordion--main" to "getting-started-app--main".
    const aHeaderIndex = headers.findIndex(h => h === aHeader);
    const bHeaderIndex = headers.findIndex(h => h === bHeader);
    return aHeaderIndex - bHeaderIndex;
  }

  return 0;
  /* Or instead of `return 0` compare something like "components-accordion--small" to "components-accordion--large"
   * and sort the stories inside each component...
   */
  // return a[1].id.localeCompare(b[1].id, undefined, { numeric: true });
};

addParameters({
  options: {
    storySort,
  },
});

[airtonix]

Here's a much simpler/robust method... I find it much easier to maintain.

https://www.npmjs.com/package/anysort

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

addParameters({
  options: {
    /**
     * display the top-level grouping as a "root" in the sidebar
     * @type {Boolean}
     */
    showRoots: true,
    storySort: (previous, next) => {
      const [previousStory, previousMeta] = previous
      const [nextStory, nextMeta] = next

      return anysort(previousMeta.kind, nextMeta.kind, [
        'Overview/Introduction',
        'Overview/Getting Started',
        'Overview/Themes',
        'Overview/**',
        'Usage/**',
        'Views/**',
        'Layout/**',
        'Components/**',
        'Fields/**',
        'Widgets/**',
      ])
    }
  },
})

I could further refine that by doing:

[
        'Overview/Introduction',
        'Overview/Getting Started',
        'Overview/Themes',
        'Overview/**',
        'Usage/**',
        'Views/**',
        'Layout/**',
        'Components/Icon',
        'Components/Form*',
        'Components/Application*',
        'Components/*',
        'Fields/**',
        'Widgets/**',
      ]

[SBoudrias]

If you fall here from Google, there's now an easier interface to sort your stories: https://github.com/storybookjs/storybook/blob/f3a9117937205f88d8da0264b59942edcfe29cb6/docs/writing-stories/naming-components-and-hierarchy.md

[shilman]

Better link: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories