From f23d0977e66e94878e2f1dcb43c5d021e59b690b Mon Sep 17 00:00:00 2001
From: Carlos Cuesta <carloscuesta@me.com>
Date: Wed, 28 Dec 2022 16:27:23 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Migrate=20`website`=20to?=
 =?UTF-8?q?=20TypeScript=20(#1244)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔧 Add typescript configuration files
* ➕ Install typescript dependencies
* ♻️ Migrate `lint-staged` to .ts(x) files
* ♻️ Migrate `eslint` configuration to TypeScript
* ♻️ Migrate `jest` configuration to TypeScript
* 🔥 Remove `babel` configuration
* ➖ Uninstall flow dependencies
* 🔥 Remove `flow` configuration
* 👷 Run `tsc` in `ci` workflow
* 🔧 Update `pre-push` hook
* ♻️ Migrate `pages/api` to TS
* ♻️ Migrate `pages/_app` to TS
* ♻️ Migrate `pages/_document` to TS
* ♻️ Migrate `pages/about` to TS
* ♻️ Migrate `pages/contributors` to TS
* ♻️ Migrate `pages/index` to TS
* ♻️ Migrate `pages/related-tools` to TS
* ♻️ Migrate `components/Button` to TS
* ♻️ Migrate `components/CarbonAd` to TS
* ♻️ Migrate `components/ContributorsList` to TS
* ♻️ Migrate `components/Icon` to TS
* ♻️ Migrate `components/SEO` to TS
* ♻️ Migrate `components/Layout` to TS
* ♻️ Migrate `components/GitmojiList` to TS
* ♻️ Migrate `__tests__/` pages to TS
* 🏷️ Update `next-env.d.ts`
---
 .flowconfig                                   |  15 -
 .github/workflows/ci.yml                      |   4 +-
 .gitignore                                    |   3 +
 .husky/pre-push                               |   2 +-
 packages/website/.lintstagedrc.json           |   4 +-
 packages/website/babel.config.json            |   6 -
 packages/website/jest.config.js               |  20 +
 packages/website/next-env.d.ts                |   5 +
 packages/website/package.json                 |  66 +--
 ...pages.spec.js.snap => pages.spec.tsx.snap} | 162 +++---
 .../{pages.spec.js => pages.spec.tsx}         |  28 +-
 packages/website/src/__tests__/stubs.js       |  35 --
 packages/website/src/__tests__/stubs.tsx      |  21 +
 ...tton.spec.js.snap => button.spec.tsx.snap} |   1 +
 .../{button.spec.js => button.spec.tsx}       |   0
 .../Button/__tests__/{stubs.js => stubs.ts}   |   1 +
 .../components/Button/{index.js => index.tsx} |   7 +-
 ...Ad.spec.js.snap => carbonAd.spec.tsx.snap} |   4 +-
 .../{carbonAd.spec.js => carbonAd.spec.tsx}   |   0
 .../CarbonAd/{index.js => index.tsx}          |   9 +-
 .../Contributor/{index.js => index.tsx}       |   7 +-
 ...js.snap => contributorsList.spec.tsx.snap} |   2 +
 ...List.spec.js => contributorsList.spec.tsx} |   4 +-
 .../__tests__/{stubs.js => stubs.ts}          |   0
 .../ContributorsList/{index.js => index.tsx}  |  13 +-
 .../components/GitmojiList/Gitmoji/index.js   |  49 --
 .../components/GitmojiList/Gitmoji/index.tsx  |  52 ++
 .../ListModeSelector/{index.js => index.tsx}  |   9 +-
 .../ThemeSelector/{index.js => index.tsx}     |   5 +-
 .../Toolbar/{index.js => index.tsx}           |  15 +-
 ...spec.js.snap => gitmojiList.spec.tsx.snap} |  24 +-
 ...tmojiList.spec.js => gitmojiList.spec.tsx} |  10 +-
 .../__tests__/{stubs.js => stubs.ts}          |   0
 .../{emojiColorsMap.js => emojiColorsMap.ts}  |   3 +-
 .../hooks/__tests__/{stubs.js => stubs.ts}    |   0
 ...orage.spec.js => useLocalStorage.spec.tsx} |  29 +-
 .../GitmojiList/hooks/useLocalStorage.js      |  27 -
 .../GitmojiList/hooks/useLocalStorage.tsx     |  23 +
 .../GitmojiList/{index.js => index.tsx}       |  31 +-
 .../{icon.spec.js.snap => icon.spec.tsx.snap} |   0
 .../__tests__/{icon.spec.js => icon.spec.tsx} |   0
 .../Icon/__tests__/{stubs.js => stubs.ts}     |   0
 .../Icon/{definitions.js => definitions.tsx}  |   5 +-
 .../components/Icon/{index.js => index.tsx}   |   5 +-
 .../Layout/Footer/{index.js => index.tsx}     |   4 +-
 .../CloseIcon/{index.js => index.tsx}         |   5 +-
 .../MenuLink/{index.js => index.tsx}          |   6 +-
 .../OpenIcon/{index.js => index.tsx}          |   5 +-
 .../Layout/Hamburger/{index.js => index.tsx}  |   9 +-
 .../Logo/Status/Joy/{index.js => index.tsx}   |   5 +-
 .../Logo/Status/Loved/{index.js => index.tsx} |   5 +-
 .../Logo/Status/Sexy/{index.js => index.tsx}  |   5 +-
 .../Status/Smiling/{index.js => index.tsx}    |   5 +-
 .../Status/Sunglasses/{index.js => index.tsx} |   5 +-
 .../Status/Tongue/{index.js => index.tsx}     |   5 +-
 .../Logo/Status/{index.js => index.tsx}       |  29 +-
 .../Header/Logo/{index.js => index.tsx}       |  15 +-
 .../Layout/Header/{index.js => index.tsx}     |   5 +-
 ...yout.spec.js.snap => layout.spec.tsx.snap} |  12 +-
 .../{layout.spec.js => layout.spec.tsx}       |   8 -
 .../Layout/__tests__/{stubs.js => stubs.ts}   |   0
 .../components/Layout/{index.js => index.tsx} |   7 +-
 .../__tests__/__snapshots__/seo.spec.js.snap  |   5 -
 .../__tests__/__snapshots__/seo.spec.tsx.snap | 325 +++++++++++
 .../__tests__/{seo.spec.js => seo.spec.tsx}   |   4 +-
 .../SEO/__tests__/{stubs.js => stubs.ts}      |   0
 .../components/SEO/{index.js => index.tsx}    |   6 +-
 .../website/src/pages/{_app.js => _app.tsx}   |   7 +-
 .../src/pages/{_document.js => _document.tsx} |   4 +-
 .../website/src/pages/{about.js => about.tsx} |   4 +-
 .../api/gitmojis/{index.js => index.tsx}      |   4 +-
 .../{contributors.js => contributors.tsx}     |  28 +-
 .../website/src/pages/{index.js => index.tsx} |   4 +-
 .../{related-tools.js => related-tools.tsx}   |   7 +-
 packages/website/tsconfig.json                |  31 ++
 turbo.json                                    |   2 +-
 yarn.lock                                     | 517 +++++++++++-------
 77 files changed, 1087 insertions(+), 702 deletions(-)
 delete mode 100644 .flowconfig
 delete mode 100644 packages/website/babel.config.json
 create mode 100644 packages/website/jest.config.js
 create mode 100644 packages/website/next-env.d.ts
 rename packages/website/src/__tests__/__snapshots__/{pages.spec.js.snap => pages.spec.tsx.snap} (97%)
 rename packages/website/src/__tests__/{pages.spec.js => pages.spec.tsx} (76%)
 delete mode 100644 packages/website/src/__tests__/stubs.js
 create mode 100644 packages/website/src/__tests__/stubs.tsx
 rename packages/website/src/components/Button/__tests__/__snapshots__/{button.spec.js.snap => button.spec.tsx.snap} (95%)
 rename packages/website/src/components/Button/__tests__/{button.spec.js => button.spec.tsx} (100%)
 rename packages/website/src/components/Button/__tests__/{stubs.js => stubs.ts} (85%)
 rename packages/website/src/components/Button/{index.js => index.tsx} (64%)
 rename packages/website/src/components/CarbonAd/__tests__/__snapshots__/{carbonAd.spec.js.snap => carbonAd.spec.tsx.snap} (52%)
 rename packages/website/src/components/CarbonAd/__tests__/{carbonAd.spec.js => carbonAd.spec.tsx} (100%)
 rename packages/website/src/components/CarbonAd/{index.js => index.tsx} (92%)
 rename packages/website/src/components/ContributorsList/Contributor/{index.js => index.tsx} (62%)
 rename packages/website/src/components/ContributorsList/__tests__/__snapshots__/{contributorsList.spec.js.snap => contributorsList.spec.tsx.snap} (89%)
 rename packages/website/src/components/ContributorsList/__tests__/{contributorsList.spec.js => contributorsList.spec.tsx} (82%)
 rename packages/website/src/components/ContributorsList/__tests__/{stubs.js => stubs.ts} (100%)
 rename packages/website/src/components/ContributorsList/{index.js => index.tsx} (66%)
 delete mode 100644 packages/website/src/components/GitmojiList/Gitmoji/index.js
 create mode 100644 packages/website/src/components/GitmojiList/Gitmoji/index.tsx
 rename packages/website/src/components/GitmojiList/Toolbar/ListModeSelector/{index.js => index.tsx} (80%)
 rename packages/website/src/components/GitmojiList/Toolbar/ThemeSelector/{index.js => index.tsx} (84%)
 rename packages/website/src/components/GitmojiList/Toolbar/{index.js => index.tsx} (85%)
 rename packages/website/src/components/GitmojiList/__tests__/__snapshots__/{gitmojiList.spec.js.snap => gitmojiList.spec.tsx.snap} (97%)
 rename packages/website/src/components/GitmojiList/__tests__/{gitmojiList.spec.js => gitmojiList.spec.tsx} (91%)
 rename packages/website/src/components/GitmojiList/__tests__/{stubs.js => stubs.ts} (100%)
 rename packages/website/src/components/GitmojiList/{emojiColorsMap.js => emojiColorsMap.ts} (99%)
 rename packages/website/src/components/GitmojiList/hooks/__tests__/{stubs.js => stubs.ts} (100%)
 rename packages/website/src/components/GitmojiList/hooks/__tests__/{useLocalStorage.spec.js => useLocalStorage.spec.tsx} (71%)
 delete mode 100644 packages/website/src/components/GitmojiList/hooks/useLocalStorage.js
 create mode 100644 packages/website/src/components/GitmojiList/hooks/useLocalStorage.tsx
 rename packages/website/src/components/GitmojiList/{index.js => index.tsx} (77%)
 rename packages/website/src/components/Icon/__tests__/__snapshots__/{icon.spec.js.snap => icon.spec.tsx.snap} (100%)
 rename packages/website/src/components/Icon/__tests__/{icon.spec.js => icon.spec.tsx} (100%)
 rename packages/website/src/components/Icon/__tests__/{stubs.js => stubs.ts} (100%)
 rename packages/website/src/components/Icon/{definitions.js => definitions.tsx} (98%)
 rename packages/website/src/components/Icon/{index.js => index.tsx} (72%)
 rename packages/website/src/components/Layout/Footer/{index.js => index.tsx} (89%)
 rename packages/website/src/components/Layout/Hamburger/CloseIcon/{index.js => index.tsx} (78%)
 rename packages/website/src/components/Layout/Hamburger/MenuLink/{index.js => index.tsx} (80%)
 rename packages/website/src/components/Layout/Hamburger/OpenIcon/{index.js => index.tsx} (72%)
 rename packages/website/src/components/Layout/Hamburger/{index.js => index.tsx} (91%)
 rename packages/website/src/components/Layout/Header/Logo/Status/Joy/{index.js => index.tsx} (94%)
 rename packages/website/src/components/Layout/Header/Logo/Status/Loved/{index.js => index.tsx} (93%)
 rename packages/website/src/components/Layout/Header/Logo/Status/Sexy/{index.js => index.tsx} (94%)
 rename packages/website/src/components/Layout/Header/Logo/Status/Smiling/{index.js => index.tsx} (94%)
 rename packages/website/src/components/Layout/Header/Logo/Status/Sunglasses/{index.js => index.tsx} (91%)
 rename packages/website/src/components/Layout/Header/Logo/Status/Tongue/{index.js => index.tsx} (92%)
 rename packages/website/src/components/Layout/Header/Logo/Status/{index.js => index.tsx} (63%)
 rename packages/website/src/components/Layout/Header/Logo/{index.js => index.tsx} (91%)
 rename packages/website/src/components/Layout/Header/{index.js => index.tsx} (89%)
 rename packages/website/src/components/Layout/__tests__/__snapshots__/{layout.spec.js.snap => layout.spec.tsx.snap} (98%)
 rename packages/website/src/components/Layout/__tests__/{layout.spec.js => layout.spec.tsx} (93%)
 rename packages/website/src/components/Layout/__tests__/{stubs.js => stubs.ts} (100%)
 rename packages/website/src/components/Layout/{index.js => index.tsx} (72%)
 delete mode 100644 packages/website/src/components/SEO/__tests__/__snapshots__/seo.spec.js.snap
 create mode 100644 packages/website/src/components/SEO/__tests__/__snapshots__/seo.spec.tsx.snap
 rename packages/website/src/components/SEO/__tests__/{seo.spec.js => seo.spec.tsx} (87%)
 rename packages/website/src/components/SEO/__tests__/{stubs.js => stubs.ts} (100%)
 rename packages/website/src/components/SEO/{index.js => index.tsx} (96%)
 rename packages/website/src/pages/{_app.js => _app.tsx} (61%)
 rename packages/website/src/pages/{_document.js => _document.tsx} (97%)
 rename packages/website/src/pages/{about.js => about.tsx} (98%)
 rename packages/website/src/pages/api/gitmojis/{index.js => index.tsx} (67%)
 rename packages/website/src/pages/{contributors.js => contributors.tsx} (63%)
 rename packages/website/src/pages/{index.js => index.tsx} (81%)
 rename packages/website/src/pages/{related-tools.js => related-tools.tsx} (95%)
 create mode 100644 packages/website/tsconfig.json

diff --git a/.flowconfig b/.flowconfig
deleted file mode 100644
index 81d09f9..0000000
--- a/.flowconfig
+++ /dev/null
@@ -1,15 +0,0 @@
-[ignore]
-<PROJECT_ROOT>/.next
-.*/node_modules/resolve/test/resolver/malformed_package_json
-.*/node_modules/jsonlint-mod
-
-[include]
-
-[libs]
-
-[lints]
-
-[options]
-module.name_mapper='src\/\(.*\)$' -> '<PROJECT_ROOT>/packages/website/src/\1'
-exact_by_default=true
-react.runtime=automatic
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 20ef20f..45d5da7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -24,7 +24,7 @@ jobs:
       run: yarn install --immutable
     - name: Lint 🎨
       run: yarn turbo lint
-    - name: Flow types 🏷
-      run: yarn turbo flow
+    - name: TypeScript check 🏷
+      run: yarn turbo tscheck
     - name: Tests ✅
       run: yarn turbo test
diff --git a/.gitignore b/.gitignore
index 381f01e..8d3e0a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,6 @@ packages/website/public/*.map
 packages/website/public/robots.txt
 packages/website/public/sitemap.xml
 packages/website/public/sitemap-*.xml
+
+# TS
+*.tsbuildinfo
diff --git a/.husky/pre-push b/.husky/pre-push
index 82f3c6f..3206cd9 100755
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn turbo flow && yarn turbo test
+yarn turbo tscheck && yarn turbo test
diff --git a/packages/website/.lintstagedrc.json b/packages/website/.lintstagedrc.json
index 16da795..f5bc9a5 100644
--- a/packages/website/.lintstagedrc.json
+++ b/packages/website/.lintstagedrc.json
@@ -1,6 +1,6 @@
 {
-  "./src/**/*.{js,css}": [
+  "./src/**/*.{ts,tsx,css}": [
     "eslint --cache --fix",
-    "prettier --write ./src/**/*.{js,css}"
+    "prettier --write ./src/**/*.{ts,tsx,css}"
   ]
 }
diff --git a/packages/website/babel.config.json b/packages/website/babel.config.json
deleted file mode 100644
index 6ad5889..0000000
--- a/packages/website/babel.config.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "presets": [
-    "next/babel",
-    "@babel/preset-flow"
-  ]
-}
diff --git a/packages/website/jest.config.js b/packages/website/jest.config.js
new file mode 100644
index 0000000..e197080
--- /dev/null
+++ b/packages/website/jest.config.js
@@ -0,0 +1,20 @@
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  dir: './'
+})
+
+/** @type {import('jest').Config} */
+module.exports = createJestConfig({
+  "collectCoverageFrom": [
+    "src/**/*.{ts,tsx}",
+  ],
+  "testMatch": [
+    "**/*.(spec).(ts)",
+    "**/*.(spec).(tsx)"
+  ],
+  "moduleNameMapper": {
+    "src/(.*)$": "<rootDir>/src/$1"
+  },
+  "testEnvironment": "jsdom"
+})
diff --git a/packages/website/next-env.d.ts b/packages/website/next-env.d.ts
new file mode 100644
index 0000000..4f11a03
--- /dev/null
+++ b/packages/website/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/packages/website/package.json b/packages/website/package.json
index 33fcc5a..549b5f9 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -7,29 +7,28 @@
   },
   "scripts": {
     "build": "next build && next-sitemap",
+    "tscheck": "yarn tsc --noEmit",
     "dev": "next dev",
-    "flow": "flow",
-    "lint": "eslint ./src && prettier --check ./src/**/*.{js,css}",
+    "lint": "eslint ./src && prettier --check ./src/**/*.{ts,tsx,css}",
     "start": "next start",
     "test": "FORCE_COLOR=1 jest --coverage"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
-    "@babel/eslint-parser": "^7.19.1",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.18.6",
+    "@types/fetch-mock": "^7.3.5",
+    "@types/jest": "^29.2.4",
+    "@types/react": "^18.0.26",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
     "clipboard": "^2.0.4",
     "eslint": "^8.26.0",
     "eslint-config-next": "^13.1.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-jest": "^27.1.3",
     "eslint-plugin-react": "^7.31.10",
-    "flow-bin": "^0.196.3",
     "focus-trap-react": "^10.0.0",
     "gitmojis": "workspace:*",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.0.1",
     "jest-environment-jsdom": "^29.0.1",
     "jest-fetch-mock": "^3.0.3",
@@ -38,11 +37,13 @@
     "next-pwa": "^5.4.4",
     "next-sitemap": "^3.1.43",
     "next-themes": "^0.2.0",
+    "node-mocks-http": "^1.12.1",
     "prettier": "2.8.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.2.0"
+    "react-test-renderer": "^18.2.0",
+    "typescript": "^4.9.4"
   },
   "author": {
     "name": "carloscuesta",
@@ -69,24 +70,11 @@
     "singleQuote": true,
     "arrowParens": "always"
   },
-  "jest": {
-    "collectCoverageFrom": [
-      "./src/**/*.{js,jsx}"
-    ],
-    "testMatch": [
-      "**/*.(spec).(js)"
-    ],
-    "moduleNameMapper": {
-      "^.+\\.css$": "identity-obj-proxy",
-      "src/(.*)$": "<rootDir>/src/$1"
-    },
-    "testEnvironment": "jsdom"
-  },
   "volta": {
     "node": "16.15.0"
   },
   "eslintConfig": {
-    "parser": "@babel/eslint-parser",
+    "parser": "@typescript-eslint/parser",
     "env": {
       "jest": true,
       "browser": true,
@@ -94,7 +82,7 @@
     },
     "extends": [
       "eslint:recommended",
-      "plugin:flowtype/recommended",
+      "plugin:@typescript-eslint/recommended",
       "plugin:react/recommended",
       "prettier",
       "plugin:@next/next/recommended"
@@ -108,24 +96,15 @@
       "requireConfigFile": false,
       "babelOptions": {
         "presets": [
-          "next/babel",
-          "@babel/preset-react",
-          "@babel/preset-flow"
+          "next/babel"
         ]
       }
     },
     "plugins": [
       "react",
-      "flowtype"
+      "@typescript-eslint"
     ],
     "rules": {
-      "flowtype/require-valid-file-annotation": [
-        2,
-        "always",
-        {
-          "annotationStyle": "line"
-        }
-      ],
       "react/react-in-jsx-scope": "off",
       "@next/next/no-img-element": "off",
       "react/no-unknown-property": [
@@ -138,22 +117,9 @@
         }
       ]
     },
-    "overrides": [
-      {
-        "files": [
-          "*.spec.js",
-          "stubs.js",
-          "**/__mocks__/*.js"
-        ],
-        "rules": {
-          "flowtype/require-valid-file-annotation": 0
-        }
-      }
-    ],
     "settings": {
       "react": {
-        "version": "detect",
-        "flowVersion": "detect"
+        "version": "detect"
       },
       "import/resolver": {
         "alias": {
diff --git a/packages/website/src/__tests__/__snapshots__/pages.spec.js.snap b/packages/website/src/__tests__/__snapshots__/pages.spec.tsx.snap
similarity index 97%
rename from packages/website/src/__tests__/__snapshots__/pages.spec.js.snap
rename to packages/website/src/__tests__/__snapshots__/pages.spec.tsx.snap
index 9bcc633..80bf7ff 100644
--- a/packages/website/src/__tests__/__snapshots__/pages.spec.js.snap
+++ b/packages/website/src/__tests__/__snapshots__/pages.spec.tsx.snap
@@ -3,10 +3,10 @@
 exports[`Pages About should render the page 1`] = `
 <main>
   <div
-    className="jsx-2269568618 col-xs-12"
+    className="jsx-f88da8e0e7f3559f col-xs-12"
   >
     <div
-      className="jsx-2269568618 carbon-container row center-xs"
+      className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
     />
   </div>
   <section>
@@ -532,10 +532,10 @@ exports[`Pages App should render the page 1`] = `
 exports[`Pages Contributors should render the page 1`] = `
 <main>
   <div
-    className="jsx-2269568618 col-xs-12"
+    className="jsx-f88da8e0e7f3559f col-xs-12"
   >
     <div
-      className="jsx-2269568618 carbon-container row center-xs"
+      className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
     />
   </div>
   <section>
@@ -567,10 +567,10 @@ exports[`Pages Contributors should render the page 1`] = `
 exports[`Pages Index should render the page 1`] = `
 <main>
   <div
-    className="jsx-2269568618 col-xs-12"
+    className="jsx-f88da8e0e7f3559f col-xs-12"
   >
     <div
-      className="jsx-2269568618 carbon-container row center-xs"
+      className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
     />
   </div>
   <div
@@ -677,7 +677,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":art:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -718,7 +718,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":zap:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -759,7 +759,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":fire:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -800,7 +800,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":bug:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -841,7 +841,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":ambulance:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -882,7 +882,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":sparkles:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -923,7 +923,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":memo:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -964,7 +964,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":rocket:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1005,7 +1005,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":lipstick:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1046,7 +1046,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":tada:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1087,7 +1087,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":white_check_mark:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1128,7 +1128,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":lock:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1169,7 +1169,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":closed_lock_with_key:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1210,7 +1210,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":bookmark:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1251,7 +1251,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":rotating_light:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1292,7 +1292,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":construction:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1333,7 +1333,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":green_heart:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1374,7 +1374,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":arrow_down:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1415,7 +1415,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":arrow_up:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1456,7 +1456,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":pushpin:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1497,7 +1497,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":construction_worker:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1538,7 +1538,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":chart_with_upwards_trend:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1579,7 +1579,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":recycle:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1620,7 +1620,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":heavy_plus_sign:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1661,7 +1661,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":heavy_minus_sign:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1702,7 +1702,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":wrench:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1743,7 +1743,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":hammer:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1784,7 +1784,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":globe_with_meridians:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1825,7 +1825,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":pencil2:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1866,7 +1866,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":poop:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1907,7 +1907,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":rewind:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1948,7 +1948,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":twisted_rightwards_arrows:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -1989,7 +1989,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":package:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2030,7 +2030,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":alien:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2071,7 +2071,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":truck:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2112,7 +2112,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":page_facing_up:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2153,7 +2153,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":boom:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2194,7 +2194,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":bento:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2235,7 +2235,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":wheelchair:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2276,7 +2276,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":bulb:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2317,7 +2317,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":beers:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2358,7 +2358,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":speech_balloon:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2399,7 +2399,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":card_file_box:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2440,7 +2440,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":loud_sound:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2481,7 +2481,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":mute:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2522,7 +2522,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":busts_in_silhouette:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2563,7 +2563,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":children_crossing:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2604,7 +2604,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":building_construction:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2645,7 +2645,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":iphone:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2686,7 +2686,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":clown_face:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2727,7 +2727,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":egg:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2768,7 +2768,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":see_no_evil:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2809,7 +2809,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":camera_flash:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2850,7 +2850,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":alembic:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2891,7 +2891,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":mag:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2932,7 +2932,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":label:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -2973,7 +2973,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":seedling:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3014,7 +3014,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":triangular_flag_on_post:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3055,7 +3055,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":goal_net:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3096,7 +3096,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":dizzy:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3137,7 +3137,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":wastebasket:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3178,7 +3178,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":passport_control:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3219,7 +3219,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":adhesive_bandage:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3260,7 +3260,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":monocle_face:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3301,7 +3301,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":coffin:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3342,7 +3342,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":test_tube:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3383,7 +3383,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":necktie:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3424,7 +3424,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":stethoscope:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3465,7 +3465,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":bricks:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3506,7 +3506,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":technologist:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3547,7 +3547,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":money_with_wings:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3588,7 +3588,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":thread:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3629,7 +3629,7 @@ exports[`Pages Index should render the page 1`] = `
           <button
             className="gitmoji-clipboard-code gitmojiCode"
             data-clipboard-text=":safety_vest:"
-            tabIndex="-1"
+            tabIndex={-1}
             type="button"
           >
             <code>
@@ -3649,10 +3649,10 @@ exports[`Pages Index should render the page 1`] = `
 exports[`Pages Related tools should render the page 1`] = `
 <main>
   <div
-    className="jsx-2269568618 col-xs-12"
+    className="jsx-f88da8e0e7f3559f col-xs-12"
   >
     <div
-      className="jsx-2269568618 carbon-container row center-xs"
+      className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
     />
   </div>
   <section>
diff --git a/packages/website/src/__tests__/pages.spec.js b/packages/website/src/__tests__/pages.spec.tsx
similarity index 76%
rename from packages/website/src/__tests__/pages.spec.js
rename to packages/website/src/__tests__/pages.spec.tsx
index 6c8a390..fb45ffb 100644
--- a/packages/website/src/__tests__/pages.spec.js
+++ b/packages/website/src/__tests__/pages.spec.tsx
@@ -1,6 +1,7 @@
 import renderer from 'react-test-renderer'
-import { enableFetchMocks } from 'jest-fetch-mock'
+import fetchMock, { enableFetchMocks } from 'jest-fetch-mock'
 import gitmojisData from 'gitmojis'
+import { createMocks } from 'node-mocks-http'
 
 import App from '../pages/_app'
 import Index from '../pages/index'
@@ -34,6 +35,7 @@ describe('Pages', () => {
     })
 
     it('should render the page', () => {
+      // @ts-expect-error We don't need to pass router to test the App component.
       const wrapper = renderer.create(<App {...stubs.appProps} />)
       expect(wrapper).toMatchSnapshot()
     })
@@ -59,9 +61,9 @@ describe('Pages', () => {
     })
 
     it('should fetch contributos from GitHub', async () => {
-      fetch.mockResponseOnce(JSON.stringify(stubs.contributorsMock))
+      fetchMock.mockResponseOnce(JSON.stringify(stubs.contributorsMock))
 
-      const props = await getContributorsStaticProps()
+      const props = await getContributorsStaticProps({})
 
       expect(props).toEqual({
         props: {
@@ -90,26 +92,24 @@ describe('Pages', () => {
     describe('gitmojis endpoint', () => {
       describe('when request method is GET', () => {
         it('should set response status to 200 and gitmojis as body json', () => {
-          const request = stubs.request('GET')
-          const response = stubs.response()
+          const { req, res } = createMocks({ method: 'GET' })
 
-          GitmojisApi(request, response)
+          GitmojisApi(req, res)
 
-          expect(response.status).toHaveBeenCalledWith(200)
-          expect(response.json).toHaveBeenCalledWith(gitmojisData)
+          expect(res.statusCode).toEqual(200)
+          expect(res._getJSONData()).toEqual(gitmojisData)
         })
       })
 
       describe('when request method is not GET', () => {
         it('should setHeader, status 405 and end the request', () => {
-          const request = stubs.request('POST')
-          const response = stubs.response()
+          const { req, res } = createMocks({ method: 'POST' })
 
-          GitmojisApi(request, response)
+          GitmojisApi(req, res)
 
-          expect(response.setHeader).toHaveBeenCalledWith('Allow', ['GET'])
-          expect(response.status).toHaveBeenCalledWith(405)
-          expect(response.json).toHaveBeenCalledWith({
+          expect(res.getHeaders().allow).toEqual(['GET'])
+          expect(res.statusCode).toEqual(405)
+          expect(res._getJSONData()).toEqual({
             error: `Error: method POST not allowed`,
           })
         })
diff --git a/packages/website/src/__tests__/stubs.js b/packages/website/src/__tests__/stubs.js
deleted file mode 100644
index 5619cbb..0000000
--- a/packages/website/src/__tests__/stubs.js
+++ /dev/null
@@ -1,35 +0,0 @@
-export const appProps = {
-  Component: (props) => <div {...props}>Component</div>,
-  pageProps: { test: '' },
-}
-
-export const request = (method) => ({ method })
-
-export const response = () => {
-  const response = {}
-
-  response.status = jest.fn().mockReturnValue(response)
-  response.json = jest.fn().mockReturnValue(response)
-  response.setHeader = jest.fn().mockReturnValue(response)
-  response.status = jest.fn().mockReturnValue(response)
-  response.end = jest.fn().mockReturnValue(response)
-
-  return response
-}
-
-export const contributors = [
-  {
-    url: 'https://github.com/profile',
-    avatar: 'https://github.com/avatar',
-    id: 'contributor-id-123',
-  },
-]
-
-export const contributorsMock = [
-  {
-    html_url: 'https://github.com/profile',
-    avatar_url: 'https://github.com/avatar',
-    id: 'contributor-id-123',
-    login: 'carloscuesta',
-  },
-]
diff --git a/packages/website/src/__tests__/stubs.tsx b/packages/website/src/__tests__/stubs.tsx
new file mode 100644
index 0000000..1ed255a
--- /dev/null
+++ b/packages/website/src/__tests__/stubs.tsx
@@ -0,0 +1,21 @@
+export const appProps = {
+  Component: (props: any) => <div {...props}>Component</div>,
+  pageProps: { test: '' },
+}
+
+export const contributors = [
+  {
+    url: 'https://github.com/profile',
+    avatar: 'https://github.com/avatar',
+    id: 'contributor-id-123',
+  },
+]
+
+export const contributorsMock = [
+  {
+    html_url: 'https://github.com/profile',
+    avatar_url: 'https://github.com/avatar',
+    id: 'contributor-id-123',
+    login: 'carloscuesta',
+  },
+]
diff --git a/packages/website/src/components/Button/__tests__/__snapshots__/button.spec.js.snap b/packages/website/src/components/Button/__tests__/__snapshots__/button.spec.tsx.snap
similarity index 95%
rename from packages/website/src/components/Button/__tests__/__snapshots__/button.spec.js.snap
rename to packages/website/src/components/Button/__tests__/__snapshots__/button.spec.tsx.snap
index 66c9496..dd01798 100644
--- a/packages/website/src/components/Button/__tests__/__snapshots__/button.spec.js.snap
+++ b/packages/website/src/components/Button/__tests__/__snapshots__/button.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`Button should render the component 1`] = `
 <a
   className="button"
+  href="/"
   target="_blank"
 >
   <svg
diff --git a/packages/website/src/components/Button/__tests__/button.spec.js b/packages/website/src/components/Button/__tests__/button.spec.tsx
similarity index 100%
rename from packages/website/src/components/Button/__tests__/button.spec.js
rename to packages/website/src/components/Button/__tests__/button.spec.tsx
diff --git a/packages/website/src/components/Button/__tests__/stubs.js b/packages/website/src/components/Button/__tests__/stubs.ts
similarity index 85%
rename from packages/website/src/components/Button/__tests__/stubs.js
rename to packages/website/src/components/Button/__tests__/stubs.ts
index f143b36..ecf51c9 100644
--- a/packages/website/src/components/Button/__tests__/stubs.js
+++ b/packages/website/src/components/Button/__tests__/stubs.ts
@@ -2,4 +2,5 @@ export const props = {
   target: '_blank',
   icon: 'star',
   text: 'GitHub',
+  link: '/',
 }
diff --git a/packages/website/src/components/Button/index.js b/packages/website/src/components/Button/index.tsx
similarity index 64%
rename from packages/website/src/components/Button/index.js
rename to packages/website/src/components/Button/index.tsx
index 21ece9d..565f575 100644
--- a/packages/website/src/components/Button/index.js
+++ b/packages/website/src/components/Button/index.tsx
@@ -1,12 +1,9 @@
-// @flow
-import { type Element } from 'react'
-
 import Icon from 'src/components/Icon'
 import styles from './styles.module.css'
 
-type Props = { target?: string, icon?: string, text: string, link: string }
+type Props = { target?: string; icon?: string; text: string; link: string }
 
-const Button = (props: Props): Element<'a'> => (
+const Button = (props: Props) => (
   <a
     className={styles.button}
     target={props.target && props.target}
diff --git a/packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.js.snap b/packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.tsx.snap
similarity index 52%
rename from packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.js.snap
rename to packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.tsx.snap
index c4ca815..2542e67 100644
--- a/packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.js.snap
+++ b/packages/website/src/components/CarbonAd/__tests__/__snapshots__/carbonAd.spec.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`CarbonAd should render the component 1`] = `
 <div
-  className="jsx-2269568618 col-xs-12"
+  className="jsx-f88da8e0e7f3559f col-xs-12"
 >
   <div
-    className="jsx-2269568618 carbon-container row center-xs"
+    className="jsx-f88da8e0e7f3559f carbon-container row center-xs"
   />
 </div>
 `;
diff --git a/packages/website/src/components/CarbonAd/__tests__/carbonAd.spec.js b/packages/website/src/components/CarbonAd/__tests__/carbonAd.spec.tsx
similarity index 100%
rename from packages/website/src/components/CarbonAd/__tests__/carbonAd.spec.js
rename to packages/website/src/components/CarbonAd/__tests__/carbonAd.spec.tsx
diff --git a/packages/website/src/components/CarbonAd/index.js b/packages/website/src/components/CarbonAd/index.tsx
similarity index 92%
rename from packages/website/src/components/CarbonAd/index.js
rename to packages/website/src/components/CarbonAd/index.tsx
index 82aae42..d0addb8 100644
--- a/packages/website/src/components/CarbonAd/index.js
+++ b/packages/website/src/components/CarbonAd/index.tsx
@@ -1,10 +1,9 @@
-// @flow
-import React, { type Element } from 'react'
+import { useRef, useEffect } from 'react'
 
-const CarbonAd = (): Element<'div'> => {
-  const adsContainer: Object = React.useRef(null)
+const CarbonAd = () => {
+  const adsContainer = useRef<HTMLDivElement>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (adsContainer.current) {
       const carbonAdsScript = document.createElement('script')
 
diff --git a/packages/website/src/components/ContributorsList/Contributor/index.js b/packages/website/src/components/ContributorsList/Contributor/index.tsx
similarity index 62%
rename from packages/website/src/components/ContributorsList/Contributor/index.js
rename to packages/website/src/components/ContributorsList/Contributor/index.tsx
index 9d3f6d8..25911e3 100644
--- a/packages/website/src/components/ContributorsList/Contributor/index.js
+++ b/packages/website/src/components/ContributorsList/Contributor/index.tsx
@@ -1,11 +1,8 @@
-// @flow
-import { type Element } from 'react'
-
 import styles from './styles.module.css'
 
-type Props = { avatar: string, url: string }
+type Props = { avatar: string; url: string }
 
-const Contributor = (props: Props): Element<'article'> => (
+const Contributor = (props: Props) => (
   <article className="col-xs-3 col-sm-2">
     <a href={props.url} target="_blank" rel="noreferrer">
       <img className={styles.picture} src={props.avatar} />
diff --git a/packages/website/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.js.snap b/packages/website/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.tsx.snap
similarity index 89%
rename from packages/website/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.js.snap
rename to packages/website/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.tsx.snap
index 3c42138..186c596 100644
--- a/packages/website/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.js.snap
+++ b/packages/website/src/components/ContributorsList/__tests__/__snapshots__/contributorsList.spec.tsx.snap
@@ -5,11 +5,13 @@ exports[`ContributorsList Contributor should render the component 1`] = `
   className="col-xs-3 col-sm-2"
 >
   <a
+    href="https://github.com/profile"
     rel="noreferrer"
     target="_blank"
   >
     <img
       className="picture"
+      src="https://github.com/avatar"
     />
   </a>
 </article>
diff --git a/packages/website/src/components/ContributorsList/__tests__/contributorsList.spec.js b/packages/website/src/components/ContributorsList/__tests__/contributorsList.spec.tsx
similarity index 82%
rename from packages/website/src/components/ContributorsList/__tests__/contributorsList.spec.js
rename to packages/website/src/components/ContributorsList/__tests__/contributorsList.spec.tsx
index e0a093c..971d73b 100644
--- a/packages/website/src/components/ContributorsList/__tests__/contributorsList.spec.js
+++ b/packages/website/src/components/ContributorsList/__tests__/contributorsList.spec.tsx
@@ -7,9 +7,7 @@ import * as stubs from './stubs'
 describe('ContributorsList', () => {
   describe('Contributor', () => {
     it('should render the component', () => {
-      const wrapper = renderer.create(
-        <Contributor contributor={stubs.contributor} />
-      )
+      const wrapper = renderer.create(<Contributor {...stubs.contributor} />)
       expect(wrapper).toMatchSnapshot()
     })
   })
diff --git a/packages/website/src/components/ContributorsList/__tests__/stubs.js b/packages/website/src/components/ContributorsList/__tests__/stubs.ts
similarity index 100%
rename from packages/website/src/components/ContributorsList/__tests__/stubs.js
rename to packages/website/src/components/ContributorsList/__tests__/stubs.ts
diff --git a/packages/website/src/components/ContributorsList/index.js b/packages/website/src/components/ContributorsList/index.tsx
similarity index 66%
rename from packages/website/src/components/ContributorsList/index.js
rename to packages/website/src/components/ContributorsList/index.tsx
index bc2996b..2f44136 100644
--- a/packages/website/src/components/ContributorsList/index.js
+++ b/packages/website/src/components/ContributorsList/index.tsx
@@ -1,17 +1,14 @@
-// @flow
-import { type Element } from 'react'
-
 import Contributor from './Contributor'
 
 type Props = {
   contributors: Array<{
-    avatar: string,
-    id: string,
-    url: string,
-  }>,
+    avatar: string
+    id: string
+    url: string
+  }>
 }
 
-const ContributorsList = (props: Props): Element<'div'> => (
+const ContributorsList = (props: Props) => (
   <div className="row center-xs">
     {props.contributors.map((contributor) => (
       <Contributor
diff --git a/packages/website/src/components/GitmojiList/Gitmoji/index.js b/packages/website/src/components/GitmojiList/Gitmoji/index.js
deleted file mode 100644
index d1ee712..0000000
--- a/packages/website/src/components/GitmojiList/Gitmoji/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-// @flow
-import { type Element } from 'react'
-
-import emojiColorsMap from '../emojiColorsMap'
-import styles from './styles.module.css'
-
-type Props = {
-  code: string,
-  description: string,
-  emoji: string,
-  isListMode: boolean,
-  name: string,
-}
-
-const Gitmoji = (props: Props): Element<'article'> => (
-  <article
-    style={{ '--emojiColor': emojiColorsMap[props.name] }}
-    className={`${styles.emoji} col-xs-12 col-sm-6 ${
-      props.isListMode ? 'col-md-4' : 'col-md-3'
-    }`}
-  >
-    <div
-      className={`${styles.card} ${props.isListMode ? styles.cardList : ''}`}
-    >
-      <header className={`${styles.cardHeader}`}>
-        <button
-          type="button"
-          className={`gitmoji-clipboard-emoji ${styles.gitmoji}`}
-          data-clipboard-text={props.emoji}
-        >
-          {props.emoji}
-        </button>
-      </header>
-      <div className={styles.gitmojiInfo}>
-        <button
-          className={`gitmoji-clipboard-code ${styles.gitmojiCode}`}
-          data-clipboard-text={props.code}
-          tabIndex="-1"
-          type="button"
-        >
-          <code>{props.code}</code>
-        </button>
-        <p>{props.description}</p>
-      </div>
-    </div>
-  </article>
-)
-
-export default Gitmoji
diff --git a/packages/website/src/components/GitmojiList/Gitmoji/index.tsx b/packages/website/src/components/GitmojiList/Gitmoji/index.tsx
new file mode 100644
index 0000000..45ae6af
--- /dev/null
+++ b/packages/website/src/components/GitmojiList/Gitmoji/index.tsx
@@ -0,0 +1,52 @@
+import emojiColorsMap from '../emojiColorsMap'
+import styles from './styles.module.css'
+
+type Props = {
+  code: string
+  description: string
+  emoji: string
+  isListMode: boolean
+  name: keyof typeof emojiColorsMap
+}
+
+const Gitmoji = (props: Props) => {
+  const style = {
+    '--emojiColor': emojiColorsMap[props.name],
+  } as React.CSSProperties
+
+  return (
+    <article
+      style={style}
+      className={`${styles.emoji} col-xs-12 col-sm-6 ${
+        props.isListMode ? 'col-md-4' : 'col-md-3'
+      }`}
+    >
+      <div
+        className={`${styles.card} ${props.isListMode ? styles.cardList : ''}`}
+      >
+        <header className={`${styles.cardHeader}`}>
+          <button
+            type="button"
+            className={`gitmoji-clipboard-emoji ${styles.gitmoji}`}
+            data-clipboard-text={props.emoji}
+          >
+            {props.emoji}
+          </button>
+        </header>
+        <div className={styles.gitmojiInfo}>
+          <button
+            className={`gitmoji-clipboard-code ${styles.gitmojiCode}`}
+            data-clipboard-text={props.code}
+            tabIndex={-1}
+            type="button"
+          >
+            <code>{props.code}</code>
+          </button>
+          <p>{props.description}</p>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export default Gitmoji
diff --git a/packages/website/src/components/GitmojiList/Toolbar/ListModeSelector/index.js b/packages/website/src/components/GitmojiList/Toolbar/ListModeSelector/index.tsx
similarity index 80%
rename from packages/website/src/components/GitmojiList/Toolbar/ListModeSelector/index.js
rename to packages/website/src/components/GitmojiList/Toolbar/ListModeSelector/index.tsx
index 2814b53..ed62b0d 100644
--- a/packages/website/src/components/GitmojiList/Toolbar/ListModeSelector/index.js
+++ b/packages/website/src/components/GitmojiList/Toolbar/ListModeSelector/index.tsx
@@ -1,15 +1,12 @@
-// @flow
-import { type Element } from 'react'
-
 import Icon from 'src/components/Icon'
 import styles from './styles.module.css'
 
 type Props = {
-  isListMode: boolean,
-  setIsListMode: Function,
+  isListMode: boolean
+  setIsListMode: (isListMode: boolean) => void
 }
 
-const ListModeSelector = (props: Props): Element<'div'> => (
+const ListModeSelector = (props: Props) => (
   <div className={styles.container}>
     <button
       className={`${styles.button} ${
diff --git a/packages/website/src/components/GitmojiList/Toolbar/ThemeSelector/index.js b/packages/website/src/components/GitmojiList/Toolbar/ThemeSelector/index.tsx
similarity index 84%
rename from packages/website/src/components/GitmojiList/Toolbar/ThemeSelector/index.js
rename to packages/website/src/components/GitmojiList/Toolbar/ThemeSelector/index.tsx
index b735a90..bcf9543 100644
--- a/packages/website/src/components/GitmojiList/Toolbar/ThemeSelector/index.js
+++ b/packages/website/src/components/GitmojiList/Toolbar/ThemeSelector/index.tsx
@@ -1,11 +1,10 @@
-// @flow
-import { type Element, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
 
 import Icon from 'src/components/Icon'
 import styles from './styles.module.css'
 
-const ThemeSelector = (): Element<'div' | 'button'> => {
+const ThemeSelector = () => {
   const [isMounted, setIsMounted] = useState(false)
   const { resolvedTheme, setTheme } = useTheme()
   const nextTheme = resolvedTheme === 'light' ? 'dark' : 'light'
diff --git a/packages/website/src/components/GitmojiList/Toolbar/index.js b/packages/website/src/components/GitmojiList/Toolbar/index.tsx
similarity index 85%
rename from packages/website/src/components/GitmojiList/Toolbar/index.js
rename to packages/website/src/components/GitmojiList/Toolbar/index.tsx
index 51382e9..c025f7f 100644
--- a/packages/website/src/components/GitmojiList/Toolbar/index.js
+++ b/packages/website/src/components/GitmojiList/Toolbar/index.tsx
@@ -1,15 +1,14 @@
-// @flow
-import { type Element, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 
 import ListModeSelector from './ListModeSelector'
 import ThemeSelector from './ThemeSelector'
 import styles from './styles.module.css'
 
 type Props = {
-  isListMode: boolean,
-  searchInput: ?string,
-  setIsListMode: Function,
-  setSearchInput: Function,
+  isListMode: boolean
+  searchInput?: string
+  setIsListMode: (searchInput: boolean) => void
+  setSearchInput: (searchInput: string) => void
 }
 
 const isMacOs = () => {
@@ -18,8 +17,8 @@ const isMacOs = () => {
     : window.navigator.platform.toUpperCase().indexOf('MAC') >= 0
 }
 
-const Toolbar = (props: Props): Element<'div'> => {
-  const searchInputRef = useRef(null)
+const Toolbar = (props: Props) => {
+  const searchInputRef = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
     const keyboardEventListener = (event: KeyboardEvent) => {
diff --git a/packages/website/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap b/packages/website/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.tsx.snap
similarity index 97%
rename from packages/website/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap
rename to packages/website/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.tsx.snap
index f0d0b9f..d20dd03 100644
--- a/packages/website/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.js.snap
+++ b/packages/website/src/components/GitmojiList/__tests__/__snapshots__/gitmojiList.spec.tsx.snap
@@ -105,7 +105,7 @@ exports[`GitmojiList when is list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":art:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -146,7 +146,7 @@ exports[`GitmojiList when is list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":zap:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -187,7 +187,7 @@ exports[`GitmojiList when is list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":fire:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -228,7 +228,7 @@ exports[`GitmojiList when is list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":bug:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -269,7 +269,7 @@ exports[`GitmojiList when is list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":ambulance:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -310,7 +310,7 @@ exports[`GitmojiList when is list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":sparkles:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -427,7 +427,7 @@ exports[`GitmojiList when is not list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":art:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -468,7 +468,7 @@ exports[`GitmojiList when is not list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":zap:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -509,7 +509,7 @@ exports[`GitmojiList when is not list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":fire:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -550,7 +550,7 @@ exports[`GitmojiList when is not list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":bug:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -591,7 +591,7 @@ exports[`GitmojiList when is not list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":ambulance:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
@@ -632,7 +632,7 @@ exports[`GitmojiList when is not list mode should render the component 1`] = `
         <button
           className="gitmoji-clipboard-code gitmojiCode"
           data-clipboard-text=":sparkles:"
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <code>
diff --git a/packages/website/src/components/GitmojiList/__tests__/gitmojiList.spec.js b/packages/website/src/components/GitmojiList/__tests__/gitmojiList.spec.tsx
similarity index 91%
rename from packages/website/src/components/GitmojiList/__tests__/gitmojiList.spec.js
rename to packages/website/src/components/GitmojiList/__tests__/gitmojiList.spec.tsx
index a2c5818..264ce33 100644
--- a/packages/website/src/components/GitmojiList/__tests__/gitmojiList.spec.js
+++ b/packages/website/src/components/GitmojiList/__tests__/gitmojiList.spec.tsx
@@ -1,4 +1,4 @@
-import Router from 'next/router'
+import { useRouter } from 'next/router'
 import renderer from 'react-test-renderer'
 
 import GitmojiList from '../index'
@@ -12,6 +12,8 @@ jest.mock('next/router', () => ({
   })),
 }))
 
+const useRouterMock = useRouter as jest.Mock
+
 describe('GitmojiList', () => {
   describe('when is not list mode', () => {
     it('should render the component', () => {
@@ -35,7 +37,7 @@ describe('GitmojiList', () => {
 
   describe('when user search the fire gitmoji', () => {
     beforeAll(() => {
-      Router.useRouter.mockReturnValue(stubs.routerMock())
+      useRouterMock.mockReturnValue(stubs.routerMock())
     })
 
     it('should find the fire gitmoji by code', () => {
@@ -83,7 +85,7 @@ describe('GitmojiList', () => {
 
   describe('when search is provided by query string', () => {
     beforeAll(() => {
-      Router.useRouter.mockReturnValue(stubs.routerMock({ search: 'fire' }))
+      useRouterMock.mockReturnValue(stubs.routerMock({ search: 'fire' }))
     })
 
     it('should set the search input value to query.search', () => {
@@ -106,7 +108,7 @@ describe('GitmojiList', () => {
           instance.findByType('input').props.onChange({ target: { value: '' } })
         })
 
-        expect(Router.useRouter().push).toHaveBeenCalledWith('/', undefined, {
+        expect(useRouterMock().push).toHaveBeenCalledWith('/', undefined, {
           shallow: true,
         })
       })
diff --git a/packages/website/src/components/GitmojiList/__tests__/stubs.js b/packages/website/src/components/GitmojiList/__tests__/stubs.ts
similarity index 100%
rename from packages/website/src/components/GitmojiList/__tests__/stubs.js
rename to packages/website/src/components/GitmojiList/__tests__/stubs.ts
diff --git a/packages/website/src/components/GitmojiList/emojiColorsMap.js b/packages/website/src/components/GitmojiList/emojiColorsMap.ts
similarity index 99%
rename from packages/website/src/components/GitmojiList/emojiColorsMap.js
rename to packages/website/src/components/GitmojiList/emojiColorsMap.ts
index b23d526..bd73218 100644
--- a/packages/website/src/components/GitmojiList/emojiColorsMap.js
+++ b/packages/website/src/components/GitmojiList/emojiColorsMap.ts
@@ -1,4 +1,3 @@
-// @flow
 export default {
   'adhesive-bandage': '#fbcfb7',
   alembic: '#7f39fb',
@@ -75,4 +74,4 @@ export default {
   technologist: '#86B837',
   'money-with-wings': '#b3c0b1',
   thread: '#ffbe7b',
-}
+} as const
diff --git a/packages/website/src/components/GitmojiList/hooks/__tests__/stubs.js b/packages/website/src/components/GitmojiList/hooks/__tests__/stubs.ts
similarity index 100%
rename from packages/website/src/components/GitmojiList/hooks/__tests__/stubs.js
rename to packages/website/src/components/GitmojiList/hooks/__tests__/stubs.ts
diff --git a/packages/website/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.js b/packages/website/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.tsx
similarity index 71%
rename from packages/website/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.js
rename to packages/website/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.tsx
index a1fa52f..8015e11 100644
--- a/packages/website/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.js
+++ b/packages/website/src/components/GitmojiList/hooks/__tests__/useLocalStorage.spec.tsx
@@ -3,8 +3,13 @@ import renderer from 'react-test-renderer'
 import useLocalStorage from '../useLocalStorage'
 import * as stubs from './stubs'
 
-// eslint-disable-next-line react/prop-types
-const TestComponent = ({ storageKey, storageValue }) => {
+const TestComponent = ({
+  storageKey,
+  storageValue,
+}: {
+  storageKey: string
+  storageValue: string
+}) => {
   useLocalStorage(storageKey, storageValue)
 
   return null
@@ -15,10 +20,12 @@ Object.defineProperty(window, 'localStorage', {
   value: { setItem: jest.fn(), getItem: jest.fn() },
 })
 
+const getItem = window.localStorage.getItem as jest.Mock
+
 describe('useLocalStorage', () => {
   describe('when value is not persisted', () => {
     beforeAll(() => {
-      window.localStorage.getItem.mockReturnValue(null)
+      getItem.mockReturnValue(null)
     })
 
     it('should call localStorage.setItem', () => {
@@ -29,7 +36,12 @@ describe('useLocalStorage', () => {
         />
       )
 
-      wrapper.update()
+      wrapper.update(
+        <TestComponent
+          storageKey={stubs.localStorageMock.key}
+          storageValue={stubs.localStorageMock.value}
+        />
+      )
 
       expect(window.localStorage.setItem).toHaveBeenCalledWith(
         stubs.localStorageMock.key,
@@ -42,7 +54,7 @@ describe('useLocalStorage', () => {
     const consoleError = console.error
 
     beforeAll(() => {
-      window.localStorage.getItem.mockReturnValue(new Error('Test'))
+      getItem.mockReturnValue(new Error('Test'))
 
       Object.defineProperty(console, 'error', {
         writable: true,
@@ -65,7 +77,12 @@ describe('useLocalStorage', () => {
         />
       )
 
-      wrapper.update()
+      wrapper.update(
+        <TestComponent
+          storageKey={stubs.localStorageMock.key}
+          storageValue={stubs.localStorageMock.value}
+        />
+      )
 
       expect(console.error).toHaveBeenCalledWith(expect.any(String))
     })
diff --git a/packages/website/src/components/GitmojiList/hooks/useLocalStorage.js b/packages/website/src/components/GitmojiList/hooks/useLocalStorage.js
deleted file mode 100644
index 615a081..0000000
--- a/packages/website/src/components/GitmojiList/hooks/useLocalStorage.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// @flow
-import React from 'react'
-
-export default function useLocalStorage<T>(
-  key: string,
-  defaultValue: T
-): [T, (((T) => T) | T) => void] {
-  const [state, setState] = React.useState<T>(defaultValue)
-
-  React.useEffect(() => {
-    try {
-      const localValue = window.localStorage.getItem(key)
-
-      if (localValue !== null) {
-        setState(JSON.parse(localValue))
-      }
-    } catch (error) {
-      console.error(`ERROR: Loading ${key} from localStorage – ${error}`)
-    }
-  }, [])
-
-  React.useEffect(() => {
-    window.localStorage.setItem(key, state)
-  }, [state])
-
-  return [state, setState]
-}
diff --git a/packages/website/src/components/GitmojiList/hooks/useLocalStorage.tsx b/packages/website/src/components/GitmojiList/hooks/useLocalStorage.tsx
new file mode 100644
index 0000000..4505213
--- /dev/null
+++ b/packages/website/src/components/GitmojiList/hooks/useLocalStorage.tsx
@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react'
+
+export default function useLocalStorage<T>(key: string, defaultValue: T) {
+  const [state, setState] = useState(defaultValue)
+
+  useEffect(() => {
+    try {
+      const localValue = window.localStorage.getItem(key)
+
+      if (localValue !== null) {
+        setState(JSON.parse(localValue))
+      }
+    } catch (error) {
+      console.error(`ERROR: Loading ${key} from localStorage – ${error}`)
+    }
+  }, [])
+
+  useEffect(() => {
+    window.localStorage.setItem(key, `${state}`)
+  }, [state])
+
+  return [state, setState] as const
+}
diff --git a/packages/website/src/components/GitmojiList/index.js b/packages/website/src/components/GitmojiList/index.tsx
similarity index 77%
rename from packages/website/src/components/GitmojiList/index.js
rename to packages/website/src/components/GitmojiList/index.tsx
index d977ae5..47d3894 100644
--- a/packages/website/src/components/GitmojiList/index.js
+++ b/packages/website/src/components/GitmojiList/index.tsx
@@ -1,5 +1,4 @@
-// @flow
-import React, { type Element } from 'react'
+import { useEffect, useState } from 'react'
 import Clipboard from 'clipboard'
 import { useRouter } from 'next/router'
 
@@ -9,16 +8,16 @@ import useLocalStorage from './hooks/useLocalStorage'
 
 type Props = {
   gitmojis: Array<{
-    code: string,
-    description: string,
-    emoji: string,
-    name: string,
-  }>,
+    code: string
+    description: string
+    emoji: string
+    name: string
+  }>
 }
 
-const GitmojiList = (props: Props): Element<'div'> => {
+const GitmojiList = (props: Props) => {
   const router = useRouter()
-  const [searchInput, setSearchInput] = React.useState('')
+  const [searchInput, setSearchInput] = useState('')
   const [isListMode, setIsListMode] = useLocalStorage('isListMode', false)
 
   const gitmojis = searchInput
@@ -33,27 +32,27 @@ const GitmojiList = (props: Props): Element<'div'> => {
       })
     : props.gitmojis
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (router.query.search) {
-      setSearchInput(router.query.search)
+      setSearchInput(router.query.search as string)
     }
   }, [router.query.search])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (router.query.search && !searchInput) {
       router.push('/', undefined, { shallow: true })
     }
   }, [searchInput])
 
-  React.useEffect(() => {
+  useEffect(() => {
     const clipboard = new Clipboard(
       '.gitmoji-clipboard-emoji, .gitmoji-clipboard-code'
     )
 
     clipboard.on('success', function (e) {
-      window.ga('send', 'event', 'Gitmoji', 'Copy to Clipboard')
+      ;(window as any).ga('send', 'event', 'Gitmoji', 'Copy to Clipboard')
 
-      const notification = new window.NotificationFx({
+      const notification = new (window as any).NotificationFx({
         message: e.trigger.classList.contains('gitmoji-clipboard-emoji')
           ? `<p>Hey! Gitmoji ${e.text} copied to the clipboard 😜</p>`
           : `<p>Hey! Gitmoji <span class="gitmoji-code">${e.text}</span> copied to the clipboard 😜</p>`,
@@ -90,6 +89,8 @@ const GitmojiList = (props: Props): Element<'div'> => {
             emoji={gitmoji.emoji}
             isListMode={isListMode}
             key={index}
+            // @ts-expect-error: This should be replaced with something like:
+            // typeof gitmojis[number]['name'] but JSON can't be exported `as const`
             name={gitmoji.name}
           />
         ))
diff --git a/packages/website/src/components/Icon/__tests__/__snapshots__/icon.spec.js.snap b/packages/website/src/components/Icon/__tests__/__snapshots__/icon.spec.tsx.snap
similarity index 100%
rename from packages/website/src/components/Icon/__tests__/__snapshots__/icon.spec.js.snap
rename to packages/website/src/components/Icon/__tests__/__snapshots__/icon.spec.tsx.snap
diff --git a/packages/website/src/components/Icon/__tests__/icon.spec.js b/packages/website/src/components/Icon/__tests__/icon.spec.tsx
similarity index 100%
rename from packages/website/src/components/Icon/__tests__/icon.spec.js
rename to packages/website/src/components/Icon/__tests__/icon.spec.tsx
diff --git a/packages/website/src/components/Icon/__tests__/stubs.js b/packages/website/src/components/Icon/__tests__/stubs.ts
similarity index 100%
rename from packages/website/src/components/Icon/__tests__/stubs.js
rename to packages/website/src/components/Icon/__tests__/stubs.ts
diff --git a/packages/website/src/components/Icon/definitions.js b/packages/website/src/components/Icon/definitions.tsx
similarity index 98%
rename from packages/website/src/components/Icon/definitions.js
rename to packages/website/src/components/Icon/definitions.tsx
index ea2a41a..c9c26c0 100644
--- a/packages/website/src/components/Icon/definitions.js
+++ b/packages/website/src/components/Icon/definitions.tsx
@@ -1,7 +1,4 @@
-// @flow
-import { type Element } from 'react'
-
-export const IconDefinitions = (): Element<'svg'> => (
+export const IconDefinitions = () => (
   <svg
     style={{ position: 'absolute', width: 0, height: 0 }}
     width={0}
diff --git a/packages/website/src/components/Icon/index.js b/packages/website/src/components/Icon/index.tsx
similarity index 72%
rename from packages/website/src/components/Icon/index.js
rename to packages/website/src/components/Icon/index.tsx
index bbc52a3..fc234bd 100644
--- a/packages/website/src/components/Icon/index.js
+++ b/packages/website/src/components/Icon/index.tsx
@@ -1,12 +1,9 @@
-// @flow
-import { type Element } from 'react'
-
 export { IconDefinitions } from './definitions'
 import styles from './styles.module.css'
 
 type Props = { name: string }
 
-const Icon = (props: Props): Element<'svg'> => (
+const Icon = (props: Props) => (
   <svg className={`${styles.icon} icon-${props.name}`}>
     <use xlinkHref={`#icon-${props.name}`} />
   </svg>
diff --git a/packages/website/src/components/Layout/Footer/index.js b/packages/website/src/components/Layout/Footer/index.tsx
similarity index 89%
rename from packages/website/src/components/Layout/Footer/index.js
rename to packages/website/src/components/Layout/Footer/index.tsx
index fb9bae7..d3aca18 100644
--- a/packages/website/src/components/Layout/Footer/index.js
+++ b/packages/website/src/components/Layout/Footer/index.tsx
@@ -1,11 +1,9 @@
-// @flow
-import { type Element } from 'react'
 import Link from 'next/link'
 
 import Icon from 'src/components/Icon'
 import styles from './styles.module.css'
 
-const Footer = (): Element<'footer'> => (
+const Footer = () => (
   <footer className={styles.footer}>
     <div className="wrap">
       <div className="row middle-xs">
diff --git a/packages/website/src/components/Layout/Hamburger/CloseIcon/index.js b/packages/website/src/components/Layout/Hamburger/CloseIcon/index.tsx
similarity index 78%
rename from packages/website/src/components/Layout/Hamburger/CloseIcon/index.js
rename to packages/website/src/components/Layout/Hamburger/CloseIcon/index.tsx
index 2b0a198..6a5d9d4 100644
--- a/packages/website/src/components/Layout/Hamburger/CloseIcon/index.js
+++ b/packages/website/src/components/Layout/Hamburger/CloseIcon/index.tsx
@@ -1,7 +1,4 @@
-// @flow
-import { type Element } from 'react'
-
-const CloseIcon = (): Element<'svg'> => (
+const CloseIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="48"
diff --git a/packages/website/src/components/Layout/Hamburger/MenuLink/index.js b/packages/website/src/components/Layout/Hamburger/MenuLink/index.tsx
similarity index 80%
rename from packages/website/src/components/Layout/Hamburger/MenuLink/index.js
rename to packages/website/src/components/Layout/Hamburger/MenuLink/index.tsx
index 4fa56c6..79abc73 100644
--- a/packages/website/src/components/Layout/Hamburger/MenuLink/index.js
+++ b/packages/website/src/components/Layout/Hamburger/MenuLink/index.tsx
@@ -1,13 +1,11 @@
-// @flow
-import { type Node, type Element } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import styles from './styles.module.css'
 
-type Props = { href: string, text: string }
+type Props = { href: string; text: string }
 
-const MenuLink = (props: Props): Node | Element<'a'> => {
+const MenuLink = (props: Props) => {
   const router: { pathname: string } = useRouter()
   const isUserOnLinkPage: boolean = props.href === router.pathname
 
diff --git a/packages/website/src/components/Layout/Hamburger/OpenIcon/index.js b/packages/website/src/components/Layout/Hamburger/OpenIcon/index.tsx
similarity index 72%
rename from packages/website/src/components/Layout/Hamburger/OpenIcon/index.js
rename to packages/website/src/components/Layout/Hamburger/OpenIcon/index.tsx
index 04ae383..41f85a0 100644
--- a/packages/website/src/components/Layout/Hamburger/OpenIcon/index.js
+++ b/packages/website/src/components/Layout/Hamburger/OpenIcon/index.tsx
@@ -1,7 +1,4 @@
-// @flow
-import { type Element } from 'react'
-
-const OpenIcon = (): Element<'svg'> => (
+const OpenIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="48"
diff --git a/packages/website/src/components/Layout/Hamburger/index.js b/packages/website/src/components/Layout/Hamburger/index.tsx
similarity index 91%
rename from packages/website/src/components/Layout/Hamburger/index.js
rename to packages/website/src/components/Layout/Hamburger/index.tsx
index ebefcee..2eddba7 100644
--- a/packages/website/src/components/Layout/Hamburger/index.js
+++ b/packages/website/src/components/Layout/Hamburger/index.tsx
@@ -1,5 +1,4 @@
-// @flow
-import React, { type Element } from 'react'
+import { useState, useEffect } from 'react'
 import Router from 'next/router'
 import FocusTrap from 'focus-trap-react'
 
@@ -8,10 +7,10 @@ import OpenIcon from './OpenIcon'
 import CloseIcon from './CloseIcon'
 import styles from './styles.module.css'
 
-const Hamburger = (): Element<'div'> => {
-  const [isOpen, setIsOpen] = React.useState(false)
+const Hamburger = () => {
+  const [isOpen, setIsOpen] = useState(false)
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onRouteChangeStart = () => {
       setIsOpen(false)
     }
diff --git a/packages/website/src/components/Layout/Header/Logo/Status/Joy/index.js b/packages/website/src/components/Layout/Header/Logo/Status/Joy/index.tsx
similarity index 94%
rename from packages/website/src/components/Layout/Header/Logo/Status/Joy/index.js
rename to packages/website/src/components/Layout/Header/Logo/Status/Joy/index.tsx
index d2551ca..a1843b6 100644
--- a/packages/website/src/components/Layout/Header/Logo/Status/Joy/index.js
+++ b/packages/website/src/components/Layout/Header/Logo/Status/Joy/index.tsx
@@ -1,7 +1,4 @@
-// @flow
-import { type Element } from 'react'
-
-export const Joy = (): Element<'g'> => (
+export const Joy = () => (
   <g id="joy" transform="translate(304 32)">
     <g id="Group">
       <circle id="Oval" cy={39} cx={39} r={39} fill="#FFDD67" />
diff --git a/packages/website/src/components/Layout/Header/Logo/Status/Loved/index.js b/packages/website/src/components/Layout/Header/Logo/Status/Loved/index.tsx
similarity index 93%
rename from packages/website/src/components/Layout/Header/Logo/Status/Loved/index.js
rename to packages/website/src/components/Layout/Header/Logo/Status/Loved/index.tsx
index f67e9ed..dfc7c88 100644
--- a/packages/website/src/components/Layout/Header/Logo/Status/Loved/index.js
+++ b/packages/website/src/components/Layout/Header/Logo/Status/Loved/index.tsx
@@ -1,7 +1,4 @@
-// @flow
-import { type Element } from 'react'
-
-export const Loved = (): Element<'g'> => (
+export const Loved = () => (
   <g id="loved" transform="translate(304 32)">
     <g id="Group">
       <path
diff --git a/packages/website/src/components/Layout/Header/Logo/Status/Sexy/index.js b/packages/website/src/components/Layout/Header/Logo/Status/Sexy/index.tsx
similarity index 94%
rename from packages/website/src/components/Layout/Header/Logo/Status/Sexy/index.js
rename to packages/website/src/components/Layout/Header/Logo/Status/Sexy/index.tsx
index cc12a51..7cfcf31 100644
--- a/packages/website/src/components/Layout/Header/Logo/Status/Sexy/index.js
+++ b/packages/website/src/components/Layout/Header/Logo/Status/Sexy/index.tsx
@@ -1,7 +1,4 @@
-// @flow
-import { type Element } from 'react'
-
-export const Sexy = (): Element<'g'> => (
+export const Sexy = () => (
   <g id="sexy" transform="translate(304 32)">
     <g id="Group">
       <ellipse id="Oval" rx={39} ry={39} cy={39} cx={39} fill="#FFDD67" />
diff --git a/packages/website/src/components/Layout/Header/Logo/Status/Smiling/index.js b/packages/website/src/components/Layout/Header/Logo/Status/Smiling/index.tsx
similarity index 94%
rename from packages/website/src/components/Layout/Header/Logo/Status/Smiling/index.js
rename to packages/website/src/components/Layout/Header/Logo/Status/Smiling/index.tsx
index 3dbb9cb..73695b3 100644
--- a/packages/website/src/components/Layout/Header/Logo/Status/Smiling/index.js
+++ b/packages/website/src/components/Layout/Header/Logo/Status/Smiling/index.tsx
@@ -1,7 +1,4 @@
-// @flow
-import { type Element } from 'react'
-
-export const Smiling = (): Element<'g'> => (
+export const Smiling = () => (
   <g id="haha" transform="translate(304 32)">
     <g id="Group">
       <path
diff --git a/packages/website/src/components/Layout/Header/Logo/Status/Sunglasses/index.js b/packages/website/src/components/Layout/Header/Logo/Status/Sunglasses/index.tsx
similarity index 91%
rename from packages/website/src/components/Layout/Header/Logo/Status/Sunglasses/index.js
rename to packages/website/src/components/Layout/Header/Logo/Status/Sunglasses/index.tsx
index 09c5eea..1bfa4e1 100644
--- a/packages/website/src/components/Layout/Header/Logo/Status/Sunglasses/index.js
+++ b/packages/website/src/components/Layout/Header/Logo/Status/Sunglasses/index.tsx
@@ -1,7 +1,4 @@
-// @flow
-import { type Element } from 'react'
-
-export const Sunglasses = (): Element<'g'> => (
+export const Sunglasses = () => (
   <g id="sunglasses" transform="translate(304 32)">
     <g id="Group">
       <path
diff --git a/packages/website/src/components/Layout/Header/Logo/Status/Tongue/index.js b/packages/website/src/components/Layout/Header/Logo/Status/Tongue/index.tsx
similarity index 92%
rename from packages/website/src/components/Layout/Header/Logo/Status/Tongue/index.js
rename to packages/website/src/components/Layout/Header/Logo/Status/Tongue/index.tsx
index 6ffc6b2..a522489 100644
--- a/packages/website/src/components/Layout/Header/Logo/Status/Tongue/index.js
+++ b/packages/website/src/components/Layout/Header/Logo/Status/Tongue/index.tsx
@@ -1,7 +1,4 @@
-// @flow
-import { type Element } from 'react'
-
-export const Tongue = (): Element<'g'> => (
+export const Tongue = () => (
   <g id="tongue" transform="translate(304 32)">
     <g id="Group">
       <ellipse id="Oval" rx={39} ry={39} cy={39} cx={39} fill="#FFDD67" />
diff --git a/packages/website/src/components/Layout/Header/Logo/Status/index.js b/packages/website/src/components/Layout/Header/Logo/Status/index.tsx
similarity index 63%
rename from packages/website/src/components/Layout/Header/Logo/Status/index.js
rename to packages/website/src/components/Layout/Header/Logo/Status/index.tsx
index 5fd4ae7..cf8d61a 100644
--- a/packages/website/src/components/Layout/Header/Logo/Status/index.js
+++ b/packages/website/src/components/Layout/Header/Logo/Status/index.tsx
@@ -1,6 +1,3 @@
-// @flow
-import { type Node } from 'react'
-
 import Joy from './Joy'
 import Loved from './Loved'
 import Sexy from './Sexy'
@@ -8,18 +5,20 @@ import Smiling from './Smiling'
 import Sunglasses from './Sunglasses'
 import Tongue from './Tongue'
 
-export const LOGO_STATUSES: Object = {
-  JOY: 'joy',
-  LOVED: 'loved',
-  SEXY: 'sexy',
-  SMILING: 'smiling',
-  SUNGLASSES: 'sunglasses',
-  TONGUE: 'tongue',
-}
+export const LOGO_STATUSES = {
+  JOY: 'JOY',
+  LOVED: 'LOVED',
+  SEXY: 'SEXY',
+  SMILING: 'SMILING',
+  SUNGLASSES: 'SUNGLASSES',
+  TONGUE: 'TONGUE',
+} as const
 
-type Props = { status: $Keys<typeof LOGO_STATUSES> }
+export type EmojiLogoStatus = keyof typeof LOGO_STATUSES | null
 
-const Status = (props: Props): Node => {
+type Props = { status: EmojiLogoStatus }
+
+const Status = (props: Props) => {
   switch (props.status) {
     case LOGO_STATUSES.JOY:
       return <Joy />
@@ -33,9 +32,9 @@ const Status = (props: Props): Node => {
       return <Sunglasses />
     case LOGO_STATUSES.TONGUE:
       return <Tongue />
+    default:
+      return null
   }
-
-  return null
 }
 
 export default Status
diff --git a/packages/website/src/components/Layout/Header/Logo/index.js b/packages/website/src/components/Layout/Header/Logo/index.tsx
similarity index 91%
rename from packages/website/src/components/Layout/Header/Logo/index.js
rename to packages/website/src/components/Layout/Header/Logo/index.tsx
index fef6df9..c1e5d1b 100644
--- a/packages/website/src/components/Layout/Header/Logo/index.js
+++ b/packages/website/src/components/Layout/Header/Logo/index.tsx
@@ -1,16 +1,13 @@
-// @flow
-import React, { type Element } from 'react'
+import { useState, useEffect } from 'react'
 
-import Status, { LOGO_STATUSES } from './Status'
+import Status, { LOGO_STATUSES, type EmojiLogoStatus } from './Status'
 import styles from './styles.module.css'
 
-const Logo = (): Element<'svg'> => {
-  const statuses: Array<Object> = Object.values(LOGO_STATUSES).map(
-    (status) => status
-  )
-  const [status, setStatus] = React.useState('')
+const Logo = () => {
+  const statuses = Object.values(LOGO_STATUSES)
+  const [status, setStatus] = useState<EmojiLogoStatus>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     setStatus(statuses[Math.floor(Math.random() * statuses.length)])
   }, [])
 
diff --git a/packages/website/src/components/Layout/Header/index.js b/packages/website/src/components/Layout/Header/index.tsx
similarity index 89%
rename from packages/website/src/components/Layout/Header/index.js
rename to packages/website/src/components/Layout/Header/index.tsx
index 915f5de..c50c458 100644
--- a/packages/website/src/components/Layout/Header/index.js
+++ b/packages/website/src/components/Layout/Header/index.tsx
@@ -1,13 +1,10 @@
-// @flow
-import { type Element } from 'react'
-
 import Button from 'src/components/Button'
 import Logo from './Logo'
 import styles from './styles.module.css'
 
 type Props = { withHeadline: boolean }
 
-const Header = (props: Props): Element<'header'> => (
+const Header = (props: Props) => (
   <header className={styles.header}>
     <Logo />
     {props.withHeadline && (
diff --git a/packages/website/src/components/Layout/__tests__/__snapshots__/layout.spec.js.snap b/packages/website/src/components/Layout/__tests__/__snapshots__/layout.spec.tsx.snap
similarity index 98%
rename from packages/website/src/components/Layout/__tests__/__snapshots__/layout.spec.js.snap
rename to packages/website/src/components/Layout/__tests__/__snapshots__/layout.spec.tsx.snap
index fc19a71..2fbcb34 100644
--- a/packages/website/src/components/Layout/__tests__/__snapshots__/layout.spec.js.snap
+++ b/packages/website/src/components/Layout/__tests__/__snapshots__/layout.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Layout Logo should render Logo with status joy 1`] = `
+exports[`Layout Logo should render Logo with status JOY 1`] = `
 <g
   id="joy"
   transform="translate(304 32)"
@@ -57,7 +57,7 @@ exports[`Layout Logo should render Logo with status joy 1`] = `
 </g>
 `;
 
-exports[`Layout Logo should render Logo with status loved 1`] = `
+exports[`Layout Logo should render Logo with status LOVED 1`] = `
 <g
   id="loved"
   transform="translate(304 32)"
@@ -89,7 +89,7 @@ exports[`Layout Logo should render Logo with status loved 1`] = `
 </g>
 `;
 
-exports[`Layout Logo should render Logo with status sexy 1`] = `
+exports[`Layout Logo should render Logo with status SEXY 1`] = `
 <g
   id="sexy"
   transform="translate(304 32)"
@@ -168,7 +168,7 @@ exports[`Layout Logo should render Logo with status sexy 1`] = `
 </g>
 `;
 
-exports[`Layout Logo should render Logo with status smiling 1`] = `
+exports[`Layout Logo should render Logo with status SMILING 1`] = `
 <g
   id="haha"
   transform="translate(304 32)"
@@ -214,7 +214,7 @@ exports[`Layout Logo should render Logo with status smiling 1`] = `
 </g>
 `;
 
-exports[`Layout Logo should render Logo with status sunglasses 1`] = `
+exports[`Layout Logo should render Logo with status SUNGLASSES 1`] = `
 <g
   id="sunglasses"
   transform="translate(304 32)"
@@ -241,7 +241,7 @@ exports[`Layout Logo should render Logo with status sunglasses 1`] = `
 </g>
 `;
 
-exports[`Layout Logo should render Logo with status tongue 1`] = `
+exports[`Layout Logo should render Logo with status TONGUE 1`] = `
 <g
   id="tongue"
   transform="translate(304 32)"
diff --git a/packages/website/src/components/Layout/__tests__/layout.spec.js b/packages/website/src/components/Layout/__tests__/layout.spec.tsx
similarity index 93%
rename from packages/website/src/components/Layout/__tests__/layout.spec.js
rename to packages/website/src/components/Layout/__tests__/layout.spec.tsx
index 5ba336f..7b64d71 100644
--- a/packages/website/src/components/Layout/__tests__/layout.spec.js
+++ b/packages/website/src/components/Layout/__tests__/layout.spec.tsx
@@ -13,14 +13,6 @@ jest.mock('next/router', () => ({
   },
 }))
 
-Router.useRouter = () => ({
-  pathname: '',
-  events: {
-    off: jest.fn(),
-    on: jest.fn(),
-  },
-})
-
 describe('Layout', () => {
   beforeAll(() => {
     Math.random = jest.fn().mockReturnValue(1)
diff --git a/packages/website/src/components/Layout/__tests__/stubs.js b/packages/website/src/components/Layout/__tests__/stubs.ts
similarity index 100%
rename from packages/website/src/components/Layout/__tests__/stubs.js
rename to packages/website/src/components/Layout/__tests__/stubs.ts
diff --git a/packages/website/src/components/Layout/index.js b/packages/website/src/components/Layout/index.tsx
similarity index 72%
rename from packages/website/src/components/Layout/index.js
rename to packages/website/src/components/Layout/index.tsx
index bcb1c24..6ea200c 100644
--- a/packages/website/src/components/Layout/index.js
+++ b/packages/website/src/components/Layout/index.tsx
@@ -1,14 +1,11 @@
-// @flow
-import * as React from 'react'
-
 import { IconDefinitions } from 'src/components/Icon'
 import Header from './Header'
 import Hamburger from './Hamburger'
 import Footer from './Footer'
 
-type Props = { children: React.Node }
+type Props = { children: JSX.Element[] | JSX.Element }
 
-const Layout = (props: Props): React.Node => (
+const Layout = (props: Props) => (
   <>
     <IconDefinitions />
     <Hamburger />
diff --git a/packages/website/src/components/SEO/__tests__/__snapshots__/seo.spec.js.snap b/packages/website/src/components/SEO/__tests__/__snapshots__/seo.spec.js.snap
deleted file mode 100644
index 9ebc7be..0000000
--- a/packages/website/src/components/SEO/__tests__/__snapshots__/seo.spec.js.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button should render the component 1`] = `null`;
-
-exports[`Button should render the component with pageTitle and pageUrl 1`] = `null`;
diff --git a/packages/website/src/components/SEO/__tests__/__snapshots__/seo.spec.tsx.snap b/packages/website/src/components/SEO/__tests__/__snapshots__/seo.spec.tsx.snap
new file mode 100644
index 0000000..ee053e6
--- /dev/null
+++ b/packages/website/src/components/SEO/__tests__/__snapshots__/seo.spec.tsx.snap
@@ -0,0 +1,325 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SEO should render the component 1`] = `
+<Head>
+  <title>
+    gitmoji | An emoji guide for your commit messages
+  </title>
+  <link
+    href="https://gitmoji.dev"
+    rel="canonical"
+  />
+  <meta
+    content="Carlos Cuesta"
+    name="author"
+  />
+  <meta
+    content="Gitmoji is an emoji guide for your commit messages. Aims to be a standarization cheatshee /t for using emojis on GitHub's commit messages."
+    name="description"
+  />
+  <meta
+    content="width=device-width, initial-scale=1.0"
+    name="viewport"
+  />
+  <meta
+    content="summary"
+    name="twitter:card"
+  />
+  <meta
+    content="gitmoji"
+    name="twitter:title"
+  />
+  <meta
+    content="An emoji guide for your commit messages."
+    name="twitter:description"
+  />
+  <meta
+    content="https://gitmoji.dev/static/gitmoji.gif"
+    name="twitter:image"
+  />
+  <meta
+    content="@crloscuesta"
+    name="twitter:creator"
+  />
+  <meta
+    content="https://gitmoji.dev"
+    name="twitter:url"
+  />
+  <meta
+    content="gitmoji"
+    property="og:title"
+  />
+  <meta
+    content="An emoji guide for your commit messages."
+    name="og:description"
+  />
+  <meta
+    content="https://gitmoji.dev/static/gitmoji.gif"
+    property="og:image"
+  />
+  <meta
+    content="https://gitmoji.dev"
+    name="og:url"
+  />
+  <meta
+    content="index, follow"
+    name="robots"
+  />
+  <link
+    href="/static/apple-icon-57x57.png"
+    rel="apple-touch-icon"
+    sizes="57x57"
+  />
+  <link
+    href="/static/apple-icon-60x60.png"
+    rel="apple-touch-icon"
+    sizes="60x60"
+  />
+  <link
+    href="/static/apple-icon-72x72.png"
+    rel="apple-touch-icon"
+    sizes="72x72"
+  />
+  <link
+    href="/static/apple-icon-76x76.png"
+    rel="apple-touch-icon"
+    sizes="76x76"
+  />
+  <link
+    href="/static/apple-icon-114x114.png"
+    rel="apple-touch-icon"
+    sizes="114x114"
+  />
+  <link
+    href="/static/apple-icon-120x120.png"
+    rel="apple-touch-icon"
+    sizes="120x120"
+  />
+  <link
+    href="/static/apple-icon-144x144.png"
+    rel="apple-touch-icon"
+    sizes="144x144"
+  />
+  <link
+    href="/static/apple-icon-152x152.png"
+    rel="apple-touch-icon"
+    sizes="152x152"
+  />
+  <link
+    href="/static/apple-icon-180x180.png"
+    rel="apple-touch-icon"
+    sizes="180x180"
+  />
+  <link
+    href="/static/android-icon-192x192.png"
+    rel="icon"
+    sizes="192x192"
+    type="image/png"
+  />
+  <link
+    href="/static/favicon-32x32.png"
+    rel="icon"
+    sizes="32x32"
+    type="image/png"
+  />
+  <link
+    href="/static/favicon-96x96.png"
+    rel="icon"
+    sizes="96x96"
+    type="image/png"
+  />
+  <link
+    href="/static/favicon-16x16.png"
+    rel="icon"
+    sizes="16x16"
+    type="image/png"
+  />
+  <link
+    href="/static/manifest.json"
+    rel="manifest"
+  />
+  <meta
+    content="#FFDD67"
+    name="msapplication-TileColor"
+  />
+  <meta
+    content="/ms-icon-144x144.png"
+    name="msapplication-TileImage"
+  />
+  <meta
+    content="#FFDD67"
+    name="theme-color"
+  />
+  <meta
+    content="78vmlhi_erc-UGybxcGwHyiUtf04wzYExTLa-4LoWio"
+    name="google-site-verification"
+  />
+  <link
+    href="/static/opensearchdescription.xml"
+    rel="search"
+    type="application/opensearchdescription+xml"
+  />
+</Head>
+`;
+
+exports[`SEO should render the component with pageTitle and pageUrl 1`] = `
+<Head>
+  <title>
+    gitmoji | About | An emoji guide for your commit messages
+  </title>
+  <link
+    href="https://gitmoji.dev/about"
+    rel="canonical"
+  />
+  <meta
+    content="Carlos Cuesta"
+    name="author"
+  />
+  <meta
+    content="Gitmoji is an emoji guide for your commit messages. Aims to be a standarization cheatshee /t for using emojis on GitHub's commit messages."
+    name="description"
+  />
+  <meta
+    content="width=device-width, initial-scale=1.0"
+    name="viewport"
+  />
+  <meta
+    content="summary"
+    name="twitter:card"
+  />
+  <meta
+    content="gitmoji"
+    name="twitter:title"
+  />
+  <meta
+    content="An emoji guide for your commit messages."
+    name="twitter:description"
+  />
+  <meta
+    content="https://gitmoji.dev/static/gitmoji.gif"
+    name="twitter:image"
+  />
+  <meta
+    content="@crloscuesta"
+    name="twitter:creator"
+  />
+  <meta
+    content="https://gitmoji.dev"
+    name="twitter:url"
+  />
+  <meta
+    content="gitmoji"
+    property="og:title"
+  />
+  <meta
+    content="An emoji guide for your commit messages."
+    name="og:description"
+  />
+  <meta
+    content="https://gitmoji.dev/static/gitmoji.gif"
+    property="og:image"
+  />
+  <meta
+    content="https://gitmoji.dev"
+    name="og:url"
+  />
+  <meta
+    content="index, follow"
+    name="robots"
+  />
+  <link
+    href="/static/apple-icon-57x57.png"
+    rel="apple-touch-icon"
+    sizes="57x57"
+  />
+  <link
+    href="/static/apple-icon-60x60.png"
+    rel="apple-touch-icon"
+    sizes="60x60"
+  />
+  <link
+    href="/static/apple-icon-72x72.png"
+    rel="apple-touch-icon"
+    sizes="72x72"
+  />
+  <link
+    href="/static/apple-icon-76x76.png"
+    rel="apple-touch-icon"
+    sizes="76x76"
+  />
+  <link
+    href="/static/apple-icon-114x114.png"
+    rel="apple-touch-icon"
+    sizes="114x114"
+  />
+  <link
+    href="/static/apple-icon-120x120.png"
+    rel="apple-touch-icon"
+    sizes="120x120"
+  />
+  <link
+    href="/static/apple-icon-144x144.png"
+    rel="apple-touch-icon"
+    sizes="144x144"
+  />
+  <link
+    href="/static/apple-icon-152x152.png"
+    rel="apple-touch-icon"
+    sizes="152x152"
+  />
+  <link
+    href="/static/apple-icon-180x180.png"
+    rel="apple-touch-icon"
+    sizes="180x180"
+  />
+  <link
+    href="/static/android-icon-192x192.png"
+    rel="icon"
+    sizes="192x192"
+    type="image/png"
+  />
+  <link
+    href="/static/favicon-32x32.png"
+    rel="icon"
+    sizes="32x32"
+    type="image/png"
+  />
+  <link
+    href="/static/favicon-96x96.png"
+    rel="icon"
+    sizes="96x96"
+    type="image/png"
+  />
+  <link
+    href="/static/favicon-16x16.png"
+    rel="icon"
+    sizes="16x16"
+    type="image/png"
+  />
+  <link
+    href="/static/manifest.json"
+    rel="manifest"
+  />
+  <meta
+    content="#FFDD67"
+    name="msapplication-TileColor"
+  />
+  <meta
+    content="/ms-icon-144x144.png"
+    name="msapplication-TileImage"
+  />
+  <meta
+    content="#FFDD67"
+    name="theme-color"
+  />
+  <meta
+    content="78vmlhi_erc-UGybxcGwHyiUtf04wzYExTLa-4LoWio"
+    name="google-site-verification"
+  />
+  <link
+    href="/static/opensearchdescription.xml"
+    rel="search"
+    type="application/opensearchdescription+xml"
+  />
+</Head>
+`;
diff --git a/packages/website/src/components/SEO/__tests__/seo.spec.js b/packages/website/src/components/SEO/__tests__/seo.spec.tsx
similarity index 87%
rename from packages/website/src/components/SEO/__tests__/seo.spec.js
rename to packages/website/src/components/SEO/__tests__/seo.spec.tsx
index 16b9396..2784e59 100644
--- a/packages/website/src/components/SEO/__tests__/seo.spec.js
+++ b/packages/website/src/components/SEO/__tests__/seo.spec.tsx
@@ -3,7 +3,9 @@ import renderer from 'react-test-renderer'
 import SEO from '../index'
 import * as stubs from './stubs'
 
-describe('Button', () => {
+jest.mock('next/head', () => 'Head')
+
+describe('SEO', () => {
   it('should render the component with pageTitle and pageUrl', () => {
     const wrapper = renderer.create(<SEO {...stubs.props} />)
     expect(wrapper).toMatchSnapshot()
diff --git a/packages/website/src/components/SEO/__tests__/stubs.js b/packages/website/src/components/SEO/__tests__/stubs.ts
similarity index 100%
rename from packages/website/src/components/SEO/__tests__/stubs.js
rename to packages/website/src/components/SEO/__tests__/stubs.ts
diff --git a/packages/website/src/components/SEO/index.js b/packages/website/src/components/SEO/index.tsx
similarity index 96%
rename from packages/website/src/components/SEO/index.js
rename to packages/website/src/components/SEO/index.tsx
index 93fc7b4..7c759ec 100644
--- a/packages/website/src/components/SEO/index.js
+++ b/packages/website/src/components/SEO/index.tsx
@@ -1,10 +1,8 @@
-// @flow
-import { type Node } from 'react'
 import Head from 'next/head'
 
-type Props = { pageTitle?: string, pageUrl?: string }
+type Props = { pageTitle?: string; pageUrl?: string }
 
-const SEO = (props: Props): Node => (
+const SEO = (props: Props) => (
   <Head>
     <title>
       {`gitmoji ${
diff --git a/packages/website/src/pages/_app.js b/packages/website/src/pages/_app.tsx
similarity index 61%
rename from packages/website/src/pages/_app.js
rename to packages/website/src/pages/_app.tsx
index 8460d2b..b1c4b43 100644
--- a/packages/website/src/pages/_app.js
+++ b/packages/website/src/pages/_app.tsx
@@ -1,13 +1,10 @@
-// @flow
-import React, { type Node } from 'react'
+import type { AppProps } from 'next/app'
 import { ThemeProvider } from 'next-themes'
 
 import Layout from 'src/components/Layout'
 import 'src/utils/theme/theme.css'
 
-type Props = { Component: typeof React.Component, pageProps: Object }
-
-const App = (props: Props): Node => (
+const App = (props: AppProps) => (
   <ThemeProvider>
     <Layout>
       <props.Component {...props.pageProps} />
diff --git a/packages/website/src/pages/_document.js b/packages/website/src/pages/_document.tsx
similarity index 97%
rename from packages/website/src/pages/_document.js
rename to packages/website/src/pages/_document.tsx
index b2ecb41..ab3e395 100644
--- a/packages/website/src/pages/_document.js
+++ b/packages/website/src/pages/_document.tsx
@@ -1,9 +1,7 @@
-// @flow
-import { type Node } from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 class CustomDocument extends Document {
-  render(): Node {
+  render() {
     return (
       <Html lang="en">
         <Head />
diff --git a/packages/website/src/pages/about.js b/packages/website/src/pages/about.tsx
similarity index 98%
rename from packages/website/src/pages/about.js
rename to packages/website/src/pages/about.tsx
index c376f68..4c56c50 100644
--- a/packages/website/src/pages/about.js
+++ b/packages/website/src/pages/about.tsx
@@ -1,12 +1,10 @@
-// @flow
-import { type Node } from 'react'
 import Link from 'next/link'
 
 import CarbonAd from 'src/components/CarbonAd'
 import Button from 'src/components/Button'
 import SEO from 'src/components/SEO'
 
-const About = (): Node => (
+const About = () => (
   <>
     <SEO pageTitle="About" pageUrl="/about" />
     <main>
diff --git a/packages/website/src/pages/api/gitmojis/index.js b/packages/website/src/pages/api/gitmojis/index.tsx
similarity index 67%
rename from packages/website/src/pages/api/gitmojis/index.js
rename to packages/website/src/pages/api/gitmojis/index.tsx
index b365f90..08b9225 100644
--- a/packages/website/src/pages/api/gitmojis/index.js
+++ b/packages/website/src/pages/api/gitmojis/index.tsx
@@ -1,7 +1,7 @@
-// @flow
+import type { NextApiRequest, NextApiResponse } from 'next'
 import gitmojisData from 'gitmojis'
 
-const gitmojis = (request: { method: string }, response: Object): void => {
+const gitmojis = (request: NextApiRequest, response: NextApiResponse): void => {
   const { method } = request
 
   if (method === 'GET') {
diff --git a/packages/website/src/pages/contributors.js b/packages/website/src/pages/contributors.tsx
similarity index 63%
rename from packages/website/src/pages/contributors.js
rename to packages/website/src/pages/contributors.tsx
index b4dd9ec..668609f 100644
--- a/packages/website/src/pages/contributors.js
+++ b/packages/website/src/pages/contributors.tsx
@@ -1,15 +1,18 @@
-// @flow
-import { type Node } from 'react'
+import { GetStaticProps, InferGetStaticPropsType } from 'next'
 
 import ContributorsList from 'src/components/ContributorsList'
 import CarbonAd from 'src/components/CarbonAd'
 import SEO from 'src/components/SEO'
 
-type Props = {
-  contributors: Array<{ avatar: string, url: string, id: string }>,
+type Contributor = {
+  avatar: string
+  id: string
+  url: string
 }
 
-const Contributors = (props: Props): Node => (
+const Contributors = (
+  props: InferGetStaticPropsType<typeof getStaticProps>
+) => (
   <>
     <SEO pageTitle="Contributors" pageUrl="/contributors" />
 
@@ -24,14 +27,19 @@ const Contributors = (props: Props): Node => (
   </>
 )
 
-export const getStaticProps = async (): Promise<{
-  props: Props,
-  revalidate: number,
-}> => {
+export const getStaticProps: GetStaticProps<{
+  contributors: Contributor[]
+}> = async () => {
+  type GitHubContributor = {
+    avatar_url: string
+    id: string
+    html_url: string
+    login: string
+  }
   const response = await fetch(
     'https://api.github.com/repos/carloscuesta/gitmoji/contributors'
   )
-  const contributors = await response.json()
+  const contributors: GitHubContributor[] = await response.json()
 
   return {
     props: {
diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.tsx
similarity index 81%
rename from packages/website/src/pages/index.js
rename to packages/website/src/pages/index.tsx
index 66d45e6..d24eed1 100644
--- a/packages/website/src/pages/index.js
+++ b/packages/website/src/pages/index.tsx
@@ -1,12 +1,10 @@
-// @flow
-import { type Node } from 'react'
 import gitmojis from 'gitmojis'
 
 import GitmojiList from 'src/components/GitmojiList'
 import CarbonAd from 'src/components/CarbonAd'
 import SEO from 'src/components/SEO'
 
-const Home = (): Node => (
+const Home = () => (
   <>
     <SEO />
     <main>
diff --git a/packages/website/src/pages/related-tools.js b/packages/website/src/pages/related-tools.tsx
similarity index 95%
rename from packages/website/src/pages/related-tools.js
rename to packages/website/src/pages/related-tools.tsx
index fb6c2c5..6a9f0c7 100644
--- a/packages/website/src/pages/related-tools.js
+++ b/packages/website/src/pages/related-tools.tsx
@@ -1,10 +1,7 @@
-// @flow
-import { type Node } from 'react'
-
 import CarbonAd from 'src/components/CarbonAd'
 import SEO from 'src/components/SEO'
 
-const tools: Array<{ name: string, description: string, link: string }> = [
+const tools = [
   {
     name: 'gitmoji-changelog',
     description: 'A changelog generator for gitmoji.',
@@ -84,7 +81,7 @@ const tools: Array<{ name: string, description: string, link: string }> = [
   },
 ]
 
-const RelatedTools = (): Node => (
+const RelatedTools = () => (
   <>
     <SEO pageTitle="Related tools" pageUrl="/related-tools" />
     <main>
diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json
new file mode 100644
index 0000000..a58d128
--- /dev/null
+++ b/packages/website/tsconfig.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "es6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/turbo.json b/turbo.json
index fd5244e..71e3a2a 100644
--- a/turbo.json
+++ b/turbo.json
@@ -7,7 +7,7 @@
     "lint": {
       "outputs": []
     },
-    "flow": {
+    "tscheck": {
       "outputs": []
     },
     "test": {
diff --git a/yarn.lock b/yarn.lock
index 966f2f3..4402db8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -51,7 +51,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.11.1, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.19.6":
+"@babel/core@npm:^7.11.1, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3":
   version: 7.20.5
   resolution: "@babel/core@npm:7.20.5"
   dependencies:
@@ -74,20 +74,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/eslint-parser@npm:^7.19.1":
-  version: 7.19.1
-  resolution: "@babel/eslint-parser@npm:7.19.1"
-  dependencies:
-    "@nicolo-ribaudo/eslint-scope-5-internals": 5.1.1-v1
-    eslint-visitor-keys: ^2.1.0
-    semver: ^6.3.0
-  peerDependencies:
-    "@babel/core": ">=7.11.0"
-    eslint: ^7.5.0 || ^8.0.0
-  checksum: 6d5360f62f25ed097250657deb1bc4c4f51a5f5f2fe456e98cda13727753fdf7a11a109b4cfa03ef0dd6ced3beaeb703b76193c1141e29434d1f91f1bac0517d
-  languageName: node
-  linkType: hard
-
 "@babel/generator@npm:^7.20.5, @babel/generator@npm:^7.7.2":
   version: 7.20.5
   resolution: "@babel/generator@npm:7.20.5"
@@ -272,13 +258,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-plugin-utils@npm:^7.19.0":
-  version: 7.19.0
-  resolution: "@babel/helper-plugin-utils@npm:7.19.0"
-  checksum: eedc996c633c8c207921c26ec2989eae0976336ecd9b9f1ac526498f52b5d136f7cd03c32b6fdf8d46a426f907c142de28592f383c42e5fba1e904cbffa05345
-  languageName: node
-  linkType: hard
-
 "@babel/helper-remap-async-to-generator@npm:^7.18.6":
   version: 7.18.9
   resolution: "@babel/helper-remap-async-to-generator@npm:7.18.9"
@@ -692,17 +671,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-flow@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-syntax-flow@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: abe82062b3eef14de7d2b3c0e4fecf80a3e796ca497e9df616d12dd250968abf71495ee85a955b43a6c827137203f0c409450cf792732ed0d6907c806580ea71
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-syntax-import-assertions@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-syntax-import-assertions@npm:7.18.6"
@@ -736,7 +704,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.18.6, @babel/plugin-syntax-jsx@npm:^7.7.2":
+"@babel/plugin-syntax-jsx@npm:^7.7.2":
   version: 7.18.6
   resolution: "@babel/plugin-syntax-jsx@npm:7.18.6"
   dependencies:
@@ -967,18 +935,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-flow-strip-types@npm:^7.18.6":
-  version: 7.18.9
-  resolution: "@babel/plugin-transform-flow-strip-types@npm:7.18.9"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.9
-    "@babel/plugin-syntax-flow": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: f25fe67b4986a5361539191ccfbf6a84fb6729db6f04c897799e2081c6b96b475cf4e05ab207bd63d7112d5d9465b5efbcc1def7940cba3ba69776a09f7db88d
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-for-of@npm:^7.18.8":
   version: 7.18.8
   resolution: "@babel/plugin-transform-for-of@npm:7.18.8"
@@ -1136,55 +1092,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-display-name@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-transform-react-display-name@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 51c087ab9e41ef71a29335587da28417536c6f816c292e092ffc0e0985d2f032656801d4dd502213ce32481f4ba6c69402993ffa67f0818a07606ff811e4be49
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-react-jsx-development@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-transform-react-jsx-development@npm:7.18.6"
-  dependencies:
-    "@babel/plugin-transform-react-jsx": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: ec9fa65db66f938b75c45e99584367779ac3e0af8afc589187262e1337c7c4205ea312877813ae4df9fb93d766627b8968d74ac2ba702e4883b1dbbe4953ecee
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-react-jsx@npm:^7.18.6":
-  version: 7.19.0
-  resolution: "@babel/plugin-transform-react-jsx@npm:7.19.0"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.18.6
-    "@babel/helper-module-imports": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.19.0
-    "@babel/plugin-syntax-jsx": ^7.18.6
-    "@babel/types": ^7.19.0
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: d7d6f0b8f24b1f6b7cf8062c4e91c59af82489a993e51859bd49c2d62a2d2b77fd40b02a9a1d0e6d874cf4ce56a05fa3564b964587d00c94ebc62593524052ec
-  languageName: node
-  linkType: hard
-
-"@babel/plugin-transform-react-pure-annotations@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.18.6"
-  dependencies:
-    "@babel/helper-annotate-as-pure": ^7.18.6
-    "@babel/helper-plugin-utils": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 97c4873d409088f437f9084d084615948198dd87fc6723ada0e7e29c5a03623c2f3e03df3f52e7e7d4d23be32a08ea00818bff302812e48713c706713bd06219
-  languageName: node
-  linkType: hard
-
 "@babel/plugin-transform-regenerator@npm:^7.18.6":
   version: 7.18.6
   resolution: "@babel/plugin-transform-regenerator@npm:7.18.6"
@@ -1372,19 +1279,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-flow@npm:^7.0.0":
-  version: 7.18.6
-  resolution: "@babel/preset-flow@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
-    "@babel/helper-validator-option": ^7.18.6
-    "@babel/plugin-transform-flow-strip-types": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 9100d4eab3402e6601e361a5b235e46d90cfd389c12db19e2a071e1082ca2a00c04bd47eb185ce68d8979e7c8f3e548cd5d61b86dcd701135468fb929c3aecb6
-  languageName: node
-  linkType: hard
-
 "@babel/preset-modules@npm:^0.1.5":
   version: 0.1.5
   resolution: "@babel/preset-modules@npm:0.1.5"
@@ -1400,22 +1294,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-react@npm:^7.18.6":
-  version: 7.18.6
-  resolution: "@babel/preset-react@npm:7.18.6"
-  dependencies:
-    "@babel/helper-plugin-utils": ^7.18.6
-    "@babel/helper-validator-option": ^7.18.6
-    "@babel/plugin-transform-react-display-name": ^7.18.6
-    "@babel/plugin-transform-react-jsx": ^7.18.6
-    "@babel/plugin-transform-react-jsx-development": ^7.18.6
-    "@babel/plugin-transform-react-pure-annotations": ^7.18.6
-  peerDependencies:
-    "@babel/core": ^7.0.0-0
-  checksum: 540d9cf0a0cc0bb07e6879994e6fb7152f87dafbac880b56b65e2f528134c7ba33e0cd140b58700c77b2ebf4c81fa6468fed0ba391462d75efc7f8c1699bb4c3
-  languageName: node
-  linkType: hard
-
 "@babel/runtime-corejs3@npm:^7.10.2":
   version: 7.20.0
   resolution: "@babel/runtime-corejs3@npm:7.20.0"
@@ -1976,15 +1854,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1":
-  version: 5.1.1-v1
-  resolution: "@nicolo-ribaudo/eslint-scope-5-internals@npm:5.1.1-v1"
-  dependencies:
-    eslint-scope: 5.1.1
-  checksum: f2e3b2d6a6e2d9f163ca22105910c9f850dc4897af0aea3ef0a5886b63d8e1ba6505b71c99cb78a3bba24a09557d601eb21c8dede3f3213753fcfef364eb0e57
-  languageName: node
-  linkType: hard
-
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -2212,6 +2081,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/fetch-mock@npm:^7.3.5":
+  version: 7.3.5
+  resolution: "@types/fetch-mock@npm:7.3.5"
+  checksum: b45cd6ba39d678c9f7557eaed804845408a6c7538293c33b48b7f7adda0feae877bf67968325e419a8df3a06ef572a6dd64a1ff3337b954c07d5527e88915689
+  languageName: node
+  linkType: hard
+
 "@types/glob@npm:^7.1.1":
   version: 7.2.0
   resolution: "@types/glob@npm:7.2.0"
@@ -2256,6 +2132,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/jest@npm:^29.2.4":
+  version: 29.2.4
+  resolution: "@types/jest@npm:29.2.4"
+  dependencies:
+    expect: ^29.0.0
+    pretty-format: ^29.0.0
+  checksum: 9deb4756fe1b438d41ff1aae7d6c216c9e49e5fe60f539f8edb6698ffeb530ff7b25d37e223439b03602ca3a7397c9c2e53e1a39c7bd616353472fce0cc04107
+  languageName: node
+  linkType: hard
+
 "@types/jsdom@npm:^20.0.0":
   version: 20.0.0
   resolution: "@types/jsdom@npm:20.0.0"
@@ -2302,6 +2188,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:*":
+  version: 15.7.5
+  resolution: "@types/prop-types@npm:15.7.5"
+  checksum: 5b43b8b15415e1f298243165f1d44390403bb2bd42e662bca3b5b5633fdd39c938e91b7fce3a9483699db0f7a715d08cef220c121f723a634972fdf596aec980
+  languageName: node
+  linkType: hard
+
+"@types/react-test-renderer@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "@types/react-test-renderer@npm:18.0.0"
+  dependencies:
+    "@types/react": "*"
+  checksum: 6afc938a1d7618d88ab8793e251f0bd5981bf3f08c1b600f74df3f8800b92589ea534dc6dcb7c8d683893fcc740bf8d7843a42bf2dae59785cfe88f004bd7b0b
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:*, @types/react@npm:^18.0.26":
+  version: 18.0.26
+  resolution: "@types/react@npm:18.0.26"
+  dependencies:
+    "@types/prop-types": "*"
+    "@types/scheduler": "*"
+    csstype: ^3.0.2
+  checksum: b62f0ea3cdfa68e106391728325057ad36f1bde7ba2dfae029472c47e01e482bc77c6ba4f1dad59f3f04ee81cb597618ff7c30a33c157c0a20462b6dd6aa2d4d
+  languageName: node
+  linkType: hard
+
 "@types/resolve@npm:1.17.1":
   version: 1.17.1
   resolution: "@types/resolve@npm:1.17.1"
@@ -2311,6 +2224,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/scheduler@npm:*":
+  version: 0.16.2
+  resolution: "@types/scheduler@npm:0.16.2"
+  checksum: b6b4dcfeae6deba2e06a70941860fb1435730576d3689225a421280b7742318d1548b3d22c1f66ab68e414f346a9542f29240bc955b6332c5b11e561077583bc
+  languageName: node
+  linkType: hard
+
 "@types/semver@npm:^7.3.12":
   version: 7.3.13
   resolution: "@types/semver@npm:7.3.13"
@@ -2355,6 +2275,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/eslint-plugin@npm:^5.47.0":
+  version: 5.47.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.47.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": 5.47.0
+    "@typescript-eslint/type-utils": 5.47.0
+    "@typescript-eslint/utils": 5.47.0
+    debug: ^4.3.4
+    ignore: ^5.2.0
+    natural-compare-lite: ^1.4.0
+    regexpp: ^3.2.0
+    semver: ^7.3.7
+    tsutils: ^3.21.0
+  peerDependencies:
+    "@typescript-eslint/parser": ^5.0.0
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: fd867eb2b668d1f476fd28d38c2df2a680bf510a265a6e714b28d8f77e7a37e74e32294b70262a6fd1aec99ddb2fddef0212c862b4465ca4f83bb1172476f6e7
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/parser@npm:^5.42.0":
   version: 5.42.1
   resolution: "@typescript-eslint/parser@npm:5.42.1"
@@ -2372,6 +2315,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/parser@npm:^5.47.0":
+  version: 5.47.0
+  resolution: "@typescript-eslint/parser@npm:5.47.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": 5.47.0
+    "@typescript-eslint/types": 5.47.0
+    "@typescript-eslint/typescript-estree": 5.47.0
+    debug: ^4.3.4
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 5c864ca74b86ca740c73e5b87d90d43bb832b20ba6be0a39089175435771527722a7bf0a8ef7ddbd64b85235fbb7f6dbe8ae55a8bc73c6242f5559d580a8a80c
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/scope-manager@npm:5.41.0":
   version: 5.41.0
   resolution: "@typescript-eslint/scope-manager@npm:5.41.0"
@@ -2392,6 +2352,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/scope-manager@npm:5.47.0":
+  version: 5.47.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.47.0"
+  dependencies:
+    "@typescript-eslint/types": 5.47.0
+    "@typescript-eslint/visitor-keys": 5.47.0
+  checksum: f637268a4cb065a89bb53d72620cc553f8c0d9f00805d6e6aac558cc4d3c08f3329208b0b4d5566d21eb636b080d453e5890221baef0e4bc4d67251f07cccd0d
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:5.47.0":
+  version: 5.47.0
+  resolution: "@typescript-eslint/type-utils@npm:5.47.0"
+  dependencies:
+    "@typescript-eslint/typescript-estree": 5.47.0
+    "@typescript-eslint/utils": 5.47.0
+    debug: ^4.3.4
+    tsutils: ^3.21.0
+  peerDependencies:
+    eslint: "*"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 504b3e883ac02cb8e69957b706e76cb79fa2192aa62702c2a658119f28f8f50f1e668efb62318e85aeda6522e1d948b59382cae4ef3300a3f4eea809a87dec26
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/types@npm:5.41.0":
   version: 5.41.0
   resolution: "@typescript-eslint/types@npm:5.41.0"
@@ -2406,6 +2393,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/types@npm:5.47.0":
+  version: 5.47.0
+  resolution: "@typescript-eslint/types@npm:5.47.0"
+  checksum: 5a856e190cc2103427dbe15ccbbf87238261b5ed0859390a9e55f93afc2057f79dcbb4ac0db4d35787466f5e73f271111d19b2e725cf444af41d30e09678bf7a
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:5.41.0":
   version: 5.41.0
   resolution: "@typescript-eslint/typescript-estree@npm:5.41.0"
@@ -2442,6 +2436,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/typescript-estree@npm:5.47.0":
+  version: 5.47.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.47.0"
+  dependencies:
+    "@typescript-eslint/types": 5.47.0
+    "@typescript-eslint/visitor-keys": 5.47.0
+    debug: ^4.3.4
+    globby: ^11.1.0
+    is-glob: ^4.0.3
+    semver: ^7.3.7
+    tsutils: ^3.21.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: a9adfe8955b7dc9dfa9f43d450b782b83f506eaadae2a13f4e1bbe6c733be446d3edb26910954aec1bdc60d94ecc55c4e200d5b19bb24e6742f02329a4fb3e8c
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:5.47.0":
+  version: 5.47.0
+  resolution: "@typescript-eslint/utils@npm:5.47.0"
+  dependencies:
+    "@types/json-schema": ^7.0.9
+    "@types/semver": ^7.3.12
+    "@typescript-eslint/scope-manager": 5.47.0
+    "@typescript-eslint/types": 5.47.0
+    "@typescript-eslint/typescript-estree": 5.47.0
+    eslint-scope: ^5.1.1
+    eslint-utils: ^3.0.0
+    semver: ^7.3.7
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: f168920eec6f77651107f190b4ecadd82951fe4e3c0321ff660ac7380f4315d5ae30a1b63b4d2818f5e6f007a3f34c5df202619c24ec3a7e2ef25b215ec7b813
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/utils@npm:^5.10.0":
   version: 5.41.0
   resolution: "@typescript-eslint/utils@npm:5.41.0"
@@ -2480,6 +2510,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/visitor-keys@npm:5.47.0":
+  version: 5.47.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.47.0"
+  dependencies:
+    "@typescript-eslint/types": 5.47.0
+    eslint-visitor-keys: ^3.3.0
+  checksum: 2191c079154bdfd1b85b8cd24baa6c0f55c73527c6c8460789483555b4eb5c72e3dc6d1aa4bbac2cf7b86b474588b45682a8deb151e9d903cf72c8f336141f1f
+  languageName: node
+  linkType: hard
+
 "JSV@npm:^4.0.x":
   version: 4.0.2
   resolution: "JSV@npm:4.0.2"
@@ -2501,6 +2541,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"accepts@npm:^1.3.7":
+  version: 1.3.8
+  resolution: "accepts@npm:1.3.8"
+  dependencies:
+    mime-types: ~2.1.34
+    negotiator: 0.6.3
+  checksum: 50c43d32e7b50285ebe84b613ee4a3aa426715a7d131b65b786e2ead0fd76b6b60091b9916d3478a75f11f162628a2139991b6c03ab3f1d9ab7c86075dc8eab4
+  languageName: node
+  linkType: hard
+
 "acorn-globals@npm:^6.0.0":
   version: 6.0.0
   resolution: "acorn-globals@npm:6.0.0"
@@ -3403,6 +3453,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"content-disposition@npm:^0.5.3":
+  version: 0.5.4
+  resolution: "content-disposition@npm:0.5.4"
+  dependencies:
+    safe-buffer: 5.2.1
+  checksum: afb9d545e296a5171d7574fcad634b2fdf698875f4006a9dd04a3e1333880c5c0c98d47b560d01216fb6505a54a2ba6a843ee3a02ec86d7e911e8315255f56c3
+  languageName: node
+  linkType: hard
+
 "convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
   version: 1.8.0
   resolution: "convert-source-map@npm:1.8.0"
@@ -3486,6 +3545,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:^3.0.2":
+  version: 3.1.1
+  resolution: "csstype@npm:3.1.1"
+  checksum: 1f7b4f5fdd955b7444b18ebdddf3f5c699159f13e9cf8ac9027ae4a60ae226aef9bbb14a6e12ca7dba3358b007cee6354b116e720262867c398de6c955ea451d
+  languageName: node
+  linkType: hard
+
 "damerau-levenshtein@npm:^1.0.8":
   version: 1.0.8
   resolution: "damerau-levenshtein@npm:1.0.8"
@@ -3615,7 +3681,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"depd@npm:^1.1.2":
+"depd@npm:^1.1.0, depd@npm:^1.1.2":
   version: 1.1.2
   resolution: "depd@npm:1.1.2"
   checksum: 6b406620d269619852885ce15965272b829df6f409724415e0002c8632ab6a8c0a08ec1f0bd2add05dc7bd7507606f7e2cc034fa24224ab829580040b835ecd9
@@ -3994,20 +4060,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-flowtype@npm:^8.0.3":
-  version: 8.0.3
-  resolution: "eslint-plugin-flowtype@npm:8.0.3"
-  dependencies:
-    lodash: ^4.17.21
-    string-natural-compare: ^3.0.1
-  peerDependencies:
-    "@babel/plugin-syntax-flow": ^7.14.5
-    "@babel/plugin-transform-react-jsx": ^7.14.9
-    eslint: ^8.1.0
-  checksum: 30e63c5357b0b5571f39afed51e59c140084f4aa53c106b1fd04f26da42b268908466daa6020b92943e71409bdaee1c67202515ed9012404d027cc92cb03cefa
-  languageName: node
-  linkType: hard
-
 "eslint-plugin-import@npm:^2.26.0":
   version: 2.26.0
   resolution: "eslint-plugin-import@npm:2.26.0"
@@ -4105,7 +4157,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
+"eslint-scope@npm:^5.1.1":
   version: 5.1.1
   resolution: "eslint-scope@npm:5.1.1"
   dependencies:
@@ -4136,7 +4188,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-visitor-keys@npm:^2.0.0, eslint-visitor-keys@npm:^2.1.0":
+"eslint-visitor-keys@npm:^2.0.0":
   version: 2.1.0
   resolution: "eslint-visitor-keys@npm:2.1.0"
   checksum: e3081d7dd2611a35f0388bbdc2f5da60b3a3c5b8b6e928daffff7391146b434d691577aa95064c8b7faad0b8a680266bcda0a42439c18c717b80e6718d7e267d
@@ -4307,7 +4359,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expect@npm:^29.3.1":
+"expect@npm:^29.0.0, expect@npm:^29.3.1":
   version: 29.3.1
   resolution: "expect@npm:29.3.1"
   dependencies:
@@ -4460,15 +4512,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flow-bin@npm:^0.196.3":
-  version: 0.196.3
-  resolution: "flow-bin@npm:0.196.3"
-  bin:
-    flow: cli.js
-  checksum: 7c3022ffd56d1c4984d94748deb9bf43a2c15189df65982f3768e41dfebc83aa67769c928cfaa3b798c8bd0de7b4939fb5d8d58bd8c4b42a6f816beb6be0a62d
-  languageName: node
-  linkType: hard
-
 "focus-trap-react@npm:^10.0.0":
   version: 10.0.2
   resolution: "focus-trap-react@npm:10.0.2"
@@ -4503,6 +4546,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fresh@npm:^0.5.2":
+  version: 0.5.2
+  resolution: "fresh@npm:0.5.2"
+  checksum: 13ea8b08f91e669a64e3ba3a20eb79d7ca5379a81f1ff7f4310d54e2320645503cc0c78daedc93dfb6191287295f6479544a649c64d8e41a1c0fb0c221552346
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:^9.0.1":
   version: 9.1.0
   resolution: "fs-extra@npm:9.1.0"
@@ -4839,13 +4889,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"harmony-reflect@npm:^1.4.6":
-  version: 1.6.2
-  resolution: "harmony-reflect@npm:1.6.2"
-  checksum: 2e5bae414cd2bfae5476147f9935dc69ee9b9a413206994dcb94c5b3208d4555da3d4313aff6fd14bd9991c1e3ef69cdda5c8fac1eb1d7afc064925839339b8c
-  languageName: node
-  linkType: hard
-
 "has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-bigints@npm:1.0.2"
@@ -5007,15 +5050,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"identity-obj-proxy@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "identity-obj-proxy@npm:3.0.0"
-  dependencies:
-    harmony-reflect: ^1.4.6
-  checksum: 97559f8ea2aeaa1a880d279d8c49550dce01148321e00a2102cda5ddf9ce622fa1d7f3efc7bed63458af78889de888fdaebaf31c816312298bb3fdd0ef8aaf2c
-  languageName: node
-  linkType: hard
-
 "ignore@npm:^5.2.0":
   version: 5.2.0
   resolution: "ignore@npm:5.2.0"
@@ -6291,7 +6325,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.20, lodash@npm:^4.17.21":
+"lodash@npm:^4.17.20":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -6388,6 +6422,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"media-typer@npm:0.3.0":
+  version: 0.3.0
+  resolution: "media-typer@npm:0.3.0"
+  checksum: af1b38516c28ec95d6b0826f6c8f276c58aec391f76be42aa07646b4e39d317723e869700933ca6995b056db4b09a78c92d5440dc23657e6764be5d28874bba1
+  languageName: node
+  linkType: hard
+
+"merge-descriptors@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "merge-descriptors@npm:1.0.1"
+  checksum: 5abc259d2ae25bb06d19ce2b94a21632583c74e2a9109ee1ba7fd147aa7362b380d971e0251069f8b3eb7d48c21ac839e21fa177b335e82c76ec172e30c31a26
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -6402,6 +6450,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"methods@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "methods@npm:1.1.2"
+  checksum: 0917ff4041fa8e2f2fda5425a955fe16ca411591fbd123c0d722fcf02b73971ed6f764d85f0a6f547ce49ee0221ce2c19a5fa692157931cecb422984f1dcd13a
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.5
   resolution: "micromatch@npm:4.0.5"
@@ -6419,7 +6474,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:^2.1.12":
+"mime-types@npm:^2.1.12, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -6428,6 +6483,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mime@npm:^1.3.4":
+  version: 1.6.0
+  resolution: "mime@npm:1.6.0"
+  bin:
+    mime: cli.js
+  checksum: fef25e39263e6d207580bdc629f8872a3f9772c923c7f8c7e793175cee22777bbe8bba95e5d509a40aaa292d8974514ce634ae35769faa45f22d17edda5e8557
+  languageName: node
+  linkType: hard
+
 "mimic-fn@npm:^2.1.0":
   version: 2.1.0
   resolution: "mimic-fn@npm:2.1.0"
@@ -6592,6 +6656,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"natural-compare-lite@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "natural-compare-lite@npm:1.4.0"
+  checksum: 5222ac3986a2b78dd6069ac62cbb52a7bf8ffc90d972ab76dfe7b01892485d229530ed20d0c62e79a6b363a663b273db3bde195a1358ce9e5f779d4453887225
+  languageName: node
+  linkType: hard
+
 "natural-compare@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare@npm:1.4.0"
@@ -6599,7 +6670,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"negotiator@npm:^0.6.3":
+"negotiator@npm:0.6.3, negotiator@npm:^0.6.3":
   version: 0.6.3
   resolution: "negotiator@npm:0.6.3"
   checksum: b8ffeb1e262eff7968fc90a2b6767b04cfd9842582a9d0ece0af7049537266e7b2506dfb1d107a32f06dd849ab2aea834d5830f7f4d0e5cb7d36e1ae55d021d9
@@ -6758,6 +6829,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-mocks-http@npm:^1.12.1":
+  version: 1.12.1
+  resolution: "node-mocks-http@npm:1.12.1"
+  dependencies:
+    accepts: ^1.3.7
+    content-disposition: ^0.5.3
+    depd: ^1.1.0
+    fresh: ^0.5.2
+    merge-descriptors: ^1.0.1
+    methods: ^1.1.2
+    mime: ^1.3.4
+    parseurl: ^1.3.3
+    range-parser: ^1.2.0
+    type-is: ^1.6.18
+  checksum: 80b2ef4967d95e5804f4be5edd13bab06e6cad7c00813e32fd1958189ee8c4c68b833aabcbb2b39194b412b14504a7724e628d74ca5956a83221e0fa838aaf92
+  languageName: node
+  linkType: hard
+
 "node-releases@npm:^2.0.6":
   version: 2.0.6
   resolution: "node-releases@npm:2.0.6"
@@ -7073,6 +7162,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parseurl@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "parseurl@npm:1.3.3"
+  checksum: 407cee8e0a3a4c5cd472559bca8b6a45b82c124e9a4703302326e9ab60fc1081442ada4e02628efef1eb16197ddc7f8822f5a91fd7d7c86b51f530aedb17dfa2
+  languageName: node
+  linkType: hard
+
 "path-exists@npm:^4.0.0":
   version: 4.0.0
   resolution: "path-exists@npm:4.0.0"
@@ -7232,7 +7328,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^29.3.1":
+"pretty-format@npm:^29.0.0, pretty-format@npm:^29.3.1":
   version: 29.3.1
   resolution: "pretty-format@npm:29.3.1"
   dependencies:
@@ -7318,6 +7414,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"range-parser@npm:^1.2.0":
+  version: 1.2.1
+  resolution: "range-parser@npm:1.2.1"
+  checksum: 0a268d4fea508661cf5743dfe3d5f47ce214fd6b7dec1de0da4d669dd4ef3d2144468ebe4179049eff253d9d27e719c88dae55be64f954e80135a0cada804ec9
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-dom@npm:18.2.0"
@@ -7673,7 +7776,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
   checksum: b99c4b41fdd67a6aaf280fcd05e9ffb0813654894223afb78a31f14a19ad220bba8aba1cb14eddce1fcfb037155fe6de4e861784eb434f7d11ed58d1e70dd491
@@ -8020,13 +8123,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string-natural-compare@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "string-natural-compare@npm:3.0.1"
-  checksum: 65910d9995074086e769a68728395effbba9b7186be5b4c16a7fad4f4ef50cae95ca16e3e9086e019cbb636ae8daac9c7b8fe91b5f21865c5c0f26e3c0725406
-  languageName: node
-  linkType: hard
-
 "string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
   version: 4.2.3
   resolution: "string-width@npm:4.2.3"
@@ -8581,6 +8677,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-is@npm:^1.6.18":
+  version: 1.6.18
+  resolution: "type-is@npm:1.6.18"
+  dependencies:
+    media-typer: 0.3.0
+    mime-types: ~2.1.24
+  checksum: 2c8e47675d55f8b4e404bcf529abdf5036c537a04c2b20177bcf78c9e3c1da69da3942b1346e6edb09e823228c0ee656ef0e033765ec39a70d496ef601a0c657
+  languageName: node
+  linkType: hard
+
+"typescript@npm:^4.9.4":
+  version: 4.9.4
+  resolution: "typescript@npm:4.9.4"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: e782fb9e0031cb258a80000f6c13530288c6d63f1177ed43f770533fdc15740d271554cdae86701c1dd2c83b082cea808b07e97fd68b38a172a83dbf9e0d0ef9
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@^4.9.4#~builtin<compat/typescript>":
+  version: 4.9.4
+  resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=ad5954"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 1caaea6cb7f813e64345190fddc4e6c924d0b698ab81189b503763c4a18f7f5501c69362979d36e19c042d89d936443e768a78b0675690b35eb663d19e0eae71
+  languageName: node
+  linkType: hard
+
 "unbox-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "unbox-primitive@npm:1.0.2"
@@ -8796,22 +8922,21 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "website@workspace:packages/website"
   dependencies:
-    "@babel/core": ^7.19.6
-    "@babel/eslint-parser": ^7.19.1
-    "@babel/preset-flow": ^7.0.0
-    "@babel/preset-react": ^7.18.6
+    "@types/fetch-mock": ^7.3.5
+    "@types/jest": ^29.2.4
+    "@types/react": ^18.0.26
+    "@types/react-test-renderer": ^18.0.0
+    "@typescript-eslint/eslint-plugin": ^5.47.0
+    "@typescript-eslint/parser": ^5.47.0
     clipboard: ^2.0.4
     eslint: ^8.26.0
     eslint-config-next: ^13.1.1
     eslint-config-prettier: ^8.5.0
     eslint-import-resolver-alias: ^1.1.2
-    eslint-plugin-flowtype: ^8.0.3
     eslint-plugin-jest: ^27.1.3
     eslint-plugin-react: ^7.31.10
-    flow-bin: ^0.196.3
     focus-trap-react: ^10.0.0
     gitmojis: "workspace:*"
-    identity-obj-proxy: ^3.0.0
     jest: ^29.0.1
     jest-environment-jsdom: ^29.0.1
     jest-fetch-mock: ^3.0.3
@@ -8820,11 +8945,13 @@ __metadata:
     next-pwa: ^5.4.4
     next-sitemap: ^3.1.43
     next-themes: ^0.2.0
+    node-mocks-http: ^1.12.1
     prettier: 2.8.1
     prop-types: ^15.8.1
     react: ^18.2.0
     react-dom: ^18.2.0
     react-test-renderer: ^18.2.0
+    typescript: ^4.9.4
   languageName: unknown
   linkType: soft