Storybook 4.0 发布啦！

欢迎来到最新迭代的 Storybook，世界上最受欢迎的 UI 组件工作台。

Storybook 改进了 React/React Native/Vue/Angular 等框架的组件开发、测试和文档编写。它被 Airbnb、Slack、Squarespace 和 Lyft 等工程巨头所使用。

Storybook 4.0 (SB4) 支持六个新的视图层，并在各个层面都进行了改进

• 🖼 视图层：Ember、MarkoJS、Mithril、HTML、Svelte、Riot
• 🛠 构建：Webpack 4、Babel 7
• 📱 移动端：React Native、移动设备视图
• 🎨 UI：主题化
• ⚙️ 核心：故事参数

我们的目标是帮助每位开发者构建坚如磐石的 UI 组件。无论使用何种框架或技术栈。今天，我们朝着这个目标又迈进了一步。

请继续阅读，了解 SB4 将如何全面提升您的组件开发体验。

Storybook 支持六个新的视图层

我们非常高兴地向 Storybook 的 UI 组件工具和最佳实践生态系统引入六个新的视图层

• 🔥 Ember 作者：Gabriel J Csapo 和 Robert Jackson
• 🌈 MarkoJS 作者：Neville Mehta
• ⬛ Mithril 作者：Sangmin Yoon
• 📃 HTML 代码片段 作者：Filipp Riabchun
• 📦 Svelte 作者：Gavin King
• 🔴 Riot.js 作者：Lionel Ben ychou

Storybook 及其插件是视图层无关的。这意味着每次有人添加功能或修复错误，所有用户都会受益，无论他们选择哪个框架。

例如，Angular 版 Storybook 显著改进了 Typescript 支持。React Native 的改进将使下一代 Web UI 受益。新的视图层对每个人都有好处。

使用 Webpack4 和 Babel7 更快地构建

感谢 Filipp Riabchun，Storybook 4 通过升级到 Webpack 4 和 Babel 7 获得了显著的性能提升。Storybook 现在兼容流行的前端工具，如 create-react-app 2、Gatsby 2 和 Next 7。

Webpack 4 和 Babel 7 还包含数百项其他改进，包括 Webpack 4 中的 WebAssembly 支持；Babel 7 中的 JS 配置、Typescript、JSX 片段。

如果您是从旧版本升级，我们将在我们的 Storybook 4.0 迁移指南 中逐步指导您完成升级。

“耶，迁移完成了，一切都运行良好！还注意到性能有了惊人的提升，告诉大家这太棒了！” — Josh Callendar，Lyft

一流的 React Native 支持

React Native 版 Storybook 在 4.0 中也进行了全面改造。

现在，将 Storybook 分发到您团队的移动设备上变得非常简单。它拥有您需要的一切，可以像应用程序一样运行 Storybook，而无需连接到 Storybook 服务器。

@storybook/react-native 的新更新改进了它与您的应用程序的集成方式。此外，Storybook 现在具有用于流行插件（如 Knobs、Notes 和 Backgrounds）的设备上 UI。

Gytis Vinclovas 领导了 Storybook 4.0 的 React Native 工作。他 在他的文章中详细记录了这些变化。

根据您的喜好主题化 Storybook

开发者现在可以精确控制 Storybook 的外观。Norbert de Langen 引入了主题化，使您可以调整样式以匹配您的品牌。

Storybook 4.0 包含“深色”主题，以展示各种可能性。有关主题化说明，请查看文档。

更轻松地开发移动 Web 应用程序

感谢 Denzenin，Storybook 4 包含一个专用的移动视图。

当检测到移动设备用户代理时，Storybook 会在三个单独的选项卡中显示其故事目录、主组件预览和插件面板。

在您的手机上浏览我们的 官方 Storybook 示例，或在 Web 浏览器的开发者工具中设置移动用户代理并重新加载页面，即可查看演示。

故事参数 API

感谢 Tom Coleman 的新参数 API，用户和插件作者现在可以使用标准格式来配置故事。

例如，无需为每个故事使用笨拙的 withNotes 装饰器

storiesOf('My component', module)
  .add('story1', withNotes('some notes')(() => <Component ... />))
  .add('story2', withNotes('other notes')(() => <Component .../>))

您可以在添加故事时传递额外的参数来注释故事

// .storyook/config.js (global decorator, local also supported)
addDecorator(withNotes)

// Component.stories.js
storiesOf('My component', module)
  .add('story1', () => <Component />, { notes: 'some notes' })
  .add('story2', () => <Component />, { notes: 'other notes' })

所有官方 Storybook 插件 都已转换为使用故事参数。有关新 API 如何工作的更多信息，请参阅文档。

升级到 Storybook 4.0

立即升级到 Storybook 4.0 — 只需一分钟。

如果您是 Storybook 的新手，现在是开始使用的最佳时机。Storybook 支持最流行的视图层和前端技术，以帮助您创建持久的 UI 组件。查看 Storybook 教程，获取 React/Angular/Vue 的分步演练。或者，如果您只想直接开始

cd my-project
npx -p @storybook/cli sb init
yarn storybook

参与进来

有疑问或赞扬？在 Twitter、Discord、Github、Slack 或下面的评论中打个招呼。请👏为这篇文章鼓掌并分享，以帮助更多人发现它。

感谢社区和赞助商
Storybook 仍然是世界上最受欢迎的 UI 组件浏览器。我们最近在 Github 上突破了 3 万颗星，NPM 上每月下载量达到 400 万次，贡献者达到 500 人。

Storybook 的 Open Collective 正在获得势头。它每月收到来自 Facebook、Chromatic、Xebia、Percy、Tipe 和 Applitools 的月度赞助。Algolia、Airbnb 和 José Manual Lucas Muñoz 最近也做出了一次性的重大贡献。来自社区的许多宝贵支持者也纷纷站出来帮助该项目。这些捐款用于托管、贡献者礼品、文档和推广。

–来自 Storybook 团队的 ❤️

感谢您！ @a-tokyo @adekbadek @ailrun @alanhogan @andyo729 @astrotim @bastienfp @bmson @br0ken- @brian-mcbride @brycemhammond @camel-floss @choznerol @clehnert-psl @cliedeman @connorholyday @cortopy @danielduan @denzenin @desfero @dimitrijemanic @dioxmio @do7be @domyen @donaldpipowitch @edward1224 @ekhaled @elob @ewolfe @expe-lbenychou @faun @fibo @fran-worley @fvilers @gabrielcsapo @georgewl @glazy @gongreg @grimones @gromchen @hisapy @hypnosphi @ianvs @igor-dv @ikesyo @isoppp @j-kallunki @jalilarfaoui @jamesgorrie @jayphelps @jbaumgardt @jfsiii @jh3y @jhswart @jmiazga @jondot @juhq @keraito @klimentru1986 @kroeder @kumarharsh @langri-sha @libetl @ljharb @lucidpaper @luisdanielroviracontreras @lvarayut @manuel-magnetix @markelog @marob @marshallmick007 @martinmacko47 @meesvandongen @michaelduminy @mizx @mnicole @mrmckeb @mshaaban088 @mvasin @ndelangen @nemodreamer @nm123github @noriste @paradoxxxzero @pascalduez @pelotom @phillduffy @pksunkara @plsr @plumpnation @primigenus @rantelo @rhalff @rwieruch @sanpochew @shilman @silencerweb @sky-franciscogoncalves @skywhale @stephanemw @stijnkoopal @swernerx @swese44 @thekashey @thomasbertet @timothymclane @titonobre @tkh44 @tmeasday @tobilen @tombyrer @tretuna @tsiq-swyx @unional @urikphytech @vertexbz @vidaaudrey @wearymonkey @web-devel @westandy-dcp @wuweiweiwu @yaodingyd @yi-ge @yogu @zgreen