Storybook 控件

Storybook 是世界上最流行的 UI 组件工作坊。它被 Airbnb、Slack、Lyft、IBM 以及该行业中数千家顶级团队使用。

Storybook 帮助您在隔离环境中构建 UI 组件，并将其状态保存为故事（stories）。一个故事是一个简单的函数，它根据一组 参数（props、inputs、slots 等）渲染组件。

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

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

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

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

动态编辑组件并非新概念。组件“演练场（playgrounds）”已经存在多年。Storybook 自己的 Knobs 插件每周下载量超过 100 万次！

我们研究了 Auth0、Shopify 以及我们充满活力的社区团队如何实时编辑其组件。复杂的技法需要设置和持续维护。简单的方法则要求人们懂得如何编写代码。

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

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

✨ 故事（Stories）自动获得控件

Controls 是从组件参数自动生成的。考虑以下在 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' };

📚 非常适合 Storybook 文档

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

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

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

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

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

如果您已经使用 Knobs 插件，Controls 提供了更符合人体工程学的语法。它用标准的函数式代码替换了“侧载（side-loaded）”数据。以下是如何使用 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' };

当您以这种函数风格编写故事时，它还有助于您 减少 故事样板代码，在故事之间 重用 fixture 数据，并在其他工具中更轻松地 复用 故事。这些 DX 优势在 Storybook Args release post 中有详细阐述。

⚡ 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，创建议题，或提交拉取请求。在 Open Collective 上捐赠。在 Discord 中与我们聊天——通常有维护者在线。