官网 https://storybook.js.org
简介翻译:Storybook 是一款用于UI组件独立开发的开源工具。它使UI构建工作变得有组织和高效。
亮点
支持原生 HTML 和React (Native)、Vue、Angular、Svelte、Mithril 等常见 JavaScript UI 框架。
- 提供构建分离的 UI 组件沙盒,以便你能开发难以复现的程序状态和边界案例
- 按“故事”来编写组件库的使用文档、自动化生成指导,分享你的前端工作成果
- 使用插件来强化你的UI构建、文案工作
- 团队协作——可视的自动化UI测试
快速开箱
这里使用 React UI 库为例子
参见官网:https://storybook.js.org/docs/guides/guide-react/
组织“故事”
创建 "src/stories/hello-world.stories.jsx(tsx)"
export default {
title: "Components/Test", // 组织路径,按 '/' 分隔
component: Toolbar, // 可选,被 JsDoc 自动生成文档的组件
subcomponents: [] , // 可选,同上,作用于子组件
}
TODO
参见:https://storybook.js.org/docs/formats/component-story-format/
插件推荐
backgrounds 背景
https://github.com/storybookjs/storybook/blob/next/addons/backgrounds/README.md
centered 居中显示
https://github.com/storybookjs/storybook/blob/next/addons/centered/README.md
docs 自动接口文档生成
https://github.com/storybookjs/storybook/blob/next/addons/docs/README.md
knobs 参数调节
https://github.com/storybookjs/storybook/blob/next/addons/knobs/README.md
参考资源
上手指南 https://www.learnstorybook.com/intro-to-storybook/
官方 GitHub https://github.com/storybookjs/storybook