社区展示 #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 模拟用户点击和按键。

过去的视频涵盖了诸如 将 props 与 Storybook Controls 连接、使用 Measure 和 Outline 插件调试 CSS 以及 使用 Viewport 插件测试响应式 UI 等工作流程。

插件

Chaos 插件：您的组件是否能够抵抗样式泄漏？Alex Wilson 的插件将可继承的 CSS 属性应用于组件，以查看它如何破坏其样式。

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

Docusaurus 插件：使在 Storybook 中开发 Docusaurus 组件更加容易。Jody Heavener 的插件应用了核心 Webpack，您的 Storybook 需要它以 Docusaurus 的方式加载 SVG、字体、MDX 和 CSS 模块。

Design Tokens CSS 插件：团队通常将其设计令牌维护为 CSS 变量。Raul Melo 构建了一个插件，允许您快速交换这些令牌值。

帮助您入门的资源

快速开始您的 Angular 14 开发，作者是 Colum Ferry，向您展示如何将 Angular 与 Storybook、Tailwind 和 Nx 结合使用。

如何测试 React 应用程序，作者是 Patrick Lafrance，向您展示如何通过将 Storybook 交互测试与 Chromatic Visual 测试相结合，在组件级别进行测试。

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 采用了一种创新的方法，将故事转换为 Figma 组件。在 Learn With Jason 的最新一集中，Thaís Santos 演示了如何使用 Storybook 和 story.to.design 生成 Figma UI 套件。

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