iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 30
1
Modern Web

玩轉 Storybook系列 第 30

玩轉 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/

Community

Twitter

訂閱Storybook的Twitter,可以第一手取得Storybook的發展歷程以及第三方套件的協同合作

https://twitter.com/storybookjs

Medium

一些發佈資訊及有用的文章,都會透過 Medium 發佈 Blog

https://medium.com/storybookjs

GitHub

想看到 Storybook 的原始碼,以及目前的開發進展,都可以到GitHub。

https://github.com/storybookjs/storybook/

另外,他也提供了 Discussion 區域,新手也可以在此輕鬆的提問,得到詳細的解答。以下附上一個我曾經提問過的連結。

https://github.com/storybookjs/storybook/discussions/12519

Discord

如果覺得 GitHub 的 Discussion 不夠快速的回應你的提供,也可以加入官方在Discord的訊息對話平台。

https://discord.com/invite/UUt2PJb


上一篇
玩轉 Storybook: Day 29 Design System for Developers - Distribute
系列文
玩轉 Storybook30

1 則留言

0
SunAllen
iT邦高手 1 級 ‧ 2020-10-15 22:21:27

恭喜完賽!

謝謝你昨天的幫忙^^///

我要留言

立即登入留言