玩转 Storybook: Day 30 总结 & 学习资源

根据研究指出，重用程序码可以节省42–81％的时间，并提高生产力 40％。易於共享UI元件的Design System在开发团队中越来越流行。

Design System 的工作流程

前端工具如何达成协同工作对设计和开发团队具有重大的影响。如果做得好，开发和重用UI元件应该是无缝的。

本单元会利用新的元件 AvatarList 展示 Design System Workflow。

开发元件

AvatarList 是显示多个头像的元件。AvatarList的相关UI呈现程序码，开始被粘贴到许多专案中。所以要把它纳入到 Design System中。

首先，先建立一个 branch:create-avatar-list-component

$ git checkout -b create-avatar-list-component

将 AvatarList 的元件程序码及Stories档案下载下来放到 /src 中

再继续加上二个Stories，补充一下元件的二种状态：small和loading

// src/AvatarList.stories.js

import React from 'react';

import { AvatarList } from './AvatarList';

export default {
  title: 'Design System/AvatarList',
};

const userdata = [
  {
    id: '1',
    name: 'Dominic Nguyen',
    avatarUrl: 'https://avatars2.githubusercontent.com/u/263385',
  },
  {
    id: '2',
    name: 'Tom Coleman',
    avatarUrl: 'https://avatars2.githubusercontent.com/u/132554',
  },
];

const Template = (args) => <AvatarList {...args} />;

export const Short = Template.bind({});
Short.args = {
  users: userdata
};

export const SmallSize = Template.bind({});
SmallSize.args = {
  users: userdata,
  size: 'small',
};

export const Loading = Template.bind({});
Loading.args = {
  loading: true,
};

因为这是头像列表，所以很多个头像的状况也要被显示出来，所以我们再加上几个stories

// src/AvatarList.stories.js

const moreuserdata = [
  {
    id: '3',
    name: 'Zoltan Olah',
    avatarUrl: 'https://avatars0.githubusercontent.com/u/81672',
  },
  {
    id: '4',
    name: 'Tim Hingston',
    avatarUrl: 'https://avatars3.githubusercontent.com/u/1831709',
  },
];

export const Ellipsized = Template.bind({});
Ellipsized.args = {
  users: [
    ...userdata,
    ...moreuserdata
  ],
};

export const BigUserCount = Template.bind({});
BigUserCount.args = {
  users: [
    ...userdata,
    ...moreuserdata
  ],
  userCount: 100,
};

export const Empty = Template.bind({});
Empty.args = {
  users: [],
};

确认无误後把修改commit起来

$ git commit -am "Added AvatarList and stories"

为元件撰写使用说明

多亏了Storybook Docs，可以用最小的努力做出可自定义的Doc。通过参考Storybook中的Docs Tab，可以帮助其他人学习如何使用AvatarList。

增加propsType资讯给Stories

import React from 'react';
import PropTypes from 'prop-types';

import { sizes } from './Avatar';
import { AvatarList } from './AvatarList';

...

AvatarList.propTypes = {
  /**
   * Are we loading avatar data from the network?
   */
  loading: PropTypes.bool,
  /**
   * A (sub)-list of the users whose avatars we have data for. Note: only 3 will be displayed.
   */
  users: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      name: PropTypes.string,
      avatarUrl: PropTypes.string,
    })
  ),
  /**
   * The total number of users, if a subset is passed to `users`.
   */
  userCount: PropTypes.number,
  /**
   * AvatarList comes in four sizes. In most cases, you’ll be fine with `medium`.
   */
  size: PropTypes.oneOf(Object.keys(sizes)),
};

...

export const BigUserCount = Template.bind({});
BigUserCount.args = {
  loading: false,
  users: [
    ...userdata,
    ...moreuserdata
  ],
  userCount: 100,
  size: 'small'
};

如果想要做更详细的说明文件，还可以使用MDX格式

现在，提交更改并推送到GitHub

$ git commit -am "Improved AvatarList docs"

建立 Pull Request

让我们将AvatarList分支推送到GitHub

$ git push -u origin create-avatar-list-component

然後到GitHub，建立 Pull Request

Review

让我们把 Storybook 推送到 Chromatic，让团队可以透过 Chromatic 做 UI Review

$ npx chromatic --project-token=kfv8nxjk2c8

Code Reviewer 现在可以在 PR 上找到指向已部署的Storybook的连接。

Online Storybook是开发团队的通用参考点。向专案中涉及的利益相关者分享指向AvatarList的Storybook连结，以更快地获得反馈。开发团队在Review过程，都不必下载程序码及建立开发环境。

Testing

AvatarList是一个简单的表现性元件，因此不需要单元测试。但是，如果我们看一下PR检查，我们的视觉测试工具Chromatic已经检测到需要检查的更改。

我们可以在 Chromatic 轻松的检视及审查变更，最後快速的连结到GitHub去完成 Merge Pull Request

Distribute

建立了 Pull Request，将AvatarList添加到Design System。Storybook 和 Docs 已编写，测试也通过。最後，使用Auto和npm更新 Design System Package。

所以在专案中，透过更新 Design System Package，取得最新版的AvatarList UI 元件，在专案中使用。

学习资源

30天的玩转Storybook文章分享，就在此告一段落。

目前所有的文章，都几乎是整理Storybook官网教学的范例，直接看官网的教学，可以得到更快更新的Storybook资讯。

Storybook 官网

官网：https://storybook.js.org/

会有各个框架完整的 Storybook 开发文件

LearnstoryBook

在官网提供的教学网站，会有三个使用指南

Intro to Storybook 简介Storybook

可以完整的学习如何建立Storybook，前端三大框架的程序码都有
网站：https://www.learnstorybook.com/intro-to-storybook/

Design Systems for Developers 开发者的Design System

探索如何使用 Storybook 构建和维护 Design System，目前只有React的程序码
网站：https://www.learnstorybook.com/design-systems-for-developers/

Visual Testing Handbook

Visual Testing 的手册，建置中
网站：https://www.learnstorybook.com/visual-testing-handbook/

chromatic

Chromatic 是 Storybook 视觉审查的好工具，它还可以做为放置Storybook的空间，也可以整合Gitlab/GitHub/BitBucket等各家 Remote Git Repository，直接在 Chromatic 连动及开启PR。开发者是可以完全专心在开发上，而不会被各种打断。

网站：https://www.chromatic.com/docs/