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

src/styles/core.scss

@@ -0,0 +1,22 @@
+@import "variables";
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    color: $text-color;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+strong {
+    font-weight: $font-weight-semibold;
+}

src/styles/global.scss

@@ -0,0 +1,47 @@
+@import "variables";
+@import "mixins";
+
+:global {
+  .container {
+    padding: 15px;
+    flex: 1;
+
+    @include container-size;
+
+    .el-loading-spinner {
+      margin-top: 0 !important;
+    }
+  }
+
+  .content {
+    display: flex;
+  }
+
+  .page-full-height {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    overflow: hidden;
+  }
+
+  .el-button {
+    &:hover, &:focus {
+      color: $primary-color;
+      border-color: $primary-color;
+    }
+  }
+
+  .el-input__inner {
+    &:hover, &:focus {
+      border-color: $primary-color;
+    }
+  }
+
+  .el-dialog__headerbtn:hover .el-dialog__close {
+    color: $eclipse;
+  }
+
+  .package-list-items {
+    width: 100%;
+  }
+}

src/styles/main.scss

@@ -0,0 +1,2 @@
+@import "core";
+@import "global";

src/styles/mixins.scss

@@ -0,0 +1,46 @@
+@import "variables";
+
+@mixin border($direction, $width, $style, $color) {
+    border-#{$direction}: $width $style $color;
+}
+
+@mixin border-bottom-default($color) {
+    border-bottom: 1px solid $color;
+}
+
+@mixin searchBox {
+    width: 100%;
+    font-size: $font-size-md;
+    line-height: $line-height-xl;
+    border: none;
+    @include border-bottom-default($grey-light);
+    outline: none;
+
+    &:focus {
+        @include border-bottom-default($grey);
+    }
+}
+
+@mixin ellipsis {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin fullSize {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+@mixin container-size {
+    @media screen and (min-width: $break-lg) {
+        max-width: $break-lg;
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

src/styles/typeface-roboto.scss

@@ -0,0 +1 @@
+@import '~typeface-roboto';

src/styles/variables.scss

@@ -0,0 +1,65 @@
+// Verdaccio
+// -------------------------
+
+$black:         #000;
+$white:         #fff;
+$red:           #d32f2f;
+$grey:          #808080;
+$grey-light:    #d3d3d3;
+$grey-dark:     #a9a9a9;
+
+$greyChateau:   #95989a;
+$greyGainsboro: #e3e3e3;
+$greyAthens:    #d3dddd;
+
+$eclipse:       #3c3c3c;
+$paleNavy:      #e4e8f1;
+$saltpan:       #f7f8f6;
+$snow:          #f9f9f9;
+
+$nobel-01:      #999999;
+$nobel-02:      #9f9f9f;
+
+// Main colors
+// -------------------------
+
+$primary-color: #4b5e40;
+$seconday-color:#20232a;
+
+// Scaffolding
+// -------------------------
+
+$body-bg:     $white;
+$text-color:  $eclipse;
+
+// Typography
+// -------------------------
+
+ // Font Family from Bootstrap v4 Reboot.css
+$font-family-reboot: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-base: $font-family-reboot;
+
+$font-size-xxl:   26px;
+$font-size-xl:    24px;
+$font-size-lg:    21px;
+$font-size-md:    18px;
+$font-size-base:  16px;
+$font-size-sm:    14px;
+
+$line-height-xl:  30px;
+$line-height-sm:  18px;
+$line-height-xs:  2;
+$line-height-xxs: 1.5;
+
+$font-weight-light:     400;
+$font-weight-regular:   400;
+$font-weight-semibold:  600;
+$font-weight-bold:      700;
+
+$break-sm: 768px;
+$break-lg: 1240px;
+
+// Spacing
+// -------------------------
+
+$space-lg: 30px;