Closed2021/01/05にクローズ16

Next + TypeScript + Storybook + Storyshotsを動かすまで

Next.js

nus3

example使ってcreate-next-appしようかと思ったけど最新コミットが3ヶ月前か

nus3

create-next-appのoption

nus3

example使わずに設定してった方が良さそう？

作業手順

nextでプロジェクト作成しsrcディレクトリに移す

npx create-next-app {project name}
mkdir src && mv pages src && mv styles src

nus3

typescript対応

yarn add --dev typescript @types/react @types/react-dom @types/node
jsをtsxに拡張子変更(tsxの書き方に変える)
yarn build でtsconfigが生成される

import styles from "styles/Home.module.css";がエラーを吐いてるが次の作業すると消える

nus3

eslint入れる
examples参考にする

yarn add --dev @testing-library/react @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-jest eslint eslint-config-prettier eslint-plugin-react husky identity-obj-proxy jest jest-watch-typeahead lint-staged prettier eslint-plugin-import eslint-plugin-simple-import-sort
with-typescript-eslint-jestと同じコンフィグを追加する .babelrc .eslintignore .eslintignore .eslintrc.json .prettierignore .prettierrc jest.config.js
testディレクトリとtestファイルの追加
package.jsonの編集
yarn husky install
.husky配下に実行したい設定を記載する(pre-commitやpre-pushなど)
eslint-config-prettierの指定方法が変わったので修正する

package.json

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc --pretty --noEmit",
    "format": "prettier --write .",
    "lint": "eslint src --ext ts --ext tsx",
    "test": "jest",
    "test-all": "yarn lint && yarn type-check && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn run type-check"
    }
  },
  "lint-staged": {
    "*.@(ts|tsx)": [
      "yarn lint",
      "yarn format"
    ]
  },

nus3

tsconfigでbaseUrlを追加する
jest.configでtsconfigのbaseUrlに対応するためmoduleDirectoriesプロパティを追加する

HACK: 下記のようなimport文の時にstyles/以下で補完が効かない
import styles from 'styles/Home.module.css'

nus3

storybook入れる

yarn add -D @storybook/react
.storybookにmain.jsとpreview.js追加
yarn add -D sass css-loader sass-loader style-loader
scssファイルを読み込むためにmain.jsにwebpackの設定追加
package.jsonにstorybookのコマンド追加

参考にした記事

nus3

storyshots入れる

yarn add -D @storybook/addon-storyshots
Storyshots.test.ts作る
jest.config.jsでcssやfileやらをmockする設定する
transformにjsも加える'^.+\\.(js|ts|tsx)$': 'babel-jest',
storyshots用のjestのconfig加える
pacakge.jsonにstoryshots用のコマンドを追加する
jest.config.jsとjest.storyshots.config.jsの設定をいじって、storyshotsと普通のテストでコマンド分ける

nus3

コンポーネント数が多くなるとstorycap + reg-suitのが良さそうらしい

yarn add storycap --dev
pacakge.jsonにscreenshotコマンド追加
yarn add reg-suit --dev
yarn add -D reg-keygen-git-hash-plugin reg-notify-github-plugin reg-publish-s3-plugin reg-notify-slack-plugin
package-lock.json削除する
slackのwebhookの用意
reg-suitのgithub appいれる
yarn reg-suit initで初期設定(clientIDやらwebhookやらs3についての設定)
ローカルで動かす場合はs3のアクセス権限を持つaws profileを設定しておく
yarn reg-suit runで実行
package.jsonにregressionコマンドの追加

TODO: circleCIの設定

nus3

yarnのバージョン指定
yarn policies set-version

package.jsonにenginesの追加

package.json

  "engines": {
    "npm": "npmではなくyarnを使ってください。yarn.lockを大事にしてください",
    "yarn": "1.22.10"
  }

nus3

tailwindcssを入れる

yarn add -D tailwindcss postcss autoprefixer postcss-nested
yarn tailwindcss init -p

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-nested': {},
  },
}

tailwind.config.js

module.exports = {
  purge: {
    content: ['./src/components/**/*.tsx', './src/pages/**/*.tsx'],
    options: {
      // https://purgecss.com/safelisting.html#patterns
      safelist: {
        standard: [/^bg-/, /^text-/],
      },
    },
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

nus3

tailwindcss込みでstorybookを入れる

yarn add -D @storybook/react @storybook/addon-links @storybook/addon-essentials
.storybook配下に必要な設定を入れる

該当の設定まわり

tailwindcss + storybookの postcss8の暫定対応

storybookのpostcssがおそらくv7を使っていてtailwindcssの2系を使うときにpostcssのv8使ってよって怒られるので
@storybook/addon-postcss + storybookのバージョンを6.2.0-alpha.23にすることでtailwindcssを使用することができる

nus3

作業リポジトリ
https://github.com/yota-hada/p-next

このスクラップは2021/01/05にクローズされました