master changes

2021-07-14 11:16:00 +01:00 · 2021-07-14 11:16:00 +01:00 · 2b0276b45e
commit 2b0276b45e
parent c7fc0a8002 7e130e5e98
19 changed files with 414 additions and 50 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -6,7 +6,8 @@
  "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
-      "plugin:@typescript-eslint/eslint-recommended"
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:prettier/recommended"
  ],
  "globals": {
      "Atomics": "readonly",
--- a/.github/workflows/node.js.yml
+++ b/.github/workflows/node.js.yml
@ -27,9 +27,8 @@ jobs:
        check-latest: true

    - run: npm ci
-    - run: npm run format-check
+    - run: npm run lint
+    - run: npm run test
    - run: npm run check-types
    - run: npm run build
-    - run: npm run build-storybook
-    - run: npm run lint
-    - run: npm run test
+    - run: npm run build-storybook
--- a/.husky/.gitignore
+++ b/.husky/.gitignore
@ -0,0 +1 @@
+_
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+npm test
--- a/CODING_GUIDELINES.md
+++ b/CODING_GUIDELINES.md
@ -1,5 +1,15 @@
 # Coding Guidelines

+## Package managers
+
+The default package manager for the Keycloak UI projects is NPM. There are several reasons why NPM is used over other package managers (such as Yarn and PNPM):
+
+- It comes included with NodeJS by default, meaning it does not have to be installed manually.
+- Most contributors are familiar with the NPM ecosystem and tooling.
+- We do not use any of the 'advanced' features of other package managers (such as [Yarn's PNP](https://yarnpkg.com/features/pnp)).
+
+If you submit a pull request that changes the dependencies, make sure that you also update the `package-lock.json` as well.
+
 ## Typescript


--- a/README.md
+++ b/README.md
@ -42,9 +42,8 @@ If your Keycloak instance is not on `localhost:8180`, create a file `.env` with
 ### Additionally there are some nice scripts to format and lint

 ```bash
-$> npm run format
-$> npm run check-types
 $> npm run lint
+$> npm run check-types
 ```

 To switch to a RH-SSO themed version of this console you can run:
--- a/jest.config.ts
+++ b/jest.config.ts
@ -7,8 +7,8 @@ const config: Config.InitialOptions = {
  ...snowpackConfig(),
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
-    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js",
-    "\\.(css|less)$": "<rootDir>/src/__mocks__/styleMock.js"
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/fileMock.js",
+    "\\.(css|less)$": "<rootDir>/mocks/styleMock.js"
  }
 };

--- a/src/mocks/fileMock.js
+++ b/src/mocks/fileMock.js
--- a/src/mocks/styleMock.js
+++ b/src/mocks/styleMock.js
--- a/package-lock.json
+++ b/package-lock.json
@ -57,10 +57,14 @@
        "decompress": "^4.2.1",
        "decompress-targz": "^4.1.1",
        "eslint": "^7.30.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-prettier": "^3.4.0",
        "eslint-plugin-react": "^7.24.0",
        "grunt": "^1.4.1",
        "grunt-contrib-copy": "^1.0.0",
+        "husky": "^7.0.1",
        "jest": "^26.6.3",
+        "lint-staged": "^11.0.1",
        "mutationobserver-shim": "^0.3.7",
        "postcss": "^8.3.5",
        "postcss-cli": "^8.3.1",
@ -16858,6 +16862,39 @@
        "url": "https://opencollective.com/eslint"
      }
    },
+    "node_modules/eslint-config-prettier": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
+      "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=5.0.0",
+        "prettier": ">=1.13.0"
+      },
+      "peerDependenciesMeta": {
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/eslint-plugin-react": {
      "version": "7.24.0",
      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz",
@ -17750,6 +17787,12 @@
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "dev": true
    },
+    "node_modules/fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
    "node_modules/fast-glob": {
      "version": "3.2.6",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.6.tgz",
@ -18738,6 +18781,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
    "node_modules/get-package-type": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@ -20116,6 +20165,21 @@
        "node": ">=10.17.0"
      }
    },
+    "node_modules/husky": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.1.tgz",
+      "integrity": "sha512-gceRaITVZ+cJH9sNHqx5tFwbzlLCVxtVZcusME8JYQ8Edy5mpGDOqD8QBCdMhpyo9a+JXddnujQ4rpY2Ff9SJA==",
+      "dev": true,
+      "bin": {
+        "husky": "lib/bin.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
    "node_modules/i18next": {
      "version": "20.3.2",
      "resolved": "https://registry.npmjs.org/i18next/-/i18next-20.3.2.tgz",
@ -20849,6 +20913,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/is-object": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
@ -20919,6 +20992,15 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/is-relative": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
@ -24097,6 +24179,96 @@
      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
      "dev": true
    },
+    "node_modules/lint-staged": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-11.0.1.tgz",
+      "integrity": "sha512-RkTA1ulE6jAGFskxpGAwxfVRXjHp7D9gFg/+KMARUWMPiVFP0t28Em2u0gL8sA0w3/ck3TC57F2v2RNeQ5XPnw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.1",
+        "cli-truncate": "^2.1.0",
+        "commander": "^7.2.0",
+        "cosmiconfig": "^7.0.0",
+        "debug": "^4.3.1",
+        "dedent": "^0.7.0",
+        "enquirer": "^2.3.6",
+        "execa": "^5.0.0",
+        "listr2": "^3.8.2",
+        "log-symbols": "^4.1.0",
+        "micromatch": "^4.0.4",
+        "normalize-path": "^3.0.0",
+        "please-upgrade-node": "^3.2.0",
+        "string-argv": "0.3.1",
+        "stringify-object": "^3.3.0"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/chalk": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/lint-staged/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lint-staged/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/listr2": {
      "version": "3.10.0",
      "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.10.0.tgz",
@ -26471,6 +26643,15 @@
        "node": ">=4"
      }
    },
+    "node_modules/please-upgrade-node": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
+      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
+      "dev": true,
+      "dependencies": {
+        "semver-compare": "^1.0.0"
+      }
+    },
    "node_modules/pnp-webpack-plugin": {
      "version": "1.6.4",
      "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@ -27470,6 +27651,18 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
    "node_modules/pretty-bytes": {
      "version": "5.6.0",
      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@ -29932,6 +30125,12 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
+      "dev": true
+    },
    "node_modules/send": {
      "version": "0.17.1",
      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
@ -31096,6 +31295,15 @@
        "safe-buffer": "~5.1.0"
      }
    },
+    "node_modules/string-argv": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+      "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
    "node_modules/string-hash": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
@ -31208,6 +31416,20 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
    "node_modules/strip-ansi": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
@ -47371,6 +47593,22 @@
        }
      }
    },
+    "eslint-config-prettier": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz",
+      "integrity": "sha512-BgZuLUSeKzvlL/VUjx/Yb787VQ26RU3gGjA3iiFvdsp/2bMfVIWUVP7tjxtjS0e+HP409cPlPvNkQloz8C91ew==",
+      "dev": true,
+      "requires": {}
+    },
+    "eslint-plugin-prettier": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.0.tgz",
+      "integrity": "sha512-UDK6rJT6INSfcOo545jiaOwB701uAIt2/dR7WnFQoGCVl1/EMqdANBmwUaqqQ45aXprsTGzSa39LI1PyuRBxxw==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
    "eslint-plugin-react": {
      "version": "7.24.0",
      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz",
@ -47965,6 +48203,12 @@
      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
      "dev": true
    },
+    "fast-diff": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
+      "dev": true
+    },
    "fast-glob": {
      "version": "3.2.6",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.6.tgz",
@ -48742,6 +48986,12 @@
        "has-symbols": "^1.0.1"
      }
    },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
    "get-package-type": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@ -49832,6 +50082,12 @@
      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
      "dev": true
    },
+    "husky": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-7.0.1.tgz",
+      "integrity": "sha512-gceRaITVZ+cJH9sNHqx5tFwbzlLCVxtVZcusME8JYQ8Edy5mpGDOqD8QBCdMhpyo9a+JXddnujQ4rpY2Ff9SJA==",
+      "dev": true
+    },
    "i18next": {
      "version": "20.3.2",
      "resolved": "https://registry.npmjs.org/i18next/-/i18next-20.3.2.tgz",
@ -50347,6 +50603,12 @@
      "integrity": "sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==",
      "dev": true
    },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
+      "dev": true
+    },
    "is-object": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
@ -50399,6 +50661,12 @@
        "has-symbols": "^1.0.2"
      }
    },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
+      "dev": true
+    },
    "is-relative": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
@ -52830,6 +53098,71 @@
      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
      "dev": true
    },
+    "lint-staged": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-11.0.1.tgz",
+      "integrity": "sha512-RkTA1ulE6jAGFskxpGAwxfVRXjHp7D9gFg/+KMARUWMPiVFP0t28Em2u0gL8sA0w3/ck3TC57F2v2RNeQ5XPnw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.1",
+        "cli-truncate": "^2.1.0",
+        "commander": "^7.2.0",
+        "cosmiconfig": "^7.0.0",
+        "debug": "^4.3.1",
+        "dedent": "^0.7.0",
+        "enquirer": "^2.3.6",
+        "execa": "^5.0.0",
+        "listr2": "^3.8.2",
+        "log-symbols": "^4.1.0",
+        "micromatch": "^4.0.4",
+        "normalize-path": "^3.0.0",
+        "please-upgrade-node": "^3.2.0",
+        "string-argv": "0.3.1",
+        "stringify-object": "^3.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
+          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
    "listr2": {
      "version": "3.10.0",
      "resolved": "https://registry.npmjs.org/listr2/-/listr2-3.10.0.tgz",
@ -54691,6 +55024,15 @@
        }
      }
    },
+    "please-upgrade-node": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
+      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
+      "dev": true,
+      "requires": {
+        "semver-compare": "^1.0.0"
+      }
+    },
    "pnp-webpack-plugin": {
      "version": "1.6.4",
      "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@ -55359,6 +55701,15 @@
      "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==",
      "dev": true
    },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
    "pretty-bytes": {
      "version": "5.6.0",
      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@ -57319,6 +57670,12 @@
      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
      "dev": true
    },
+    "semver-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
+      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
+      "dev": true
+    },
    "send": {
      "version": "0.17.1",
      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
@ -58286,6 +58643,12 @@
        "safe-buffer": "~5.1.0"
      }
    },
+    "string-argv": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz",
+      "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
+      "dev": true
+    },
    "string-hash": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
@ -58371,6 +58734,17 @@
        "define-properties": "^1.1.3"
      }
    },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
    "strip-ansi": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -15,16 +15,15 @@
  "scripts": {
    "build": "snowpack build",
    "check-types": "tsc -p ./",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "format-check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
-    "lint": "eslint ./src/**/*.ts*",
+    "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\"",
    "postinstall": "grunt",
    "start": "snowpack dev",
    "test": "jest",
    "start:cypress": "cypress open",
    "start:cypress-tests": "cypress run",
    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "prepare": "husky install"
  },
  "dependencies": {
    "@patternfly/patternfly": "^4.115.2",
@ -75,10 +74,14 @@
    "decompress": "^4.2.1",
    "decompress-targz": "^4.1.1",
    "eslint": "^7.30.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "grunt": "^1.4.1",
    "grunt-contrib-copy": "^1.0.0",
+    "husky": "^7.0.1",
    "jest": "^26.6.3",
+    "lint-staged": "^11.0.1",
    "mutationobserver-shim": "^0.3.7",
    "postcss": "^8.3.5",
    "postcss-cli": "^8.3.1",
@ -87,5 +90,8 @@
    "snowpack": "2.18.5",
    "ts-node": "^10.1.0",
    "typescript": "4.2.4"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
  }
 }
--- a/src/client-scopes/details/MapperList.tsx
+++ b/src/client-scopes/details/MapperList.tsx
@ -3,7 +3,6 @@ import { useTranslation } from "react-i18next";
 import { Link, useHistory } from "react-router-dom";
 import {
  AlertVariant,
-  ButtonVariant,
  Dropdown,
  DropdownItem,
  DropdownToggle,
--- a/src/clients/credentials/Credentials.tsx
+++ b/src/clients/credentials/Credentials.tsx
@ -1,7 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useErrorHandler } from "react-error-boundary";
 import {
  ActionGroup,
  AlertVariant,
@ -35,11 +34,6 @@ type ClientAuthenticatorProviders = {
  displayName: string;
 };

-type Secret = {
-  type: string;
-  value: string;
-};
-
 type AccessToken = {
  registrationAccessToken: string;
 };
--- a/src/clients/keys/GenerateKeyDialog.tsx
+++ b/src/clients/keys/GenerateKeyDialog.tsx
@ -13,12 +13,10 @@ import {
  SelectVariant,
  Text,
  TextContent,
-  TextInput,
 } from "@patternfly/react-core";

 import type KeyStoreConfig from "keycloak-admin/lib/defs/keystoreConfig";
 import { HelpItem } from "../../components/help-enabler/HelpItem";
-import { PasswordInput } from "../../components/password-input/PasswordInput";
 import { StoreSettings } from "./StoreSettings";

 type GenerateKeyDialogProps = {
--- a/src/clients/keys/Keys.tsx
+++ b/src/clients/keys/Keys.tsx
@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import FileSaver from "file-saver";
 import {
--- a/src/components/realm-selector/RealmSelector.tsx
+++ b/src/components/realm-selector/RealmSelector.tsx
@ -23,11 +23,6 @@ import { RecentUsed } from "./recent-used";

 import "./realm-selector.css";

-type RecentUsedRealm = {
-  name: string;
-  used: boolean;
-};
-
 export const RealmSelector = () => {
  const { realm, setRealm, realms } = useRealm();
  const { whoAmI } = useContext(WhoAmIContext);
--- a/src/components/wizard-section-header/WizardSectionHeader.tsx
+++ b/src/components/wizard-section-header/WizardSectionHeader.tsx
@ -1,22 +1,5 @@
-import React, { ReactElement, useContext, useState } from "react";
-import {
-  Text,
-  PageSection,
-  TextContent,
-  Divider,
-  Level,
-  LevelItem,
-  Switch,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-  Badge,
-  ButtonProps,
-  Dropdown,
-  DropdownToggle,
-  DropdownPosition,
-  Title,
-} from "@patternfly/react-core";
+import { Text, TextContent, Title } from "@patternfly/react-core";
+import React from "react";
 import "./wizard-section-header.css";

 export type WizardSectionHeaderProps = {
--- a/src/components/work-in-progress/WorkInProgress.tsx
+++ b/src/components/work-in-progress/WorkInProgress.tsx
@ -8,7 +8,8 @@ type WorkInProgressProps = {

 export const WorkInProgress = ({ marvelLink }: WorkInProgressProps) => (
  <div>
-    This page is not completed yet, but this is what it's going to look like:
+    This page is not completed yet, but this is what it&apos;s going to look
+    like:
    <div className="container">
      <iframe className="responsive-iframe" src={marvelLink}></iframe>
    </div>
--- a/src/identity-providers/add/DiscoverySettings.tsx
+++ b/src/identity-providers/add/DiscoverySettings.tsx
@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useFormContext, useWatch } from "react-hook-form";
 import {
-  Divider,
  ExpandableSection,
  FormGroup,
  TextInput,