Naming components

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

// src/stories/Button.stories.js

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

完整程式碼：Vue、Angular

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" />

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

完整程式碼：Vue、Angular

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物件可以設定用以下的方式設定排序

如果是使用 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：Vue、Angular