副标题：实时编辑UI组件，无需代码

原文地址：medium.com/storybookjs…

原文作者：medium.com/@shilman

发表时间：2020年7月20日 - 4分钟阅读

Storybook是世界上最流行的UI组件工场，它被Airbnb、Slack、Lyft、IBM以及数千名行业内的顶级团队使用。它被Airbnb、Slack、Lyft、IBM以及整个行业成千上万的顶级团队所使用。

Storybook可以帮助你孤立地构建UI组件，并将其状态保存为故事。一个故事是一个简单的函数，它可以给定一组参数（道具、输入、插槽等）来渲染一个组件。

但组件是复杂的。很难预测一个组件会对不同的值做出怎样的反应，也很难为所有有意义的组合写出故事。所以能够交互式地探索状态空间是超级有用的。

这就是为什么我很兴奋地宣布Controls，一个新的Storybook 6.0插件，它允许你在不接触代码的情况下动态编辑一个组件的输入。控件是自动生成的UI，用于快速的组件实验。

⚡实时编辑组件。动态调整组件的参数。
🐇即时设置。没有安装成本。当您修改API时，无需维护。
🎛 自动生成。不需要额外的胶水代码。
🔑 无锁定。不依赖Storybook专用API。

🤷‍ ♀️我不是已经可以做到了吗？

动态编辑组件并不是一个新概念。组件 "游乐场 "已经存在多年。Storybook自己的Knobs插件每周的下载量超过100万次!

我们研究了来自Auth0、Shopify和我们充满活力的社区的团队如何实时编辑他们的组件。复杂的技术需要设置和持续维护。简单的方法希望人们知道如何编写代码。

幸运的是，JavaScript生态系统的趋势对我们有利。随着开发者大量采用类型系统（如TypeScript、Flow、propTypes），组件得到了它们所接受的明确的参数集。而且这些参数是机器可读的。

Controls使用类型来生成图形控件。它不需要额外的工作，并且无缝地集成到Storybook开发者体验中。

✨ 故事自动获得控制权

控件是由组件参数自动生成的。考虑以下组件在TypeScript中声明其接口。

interface ButtonProps { label?: string; }
const Button = ({ label='' }: ButtonProps) => (
  <button>{label}</button>
);

如果你正在使用React、Vue、Angular或Web Components，Storybook会分析你的组件参数，并自动生成UI来编辑这些参数。

这就节省了组件库中的数百行代码，这些代码不再需要随着你的组件变化而编写和更新。

Storybook故事（组件示例）是返回一个渲染组件的函数。控制值作为参数传递给你的Story函数，你也可以简洁地声明初始值。

export const Basic = (args) => <Button {...args} />;
Basic.args = { label: 'hello button' };

📚 完美的故事书文档。

Controls与Storybook的UI组件自动文档生成器Docs一起工作，包括DocsPage和MDX。

生成的 "args表 "包括每个组件参数的控件。这允许你在浏览文档时调整组件示例。

🚚 写一次故事，带到哪里都可以。

为 Controls 编写的故事可以移植到其他测试库和工具中。

它们基于Component Story Format，这是一个开放的基于ES6的组件示例标准。我们正在与各种设计、开发和测试工具合作，以确保 Controls 的故事在其他环境中得到支持。

如果你已经使用Knobs插件，Controls提供了一个更符合人体工程学的语法。它用标准的功能代码替换了 "侧载 "数据。下面是你如何使用Knobs来制作一个组件。

import { text } from '@storybook/addon-knobs';
export const Basic = () => (
  <Button label={text('Label', 'hello')} />
);

看到那个讨厌的Storybook导入了吗？回忆一下上面的 Controls 语法，它完全没有专有的依赖性。

export const Basic = (args) => <Button {...args} />;
Basic.args = { label: 'hello' };

当你用这种函数样式写故事时，它还可以帮助你减少故事的模板，在不同的故事中重用夹具数据，并在其他工具中更容易地回收故事.这些DX的好处在Storybook Args的发布帖子中详细说明。

⚡ 1分钟安装

今天就来试试Storybook 6.0中的控件。

npx sb upgrade

或者将Storybook引导到一个现有的应用程序中。

npx sb init

要创建你的第一个 Controls 故事，请创建一个函数，将一个 Args 对象作为它的第一个输入，然后用你要接收的数据来注释这个函数。

import { Button } from '@storybook/react/demo';
export default { title: 'Button/Controls', component: Button };
export const Basic = (args) => <Button {...args} />;
Basic.args = { children: 'hello' };

要获得该故事的自动生成控件（在React、Vue、Angular和Web-components中可用），请遵循文档中的快速安装说明。

参与进来

控制由Michael Shilman（我！）和Tom Coleman开发，灵感来自addon-knobs/docs的贡献者，包括Norbert de Langen、Filipp Riabchun、Atanas Stoyanov和Patrick Lafrance。设计和主题由Dominic Nguyen负责。

Storybook由1000多名开源贡献者维护，并由顶级维护者组成的指导委员会指导。如果你对贡献感兴趣，可以在GitHub上查看Storybook，创建一个问题，或者提交一个拉取请求。在Open Collective上捐款。在Discord上与我们聊天--通常会有维护者在线。

通过Twitter和注册我们的官方邮件列表来了解Storybook的最新动态。

upscri.be/d42fc0?as_e…

感谢Dominic Nguyen。

通过www.DeepL.com/Translator （免费版）翻译

[Web翻译]Storybook Controls体系