Upgrade to react-scripts 5

.eslintrc.js

@@ -23,6 +23,7 @@ module.exports = {
  },
  extends: [
  "react-app",
+ "react-app/jest",
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended",
  "plugin:jest/recommended",

.stylelintrc.js

@@ -44,5 +44,6 @@ module.exports = {
  "selector-no-qualifying-type": true,
  "string-quotes": "double",
  "value-list-comma-newline-after": null,
+ "scss/comment-no-empty": null,
  },
 };

Dockerfile

@@ -1,9 +1,9 @@
 FROM node:16.13.2-alpine
 WORKDIR /app-prototype
 COPY package.json yarn.lock ./
-RUN npx yarn@1.12.1 install --production
+RUN npx yarn@1.22.17 install
 COPY . .
-RUN DISABLE_ESLINT_PLUGIN=true npm run build
+RUN npm run build
 EXPOSE 3000
 ENV NODE_ENV=production
 CMD npx --no-install serve -s

package.json

@@ -3,24 +3,16 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
- "@types/node": "^16.11.21",
- "@types/react": "^17.0.38",
- "@types/react-dom": "^17.0.11",
- "classnames": "^2.3.1",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-scripts": "4.0.3",
- "sass": "^1.45.1",
- "serve": "^13.0.2",
- "typescript": "^4.5.4"
- },
- "devDependencies": {
  "@testing-library/dom": "^8.11.1",
  "@testing-library/jest-dom": "^5.16.1",
  "@testing-library/react": "^12.1.2",
  "@testing-library/user-event": "^13.5.0",
  "@types/jest": "^27.4.0",
- "eslint": "^7.32.0",
+ "@types/node": "^16.11.21",
+ "@types/react": "^17.0.38",
+ "@types/react-dom": "^17.0.11",
+ "classnames": "^2.3.1",
+ "eslint": "^8.6.0",
  "eslint-config-prettier": "^8.1.0",
  "eslint-plugin-jest": "^25.3.4",
  "eslint-plugin-prettier": "^4.0.0",
@@ -30,16 +22,23 @@
  "lint-staged": "^12.1.4",
  "npm-run-all": "^4.1.3",
  "prettier": "2.5.1",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "react-scripts": "5.0.0",
+ "sass": "^1.48.0",
+ "serve": "^13.0.2",
  "shelljs": "^0.8.5",
- "stylelint": "^13.12.0",
- "stylelint-config-recommended-scss": "^4.3.0",
- "stylelint-config-standard": "^22.0.0",
+ "stylelint": "^14.2.0",
+ "stylelint-config-recommended-scss": "^5.0.2",
+ "stylelint-config-standard": "^24.0.0",
  "stylelint-declaration-strict-value": "^1.8.0",
- "stylelint-scss": "^3.21.0"
+ "stylelint-scss": "^4.1.0",
+ "typescript": "^4.5.4",
+ "web-vitals": "^2.1.3"
  },
  "resolutions": {
- "@typescript-eslint/typescript-estree": "^5.6.0",
- "caniuse-lite": "^1.0.30001272"
+ "caniuse-lite": "^1.0.30001299",
+ "mini-css-extract-plugin": "2.4.7"
  },
  "scripts": {
  "prepare": "husky install",
@@ -71,7 +70,6 @@
  "production": [
  ">0.2%",
  "not dead",
- "not ie <= 11",
  "not op_mini all"
  ],
  "development": [

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.module.scss

@@ -10,7 +10,7 @@
  pointer-events: none;
 
  @media (prefers-reduced-motion: no-preference) {
- animation: App-logo-spin infinite 20s linear;
+ animation: app-logo-spin infinite 20s linear;
  }
 }
 
@@ -34,7 +34,7 @@
  color: colors.$blue;
 }
 
-@keyframes App-logo-spin {
+@keyframes app-logo-spin {
  from {
  transform: rotate(0deg);
  }

src/index.tsx

@@ -2,10 +2,16 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.scss";
 import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
 ReactDOM.render(
  <React.StrictMode>
  <App />
  </React.StrictMode>,
  document.getElementById("root")
 );
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from "web-vitals";
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+ if (onPerfEntry && onPerfEntry instanceof Function) {
+ import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+ getCLS(onPerfEntry);
+ getFID(onPerfEntry);
+ getFCP(onPerfEntry);
+ getLCP(onPerfEntry);
+ getTTFB(onPerfEntry);
+ });
+ }
+};
+
+export default reportWebVitals;

src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";

src/theme/colors.scss

@@ -1,6 +1,7 @@
+@use "sass:color";
 $blue: #61dafb;
-$blue-darker: darken($blue, 30%);
-$blue-lighter: lighten($blue, 5%);
+$blue-darker: color.adjust($blue, $lightness: -30%);
+$blue-lighter: color.adjust($blue, $lightness: 5%);
 
 $white: #fff;
 $gray-28: #282c34;