feat: upgrade to react 17

phatnguyenuit · phatnguyenuit · commit caa7d1da82e5 · 2020-12-09T15:08:47.000+07:00
diff --git a/.editorconfig b/.editorconfig
@@ -4,10 +4,10 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js, jsx, ts, tsx}]
+[*.{ts, tsx}]
 charset = utf-8
 indent_style = space
 indent_size = 2
 
 [Makefile]
-indent_style = tab
+indent_style = tab
diff --git a/.eslintrc b/.eslintrc
@@ -1,60 +1,14 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "env": {
-    "node": true,
-    "browser": true,
-    "es6": true,
-    "jest": true
-  },
   "plugins": [
-    "@typescript-eslint",
-    "react",
-    "import",
-    "prettier",
-    "react-hooks",
-    "redux-saga"
+    "prettier"
   ],
   "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react/recommended",
-    "plugin:redux-saga/recommended",
+    "react-app", 
+    "react-app/jest", 
     "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],
-  "globals": {
-    "document": true,
-    "window": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
   "rules": {
-    "arrow-body-style": "warn",
-    "no-plusplus": ["warn", {
-      "allowForLoopAfterthoughts": true
-    }],
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-unused-vars": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "react-hooks/rules-of-hooks": "error",
-    "import/no-unresolved": "off",
-    "import/prefer-default-export": "off",
-    "react/jsx-filename-extension": [
-      "off", // TODO: Why using js instead of jsx???
-      {
-        "extensions": [".jsx", ".tsx"]
-      }
-    ],
-    "no-console": "error"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
+    "react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }]
   }
 }
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,7 +1,4 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
-name: CI/CD
+name: CI
 
 on:
   push:
@@ -10,17 +7,20 @@ on:
     branches: [ master ]
 
 jobs:
-  deployment:
-    name: Run test coverage, upload to Codecov and deploy to GitHub Pages
-    runs-on: ubuntu-latest
+  deploy:
+    name: Release and deploy to GitHub Pages
+    runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [10.x, 12.x]
+        os: [macos-latest, windows-latest, ubuntu-latest]
     steps:
       - name: Check repository
         uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
 
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Setup NodeJS ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
@@ -33,7 +33,7 @@ jobs:
           key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}
 
       - name: Install dependencies
-        run: yarn
+        run: yarn install --no-progress --non-interactive
 
       - name: Run test coverage
         run: yarn test --coverage
@@ -43,16 +43,15 @@ jobs:
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
 
-      - name: Deploy to GitHub Pages
+      - name: Release & deploy to GitHub Pages
         run: |
-          git config --global user.name $user_name
-          git config --global user.email $user_email
-          git remote set-url origin https://${github_token}@github.com/${repository}
+          git config --global user.name $USER_NAME
+          git config --global user.email $USER_EMAIL
+          git remote set-url origin https://${GITHUB_TOKEN}@github.com/${REPOSITORY}
+          yarn release
           yarn deploy -m "${{ github.event.head_commit.message }}"
         env:
-          user_name: 'github-actions[bot]'
-          user_email: 'github-actions[bot]@users.noreply.github.com'
-          github_token: ${{ secrets.DEPLOY_ACCESS_TOKEN }}
-          repository: ${{ github.repository }}
-
-# Reference: https://github.community/t/run-next-job-sequentially-even-if-a-previous-job-fails/17404/2
+          USER_NAME: 'github-actions[bot]'
+          USER_EMAIL: 'github-actions[bot]@users.noreply.github.com'
+          GITHUB_TOKEN: ${{ github.token }}
+          REPOSITORY: ${{ github.repository }}
diff --git a/.prettierrc b/.prettierrc
@@ -1,7 +1,10 @@
 {
+  "arrowParens": "always",
+  "endOfLine": "lf",
   "jsxBracketSameLine": false,
   "printWidth": 80,
+  "semi": true,
   "singleQuote": true,
-  "trailingComma": "all",
-  "tabWidth": 2
+  "tabWidth": 2,
+  "trailingComma": "all"
 }
diff --git a/.release-it.json b/.release-it.json
@@ -0,0 +1,17 @@
+{
+  "git": {
+    "commitMessage": "chore(release): release ${version}"
+  },
+  "github": {
+    "release": true
+  },
+  "npm": {
+    "publish": false
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular",
+      "infile": "CHANGELOG.md"
+    }
+  }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -10,4 +10,5 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
+  "typescript.tsdk": "node_modules/typescript/lib",
 }
diff --git a/.vscode/typescriptreact.code-snippets b/.vscode/typescriptreact.code-snippets
@@ -0,0 +1,30 @@
+{
+	// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and 
+	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
+	// same ids are connected.
+	// Example:
+	// "Print to console": {
+	// 	"prefix": "log",
+	// 	"body": [
+	// 		"console.log('$1');",
+	// 		"$2"
+	// 	],
+	// 	"description": "Log output to console"
+	// }
+	"Create React Functional Component": {
+		"prefix": "crfc",
+		"body": [
+			"import React, { memo } from 'react';",
+			"",
+			"export const ${1:ComponentName}Component: React.FC = () => <div>Empty</div>;",
+			"",
+			"const $1 = memo(${1:ComponentName}Component);",
+			"$1.displayName = '$1';",
+			"",
+			"export default $1;",
+			""
+		],
+		"description": "Create React Functional Component"
+	}
+}
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # create-react-app-typescript-template
 
-![CI/CD](https://github.com/phatnguyenuit/create-react-app-typescript-template/workflows/CI/CD/badge.svg)
+![CI/CD](https://github.com/phatnguyenuit/create-react-app-typescript-template/workflows/CI/badge.svg)
 [![codecov](https://codecov.io/gh/phatnguyenuit/create-react-app-typescript-template/branch/master/graph/badge.svg?token=4C32ACLQWS)](https://codecov.io/gh/phatnguyenuit/create-react-app-typescript-template)
 ![License](https://img.shields.io/github/license/phatnguyenuit/create-react-app-typescript-template)
 
@@ -9,12 +9,16 @@ Create React App TypeScript template
 
 ## Features
 
-- Automate workflow to deploy with GitHub Actions
-- Code coverage with [Codecov](https://codecov.io)
-- Strong static typings with TypeScript
-- ESLint
-- Prettier
-- pre-commit hook with Husky
+- Inherit from package [`cra-template-typescript`](https://www.npmjs.com/package/cra-template-typescript)
+- Configure `eslint` with `prettier`
+- Configure [`husky`](https://typicode.github.io/husky/#/)
+- Configure [`lint-staged`](https://github.com/okonet/lint-staged#readme)
+- Configure [`prettier`](https://prettier.io/)
+- Configure [`commitlint`](https://commitlint.js.org/)
+- Configure [`release-it`](https://github.com/release-it/release-it)
+- Add default `jest` test coverage options
+- Configure sample GitHub actions including test, release and deploy
+- Provide sample vscode snippets
 
 # Configure
 
@@ -32,23 +36,23 @@ In the project directory, you can run:
 
 ### `yarn start`
 
-Runs the app in the development mode.<br />
+Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-The page will reload if you make edits.<br />
+The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
 ### `yarn test`
 
-Launches the test runner in the interactive watch mode.<br />
+Launches the test runner in the interactive watch mode.\
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
 ### `yarn build`
 
-Builds the app for production to the `build` folder.<br />
+Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.<br />
+The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
@@ -63,12 +67,20 @@ Instead, it will copy all the configuration files and the transitive dependencie
 
 You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
 
-## Learn More
+### `yarn commit`
+
+Commit with conventional commit powered by `@commitlint/cli` CLI
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+### `yarn release`
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Release version for your project powered by `release-it` CLI
 
-## Setup CI/CD
+## Learn More
 
-Refer this article: [Setting up a CI/CD workflow on GitHub Actions for a React App (with GitHub Pages and Codecov)](https://dev.to/dyarleniber/setting-up-a-ci-cd-workflow-on-github-actions-for-a-react-app-with-github-pages-and-codecov-4hnp)
+- You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+- Learn React, check out the [React documentation](https://reactjs.org/).
+- Learn [GitHub Actions](https://docs.github.com/en/free-pro-team@latest/actions/learn-github-actions)
+- Learn [ESLint](https://eslint.org/docs/user-guide/getting-started)
+- Learn [Commitlint](https://commitlint.js.org/#/)
+- Learn [Release-it](https://github.com/release-it/release-it)
+- [Setting up a CI/CD workflow on GitHub Actions for a React App (with GitHub Pages and Codecov)](https://dev.to/dyarleniber/setting-up-a-ci-cd-workflow-on-github-actions-for-a-react-app-with-github-pages-and-codecov-4hnp)
diff --git a/commitlint.config.js b/commitlint.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};
diff --git a/package.json b/package.json
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,10 @@`
`1`	`1`	`{`
	`2`	`+ "arrowParens": "always",`
	`3`	`+ "endOfLine": "lf",`
`2`	`4`	`"jsxBracketSameLine": false,`
`3`	`5`	`"printWidth": 80,`
	`6`	`+ "semi": true,`
`4`	`7`	`"singleQuote": true,`
`5`		`- "trailingComma": "all",`
`6`		`- "tabWidth": 2`
	`8`	`+ "tabWidth": 2,`
	`9`	`+ "trailingComma": "all"`
`7`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,5 @@`
`10`	`10`	`"editor.codeActionsOnSave": {`
`11`	`11`	`"source.fixAll.eslint": true`
`12`	`12`	`},`
	`13`	`+ "typescript.tsdk": "node_modules/typescript/lib",`
`13`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ extends: ['@commitlint/config-conventional'],`
	`3`	`+};`