Merge pull request #13 from h-yoshikawa44/feature/12-lib_update

yarnからnpmへ移行、各種アプデ対応

.githooks/prepare-commit-msg

@@ -0,0 +1,30 @@
+#!/bin/sh
+
+# sed コマンドが GNU か BSD か確認
+GNU_SED=true
+sed --version 1>/dev/null 2>/dev/null || GNU_SED=false
+
+# コミットメッセージ入力前に、ブランチ名から Issue 番号を抽出して置換する
+COMMIT_MSG_FILE=$1
+MESSAGE=$(cat "$COMMIT_MSG_FILE")
+
+ISSUE_NUMBER=$(git rev-parse --abbrev-ref HEAD | grep -Eo "^(feature|bugfix|release)/[0-9]+" | grep -Eo "[0-9]+")
+if [ -n "$ISSUE_NUMBER" ]; then
+  if [ "$GNU_SED" == "true" ]; then
+    sed -i "s/(#Issue)/(#$ISSUE_NUMBER)/" $COMMIT_MSG_FILE
+  else
+    sed -i "" "s/(#Issue)/(#$ISSUE_NUMBER)/" $COMMIT_MSG_FILE
+  fi
+  exit 0
+fi
+
+read -p "Issue 番号がブランチ名にないので置換できませんが、続行しますか？ (y/N): " YM < /dev/tty
+case "$YM" in
+  [yY]*)
+    if [ "$GNU_SED" == "true" ]; then
+      sed -i "s/(#Issue)//" $COMMIT_MSG_FILE
+    else
+      sed -i "" "s/(#Issue)//" $COMMIT_MSG_FILE
+    fi;;
+  *) echo "abort." ; exit 1 ;;
+esac

.github/ISSUE_TEMPLATE/bug.md

@@ -1,13 +1,11 @@
 ---
 name: バグチケット
-about: バグ・障害
+about: バグ・障害に関することはこちら
 title: "[XX]タイトル"
 ---
 
 ## 期待する動作
 
 
 ## 不具合内容
-
-
-## 再現方法
+<!-- スクショや再現方法など -->

.github/ISSUE_TEMPLATE/feature.md

@@ -1,7 +1,9 @@
 ---
 name: 機能開発チケット
-about: 新規・改善
-title: "[XX]タイトル"
+about: 機能開発に関するものはこちら
+title: "[新規・改善]タイトル"
 ---
 
-## 作業内容
+## 概要
+
+## 完了条件

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
 ## Issue 番号
-※マージとともクローズの場合は closes をつける
+<!-- ※マージとともクローズの場合は closes をつける -->
 
 ## 対応内容

.github/workflows/develop.yml

@@ -4,21 +4,35 @@ on: push
 jobs:
   front-end-check:
     name: Front End Check
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     timeout-minutes: 5
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.18.2
-          cache: yarn
+          node-version-file: '.node-version'
+          cache: npm
+          cache-dependency-path: './package-lock.json'
 
-      - name: Install Dependencies
-        run: yarn install
+      - name: Clean Install Dependencies
+        run: npm ci
 
       - name: ESlint & StyleLint & Prettier
-        run: yarn lint-check
+        run: npm run lint-check
+
+       run: npm run lint-check
+
+      - name: Slack Notification by NonSuccess
+        uses: 8398a7/action-slack@v3
+        if: success() != true
+        with:
+          status: ${{ job.status }}
+          fields: repo,message,commit,author,action,eventName,ref,workflow
+          author_name: 'check'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}

.gitmessage

@@ -1,4 +1,4 @@
-: (#)
+: (#Issue)
 
 # ==== Type ====
 # feat: 機能追加
@@ -26,4 +26,4 @@
 # 7. Use the body to explain what and why vs. how
 #  （内容で、何が変わったか、なぜそうしたのか、どうやったのかを説明する）
 #
-# How to Write a Git Commit Message https://chris.beams.io/posts/git-commit/
+# How to Write a Git Commit Message https://chris.beams.io/posts/git-commit/

.node-version

@@ -1 +1 @@
-14.18.2
+20.8.0

.stylelintrc.js

@@ -2,14 +2,17 @@ module.exports = {
   extends: [
     'stylelint-config-standard',
     'stylelint-config-recess-order',
-    'stylelint-config-prettier',
   ],
   plugins: ['stylelint-order'],
   overrides: [
     {
       files: ['**/*.{ts,tsx}'],
-      customSyntax: '@stylelint/postcss-css-in-js',
+      customSyntax: 'postcss-styled-syntax',
     },
   ],
   ignoreFiles: ['**/node_modules/**'],
+  rules: {
+    // 素の CSS 向けのルールで、それ以外では独自構文と相性が悪く非推奨なのでオフにする
+    'media-query-no-invalid': null
+  }
 };

.vscode/settings.json

@@ -26,6 +26,5 @@
   "[typescriptreact]": {
     "editor.formatOnSave": true
   },
-  "eslint.packageManager": "yarn",
   "stylelint.validate": ["css", "typescript", "typescriptreact"]
 }

README.md

@@ -67,17 +67,17 @@ The menu that opens from "Search for places" allows you to search for a location
 <!-- This section should list any major frameworks that you built your project using. Here are a few examples.-->
 
 Base
-- [Node.js](https://nodejs.org/)：14.18.2
-- [TypeScript](https://www.typescriptlang.org/)：4.5.4
-- [React](https://reactjs.org/)：17.0.2
-- [Next.js](https://nextjs.org/)：12.0.7
+- [Node.js](https://nodejs.org/)：20.8.0
+- [TypeScript](https://www.typescriptlang.org/)：5.2.2
+- [React](https://reactjs.org/)：18.2.0
+- [Next.js](https://nextjs.org/)：13.5.6
 
 Other major libraries
 - [emotion](https://emotion.sh/)
 - [@emotion-icons](https://github.com/emotion-icons/emotion-icons)
 - [ky-universal](https://github.com/sindresorhus/ky-universal)
-- [csx](https://github.com/typestyle/csx)
-- [focus-visible](https://github.com/WICG/focus-visible)
+- [polished](https://polished.js.org/)
+- [postcss-preset-env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env)
 - [wicg-inert](https://github.com/WICG/inert)
 
 API
@@ -106,19 +106,19 @@ This application/site was created as a submission to a [DevChallenges](https://l
 
 <!-- Example: -->
 
-To clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [yarn](https://yarnpkg.com/)) installed on your computer. From your command line:
+To clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](https://www.npmjs.com/)) installed on your computer. From your command line:
 
 ```bash
 # Clone this repository
-$ git clone https://github.com/h-yoshikawa44/ch-weather-app.git
+git clone https://github.com/h-yoshikawa44/ch-weather-app.git
 or
-$ git clone git@github.com:h-yoshikawa44/ch-weather-app.git
+git clone git@github.com:h-yoshikawa44/ch-weather-app.git
 
 # Install dependencies
-$ yarn install
+npm install
 
 # Run the app
-$ yarn start
+npm run start
 ```
 
 ## learned/improved

next.config.js

@@ -1,3 +1,9 @@
-module.exports = {
+/** @type {import('next').NextConfig} */
+const nextConfig = {
   reactStrictMode: true,
-}
+  compiler: {
+    emotion: true,
+  },
+};
+
+module.exports = nextConfig;