首页 > 其他分享 >storybook插件说明: integrations与addons推荐

storybook插件说明: integrations与addons推荐

时间:2023-03-18 12:44:55浏览次数:57  
标签:插件 预览 docs integrations storybook 文档 addon

官方的:

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

标签:插件,预览,docs,integrations,storybook,文档,addon
From: https://www.cnblogs.com/zhoulujun/p/17229734.html

相关文章

  • 下载Chrome商店插件至本地
    1、获取插件ID:从Chrome商店浏览插件链接地址,地址栏中最后一串就是插件ID,将ID复制出来,如下(前提是需要你的电脑能访问Google)https://chrome.google.com/webstore/detail/qr......
  • debian系统Gnome3插件
    将AppIndicator、KStatusNotifierItem和旧版托盘图标支持添加到命令行管理程序appindicator-support拓展坞插件DashtoDockcpu监控插件Vitals窗口指示器Wo......
  • (五)博客园美化(风格1):音乐插件等小模块的运用
    空闲的时候自己根据很多大神的美化教程,把自己的博客园简单装修了下。再此整理一下美化方式和步骤,如果喜欢本人博客这种风格,可以参考一下这个系列。一、ForkmeonGitee......
  • 【插件介绍】Mesh2Geom插件
    MeshtoGeometryPlugin,来自达索官方论坛社区原帖链接:MeshtoGeometryPluginpluginfeature:允许Abaqus用户从网格文件生成几何图形。该插件可以将.STL文件和网......
  • Vue 引入PDF文件预览,可下载,插件vue-pdf
    最近的一个项目中用到了读取本地文件PDF,先是用了PDF组件,没有达到想要的效果,后来查找官网用iframe标签来替代PDF组件,达到想要的效果了, 1、第一步先安装vue-pdf插件......
  • 【Pycharm】一些Pycharm好用的插件
    本文记录一些好用的pycharm插件,后续碰到好用的继续更新。RequirementsHomepage:https://plugins.jetbrains.com/plugin/10837-requirements一键部署环境利器通过require......
  • 新版谷歌Chrome取消对PPAPI插件支持后,浏览器网页打开编辑保存微软Office、金山WPS文档
    最近陆续看到一些大学发布公告,谷歌Chrome取消了对PPAPI插件支持,导致某些在线Office厂家产品将无法在谷歌Chrome107及以上版本运行,被迫更换浏览器或者使用低版本浏览器苟延......
  • 使用Automa插件进行网页内容自动填充
    有时需要重复的在网页上填写一些固定信息提交,但是浏览器并不能自动填充这些信息,为了减少工作量可以使用 AutoFill 这类自动填充插件来解决问题(甚至是杀鸡用牛刀使用AutoH......
  • 漏洞插件更新源收集
    长亭XRAY:https://github.com/chaitin/xray/releases开源扫描器Nuclei:https://github.com/projectdiscovery/nuclei-templates/国家漏洞信息库:https://www.cnvd.org.cn......
  • flask-migrate插件使用
    安装pipinstallflask-migrate代码exts.pyfromflask_sqlalchemyimportSQLAlchemyfromflask_migrateimportMigratedb=SQLAlchemy()#创建数据库连接......