Default Landing on the Introduction Page on storybook

[reddem-anu]

Problem Statement/Feature Request:
I would like to see a way to add the introduction.mdx file as one of the path to the stories and the storybook should land on the Introduction page instead of the first story.

I have tried multiple ways from different platforms like dev.io, stackoverflow. Please see below the list of ideas I tried from the community.

I began by following this stack overflow idea. This involves selecting the Kind and Story based on the url parameter to identify the story to land on, but this did not work in our case.

https://stackoverflow.com/questions/53724555/specify-default-page-for-storybook

This approach also specifies using the addOnAPI from storybook addOns, to always choose the landing page to be the introduction mdx file. This did not work.

 

2. I followed the 2nd top answer suggesting to change main.js

 

module.exports = { stories: [ "./Introduction.stories.mdx", "../components//.stories.tsx" ], addons: [ "@storybook/addon-links", "@storybook/addon-essentials" ]}
The default page issue was still not resolved. Later I noticed that this path was already configured properly as when I open storybook , the introduction page showed at top of other component stories.

 

 

3. I tried following the 1st top answer with different values in 

 

storybookAPI.selectStory('FirstKind', 'default story');

to match the appropriate story name. It still didn't resolve the issue. So I tried selecting a different component story to check if it can set other components as default. It didn't work.

 

4. I looked for another solution:
   https://dev.to/committedsw/storybook-docs-first-page-1ick

It too didn't work

 

5. I looked for storybook official docs and looked through all the related docs and found no exact clue about setting up default page loading. https://storybook.js.org/docs/react/configure/overview

6. I looked into the storybook addons docs https://storybook.js.org/docs/react/addons/writing-addons  but found no useful info.

[dimitrieh]

Unsure if this solves your usecase but you can make the first story and first page of it a documentation only page with https://storybook.js.org/addons/@storybook/addon-docs

[shilman]

Storybook shows the first story by default and the suggested approach is to make your first story a documentation page. When you navigate to the storybook, it shows this by default. One thing to note is that if you are running Storybook in dev mode (e.g. npm run storybook) and you have already been browsing a Storybook in your browser, it can reuse a tab that already has some other path selected (the last story you were browsing? i'm not sure whether this is a bug or something we have control over?). If you explicitly navigate to the path of the storybook (e.g. https://localhost:<port> where port is typically 6006 by default), it should show the first page.

[tobiasthorin]

If your introduction page is still not the first story, make sure that story sorting isn't interfering with your desired order.

[thefolake]

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