指定 Storybook 的默认页面

Question

我的 React 应用程序中有故事书，出于某种原因，当我运行 yarn storybook 它总是打开同一个故事（它会自动 select selectedKind 和 selectedStory) 。我怎样才能手动 select 默认故事？

Answer 1

种类和故事是根据 URL 查询参数 select 编辑的（即 http://localhost:9001/?selectedKind=Component&selectedStory=default 将 select Component 种类和 default故事）。如果您没有任何 URL 参数，那么 Storybook 将选择列表中的 first 故事（这是第一个加载的故事，但是您配置了故事书）。

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

但是，如果您想要始终强制select编辑同一个故事，请按照以下说明进行操作。

最好的方法是使用 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 最终得出什么故事，您都可以 select 第一个故事着陆。

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

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

Answer 2

要select加载一个特定的故事，如果没有指定故事，使用下面的插件

// .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 到 select 文档页面。

Answer 3

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

演示

// .storybook/main.js

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

Answer 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",

Answer 5

您可以使用 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),
      },
    };

指定 Storybook 的默认页面

Specify default page for Storybook

storybook