社区精选 #4

十月份充满了有趣的会议。我们在 ViteConf 上宣布了 Storybook 更紧密的 Vite 集成。我们还在伦敦的 React advanced 大会上与你们中的很多人进行了面对面交流。但我们及时回来分享我们通常的文章、视频、插件和工具综述。

欢迎来到精选 #4！

Storybook 7 之路 — CSF 3

Storybook 7.0 即将到来，随之而来的是，组件故事格式 (CSF) 3 将成为默认设置。CSF3 是我们开放格式的最新版本，用于使用 ES 模块声明式地编写故事。它极大地减少了样板代码并提高了人体工程学。

Chantastic 整理了一个关于最新标准的 7 分钟速成课程。
立即观看 »

Storybook 中一流的 Vite 支持

Storybook 7.0 还带来了更紧密的 Vite 集成：零配置设置，无需 Webpack，以及更小的安装包大小。

阅读公告 或 观看 Ian 在 ViteConf 上的演讲

使用 Storybook 测试运行器的代码覆盖率

Storybook 测试运行器使您能够使用 play 函数 测试组件逻辑。您可以模拟用户点击和按键并运行断言。

测试运行器现在可以生成覆盖率报告，以帮助您找到未测试的边缘情况。通过本指南开始使用 »

插件

LTR/RTL 插件 允许您在 LTR 和 RTL 之间快速切换 HTML dir 属性。Mayo Tobita 的插件还使您能够将文本方向与语言环境同步。

NextAuth.js Mock 插件：NextAuth.js 是一个用于 Next.js 应用程序的身份验证库。组件可以使用其 useSession 钩子访问会话状态。Tom Freudenberg 插件使您能够在故事中控制此会话状态。

加速 Storybook 工作流程的工具

New Story 是一个方便的 CLI，用于为您的组件生成故事。Mohammed Hussam's 工具通过标志接受属性变体，并为每个变体创建故事。

Storybook Snippets 是一个 VSCode 扩展，用于快速搭建故事。Jayanta Samaddar 的工具提供 CSF 2 和 3 格式的代码片段。

帮助您入门的资源

Shaun Lloyd 的使命是向您展示如何在 JavaScript 生态系统中使用各种工具来使用 Storybook。在十月份，他发布了两个配方

• Storybook 中的 Material UI： 演示了如何配置 Storybook 以加载 Material UI 组件并动态地与其 API 交互。
• Storybook 中的 I18n： 展示了如何使用 Storybook 测试 UI 本地化，并在工具栏中添加语言环境切换器

设计驱动的全栈开发： 在本次演讲中，David Price (RedwoodJS 的联合创始人) 向您展示了如何使用 Storybook 创建组件，然后使用 Redwood Directives 和 Auth 将它们连接到全栈应用程序中。

试图说服团队成员使用 Storybook？ Jerry Hogan 为您提供了帮助。他们的最新文章涵盖了 Storybook 的全部内容。

为 Storybook 添加多主题支持 作者：Yann Braga，是一份关于使用 Storybook 和 Chromatic 测试多个主题的详细指南。它涵盖了从通过装饰器加载主题到同时渲染各种主题以及运行可视化测试的所有内容。

Storybook 和 Next.js 入门： Daniel Williams 加入了 Eddie Jaoude ，一起完成了在 Next.js 应用程序中设置 Storybook 并为 Eddie 的 LinkFree 仓库编写一些故事的过程。

酷炫集成

Shopify Hydrogen + Vite + Storybook？ Hydrogen 是 Shopify 基于 React 的框架，用于构建无头店面。Drew Garrat 的这份分步指南向您展示了如何将其与 Storybook 结合使用。

Django 是一个流行的基于 Python 的 Web 框架。在 DjangoCon EU 上，Thibaud Colas 谈到了 使用 Django 进行组件驱动的开发。在其中，他们分享了为 Django 模板编写故事的工作流程。

为英国医学杂志开发设计系统 是 Paula Cristeam 和 Sean van Oossanen 的案例研究。他们谈论了他们的方法、工具选择和挑战。

在 Web 和 Native 应用程序中使用相同的 React 组件？Daniel Williams 创建了一个 演示仓库，展示了如何使用 Next.js + react-native (expo) 制作通用应用程序。 当然，还可以使用 Storybook 隔离构建这些组件。

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