社区精选 #3

欢迎来到精选 #3！本月我们有很多设计更新，以及社区贡献的精彩文章、插件和资源汇总。

Storybook 网站焕然一新

我很高兴宣布新 Storybook 主页正式上线。新主页包含大量动画和演示，以展示 Storybook 的所有功能。我们还优化了导航，让您更容易找到所需内容，现在您也可以在任何页面搜索文档了。

哦，如果您不小心进入了我们的 404 页面，现在那里有一个有趣的小互动玩具。

7.0 设计 Alpha 版

网站并不是唯一进行了视觉刷新的地方。我们还优化了 Storybook 核心 UI——采用了全边框布局，重新组织了工具栏并提供了一套全新的图标。7.0 更新还预打包了 Storybook UI，这意味着更快的启动速度。

新设计现已推出 Alpha 版，查看详情 »

Chantastic 视频教程

7 月份，chantastic 开启了一个新的 YouTube 系列视频，旨在帮助您和您的团队成为 Storybook 专家。

最新的教程探讨了 如何在 Storybook 中进行交互式组件测试。您将学习如何使用 play 函数、testing-library 和 Jest 模拟用户点击和按键。

之前的视频涵盖了各种工作流程，例如使用 Storybook Controls 连接 props，使用 Measure 和 Outline 插件调试 CSS，以及使用 Viewport 插件测试响应式 UI。

插件

Chaos 插件：您的组件对样式溢出是否具有弹性？Alex Wilson 的插件为组件应用可继承的 CSS 属性，以查看其样式如何受到破坏。

Amplitude 插件：帮助设计系统团队捕获其 Storybook 的使用指标。Mae Capozzi（该插件的创建者之一）甚至撰写了一篇博文，分享了他们如何使用指标改进其设计系统文档的用户体验。

Docusaurus 插件：让在 Storybook 中开发 Docusaurus 组件变得更加容易。Jody Heavener 的插件应用了 Storybook 加载 SVG、字体、MDX 和 CSS 模块所需的核心 Webpack，沿用了 Docusaurus 的方式。

Design Tokens CSS 插件：团队通常将设计 token 以 CSS 变量的形式维护。Raul Melo 构建了一个插件，让您可以快速切换这些 token 值。

助您入门的资源

加速您的 Angular 14 开发，由Colum Ferry撰写，展示了如何将 Angular 与 Storybook、Tailwind 和 Nx 结合使用。

如何测试 React 应用，由Patrick Lafrance撰写，展示了如何通过结合 Storybook 交互测试和 Chromatic 视觉测试来进行组件级测试。

Storybook 作为团队协作工具。在此次演讲中，Niamh McCooey分享了团队如何使用 Storybook 和 React 使跨职能协作更容易并减少瓶颈。

使用 NX、Storybook 和下一代构建工具入门，由Katerina Skroumpelou撰写，展示了如何在您的 Nx 工作区中使用 Vite 构建 Storybook。

酷炫的集成

Storybook 作为游戏开发工具！@Foxhoundn 在制作他们的 3D 游戏 SYNTHAX 时应用了组件驱动的方法。他们使用 Storybook 来独立构建各种组成部分——网格、粒子、动画和交互元素。

Sitecore 是最流行的企业级 CMS 之一。Thomas Desmond 展示了如何将 Storybook 与 Sitecore 结合使用。

Story.to.design 采用创新的方法将 Story 转换为 Figma 组件。在最近一期 Learn With Jason 节目中，Thaís Santos 演示了如何使用 Storybook 和 story.to.design 生成 Figma UI 工具包。

想在这里展示您的作品吗？在您的文章、视频和插件中提及@storybookjs。