Merge pull request jaegertracing#359 from jaegertracing/ui-to-ts

Convert from Flow to Typescript for Jaeger-UI
Signed-off-by: vvvprabhakar <vvvprabhakar@gmail.com>

.eslintrc.js

@@ -21,11 +21,26 @@ module.exports = {
   settings: {
     'import/resolver': {
       node: {
-        extensions: ['.js', 'json', '.ts', '.tsx'],
+        extensions: ['.js', 'json', '.tsx'],
       },
     },
   },
-  extends: ['react-app', 'airbnb', 'prettier', 'prettier/flowtype', 'prettier/react'],
+  extends: ['react-app', 'airbnb', 'prettier', 'prettier/react'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: '.',
+      },
+      plugins: ['@typescript-eslint'],
+      rules: {
+        'no-unused-vars': 0,
+        '@typescript-eslint/no-unused-vars': 1,
+      },
+    },
+  ],
   rules: {
     /* general */
     'arrow-parens': [1, 'as-needed'],

.gitignore

@@ -17,3 +17,4 @@ npm-debug.log
 .idea
 yarn-error.log
 lerna-debug.log
+.eslintcache

BUILD.md

@@ -6,6 +6,10 @@
 
 ### Dependencies (dev and otherwise)
 
+#### `eslint-plugin-flowtype`
+
+While, this project does not use [`flow`](https://flow.org/), this ESLint plugin is required because the configuration extends [`react-app`](https://github.com/facebook/create-react-app/blob/master/packages/eslint-config-react-app/package.json#L18), which requires this plugin.
+
 #### `@typescript-eslint/eslint-plugin`
 
 ESLint is being used to lint the repo, as a whole. Within `./packages/plexus` (for now), [`@typescript-eslint/eslint-plugin`](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin) is used to apply ESLint to TypeScript. This application is localized to plexus via configuring `./packages/plexus/.eslintrc.js` for TypeScript, which means the change in settings is only applied to subdirectories of `./packages/plexus`. This package works really well, but there are quite a few issues it doesn't catch. For that, we use the TypeScript compiler.
@@ -41,7 +45,6 @@ This is an amalgamation of linting scripts that run to make sure things are all-
 * `prettier-lint`
 * `tsc-lint`
 * `eslint`
-* `flow`
 * `check-license`
 
 #### `prepare`
@@ -72,10 +75,6 @@ Pretty basic.
 
 Note: This configuration is extended by `./packages/plexus/.eslintrc.js`.
 
-## `.flowconfig`
-
-Being phased out.
-
 ## `.travis.yml`
 
 Currently `./packages/plexus` doesn't have any tests... But, when it does, `.travis.yml` needs to be updated to send coverage info for all `./packages/*` to codecov.io. ([Ticket](https://github.com/jaegertracing/jaeger-ui/issues/340))

CONTRIBUTING.md

@@ -110,7 +110,7 @@ git config --add alias.c "commit -s"
 
 # Style guide
 
-Prefer to use [flow](https://flow.org/) for new code.
+Use [typescript](https://www.typescriptlang.org/) for new code. Check types via `yarn tsc-lint`.
 
 We use [`prettier`](https://prettier.io/), an "opinionated" code formatter. It can be applied to both JavaScript and CSS source files via `yarn prettier`.
 

README.md

@@ -61,7 +61,7 @@ yarn start
 | ------------ | ------------------------------------------------------------------- |
 | `yarn start` | Starts development server with hot reloading and api proxy.         |
 | `yarn test`  | Run all the tests                                                   |
-| `yarn lint`  | Lint the project (eslint, prettier, flow)                           |
+| `yarn lint`  | Lint the project (eslint, prettier, typescript)                     |
 | `yarn build` | Runs production build. Outputs files to `packages/jaeger-ui/build`. |
 
 ## Build