@alisowski/storybook-addon-notes

注意：Storybook 已弃用此插件，推荐使用 addon-docs。虽然那个插件很有用，但此插件解决了不同的问题。

Storybook Addon Notes 允许你为你的 Stories 编写备注（文本或 HTML），在 Storybook 中使用。

框架支持

入门

yarn add -D @alisowski/storybook-addon-notes

在 .storybook/main.js 中

module.exports = {
  addons: ["@alisowski/storybook-addon-notes/register"],
};

或者将 notes 插件注册到一个面板中。选择其中一个，不要同时选择两者。

module.exports = {
  addons: ["@alisowski/storybook-addon-notes/register-panel"],
};

现在，你可以使用 notes 参数为每个 Story 添加备注。

import Component from "./Component";

export default {
  title: "Component",
  parameters: {
    notes: "some documentation here",
  },
};

升级到 CSF 格式

将 notes 添加到 parameters 对象中

export default {
  parameters: {
    notes: "My notes",
  },
};

使用 Markdown

在你的备注中使用 Markdown 是支持的，Storybook 默认会将 Markdown 加载为原始格式。

import Component from "./Component";
import markdown from "./someMarkdownText.md";

export default {
  title: "Component",
};

export const withMarkdown = () => <Component />;
withmarkdown.story = {
  parameters: {
    notes: { markdown },
  },
};

多个备注部分

如果你需要为你的 Storybook 的不同使用者（例如设计师、开发者）显示不同的备注，你可以配置多个备注页面。以下配置将为 Introduction 和 Design 分别渲染一个带有独特备注的标签页。

import { storiesOf } from "@storybook/react";
import Component from "./Component";

import intro from "./intro.md";
import design from "./design.md";

export default {
  title: "Component",
  parameters: {
    notes: { Introduction: intro, "Design Notes": design },
  },
};