玩轉 Storybook: Day 30 總結 & 學習資源

第 12 屆 iThome 鐵人賽

DAY 30

Modern Web

玩轉 Storybook系列第 30 篇

12th鐵人賽 storybook design system

lala_lee_jobs

2020-10-15 09:06:55

3100 瀏覽

分享至

根據研究指出，重用程式碼可以節省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/