指定故事书的默认页面

Question

我的React应用程序中有故事书，由于某种原因，当我运行yarn storybook它时，它总是打开相同的故事（它会自动选择selectedKind和selectedStory）。如何手动选择默认故事？

Answer 1

使用storybook v6，只需将默认页面的 mdx 放在stories字段中的第一个位置；

演示

// .storybook/main.js

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

Answer 2

根据URL查询参数http://localhost:9001/?selectedKind=Component&selectedStory=default选择Component种类和default故事（即，选择种类和故事）。如果您没有任何网址参数，则故事书将选择第一个列表中的故事（这是通过但你已经配置童话加载的第一个故事）。

如果您只想选择列表中的第一个故事，则可以按特定顺序将故事文件加载到文件中的loadStories函数中.storybook/config.js。

但是，如果您要始终选择相同的故事，请按照以下说明进行操作。

最好的方法是使用Storybook的addonAPI。这是一个对我有用的示例（带有保护措施，这样您就不会永远陷入同一故事）：

// .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');
    }
  });
});

使用该代码段，无论您根据URL最终基于哪个故事，都可以选择第一个故事。

您可以在此处阅读有关故事书addonAPI的更多信息：https ://storybook.js.org/addons/api/ 我可能会在URL中允许使用其他查询参数，以强制从URL中选择kind + story。

注意：可能已有一个提供此功能的插件，但是快速搜索未找到可行的结果。

Answer 3

您可以使用 解决此问题storySort，我遇到了这个问题，但我已经解决了。

要选择文件或组件作为登陆文件，您可以在文件中指定.storybook/preview.js。像这样：

    export const parameters = {
      .........,
      options: {
        storySort: {
          order: ['Components', ['Forms', ['Select']]],
        },
      },
    };

要按字母顺序对故事进行排序，您可以这样做

    export const parameters = {
      .........,
      options: {
        storySort: (a, b) => a[1].id.localeCompare(b[1].id),
      },
    };