Next + TypeScript + Storybook + Storyshotsを動かすまで
nus3example使ってcreate-next-appしようかと思ったけど最新コミットが3ヶ月前か
nus3作業手順
nus3nextでプロジェクト作成しsrcディレクトリに移す
npx create-next-app {project name}mkdir src && mv pages src && mv styles src
nus3typescript対応
yarn add --dev typescript @types/react @types/react-dom @types/node- jsをtsxに拡張子変更(tsxの書き方に変える)
-
yarn buildでtsconfigが生成される
import styles from "styles/Home.module.css";がエラーを吐いてるが次の作業すると消える
nus3eslint入れる
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.prettierrcjest.config.js - testディレクトリとtestファイルの追加
- package.jsonの編集
yarn husky install-
.husky配下に実行したい設定を記載する(pre-commitやpre-pushなど) - eslint-config-prettierの指定方法が変わったので修正する
"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"
]
},
tsconfigでbaseUrlを追加する
jest.configでtsconfigのbaseUrlに対応するためmoduleDirectoriesプロパティを追加する
HACK: 下記のようなimport文の時にstyles/以下で補完が効かない
import styles from 'styles/Home.module.css'
nus3storybook入れる
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のコマンド追加
参考にした記事
nus3storyshots入れる
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 --devyarn 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の設定
nus3yarnのバージョン指定
yarn policies set-version
package.jsonにenginesの追加
"engines": {
"npm": "npmではなくyarnを使ってください。yarn.lockを大事にしてください",
"yarn": "1.22.10"
}
tailwindcssを入れる
yarn add -D tailwindcss postcss autoprefixer postcss-nestedyarn tailwindcss init -p
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
'postcss-nested': {},
},
}
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: [],
}
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作業リポジトリ