Storybook Addon Redirect

Storybook Addon Redirect 允许您在 Storybook 中创建到故事的重定向。

入门

npm install storybook-redirect --save-dev

如果您还没有，请在 Storybook 目录中创建一个名为 addons.js 的文件。

将以下内容添加到 addons.js 中以向 storybook 注册插件

import 'storybook-redirect/register';

每个故事文件的 ID 都是根据文件路径生成的。此 ID 用于使用 URL 参数 package 重定向到故事组。

• 对于命名故事文件，可以通过文件名访问故事组
  • 例如：通过 ?package=mystory 访问 MyStory.stories.js 中的故事
• 对于具有命名目录的索引文件，可以通过目录名访问故事组
  • 例如：通过 ?package=mycomponent 访问 MyComponent/index.stories.js 中的故事
• 对于 stories 目录下的索引文件，可以通过顶级包目录名访问故事组
  • 例如：通过 ?package=mypackage 访问 MyPackage/stories/index.stories.js 中的故事

默认情况下不支持链接到故事组内的特定故事。但是，可以通过向插件传递自定义 getKey 函数来添加此功能 - 请参阅下面的“自定义”部分。

自定义

要自定义插件，您可以直接导入插件函数（不带 /register）并使用 getKey 函数和 options 对象调用它。要使用现有的 getKey 函数，您可以使用命名导入导入它。

import storybookRedirect, { getKey } from 'storybook-redirect';

const options = {};
storybookRedirect(getKey, options);

getKey

此函数使用故事对象调用，并应返回一个字符串键，该键将与 URL 参数匹配。返回 undefined 表示不会添加故事。键只能使用一次 - 再次返回相同的键不会覆盖先前设置的故事。

示例故事对象

{
  id: "test-stories--test-story",
  kind: "Test Stories",
  name: "Test Story",
  story: "Test Story",
  parameters: {
    fileName: "./packages/test-story/stories/index.stories.js",
    options: {
      hierarchyRootSeparator: "|",
      hierarchySeparator: {}
    }
  }
}

下面实现了一个示例 getKey，它链接到故事组内的特定故事。这使用默认的 getKey 函数从文件名生成 ID，然后将其扩展为使用故事 ID 的后缀链接到特定故事。

import storybookRedirect, { getKey } from "storybook-redirect";

storybookRedirect(function(story) {
  const fileNameId = getKey(story);
  return `${fileNameId}--${story.id.split("--")[1]}`;
});

// eg. ?package=mypackage--story-name

options

此对象可用于配置 URL parameter 名称并开启 debug 输出。

parameter

配置 parameter 将更改匹配时使用的 URL 参数。确保不要与现有的 storybook URL 参数（例如 path）冲突

{
  parameter: "custom-parameter-name"
}

重定向 URL 现在需要设置为 ?custom-parameter-name=mypackage

debug

将其设置为 true 将在浏览器的开发者控制台中输出调试详细信息。用作文档 ID 与故事映射的映射对象也会作为输出的一部分输出。

{
  debug: true
}

您可以通过传入默认的 getKey 和仅包含 debug 的 options 对象来启用此功能，而无需进行任何其他更改

import storybookRedirect, { getKey } from "storybook-redirect";

storybookRedirect(getKey, { debug: true });