
## 概要

[前回](/posts/2022-03-21-1) の続き  
blog-starter-typescript で作ったプロジェクトのUIをいじっていきたいが、その前に開発に必要なstorybookを導入する

## 作業ログ

### storybook の導入

基本は [Get started with Storybook and Next.js](https://storybook.js.org/blog/get-started-with-storybook-and-next-js/) を基に設定する

### storybook を導入する
```bash
npx sb init --builder webpack5
```

`.storybook/main.js` に `reactDocgen: false` を追加しておく
追加しないと`Cannot find module 'webpack/lib/util/makeSerializable.js`のエラーが発生する

```javascript
module.exports = {  
  "typescript" : { reactDocgen: false },  
// ...
}
```

静的ファイルを解決するために public を staticDirs に追加しておく
```js
module.exports = {  
  // ...
  "staticDirs": ["../public"],
}
```

### tailwindcss用の設定を追加する

tailwindcssのCSSを読み込むために `.storybook/preview.js` に以下のCSSを追加しておく
```js
import 'src/styles/index.css'
```

storybookコマンドは以下のように修正しておくとCSSが即時反映されて便利
```
  "storybook": "TAILWIND_MODE=watch start-storybook -p 6006",
```


### storybook-addon-next を導入する

`next.config.js` を空で作っておく
```
touch next.config.js
```
中身はこれでOK
```js
module.exports = {}
```

storybook-addon-next をinstallする

```bash
yarn add --dev storybook-addon-next
```

`.storybook/main.js`  の addons に追加する
```js
module.exports = {  
  "addons": [  
    // ...
    "storybook-addon-next"  
  ],
// ...
}
```

ここまできたら `yarn storybook` でstorybookが起動できる

### github-actions で storybook を自動でアップロードする

`.github/workflows/storybook.yml` ファイルを作り以下の内容を書く

```yaml
name: github pages  
  
on:  
  push:  
    branches:  
      - main  
  
jobs:  
  build-deploy:  
    runs-on: ubuntu-latest  
    steps:  
      - name: checkout  
        uses: actions/checkout@v2  
      - name: install deps  
        run: yarn  
      - name: run build storybook  
        run: yarn build-storybook -o ./dist/storybook  
      - name: Deploy  
        uses: peaceiris/actions-gh-pages@v3  
        with:  
          personal_token: ${{ secrets.ACTIONS_DEPLOY_KEY }}  
          publish_dir: ./dist
```

`ACTIONS_DEPLOY_KEY` はリポジトリの `settings/secrets/actions` に Repository secrets として登録しておく、中身は repo 系全てに権限をつけた Personal access token 

storybook

blog-starter-typescript で作ったプロジェクトにstorybookを導入する