Specify default page for Storybook

Question

I have storybook in my React app, and for some reason when i run yarn storybook it's always open the same story (it's automatically select selectedKind and selectedStory) . How can i manually select default story?

Answer 1

With storybook v6, just pust default page's mdx to the first position in stories field;

Demo

// .storybook/main.js

module.exports={
  stories:[
    '../packages/intro.stories.mdx', // default page
    '../packages/**/*.stories.mdx'
  ]
}

Answer 2

The Kind and Story are selected based on the URL query parameters (i.e. http://localhost:9001/?selectedKind=Component&selectedStory=default will select the Component kind and default story). If you don't have any URL parameters, then storybook will choose the first story in the list (which is the first story loaded via however you have storybook configured).

If you just want to choose the first story in the list, then load you story files in a specific order in your loadStories function in .storybook/config.js file.

---

If, however, you want to always force the same story to be selected, then follow the instructions below.

The best way to do this would be to use the Storybook's addonAPI. Here is an example that worked for me (with a safeguard so you don't get stuck on the same story forever):

// .storybook/addons.js
import addonAPI from '@storybook/addons';

let firstLoad = true;
addonAPI.register('my-organisation/my-addon', (storybookAPI) => {
  storybookAPI.onStory((kind, story) => {
    // when you enter a story, if you are just loading storybook up, default to a specific kind/story. 
    if (firstLoad) {
      firstLoad = false; // make sure to set this flag to false, otherwise you will never be able to look at another story.
      storybookAPI.selectStory('FirstKind', 'default story');
    }
  });
});

With that snippet, no matter what story you end up on based on the URL, you can select the first story to land on.

You can read more about the storybook addonAPI here: https://storybook.js.org/addons/api/ I would probably allow an additional query parameter in the URL to force the kind+story from the URL to be chosen.

Note: there may be an existing addon that provides this functionality, but a quick search yielded no viable results.

Answer 3

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),
      },
    };

Answer 4

To select a specific story on load, if a story is not specified, use the following addon

// .storybook/addons.js
import { STORIES_CONFIGURED, STORY_MISSING } from '@storybook/core-events'
import addonAPI from '@storybook/addons'

addonAPI.register('my-organisation/first-page', storybookAPI => {
  storybookAPI.on(STORIES_CONFIGURED, (kind, story) => {
    if (storybookAPI.getUrlState().path === '/story/*') {
      storybookAPI.selectStory('Kind', 'Story')
    }
  })
  storybookAPI.on(STORY_MISSING, (kind, story) => {
    storybookAPI.selectStory('Kind', 'Story')
  })
})

replacing Kind, Story with your desired story. Testing the URL for /story/* stops changing the page if a specific story is requested and the second listener works for the case where a missing story, or incorrect URL is supplied. Unfortunately, at this time, there's no API to select the docs page.