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

概要

前回 の続き
blog-starter-typescript で作ったプロジェクトのUIをいじっていきたいが、その前に開発に必要なstorybookを導入する

作業ログ

storybook の導入

基本は Get started with Storybook and Next.js を基に設定する

storybook を導入する

npx sb init --builder webpack5

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

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

静的ファイルを解決するために public を staticDirs に追加しておく

module.exports = {  
  // ...
  "staticDirs": ["../public"],
}

tailwindcss用の設定を追加する

tailwindcssのCSSを読み込むために .storybook/preview.js に以下のCSSを追加しておく

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

module.exports = {}

storybook-addon-next をinstallする

yarn add --dev storybook-addon-next

.storybook/main.js の addons に追加する

module.exports = {  
  "addons": [  
    // ...
    "storybook-addon-next"  
  ],
// ...
}

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

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

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

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