feat: migrating flow to typescript (#47)

This PR convert the code base to Typescript, the changes are the following:

- migrate code base to Typescript (3.4.x)
- enable `eslint` and `@typescript-eslint/eslint-plugin` (warnings still need to be addressed in future pull request
- update relevant dependencies for this PR (linting, etc)
- enable `bundlezise` (it was disabled for some reason)

* refactor: refactoring to typescript

* refactor: migrating to typescript

* refactor: applied feedbacks

* fix: fixed conflicts

* refactored: changed registry

* refactor: updated registry & removed unnecessary lib

* fix: fixed registry ur

* fix: fixed page load

* refactor: refactored footer wip

* refactor: converting to ts..wip

* refactor: converting to ts. wip

* refactor: converting to ts. wip

* refactor: converting to ts

* refactor: converting to ts

* fix: fixed load errors

* refactor: converted files to ts

* refactor: removed flow from tests

* fix: removed transpiled files

* refactor: added ts-ignore

* fix: fixed errors

* fix: fixed types

* fix: fixing jest import -.-

* fix: fixing lint errors

* fix: fixing lint errors

* fix: fixed lint errors

* refactor: removed unnecessary tsconfig's config

* fix: fixing errors

* fix: fixed warning

* fix: fixed test

* refactor: wip

* refactor: wip

* refactor: wip

* fix: fixing tests: wip

* wip

* wip

* fix: fixed search test

* wip

* fix: fixing lint errors

* fix: re-added stylelint

* refactor: updated stylelint script

* fix: fixed: 'styles.js'  were found.

* fix: fixed Search tests

* chore: enable eslint

eslint needs expecitely to know which file has to lint, by default is JS, in this case we need also ts,tsx files eslint . --ext .js,.ts

* chore: vcode eslint settings

* chore: restore eslint previous conf

* chore: clean jest config

* chore: fix eslint warnings

* chore: eslint errors cleared

chore: clean warnings

chore: remove github actions test phases

chore: remove dupe rule

* chore: update handler name

* chore: restore logo from img to url css prop

- loading images with css is more performant than using img html tags, switching this might be a breaking change
- restore no-empty-source seems the linting do not accept false
- update snapshots
- remove @material-ui/styles

* chore: update stylelint linting

* chore: update stylelint linting

* chore: fix a mistake on move tabs to a function

* chore: eanble bundlezie

* chore: use default_executor in circleci

* chore: update readme

tools/dev.server.js

@@ -2,7 +2,7 @@ import webpack from 'webpack';
 import WebpackDevServer from 'webpack-dev-server';
 import config from './webpack.dev.config.babel';
 import ora from 'ora';
-import env from '../src/config/env';
+import env from '../config/env';
 
 const compiler = webpack(config);
 const spinner = ora('Compiler is running...').start();
@@ -30,10 +30,12 @@ new WebpackDevServer(compiler, {
     chunks: true,
     chunkModules: false,
   },
-  proxy: [{
+  proxy: [
+    {
       context: ['/-/verdaccio/logo', '/-/verdaccio/packages', '/-/static/logo.png'],
       target: 'http://localhost:8080',
-  }],
+    },
+  ],
 }).listen(4872, 'localhost', function(err) {
   if (err) {
     return console.log(err);

tools/verdaccio.js

@@ -1,7 +1,3 @@
-/**
- * @prettier
- */
-
 const fs = require('fs');
 const startServer = require('verdaccio').default;
 const yalm = require('js-yaml');

tools/webpack.config.js

@@ -1,8 +1,8 @@
-const env = require('../src/config/env');
+const env = require('../config/env');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 
 module.exports = {
-  entry: `${env.SRC_ROOT}/webui/src/index.js`,
+  entry: `${env.SRC_ROOT}/index.tsx`,
 
   output: {
     path: `${env.APP_ROOT}/static/`,
@@ -12,14 +12,14 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['.js', '.jsx'],
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
   },
 
   plugins: [
     new StyleLintPlugin({
-      files: ['src/webui/**/styles.js'],
+      files: ['src/**/styles.ts'],
       failOnError: false,
-      emitErrors: true
+      emitErrors: true,
     }),
   ],
 
@@ -59,9 +59,9 @@ module.exports = {
         test: /\.(jpe?g|png|gif|svg)$/,
         use: [
           {
-            loader: 'file-loader'
+            loader: 'file-loader',
           },
-        ]
+        ],
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
@@ -75,7 +75,7 @@ module.exports = {
         test: /\.scss$/,
         exclude: /node_modules/,
         loader: `style-loader!css-loader?module&sourceMap=false&localIdentName=[path][name]__[local]--[hash:base64:5]
-        !resolve-url-loader?keepQuery!sass-loader?sourceMap`
+        !resolve-url-loader?keepQuery!sass-loader?sourceMap`,
       },
       {
         test: /\.css$/,
@@ -88,6 +88,13 @@ module.exports = {
           },
         ],
       },
+
+      /* Typescript loader */
+      {
+        test: /\.tsx?$/,
+        use: 'babel-loader',
+        exclude: /node_modules/,
+      },
     ],
   },
 

tools/webpack.dev.config.babel.js

@@ -2,7 +2,7 @@ import webpack from 'webpack';
 import HTMLWebpackPlugin from 'html-webpack-plugin';
 import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
 import baseConfig from './webpack.config';
-import env from '../src/config/env';
+import env from '../config/env';
 import StyleLintPlugin from 'stylelint-webpack-plugin';
 import getPackageJson from './getPackageJson';
 
@@ -17,7 +17,7 @@ export default {
       'react-hot-loader/patch',
       'webpack-dev-server/client?http://localhost:4872',
       'webpack/hot/only-dev-server',
-      `${env.SRC_ROOT}/webui/index.js`,
+      `${env.SRC_ROOT}/index.tsx`,
     ],
   },
 
@@ -34,13 +34,15 @@ export default {
       __APP_VERSION__: `"${getPackageJson('version')}"`,
     }),
     new HTMLWebpackPlugin({
-      __UI_OPTIONS: JSON.stringify({base: '/'}),
+      __UI_OPTIONS: JSON.stringify({
+        base: '/',
+      }),
       title: 'Verdaccio Dev UI',
       scope: '',
       logo: 'https://verdaccio.org/img/logo/symbol/svg/verdaccio-tiny.svg',
       filename: 'index.html',
       verdaccioURL: '//localhost:8080',
-      template: `${env.SRC_ROOT}/webui/template/index.html`,
+      template: `${env.SRC_ROOT}/template/index.html`,
       debug: true,
       inject: true,
     }),
@@ -48,9 +50,9 @@ export default {
     new webpack.NoEmitOnErrorsPlugin(),
     new FriendlyErrorsPlugin(),
     new StyleLintPlugin({
-      files: ['src/webui/**/styles.js'],
+      files: ['src/**/styles.ts'],
       failOnError: false,
-      emitErrors: false
+      emitErrors: false,
     }),
   ],
 };

tools/webpack.prod.config.babel.js

@@ -4,16 +4,12 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const baseConfig = require('./webpack.config');
-const env = require('../src/config/env');
+const env = require('../config/env');
 const _ = require('lodash');
 const merge = require('webpack-merge');
 const getPackageJson = require('./getPackageJson');
 
-const {
-  version,
-  name,
-  license,
-} = getPackageJson('version', 'name', 'license');
+const { version, name, license } = getPackageJson('version', 'name', 'license');
 
 const banner = `
     Name: [name]
@@ -27,7 +23,7 @@ const prodConf = {
   mode: 'production',
 
   entry: {
-    main: ['babel-polyfill', 'whatwg-fetch', `${env.SRC_ROOT}/webui/index.js`],
+    main: ['babel-polyfill', 'whatwg-fetch', `${env.SRC_ROOT}/index.tsx`],
   },
 
   module: {
@@ -51,10 +47,10 @@ const prodConf = {
       logo: 'ToReplaceByLogo',
       primary_color: 'ToReplaceByPrimaryColor',
       filename: 'index.html',
-      favicon: `${env.SRC_ROOT}/webui/template/favicon.ico`,
+      favicon: `${env.SRC_ROOT}/template/favicon.ico`,
       verdaccioURL: 'ToReplaceByVerdaccio',
       version_app: 'ToReplaceByVersion',
-      template: `${env.SRC_ROOT}/webui/template/index.html`,
+      template: `${env.SRC_ROOT}/template/index.html`,
       debug: false,
       inject: true,
     }),
@@ -72,9 +68,8 @@ const prodConf = {
 };
 
 prodConf.module.rules = baseConfig.module.rules
-  .filter((loader) =>
-    Array.isArray(loader.use) && loader.use.find((v) => /css/.test(v.loader.split('-')[0]))
-  ).forEach((loader) => {
+  .filter(loader => Array.isArray(loader.use) && loader.use.find(v => /css/.test(v.loader.split('-')[0])))
+  .forEach(loader => {
     loader.use = [MiniCssExtractPlugin.loader].concat(_.tail(loader.use));
   });