Storybook 5.2
世界一流的设计系统基础设施
Storybook 为设计系统（如 Shopify Polaris、IBM Carbon、Salesforce Lightning、Auth0 Cosmos、Airbnb Lunar）以及超过 25,000 个公共 GitHub 项目的组件开发提供支持。
Storybook 5.2 为所有 Storybook 用户简化了组件文档。我们的目标是让最佳实践文档（如上述高知名度设计系统中发现的那种文档）对*所有* Storybook 项目都易于使用。我们的首要步骤是
📚 DocsPage：零配置组件文档
📝 MDX：统一故事和长篇文档
📦 组件故事格式 (Component Story Format)：简单、可移植的组件示例
🖼 Storybook 设计系统 (Storybook Design System)：最佳实践的实践
它还在各个层面带来了数百项改进，包括新的 addon API、原生 TypeScript 类型、新的预设、自定义故事排序、一流的 hooks 支持、性能提升等等。
继续阅读以了解改进概览、升级说明和项目更新。
设计系统文档，我们来了
今年早些时候，我们设定了一个雄心勃勃的愿景，以彻底改进组件文档。
“借助 Storybook Docs，您可以快速生成设计系统文档，根据自己的喜好进行自定义，并将最佳实践分享给您的团队。”
5.2 引入了对 Storybook Docs 的官方支持。与 Storybook 的其余部分一样，Docs 支持包括 React、Vue、Angular、HTML Web Components、Svelte 等在内的所有主要框架。
DocsPage
5.2 的核心是 DocsPage，这是一个零配置模板，用于从您现有的故事自动生成最佳实践组件文档。
Storybook 的价值主张在于，它使您能够*独立地*开发 UI 组件。开发人员构建*故事*（示例）来捕获组件的关键状态，而无需担心复杂的依赖关系或不可靠的数据 API。
DocsPage 背后的关键洞察力在于，现代前端团队已经生成了数百个故事作为开发的自然副产品，这些故事可以用来生成出色的文档。与传统的文档在发布后立即过时不同，故事是可执行的、可测试的，并且始终与生产代码同步。
DocsPage 获取您的故事，自动将它们与代码注释和组件属性表结合起来，并生成漂亮的页面，其中融入了设计系统的最佳实践……而无需您进行额外的配置！
在 DocsPage 公告帖子 中了解所有相关信息
MDX
DocsPage 是免费获得出色文档的绝佳方式。如果您想要更多控制权，MDX 是一种在同一文件中*灵活地*并排创作故事和长篇文档的方法。
这就是在 MDX 中编写故事的样子。这些故事与整个 Storybook 生态系统完全兼容
import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { Badge } from './Badge';
<Meta title="Demo/Badge" component={Badge} />
# Badge
With `MDX` we write longform markdown documentation for our `Badge` component and embed Doc Blocks inline.
<Props of={Badge} />
<Story name="positive">
<Badge status="positive">Positive</Badge>
</Story>MDX 结合了 markdown 文档的便捷性和简洁性以及任意 JSX，这意味着您可以使用任意内容和布局来配置组件文档。我们还提供了一个丰富的“文档块”库，用于常见的文档任务，例如显示组件属性、调色板、排版示例和其他设计令牌。
MDX 支持今天在 5.2 中可用，官方版本目前在 Storybook 5.3-rc 中可用。要了解更多信息，请参阅 Storybook MDX 发布帖子。
组件故事格式 (Component Story Format)
为了支持 MDX 故事，我们完全重塑了 Storybook 的故事格式。组件故事格式 (Component Story Format, CSF) 是一种可移植的开放标准，用于在纯 ES6 模块中创作 Storybook 故事。
如果您使用过早期版本的 Storybook，您可能熟悉“经典”的 storiesOf API
import { storiesOf } from '@storybook/react';
storiesOf('atoms/Button', module)
.add('text', () => <Button>Hello</Button>)
.add('emoji', () => <Button>😀😎👍💯</Button>);在 CSF 中，相同的示例如下所示
export default { title: 'atoms/Button' };
export const text = () => <Button>Hello</Button>;
export const emoji = () => <Button>😀😎👍💯</Button>;CSF 支持 storiesOf API 的所有功能，但它……太棒了。它是一种您已经熟悉和喜爱的干净、*标准*格式。CSF 故事没有 Storybook 特有的依赖项，这意味着这些故事可以移植到任何支持 ES6 的环境。想象一下能够在整个设计/开发堆栈中无缝重用组件示例：在您的设计工具、文档，甚至测试套件中！我们正在积极努力实现这一目标。
作为一种纯粹的声明式标准，更高级别的格式（例如 MDX 或 Github-flavored Markdown (GFM)）可以透明地编译为 CSF。这使得 Storybook 社区可以尝试替代的故事创作方式，同时保持与整个生态系统的兼容性。
CSF 是 Storybook 5.2 中的默认设置。当您向新项目添加 Storybook 时，它现在以 CSF 而不是旧的 storiesOf 格式生成模板代码。当然，由于成千上万的项目依赖于 storiesOf，我们将在可预见的未来继续支持它。
要了解更多信息，请参阅 CSF 公告帖子
Storybook 设计系统 (Storybook design system)
将所有这些工作联系在一起的是 Storybook 设计系统 (Storybook Design System, SDS)。设计系统旨在提高三个高流量 Storybook 网站的组件重用率，也是使用、试用并最终演示 Storybook Docs 功能的起点。
SDS 的诞生源于统一来自三个不同网站（Storybook 网站、Learn Storybook 教程和 Chromatic（Storybook 维护者提供的可视化测试服务））的不同组件的需求。
它包含 25 个生产级功能性 UI 组件和 95 个故事、Storybook 品牌的设计令牌以及组件/库文档。
SDS 将使 Storybook 社区更容易开发和维护新的营销和文档站点。但它也具有次要目的：它也是 Storybook Docs 本身的设计驱动因素和公共参考实现！无需再寻找关于如何开发组件故事、记录它们、测试和发布它们的最佳实践。
要了解更多信息，请浏览 Storybook 设计系统 或阅读 设计系统公告
终于可以轻松编写文档了！
Storybook 已经是设计系统工程的首选工具。随着 DocsPage、MDX、组件故事格式和新设计系统的加入，我们正在改变组件文档，并将设计系统最佳实践带给所有使用 Storybook 的项目。立即在 5.2 中开始使用这些改进，并继续关注 5.3 版本中更令人兴奋的全面更新。
还有（数百）件事
拥有 750 多名贡献者 的蓬勃发展的社区项目的惊人之处在于，系统在各个层面都在不断改进。
5.2 的其他亮点包括
✅ Addon API。Storybook 以其丰富的 addon 生态系统而闻名，并且由于 Norbert de Langen 和 Filipp Riabchun 的基于 hooks 的新 API，在 5.2 中编写 addons 变得更加容易。新的 API 遵循 React hooks 模式，这使得状态管理和通信更简单、更简洁。改进 记录在此处。
✅ TypeScript 支持。Typescript 最近在 Storybook 的代码库中超过了 Javascript，5.2 包含大多数软件包的“原生” Typescript 类型。我们将在不久后发布正式公告，但在此期间，对于大多数常见情况，您可以不再使用 DefinitelyTyped。感谢 Kai Röder、Gaëtan Maisse、Norbert de Langen 以及更多积极致力于转换的贡献者。
✅ React hooks 支持。由于 Michael Shilman 和 Atanas Stoyanov 的 小 修复，Storybook 5.2 包含对故事中 React hooks 的一流支持。
✅ 故事排序。应大众需求，Storybook 现在支持故事排序功能，以控制导航面板中故事的顺序。由 Robert Snow 贡献，Tom Coleman 提供帮助。
✅ 性能。由于 Kevin Weber 重现的减速问题以及 Michael Shilman 的优化，大型 storybook 的 Storybook 故事切换和搜索性能得到了显着提高（~1000 毫秒 => ~50 毫秒）。
✅ 独立模式。Storybook 仍然基于 Webpack，但现在可以将 UI 连接到外部服务器，这要归功于 RP Deshaies 以及 Tom Coleman 和 Michael Shilman 的帮助。我们在 5.2 中原型化了一个在 Parcel bundler 下运行的 Storybook 实例。这为未来许多有趣的事情奠定了基础。有人想要用于 Rails 的 Storybook 吗？
✅ 新的预设。Storybook 5.1 引入了预设：babel、webpack 和 addons 的单行配置。Storybook 5.2 添加了 SCSS 预设（由 Igor Davydkin 提供）和 beta Create-React App 预设（由 Brody McKee 提供），这大大改进了 Storybook 内置的 CRA 支持。
升级到 Storybook 5.2
Storybook 5.2 包含许多新功能，但据我所知，不包含任何重大更改。如果您是从 3.x/4.x 版本升级，我们为您准备了 5.0 升级指南。如果您已经在使用 5.x 版本，则升级非常容易
npx npm-check-updates '/storybook/' -u
npm install # or yarn如果您是 Storybook 的新手，那么现在是开始使用的最佳时机。查看 Storybook 教程，了解 React/Angular/Vue 的分步指南。或者直接开始使用
cd my-project
npx -p @storybook/cli sb init
yarn storybook一旦您升级到 5.2，将 DocsPage 添加到您的项目就轻而易举了
npm install @storybook/addon-docs --save-dev # or yarn然后将以下行添加到您的 .storybook/presets.js 文件中
module.exports = ['@storybook/addon-docs/react/preset'];将 react 替换为您选择的框架。有关配置 DocsPage 的更多信息，请阅读 addon-docs 安装说明。
参与进来
Storybook 的支柱是其令人难以置信的开发者和用户社区。该项目最近突破了 41,000 个 Github 星星，这使我们与 Rails 和 Bitcoin 等传奇项目相提并论。我们共同构建组件开发的未来。
我们很乐意让您参与进来，无论您的经验水平如何。如果 Storybook 使您的 UI 开发工作流程更轻松，请帮助 Storybook 变得更好。您可以贡献新功能、修复错误或改进文档。在 Discord 上加入我们，在 Open Collective 上支持我们，或者直接在 Github 上参与。请👏为这篇文章鼓掌并分享，以帮助更多人发现它。
Storybook 5.2 代码贡献者
@8beeeaaat @adamdoyle @atanasster @autarc @baraalex @benoitdion @bqrichards @chaseadamsio @chris-dura @christianliebel @christoph-fricke @christophehurpeau @codebyalex @crimx@ctavan @danielduan @danrha @darondel-yoobic @debel27 @dogafincan @domyen @dylanpiercey @edumoreira1506 @elliotlarson @emilio-martinez @enagy27 @enuvid @ewgenius @expe-lbenychou @fabianmarinog-turner @fabiradi @forbeslindesay @gaetanmaisse @ghengeveld @gnujim @gongreg @graup @hipstersmoothie @hypnosphi @indigolain @jamesgeorge007 @jballin @jeffgukang @jendowns @jessica-koch @jimmydalecleveland @joeycozza @jounqin @jsomsanith-tlnd @juliamitchelmore @kaelig @kamahl19 @kroeder @leoyli @libetl @lonyele @lucasterra @mariocadenas @matt-tingen @matthewlehner @mrmckeb @ndelangen @ndom91 @nzacca @pascaliske @piperchester @pksunkara @pocka @rembrandtreyes @resource11 @richardtorres314 @robaxelsen @roydipti23 @rwoverdijk @sakito21 @shilman @simenb @smasontst @stephanemw @stereodenis @testerez @thebuilder @tylerlee @wa4-fearless-otter @xyshaokang @zkochan @zol