storybook插件说明： integrations与addons推荐

官方的：

https://storybook.js.org/integrations/

https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md

 

我所推荐的的三个：

 yarn add -D @storybook/addon-docs @storybook/addon-design-assets @storybook/addon-storysource

Storybook Storysource Addon

https://github.com/storybookjs/storybook/tree/next/code/addons/storysource

查看 Storybook story 源码

Storybook addon for design assets

查看设计原图

https://github.com/storybookjs/addon-design-assets

如果是sketch设计稿，直接使用：https://storybook.js.org/addons/storybook-addon-sketch/

Storybook Docs

https://github.com/storybookjs/storybook/tree/next/code/addons/docs

文档增强

 

storybook插件

  • 官网插件knobs,actions,source,docs,viewport,storyshots,backgrounds,accesssibility,console,links

  • 一般安装完，官方默认给配了actions,插件和links插件

actions插件

  • 有actions，就会有个控制台一样的面板，有点像jest的mockfn一样，触发组件操作可以通过它提供的函数打印到面板上。

  • actions插件文档。

links插件

  • 这个插件比较常用，可以在不同story间进行跳转，可以当是个a链接用。

  • links插件文档。

knobs插件

  • 这个插件厉害了，主要是用来生成变量，并可以进行在线切换用的。比如最简单的切换文字。很多组件上面都有文字，那么文字可能有长有短，就可以使用这个插件设定一个长的文字和一个短的文字，预览时可以切换。

  • 另外还有很多强大功能。甚至可以代替background插件改变背景颜色。

  • knobs效果在线预览

  • knobs插件文档

console插件

source插件

  • 直接显示storybook上写的代码是哪一行写的。预览可以看上一个console的预览。

  • source插件文档

docs插件

  • docs插件就不用说了吧，支持mdx，就是最后可以展示给不懂行的人看的文档。

  • 我自己写了个组件库玩，还没写完，很多高级功能都没用，感觉这些功能比较适合团队开发，我一个人当然图快，主要就是靠docs插件做文档，同时部署静态网站到githubpage。我的组件库在线预览。

  • docs插件文档

viewport插件

  • 这个插件可以对tab页新增个选项，跟chrome里的切换不同设备有点像，使用这个功能，就可以把一个组件放入不同设备大小的story里。

  • viewport插件文档。

background插件

  • 可以设置story的背景颜色之类，当然也有些简单方法可以不需要background插件就能设置背景。

  • background插件文档。

accesssibility插件

  • 又叫a11y插件，有点相当于组件级别的lint，可以自动检验组件是否符合某些规范。一般是用来检查视障人士能不能分辨之类的。基于axe搞的。

  • 效果预览地址。

  • a11y插件文档

storyshots插件

  • 这个插件官网写的让人有点晕，实际还分成2个插件，都是jest相关。

  • 主要插件是storyshots，它可以把jest运行结果置于底部控制台页上，介绍说还可以拿到旧代码快照什么的，有点没懂怎么搞。

  • 另一个插件是storyshots-puppeteer，基于上面那个，pupeteer就有点像selenium一样开个虚拟浏览器去做测试。

  • storyshots插件文档

  • puppeteer插件文档

好用的社区插件

  • 官方插件就上面那些，有些社区插件写的也很不错，可以看看。

storybook-mobile插件

storybook-design-token插件

  • 这个插件我个人觉得适合比较大的项目，我们写样式往往要制作多个变量，比如antd那个样式文件，定义了很多很多变量，还有动画之类的，但人脑肯定记不过来，就算记得了也可能记不得它是什么效果。有了这个插件，就可以把变量和效果全部展示出来。在开发过程中提供帮助。

  • 插件文档地址

  • 作者设计思想

  • 在线预览地址

Apollo Storybook Decorator插件

  • 用于制作模拟graphql的插件，相当于可以模拟个假graphql传来的数据进行展示与调试。

  • 插件文档地址

storybook-graphql-kit 插件

Readme 插件

  • 这个功能有点对标了docs插件，感觉适合纯内部分享使用，它可以对每个story做一个文档说明，并且功能和docs差不多，就是docs是在tab页并且可以独立输出，这个是在addons界面，并且不是默认展现，每个都需要点一下看见。

  • 效果在线预览

  • 插件文档地址

storybook-addon-versions 插件

  • 这个插件不支持storybook5，有段时间没维护了，就说一下功能吧，就是可以通过配置版本号实现各个版本的组件库中穿梭。比如我1.0.0的button是一个样子，1.0.1的button是另一个样子，那么就可以来回切换看。

story2sketch 插件

  • 很多设计师会用sketch软件，这个工具可以把storybook的文件导出，导入给sketch使用。不过这个只支持5以下，storybook6本身就可以自己导出给sketch了。

  • 插件文档地址

jsx插件

  • 这个插件感觉有点对标source，或者是docs部分功能。可以显示story中jsx怎么写的。

  • 插件文档地址

storybook-addon-react-live-edit 插件

i18n 插件

storybook-host 插件

Specifications Addon 插件

  • 这个插件可以用来整合一些测试工具到storybook上，有点类似storyshots插件

Storycap 插件

  • 这个插件名字起的挺好啊，用途就是通过puppeteers来对每个故事截图，然后生成到文件夹里。

  • 插件文档地址

storybook-addon-responsive-views 插件

  • 响应式布局一次头全预览！不过感觉加了viewport然后使用docs插件也能做到。

  • 插件文档地址

Storybook Playroom Addon 插件

storybook-addon-theme-playground 插件

 

 

 

 


转载本站文章《storybook插件说明： integrations与addons推荐》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/storybook/8896.html

posted @ 2023-03-18 12:33  zhoulujun  阅读(73)  评论(0)  编辑  收藏  举报