NOJIRA Endra fra flow til typescript (navikt#426)

* NOJIRA Endra fra flow til typescript

Author: tor-nav

.flowconfig

@@ -8,6 +8,8 @@
 *.html text eol=lf
 *.jsx text eol=lf
 *.js text eol=lf
+*.tsx text eol=lf
+*.ts text eol=lf
 *.css text eol=lf
 *.sass text eol=lf
 *.less text eol=lf

.gitattributes

@@ -1,12 +1,12 @@
 # Path to sources
 sonar.sources=packages
-sonar.exclusions=**/assets/**,**/*.spec.jsx
+sonar.exclusions=**/assets/**,**/*.spec.*
 #sonar.inclusions=**/assets/**,**/*.spec.jsx
 
 # Path to tests
 sonar.tests=packages
 #sonar.test.exclusions=
-sonar.test.inclusions=**/*.spec.jsx
+sonar.test.inclusions=**/*.spec.*
 
 # Source encoding
 sonar.sourceEncoding=UTF-8

.sonarcloud.properties

@@ -0,0 +1,2 @@
+declare module '*.svg'
+declare module '*.less'

@types/mock.d.ts

@@ -1,6 +1,6 @@
 module.exports = function(api) {
   api.cache(true);
-  const presets = ['@babel/react', ['@babel/env', { modules: false }], '@babel/flow'];
+  const presets = ['@babel/react', ['@babel/env', { modules: false }], '@babel/typescript'];
   const plugins = ['@babel/plugin-proposal-class-properties'];
 
   return {

babel.config.js

@@ -15,14 +15,13 @@ const config = {
     VERSION: ON,
   },
 
+  parser: '@typescript-eslint/parser',
+
+  plugins: ['@typescript-eslint'],
+
   extends: [
     'airbnb',
-    'plugin:flowtype/recommended',
-  ],
-
-  parser: 'babel-eslint',
-  plugins: [
-    'flowtype',
+    'plugin:@typescript-eslint/recommended',
   ],
 
   parserOptions: {
@@ -38,9 +37,20 @@ const config = {
     'linebreak-style': OFF,
     'import/no-named-as-default': OFF,
     'max-len': [ERROR, 160],
+    'react/require-default-props': OFF,
+    'react/jsx-filename-extension': OFF,
+    'no-undef': OFF,
 
     // TODO (TOR) Ignorert inntil videre grunnet kost/nytte
     'jsx-a11y/anchor-is-valid': OFF,
+    
+    '@typescript-eslint/no-unused-vars': ERROR,
+    '@typescript-eslint/indent': OFF,
+
+    // TODO (TOR) Midlertidig utkommentert
+    '@typescript-eslint/explicit-member-accessibility': OFF,
+    '@typescript-eslint/explicit-function-return-type': OFF,
+    '@typescript-eslint/no-explicit-any': OFF,
   },
 };
 

eslint/eslintrc.common.js

@@ -18,6 +18,7 @@ const config = {
     'no-unused-expressions': OFF,
     'no-debugger': ERROR,
     'no-console': ERROR,
+    'import/no-extraneous-dependencies': OFF,
   },
 };
 

eslint/eslintrc.test.js

@@ -17,6 +17,7 @@ const config = {
   rules: {
     'no-unused-expressions': OFF,
     'no-debugger': WARN,
+    'import/no-extraneous-dependencies': OFF,
   },
 };
 

eslint/eslintrc.test.watch.js

@@ -11,15 +11,16 @@
     "url": "git+https://github.com/navikt/fpsak-frontend.git"
   },
   "scripts": {
-    "test": "mochapack --webpack-config webpack/webpack.test.js \"packages/**/*.spec.jsx\"",
-    "test:watch": "mochapack --watch --webpack-config webpack/webpack.test.watch.js \"packages/**/*.spec.jsx\"",
-    "test:coverage": "nyc mochapack --webpack-config webpack/webpack.test.coverage.js \"packages/**/src/**/*.jsx\"",
+    "test": "mochapack --webpack-config webpack/webpack.test.js \"packages/**/*.spec.*\"",
+    "test:watch": "mochapack --watch --webpack-config webpack/webpack.test.watch.js \"packages/**/*.spec.*\"",
+    "test:coverage": "nyc mochapack --webpack-config webpack/webpack.test.coverage.js \"packages/**/*.spec.*\"",
     "dev": "cross-env NODE_ENV=development node webpack/webpack.dev.server.js --config webpack/webpack.dev.js",
     "build": "cross-env NODE_ENV=production webpack --no-progress --colors --config webpack/webpack.prod.js",
     "postinstall": "yarn run build && yarn test && yarn run less:lint",
     "lerna": "lerna",
     "lerna:publish": "(lerna updated && lerna publish --cd-version patch --yes -m \"publish [ci skip]\") || echo \"Ingen endringer avslutter OK\"",
     "less:lint": "stylelint \"packages/**/*.less\"",
+    "ts-check": "tsc --pretty",
     "doc": "react-asciidoc-generator ./packages/ -o ../../docs/generated/react.adoc --handlebar-template src/docs/asciidoc-template.handlebars",
     "docker:build": "docker build . -t fpfront -f ./docker/Dockerfile --build-arg HTTP_PROXY=$HTTP_PROXY --build-arg HTTPS_PROXY=$HTTP_PROXY",
     "docker:start": "yarn docker:stop; yarn docker:build; docker run -d --env-file=./docker/.env --name fpfront -p 443:9000 fpfront",
@@ -49,10 +50,26 @@
     "@babel/plugin-proposal-class-properties": "^7.3.4",
     "@babel/plugin-transform-runtime": "^7.3.4",
     "@babel/preset-env": "^7.3.4",
-    "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.3.3",
     "@babel/register": "^7.0.0",
     "@commercetools/enzyme-extensions": "^4.0.0",
+    "@types/chai": "^4.1.7",
+    "@types/classnames": "^2.2.7",
+    "@types/enzyme": "^3.9.0",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/history": "^4.7.2",
+    "@types/mocha": "^5.2.6",
+    "@types/prop-types": "^15.7.0",
+    "@types/react": "^16.8.7",
+    "@types/react-collapse": "^4.0.2",
+    "@types/react-dom": "^16.8.2",
+    "@types/react-intl": "^2.3.17",
+    "@types/react-redux": "^7.0.5",
+    "@types/react-router-dom": "^4.3.1",
+    "@types/sinon": "^7.0.10",
+    "@typescript-eslint/eslint-plugin": "^1.4.2",
+    "@typescript-eslint/parser": "^1.4.2",
     "axios-mock-adapter": "^1.16.0",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
@@ -66,13 +83,10 @@
     "eslint-config-import": "^0.13.0",
     "eslint-import-resolver-webpack": "^0.11.0",
     "eslint-loader": "^2.1.2",
-    "eslint-plugin-flowtype": "^3.4.2",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
     "file-loader": "^3.0.1",
-    "flow-bin": "^0.94.0",
-    "flow-typed": "^2.5.1",
     "happypack": "^5.0.1",
     "html-webpack-plugin": "^3.2.0",
     "ignore-styles": "^5.0.1",
@@ -94,6 +108,7 @@
     "sinon-chai": "^3.2.0",
     "style-loader": "^0.23.1",
     "stylelint": "^9.10.1",
+    "typescript": "^3.3.3333",
     "uglifyjs-webpack-plugin": "^2.1.0",
     "wait-on": "^3.2.0",
     "webpack": "^4.29.6",
@@ -115,10 +130,14 @@
     ],
     "extension": [
       ".jsx",
+      ".tsx",
+      ".ts",
       ".es6"
     ],
     "exclude": [
-      "**/*.spec.jsx"
+      "**/*.spec.jsx",
+      "**/*.spec.tsx",
+      "**/*.spec.ts"
     ]
   }
 }

package.json

@@ -1,4 +1,3 @@
-/* @flow */
 import errorHandler from './src/ErrorHandler';
 
 export default errorHandler;

packages/error-api-redux/index.jsx

@@ -1,25 +1,20 @@
-/* @flow */
 import DefaultFormatter from './formatters/DefaultFormatter';
 import RestTimeoutFormatter from './formatters/RestTimeoutFormatter';
 import RestHaltedOrDelayedFormatter from './formatters/RestHaltedOrDelayedFormatter';
 
 const defaultFormatter = new DefaultFormatter();
 const formatters = [new RestTimeoutFormatter(), new RestHaltedOrDelayedFormatter(), defaultFormatter];
 
-type ErrorMessage = {
-  type: string,
-}
-
 class ErrorFormatter {
-  format = (errorMessages: ErrorMessage[], crashMessage?: string) => {
+  format = (errorMessages, crashMessage) => {
     const allErrorMessages = [];
     if (crashMessage) {
       allErrorMessages.push(defaultFormatter.format(crashMessage));
     }
 
     if (errorMessages.length > 0) {
       errorMessages
-        .map((e: ErrorMessage) => {
+        .map((e) => {
           const formatter = formatters.find(f => f.isOfType(e.type));
           return formatter ? formatter.format(e) : undefined;
         })

packages/error-api-redux/src/ErrorFormatter.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 import { expect } from 'chai';
 
 import ErrorFormatter from './ErrorFormatter';

packages/error-api-redux/src/ErrorFormatter.spec.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 import { createSelector } from 'reselect';
 
 import {
@@ -7,8 +6,6 @@ import {
 import ErrorFormatter from './ErrorFormatter';
 
 class ErrorHandler {
-  errorFormatter: ErrorFormatter;
-
   constructor() {
     this.errorFormatter = new ErrorFormatter();
   }

packages/error-api-redux/src/ErrorHandler.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 import { createSelector } from 'reselect';
 
 /* Action types */
@@ -7,12 +6,12 @@ const ADD_CRASH_MESSAGE = 'ADD_CRASH_MESSAGE';
 export const REMOVE_ERROR_MESSAGE = 'REMOVE_ERROR_MESSAGE';
 
 /* Action creators */
-export const addErrorMessage = (data: any) => ({
+export const addErrorMessage = data => ({
   type: ADD_ERROR_MESSAGE,
   data,
 });
 
-export const showCrashMessage = (message: string) => ({
+export const showCrashMessage = message => ({
   type: ADD_CRASH_MESSAGE,
   data: message,
 });
@@ -29,16 +28,7 @@ const initialState = {
   crashMessage: undefined,
 };
 
-type ActionFlowType = {
-  type?: string,
-  data?: any,
-};
-type StateFlowType = {
-  errorMessages: any,
-  crashMessage?: string,
-};
-
-export const errorReducer = (state: StateFlowType = initialState, action: ActionFlowType = {}) => {
+export const errorReducer = (state = initialState, action = {}) => {
   switch (action.type) {
     case ADD_ERROR_MESSAGE:
       return {

packages/error-api-redux/src/errorDuck.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 import { expect } from 'chai';
 
 import {

packages/error-api-redux/src/errorDuck.spec.jsx

@@ -1,16 +1,9 @@
-/* @flow */
 import ErrorMessage from './ErrorMessage';
-import { Formatter } from './Formatter';
 
-type ErrorData = {
-   feilmelding?: string,
-   message?: string,
-}
-
-class DefaultFormatter implements Formatter<ErrorData | string> {
+class DefaultFormatter {
   isOfType = () => true
 
-  format = (errorData: ErrorData | string) => {
+  format = (errorData) => {
     if (typeof errorData === 'string') {
       return ErrorMessage.withMessage(errorData);
     }

packages/error-api-redux/src/formatters/DefaultFormatter.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 import { expect } from 'chai';
 
 import DefaultFormatter from './DefaultFormatter';

packages/error-api-redux/src/formatters/DefaultFormatter.spec.jsx

@@ -1,18 +1,11 @@
-/* @flow */
 class ErrorMessage {
-  text: string
-
-  code: string
-
-  params: any
-
-  static withMessage(message: string) {
+  static withMessage(message) {
     const errorMessage = new ErrorMessage();
     errorMessage.text = message;
     return errorMessage;
   }
 
-  static withMessageCode(messageCode: string, params: any) {
+  static withMessageCode(messageCode, params) {
     const errorMessage = new ErrorMessage();
     errorMessage.code = messageCode;
     errorMessage.params = params;

packages/error-api-redux/src/formatters/ErrorMessage.jsx

@@ -1,27 +1,19 @@
-/* @flow */
 import { dateFormat, timeFormat } from '@fpsak-frontend/utils';
 
 import ErrorEventType from './errorEventType';
 import ErrorMessage from './ErrorMessage';
-import { Formatter } from './Formatter';
 
 const HALTED_PROCESS_TASK_MESSAGE_CODE = 'Rest.ErrorMessage.General';
 const DELAYED_PROCESS_TASK_MESSAGE_CODE = 'Rest.ErrorMessage.DownTime';
 
-type ErrorData = {
-   message: string,
-   status: string,
-   eta: string,
-}
-
 // TODO (TOR) Bør kanskje ligga under rest-api
 
-class RestHaltedOrDelayedFormatter implements Formatter<ErrorData> {
+class RestHaltedOrDelayedFormatter {
   type = ErrorEventType.POLLING_HALTED_OR_DELAYED;
 
-  isOfType = (type: string) => type === this.type;
+  isOfType = type => type === this.type;
 
-  format = (errorData: ErrorData) => {
+  format = (errorData) => {
     const { message, status, eta } = errorData;
     if (status === 'HALTED') {
       return ErrorMessage.withMessageCode(HALTED_PROCESS_TASK_MESSAGE_CODE, { errorDetails: message });

packages/error-api-redux/src/formatters/Formatter.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 import { expect } from 'chai';
 
 import RestHaltedOrDelayedFormatter from './RestHaltedOrDelayedFormatter';