最佳故事书附加组件,将您的代码提升到一个新的水平

2020年12月30日11:23:16 发表评论 45 次浏览

本文概述

长大后, 我喜欢与乐高积木一起玩, 因为它们使你可以使用相同的零件无休止地组合不同的创意玩具组合。

你可以将UI开发中的组件视为Lego积木。

以同样的方式, 它们使你可以从一组池中组装不同的接口。

想象一下, 有一个工具可以帮助你以隔离的方式组织所有这些组件(或砖块), 使你能够高效地构建, 共享和测试它们。

这是角色故事书, 并且在他们的网站上定义如下:

Storybook是一个开源工具, 用于为React, Vue和Angular隔离开发UI组件。它使构建令人惊叹的UI井井有条且高效。

什么是故事书插件?

附加组件是可以帮助你通过新的自定义高级功能和工作流程增强你的Storybook的插件。

这些插件由核心维护者(官方插件)和开发人员社区(社区插件)贡献。

如果你一直在使用Storybook, 可能已经看过一些官方插件, 例如旋钮和动作.

插件仍然是Storybook的一个不断增长的功能。

以下是一些可极大改善你的工作流程的主要附加组件:

我们为制作了一个自定义演示.
不完全是。点击这里查看.

最佳故事书附加组件,将您的代码提升到一个新的水平1

旋钮

旋钮故事书插件的屏幕截图。

旋钮允许你通过Storybook界面动态编辑道具。

这是一个很棒的开发, 测试和调试工具。

使用旋钮, 你只需选中一个复选框或更改一个字段, 就可以将按钮的状态或文本从启用更改为禁用。

动作

Actions Storybook插件的屏幕截图。

的动作插件用于显示事件处理程序接收的数据。

这基本上是你的活动console.log().

使用此插件, 你可以监视组件上的多个操作。

你甚至可以在将数据发送到记录器之前对其进行处理, 以防万一之前需要进行一些清理。

小费:

活动插件

还可以使你为故事添加(发射)自定义事件。

你可以模仿事件并自定义有效负载。

视口

视口插件的屏幕截图。

视口插件可让你以不同的大小和布局显示故事。

该插件基本上充当你的浏览器开发人员工具。

你可以设置流行(iPhone 6, iPhone X, Pixel XL等), 对其进行编辑或在组件上添加自定义视口, 以帮助在不同的环境中可视化它们。

import { addParameters } from '@storybook/react';

const customViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2', styles: {
      width: '600px', height: '963px', }, }, kindleFireHD: {
    name: 'Kindle Fire HD', styles: {
      width: '533px', height: '801px', }, }, };

addParameters({
  viewport: { viewports: customViewports }, });

小费:

你可以使用以下方法改进组件的响应能力测试

太妃糖

回应性意见

.

Taffy支持动态可拖动的调整大小, 响应式视图可以设置媒体查询来帮助测试组件。

故事源

故事书用户界面的gif。

该插件仅在插件面板中添加了故事代码源。

这使读者可以查看组件的实现。

你甚至可以在代码中添加漂亮的配置(或格式设置规则)。

此外, 你可以在代码中添加明暗语法主题。

小费:

如果你是React用户, 则有一个

React Live Edit插件

.

顾名思义, 它可以帮助你实时编辑故事的代码。

辅助功能

旨在确保可访问性的Storybook插件的屏幕截图。

的a11y插件检查你的组件是否通用无障碍规则.

这有助于开发人员了解其组件遵循哪些规则以及违反哪些规则。

它甚至提供了有关修复方法的提示, 以及获得更多信息的链接。

文件

故事书文档的图像。

故事书文档将你的Storybook故事转换为世界一流的组件文档。

DocsPage

开箱即用, 你所有的故事都有DocsPage.

DocsPage是将你的组件故事, 文本描述, docgen注释, props表和代码示例以零配置的形式聚合到干净, 可读的页面中的方法。

MDX如果你想要更多控制权, MDX允许你将长格式的降价文档和故事写到一个文件中。

你还可以使用它来编写纯文档页面, 并将其与故事一起嵌入到Storybook中。

小费:

你可以使用

笔记

章节

插件来组织和增强甚至更多的组件文档。

版本

屏幕快照版本,基本上是故事书的git。

对于故事书中的组件, 版本基本上是你的git。

该插件可让你通过版本面板, 以防你为每个版本生成不同的静态Storybook构建的设置。

数据和状态管理

GraphQL和Apollo

如果你使用阿波罗客户为了帮助查询和更改你的GraphQL API, 阿波罗故事书插件你覆盖了吗

你可以提供模拟对象这将由你的组件消耗。

此外, 如果你的graphQL API依赖于图形CMS, 图形工具包附件帮助你直接在适当的组件中可视化所有数据。

你还可以以友好的可见形式浏览数据库。

Formik插件

现在, 以防万一你碰巧使用了众所周知的

胶体

在React中建立你的表格而不会泪流满面,

这个Storybook插件

将你的Formik字段包装起来并在面板中跟踪它们的状态, 从而为你提供良好的体验。

i18n

i18n是一款仅可帮助更改组件区域设置的工具。

该插件完全与图书馆无关(不依赖于任何特定的国际化工具)。

款式

使用Storybook中不同的样式插件, 你可以通过各种方式展示组件。

主题乐园

主题游乐场提供了一个面板, 可以在其中轻松调整组件中预定义的主题值。

故事书主题游乐场的UI屏幕截图。

风味风格

如果你有任何样式表, 则可以使用以下样式:

  1. 样式化组件主题插件
  2. JSS主题插件
  3. 材质UI插件
  4. CSS类主题插件

游戏室

故事书UI演示。

Playroom可能是社区最佳Storybook插件之一。

游戏室使你可以与所有组件一起玩, 同时针对流行的屏幕断点测试它们。

使用此附加组件, 你可以开始使用每个故事源作为起点来设计组件的组合。

设计插件

如果出于任何原因希望将Adobe XD或Figma UI设计嵌入到Storybook页面中, 则可以使用XD插件和Figma插件, 分别。

你也可以使用垂直节奏每当你的高保真设计具有非常敏感的规格时, 都需要添加。

它们将帮助你处理组件的尺寸, 深度和线高。

小费:

还有一个

设计令牌附件

使你能够从样式表自动生成设计令牌文档。

Storybook组件的屏幕快照。

额外提示

每次你想尝试新的插件时, 都应始终查看

框架支持表

.

基本上是

caniuse.com

适用于Storybook插件。

如果你是Storybook及其生态系统的忠实拥护者, 请记住通过观看Storybook的超赞列表存储库来保持最前沿。

React Carbon设计系统在其故事书中包含了很多不错的插件。你可以使用它来检查大多数上述插件。

总结

故事书已经提供了一种很好的前端开发方法, 而附加组件只会增加其功能。

插件是Storybook及其为开发人员带来更好体验的理想补充。

日志火箭:全面了解你的网络应用

LogRocket仪表板免费试用横幅

日志火箭是一个前端应用程序监视解决方案, 可让你重播问题, 就好像问题发生在你自己的浏览器中一样。 notlogy无需猜测错误发生的原因, 也不要求用户提供屏幕截图和日志转储, 而是让你重播会话以快速了解出了什么问题。无论框架如何, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。

除了记录Redux动作和状态外, notlogy还会记录控制台日志, JavaScript错误, 堆栈跟踪, 带有标题+正文, 浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS, 甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: