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

选项

此对象可用于配置 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 });