Storybook 控制项

Storybook 是世界上最受欢迎的 UI 组件工作台。Airbnb、Slack、Lyft、IBM 以及行业内数千个顶级团队都在使用它。

Storybook 帮助你孤立地构建 UI 组件，并将它们的状态保存为故事。故事是一个简单的函数，它根据一组参数（props、inputs、slots 等）渲染组件。

但是组件是复杂的。很难预测组件将如何对不同的值做出反应，并为所有有意义的组合编写故事。因此，能够以交互方式探索状态空间非常有用。

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

• ⚡ 实时编辑组件。动态调整组件参数。
• 🐇 即时设置。零设置成本。修改 API 时无需维护。
• 🎛 自动生成。无需额外的粘合代码。
• 🔑 无锁定。不依赖于 Storybook 特定的 API。

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

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

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

幸运的是，JavaScript 生态系统中的趋势对我们有利。随着开发者大规模采用类型系统（例如 TypeScript、Flow、propTypes），组件获得了明确指定的参数集。这些参数是机器可读的。

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

✨ 故事自动获得 Controls

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

interface ButtonProps { label?: string; }

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

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

这在一个组件库中节省了数百行代码，这些代码不再需要编写和更新，因为你的组件会发生变化。

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

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

📚 非常适合 Storybook 文档

Controls 与 Docs 配合使用，Docs 是 Storybook 用于 UI 组件的自动文档生成器，包括 DocsPage 和 MDX。

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

🚚 一次编写故事，随处使用

为 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 中试用 Controls

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 中可用），请按照文档中的快速 安装说明进行操作。

参与进来

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

Storybook 由 1000 多名开源贡献者维护，并由顶级维护者的指导委员会指导。如果你有兴趣贡献，请查看 GitHub 上的 Storybook，创建 issue 或提交 pull request。在 Open Collective 上捐款。在 Discord 中与我们聊天 — 维护者通常在线。