Storybook 变更日志查看器插件

在 Storybook UI 中显示变更日志文件 - 由 Dave Bitter 用 ❤️ 制作

使用此插件需要 Storybook v7.0.0 或更高版本

用法

1. 安装插件

   npm install storybook-addon-changelog-viewer --save
   

   yarn add storybook-addon-changelog-viewer --save
   

2. 在 .storybook/main.js 中加载插件

   module.exports = {
     // other configuration here
     addons: [
       // other addons here.
       "storybook-addon-changelog-viewer",
     ],
   };
   

3. 在 story 中导入变更日志文件并将其传递给 changelog 参数

   import changelog from "./CHANGELOG.md";
   
   export default {
     title: "Your Component",
     parameters: {
       changelog: changelog,
     },
   };
   

4. 在 Storybook UI 中查看变更日志。应该会有一个名为“Changelog”的新选项卡

功能

• 在 Storybook UI 中查看变更日志文件
• 将 Markdown 渲染为 HTML
• 自动生成一个导航，包含指向所有带有 SemVer 字符串（例如“## 1.0.0 - 2022-06-30”）的标题的链接

动机

创建此插件是为了更轻松地在 Storybook UI 中查看变更日志文件。自 Storybook v7.0.0 起，Storybook Addon Notes 不再起作用，因此创建了此插件。