什么是 Storybook?
Storybook 是用于开发 UI 组件的工具，它可以在独立的环境中，独立展示 UI 组件，并且快速反馈开发者对组件的更改。
Storybook 本身是用于组件开发的，而非完整页面的。一旦我们有了可重用的 UI 组件，我们就可以将其列表传递给 Storybook，并在独立的环境中展示出来。这有助于我们开发者了解其他开发者在项目中使用的组件，以及在他们自己的代码中如何使用这些组件。
npm 包 storybook-groups
storybook-groups 是一个可以使的 Storybook 分组展示的插件，它可以让我们更加清晰的展示组件，以及方便我们更好的管理组件。
安装和配置
我们可以通过 npm 安装 storybook-groups：
npm install -D storybook-groups
接下来，在 .storybook/addons.js 中导入 storybook-groups：
import 'storybook-groups';
这里的 addons.js 的位置可能在 .storybook 文件夹内，也有可能在单个组件项目的根目录内。
接着，在 .storybook/config.js 中，配置 storybook-groups 的参数：
import { setAddon } from '@storybook/react';
import { withGroups } from 'storybook-groups';
setAddon(withGroups);同时，我们需要在 stories 文件中，给组件加上 groupName 属性，指定组件所属的分组：
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from './Button';
storiesOf('Buttons', module)
.add('Primary', () => <Button primary>Primary Button</Button>, { groupName: 'Button' })
.add('Secondary', () => <Button>Secondary Button</Button>, { groupName: 'Button' })
.add('Link', () => <Button href="#">Link Button</Button>, { groupName: 'Button' });这里将三个 Button 组件分到了一个名为 Button 的分组中。
分组展示
在配置好 storybook-groups 后，我们可以开始分组展示组件了。在默认情况下，storybook-groups 会按照 groupName 属性的值来展示组件，如果我们想要修改分组展示的呈现形式，则可以在 .storybook/config.js 中指定具体的配置参数。
举个例子，在以下的配置中，我们指定了所有分组都按照首字母进行分组，并设置了分组展示时的排序方式：
-- -------------------- ---- -------
------ - -------- - ---- -------------------
------ - ---------- - ---- -------------------
---------------------
------- -
-
--- ---------
----- ----------
--------- -----------
--
--
-------- -
---------- -----
----- -
--- -------
---------- ------
--
--
--------- -
- ------------ ---------- ------ - -------- --
- ------------ ------------ ------ - ---------- --
- ------------ ------- ------ - ----- --
--
----在以上的配置中，我们：
- 指定了一个名为 button 的分组，将其中包含的 Button 组件加入该分组中；
- 指定了展示配置中，同时展示 Panel 和 List 呈现；
- 指定了展示分组的排序方式，按照组件名称的首字母进行排序；
- 指定了展示每个分组所包含的组件的 sections。
总结
通过使用 npm 包 storybook-groups，我们可以更加清晰、方便的管理组件，以及更加高效的展示组件的效果和功能，在组件开发过程中具有非常重要的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eac81e8991b448dc23a