指定 Storybook 的默认页面

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

故事）。如果您没有任何 URL 参数，那么 Storybook 将选择列表中的first 故事（这是通过您配置的 Storybook 加载的第一个故事）。

如果您只想选择列表中的第一个故事，请在

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 看到什么故事，您都可以选择第一个故事来登陆。

您可以在此处阅读有关 Storybook 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),
      },
    };

Answer 4

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

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

添加其他答案，对我有用的是更新

storySort

，这会更改顺序，但不会更改打开的默认故事，并更改

configure(req, module);

到

const loadStories = () => {
  // Don't know why but doing this is required to make the default story opened the first one in storySort.
  req.keys().forEach((filename) => req(filename));
};
configure(loadStories, module);

这使得默认实际上是显示的第一个故事。两者都是在

.storybook/preview.ts

中完成的，但对于某些人来说可能是

config.ts

。

Answer 6

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

// ./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",