Storybook: Add ability to sort roots for stories

Created on 7 Jun 2018  路  16Comments  路  Source: storybookjs/storybook

It would be great if you could sort the roots for story trees. We're trying to create a toolkit with it and have to root sections: 'design-tokens' and 'components' and want to have the design-tokens come before components, but now it's sorted alphabetically because they're loaded by folder structure. There is an option to sort stories by kind, but sorting the roots would be nice to as an extra option.

feature request inactive ui

Most helpful comment

Let's keep this alive.... still want to know how best to sort the stories without hacky solutions.

All 16 comments

You can ensure the order of the stories, by requiring your stories in this specific order:

That how we have a Welcome story in the beggining in our examples:
image

in config.js:

import { configure } from '@storybook/angular';

function loadStories() {
  // put welcome screen at the top of the list so it's the first one displayed
  require('../src/stories');

  // automatically import all story ts files that end with *.stories.ts
  const req = require.context('../src/stories', true, /\.stories\.ts$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Ow, nice, so as the roots are folder based, I can do two require.context, for each folder. Though if we add folders, we need to change that too. I would prefer an option to sort the root, as the option to sort the stories is available.

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!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

I'd like to resurface this. Sorting the sections should be more configurable than this arbitrary import order.

Reopening since there's useful info and closing #6327 as a dupe

Also related: #5827

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!

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!

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!

Let's keep this alive.... still want to know how best to sort the stories without hacky solutions.

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!

@creatyvtype this was fixed in 5.2.0-alpha.31:

  • Core: Story sorting (#6472)

Am not sure why this is closed in favour of #6472 as that issue is about sorting within roots not the roots themselves. I can't find a way of sorting the roots apart from the import hack above which, as various people mention, isn't scalable and doesn't work well if you stories are next to your components. Should this issue be re-opened @shilman?

Outside of waiting for v6.0.. if you can't wait.. a neat trick to sort sections while dynamically loading your stories that works now feels a little less hacky:
in a file that always loads first (_global.stories.js or something) you can define each section with an intro story that describes the section.. and then let the rest of the stories load where they will.

Benefit: you get a nice little intro page explaining what each section is for!
Drawback: you have to figure out what to say in an intro page explaining what each section is for!

Example (from a Vue storybook fwiw):

storiesOf('Atoms|(intro)', module).add(
  'Atoms',
  () => ({
    template: `
    <div class="container">
      <h1>Atoms</h1>
      <p>Atoms are cool, atoms are great, come for the atoms, stay for this highly scintillating sentence</p>
    </div>
    `
  }),
  { storyshots: false }
);

Stupid problems call for stupid solutions.
I renamed all to folders and prepended them with category number.

1_button
1_Input
2_grid
2_stack
3_hero
3_section

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ZigGreen picture ZigGreen  路  3Comments

purplecones picture purplecones  路  3Comments

shilman picture shilman  路  3Comments

zvictor picture zvictor  路  3Comments

alexanbj picture alexanbj  路  3Comments