@alisowski/storybook-addon-notes

注意：Storybook 已弃用此插件，转而使用 addon-docs。虽然该插件很有用，但此插件解决的是不同的问题。

Storybook Addon Notes 允许您在 Storybook 中为您的故事编写笔记（文本或 HTML）。

框架支持

入门

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

在 .storybook/main.js 中

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

或者将笔记附加组件注册到面板中。只选择其中一个，不要同时选择两个。

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

现在，您可以使用 notes 参数向每个故事添加笔记。

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 },
  },
};