iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
1
Modern Web

玩轉 Storybook系列 第 10

玩轉 Storybook: Day 10 Naming components and hierarchy

Naming components

修改一下Story檔案,對應於Component的Title名稱(default export區塊),就會發現Sidebar的名稱會被修改成如圖所示。

// src/stories/Button.stories.js

export default {
  title: 'Button' // 原來是Example/Button
}

完整程式碼:VueAngular

Grouping

因此我們可以發現命名的方式,可以改變Sidebar顯示元件對應Story的層級。

當我們希望把元件歸納成某個Group,只要簡單的加上/,Storybook就會把它在Sidebar的階層整理在某個Group下

這樣的命名方式非常有用,這樣可以很好的整理出Storybook的元件歸納,開發團隊透過整理過的歸納,會更容易找出元件及元件對應的Stories,易於團隊之間的溝通。

所以來試看看,把Example下的Stories檔案再收納到Official底下,用來表示是官方提供的範例Stories。

// src/stories/Button.stories.js

export default {
  title: 'Official/Example/Button'
}
// src/stories/Header.stories.js

export default {
  title: 'Official/Example/Header'
}
// src/stories/Page.stories.js

export default {
  title: 'Official/Example/Page'
}
// src/stories/Introduction.stories.mdx

<Meta title="Official/Example/Introduction" />

這樣的收納方式是不是簡單又清楚!

完整程式碼:VueAngular

Roots

透過觀察以上的程式碼及畫面呈現,最上層的Grouping通常會被畫面顯示成roots,所以他不會被折疊。

如果不想要這樣的roots的顯示方式,還記得在組態設定的單元裡提到的manager.js嗎?只要設定showRoots:false 就可以讓每個Group都是可以收合的樣子,如下圖。(修改組態設定時,記得要重啟Storybook)

// ./storybook/manager.js

import { addons } from '@storybook/addons';

addons.setConfig({
    showRoots: false
});

Sorting stories

如果希望自訂Story的呈現順序,可以在組態設定的preview.js,使用storySort去做設定。

storySort可以使用sorting function也可以接受config object

Sorting function

// .storybook/preview.js

export const parameters = {
  options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
};

Configuration object

// .storybook/preview.js

export const parameters = {
  options: {
    storySort: {
      method: '',
      locales: '', 
      order: [], 
    },
  },
};

使用config物件可以設定用以下的方式設定排序

Field Type 說明 範例
method String 指定Story顯示順序的方式 'alphabetical'
locales String 要顯示的語系 en-US
order Array 依照給定陣列的順序做排序 ['Intro', 'Components']

如果是使用 order array 的方式做排序,沒有在清單裡的stories出會現在陣列順序排列完之後。

另外,order array 也可以設定成巢狀陣列,用以排序下一層的Stories。

// .storybook/preview.js

export const parameters = {
  options: {
    storySort: {
      order: ['Intro', 'Pages', ['Home', 'Login', 'Admin'], 'Components'],
    },
  },
};

Next

如何撰寫Storybook都已經介紹的差不多了,接下來讓我們用幾個單元,來試看看撰寫更接近現實的Stories。

Reference

Naming components and hierarchy:VueAngular


上一篇
玩轉 Storybook: Day 09 Decorators
下一篇
玩轉 Storybook: Day 11 Simple component - Vue
系列文
玩轉 Storybook30

尚未有邦友留言

立即登入留言