建立好 Storybook 後除了加入組件外，還有設置文件以及樣式的需求，這個章節會跟大家說如何建立文件以及將你的storybook 調整成符合你目前設計的樣子。

建立文件

到 stories 資料夾內建立 .mdx 檔，在裡面撰寫 markdown 語法即可，最主要是要 import Meta 後，再建立 Meta 寫上路徑就可以被讀到了。

src/stories/introduction.stories.js

import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Introduction" />

# Hello Storybook

再來就是要對建立好的項目做排序，可以在 preview.js 中設置：

.storybook/preview.js

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  layout: 'centered',
  options: {
    storySort: { order: ['Introduction', 'Components', 'Example' ]}
  }
}

設定主題

我們可以在 manager.js 中設置我們的UI畫面，首先我們先建立一個 manager.js，manager.js 的編輯要 重新整理 才會生效。

.storybook/mamnger.js

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

addons.setConfig({
  theme: uiTheme,
});

再來引入主題物件，在目錄下建立一個 uiTheme.js ，可以加入我們之前設定好的 theme 。

./storybook/uiTemem.js

import { create } from '@storybook/theming/create';
import brandImage from './assets/brand-logo-text.png'
import theme from '../src/lib/theme';

export default create({
  base: 'light',

  colorPrimary: theme.colors.primary,
  colorSecondary: theme.colors.secondary,

  // UI
  appBg: theme.colors.grey0,
  appContentBg: theme.colors.white,
  appBorderColor: theme.colors.grey1,
  appBorderRadius: theme.radius,

  // Typography
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',

  // Text colors
  textColor: theme.colors.black,
  textInverseColor: 'rgba(255,255,255,0.9)',

  // Toolbar default and active colors
  barTextColor: theme.colors.grey3,
  barSelectedColor: theme.colors.grey4,
  barBg: theme.colors.white,

  // Form colors
  inputBg: theme.colors.white,
  inputBorder: theme.colors.grey0,
  inputTextColor: theme.colors.black,
  inputBorderRadius: theme.colors.radius,

  brandTitle: 'TERA UI',
  brandUrl: 'https://example.com',
  brandImage,
})

接下來我們要加入 favicon，首先我們先在 storybook，建立 manager-head.html 並加入 tags

<link rel="shortcut icon" href="./logo.png">
<link rel="icon" type="image/png" href="./logo.png" sizes="192x192">

注意 package.json 中的 script 是讀取 public (creat react app 自動建立的資料夾) 內的資源，所以這兩張圖必須放在裡面，需要重新執行 yarn stortbook 才可以看到效果。：

"storybook": "start-storybook -p 6006 -s public",

結果如下：