@alisowski/storybook-addon-notes

注意：Storybook 已棄用此插件，改用 addon-docs。雖然該插件很有用，但此插件解決的是不同的問題。

Storybook Addon Notes 允許你在 Storybook 中為你的 stories 撰寫筆記（文字或 HTML）。

框架支援

開始使用

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