Merge pull request #14 from h-yoshikawa44/refactor/13-2022_02

2022/02時点でのリファクタリング、今のやり方の反映

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}

.github/workflows/develop.yml

@@ -1,13 +1,10 @@
 name: Develop Check
-on: [push, pull_request]
-
-env:
-  project-name: windbnb
+on: push
 
 jobs:
   front-end-check:
     name: Front End Check
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     timeout-minutes: 5
 
     steps:
@@ -17,19 +14,8 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 14.16.0
-
-      - name: Get Yarn Cache Directory Path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - name: Cache Node Modules
-        uses: actions/cache@v2
-        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-${{ env.project-name }}-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
-          restore-keys: |
-            ${{ runner.os }}-${{ env.project-name }}-
+          node-version: 14.19.0
+          cache: yarn
 
       - name: Install Dependencies
         run: yarn install

.node-version

@@ -1 +1 @@
-14.16.0
+14.19.0

.stylelintrc.js

@@ -5,6 +5,12 @@ module.exports = {
     'stylelint-config-prettier',
   ],
   plugins: ['stylelint-order'],
+  overrides: [
+    {
+      files: ['**/*.{ts,tsx}'],
+      customSyntax: '@stylelint/postcss-css-in-js',
+    },
+  ],
   ignoreFiles: ['**/node_modules/**'],
   rules: {
     'string-quotes': 'single',

.vscode/extensions.json

@@ -6,10 +6,11 @@
   "recommendations": [
     "editorconfig.editorconfig",
     "naumovs.color-highlight",
-    "esbenp.prettier-vscode",
+    "formulahendry.auto-rename-tag",
     "dbaeumer.vscode-eslint",
-    "jpoissonnier.vscode-styled-components",
+    "esbenp.prettier-vscode",
     "stylelint.vscode-stylelint",
+    "styled-components.vscode-styled-components"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []

.vscode/settings.json

@@ -9,7 +9,7 @@
   "editor.formatOnSave": false,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[graphql]": {
-      "editor.formatOnSave": true
+    "editor.formatOnSave": true
   },
   "[javascript]": {
     "editor.formatOnSave": true
@@ -21,11 +21,11 @@
     "editor.formatOnSave": true
   },
   "[typescript]": {
-      "editor.formatOnSave": true
+    "editor.formatOnSave": true
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true
   },
   "eslint.packageManager": "yarn",
-  "stylelint.syntax": "css-in-js"
+  "stylelint.validate": ["css", "typescript", "typescriptreact"]
 }

README.md

@@ -48,11 +48,11 @@
 ![overview - desktop-drawer](/screenshots/desktop-drawer.png)
 
 ### Mobile
-<img src="/screenshots/mobile.png" alt="overview - mobile" width="35%">
+<img src="./screenshots/mobile.png" alt="overview - mobile" width="35%">
 
 ---
 
-<img src="/screenshots/mobile-drawer.png" alt="overview - mobile-drawer" width="35%">
+<img src="./screenshots/mobile-drawer.png" alt="overview - mobile-drawer" width="35%">
 
 A page with a simple search function has been created.
 
@@ -63,17 +63,17 @@ Even though it was only one screen and a drawer menu, there were surprisingly ma
 <!-- 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.16.0
-- [TypeScript](https://www.typescriptlang.org/)：4.3.2
+- [Node.js](https://nodejs.org/)：14.19.0
+- [TypeScript](https://www.typescriptlang.org/)：4.5.5
 - [React](https://reactjs.org/)：17.0.2
-- [Next.js](https://nextjs.org/)：10.2.3
+- [Next.js](https://nextjs.org/)：12.1.0
 
 Other major libraries
 - [emotion](https://emotion.sh/)
 - [emotion-icons](https://emotion-icons.dev/)
 - [csx](https://typestyle.github.io/#/colors)
-- [ky](https://github.com/sindresorhus/ky)
-- [React Query](https://react-query.tanstack.com/)
+- ~~[ky](https://github.com/sindresorhus/ky)~~
+- ~~[React Query](https://react-query.tanstack.com/)~~
 - [focus-visible](https://github.com/WICG/focus-visible)
 - [wicg-inert](https://github.com/WICG/inert)
 

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,10 +1,6 @@
-const withTM = require('next-transpile-modules')(['ky']);
-
-module.exports = withTM({
-  experimental: {
-    eslint: true,
-  },
+module.exports = {
+  reactStrictMode: true,
   images: {
     domains: ['images.unsplash.com'],
   },
-});
+};

package.json

@@ -7,49 +7,69 @@
     "build": "next build",
     "start": "next start",
     "lint-check": "yarn lint:eslint && yarn lint:stylelint && yarn check:prettier",
-    "lint:eslint": "yarn run -s eslint './src/**/*.{js,jsx,ts,tsx}'",
-    "lint:stylelint": "yarn run -s stylelint --syntax 'css-in-js' './src/**/*.{js,jsx,ts,tsx}'",
-    "check:prettier": "yarn run -s prettier --check './src/**/*.{js,jsx,ts,tsx,html,gql,graphql,json}'",
+    "lint:eslint": "next lint",
+    "lint:stylelint": "yarn run -s stylelint \"./src/**/*.{js,jsx,ts,tsx}\"",
+    "check:prettier": "yarn run -s prettier --check \"./src/**/*.{js,jsx,ts,tsx,html,gql,graphql,json}\"",
     "fix": "yarn fix:eslint && yarn fix:stylelint && yarn fix:prettier",
     "fix:eslint": "yarn lint:eslint --fix",
     "fix:stylelint": "yarn lint:stylelint --fix",
     "fix:prettier": "yarn check:prettier --write",
-    "preinstall": "typesync || :"
+    "preinstall": "typesync || echo 'skip typesync'",
+    "prepare": "simple-git-hooks || echo 'Can not set git hooks'"
   },
   "dependencies": {
     "@emotion-icons/material-rounded": "^3.14.0",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/react": "^11.8.1",
+    "@emotion/styled": "^11.8.1",
     "csx": "^10.0.2",
     "focus-visible": "^5.2.0",
-    "ky": "^0.28.5",
     "modern-css-reset": "^1.4.0",
-    "next": "10.2.3",
-    "next-transpile-modules": "^7.3.0",
+    "next": "^12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-query": "^3.17.0",
     "wicg-inert": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.5",
+    "@babel/core": "^7.17.5",
     "@emotion/babel-preset-css-prop": "^11.2.0",
-    "@types/babel__core": "^7.1.14",
-    "@types/eslint": "^7.2.13",
-    "@types/prettier": "^2.3.0",
+    "@stylelint/postcss-css-in-js": "^0.37.2",
+    "@types/babel__core": "^7.1.18",
+    "@types/eslint": "^8.4.1",
+    "@types/node": "^17.0.21",
+    "@types/prettier": "^2.4.4",
     "@types/react": "^17.0.11",
-    "@types/react-dom": "17.0.2",
-    "@types/stylelint": "^13.13.0",
-    "eslint": "^7.28.0",
-    "eslint-config-next": "^10.2.3",
-    "eslint-config-prettier": "^8.3.0",
-    "prettier": "^2.3.1",
-    "stylelint": "^13.13.1",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-recess-order": "^2.4.0",
-    "stylelint-config-standard": "^22.0.0",
-    "stylelint-order": "^4.1.0",
-    "typescript": "^4.3.2",
+    "@types/react-dom": "^17.0.11",
+    "@types/stylelint": "^14.0.0",
+    "eslint": "^8.10.0",
+    "eslint-config-next": "^12.1.0",
+    "eslint-config-prettier": "^8.4.0",
+    "lint-staged": "^12.3.4",
+    "postcss-syntax": "^0.36.2",
+    "prettier": "^2.5.1",
+    "simple-git-hooks": "^2.7.0",
+    "stylelint": "^14.5.3",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-recess-order": "^3.0.0",
+    "stylelint-config-standard": "^25.0.0",
+    "stylelint-order": "^5.0.0",
+    "typescript": "^4.5.5",
     "typesync": "^0.8.0"
+  },
+  "volta": {
+    "node": "14.19.0",
+    "yarn": "1.22.17"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "yarn run -s lint-staged"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "prettier --write --loglevel=error",
+      "eslint --fix --quiet",
+      "stylelint --fix --quiet"
+    ],
+    "./**/*.{html,gql,graphql,json}": [
+      "prettier --write --loglevel=error"
+    ]
   }
 }

src/components/SearchDrawer/Backdrop.tsx → src/components/common/BackDrop/Backdrop.tsx

@@ -18,7 +18,12 @@ const Backdrop: VFC<Props> = ({ open, onClick, ...props }) => {
 const drawerBackdrop = css`
   position: fixed;
   background-color: rgba(0, 0, 0, 0.5);
-  inset: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 `;
 
 const hiddenVisibility = css`

src/components/common/BackDrop/index.ts

@@ -0,0 +1,3 @@
+import Backdrop from './Backdrop';
+
+export default Backdrop;

src/components/SearchDrawer/ClearButton.tsx → src/components/common/ClearButton/ClearButton.tsx

@@ -1,5 +1,6 @@
 import { VFC, ComponentPropsWithRef } from 'react';
 import { css } from '@emotion/react';
+import { fonts, colors } from '@/styles/constants';
 
 type Props = ComponentPropsWithRef<'button'>;
 
@@ -16,12 +17,12 @@ const clearButton = css`
   align-items: center;
   justify-content: center;
   padding: 8px 16px;
-  font-family: Mulish, sans-serif;
+  font-family: ${fonts.mulish};
   font-size: 12px;
   font-weight: bold;
   line-height: 15px;
   cursor: pointer;
-  background-color: #fff;
+  background-color: ${colors.white};
   border: none;
   border-radius: 8px;
 
@@ -31,7 +32,7 @@ const clearButton = css`
   }
 
   &:focus:not(.focus-visible) {
-    outline: none;
+    outline-color: transparent;
   }
 `;
 

src/components/common/ClearButton/index.ts

@@ -0,0 +1,3 @@
+import ClearButton from './ClearButton';
+
+export default ClearButton;