♻️ Migrate website to TypeScript

.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

.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

.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

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}"
   ]
 }

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"
+})

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.

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,32 +70,19 @@
     "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,
       "es2021": true
     },
     "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": {