Question

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

Answer 1

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

如果您只想选择列表中的第一个故事，则可以按特定顺序将故事文件加载到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 2

要选择加载中的特定故事，如果未指定故事，请使用以下插件

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

用您想要的故事替换Kind，Story。如果请求了特定的故事，则测试/story/*的URL会停止更改页面，并且第二个侦听器适用于缺少故事或提供错误URL的情况。不幸的是，目前没有API可以选择文档页面。

Answer 3

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

演示

// .storybook/main.js

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

指定故事书的默认页面

3 个答案: