Develop to master

.babelrc

@@ -1,8 +1,7 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react",
-    "@babel/preset-flow"
+    "@babel/preset-react"
   ],
   "env": {
     "test": {
@@ -21,10 +20,7 @@
           "./src"
         ],
         "alias": {
-          "$src": "./src",
-          "$assets": "./assets",
-          "$components": "./src/components",
-          "$util": "./src/util"
+          "src": "./src"
         }
       }
     ]

.eslintrc

@@ -1,8 +1,7 @@
 {
   "extends": [
     "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:flowtype/recommended"
+    "plugin:react/recommended"
   ],
   "env": {
     "browser": true,
@@ -32,8 +31,7 @@
     "no-case-declarations": "off"
   },
   "plugins": [
-    "react",
-    "flowtype"
+    "react"
   ],
   "settings": {
     "react": {

config/paths.js

@@ -45,9 +45,9 @@ module.exports = {
   dotenv: resolveApp('.env'),
   appBuild: resolveApp('dist'),
   appHtml: resolveApp('src/index.html'),
-  appIndexJs: resolveApp('src/index.js'),
+  appIndexJs: resolveApp('src/index.ts'),
   appScss: resolveApp('src/main.scss'),
-  silentRenewJs: resolveApp('src/silent_renew.js'),
+  silentRenewJs: resolveApp('src/silent_renew.ts'),
   silentRenewHtml: resolveApp('src/silent_renew.html'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),

config/webpack.config.dev.js

@@ -48,17 +48,30 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'react-dom': '@hot-loader/react-dom',
+      'react-dom': '@hot-loader/react-dom'
     },
     modules: [
-      path.join(__dirname, 'src'),
+      path.resolve(__dirname, '../src'),
       'node_modules',
     ],
-    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
+    extensions: ['.ts', '.tsx', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell Webpack to provide empty mocks for them so importing them works.
+    fallback: {
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+    }
   },
   module: {
     strictExportPresence: true,
     rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
       {
         test: /\.(js|jsx)$/,
         loader: 'babel-loader',
@@ -138,16 +151,7 @@ module.exports = {
       contextRegExp: /moment$/,
     }),
   ],
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  resolve: {
-    fallback: {
-      dgram: 'empty',
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty',
-    }
-  },
+
   // Turn off performance hints during development because we don't do any
   // splitting or minification in interest of speed. These warnings become
   // cumbersome.

config/webpack.config.prod.js

@@ -64,14 +64,27 @@ module.exports = {
   },
   resolve: {
     modules: [
-      path.join(__dirname, 'src'),
+      path.resolve(__dirname, '../src'),
       'node_modules',
     ],
-    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
+    extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx', '.ts', '.tsx'],
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell Webpack to provide empty mocks for them so importing them works.
+    fallback: {
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+    }
   },
   module: {
     strictExportPresence: true,
     rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
       {
         test: /\.(js|jsx)$/,
         loader: 'babel-loader',
@@ -206,15 +219,5 @@ module.exports = {
       },
       extractComments: false,
     })],
-  },
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  resolve: {
-    fallback: {
-      dgram: 'empty',
-      fs: 'empty',
-      net: 'empty',
-      tls: 'empty',
-    }
-  },
+  }
 };

jsconfig.json

@@ -2,10 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "$assets/*": ["./assets/*"],
-      "$components/*": ["./src/components/*"],
-      "$src/*": ["./src/*"],
-      "$util/*": ["./src/util/*"]
+      "src/*": ["./src/*"],
     }
   }
 }

package.json

@@ -2,28 +2,26 @@
   "name": "mvj-ui",
   "version": "1.0.0",
   "description": "City of Helsinki ground rent system UI",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "author": "Jori Lindell <[email protected]>",
   "license": "MIT",
   "nyc": {
     "require": [
       "@babel/register",
-      "./src/test.js"
+      "./src/test.ts"
     ],
     "sourceMap": false,
     "instrument": false
   },
   "scripts": {
-    "flow": "flow; test $? -eq 0 -o $? -eq 2",
-    "flow-typed": "flow-typed install",
     "lint": "eslint src",
     "serve": "webpack serve",
     "start": "node scripts/start.js",
     "compile": "node scripts/compile.js",
-    "precommit": "npm-run-all flow lint",
+    "precommit": "npm-run-all lint",
     "prepush": "npm-run-all test",
-    "test": "mocha --require @babel/register --require src/test.js \"src/**/*spec.js\"",
-    "test:coverage": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text mocha \"src/**/*spec.js\" --exit",
+    "test": "mocha --require @babel/register --require ts-node/register --require tsconfig-paths/register --require src/test.ts \"src/**/*spec.ts\"",
+    "test:coverage": "cross-env NODE_ENV=test nyc --reporter=lcov --reporter=text --require ts-node/register --require tsconfig-paths/register mocha \"src/**/*spec.ts\" --exit",
     "test:watch": "npm run test -- --watch"
   },
   "dependencies": {
@@ -35,6 +33,7 @@
     "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
     "foundation-sites": "6.5.3",
+    "hds-react": "^3.8.0",
     "history": "^4.9.0",
     "leaflet": "^1.5.1",
     "leaflet-draw": "^1.0.4",
@@ -53,7 +52,7 @@
     "react-dom": "16.8.6",
     "react-dual-listbox": "^2.0.0",
     "react-foundation": "^0.9.6",
-    "react-leaflet": "^2.4.0",
+    "react-leaflet": "^2.8.0",
     "react-leaflet-draw": "^0.19.0",
     "react-leaflet-fullscreen": "1.0.1",
     "react-redux": "^7.1.0",
@@ -69,6 +68,7 @@
     "redux-form": "^8.2.5",
     "redux-oidc": "^3.1.4",
     "redux-saga": "^1.0.5",
+    "utility-types": "^3.11.0",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
@@ -77,10 +77,19 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.5.5",
-    "@babel/preset-flow": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "@babel/register": "^7.23.7",
     "@hot-loader/react-dom": "17.0.2",
+    "@istanbuljs/nyc-config-typescript": "^1.0.2",
+    "@types/chai": "^4.3.16",
+    "@types/history": "^5.0.0",
+    "@types/leaflet": "1.5.23",
+    "@types/lodash": "^4.17.1",
+    "@types/mocha": "^10.0.6",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/redux-actions": "^2.6.5",
+    "@types/webpack-env": "^1.18.5",
     "babel-loader": "^9.1.3",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-module-resolver": "^5.0.0",
@@ -96,12 +105,9 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^8.56.0",
-    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-react": "^7.14.3",
     "favicons-webpack-plugin": "^6.0.1",
     "file-loader": "^6.2.0",
-    "flow-bin": "^0.227.0",
-    "flow-typed": "^3.9.0",
     "fs-extra": "^11.2.0",
     "html-webpack-plugin": "^5.6.0",
     "json-loader": "^0.5.7",
@@ -118,6 +124,10 @@
     "sinon-chai": "^3.3.0",
     "style-loader": "^3.3.4",
     "terser-webpack-plugin": "^5.3.10",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.5.4",
     "url": "^0.11.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.9.0",

scripts/start.js

@@ -53,7 +53,7 @@ choosePort(HOST, DEFAULT_PORT)
     }
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
-    const useTypeScript = false;
+    const useTypeScript = true;
     const urls = prepareUrls(protocol, HOST, port);
     const devSocket = {
       warnings: warnings =>