指定 Storybook 的默认页面答案

【问题标题】：Specify default page for Storybook指定 Storybook 的默认页面
【发布时间】：2019-05-12 11:13:58
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

演示

// .storybook/main.js

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

【讨论】：

这是自 Storybook 6 发布以来的最佳答案。我短暂地认为它不起作用，但这是由于自定义故事排序。这是 Storybook 6 及更高版本的绝佳解决方案，应该成为默认答案。

【解决方案2】：

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

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

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

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

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

使用该 sn-p，无论您最终基于 URL 的故事是什么，您都可以选择要登陆的第一个故事。

您可以在此处阅读有关故事书插件 API 的更多信息：https://storybook.js.org/addons/api/ 我可能会在 URL 中允许一个额外的查询参数来强制选择 URL 中的 kind+story。

注意：可能存在提供此功能的现有插件，但快速搜索没有产生可行的结果。

【讨论】：

? 只需要在 config.js 中将您想要默认设置为第一个的故事
如果你使用main.js 配置的变体，你也可以将它放在stories 数组的第一个位置，比如stories : ["../src/index.stories.mdx", "..src/**/*.stories.(tsx|mdx)"]。
请注意，如果您同时使用 CSF 和旧格式的故事，此解决方案可能会失败。
@Nucleon 很好的答案！

【解决方案3】：

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

// .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。

【讨论】：

【解决方案4】：

在我们的案例中，故事书总是选择第一个有根的故事（即使调整了故事加载顺序），但我们希望没有根的介绍是第一个。这是一个糟糕的解决方案，因为您可以直观地看到重定向，但我们能做的最好的事情是：

// ./addons/default-story/register.js
import { SET_GLOBALS, STORY_PREPARED, STORY_MISSING } from '@storybook/core-events'
import { addons } from '@storybook/addons';

addons.register('your-org/default-story', api => {
  const emitter = addons.getChannel();

  let shouldRedirect = false;

  emitter.on(SET_GLOBALS, (kind, story) => {
    if (!window.location.search) {
      shouldRedirect = true;
    }
  })

  emitter.on(STORY_PREPARED, (kind, story) => {
    if (shouldRedirect) {
      api.selectStory("Introduction", "Introduction")
    }
    shouldRedirect = false
  })


  emitter.on(STORY_MISSING, (kind, story) => {
    api.selectStory('Introduction', 'Introduction')
  })
})

Ps，把这个加载到你的 main.js 文件中：

  addons: [
    "./addons/default-story/register.js",

【讨论】：