Merge pull request #1155 from verdaccio/refactor-eslint

refactor eslint
2025-04-01 02:42:23 -05:00 · 2019-01-09 09:03:56 +01:00 · 2019-01-09 09:03:56 +01:00 · 078afeb1e8
commit 078afeb1e8
parent d18426eecd b215c74ad3
109 changed files with 1988 additions and 1587 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -5,3 +5,8 @@ static/
 flow-typed/
 website/
 build/
+*.md
+*.lock
+*.yaml
+Dockerfile
+*.rpi
--- a/.eslintrc
+++ b/.eslintrc
@ -1,23 +1,27 @@
 {
  "plugins": [
-    "react",
    "babel",
+    "react",
    "flowtype",
-    "jest"
+    "jest",
+    "verdaccio",
+    "jsx-a11y"
  ],
  "extends": [
    "eslint:recommended",
    "google",
-    "plugin:react/recommended",
    "plugin:flowtype/recommended",
    "plugin:jest/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "plugin:verdaccio/recommended",
+    "plugin:jsx-a11y/recommended"
  ],
  "settings": {
    "react": {
-      "pragma": "React",  // Pragma to use
-      "version": "16.4.2", // React version
-      "flowVersion": "0.81.0" // Flow version
+      "pragma": "React",
+      "version": "16.4.2",
+      "flowVersion": "0.81.0"
    }
  },
  "parser": "babel-eslint",
@ -41,20 +45,84 @@
  "rules": {
    "babel/no-invalid-this": 1,
    "prettier/prettier": ["error", null, "@prettier"],
-    "no-useless-escape": 2,
-    "no-invalid-this": 0,
    "react/no-deprecated": 1,
    "react/jsx-no-target-blank": 1,
-    "handle-callback-err": 2,
-    "no-fallthrough": 2,
-    "no-new-require": 2,
-    "max-len": [2, 160],
+    "react/destructuring-assignment": ["error", "always"],
+    "react/forbid-component-props": ["warn", { "forbid": ["style"] }],
+    "react/no-this-in-sfc": ["warn"],
+    "react/no-unsafe": ["warn"],
+    "react/sort-comp": ["warn", {
+      "order": [
+        "static-methods",
+        "lifecycle",
+        "render",
+        "everything-else",
+        "/^on.+$/",
+        "/^render.+$/"
+      ]
+    }],
+    "react/void-dom-elements-no-children": ["warn"],
+    "react/no-did-mount-set-state": ["error", "disallow-in-func"],
+    "react/jsx-wrap-multilines": ["error",{
+      "declaration": "parens",
+      "assignment": "parens",
+      "return": "parens",
+      "arrow": "parens",
+      "condition": "parens",
+      "logical": "parens",
+      "prop": "parens"
+    }],
+    "react/jsx-boolean-value": ["error", "always"],
+    "react/jsx-closing-tag-location": ["error"],
+    "react/jsx-curly-spacing": ["error", "never"],
+    "react/jsx-equals-spacing": ["error", "never"],
+    "react/jsx-first-prop-new-line": ["error", "multiline-multiprop"],
+    "react/jsx-handler-names": ["warn"],
+    "react/jsx-indent": ["error", 2],
+    "react/jsx-indent-props": ["error", 2],
+    "react/jsx-key": ["error"],
+    "react/jsx-max-depth": ["error", { "max": 2}],
+    "react/jsx-max-props-per-line": ["error", {"maximum": 3, "when": "multiline" }],
+    "react/jsx-no-bind": ["error"],
+    "react/jsx-no-comment-textnodes": ["error"],
+    "react/jsx-no-duplicate-props": ["error"],
+    "react/jsx-no-literals": ["error"],
+    "react/jsx-no-undef": ["error"],
+    "react/jsx-one-expression-per-line": ["error", {"allow": "single-child"}],
+    "react/jsx-curly-brace-presence": ["error", { "props": "always", "children": "ignore" }],
+    "react/jsx-pascal-case": ["error"],
+    "react/jsx-props-no-multi-spaces": ["error"],
+    "react/jsx-sort-default-props": ["error"],
+    "react/jsx-sort-props": ["error"],
+    "react/no-string-refs": ["error"],
+    "react/no-danger-with-children": ["error"],
+    "react/jsx-tag-spacing": ["error", {
+      "closingSlash": "never",
+      "beforeSelfClosing": "always",
+      "afterOpening": "allow-multiline",
+      "beforeClosing": "allow"
+    }],
+    "react/prefer-es6-class": [
+      2,
+      "always"
+    ],
+    "semi": ["error"],
+    "comma-dangle": ["error"],
    "camelcase": 0,
+    "no-useless-escape": ["error"],
+    "no-invalid-this": 0,
+    "handle-callback-err": ["error"],
+    "no-fallthrough": ["error"],
+    "no-new-require": ["error"],
+    "max-len": ["error", 160],
    "require-jsdoc": 0,
    "valid-jsdoc": 0,
    "prefer-spread": 1,
    "prefer-rest-params": 1,
    "linebreak-style": 0,
-    "quote-props":["error", "as-needed"]
+    "quote-props":["error", "as-needed"],
+    "verdaccio/jsx-no-style": ["warn"],
+    "verdaccio/jsx-spread": ["warn"],
+    "jest/expect-expect": 0
  }
 }
--- a/.prettierrc
+++ b/.prettierrc
@ -5,7 +5,7 @@
  "singleQuote": true,
  "requirePragma": true,
  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "jsxBracketSameLine": true,
  "trailingComma": "es5",
  "semi": true,
  "parser": "flow"
--- a/.stylelintrc
+++ b/.stylelintrc
@ -1,8 +1,41 @@
 {
-  "extends": "stylelint-config-recommended-scss",
-  "rules": {
-    "selector-pseudo-class-no-unknown": [true, {
-        "ignorePseudoClasses": ["/global/"]
-    }]
-  }
+  "processors": ["stylelint-processor-styled-components"],
+  "extends": [
+    "stylelint-config-recommended"
+    ],
+   "rules": {
+      "at-rule-no-unknown": true,
+      "block-no-empty": true,
+      "color-named": "always-where-possible",
+      "comment-no-empty": true,
+      "declaration-block-no-duplicate-properties": [
+        true,
+        {
+          ignore: ["consecutive-duplicates-with-different-values"]
+        }
+      ],
+      "declaration-block-no-shorthand-property-overrides": true,
+      "font-family-no-duplicate-names": true,
+      "color-no-invalid-hex": true,
+      "font-family-no-missing-generic-family-keyword": true,
+      "function-calc-no-unspaced-operator": true,
+      "function-linear-gradient-no-nonstandard-direction": true,
+      "keyframe-declaration-no-important": true,
+      "property-no-vendor-prefix": true,
+      "media-feature-name-no-unknown": true,
+      "no-descending-specificity": [true, { "severity": "warning" }],
+      "no-duplicate-at-import-rules": true,
+      "no-duplicate-selectors": true,
+      "no-empty-source": true,
+      "no-extra-semicolons": true,
+      "no-invalid-double-slash-comments": true,
+      "property-no-unknown": true,
+      "selector-pseudo-class-no-unknown": true,
+      "selector-pseudo-element-no-unknown": true,
+      "selector-type-no-unknown": [true, { "severity": "warning" }],
+      "string-no-newline": true,
+      "unit-no-unknown": true
+   }
+
 }
+
--- a/package.json
+++ b/package.json
@ -94,16 +94,18 @@
    "emotion": "9.2.12",
    "enzyme": "3.6.0",
    "enzyme-adapter-react-16": "1.5.0",
-    "eslint": "5.6.0",
-    "eslint-config-google": "0.10.0",
-    "eslint-config-prettier": "3.1.0",
+    "eslint": "5.10.0",
+    "eslint-config-google": "0.11.0",
+    "eslint-config-prettier": "3.3.0",
    "eslint-loader": "2.1.1",
    "eslint-plugin-babel": "5.3.0",
-    "eslint-plugin-flowtype": "2.50.1",
+    "eslint-plugin-flowtype": "3.2.0",
    "eslint-plugin-import": "2.14.0",
-    "eslint-plugin-jest": "21.22.1",
-    "eslint-plugin-prettier": "2.6.2",
+    "eslint-plugin-jest": "22.1.2",
+    "eslint-plugin-jsx-a11y": "6.1.2",
+    "eslint-plugin-prettier": "3.0.0",
    "eslint-plugin-react": "7.11.1",
+    "eslint-plugin-verdaccio": "0.0.5",
    "file-loader": "2.0.0",
    "flow-bin": "0.81.0",
    "flow-runtime": "0.17.0",
@ -140,8 +142,11 @@
    "source-map-loader": "0.2.4",
    "standard-version": "4.4.0",
    "style-loader": "0.23.0",
-    "stylelint": "9.5.0",
+    "stylelint": "9.9.0",
+    "stylelint-config-recommended": "2.1.0",
    "stylelint-config-recommended-scss": "3.2.0",
+    "stylelint-config-styled-components": "0.1.1",
+    "stylelint-processor-styled-components": "1.5.1",
    "stylelint-scss": "3.3.1",
    "stylelint-webpack-plugin": "0.10.5",
    "supertest": "3.3.0",
@ -173,15 +178,16 @@
    "pretest": "npm run code:build",
    "test": "npm run test:unit",
    "test:clean": "npx jest --clearCache",
-    "test:unit": "cross-env NODE_ENV=test BABEL_ENV=test TZ=UTC FORCE_COLOR=1 jest --config ./jest.config.js --maxWorkers 2",
-    "test:functional": "cross-env NODE_ENV=test jest --config ./test/jest.config.functional.js --testPathPattern ./test/functional/index*",
+    "test:unit": "cross-env NODE_ENV=test BABEL_ENV=test TZ=UTC FORCE_COLOR=1 jest --config ./jest.config.js --maxWorkers 2 --passWithNoTests" ,
+    "test:functional": "cross-env NODE_ENV=test jest --config ./test/jest.config.functional.js --testPathPattern ./test/functional/index* --passWithNoTests",
    "test:e2e": "cross-env BABEL_ENV=test jest --config ./test/jest.config.e2e.js",
    "test:size": "bundlesize",
    "test:all": "npm run build:webui && npm run test && npm run test:functional && npm run test:e2e && npm run test:size",
    "pre:ci": "npm run lint && npm run build:webui",
    "coverage:publish": "codecov",
-    "lint": "npm run flow && eslint . && npm run lint:css",
-    "lint:css": "stylelint 'src/**/*.scss' --syntax scss",
+    "lint": "npm run flow && npm run lint:js && npm run lint:css",
+    "lint:js": "eslint .",
+    "lint:css": "stylelint 'src/webui/**/styles.js'",
    "dev:start": "cross-env BABEL_ENV=registry babel-node src/lib/cli",
    "code:build": "cross-env BABEL_ENV=registry babel src/ --out-dir build/ --ignore src/webui/ --copy-files",
    "code:docker-build": "cross-env BABEL_ENV=registry-docker babel src/ --out-dir build/ --ignore src/webui/ --copy-files",
@ -205,14 +211,19 @@
    }
  },
  "lint-staged": {
-    "*.yaml": [
-      "prettier --parser yaml --no-config --single-quote --write",
-      "git add"
-    ],
-    "*.js": [
-      "eslint .",
-      "prettier --write",
-      "git add"
+    "linters": {
+      "*.yaml": [
+        "prettier --parser yaml --no-config --single-quote --write",
+        "git add"
+      ],
+      "*": [
+        "eslint .",
+        "prettier --write",
+        "git add"
+      ]
+    },
+    "ignore": [
+      "*.json"
    ]
  },
  "bundlesize": [
--- a/src/api/endpoint/api/dist-tags.js
+++ b/src/api/endpoint/api/dist-tags.js
@ -17,7 +17,7 @@ export default function(route: Router, auth: IAuth, storage: IStorageHandler) {
      return next('route');
    }

-    let tags = {};
+    const tags = {};
    tags[req.params.tag] = req.body;
    storage.mergeTags(req.params.package, tags, function(err) {
      if (err) {
--- a/src/api/endpoint/api/publish.js
+++ b/src/api/endpoint/api/publish.js
@ -46,7 +46,7 @@ export function publishPackage(storage: IStorageHandler, config: Config) {
     * Write tarball of stream data from package clients.
     */
    const createTarball = function(filename: string, data, cb: Callback) {
-      let stream = storage.addTarball(packageName, filename);
+      const stream = storage.addTarball(packageName, filename);
      stream.on('error', function(err) {
        cb(err);
      });
@ -74,7 +74,7 @@ export function publishPackage(storage: IStorageHandler, config: Config) {
    };

    const afterChange = function(error, okMessage, metadata) {
-      let metadataCopy = { ...metadata };
+      const metadataCopy = { ...metadata };
      const { _attachments, versions } = metadataCopy;

      // old npm behavior, if there is no attachments
--- a/src/api/endpoint/api/search.js
+++ b/src/api/endpoint/api/search.js
@ -56,7 +56,7 @@ export default function(route, auth, storage) {
      res.write('{"_updated":' + 99999);
    }

-    let stream = storage.search(req.query.startkey || 0, { req: req });
+    const stream = storage.search(req.query.startkey || 0, { req: req });

    stream.on('data', function each(pkg) {
      processing_pkgs++;
--- a/src/api/middleware.js
+++ b/src/api/middleware.js
@ -82,7 +82,7 @@ export function expectJson(req: $RequestExtend, res: $ResponseExtend, next: $Nex
 export function antiLoop(config: Config) {
  return function(req: $RequestExtend, res: $ResponseExtend, next: $NextFunctionVer) {
    if (req.headers.via != null) {
-      let arr = req.headers.via.split(',');
+      const arr = req.headers.via.split(',');

      for (let i = 0; i < arr.length; i++) {
        const m = arr[i].match(/\s*(\S+)\s+(\S+)/);
@ -167,12 +167,12 @@ export function log(req: $RequestExtend, res: $ResponseExtend, next: $NextFuncti
  // logger
  req.log = logger.child({ sub: 'in' });

-  let _auth = req.headers.authorization;
+  const _auth = req.headers.authorization;
  if (_.isNil(_auth) === false) {
    req.headers.authorization = '<Classified>';
  }

-  let _cookie = req.headers.cookie;
+  const _cookie = req.headers.cookie;
  if (_.isNil(_cookie) === false) {
    req.headers.cookie = '<Classified>';
  }
@ -195,7 +195,7 @@ export function log(req: $RequestExtend, res: $ResponseExtend, next: $NextFuncti
  });

  let bytesout = 0;
-  let _write = res.write;
+  const _write = res.write;
  res.write = function(buf) {
    bytesout += buf.length;
    /* eslint prefer-rest-params: "off" */
@ -203,9 +203,9 @@ export function log(req: $RequestExtend, res: $ResponseExtend, next: $NextFuncti
  };

  const log = function() {
-    let forwardedFor = req.headers['x-forwarded-for'];
-    let remoteAddress = req.connection.remoteAddress;
-    let remoteIP = forwardedFor ? `${forwardedFor} via ${remoteAddress}` : remoteAddress;
+    const forwardedFor = req.headers['x-forwarded-for'];
+    const remoteAddress = req.connection.remoteAddress;
+    const remoteIP = forwardedFor ? `${forwardedFor} via ${remoteAddress}` : remoteAddress;
    let message = "@{status}, user: @{user}(@{remoteIP}), req: '@{request.method} @{request.url}'";
    if (res._verdaccio_error) {
      message += ', error: @{!error}';
--- a/src/api/web/endpoint/package.js
+++ b/src/api/web/endpoint/package.js
@ -37,7 +37,7 @@ function addPackageWebApi(route: Router, storage: IStorageHandler, auth: IAuth)

      async function processPermissionsPackages(packages) {
        const permissions = [];
-        for (let pkg of packages) {
+        for (const pkg of packages) {
          try {
            if (await checkAllow(pkg.name, req.remote_user)) {
              permissions.push(pkg);
--- a/src/api/web/index.js
+++ b/src/api/web/index.js
@ -62,7 +62,7 @@ module.exports = function(config, auth, storage) {
  router.get('/', function(req, res) {
    const base = combineBaseUrl(getWebProtocol(req.get(HEADERS.FORWARDED_PROTO), req.protocol), req.get('host'), config.url_prefix);

-    let webPage = template
+    const webPage = template
      .replace(/ToReplaceByVerdaccio/g, base)
      .replace(/ToReplaceByTitle/g, _.get(config, 'web.title') ? config.web.title : WEB_TITLE)
      .replace(/ToReplaceByScope/g, _.get(config, 'web.scope') ? config.web.scope : '');
--- a/src/lib/auth.js
+++ b/src/lib/auth.js
@ -128,12 +128,12 @@ class Auth implements IAuth {
  }

  add_user(user: string, password: string, cb: Callback) {
-    let self = this;
-    let plugins = this.plugins.slice(0);
+    const self = this;
+    const plugins = this.plugins.slice(0);
    this.logger.trace({ user }, 'add user @{user}');

    (function next() {
-      let plugin = plugins.shift();
+      const plugin = plugins.shift();
      let method = 'adduser';
      if (_.isFunction(plugin[method]) === false) {
        method = 'add_user';
@ -161,9 +161,9 @@ class Auth implements IAuth {
   * Allow user to access a package.
   */
  allow_access(packageName: string, user: RemoteUser, callback: Callback) {
-    let plugins = this.plugins.slice(0);
+    const plugins = this.plugins.slice(0);
    // $FlowFixMe
-    let pkg = Object.assign({ name: packageName }, getMatchedPackagesSpec(packageName, this.config.packages));
+    const pkg = Object.assign({ name: packageName }, getMatchedPackagesSpec(packageName, this.config.packages));
    const self = this;
    this.logger.trace({ packageName }, 'allow access for @{packageName}');

@ -194,10 +194,10 @@ class Auth implements IAuth {
   * Allow user to publish a package.
   */
  allow_publish(packageName: string, user: string, callback: Callback) {
-    let plugins = this.plugins.slice(0);
+    const plugins = this.plugins.slice(0);
    const self = this;
    // $FlowFixMe
-    let pkg = Object.assign({ name: packageName }, getMatchedPackagesSpec(packageName, this.config.packages));
+    const pkg = Object.assign({ name: packageName }, getMatchedPackagesSpec(packageName, this.config.packages));
    this.logger.trace({ packageName }, 'allow publish for @{packageName}');

    (function next() {
--- a/src/lib/config-utils.js
+++ b/src/lib/config-utils.js
@ -49,7 +49,7 @@ export function uplinkSanityCheck(uplinks: UpLinksConfList, users: any = BLACKLI
  const newUplinks = _.clone(uplinks);
  let newUsers = _.clone(users);

-  for (let uplink in newUplinks) {
+  for (const uplink in newUplinks) {
    if (Object.prototype.hasOwnProperty.call(newUplinks, uplink)) {
      if (_.isNil(newUplinks[uplink].cache)) {
        newUplinks[uplink].cache = true;
@ -73,7 +73,7 @@ export function sanityCheckNames(item: string, users: any) {
 export function sanityCheckUplinksProps(configUpLinks: any) {
  const uplinks = _.clone(configUpLinks);

-  for (let uplink in uplinks) {
+  for (const uplink in uplinks) {
    if (Object.prototype.hasOwnProperty.call(uplinks, uplink)) {
      assert(uplinks[uplink].url, 'CONFIG: no url for uplink: ' + uplink);
      assert(_.isString(uplinks[uplink].url), 'CONFIG: wrong url format for uplink: ' + uplink);
@ -98,7 +98,7 @@ export function hasProxyTo(pkg: string, upLink: string, packages: PackageList):
 }

 export function getMatchedPackagesSpec(pkgName: string, packages: PackageList): MatchedPackage {
-  for (let i in packages) {
+  for (const i in packages) {
    // $FlowFixMe
    if (minimatch.makeRe(i).exec(pkgName)) {
      return packages[i];
@ -114,7 +114,7 @@ export function normalisePackageAccess(packages: PackageList): PackageList {
    normalizedPkgs['**'] = { access: [], publish: [] };
  }

-  for (let pkg in packages) {
+  for (const pkg in packages) {
    if (Object.prototype.hasOwnProperty.call(packages, pkg)) {
      assert(_.isObject(packages[pkg]) && _.isArray(packages[pkg]) === false, `CONFIG: bad "'${pkg}'" package description (object expected)`);
      normalizedPkgs[pkg].access = normalizeUserList(packages[pkg].allow_access, packages[pkg].access);
--- a/src/lib/config.js
+++ b/src/lib/config.js
@ -44,7 +44,7 @@ class Config implements AppConfig {
    this.storage = config.storage;
    this.plugins = config.plugins;

-    for (let configProp in config) {
+    for (const configProp in config) {
      if (self[configProp] == null) {
        self[configProp] = config[configProp];
      }
--- a/src/lib/local-storage.js
+++ b/src/lib/local-storage.js
@ -61,7 +61,7 @@ class LocalStorage implements IStorage {
   * @return {Function}
   */
  removePackage(name: string, callback: Callback) {
-    let storage: any = this._getLocalStorage(name);
+    const storage: any = this._getLocalStorage(name);

    if (_.isNil(storage)) {
      return callback(ErrorCode.getNotFound());
@ -114,7 +114,7 @@ class LocalStorage implements IStorage {
      if (packageInfo.readme !== packageLocalJson.readme) {
        change = true;
      }
-      for (let versionId in packageInfo.versions) {
+      for (const versionId in packageInfo.versions) {
        if (_.isNil(packageLocalJson.versions[versionId])) {
          let version = packageInfo.versions[versionId];

@ -132,7 +132,7 @@ class LocalStorage implements IStorage {

            // we do NOT overwrite any existing records
            if (_.isNil(packageLocalJson._distfiles[filename])) {
-              let hash: DistFile = (packageLocalJson._distfiles[filename] = {
+              const hash: DistFile = (packageLocalJson._distfiles[filename] = {
                url: version.dist.tarball,
                sha: version.dist.shasum,
              });
@ -148,14 +148,14 @@ class LocalStorage implements IStorage {
        }
      }

-      for (let tag in packageInfo[DIST_TAGS]) {
+      for (const tag in packageInfo[DIST_TAGS]) {
        if (!packageLocalJson[DIST_TAGS][tag] || packageLocalJson[DIST_TAGS][tag] !== packageInfo[DIST_TAGS][tag]) {
          change = true;
          packageLocalJson[DIST_TAGS][tag] = packageInfo[DIST_TAGS][tag];
        }
      }

-      for (let up in packageInfo._uplinks) {
+      for (const up in packageInfo._uplinks) {
        if (Object.prototype.hasOwnProperty.call(packageInfo._uplinks, up)) {
          const need_change =
            !isObject(packageLocalJson._uplinks[up]) ||
@ -210,7 +210,7 @@ class LocalStorage implements IStorage {

        // if uploaded tarball has a different shasum, it's very likely that we have some kind of error
        if (isObject(metadata.dist) && _.isString(metadata.dist.tarball)) {
-          let tarball = metadata.dist.tarball.replace(/.*\//, '');
+          const tarball = metadata.dist.tarball.replace(/.*\//, '');

          if (isObject(data._attachments[tarball])) {
            if (_.isNil(data._attachments[tarball].shasum) === false && _.isNil(metadata.dist.shasum) === false) {
@ -220,7 +220,7 @@ class LocalStorage implements IStorage {
              }
            }

-            let currentDate = new Date().toISOString();
+            const currentDate = new Date().toISOString();

            // some old storage do not have this field #740
            if (_.isNil(data.time)) {
@ -264,7 +264,7 @@ class LocalStorage implements IStorage {
      pkgName,
      (data, cb) => {
        /* eslint guard-for-in: 0 */
-        for (let tag: string in tags) {
+        for (const tag: string in tags) {
          // this handle dist-tag rm command
          if (_.isNull(tags[tag])) {
            delete data[DIST_TAGS][tag];
@ -318,14 +318,14 @@ class LocalStorage implements IStorage {
    this._updatePackage(
      name,
      (localData, cb) => {
-        for (let version in localData.versions) {
+        for (const version in localData.versions) {
          if (_.isNil(incomingPkg.versions[version])) {
            this.logger.info({ name: name, version: version }, 'unpublishing @{name}@@{version}');

            delete localData.versions[version];
            delete localData.time[version];

-            for (let file in localData._attachments) {
+            for (const file in localData._attachments) {
              if (localData._attachments[file].version === version) {
                delete localData._attachments[file].version;
              }
--- a/src/lib/logger.js
+++ b/src/lib/logger.js
@ -52,7 +52,7 @@ class VerdaccioRotatingFileStream extends Logger.RotatingFileStream {
 * @param {*} logs list of log configuration
 */
 function setup(logs) {
-  let streams = [];
+  const streams = [];
  if (logs == null) {
    logs = [{ type: 'stdout', format: 'pretty', level: 'http' }];
  }
@ -165,7 +165,7 @@ const levels = {
 };

 let max = 0;
-for (let l in levels) {
+for (const l in levels) {
  if (Object.prototype.hasOwnProperty.call(levels, l)) {
    max = Math.max(max, l.length);
  }
@ -192,9 +192,9 @@ function fillInMsgTemplate(msg, obj, colors) {
      is_error = true;
    }

-    let _ref = name.split('.');
+    const _ref = name.split('.');
    for (let _i = 0; _i < _ref.length; _i++) {
-      let id = _ref[_i];
+      const id = _ref[_i];
      if (isObject(str) || Array.isArray(str)) {
        str = str[id];
      } else {
--- a/src/lib/metadata-utils.js
+++ b/src/lib/metadata-utils.js
@ -20,13 +20,13 @@ import type { Package } from '@verdaccio/types';
 export function mergeVersions(local: Package, up: Package) {
  // copy new versions to a cache
  // NOTE: if a certain version was updated, we can't refresh it reliably
-  for (let i in up.versions) {
+  for (const i in up.versions) {
    if (_.isNil(local.versions[i])) {
      local.versions[i] = up.versions[i];
    }
  }

-  for (let i in up[DIST_TAGS]) {
+  for (const i in up[DIST_TAGS]) {
    if (local[DIST_TAGS][i] !== up[DIST_TAGS][i]) {
      if (!local[DIST_TAGS][i] || semver.lte(local[DIST_TAGS][i], up[DIST_TAGS][i])) {
        local[DIST_TAGS][i] = up[DIST_TAGS][i];
--- a/src/lib/search.js
+++ b/src/lib/search.js
@ -72,7 +72,7 @@ class Search implements IWebSearch {
   * Force a re-index.
   */
  reindex() {
-    let self = this;
+    const self = this;
    this.storage.getLocalDatabase(function(error, packages) {
      if (error) {
        // that function shouldn't produce any
--- a/src/lib/storage-utils.js
+++ b/src/lib/storage-utils.js
@ -101,7 +101,7 @@ export function cleanUpLinksRef(keepUpLinkData: boolean, result: Package): Packa
    propertyToKeep.push('_uplinks');
  }

-  for (let i in result) {
+  for (const i in result) {
    if (propertyToKeep.indexOf(i) === -1) {
      // Remove sections like '_uplinks' from response
      delete result[i];
--- a/src/lib/storage.js
+++ b/src/lib/storage.js
@ -125,10 +125,10 @@ class Storage implements IStorageHandler {
   Used storages: local || uplink (just one)
   */
  getTarball(name: string, filename: string) {
-    let readStream = new ReadTarball();
+    const readStream = new ReadTarball();
    (readStream: any).abort = function() {};

-    let self = this;
+    const self = this;

    // if someone requesting tarball, it means that we should already have some
    // information about it, so fetching package info is unnecessary
@ -143,7 +143,7 @@ class Storage implements IStorageHandler {
      }

      // local reported 404
-      let err404 = err;
+      const err404 = err;
      localStream.abort();
      localStream = null; // we force for garbage collector
      self.localStorage.getPackageMetadata(name, (err, info: Package) => {
@ -180,7 +180,7 @@ class Storage implements IStorageHandler {
    function serveFile(file: DistFile) {
      let uplink: any = null;

-      for (let uplinkId in self.uplinks) {
+      for (const uplinkId in self.uplinks) {
        if (self.uplinks[uplinkId].isUplinkValid(file.url)) {
          uplink = self.uplinks[uplinkId];
        }
@ -205,7 +205,7 @@ class Storage implements IStorageHandler {
      let on_open = function() {
        // prevent it from being called twice
        on_open = function() {};
-        let rstream2 = uplink.fetchTarball(file.url);
+        const rstream2 = uplink.fetchTarball(file.url);
        rstream2.on('error', function(err) {
          if (savestream) {
            savestream.abort();
@ -302,9 +302,9 @@ class Storage implements IStorageHandler {
   * @return {Stream}
   */
  search(startkey: string, options: any) {
-    let self = this;
+    const self = this;
    // stream to write a tarball
-    let stream: any = new Stream.PassThrough({ objectMode: true });
+    const stream: any = new Stream.PassThrough({ objectMode: true });

    async.eachSeries(
      Object.keys(this.uplinks),
@ -314,7 +314,7 @@ class Storage implements IStorageHandler {
          return cb();
        }
        // search by keyword for each uplink
-        let lstream: IUploadTarball = self.uplinks[up_name].search(options);
+        const lstream: IUploadTarball = self.uplinks[up_name].search(options);
        // join streams
        lstream.pipe(
          stream,
@ -338,7 +338,7 @@ class Storage implements IStorageHandler {
      // executed after all series
      function() {
        // attach a local search results
-        let lstream: IReadTarball = self.localStorage.search(startkey, options);
+        const lstream: IReadTarball = self.localStorage.search(startkey, options);
        stream.abort = function() {
          lstream.abort();
        };
@ -361,13 +361,13 @@ class Storage implements IStorageHandler {
   * @param {*} callback
   */
  getLocalDatabase(callback: Callback) {
-    let self = this;
+    const self = this;
    this.localStorage.localData.get((err, locals) => {
      if (err) {
        callback(err);
      }

-      let packages = [];
+      const packages = [];
      const getPackage = function(itemPkg) {
        self.localStorage.getPackageMetadata(locals[itemPkg], function(err, info) {
          if (_.isNil(err)) {
@ -416,7 +416,7 @@ class Storage implements IStorageHandler {
      packageInfo = generatePackageTemplate(name);
    }

-    for (let uplink in this.uplinks) {
+    for (const uplink in this.uplinks) {
      if (hasProxyTo(name, uplink, this.config.packages) && hasToLookIntoUplinks) {
        upLinks.push(this.uplinks[uplink]);
      }
@ -426,7 +426,7 @@ class Storage implements IStorageHandler {
      upLinks,
      (upLink, cb) => {
        const _options = Object.assign({}, options);
-        let upLinkMeta = packageInfo._uplinks[upLink.upname];
+        const upLinkMeta = packageInfo._uplinks[upLink.upname];

        if (isObject(upLinkMeta)) {
          const fetched = upLinkMeta.fetched;
@ -511,7 +511,7 @@ class Storage implements IStorageHandler {
   * @private
   */
  _updateVersionsHiddenUpLink(versions: Versions, upLink: IProxy) {
-    for (let i in versions) {
+    for (const i in versions) {
      if (Object.prototype.hasOwnProperty.call(versions, i)) {
        const version = versions[i];

--- a/src/lib/up-storage.js
+++ b/src/lib/up-storage.js
@ -102,7 +102,7 @@ class ProxyStorage implements IProxy {
    let json;

    if (this._statusCheck() === false) {
-      let streamRead = new Stream.Readable();
+      const streamRead = new Stream.Readable();

      process.nextTick(function() {
        if (cb) {
@ -117,8 +117,8 @@ class ProxyStorage implements IProxy {
      return streamRead;
    }

-    let self = this;
-    let headers = this._setHeaders(options);
+    const self = this;
+    const headers = this._setHeaders(options);

    this._addProxyHeaders(options.req, headers);
    this._overrideWithUplinkConfigHeaders(headers);
@ -140,7 +140,7 @@ class ProxyStorage implements IProxy {
      headers['Content-Type'] = headers['Content-Type'] || HEADERS.JSON;
    }

-    let requestCallback = cb
+    const requestCallback = cb
      ? function(err, res, body) {
          let error;
          const responseLength = err ? 0 : body.length;
@ -373,7 +373,7 @@ class ProxyStorage implements IProxy {

    // add/override headers specified in the config
    /* eslint guard-for-in: 0 */
-    for (let key in this.config.headers) {
+    for (const key in this.config.headers) {
      headers[key] = this.config.headers[key];
    }
  }
@ -499,7 +499,7 @@ class ProxyStorage implements IProxy {
      },
    });

-    let parsePackage = pkg => {
+    const parsePackage = pkg => {
      if (isObject(pkg)) {
        transformStream.emit('data', pkg);
      }
@ -614,7 +614,7 @@ class ProxyStorage implements IProxy {
   */
  _setupProxy(hostname: string, config: UpLinkConf, mainconfig: Config, isHTTPS: boolean) {
    let noProxyList;
-    let proxy_key: string = isHTTPS ? 'https_proxy' : 'http_proxy';
+    const proxy_key: string = isHTTPS ? 'https_proxy' : 'http_proxy';

    // get http_proxy and no_proxy configs
    if (proxy_key in config) {
--- a/src/lib/uplink-util.js
+++ b/src/lib/uplink-util.js
@ -13,7 +13,7 @@ import type { IProxy, ProxyList } from '../../types';
 export function setupUpLinks(config: Config): ProxyList {
  const uplinks: ProxyList = {};

-  for (let uplinkName in config.uplinks) {
+  for (const uplinkName in config.uplinks) {
    if (Object.prototype.hasOwnProperty.call(config.uplinks, uplinkName)) {
      // instance for each up-link definition
      const proxy: IProxy = new ProxyStorage(config.uplinks[uplinkName], config);
@ -27,7 +27,7 @@ export function setupUpLinks(config: Config): ProxyList {
 }

 export function updateVersionsHiddenUpLink(versions: Versions, upLink: IProxy) {
-  for (let i in versions) {
+  for (const i in versions) {
    if (Object.prototype.hasOwnProperty.call(versions, i)) {
      const version = versions[i];

--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@ -137,7 +137,7 @@ export function extractTarballFromUrl(url: string) {
 * @return {String} a filtered package
 */
 export function convertDistRemoteToLocalTarballUrls(pkg: Package, req: $Request, urlPrefix: string | void) {
-  for (let ver in pkg.versions) {
+  for (const ver in pkg.versions) {
    if (Object.prototype.hasOwnProperty.call(pkg.versions, ver)) {
      const distName = pkg.versions[ver].dist;

@ -194,7 +194,7 @@ export function getVersion(pkg: Package, version: any) {

  try {
    version = semver.parse(version, true);
-    for (let versionItem in pkg.versions) {
+    for (const versionItem in pkg.versions) {
      // $FlowFixMe
      if (version.compare(semver.parse(versionItem, true)) === 0) {
        return pkg.versions[versionItem];
@ -277,7 +277,7 @@ export function normalizeDistTags(pkg: Package) {
    }
  }

-  for (let tag in pkg[DIST_TAGS]) {
+  for (const tag in pkg[DIST_TAGS]) {
    if (_.isArray(pkg[DIST_TAGS][tag])) {
      if (pkg[DIST_TAGS][tag].length) {
        // sort array
@ -324,7 +324,7 @@ export function parseInterval(interval: any): number {
  let last_suffix = Infinity;
  interval.split(/\s+/).forEach(function(x) {
    if (!x) return;
-    let m = x.match(/^((0|[1-9][0-9]*)(\.[0-9]+)?)(ms|s|m|h|d|w|M|y|)$/);
+    const m = x.match(/^((0|[1-9][0-9]*)(\.[0-9]+)?)(ms|s|m|h|d|w|M|y|)$/);
    if (!m || parseIntervalTable[m[4]] >= last_suffix || (m[4] === '' && last_suffix !== Infinity)) {
      throw Error('invalid interval: ' + interval);
    }
--- a/src/webui/.eslintrc
+++ b/src/webui/.eslintrc
@ -10,6 +10,7 @@
  },
  "rules": {
    "require-jsdoc": 0,
+    "camelcase": ["error"],
    "no-console": [
      1,
      {
@ -24,14 +25,6 @@
        "vars": "all",
        "args": "all"
      }
-    ],
-    "comma-dangle": 0,
-    "semi": 1,
-    "react/no-danger-with-children": 1,
-    "react/no-string-refs": 1,
-    "react/prefer-es6-class": [
-      2,
-      "always"
    ]
  }
 }
--- a/src/webui/app.js
+++ b/src/webui/app.js
@ -36,15 +36,16 @@ export default class App extends Component {

  // eslint-disable-next-line no-unused-vars
  componentDidUpdate(_, prevState) {
-    if (prevState.isUserLoggedIn !== this.state.isUserLoggedIn) {
+    const { isUserLoggedIn } = this.state;
+    if (prevState.isUserLoggedIn !== isUserLoggedIn) {
      this.loadPackages();
    }
  }

-  loadLogo = async () => {
+    loadLogo = async () => {
    const logoUrl = await logo();
-    this.setState({ 
-      logoUrl 
+    this.setState({
+      logoUrl,
    });
  }

@ -57,7 +58,7 @@ export default class App extends Component {
    } else {
      this.setState({
        user: { username, token },
-        isUserLoggedIn: true
+        isUserLoggedIn: true,
      });
    }
  }
@ -66,13 +67,13 @@ export default class App extends Component {
    try {
      this.req = await API.request('packages', 'GET');
      this.setState({
-        packages: this.req, 
-        isLoading: false
+        packages: this.req,
+        isLoading: false,
      });
    } catch (error) {
      this.handleShowAlertDialog({
        title: 'Warning',
-        message: `Unable to load package list: ${error.message}`
+        message: `Unable to load package list: ${error.message}`,
      });
      this.setLoading(false);
    }
@ -80,7 +81,7 @@ export default class App extends Component {

  setLoading = isLoading => (
    this.setState({
-      isLoading
+      isLoading,
    })
  )

@ -88,10 +89,10 @@ export default class App extends Component {
   * Toggles the login modal
   * Required by: <LoginModal /> <Header />
   */
-  toggleLoginModal = () => {
+  handleToggleLoginModal = () => {
    this.setState((prevState) => ({
      showLoginModal: !prevState.showLoginModal,
-      error: {}
+      error: {},
    }));
  }

@ -99,7 +100,7 @@ export default class App extends Component {
   * handles login
   * Required by: <Header />
   */
-  doLogin = async (usernameValue, passwordValue) => {
+  handleDoLogin = async (usernameValue, passwordValue) => {
    const { username, token, error } = await makeLogin(
      usernameValue,
      passwordValue
@ -114,7 +115,7 @@ export default class App extends Component {
    if (error) {
      this.setState({
        user: {},
-        error
+        error,
      });
    }
  }
@ -126,7 +127,7 @@ export default class App extends Component {
        token,
      },
      isUserLoggedIn: true,  // close login modal after successful login
-      showLoginModal: false  // set isUserLoggedIn to true
+      showLoginModal: false,  // set isUserLoggedIn to true
    });
  }
  /**
@ -138,36 +139,10 @@ export default class App extends Component {
    storage.removeItem('token');
    this.setState({
      user: {},
-      isUserLoggedIn: false
+      isUserLoggedIn: false,
    });
  }

-  renderHeader = () => {
-    const { logoUrl, user, scope } = this.state;
-    return (
-      <Header 
-        logo={logoUrl}
-        username={user.username}
-        toggleLoginModal={this.toggleLoginModal}
-        onLogout={this.handleLogout}
-        scope={scope}
-      />
-    );
-  }
-  
-  renderLoginModal = () => {
-    const { error, showLoginModal } = this.state;
-    return (
-      <LoginModal
-        visibility={showLoginModal}
-        error={error}
-        onChange={this.setUsernameAndPassword}
-        onCancel={this.toggleLoginModal}
-        onSubmit={this.doLogin}
-      />
-    );
-  }
-
  render() {
    const { isLoading, isUserLoggedIn, packages } = this.state;
    return (
@ -187,4 +162,30 @@ export default class App extends Component {
      </Container>
    );
  }
+
+  renderLoginModal = () => {
+    const { error, showLoginModal } = this.state;
+    return (
+      <LoginModal
+        error={error}
+        onCancel={this.handleToggleLoginModal}
+        onChange={this.handleSetUsernameAndPassword}
+        onSubmit={this.handleDoLogin}
+        visibility={showLoginModal}
+      />
+    );
+  }
+
+  renderHeader = () => {
+    const { logoUrl, user, scope } = this.state;
+    return (
+      <Header
+        logo={logoUrl}
+        onLogout={this.handleLogout}
+        onToggleLoginModal={this.handleToggleLoginModal}
+        scope={scope}
+        username={user.username}
+      />
+    );
+  }
 }
--- a/src/webui/components/AutoComplete/index.js
+++ b/src/webui/components/AutoComplete/index.js
@ -19,7 +19,6 @@ const renderInputComponent = (inputProps): Node => {
  const { ref, startAdornment, disableUnderline, onKeyDown, ...others } = inputProps;
  return (
    <InputField
-      fullWidth
      InputProps={{
        inputRef: node => {
          ref(node);
@ -28,6 +27,7 @@ const renderInputComponent = (inputProps): Node => {
        disableUnderline,
        onKeyDown,
      }}
+      fullWidth={true}
      {...others}
    />
  );
@ -39,15 +39,15 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): Node => {
  const matches = match(suggestion.name, query);
  const parts = parse(suggestion.name, matches);
  return (
-    <MenuItem selected={isHighlighted} component="div">
+    <MenuItem component={'div'} selected={isHighlighted}>
      <div>
        {parts.map((part, index) => {
          return part.highlight ? (
-            <span key={String(index)} href={suggestion.link} style={{ fontWeight: fontWeight.semiBold }}>
+            <span href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.semiBold }}>
              {part.text}
            </span>
          ) : (
-            <span key={String(index)} href={suggestion.link} style={{ fontWeight: fontWeight.light }}>
+            <span href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.light }}>
              {part.text}
            </span>
          );
@ -59,7 +59,7 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): Node => {

 const renderMessage = (message): Node => {
  return (
-    <MenuItem selected={false} component="div">
+    <MenuItem component={'div'} selected={false}>
      <div>{message}</div>
    </MenuItem>
  );
@ -96,30 +96,32 @@ const AutoComplete = ({
    onSuggestionsFetchRequested: onSuggestionsFetch,
    onSuggestionsClearRequested: onCleanSuggestions,
  };
+  const inputProps = {
+    value,
+    onChange,
+    placeholder,
+    startAdornment,
+    disableUnderline,
+    color,
+    onKeyDown,
+    onBlur,
+  };
+
+  // this format avoid arrow function eslint rule
+  function renderSuggestionsContainer({ containerProps, children, query }) {
+    return (
+      <Paper {...containerProps} square={true}>
+        {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
+        {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
+        {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
+        {children}
+      </Paper>
+    );
+  }
+
  return (
    <Wrapper>
-      <Autosuggest
-        {...autosuggestProps}
-        inputProps={{
-          value,
-          onChange,
-          placeholder,
-          startAdornment,
-          disableUnderline,
-          color,
-          onKeyDown,
-          onBlur,
-        }}
-        renderSuggestionsContainer={({ containerProps, children, query }) => (
-          <Paper {...containerProps} square>
-            {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
-            {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
-            {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
-            {children}
-          </Paper>
-        )}
-        onSuggestionSelected={onClick}
-      />
+      <Autosuggest {...autosuggestProps} inputProps={inputProps} onSuggestionSelected={onClick} renderSuggestionsContainer={renderSuggestionsContainer} />
    </Wrapper>
  );
 };
--- a/src/webui/components/CopyToClipBoard/index.js
+++ b/src/webui/components/CopyToClipBoard/index.js
@ -29,15 +29,20 @@ const copyToClipBoardUtility = (str: string) => (event: SyntheticEvent<HTMLEleme
  }
 };

-const CopyToClipBoard = ({ text }: IProps): Node => (
-  <ClipBoardCopy>
-    <ClipBoardCopyText>{text}</ClipBoardCopyText>
-    <Tooltip title="Copy to Clipboard" disableFocusListener>
+const CopyToClipBoard = ({ text }: IProps): Node => {
+  const renderToolTipFileCopy = () => (
+    <Tooltip disableFocusListener={true} title={'Copy to Clipboard'}>
      <CopyIcon onClick={copyToClipBoardUtility(text)}>
        <FileCopy />
      </CopyIcon>
    </Tooltip>
-  </ClipBoardCopy>
-);
+  );
+  return (
+    <ClipBoardCopy>
+      <ClipBoardCopyText>{text}</ClipBoardCopyText>
+      {renderToolTipFileCopy()}
+    </ClipBoardCopy>
+  );
+};

 export default CopyToClipBoard;
--- a/src/webui/components/Footer/index.js
+++ b/src/webui/components/Footer/index.js
@ -8,32 +8,49 @@ import type { Element } from 'react';

 import { version } from '../../../../package.json';
 import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';
+import { goToVerdaccioWebsite } from '../../utils/windows.js';
+
+const renderTooltip = () => (
+  <ToolTip>
+    <Earth name={'earth'} size={'md'} />
+    <Flags>
+      <Flag name={'spain'} size={'md'} />
+      <Flag name={'nicaragua'} size={'md'} />
+      <Flag name={'india'} size={'md'} />
+      <Flag name={'brazil'} size={'md'} />
+      <Flag name={'pakistan'} size={'md'} />
+      <Flag name={'china'} size={'md'} />
+      <Flag name={'austria'} size={'md'} />
+    </Flags>
+  </ToolTip>
+);
+const POWERED_LABEL = 'Powered by';
+const MADEWITH_LABEL = ' Made with';
+const ON_LABEL = 'on';
+const HEARTH_EMOJI = '♥';
+
+const renderRight = () => (
+  <Right>
+    {POWERED_LABEL}
+    <Logo img={true} name={'verdaccio'} onClick={goToVerdaccioWebsite} pointer={true} size={'md'} />
+    {`/ ${version}`}
+  </Right>
+);
+
+const renderLeft = () => (
+  <Left>
+    {MADEWITH_LABEL}
+    <Love>{HEARTH_EMOJI}</Love>
+    {ON_LABEL}
+    {renderTooltip()}
+  </Left>
+);

 const Footer = (): Element<Wrapper> => (
  <Wrapper>
    <Inner>
-      <Left>
-        Made with
-        <Love>♥</Love>
-        on
-        <ToolTip>
-          <Earth name="earth" size="md" />
-          <Flags>
-            <Flag name="spain" size="md" />
-            <Flag name="nicaragua" size="md" />
-            <Flag name="india" size="md" />
-            <Flag name="brazil" size="md" />
-            <Flag name="pakistan" size="md" />
-            <Flag name="china" size="md" />
-            <Flag name="austria" size="md" />
-          </Flags>
-        </ToolTip>
-      </Left>
-      <Right>
-        Powered by
-        <Logo name="verdaccio" size="md" pointer img onClick={() => window.open('http://www.verdaccio.org/', '_blank')} />
-        {`/ ${version}`}
-      </Right>
+      {renderLeft()}
+      {renderRight()}
    </Inner>
  </Wrapper>
 );
--- a/src/webui/components/Footer/styles.js
+++ b/src/webui/components/Footer/styles.js
@ -37,7 +37,6 @@ export const Inner = styled.div`

 export const Left = styled.div`
  && {
-    display: flex;
    align-items: center;
    display: none;
    ${mq.medium(css`
@ -61,7 +60,7 @@ export const ToolTip = styled.span`

 export const Earth = styled(Icon)`
  && {
-    padding 0 10px;
+    padding: 0 10px;
  }
 `;

@ -105,4 +104,4 @@ export const Flag = styled(Icon)`
  }
 `;

-export const Logo = styled(Flag)``;
+export const Logo = Flag;
--- a/src/webui/components/Header/index.js
+++ b/src/webui/components/Header/index.js
@ -25,6 +25,7 @@ import Label from '../Label';
 import Search from '../Search';

 import { IProps, IState } from './types';
+import type { ToolTipType } from './types';
 import { Greetings, NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar, LeftSide, RightSide, IconSearchButton, SearchWrapper } from './styles';

 class Header extends Component<IProps, IState> {
@ -39,18 +40,11 @@ class Header extends Component<IProps, IState> {
    super(props);
    this.state = {
      openInfoDialog: false,
-      registryUrl: '',
+      registryUrl: getRegistryURL(),
      showMobileNavBar: false,
    };
  }

-  componentDidMount() {
-    const registryUrl = getRegistryURL();
-    this.setState({
-      registryUrl,
-    });
-  }
-
  /**
   * opens popover menu for logged in user.
   */
@ -91,17 +85,19 @@ class Header extends Component<IProps, IState> {
   * close/open popover menu for logged in users.
   */
  handleToggleLogin = () => {
+    const { onToggleLoginModal } = this.props;
    this.setState(
      {
        anchorEl: null,
      },
-      this.props.toggleLoginModal
+      onToggleLoginModal
    );
  };

  handleToggleMNav = () => {
+    const { showMobileNavBar } = this.state;
    this.setState({
-      showMobileNavBar: !this.state.showMobileNavBar,
+      showMobileNavBar: !showMobileNavBar,
    });
  };

@ -115,7 +111,7 @@ class Header extends Component<IProps, IState> {
    const { withoutSearch = false } = this.props;
    return (
      <LeftSide>
-        <Link to="/" style={{ marginRight: '1em' }}>
+        <Link style={{ marginRight: '1em' }} to={'/'}>
          <Logo />
        </Link>
        {!withoutSearch && (
@ -127,71 +123,94 @@ class Header extends Component<IProps, IState> {
    );
  };

-  renderRightSide = (): Node => {
-    const { username = '', withoutSearch = false } = this.props;
-    const installationLink = 'https://verdaccio.org/docs/en/installation';
-    return (
-      <RightSide>
-        {!withoutSearch && (
-          <Tooltip title="Search packages" disableFocusListener>
-            <IconSearchButton color="inherit" onClick={this.handleToggleMNav}>
-              <IconSearch />
-            </IconSearchButton>
-          </Tooltip>
-        )}
-        <Tooltip title="Documentation" disableFocusListener>
-          <IconButton color="inherit" component={Link} to={installationLink} blank>
+  renderToolTipIcon = (title: string, type: ToolTipType) => {
+    let content;
+    switch (type) {
+      case 'help':
+        content = (
+          <IconButton blank={true} color={'inherit'} component={Link} to={'https://verdaccio.org/docs/en/installation'}>
            <Help />
          </IconButton>
-        </Tooltip>
-        <Tooltip title="Registry Information" disableFocusListener>
-          <IconButton id="header--button-registryInfo" color="inherit" onClick={this.handleOpenRegistryInfoDialog}>
+        );
+        break;
+      case 'info':
+        content = (
+          <IconButton color={'inherit'} id={'header--button-registryInfo'} onClick={this.handleOpenRegistryInfoDialog}>
            <Info />
          </IconButton>
-        </Tooltip>
+        );
+        break;
+      case 'search':
+        content = (
+          <IconSearchButton color={'inherit'} onClick={this.handleToggleMNav}>
+            <IconSearch />
+          </IconSearchButton>
+        );
+        break;
+    }
+    return (
+      <Tooltip disableFocusListener={true} title={title}>
+        {content}
+      </Tooltip>
+    );
+  };
+
+  renderRightSide = (): Node => {
+    const { username = '', withoutSearch = false } = this.props;
+    return (
+      <RightSide>
+        {!withoutSearch && this.renderToolTipIcon('Search packages', 'search')}
+        {this.renderToolTipIcon('Documentation', 'help')}
+        {this.renderToolTipIcon('Registry Information', 'info')}
        {username ? (
          this.renderMenu()
        ) : (
-          <Button id="header--button-login" color="inherit" onClick={this.handleToggleLogin}>
-            Login
+          <Button color={'inherit'} id={'header--button-login'} onClick={this.handleToggleLogin}>
+            {'Login'}
          </Button>
        )}
      </RightSide>
    );
  };

+  renderGreetings = () => {
+    const { username = '' } = this.props;
+    return (
+      <>
+        <Greetings>{`Hi,`}</Greetings>
+        <Label capitalize={true} limit={140} text={username} weight={'bold'} />
+      </>
+    );
+  };
+
  /**
   * render popover menu
   */
  renderMenu = (): Node => {
-    const { onLogout, username = '' } = this.props;
+    const { onLogout } = this.props;
    const { anchorEl } = this.state;
    const open = Boolean(anchorEl);
    return (
      <React.Fragment>
-        <IconButton id="header--button-account" color="inherit" onClick={this.handleLoggedInMenu}>
+        <IconButton color={'inherit'} id={'header--button-account'} onClick={this.handleLoggedInMenu}>
          <AccountCircle />
        </IconButton>
        <Menu
-          id="sidebar-menu"
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
+          id={'sidebar-menu'}
+          onClose={this.handleLoggedInMenuClose}
+          open={open}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
-          }}
-          open={open}
-          onClose={this.handleLoggedInMenuClose}
-        >
-          <MenuItem disabled>
-            <Greetings>{`Hi,`}</Greetings>
-            <Label text={username} limit={140} weight="bold" capitalize />
-          </MenuItem>
-          <MenuItem onClick={onLogout} id="header--button-logout">
-            Logout
+          }}>
+          <MenuItem disabled={true}>{this.renderGreetings()}</MenuItem>
+          <MenuItem id={'header--button-logout'} onClick={onLogout}>
+            {'Logout'}
          </MenuItem>
        </Menu>
      </React.Fragment>
@ -202,7 +221,7 @@ class Header extends Component<IProps, IState> {
    const { scope } = this.props;
    const { openInfoDialog, registryUrl } = this.state;
    return (
-      <RegistryInfoDialog open={openInfoDialog} onClose={this.handleCloseRegistryInfoDialog}>
+      <RegistryInfoDialog onClose={this.handleCloseRegistryInfoDialog} open={openInfoDialog}>
        <div>
          <CopyToClipBoard text={`npm set ${scope} registry ${registryUrl}`} />
          <CopyToClipBoard text={`npm adduser --registry ${registryUrl}`} />
@ -216,7 +235,7 @@ class Header extends Component<IProps, IState> {
    const { withoutSearch = false } = this.props;
    return (
      <div>
-        <NavBar position="static">
+        <NavBar position={'static'}>
          <InnerNavBar>
            {this.renderLeftSide()}
            {this.renderRightSide()}
@ -229,8 +248,8 @@ class Header extends Component<IProps, IState> {
              <InnerMobileNavBar>
                <Search />
              </InnerMobileNavBar>
-              <Button color="inherit" onClick={this.handleDismissMNav}>
-                Cancel
+              <Button color={'inherit'} onClick={this.handleDismissMNav}>
+                {'Cancel'}
              </Button>
            </MobileNavBar>
          )}
--- a/src/webui/components/Header/styles.js
+++ b/src/webui/components/Header/styles.js
@ -70,7 +70,6 @@ export const SearchWrapper = styled.div`
    display: none;
    max-width: 393px;
    width: 100%;
-    display: none;
  }
 `;

--- a/src/webui/components/Header/types.js
+++ b/src/webui/components/Header/types.js
@ -1,19 +1,21 @@
-/**
- * @prettier
- * @flow
- */
-
-export interface IProps {
-  username?: string;
-  onLogout?: Function;
-  toggleLoginModal: Function;
-  scope: string;
-  withoutSearch?: boolean;
-}
-
-export interface IState {
-  anchorEl?: any;
-  openInfoDialog: boolean;
-  registryUrl: string;
-  showMobileNavBar: boolean;
-}
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {
+  username?: string;
+  onLogout?: Function;
+  onToggleLoginModal: Function;
+  scope: string;
+  withoutSearch?: boolean;
+}
+
+export interface IState {
+  anchorEl?: any;
+  openInfoDialog: boolean;
+  registryUrl: string;
+  showMobileNavBar: boolean;
+}
+
+export type ToolTipType = 'search' | 'help' | 'info';
--- a/src/webui/components/Help/index.js
+++ b/src/webui/components/Help/index.js
@ -17,7 +17,7 @@ import { CardStyled as Card, HelpTitle } from './styles';
 function renderHeadingClipboardSegments(title: string, text: string): Node {
  return (
    <Fragment>
-      <Typography variant="body2">{title}</Typography>
+      <Typography variant={'body2'}>{title}</Typography>
      <CopyToClipBoard text={text} />
    </Fragment>
  );
@ -27,21 +27,21 @@ const Help = (): Node => {
  const registryUrl = getRegistryURL();

  return (
-    <Card id="help-card">
+    <Card id={'help-card'}>
      <CardContent>
-        <Typography component="h2" variant="headline" gutterBottom id="help-card__title">
-          No Package Published Yet.
+        <Typography component={'h2'} gutterBottom={true} id={'help-card__title'} variant={'headline'}>
+          {'No Package Published Yet.'}
        </Typography>
-        <HelpTitle color="textSecondary" gutterBottom>
-          To publish your first package just:
+        <HelpTitle color={'textSecondary'} gutterBottom={true}>
+          {'To publish your first package just:'}
        </HelpTitle>
        {renderHeadingClipboardSegments('1. Login', `$ npm adduser --registry ${registryUrl}`)}
        {renderHeadingClipboardSegments('2. Publish', `$ npm publish --registry ${registryUrl}`)}
-        <Typography variant="body2">3. Refresh this page.</Typography>
+        <Typography variant={'body2'}>{'3. Refresh this page.'}</Typography>
      </CardContent>
      <CardActions>
-        <Button href="https://verdaccio.org/docs/en/installation" target="_blank" size="small" color="primary">
-          Learn More
+        <Button color={'primary'} href={'https://verdaccio.org/docs/en/installation'} size={'small'} target={'_blank'}>
+          {'Learn More'}
        </Button>
      </CardActions>
    </Card>
--- a/src/webui/components/Icon/index.js
+++ b/src/webui/components/Icon/index.js
@ -7,7 +7,7 @@ import React from 'react';
 import type { Node } from 'react';
 import capitalize from 'lodash/capitalize';

-import { SVG, Img, ImgWrapper } from './styles';
+import { Svg, Img, ImgWrapper } from './styles';
 import { IProps, IIconsMap } from './types';

 import brazil from './img/brazil.svg';
@ -40,14 +40,14 @@ export const Icons: $Shape<IIconsMap> = {
 const Icon = ({ className, name, size = 'sm', img = false, pointer = false, ...props }: IProps): Node => {
  const title = capitalize(name);
  return img ? (
-    <ImgWrapper className={className} size={size} title={title} pointer={pointer} {...props}>
-      <Img src={Icons[name]} alt={title} />
+    <ImgWrapper className={className} pointer={pointer} size={size} title={title} {...props}>
+      <Img alt={title} src={Icons[name]} />
    </ImgWrapper>
  ) : (
-    <SVG className={className} size={size} pointer={pointer} {...props}>
+    <Svg className={className} pointer={pointer} size={size} {...props}>
      <title>{title}</title>
      <use xlinkHref={`${Icons[name]}#${name}`} />
-    </SVG>
+    </Svg>
  );
 };

--- a/src/webui/components/Icon/styles.js
+++ b/src/webui/components/Icon/styles.js
@ -35,7 +35,7 @@ const commonStyle = ({ size = 'sm', pointer, modifiers }: IProps) => css`
  }
 `;

-export const SVG = styled.svg`
+export const Svg = styled.svg`
  && {
    ${commonStyle};
  }
--- a/src/webui/components/Label/index.js
+++ b/src/webui/components/Label/index.js
@ -18,7 +18,7 @@ const Wrapper = styled.div`

 const Label = ({ text = '', capitalize = false, weight = 'regular', ...props }: IProps): Node => {
  return (
-    <Wrapper weight={weight} capitalize={capitalize} {...props}>
+    <Wrapper capitalize={capitalize} weight={weight} {...props}>
      {text}
    </Wrapper>
  );
--- a/src/webui/components/Loading/index.js
+++ b/src/webui/components/Loading/index.js
@ -14,7 +14,7 @@ import { Wrapper, Badge } from './styles';
 const Loading = (): Node => (
  <Wrapper>
    <Badge>
-      <Logo md />
+      <Logo md={true} />
    </Badge>
    <Spinner />
  </Wrapper>
--- a/src/webui/components/Login/index.js
+++ b/src/webui/components/Login/index.js
@ -19,37 +19,34 @@ export default class LoginModal extends Component {
    visibility: PropTypes.bool,
    error: PropTypes.object,
    onCancel: PropTypes.func,
-    onSubmit: PropTypes.func
+    onSubmit: PropTypes.func,
  };

  static defaultProps = {
-    visibility: true,
    error: {},
    onCancel: () => {},
-    onSubmit: () => {}
+    onSubmit: () => {},
+    visibility: true,
  }

  constructor(props) {
    super(props);
-    this.submitCredentials = this.submitCredentials.bind(this);
-    this.setCredentials = this.setCredentials.bind(this);
-    this.validateCredentials = this.validateCredentials.bind(this);
    this.state = {
      form: {
        username: {
          required: true,
          pristine: true,
          helperText: 'Field required',
-          value: ''
+          value: '',
        },
        password:  {
          required: true,
          pristine: true,
          helperText: 'Field required',
-          value: ''
+          value: '',
        },
      },
-      error: props.error
+      error: props.error,
    };
  }

@ -57,142 +54,187 @@ export default class LoginModal extends Component {
   * set login modal's username and password to current state
   * Required to login
   */
-  setCredentials(name, e) {
+  setCredentials = (name, e) => {
+    const { form } = this.state;
    this.setState({
      form: {
-        ...this.state.form,
+        ...form,
        [name]: {
-          ...this.state.form[name],
+          ...form[name],
          value: e.target.value,
-          pristine: false
-        }
-      }
+          pristine: false,
+        },
+      },
    });
  }

-  validateCredentials(event) {
+  setUsername = (event) => {
+    this.setCredentials('username', event);
+  }
+
+  setPassword = (event) => {
+    this.setCredentials('password', event);
+  }
+
+  validateCredentials = (event) => {
+    const { form } = this.state;
    // prevents default submit behavior
    event.preventDefault();

    this.setState({
-      form: Object.keys(this.state.form).reduce((acc, key) => ({
+      form: Object.keys(form).reduce((acc, key) => ({
        ...acc,
-        ...{ [key]: {...this.state.form[key], pristine: false } }
-      }), {})
+        ...{ [key]: {...form[key], pristine: false } },
+      }), {}),
    }, () => {
-      if (!Object.keys(this.state.form).some(id => !this.state.form[id])) {
+      if (!Object.keys(form).some(id => !form[id])) {
        this.submitCredentials();
      }
    });
  }

-  async submitCredentials() {
-    const { form: { username, password } } = this.state;
-    await this.props.onSubmit(username.value, password.value);
+  submitCredentials = async () => {
+    const { form } = this.state;
+    const { onSubmit } = this.props;
+    await onSubmit(form.username.value, form.password.value);
    // let's wait for API response and then set
    // username and password filed to empty state
    this.setState({
-     form: Object.keys(this.state.form).reduce((acc, key) => ({
+     form: Object.keys(form).reduce((acc, key) => ({
      ...acc,
-      ...{ [key]: {...this.state.form[key], value: "", pristine: true } }
-    }), {})
+      ...{ [key]: {...form[key], value: "", pristine: true } },
+    }), {}),
    });
  }

+  renderErrorMessage(title, description) {
+    return (
+      <span>
+        <div>
+          <strong>
+            {title}
+          </strong>
+        </div>
+        <div>
+          {description}
+        </div>
+      </span>);
+  }
+
+  renderMessage(title, description) {
+    return (
+      <div
+        className={classes.loginErrorMsg}
+        id={"client-snackbar"}>
+        <ErrorIcon className={classes.loginIcon} />
+        {this.renderErrorMessage(title, description)}
+      </div>);
+  }
+
  renderLoginError({ type, title, description } = {}) {
    return type === 'error' && (
      <SnackbarContent
        className={classes.loginError}
-        message={
-          <div
-            id="client-snackbar"
-            className={classes.loginErrorMsg}
-          >
-            <ErrorIcon className={classes.loginIcon} />
-            <span>
-              <div><strong>{title}</strong></div>
-              <div>{description}</div>
-            </span>
-          </div>
-        }
+        message={this.renderMessage(title, description)}
      />
    );
  }

+  renderNameField = () => {
+    const { form: { username } } = this.state;
+    return (
+      <FormControl
+        error={!username.value && !username.pristine}
+        fullWidth={true}
+        required={username.required}
+      >
+        <InputLabel htmlFor={"username"}>{'Username'}</InputLabel>
+        <Input
+          id={"login--form-username"}
+          onChange={this.setUsername}
+          placeholder={"Your username"}
+          value={username.value}
+        />
+        {!username.value && !username.pristine && (
+          <FormHelperText id={"username-error"}>
+            {username.helperText}
+          </FormHelperText>
+        )}
+      </FormControl>
+    );
+  }
+
+  renderPasswordField = () => {
+    const { form: { password } } = this.state;
+    return (
+      <FormControl
+        error={!password.value && !password.pristine}
+        fullWidth={true}
+        required={password.required}
+        style={{ marginTop: '8px' }}
+      >
+        <InputLabel htmlFor={"password"}>{'Password'}</InputLabel>
+        <Input
+          id={"login--form-password"}
+          onChange={this.setPassword}
+          placeholder={"Your strong password"}
+          type={"password"}
+          value={password.value}
+        />
+        {!password.value && !password.pristine && (
+          <FormHelperText id={"password-error"}>
+            {password.helperText}
+          </FormHelperText>
+        )}
+      </FormControl>
+    );
+  }
+
+  renderActions = () => {
+    const { form: { username, password } } = this.state;
+    const { onCancel } = this.props;
+    return (
+      <DialogActions className={"dialog-footer"}>
+        <Button
+          color={"inherit"}
+          id={"login--form-cancel"}
+          onClick={onCancel}
+          type={"button"}
+            >
+          {'Cancel'}
+        </Button>
+        <Button
+          color={"inherit"}
+          disabled={!password.value || !username.value}
+          id={"login--form-submit"}
+          type={"submit"}
+            >
+          {'Login'}
+        </Button>
+      </DialogActions>
+    );
+  }
+
  render() {
    const { visibility, onCancel, error } = this.props;
-    const { form: { username, password } } = this.state;
    return (
-        <Dialog
-          onClose={onCancel}
-          open={visibility}
-          id="login--form-container"
-          maxWidth="xs"
-          fullWidth
+      <Dialog
+        fullWidth={true}
+        id={"login--form-container"}
+        maxWidth={"xs"}
+        onClose={onCancel}
+        open={visibility}
        >
-        <form onSubmit={this.validateCredentials.bind(this)} noValidate>
-          <DialogTitle>Login</DialogTitle>
+        <form noValidate={true} onSubmit={this.validateCredentials}>
+          <DialogTitle>{'Login'}</DialogTitle>
          <DialogContent>
            {this.renderLoginError(error)}
-            <FormControl
-              error={!username.value && !username.pristine}
-              required={username.required}
-              fullWidth
-            >
-              <InputLabel htmlFor="username">Username</InputLabel>
-              <Input
-                id="login--form-username"
-                value={username.value}
-                onChange={this.setCredentials.bind(this, 'username')}
-                placeholder="Your username"
-              />
-              {!username.value && !username.pristine && (
-                <FormHelperText id='username-error'>
-                  {username.helperText}
-                </FormHelperText>
-              )}
-            </FormControl>
-            <FormControl
-              error={!password.value && !password.pristine}
-              required={password.required}
-              style={{ marginTop: '8px' }}
-              fullWidth
-            >
-              <InputLabel htmlFor="password">Password</InputLabel>
-              <Input
-                id="login--form-password"
-                type="password"
-                value={password.value}
-                onChange={this.setCredentials.bind(this, 'password')}
-                placeholder="Your strong password"
-              />
-              {!password.value && !password.pristine && (
-                <FormHelperText id='password-error'>
-                  {password.helperText}
-                </FormHelperText>
-              )}
-            </FormControl>
+            {this.renderNameField()}
+            {this.renderPasswordField()}
          </DialogContent>
-          <DialogActions className="dialog-footer">
-            <Button
-              onClick={onCancel}
-              id="login--form-cancel"
-              color="inherit"
-              type="button"
-            >
-              Cancel
-              </Button>
-            <Button
-              id="login--form-submit"
-              type="submit"
-              color="inherit"
-              disabled={ !password.value || !username.value }
-            >
-              Login
-            </Button>
-          </DialogActions>
-          </form>
-        </Dialog>
+          {this.renderActions()}
+        </form>
+      </Dialog>
    );
  }
 }
--- a/src/webui/components/NotFound/index.js
+++ b/src/webui/components/NotFound/index.js
@ -9,9 +9,12 @@ import { IProps } from './types';

 const NotFound = ({ pkg }: IProps) => (
  <Wrapper>
-    <h1>Error 404 - {pkg}</h1>
+    <h1>
+      {'Error 404 - '}
+      {pkg}
+    </h1>
    <hr />
-    <p>Oops, The package you are trying to access does not exist.</p>
+    <p>{'Oops, The package you are trying to access does not exist.'}</p>
  </Wrapper>
 );

--- a/src/webui/components/Package/index.js
+++ b/src/webui/components/Package/index.js
@ -37,52 +37,69 @@ const getInitialsName = (name: string) =>
    .reduce((accumulator, currentValue) => accumulator.charAt(0) + currentValue.charAt(0), '')
    .toUpperCase();

-const Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<Wrapper> => (
-  <Wrapper className="package" to={`detail/${label}`}>
-    <Header>
-      <MainInfo>
-        <Name>{label}</Name>
-        <Version>{`v${version}`}</Version>
-      </MainInfo>
-      <Overview>
-        {license && (
-          <OverviewItem>
-            <Icon name="license" pointer modifiers={spacing('margin', '4px', '5px', '0px', '0px')} />
-            {license}
-          </OverviewItem>
-        )}
-        <OverviewItem>
-          <Icon name="time" pointer />
-          <Published modifiers={spacing('margin', '0px', '5px', '0px', '0px')}>{`Published on ${formatDate(time)} •`}</Published>
-          {`${formatDateDistance(time)} ago`}
-        </OverviewItem>
-      </Overview>
-    </Header>
-    <Content>
-      <Field>
-        <Author>
-          <Avatar alt={name} src={avatar}>
-            {!avatar && getInitialsName(name)}
-          </Avatar>
-          <Details>
-            <Text text={name} weight="bold" />
-          </Details>
-        </Author>
-      </Field>
-      {description && (
-        <Field>
-          <Description>{description}</Description>
-        </Field>
-      )}
-    </Content>
-    {keywords.length > 0 && (
-      <Footer>
-        {keywords.sort().map((keyword, index) => (
-          <Tag key={index}>{keyword}</Tag>
-        ))}
-      </Footer>
-    )}
-  </Wrapper>
-);
+const Package = ({ name: label, version, time, author: { name, avatar }, description, license, keywords = [] }: IProps): Element<Wrapper> => {
+  const renderMainInfo = () => (
+    <MainInfo>
+      <Name>{label}</Name>
+      <Version>{`v${version}`}</Version>
+    </MainInfo>
+  );

+  const renderAuthorInfo = () => (
+    <Author>
+      <Avatar alt={name} src={avatar}>
+        {!avatar && getInitialsName(name)}
+      </Avatar>
+      <Details>
+        <Text text={name} weight={'bold'} />
+      </Details>
+    </Author>
+  );
+
+  const renderLicenseInfo = () =>
+    license && (
+      <OverviewItem>
+        <Icon modifiers={spacing('margin', '4px', '5px', '0px', '0px')} name={'license'} pointer={true} />
+        {license}
+      </OverviewItem>
+    );
+
+  const renderPublishedInfo = () => (
+    <OverviewItem>
+      <Icon name={'time'} pointer={true} />
+      <Published modifiers={spacing('margin', '0px', '5px', '0px', '0px')}>{`Published on ${formatDate(time)} •`}</Published>
+      {`${formatDateDistance(time)} ago`}
+    </OverviewItem>
+  );
+
+  const renderDescription = () =>
+    description && (
+      <Field>
+        <Description>{description}</Description>
+      </Field>
+    );
+
+  return (
+    <Wrapper className={'package'} to={`detail/${label}`}>
+      <Header>
+        {renderMainInfo()}
+        <Overview>
+          {renderLicenseInfo()}
+          {renderPublishedInfo()}
+        </Overview>
+      </Header>
+      <Content>
+        <Field>{renderAuthorInfo()}</Field>
+        {renderDescription()}
+      </Content>
+      {keywords.length > 0 && (
+        <Footer>
+          {keywords.sort().map((keyword, index) => (
+            <Tag key={index}>{keyword}</Tag>
+          ))}
+        </Footer>
+      )}
+    </Wrapper>
+  );
+};
 export default Package;
--- a/src/webui/components/Package/styles.js
+++ b/src/webui/components/Package/styles.js
@ -147,8 +147,6 @@ export const Avatar = styled(Photo)`
 export const Description = styled.div`
  && {
    margin: 5px 0;
-    max-height: 100px;
-    text-overflow: ellipsis;
  }
 `;

@ -164,7 +162,7 @@ export const Footer = styled.div`
 export const Wrapper = styled(Link)`
  && {
    font-size: 12px;
-    background-color: #fff;
+    background-color: white;
    margin: 0 0 15px 0;
    transition: box-shadow 0.15s;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
--- a/src/webui/components/PackageDetail/index.js
+++ b/src/webui/components/PackageDetail/index.js
@ -13,15 +13,19 @@ const displayState = (description) => {
 const PackageDetail = ({packageName, readMe}) => {
  return (
    <div className={classes.pkgDetail}>
-      <h1 className={classes.title}>{packageName}</h1>
-      <div className={classes.readme}>{displayState(readMe)}</div>
+      <h1 className={classes.title}>
+        {packageName}
+      </h1>
+      <div className={classes.readme}>
+        {displayState(readMe)}
+      </div>
    </div>
  );
 };

 PackageDetail.propTypes = {
  readMe: PropTypes.string,
-  packageName: PropTypes.string.isRequired
+  packageName: PropTypes.string.isRequired,
 };

 export default PackageDetail;
--- a/src/webui/components/PackageList/index.js
+++ b/src/webui/components/PackageList/index.js
@ -10,7 +10,7 @@ import classes from './packageList.scss';
 export default class PackageList extends React.Component {
  static propTypes = {
    packages: PropTypes.array,
-    help: PropTypes.bool
+    help: PropTypes.bool,
  };

  renderPackages = () => {
@ -18,7 +18,7 @@ export default class PackageList extends React.Component {
    return (
      packages.length > 0 ? (
        <Fragment>
-          <h1 className={classes.listTitle}>Available Packages</h1>
+          <h1 className={classes.listTitle}>{'Available Packages'}</h1>
          {this.renderList()}
        </Fragment>
      ) : null
@ -30,10 +30,10 @@ export default class PackageList extends React.Component {
    return (
      packages.map((pkg, i) => {
        const { name, version, description, time, keywords } = pkg;
-        const author = formatAuthor(pkg.author);	
-        const license = formatLicense(pkg.license);	
-        return (	
-         <Package key={i} {...{ name, version, author, description, license, time, keywords }} />
+        const author = formatAuthor(pkg.author);
+        const license = formatLicense(pkg.license);
+        return (
+          <Package key={i} {...{ name, version, author, description, license, time, keywords }} />
        );
      })
    );
@ -42,7 +42,7 @@ export default class PackageList extends React.Component {
  render() {
    const { help } = this.props;
    return (
-      <div className="package-list-items">
+      <div className={"package-list-items"}>
        <div className={classes.pkgContainer}>
          {help ? <Help /> : this.renderPackages()}
        </div>
--- a/src/webui/components/PackageSidebar/Module/index.jsx
+++ b/src/webui/components/PackageSidebar/Module/index.jsx
@ -21,5 +21,5 @@ Module.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
  children: PropTypes.any.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
 };
--- a/src/webui/components/PackageSidebar/ModuleContentPlaceholder/index.jsx
+++ b/src/webui/components/PackageSidebar/ModuleContentPlaceholder/index.jsx
@ -7,5 +7,5 @@ export default function ModuleContentPlaceholder({text}) {
  return <p className={classes.emptyPlaceholder}>{text}</p>;
 }
 ModuleContentPlaceholder.propTypes = {
-  text: PropTypes.string.isRequired
+  text: PropTypes.string.isRequired,
 };
--- a/src/webui/components/PackageSidebar/index.jsx
+++ b/src/webui/components/PackageSidebar/index.jsx
@ -11,7 +11,7 @@ import {
  formatLicense,
  formatRepository,
  getLastUpdatedPackageTime,
-  getRecentReleases
+  getRecentReleases,
 } from '../../utils/package';
 import API from '../../utils/api';

@ -19,7 +19,7 @@ export default class PackageSidebar extends React.Component {
  state = {};

  static propTypes = {
-    packageName: PropTypes.string.isRequired
+    packageName: PropTypes.string.isRequired,
  };

  constructor(props) {
@ -28,7 +28,8 @@ export default class PackageSidebar extends React.Component {
  }

  async componentDidMount() {
-    await this.loadPackageData(this.props.packageName);
+    const { packageName } = this.props;
+    await this.loadPackageData(packageName);
  }

  async loadPackageData(packageName) {
@ -38,17 +39,17 @@ export default class PackageSidebar extends React.Component {
      packageMeta = await API.request(`sidebar/${packageName}`, 'GET');
    } catch (err) {
      this.setState({
-        failed: true
+        failed: true,
      });
    }

    this.setState({
-      packageMeta
+      packageMeta,
    });
  }

  render() {
-    let {packageMeta} = this.state;
+    const { packageMeta } = this.state;

    if (packageMeta) {
      const {time, _uplinks} = packageMeta;
@ -69,18 +70,18 @@ export default class PackageSidebar extends React.Component {
      const peerDependencies = get(packageMeta, 'latest.peerDependencies', {});

      // Maintainers component
-      return (
-        <aside className="sidebar-info">
+      return (  
+        <aside className={'sidebar-info'}>
          {time && (
            <LastSync
-              recentReleases={recentReleases}
              lastUpdated={lastUpdated}
+              recentReleases={recentReleases}
            />
          )}
          <Infos
            homepage={homepage}
-            repository={repository}
            license={license}
+            repository={repository}
          />
          {/* TODO: Refacor later, when we decide to show only maintainers/authors */}
          <Maintainers packageMeta={packageMeta} />
@ -91,7 +92,7 @@ export default class PackageSidebar extends React.Component {
      );
    }
    return (
-      <aside className="sidebar-loading">Loading package information...</aside>
+      <aside className={'sidebar-loading'}>{'Loading package information...'}</aside>
    );
  }
 }
--- a/src/webui/components/PackageSidebar/modules/Dependencies/index.jsx
+++ b/src/webui/components/PackageSidebar/modules/Dependencies/index.jsx
@ -21,7 +21,7 @@ const renderDependenciesList = (dependencies, dependenciesList) => {
            title={`Depend on version: ${dependencies[dependenceName]}`}
          >
            <a href={getDetailPageURL(dependenceName)}>{dependenceName}</a>
-            {index < dependenciesList.length - 1 && <span>,&nbsp;</span>}
+            {index < dependenciesList.length - 1 && <span>{',&nbsp;'}</span>}
          </li>
        );
      })}
@ -32,7 +32,7 @@ const renderDependenciesList = (dependencies, dependenciesList) => {
 const Dependencies = ({dependencies = {}, title = 'Dependencies'}) => {
  const dependenciesList = Object.keys(dependencies);
  return (
-    <Module title={title} className={classes.dependenciesModule}>
+    <Module className={classes.dependenciesModule} title={title}>
      {dependenciesList.length > 0 ? (
        renderDependenciesList(dependencies, dependenciesList)
      ) : (
@ -44,7 +44,7 @@ const Dependencies = ({dependencies = {}, title = 'Dependencies'}) => {

 Dependencies.propTypes = {
  dependencies: PropTypes.object,
-  title: PropTypes.string
+  title: PropTypes.string,
 };

 export default Dependencies;
--- a/src/webui/components/PackageSidebar/modules/Infos/index.jsx
+++ b/src/webui/components/PackageSidebar/modules/Infos/index.jsx
@ -8,7 +8,7 @@ import classes from './style.scss';
 const renderSection = (title, url) => (
  <li>
    <span>{title}</span>
-    <a href={url} target="_blank" rel="noopener noreferrer">
+    <a href={url} rel={'noopener noreferrer'} target={'_blank'}>
      {url}
    </a>
  </li>
@ -16,22 +16,25 @@ const renderSection = (title, url) => (

 const Infos = ({homepage, repository, license}) => {
  const showInfo = homepage || repository || license;
-  return <Module title="Infos" className={classes.infosModule}>
-      {showInfo ? <ul>
+  return (
+    <Module className={classes.infosModule} title={'Infos'}>
+      {showInfo ? (
+        <ul>
          {homepage && renderSection('Homepage', homepage)}
          {repository && renderSection('Repository', repository)}
-          {license && <li>
-              <span>License</span>
-              <span>{license}</span>
-            </li>}
-        </ul> : <ModuleContentPlaceholder text="Not Available!" />}
-    </Module>;
+          {license && (
+          <li>
+            <span>{'License'}</span>
+            <span>{license}</span>
+          </li>)}
+        </ul>) : <ModuleContentPlaceholder text={'Not Available!'} />}
+    </Module>);
 };

 Infos.propTypes = {
  homepage: PropTypes.string,
  repository: PropTypes.string,
-  license: PropTypes.string
+  license: PropTypes.string,
 };

 export default Infos;
--- a/src/webui/components/PackageSidebar/modules/LastSync/index.jsx
+++ b/src/webui/components/PackageSidebar/modules/LastSync/index.jsx
@ -5,33 +5,31 @@ import ModuleContentPlaceholder from '../../ModuleContentPlaceholder';

 import classes from './style.scss';

-const renderRecentReleases = (recentReleases) => {
-  return (
-    <ul>
-      {recentReleases.map((versionInfo) => {
-        const {version, time} = versionInfo;
-        return (
-          <li className="last-sync-item" key={version}>
-            <span>{version}</span>
-            <span>{time}</span>
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
+const renderRecentReleases = (recentReleases) => (
+  <ul>
+    {recentReleases.map((versionInfo) => {
+      const {version, time} = versionInfo;
+      return (
+        <li className={'last-sync-item'} key={version}>
+          <span>{version}</span>
+          <span>{time}</span>
+        </li>
+      );
+    })}
+  </ul>
+);

 const LastSync = ({recentReleases = [], lastUpdated = ''}) => {
  return (
    <Module
-      title="Last Sync"
-      description={lastUpdated}
      className={classes.releasesModule}
+      description={lastUpdated}
+      title={'Last Sync'}
    >
      {recentReleases.length ? (
        renderRecentReleases(recentReleases)
      ) : (
-        <ModuleContentPlaceholder text="Not Available!" />
+        <ModuleContentPlaceholder text={'Not Available!'} />
      )}
    </Module>
  );
@ -39,7 +37,7 @@ const LastSync = ({recentReleases = [], lastUpdated = ''}) => {

 LastSync.propTypes = {
  recentReleases: propTypes.array,
-  lastUpdated: propTypes.string
+  lastUpdated: propTypes.string,
 };

 export default LastSync;
--- a/src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/index.jsx
+++ b/src/webui/components/PackageSidebar/modules/Maintainers/MaintainerInfo/index.jsx
@ -3,17 +3,20 @@ import PropTypes from 'prop-types';

 import classes from './style.scss';

-export default function MaintainerInfo({title, name, avatar}) {
-  let avatarDescription = `${title} ${name}'s avatar`;
+const MaintainerInfo = ({title, name, avatar}) => {
+  const avatarDescription = `${title} ${name}'s avatar`;
  return (
    <div className={classes.maintainer} title={name}>
-      <img src={avatar} alt={avatarDescription} title={avatarDescription}/>
-      <span className="maintainer-name">{name}</span>
+      <img alt={avatarDescription} src={avatar} title={avatarDescription} />
+      <span className={'maintainer-name'}>{name}</span>
    </div>
  );
-}
+};
+
 MaintainerInfo.propTypes = {
  title: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
-  avatar: PropTypes.string.isRequired
+  avatar: PropTypes.string.isRequired,
 };
+
+export default MaintainerInfo;
--- a/src/webui/components/PackageSidebar/modules/Maintainers/index.jsx
+++ b/src/webui/components/PackageSidebar/modules/Maintainers/index.jsx
@ -16,7 +16,7 @@ const CONTRIBUTORS_TO_SHOW = 5;

 export default class Maintainers extends React.Component {
  static propTypes = {
-    packageMeta: PropTypes.object.isRequired
+    packageMeta: PropTypes.object.isRequired,
  };

  state = {};
@ -31,7 +31,7 @@ export default class Maintainers extends React.Component {
  }

  get contributors() {
-    let contributors = get(this, 'props.packageMeta.latest.contributors', {});
+    const contributors = get(this, 'props.packageMeta.latest.contributors', {});
    return filter(contributors, (contributor) => {
      return (
        contributor.name !== get(this, 'author.name') &&
@ -41,7 +41,8 @@ export default class Maintainers extends React.Component {
  }

  get showAllContributors() {
-    return this.state.showAllContributors || size(this.contributors) <= 5;
+    const { showAllContributors } = this.state;
+    return showAllContributors || size(this.contributors) <= 5;
  }

  get uniqueContributors() {
@ -57,7 +58,7 @@ export default class Maintainers extends React.Component {

  handleShowAllContributors() {
    this.setState({
-      showAllContributors: true
+      showAllContributors: true,
    });
  }

@ -70,10 +71,10 @@ export default class Maintainers extends React.Component {
    ).map((contributor, index) => {
      return (
        <MaintainerInfo
-          key={index}
-          title="Contributors"
-          name={contributor.name}
          avatar={contributor.avatar}
+          key={index}
+          name={contributor.name}
+          title={'Contributors'}
        />
      );
    });
@ -82,24 +83,24 @@ export default class Maintainers extends React.Component {
  renderAuthorAndContributors(author) {
    return (
      <div>
-        <ul className="maintainer-author">
+        <ul className={'maintainer-author'}>
          {author &&
            author.name && (
              <MaintainerInfo
-                title="Author"
-                name={author.name}
                avatar={author.avatar}
+                name={author.name}
+                title={'Author'}
              />
            )}
          {this.renderContributors()}
        </ul>
        {!this.showAllContributors && (
          <button
-            onClick={this.handleShowAllContributors}
            className={classes.showAllContributors}
-            title="Current list only show the author and first 5 contributors unique by name"
+            onClick={this.handleShowAllContributors}
+            title={'Current list only show the author and first 5 contributors unique by name'}
          >
-            Show all contributor
+            {'Show all contributor'}
          </button>
        )}
      </div>
@ -107,14 +108,13 @@ export default class Maintainers extends React.Component {
  }

  render() {
-    let author = this.author;
    const contributors = this.renderContributors();
    return (
-      <Module title="Maintainers" className={classes.maintainersModule}>
-        {contributors.length || has(author, 'name') ? (
-          this.renderAuthorAndContributors(author)
+      <Module className={classes.maintainersModule} title={'Maintainers'}>
+        {contributors.length || has(this.author, 'name') ? (
+          this.renderAuthorAndContributors(this.author)
        ) : (
-          <ModuleContentPlaceholder text="Not Available!" />
+          <ModuleContentPlaceholder text={'Not Available!'} />
        )}
      </Module>
    );
--- a/src/webui/components/PackageSidebar/modules/PeerDependencies/index.jsx
+++ b/src/webui/components/PackageSidebar/modules/PeerDependencies/index.jsx
@ -6,13 +6,13 @@ export const TITLE = 'Peer Dependencies';

 const PeerDependencies = ({dependencies = {}, title = TITLE}) => {
  return (
-    <Dependencies title={title} dependencies={dependencies} />
+    <Dependencies dependencies={dependencies} title={title} />
  );
 };

 PeerDependencies.propTypes = {
  dependencies: PropTypes.object,
-  title: PropTypes.string
+  title: PropTypes.string,
 };

 export default PeerDependencies;
--- a/src/webui/components/Readme/index.js
+++ b/src/webui/components/Readme/index.js
@ -8,6 +8,6 @@ import 'github-markdown-css';

 import { IProps } from './types';

-const Readme = ({ description }: IProps) => <div className="markdown-body" dangerouslySetInnerHTML={{ __html: description }} />;
+const Readme = ({ description }: IProps) => <div className={'markdown-body'} dangerouslySetInnerHTML={{ __html: description }} />;

 export default Readme;
--- a/src/webui/components/RegistryInfoDialog/index.js
+++ b/src/webui/components/RegistryInfoDialog/index.js
@ -1,28 +1,28 @@
-/**
- * @prettier
- * @flow
- */
-
-import React from 'react';
-import Dialog from '@material-ui/core/Dialog/index';
-import DialogActions from '@material-ui/core/DialogActions/index';
-import Button from '@material-ui/core/Button/index';
-import { Title, Content } from './styles';
-
-import type { Node } from 'react';
-
-import { IProps } from './types';
-
-const RegistryInfoDialog = ({ open = false, children, onClose }: IProps): Node => (
-  <Dialog id="registryInfo--dialog-container" open={open} onClose={onClose}>
-    <Title disableTypography>Register Info</Title>
-    <Content>{children}</Content>
-    <DialogActions>
-      <Button id="registryInfo--dialog-close" onClick={onClose} color="inherit" autoFocus>
-        CLOSE
-      </Button>
-    </DialogActions>
-  </Dialog>
-);
-
-export default RegistryInfoDialog;
+/**
+ * @prettier
+ * @flow
+ */
+
+import React from 'react';
+import Dialog from '@material-ui/core/Dialog/index';
+import DialogActions from '@material-ui/core/DialogActions/index';
+import Button from '@material-ui/core/Button/index';
+import { Title, Content } from './styles';
+
+import type { Node } from 'react';
+
+import { IProps } from './types';
+
+const RegistryInfoDialog = ({ open = false, children, onClose }: IProps): Node => (
+  <Dialog id={'registryInfo--dialog-container'} onClose={onClose} open={open}>
+    <Title disableTypography={true}>{'Register Info'}</Title>
+    <Content>{children}</Content>
+    <DialogActions>
+      <Button color={'inherit'} id={'registryInfo--dialog-close'} onClick={onClose}>
+        {'CLOSE'}
+      </Button>
+    </DialogActions>
+  </Dialog>
+);
+
+export default RegistryInfoDialog;
--- a/src/webui/components/Search/index.js
+++ b/src/webui/components/Search/index.js
@ -133,6 +133,28 @@ class Search extends Component<IProps, IState> {
    }
  };

+  render(): Node {
+    const { suggestions, search, loaded, loading, error } = this.state;
+
+    return (
+      <AutoComplete
+        color={colors.white}
+        onBlur={this.onBlur}
+        onChange={this.handleSearch}
+        onCleanSuggestions={this.handlePackagesClearRequested}
+        onClick={this.handleClickSearch}
+        onSuggestionsFetch={this.handleFetchPackages}
+        placeholder={CONSTANTS.PLACEHOLDER_TEXT}
+        startAdornment={this.renderAdorment()}
+        suggestions={suggestions}
+        suggestionsError={error}
+        suggestionsLoaded={loaded}
+        suggestionsLoading={loading}
+        value={search}
+      />
+    );
+  }
+
  /**
   * As user focuses out from input, we cancel all the request from requestList
   * and set the API state parameters to default boolean values.
@ -150,29 +172,11 @@ class Search extends Component<IProps, IState> {
    );
  };

-  render(): Node {
-    const { suggestions, search, loaded, loading, error } = this.state;
-
+  renderAdorment() {
    return (
-      <AutoComplete
-        suggestions={suggestions}
-        suggestionsLoaded={loaded}
-        suggestionsLoading={loading}
-        suggestionsError={error}
-        value={search}
-        placeholder={CONSTANTS.PLACEHOLDER_TEXT}
-        color={colors.white}
-        startAdornment={
-          <InputAdornment position="start" style={{ color: colors.white }}>
-            <IconSearch />
-          </InputAdornment>
-        }
-        onSuggestionsFetch={this.handleFetchPackages}
-        onCleanSuggestions={this.handlePackagesClearRequested}
-        onClick={this.handleClickSearch}
-        onChange={this.handleSearch}
-        onBlur={this.onBlur}
-      />
+      <InputAdornment position={'start'} style={{ color: colors.white }}>
+        <IconSearch />
+      </InputAdornment>
    );
  }
 }
--- a/src/webui/components/Spinner/styles.js
+++ b/src/webui/components/Spinner/styles.js
@ -19,10 +19,12 @@ export const Wrapper = styled.div`
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
-      `}
+      `};
+  }
 `;

 export const Circular = styled(CircularProgress)`
  && {
-    color: ${colors.primary}
+    color: ${colors.primary};
+  }
 `;
--- a/src/webui/index.js
+++ b/src/webui/index.js
@ -6,12 +6,12 @@ import {AppContainer} from 'react-hot-loader';

 import App from './app';

-let rootNode = document.getElementById('root');
+const rootNode = document.getElementById('root');

-let renderApp = (Component) => {
+const renderApp = (Component) => {
  ReactDOM.render(
    <AppContainer>
-      <Component/>
+      <Component />
    </AppContainer>,
    rootNode
  );
--- a/src/webui/pages/detail/index.jsx
+++ b/src/webui/pages/detail/index.jsx
@ -13,12 +13,12 @@ import PackageSidebar from '../../components/PackageSidebar/index';
 export default class Detail extends Component {
  static propTypes = {
    match: PropTypes.object,
-    isUserLoggedIn: PropTypes.bool
+    isUserLoggedIn: PropTypes.bool,
  };

  state = {
    readMe: '',
-    notFound: false
+    notFound: false,
  };

  getPackageName(props = this.props) {
@ -27,6 +27,7 @@ export default class Detail extends Component {
      params.package
    }`;
  }
+
  get packageName() {
    return this.getPackageName();
  }
@ -36,9 +37,10 @@ export default class Detail extends Component {
  }

  componentDidUpdate(prevProps) {
-    const condition1 = prevProps.isUserLoggedIn !== this.props.isUserLoggedIn;
+    const { isUserLoggedIn, match } = this.props;
+    const condition1 = prevProps.isUserLoggedIn !== isUserLoggedIn;
    const condition2 =
-      prevProps.match.params.package !== this.props.match.params.package;
+      prevProps.match.params.package !== match.params.package;
    if (condition1 || condition2) {
      const packageName = this.getPackageName(this.props);
      this.loadPackageInfo(packageName);
@ -47,18 +49,18 @@ export default class Detail extends Component {

  async loadPackageInfo(packageName) {
    this.setState({
-      readMe: ''
+      readMe: '',
    });

    try {
      const resp = await API.request(`package/readme/${packageName}`, 'GET');
      this.setState({
        readMe: resp,
-        notFound: false
+        notFound: false,
      });
    } catch (err) {
      this.setState({
-        notFound: true
+        notFound: true,
      });
    }
  }
@ -68,16 +70,16 @@ export default class Detail extends Component {

    if (notFound) {
      return (
-        <div className='container content'>
+        <div className={'container content'}>
          <NotFound pkg={this.packageName} />
        </div>
      );
    } else if (isEmpty(readMe)) {
-      return <Spinner centered />;
+      return <Spinner centered={true} />;
    }
    return (
      <div className={`container content ${classes.twoColumn}`}>
-        <PackageDetail readMe={readMe} packageName={this.packageName} />
+        <PackageDetail packageName={this.packageName} readMe={readMe} />
        <PackageSidebar packageName={this.packageName} />
      </div>
    );
--- a/src/webui/pages/home/index.js
+++ b/src/webui/pages/home/index.js
@ -12,7 +12,7 @@ class Home extends Component {
  render() {
    const { packages } = this.props;
    return (
-      <div className="container content">
+      <div className={"container content"}>
        <PackageList help={packages.length < 1} packages={packages} />
      </div>
    );
--- a/src/webui/router.js
+++ b/src/webui/router.js
@ -20,17 +20,28 @@ interface IState {}

 class RouterApp extends Component<IProps, IState> {
  render() {
-    const { isUserLoggedIn, packages } = this.props;
    return (
      <Router>
        <Switch>
-          <Route exact path="/" render={() => <HomePage isUserLoggedIn={isUserLoggedIn} packages={packages} />} />
-          <Route exact path="/detail/@:scope/:package" render={props => <DetailPackage {...props} isUserLoggedIn={isUserLoggedIn} />} />
-          <Route exact path="/detail/:package" render={props => <DetailPackage {...props} isUserLoggedIn={isUserLoggedIn} />} />
+          <Route exact={true} path={'/'} render={this.renderHomePage} />
+          <Route exact={true} path={'/detail/@:scope/:package'} render={this.renderDetailPage} />
+          <Route exact={true} path={'/detail/:package'} render={this.renderDetailPage} />
        </Switch>
      </Router>
    );
  }
+
+  renderHomePage = () => {
+    const { isUserLoggedIn, packages } = this.props;
+
+    return <HomePage isUserLoggedIn={isUserLoggedIn} packages={packages} />;
+  };
+
+  renderDetailPage = (routerProps: any) => {
+    const { isUserLoggedIn } = this.props;
+
+    return <DetailPackage {...routerProps} isUserLoggedIn={isUserLoggedIn} />;
+  };
 }

 export default RouterApp;
--- a/src/webui/utils/api.js
+++ b/src/webui/utils/api.js
@ -42,7 +42,7 @@ class API {
        fetch(url, {
          method,
          credentials: 'same-origin',
-          ...options
+          ...options,
        })
        .then(handleResponseType)
        .then(([responseOk, body]) => {
--- a/src/webui/utils/asyncComponent.js
+++ b/src/webui/utils/asyncComponent.js
@ -1,18 +1,21 @@
 import React from 'react';

-export function asyncComponent(getComponent) {
+export function asyncComponent(getComponentFunc) {
  return class AsyncComponent extends React.Component {
    static Component = null;
-    state = {Component: AsyncComponent.Component};
+    state = {Component: this.getComponent()};

-    componentDidMount() {
-      if (!this.state.Component) {
-        getComponent().then(({default: Component}) => {
+    getComponent() {
+      if (!AsyncComponent.Component) {
+        getComponentFunc().then(({default: Component}) => {
          AsyncComponent.Component = Component;
-          this.setState({Component});
+          return Component;
        });
      }
+
+      return AsyncComponent.Component;
    }
+    
    render() {
      const {Component} = this.state;
      if (Component) {
--- a/src/webui/utils/login.js
+++ b/src/webui/utils/login.js
@ -10,10 +10,7 @@ export function isTokenExpire(token) {
        return true;
    }

-    let [
-        ,
-        payload
-    ] = token.split('.');
+    let [,payload] = token.split('.');

    if (!payload) {
        return true;
@ -44,7 +41,7 @@ export async function makeLogin(username, password) {
        const error = {
            title: 'Unable to login',
            type: 'error',
-            description: 'Username or password can\'t be empty!'
+            description: 'Username or password can\'t be empty!',
        };
        return {error};
    }
@ -54,19 +51,19 @@ export async function makeLogin(username, password) {
            body: JSON.stringify({username, password}),
            headers: {
                Accept: HEADERS.JSON,
-                'Content-Type': HEADERS.JSON
-            }
+                'Content-Type': HEADERS.JSON,
+            },
        });
        const result = {
            username: response.username,
-            token: response.token
+            token: response.token,
        };
        return result;
    } catch (e) {
        const error = {
            title: 'Unable to login',
            type: 'error',
-            description: e.error
+            description: e.error,
        };
        return {error};
    }
--- a/src/webui/utils/package.js
+++ b/src/webui/utils/package.js
@ -1,9 +1,11 @@
 import isString from 'lodash/isString';
 import isObject from 'lodash/isObject';
-export const TIMEFORMAT = 'DD.MM.YYYY, HH:mm:ss';
 import format from 'date-fns/format';
 import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';

+export const TIMEFORMAT = 'DD.MM.YYYY, HH:mm:ss';
+export const DEFAULT_USER = 'Anonymous';
+
 /**
 * Formats license field for webui.
 * @see https://docs.npmjs.com/files/package.json#license
@ -42,21 +44,25 @@ export function formatRepository(repository) {
 * @see https://docs.npmjs.com/files/package.json#author
 */
 export function formatAuthor(author) {
-    let authorDetails = { name: 'Anonymous', email: '', avatar: '' };
+    let authorDetails = {
+      name: DEFAULT_USER,
+      email: '',
+      avatar: '',
+    };

    if (isString(author)) {
-      authorDetails = { 
-        ...authorDetails, 
-        name: author ? author : authorDetails.name
+      authorDetails = {
+        ...authorDetails,
+        name: author ? author : authorDetails.name,
      };
    }

    if (isObject(author)) {
-      authorDetails = { 
-        ...authorDetails, 
+      authorDetails = {
+        ...authorDetails,
        name: author.name ? author.name : authorDetails.name,
        email: author.email ? author.email : authorDetails.email,
-        avatar: author.avatar ? author.avatar : authorDetails.avatar
+        avatar: author.avatar ? author.avatar : authorDetails.avatar,
      };
    }

@ -87,7 +93,7 @@ export function getLastUpdatedPackageTime(uplinks = {}) {
 export function getRecentReleases(time = {}) {
  const recent = Object.keys(time).map((version) => ({
    version,
-    time: formatDate(time[version])
+    time: formatDate(time[version]),
  }));
  return recent.slice(recent.length - 3, recent.length).reverse();
 }
--- a/src/webui/utils/styles/colors.js
+++ b/src/webui/utils/styles/colors.js
@ -27,8 +27,8 @@ const colors = {
    // -------------------------

    primary: '#4b5e40',
-    secondary: '#20232a'
-    
+    secondary: '#20232a',
+
 };

 export default colors;
--- a/src/webui/utils/styles/media.js
+++ b/src/webui/utils/styles/media.js
@ -4,16 +4,16 @@ const breakpoints = {
  small: 576,
  medium: 768,
  large: 1024,
-  xlarge: 1275
+  xlarge: 1275,
 };

 const mq = Object.keys(breakpoints).reduce(
  (accumulator, label) => {
-    let prefix =
+    const prefix =
      typeof breakpoints[label] === 'string'
        ? ''
        : 'min-width:';
-    let suffix =
+    const suffix =
      typeof breakpoints[label] === 'string' ? '' : 'px';
    accumulator[label] = cls =>
      css`
--- a/src/webui/utils/styles/sizes.js
+++ b/src/webui/utils/styles/sizes.js
@ -5,19 +5,19 @@ export const fontSize = {
    lg: '21px',
    md: '18px',
    base: '16px',
-    sm: '14px'
+    sm: '14px',
 };

 export const lineHeight = {
    xl: '30px',
    sm: '18px',
    xs: '2',
-    xxs: '1.5'
+    xxs: '1.5',
 };

 export const fontWeight = {
  light: 300,
  regular: 400,
  semiBold: 500,
-  bold: 700
+  bold: 700,
 };
--- a/src/webui/utils/styles/spacings.js
+++ b/src/webui/utils/styles/spacings.js
@ -2,5 +2,5 @@
 // -------------------------

 export const spacings = {
-    lg: '30px'
+    lg: '30px',
 };
--- a/src/webui/utils/windows.js
+++ b/src/webui/utils/windows.js
@ -0,0 +1,3 @@
+export function goToVerdaccioWebsite() {
+	window.open('https://www.verdaccio.org/', '_blank');
+}
--- a/test/.eslintrc
+++ b/test/.eslintrc
@ -13,6 +13,8 @@
  "rules": {
    "valid-jsdoc": 0,
    "no-redeclare": 1,
+    "jest/consistent-test-it": ["error", {"fn": "test"}],
+    "jest/no-jasmine-globals": 2,
    "no-console": [
      2,
      {
--- a/test/e2e/e2e.spec.js
+++ b/test/e2e/e2e.spec.js
@ -55,33 +55,33 @@ describe('/ (Verdaccio Page)', () => {
    await page.close();
  });

-  it('should load without error', async () => {
+  test('should load without error', async () => {
    const text = await page.evaluate(() => document.body.textContent);

    // FIXME: perhaps it is not the best approach
    expect(text).toContain('Powered by');
  });

-  it('should match title with no packages published', async () => {
+  test('should match title with no packages published', async () => {
    const text = await page.evaluate(() => document.querySelector('#help-card__title').textContent);
    expect(text).toMatch('No Package Published Yet');
  });

-  it('should match title with first step', async () => {
+  test('should match title with first step', async () => {
    const text = await page.evaluate(() => document.querySelector('#help-card').textContent);
    expect(text).toContain('$ npm adduser --registry http://0.0.0.0:55558');
  });

-  it('should match title with second step', async () => {
+  test('should match title with second step', async () => {
    const text = await page.evaluate(() => document.querySelector('#help-card').textContent);
    expect(text).toContain('$ npm publish --registry http://0.0.0.0:55558');
  });

-  it('should match button Login to sign in', async () => {
+  test('should match button Login to sign in', async () => {
    await evaluateSignIn();
  });

-  it('should click on sign in button', async () => {
+  test('should click on sign in button', async () => {
    const signInButton = await page.$('#header--button-login');
    await signInButton.click();
    await page.waitFor(1000);
@ -90,7 +90,7 @@ describe('/ (Verdaccio Page)', () => {
    expect(signInDialog).not.toBeNull();
  });

-  it('should log in an user', async () => {
+  test('should log in an user', async () => {
    // we open the dialog
    await logIn();
    // check whether user is logged
@ -98,7 +98,7 @@ describe('/ (Verdaccio Page)', () => {
    expect(buttonLogout).toBeDefined();
  });

-  it('should logout an user', async () => {
+  test('should logout an user', async () => {
    // we assume the user is logged already
    await clickElement('#header--button-account', { clickCount: 1, delay: 500 });
    await page.waitFor(1000);
@ -107,7 +107,7 @@ describe('/ (Verdaccio Page)', () => {
    await evaluateSignIn();
  });

-  it('should check registry info dialog', async () => {
+  test('should check registry info dialog', async () => {
    const registryInfoButton = await page.$('#header--button-registryInfo');
    registryInfoButton.click();
    await page.waitFor(500);
@ -119,7 +119,7 @@ describe('/ (Verdaccio Page)', () => {
    closeButton.click();
  });

-  it('should publish a package', async () => {
+  test('should publish a package', async () => {
    await global.__SERVER__.putPackage(scopedPackageMetadata.name, scopedPackageMetadata);
    await page.waitFor(1000);
    await page.reload();
@ -128,7 +128,7 @@ describe('/ (Verdaccio Page)', () => {
    expect(packagesList).toHaveLength(1);
  });

-  it('should navigate to the package detail', async () => {
+  test('should navigate to the package detail', async () => {
    const packagesList = await getPackages();
    const firstPackage = packagesList[0];
    await firstPackage.focus();
@ -138,12 +138,12 @@ describe('/ (Verdaccio Page)', () => {
    expect(readmeText).toMatch('test');
  });

-  it('should contains last sync information', async () => {
+  test('should contains last sync information', async () => {
    const versionList = await page.$$('.sidebar-info .last-sync-item');
    expect(versionList).toHaveLength(3);
  });

-  it('should publish a protected package', async () => {
+  test('should publish a protected package', async () => {
    await page.goto('http://0.0.0.0:55552');
    await page.waitFor(500);
    await global.__SERVER_PROTECTED__.putPackage(protectedPackageMetadata.name, protectedPackageMetadata);
--- a/test/functional/sanity/mirror.js
+++ b/test/functional/sanity/mirror.js
@ -30,7 +30,7 @@ export default function (server, server2) {

        test(prefix + 'creating new package', () => {});

-        describe(pkg, () => {
+        describe(`${pkg}`, () => {
          beforeAll(function () {
            return server2.putVersion(pkg, '0.1.1', generatePkg(pkg))
              .status(HTTP_STATUS.CREATED)
--- a/test/unit/api/cli.spec.js
+++ b/test/unit/api/cli.spec.js
@ -55,7 +55,7 @@ describe('startServer via API', () => {
      const exitMock = jest.fn();
      global.process = { ...realProcess, exit: exitMock };
      await startServer(conf, address, store, version, serverName, () => {
-        expect(logger.logger.fatal).toBeCalled();
+        expect(logger.logger.fatal).toHaveBeenCalled();
        expect(logger.logger.fatal).toHaveBeenCalledTimes(2);
        done();
      });
--- a/test/unit/api/notify-request.spec.js
+++ b/test/unit/api/notify-request.spec.js
@ -95,7 +95,7 @@ describe('notifyRequest', () => {
    const notification = require('../../../src/lib/notify/notify-request');
    const infoArgs = [{ content }, 'A notification has been shipped: @{content}'];

-    await expect(notification.notifyRequest(options, content)).rejects.toThrowError('body is missing');
+    await expect(notification.notifyRequest(options, content)).rejects.toThrow('body is missing');
    expect(logger.logger.info).toHaveBeenCalledWith(...infoArgs);
  });
 });
--- a/test/unit/api/validate_all.spec.js
+++ b/test/unit/api/validate_all.spec.js
@ -10,7 +10,12 @@ const path = require('path');
 app.param('revision', validate_name);
 app.param('token', validate_name);
 */
-describe('api endpoint app.param()', runTest('../endpoint/index.js'));
+describe('api endpoint app.param()', () => {
+
+  // to avoid a failure on run test
+  test('empty block', () => {});
+  runTest('../endpoint/index.js');
+});

 function runTest(file) {
  return function() {
--- a/test/unit/webui/app.spec.js
+++ b/test/unit/webui/app.spec.js
@ -37,7 +37,7 @@ describe('App', () => {
  beforeEach(() => {
    wrapper = mount(<App />);
  });
-  it('loadLogo: set logo url in state', async () => {
+  test('loadLogo: set logo url in state', async () => {
    const { loadLogo } = wrapper.instance();
    await loadLogo();
    expect(wrapper.state().logoUrl).toEqual(
@ -45,15 +45,15 @@ describe('App', () => {
    );
  });

-  it('toggleLoginModal: should toggle the value in state', () => {
-    const { toggleLoginModal } = wrapper.instance();
+  test('toggleLoginModal: should toggle the value in state', () => {
+    const { handleToggleLoginModal } = wrapper.instance();
    expect(wrapper.state().showLoginModal).toBeFalsy();
-    toggleLoginModal();
+    handleToggleLoginModal();
    expect(wrapper.state('showLoginModal')).toBeTruthy();
    expect(wrapper.state('error')).toEqual({});
  });

-  it('isUserAlreadyLoggedIn: token already available in storage', async () => {
+  test('isUserAlreadyLoggedIn: token already available in storage', async () => {

    storage.setItem('username', 'verdaccio');
    storage.setItem('token', generateTokenWithTimeRange(24));
@ -64,7 +64,7 @@ describe('App', () => {
    expect(wrapper.state('user').username).toEqual('verdaccio');
  });

-  it('handleLogout - logouts the user and clear localstorage', async () => {
+  test('handleLogout - logouts the user and clear localstorage', async () => {
    const { handleLogout } = wrapper.instance();
    storage.setItem('username', 'verdaccio');
    storage.setItem('token', 'xxxx.TOKEN.xxxx');
@ -74,9 +74,9 @@ describe('App', () => {
    expect(wrapper.state('isUserLoggedIn')).toBeFalsy();
  });

-  it('doLogin - login the user successfully', async () => {
-    const { doLogin } = wrapper.instance();
-    await doLogin('sam', '1234');
+  test('handleDoLogin - login the user successfully', async () => {
+    const { handleDoLogin } = wrapper.instance();
+    await handleDoLogin('sam', '1234');
    const result = {
      username: 'sam',
      token: 'TEST_TOKEN'
@ -88,9 +88,9 @@ describe('App', () => {
    expect(wrapper.state('user')).toEqual(result);
  });

-  it('doLogin - authentication failure', async () => {
-    const { doLogin } = wrapper.instance();
-    await doLogin('sam', '12345');
+  test('handleDoLogin - authentication failure', async () => {
+    const { handleDoLogin } = wrapper.instance();
+    await handleDoLogin('sam', '12345');
    console.log(API_ERROR.BAD_USERNAME_PASSWORD);
    const result = {
      description: 'bad username/password, access denied',
--- a/test/unit/webui/components/PackageSidebar/snapshots/dependencies.spec.js.snap
+++ b/test/unit/webui/components/PackageSidebar/snapshots/dependencies.spec.js.snap
--- a/test/unit/webui/components/PackageSidebar/snapshots/infos.spec.js.snap
+++ b/test/unit/webui/components/PackageSidebar/snapshots/infos.spec.js.snap
@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<PackageSidebar /> : <Infos /> should load the Info component with homepage only 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Homepage</span><a href=\\"https://www.verdaccio.org\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">https://www.verdaccio.org</a></li></ul></div></div>"`;
+exports[`<PackageSidebar /> : <Infos /> should load the Info component with homepage only 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Homepage</span><a href=\\"https://www.verdaccio.org\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">https://www.verdaccio.org</a></li></ul></div></div>"`;

 exports[`<PackageSidebar /> : <Infos /> should load the Info component with license only 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>License</span><span>MIT</span></li></ul></div></div>"`;

-exports[`<PackageSidebar /> : <Infos /> should load the Info component with props 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Homepage</span><a href=\\"https://www.verdaccio.org\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">https://www.verdaccio.org</a></li><li><span>Repository</span><a href=\\"https://github.com/verdaccio/verdaccio\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">https://github.com/verdaccio/verdaccio</a></li><li><span>License</span><span>MIT</span></li></ul></div></div>"`;
+exports[`<PackageSidebar /> : <Infos /> should load the Info component with props 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Homepage</span><a href=\\"https://www.verdaccio.org\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">https://www.verdaccio.org</a></li><li><span>Repository</span><a href=\\"https://github.com/verdaccio/verdaccio\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">https://github.com/verdaccio/verdaccio</a></li><li><span>License</span><span>MIT</span></li></ul></div></div>"`;

-exports[`<PackageSidebar /> : <Infos /> should load the Info component with repository only 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Repository</span><a href=\\"https://github.com/verdaccio/verdaccio\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">https://github.com/verdaccio/verdaccio</a></li></ul></div></div>"`;
+exports[`<PackageSidebar /> : <Infos /> should load the Info component with repository only 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><ul><li><span>Repository</span><a href=\\"https://github.com/verdaccio/verdaccio\\" rel=\\"noopener noreferrer\\" target=\\"_blank\\">https://github.com/verdaccio/verdaccio</a></li></ul></div></div>"`;

 exports[`<PackageSidebar /> : <Infos /> should load the component without props 1`] = `"<div class=\\"module infosModule\\"><h2 class=\\"moduleTitle\\">Infos</h2><div><p class=\\"emptyPlaceholder\\">Not Available!</p></div></div>"`;
--- a/test/unit/webui/components/PackageSidebar/snapshots/maintainerInfo.spec.js.snap
+++ b/test/unit/webui/components/PackageSidebar/snapshots/maintainerInfo.spec.js.snap
@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<PackageSidebar /> : <Maintainers /> <MaintainerInfo /> should load the component and match with snapshot 1`] = `"<div class=\\"maintainer\\" title=\\"test\\"><img src=\\"http://xyz.com/profile.jpg\\" alt=\\"test-title test&#x27;s avatar\\" title=\\"test-title test&#x27;s avatar\\"/><span class=\\"maintainer-name\\">test</span></div>"`;
+exports[`<PackageSidebar /> : <Maintainers /> <MaintainerInfo /> should load the component and match with snapshot 1`] = `"<div class=\\"maintainer\\" title=\\"test\\"><img alt=\\"test-title test&#x27;s avatar\\" src=\\"http://xyz.com/profile.jpg\\" title=\\"test-title test&#x27;s avatar\\"/><span class=\\"maintainer-name\\">test</span></div>"`;
--- a/test/unit/webui/components/PackageSidebar/snapshots/maintainers.spec.js.snap
+++ b/test/unit/webui/components/PackageSidebar/snapshots/maintainers.spec.js.snap
@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<PackageSidebar /> : <Maintainers /> should match with the props 1`] = `"<div class=\\"module maintainersModule\\"><h2 class=\\"moduleTitle\\">Maintainers</h2><div><div><ul class=\\"maintainer-author\\"><div class=\\"maintainer\\" title=\\"User NPM\\"><img src=\\"https://www.gravatar.com/avatar/a5a236ba477ee98908600c40cda74f4a\\" alt=\\"Author User NPM's avatar\\" title=\\"Author User NPM's avatar\\"><span class=\\"maintainer-name\\">User NPM</span></div><div class=\\"maintainer\\" title=\\"030\\"><img src=\\"https://www.gravatar.com/avatar/4ef03c2bf8d8689527903212d96fb45b\\" alt=\\"Contributors 030's avatar\\" title=\\"Contributors 030's avatar\\"><span class=\\"maintainer-name\\">030</span></div><div class=\\"maintainer\\" title=\\"Alex Vernacchia\\"><img src=\\"https://www.gravatar.com/avatar/06975001f7f2be7052bcf978700c6112\\" alt=\\"Contributors Alex Vernacchia's avatar\\" title=\\"Contributors Alex Vernacchia's avatar\\"><span class=\\"maintainer-name\\">Alex Vernacchia</span></div><div class=\\"maintainer\\" title=\\"Alexander Makarenko\\"><img src=\\"https://www.gravatar.com/avatar/d9acfc4ed4e49a436738ff26a722dce4\\" alt=\\"Contributors Alexander Makarenko's avatar\\" title=\\"Contributors Alexander Makarenko's avatar\\"><span class=\\"maintainer-name\\">Alexander Makarenko</span></div><div class=\\"maintainer\\" title=\\"Alexandre-io\\"><img src=\\"https://www.gravatar.com/avatar/2e095c7cfd278f72825d0fed6e12e3b1\\" alt=\\"Contributors Alexandre-io's avatar\\" title=\\"Contributors Alexandre-io's avatar\\"><span class=\\"maintainer-name\\">Alexandre-io</span></div><div class=\\"maintainer\\" title=\\"Aram Drevekenin\\"><img src=\\"https://www.gravatar.com/avatar/371edff6d79c39bb9e36bde39d41a4b0\\" alt=\\"Contributors Aram Drevekenin's avatar\\" title=\\"Contributors Aram Drevekenin's avatar\\"><span class=\\"maintainer-name\\">Aram Drevekenin</span></div></ul><button class=\\"showAllContributors\\" title=\\"Current list only show the author and first 5 contributors unique by name\\">Show all contributor</button></div></div></div>"`;
+exports[`<PackageSidebar /> : <Maintainers /> should match with the props 1`] = `"<div class=\\"module maintainersModule\\"><h2 class=\\"moduleTitle\\">Maintainers</h2><div><div><ul class=\\"maintainer-author\\"><div class=\\"maintainer\\" title=\\"User NPM\\"><img alt=\\"Author User NPM's avatar\\" src=\\"https://www.gravatar.com/avatar/a5a236ba477ee98908600c40cda74f4a\\" title=\\"Author User NPM's avatar\\"><span class=\\"maintainer-name\\">User NPM</span></div><div class=\\"maintainer\\" title=\\"030\\"><img alt=\\"Contributors 030's avatar\\" src=\\"https://www.gravatar.com/avatar/4ef03c2bf8d8689527903212d96fb45b\\" title=\\"Contributors 030's avatar\\"><span class=\\"maintainer-name\\">030</span></div><div class=\\"maintainer\\" title=\\"Alex Vernacchia\\"><img alt=\\"Contributors Alex Vernacchia's avatar\\" src=\\"https://www.gravatar.com/avatar/06975001f7f2be7052bcf978700c6112\\" title=\\"Contributors Alex Vernacchia's avatar\\"><span class=\\"maintainer-name\\">Alex Vernacchia</span></div><div class=\\"maintainer\\" title=\\"Alexander Makarenko\\"><img alt=\\"Contributors Alexander Makarenko's avatar\\" src=\\"https://www.gravatar.com/avatar/d9acfc4ed4e49a436738ff26a722dce4\\" title=\\"Contributors Alexander Makarenko's avatar\\"><span class=\\"maintainer-name\\">Alexander Makarenko</span></div><div class=\\"maintainer\\" title=\\"Alexandre-io\\"><img alt=\\"Contributors Alexandre-io's avatar\\" src=\\"https://www.gravatar.com/avatar/2e095c7cfd278f72825d0fed6e12e3b1\\" title=\\"Contributors Alexandre-io's avatar\\"><span class=\\"maintainer-name\\">Alexandre-io</span></div><div class=\\"maintainer\\" title=\\"Aram Drevekenin\\"><img alt=\\"Contributors Aram Drevekenin's avatar\\" src=\\"https://www.gravatar.com/avatar/371edff6d79c39bb9e36bde39d41a4b0\\" title=\\"Contributors Aram Drevekenin's avatar\\"><span class=\\"maintainer-name\\">Aram Drevekenin</span></div></ul><button class=\\"showAllContributors\\" title=\\"Current list only show the author and first 5 contributors unique by name\\">Show all contributor</button></div></div></div>"`;
--- a/test/unit/webui/components/PackageSidebar/snapshots/peerDependencies.spec.js.snap
+++ b/test/unit/webui/components/PackageSidebar/snapshots/peerDependencies.spec.js.snap
--- a/test/unit/webui/components/PackageSidebar/dependencies.spec.js
+++ b/test/unit/webui/components/PackageSidebar/dependencies.spec.js
@ -59,7 +59,7 @@ describe('<PackageSidebar /> : <Dependencies />', () => {
  });

  test('should permit overriding title', () => {
-    const wrapper = mount(<Dependencies title='Package dependencies' />);
+    const wrapper = mount(<Dependencies title={"Package dependencies"} />);

    expect(wrapper.find('h2').text()).toEqual('Package dependencies');
    expect(wrapper.html()).toMatchSnapshot();
--- a/test/unit/webui/components/PackageSidebar/infos.spec.js
+++ b/test/unit/webui/components/PackageSidebar/infos.spec.js
@ -7,22 +7,22 @@ import { shallow } from 'enzyme';
 import Infos from '../../../../../src/webui/components/PackageSidebar/modules/Infos/index';

 describe('<PackageSidebar /> : <Infos />', () => {
-  it('should load the component without props', () => {
-    const wrapper = shallow(<Infos/>);
+  test('should load the component without props', () => {
+    const wrapper = shallow(<Infos />);
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('should load the Info component with props', () => {
+  test('should load the Info component with props', () => {
    const props = {
      homepage: 'https://www.verdaccio.org',
      license: 'MIT',
      repository: 'https://github.com/verdaccio/verdaccio'
    }
-    const wrapper = shallow(<Infos {...props}/>);
+    const wrapper = shallow(<Infos {...props} />);
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('should load the Info component with homepage only', () => {
+  test('should load the Info component with homepage only', () => {
    const props = {
      homepage: 'https://www.verdaccio.org'
    }
@ -30,7 +30,7 @@ describe('<PackageSidebar /> : <Infos />', () => {
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('should load the Info component with license only', () => {
+  test('should load the Info component with license only', () => {
    const props = {
      license: 'MIT',
    }
@ -38,7 +38,7 @@ describe('<PackageSidebar /> : <Infos />', () => {
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('should load the Info component with repository only', () => {
+  test('should load the Info component with repository only', () => {
    const props = { repository: 'https://github.com/verdaccio/verdaccio' };
    const wrapper = shallow(<Infos {...props} />);
    expect(wrapper.html()).toMatchSnapshot();
--- a/test/unit/webui/components/PackageSidebar/lastsync.spec.js
+++ b/test/unit/webui/components/PackageSidebar/lastsync.spec.js
@ -7,12 +7,12 @@ import { shallow } from 'enzyme';
 import LastSync from '../../../../../src/webui/components/PackageSidebar/modules/LastSync/index';

 describe('<PackageSidebar /> : <LastSync />', () => {
-  it('should check the default props condition', () => {
-    const wrapper = shallow(<LastSync/>);
+  test('should check the default props condition', () => {
+    const wrapper = shallow(<LastSync />);
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('should load the LastSync component and match snapshot', () => {
+  test('should load the LastSync component and match snapshot', () => {
    const props = {
      lastUpdated: '2017/12/14, 15:43:52',
      recentReleases: [
@ -21,7 +21,7 @@ describe('<PackageSidebar /> : <LastSync />', () => {
        { time: '2017/11/08, 22:47:16', version: '2.6.6' }
      ]
    };
-    const wrapper = shallow(<LastSync {...props}/>);
+    const wrapper = shallow(<LastSync {...props} />);
    expect(wrapper.html()).toMatchSnapshot();
  });
 });
--- a/test/unit/webui/components/PackageSidebar/maintainerInfo.spec.js
+++ b/test/unit/webui/components/PackageSidebar/maintainerInfo.spec.js
@ -9,12 +9,12 @@ import MaintainerInfo from '../../../../../src/webui/components/PackageSidebar/m
 console.error = jest.fn();

 describe('<PackageSidebar /> : <Maintainers /> <MaintainerInfo />', () => {
-  it('should throw error for required props', () => {
+  test('should throw error for required props', () => {
    shallow(<MaintainerInfo />);
-    expect(console.error).toBeCalled();
+    expect(console.error).toHaveBeenCalled();
  });

-  it('should load the component and match with snapshot', () => {
+  test('should load the component and match with snapshot', () => {
    const props = {
      title: 'test-title',
      name: 'test',
--- a/test/unit/webui/components/PackageSidebar/maintainers.spec.js
+++ b/test/unit/webui/components/PackageSidebar/maintainers.spec.js
@ -16,12 +16,12 @@ describe('<PackageSidebar /> : <Maintainers />', () => {
    instance = wrapper.instance();
  });

-  it('should match with the props', () => {
+  test('should match with the props', () => {
    expect(wrapper.props().packageMeta).toEqual(packageMeta);
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('author shoule be equal to User NPM', () => {
+  test('author shoule be equal to User NPM', () => {
    expect(instance.author).toEqual({
      avatar:
        'https://www.gravatar.com/avatar/a5a236ba477ee98908600c40cda74f4a',
@ -30,11 +30,11 @@ describe('<PackageSidebar /> : <Maintainers />', () => {
    });
  });

-  it('should get all the contributors with false for showAllContributors', () => {
+  test('should get all the contributors with false for showAllContributors', () => {
    expect(instance.showAllContributors).toBeFalsy();
  });

-  it('should get unique contributors', () => {
+  test('should get unique contributors', () => {
    const result = [
      {
        avatar:
@ -70,7 +70,7 @@ describe('<PackageSidebar /> : <Maintainers />', () => {
    expect(instance.uniqueContributors).toEqual(result);
  });

-  it('should click on handleShowAllContributors', () => {
+  test('should click on handleShowAllContributors', () => {
    wrapper.find('button').simulate('click');
    expect(wrapper.state('showAllContributors')).toBeTruthy();
  });
--- a/test/unit/webui/components/PackageSidebar/module.spec.js
+++ b/test/unit/webui/components/PackageSidebar/module.spec.js
@ -9,11 +9,11 @@ import Module from '../../../../../src/webui/components/PackageSidebar/Module/in
 console.error = jest.fn();

 describe('<PackageSidebar /> : <Module />', () => {
-  it('should error for required props', () => {
+  test('should error for required props', () => {
    shallow(<Module />);
-    expect(console.error).toBeCalled();
+    expect(console.error).toHaveBeenCalled();
  });
-  it('should load module component', () => {
+  test('should load module component', () => {
    const props = {
      title: 'Test title',
      description: 'Test description',
@ -21,7 +21,7 @@ describe('<PackageSidebar /> : <Module />', () => {
    };
    const wrapper = shallow(
      <Module {...props}>
-        <p>test children</p>
+        <p>{'test children'}</p>
      </Module>
    );
    expect(wrapper.html()).toMatchSnapshot();
--- a/test/unit/webui/components/PackageSidebar/moduleContentPlaceholder.spec.js
+++ b/test/unit/webui/components/PackageSidebar/moduleContentPlaceholder.spec.js
@ -9,11 +9,11 @@ import ModuleContentPlaceholder from '../../../../../src/webui/components/Packag
 console.error = jest.fn();

 describe('<PackageSidebar /> : <ModuleContentPlaceholder />', () => {
-  it('should error for required props', () => {
+  test('should error for required props', () => {
    shallow(<ModuleContentPlaceholder />);
-    expect(console.error).toBeCalled();
+    expect(console.error).toHaveBeenCalled();
  });
-  it('should load module component', () => {
+  test('should load module component', () => {
    const props = {
      text: 'Test text'
    };
--- a/test/unit/webui/components/PackageSidebar/packageSidebar.spec.js
+++ b/test/unit/webui/components/PackageSidebar/packageSidebar.spec.js
@ -14,22 +14,22 @@ jest.mock('../../../../../src/webui/utils/api', () => ({
 console.error = jest.fn();

 describe('<PackageSidebar /> component', () => {
-  it('should throw error for the required props', () => {
+  test('should throw error for the required props', () => {
    const wrapper = mount(<PackageSidebar />);
    const { loadPackageData } = wrapper.instance();
-    expect(console.error).toBeCalled();
-    loadPackageData().catch(response => {
+    expect(console.error).toHaveBeenCalled();
+    return loadPackageData().catch(response => {
      expect(response).toBeUndefined();
      expect(wrapper.state()).toEqual({ failed: true });
    });
  });

-  it('should load the packageMeta', () => {
+  test('should load the packageMeta', () => {
    const wrapper = mount(<PackageSidebar packageName={'verdaccio'} />);
    const { loadPackageData } = wrapper.instance();
-    loadPackageData('verdaccio').then(response => {
+    expect(wrapper.html()).toMatchSnapshot();
+    return loadPackageData('verdaccio').then(response => {
      expect(wrapper.state('packageMeta')).toEqual(packageMeta);
    });
-    expect(wrapper.html()).toMatchSnapshot();
  });
 });
--- a/test/unit/webui/components/snapshots/footer.spec.js.snap
+++ b/test/unit/webui/components/snapshots/footer.spec.js.snap
@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Footer /> component should load the initial state of Footer component 1`] = `"<div class=\\"css-i0nj2g efsnl070\\"><div class=\\"css-hzfs9b efsnl071\\"><div class=\\"css-4kqzh2 efsnl072\\">Made with<span class=\\"css-1so4oe0 efsnl077\\">♥</span>on<span class=\\"css-1ie354y efsnl074\\"><svg class=\\"efsnl075 css-10ih290 ej4jd2o0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-e8kfuf efsnl076\\"><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Pakistan</title><use xlink:href=\\"[object Object]#pakistan\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-zxlexh efsnl073\\">Powered by<span class=\\"efsnl079 css-i15wza ej4jd2o1\\" title=\\"Verdaccio\\"><img src=\\"[object Object]\\" alt=\\"Verdaccio\\" class=\\"css-1ncdhax ej4jd2o2\\"></span>/ 4.0.0-alpha.3</div></div></div>"`;
+exports[`<Footer /> component should load the initial state of Footer component 1`] = `"<div class=\\"css-i0nj2g efsnl070\\"><div class=\\"css-hzfs9b efsnl071\\"><div class=\\"css-d8nsp7 efsnl072\\"> Made with<span class=\\"css-1so4oe0 efsnl077\\">♥</span>on<span class=\\"css-1ie354y efsnl074\\"><svg class=\\"efsnl075 css-1kgp95j ej4jd2o0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-e8kfuf efsnl076\\"><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Pakistan</title><use xlink:href=\\"[object Object]#pakistan\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"efsnl078 css-f1ndto ej4jd2o0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-1wbzdyy efsnl073\\">Powered by<span class=\\"efsnl078 css-i15wza ej4jd2o1\\" title=\\"Verdaccio\\"><img alt=\\"Verdaccio\\" src=\\"[object Object]\\" class=\\"css-1ncdhax ej4jd2o2\\"></span>/ 4.0.0-alpha.3</div></div></div>"`;
--- a/test/unit/webui/components/snapshots/login.spec.js.snap
+++ b/test/unit/webui/components/snapshots/login.spec.js.snap
@ -2,4 +2,4 @@

 exports[`<LoginModal /> should load the component in default state 1`] = `"<div class=\\"MuiModal-root-13 MuiDialog-root-1 MuiDialog-scrollPaper-2\\" role=\\"dialog\\" id=\\"login--form-container\\"><div class=\\"MuiBackdrop-root-15\\" aria-hidden=\\"true\\" style=\\"opacity: 1; -webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\"></div><div class=\\"MuiPaper-root-17 MuiPaper-elevation24-43 MuiPaper-rounded-18 MuiDialog-paper-4 MuiDialog-paperScrollPaper-5 MuiDialog-paperWidthXs-7 MuiDialog-paperFullWidth-11\\" style=\\"opacity: 1; -webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\" role=\\"document\\" tabindex=\\"-1\\"><form novalidate=\\"\\"><div class=\\"MuiDialogTitle-root-44\\"><h2 class=\\"MuiTypography-root-45 MuiTypography-title-51\\">Login</h2></div><div class=\\"MuiDialogContent-root-71\\"><div class=\\"MuiFormControl-root-72 MuiFormControl-fullWidth-75\\"><label class=\\"MuiFormLabel-root-83 MuiFormLabel-required-88 MuiInputLabel-root-76 MuiInputLabel-formControl-77 MuiInputLabel-animated-80\\" data-shrink=\\"false\\" for=\\"username\\">Username<span class=\\"MuiFormLabel-asterisk-89\\"> *</span></label><div class=\\"MuiInputBase-root-103 MuiInput-root-90 MuiInput-underline-94 MuiInputBase-formControl-104 MuiInput-formControl-91\\"><input aria-invalid=\\"false\\" class=\\"MuiInputBase-input-113 MuiInput-input-98\\" id=\\"login--form-username\\" placeholder=\\"Your username\\" required=\\"\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiFormControl-root-72 MuiFormControl-fullWidth-75\\" style=\\"margin-top: 8px;\\"><label class=\\"MuiFormLabel-root-83 MuiFormLabel-required-88 MuiInputLabel-root-76 MuiInputLabel-formControl-77 MuiInputLabel-animated-80\\" data-shrink=\\"false\\" for=\\"password\\">Password<span class=\\"MuiFormLabel-asterisk-89\\"> *</span></label><div class=\\"MuiInputBase-root-103 MuiInput-root-90 MuiInput-underline-94 MuiInputBase-formControl-104 MuiInput-formControl-91\\"><input aria-invalid=\\"false\\" class=\\"MuiInputBase-input-113 MuiInput-input-98 MuiInputBase-inputType-116 MuiInput-inputType-101\\" id=\\"login--form-password\\" placeholder=\\"Your strong password\\" required=\\"\\" type=\\"password\\" value=\\"\\"></div></div></div><div class=\\"MuiDialogActions-root-120 dialog-footer\\"><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-148 MuiButton-root-122 MuiButton-text-124 MuiButton-flat-127 MuiButton-colorInherit-143 MuiDialogActions-action-121\\" type=\\"button\\" id=\\"login--form-cancel\\"><span class=\\"MuiButton-label-123\\">Cancel</span><span class=\\"MuiTouchRipple-root-151\\"></span></button><button tabindex=\\"-1\\" class=\\"MuiButtonBase-root-148 MuiButtonBase-disabled-149 MuiButton-root-122 MuiButton-text-124 MuiButton-flat-127 MuiButton-disabled-142 MuiButton-colorInherit-143 MuiDialogActions-action-121\\" type=\\"submit\\" disabled=\\"\\" id=\\"login--form-submit\\"><span class=\\"MuiButton-label-123\\">Login</span></button></div></form></div></div>"`;

-exports[`<LoginModal /> should load the component with props 1`] = `"<div class=\\"MuiModal-root-13 MuiDialog-root-1 MuiDialog-scrollPaper-2\\" role=\\"dialog\\" id=\\"login--form-container\\"><div class=\\"MuiBackdrop-root-15\\" aria-hidden=\\"true\\" style=\\"opacity: 1; -webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\"></div><div class=\\"MuiPaper-root-17 MuiPaper-elevation24-43 MuiPaper-rounded-18 MuiDialog-paper-4 MuiDialog-paperScrollPaper-5 MuiDialog-paperWidthXs-7 MuiDialog-paperFullWidth-11\\" style=\\"opacity: 1; -webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\" role=\\"document\\" tabindex=\\"-1\\"><form novalidate=\\"\\"><div class=\\"MuiDialogTitle-root-44\\"><h2 class=\\"MuiTypography-root-45 MuiTypography-title-51\\">Login</h2></div><div class=\\"MuiDialogContent-root-71\\"><div class=\\"MuiTypography-root-45 MuiTypography-body1-54 MuiPaper-root-17 MuiPaper-elevation6-25 MuiSnackbarContent-root-158 loginError\\" role=\\"alertdialog\\"><div class=\\"MuiSnackbarContent-message-159\\"><div id=\\"client-snackbar\\" class=\\"loginErrorMsg\\"><svg class=\\"MuiSvgIcon-root-161 loginIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\\"></path></svg><span><div><strong>Error Title</strong></div><div>Error Description</div></span></div></div></div><div class=\\"MuiFormControl-root-72 MuiFormControl-fullWidth-75\\"><label class=\\"MuiFormLabel-root-83 MuiFormLabel-required-88 MuiInputLabel-root-76 MuiInputLabel-formControl-77 MuiInputLabel-animated-80\\" data-shrink=\\"false\\" for=\\"username\\">Username<span class=\\"MuiFormLabel-asterisk-89\\"> *</span></label><div class=\\"MuiInputBase-root-103 MuiInput-root-90 MuiInput-underline-94 MuiInputBase-formControl-104 MuiInput-formControl-91\\"><input aria-invalid=\\"false\\" class=\\"MuiInputBase-input-113 MuiInput-input-98\\" id=\\"login--form-username\\" placeholder=\\"Your username\\" required=\\"\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiFormControl-root-72 MuiFormControl-fullWidth-75\\" style=\\"margin-top: 8px;\\"><label class=\\"MuiFormLabel-root-83 MuiFormLabel-required-88 MuiInputLabel-root-76 MuiInputLabel-formControl-77 MuiInputLabel-animated-80\\" data-shrink=\\"false\\" for=\\"password\\">Password<span class=\\"MuiFormLabel-asterisk-89\\"> *</span></label><div class=\\"MuiInputBase-root-103 MuiInput-root-90 MuiInput-underline-94 MuiInputBase-formControl-104 MuiInput-formControl-91\\"><input aria-invalid=\\"false\\" class=\\"MuiInputBase-input-113 MuiInput-input-98 MuiInputBase-inputType-116 MuiInput-inputType-101\\" id=\\"login--form-password\\" placeholder=\\"Your strong password\\" required=\\"\\" type=\\"password\\" value=\\"\\"></div></div></div><div class=\\"MuiDialogActions-root-120 dialog-footer\\"><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-148 MuiButton-root-122 MuiButton-text-124 MuiButton-flat-127 MuiButton-colorInherit-143 MuiDialogActions-action-121\\" type=\\"button\\" id=\\"login--form-cancel\\"><span class=\\"MuiButton-label-123\\">Cancel</span><span class=\\"MuiTouchRipple-root-151\\"></span></button><button tabindex=\\"-1\\" class=\\"MuiButtonBase-root-148 MuiButtonBase-disabled-149 MuiButton-root-122 MuiButton-text-124 MuiButton-flat-127 MuiButton-disabled-142 MuiButton-colorInherit-143 MuiDialogActions-action-121\\" type=\\"submit\\" disabled=\\"\\" id=\\"login--form-submit\\"><span class=\\"MuiButton-label-123\\">Login</span></button></div></form></div></div>"`;
+exports[`<LoginModal /> should load the component with props 1`] = `"<div class=\\"MuiModal-root-13 MuiDialog-root-1 MuiDialog-scrollPaper-2\\" role=\\"dialog\\" id=\\"login--form-container\\"><div class=\\"MuiBackdrop-root-15\\" aria-hidden=\\"true\\" style=\\"opacity: 1; -webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\"></div><div class=\\"MuiPaper-root-17 MuiPaper-elevation24-43 MuiPaper-rounded-18 MuiDialog-paper-4 MuiDialog-paperScrollPaper-5 MuiDialog-paperWidthXs-7 MuiDialog-paperFullWidth-11\\" style=\\"opacity: 1; -webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\\" role=\\"document\\" tabindex=\\"-1\\"><form novalidate=\\"\\"><div class=\\"MuiDialogTitle-root-44\\"><h2 class=\\"MuiTypography-root-45 MuiTypography-title-51\\">Login</h2></div><div class=\\"MuiDialogContent-root-71\\"><div class=\\"MuiTypography-root-45 MuiTypography-body1-54 MuiPaper-root-17 MuiPaper-elevation6-25 MuiSnackbarContent-root-158 loginError\\" role=\\"alertdialog\\"><div class=\\"MuiSnackbarContent-message-159\\"><div class=\\"loginErrorMsg\\" id=\\"client-snackbar\\"><svg class=\\"MuiSvgIcon-root-161 loginIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\\"></path></svg><span><div><strong>Error Title</strong></div><div>Error Description</div></span></div></div></div><div class=\\"MuiFormControl-root-72 MuiFormControl-fullWidth-75\\"><label class=\\"MuiFormLabel-root-83 MuiFormLabel-required-88 MuiInputLabel-root-76 MuiInputLabel-formControl-77 MuiInputLabel-animated-80\\" data-shrink=\\"false\\" for=\\"username\\">Username<span class=\\"MuiFormLabel-asterisk-89\\"> *</span></label><div class=\\"MuiInputBase-root-103 MuiInput-root-90 MuiInput-underline-94 MuiInputBase-formControl-104 MuiInput-formControl-91\\"><input aria-invalid=\\"false\\" class=\\"MuiInputBase-input-113 MuiInput-input-98\\" id=\\"login--form-username\\" placeholder=\\"Your username\\" required=\\"\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiFormControl-root-72 MuiFormControl-fullWidth-75\\" style=\\"margin-top: 8px;\\"><label class=\\"MuiFormLabel-root-83 MuiFormLabel-required-88 MuiInputLabel-root-76 MuiInputLabel-formControl-77 MuiInputLabel-animated-80\\" data-shrink=\\"false\\" for=\\"password\\">Password<span class=\\"MuiFormLabel-asterisk-89\\"> *</span></label><div class=\\"MuiInputBase-root-103 MuiInput-root-90 MuiInput-underline-94 MuiInputBase-formControl-104 MuiInput-formControl-91\\"><input aria-invalid=\\"false\\" class=\\"MuiInputBase-input-113 MuiInput-input-98 MuiInputBase-inputType-116 MuiInput-inputType-101\\" id=\\"login--form-password\\" placeholder=\\"Your strong password\\" required=\\"\\" type=\\"password\\" value=\\"\\"></div></div></div><div class=\\"MuiDialogActions-root-120 dialog-footer\\"><button tabindex=\\"0\\" class=\\"MuiButtonBase-root-148 MuiButton-root-122 MuiButton-text-124 MuiButton-flat-127 MuiButton-colorInherit-143 MuiDialogActions-action-121\\" type=\\"button\\" id=\\"login--form-cancel\\"><span class=\\"MuiButton-label-123\\">Cancel</span><span class=\\"MuiTouchRipple-root-151\\"></span></button><button tabindex=\\"-1\\" class=\\"MuiButtonBase-root-148 MuiButtonBase-disabled-149 MuiButton-root-122 MuiButton-text-124 MuiButton-flat-127 MuiButton-disabled-142 MuiButton-colorInherit-143 MuiDialogActions-action-121\\" type=\\"submit\\" disabled=\\"\\" id=\\"login--form-submit\\"><span class=\\"MuiButton-label-123\\">Login</span></button></div></form></div></div>"`;
--- a/test/unit/webui/components/snapshots/packagelist.spec.js.snap
+++ b/test/unit/webui/components/snapshots/packagelist.spec.js.snap
@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<PackageList /> component should load the component with packages 1`] = `"<div class=\\"package-list-items\\"><div class=\\"pkgContainer\\"><h1 class=\\"listTitle\\">Available Packages</h1><a class=\\"package css-1e86qqr e11fsc2k16\\" href=\\"detail/verdaccio\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">verdaccio</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>5 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">S</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Sam</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1lt0577 e11fsc2k14\\">Private NPM repository</div></div></div></a><a class=\\"package css-1e86qqr e11fsc2k16\\" href=\\"detail/abc\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">abc</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.1</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>5 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">R</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Rose</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1lt0577 e11fsc2k14\\">abc description</div></div></div></a><a class=\\"package css-1e86qqr e11fsc2k16\\" href=\\"detail/xyz\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">xyz</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.1.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on Invalid Date •</span>almost NaN years ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">M</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Martin</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1lt0577 e11fsc2k14\\">xyz description</div></div></div></a></div></div>"`;
+exports[`<PackageList /> component should load the component with packages 1`] = `"<div class=\\"package-list-items\\"><div class=\\"pkgContainer\\"><h1 class=\\"listTitle\\">Available Packages</h1><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"detail/verdaccio\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">verdaccio</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>6 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">S</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Sam</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">Private NPM repository</div></div></div></a><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"detail/abc\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">abc</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.0.1</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on 21.07.2018, 22:11:12 •</span>6 months ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">R</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Rose</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">abc description</div></div></div></a><a class=\\"package css-zrrjf6 e11fsc2k16\\" href=\\"detail/xyz\\"><div class=\\"css-esn5nr e11fsc2k0\\"><span class=\\"css-1e6w198 e11fsc2k2\\"><span class=\\"css-bxt2bt e11fsc2k1\\">xyz</span><span class=\\"css-17xn9wj e11fsc2k5\\">v1.1.0</span></span><span class=\\"css-1dq57rh e11fsc2k4\\"><span class=\\"css-19brcdm e11fsc2k3\\"><svg class=\\"e11fsc2k6 css-y8pkl4 ej4jd2o0\\"><title>Time</title><use xlink:href=\\"[object Object]#time\\"></use></svg><span class=\\"css-1qw5qv3 e11fsc2k7\\">Published on Invalid Date •</span>almost NaN years ago</span></span></div><div class=\\"css-tywa7u e11fsc2k9\\"><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-15496ft e11fsc2k12\\"><div class=\\"MuiAvatar-root-116 MuiAvatar-colorDefault-117 css-1to0t9u e11fsc2k13\\">M</div><span class=\\"css-1xj37ub e11fsc2k11\\"><div class=\\"e11fsc2k10 css-1xe0n7g e1pneb170\\">Martin</div></span></div></div><div class=\\"css-hnjjgz e11fsc2k8\\"><div class=\\"css-1b14dls e11fsc2k14\\">xyz description</div></div></div></a></div></div>"`;
--- a/test/unit/webui/components/footer.spec.js
+++ b/test/unit/webui/components/footer.spec.js
@ -14,7 +14,7 @@ describe('<Footer /> component', () => {
        wrapper = mount(<Footer />);
    });

-    it('should load the initial state of Footer component', () => {
+    test('should load the initial state of Footer component', () => {
        expect(wrapper.html()).toMatchSnapshot();
    });
 });
--- a/test/unit/webui/components/header.spec.js
+++ b/test/unit/webui/components/header.spec.js
@ -15,7 +15,7 @@ describe('<Header /> component with logged in state', () => {
    props = {
      username: 'test user',
      handleLogout: jest.fn(),
-      toggleLoginModal: jest.fn(),
+      onToggleLoginModal: jest.fn(),
      scope: 'test scope',
      withoutSearch: true,
    };
@ -57,7 +57,7 @@ describe('<Header /> component with logged out state', () => {
  beforeEach(() => {
    props = {
      handleLogout: jest.fn(),
-      toggleLoginModal: jest.fn(),
+      onToggleLoginModal: jest.fn(),
      scope: 'test scope',
      withoutSearch: true,
    };
@ -97,6 +97,6 @@ describe('<Header /> component with logged out state', () => {
    const { handleToggleLogin } = wrapper.instance();
    handleToggleLogin();
    expect(wrapper.state('anchorEl')).toBeNull();
-    expect(props.toggleLoginModal).toHaveBeenCalled();
+    expect(props.onToggleLoginModal).toHaveBeenCalled();
  });
 });
--- a/test/unit/webui/components/help.spec.js
+++ b/test/unit/webui/components/help.spec.js
@ -7,7 +7,7 @@ import Help from '../../../../src/webui/components/Help/index';

 describe('<Help /> component', () => {

-  it('should render the component in default state', () => {
+  test('should render the component in default state', () => {
    const wrapper = shallow(<Help />);
    expect(wrapper.html()).toMatchSnapshot();
  });
--- a/test/unit/webui/components/login.spec.js
+++ b/test/unit/webui/components/login.spec.js
@ -25,12 +25,12 @@ const event = {
 };

 describe('<LoginModal />', () => {
-  it('should load the component in default state', () => {
+  test('should load the component in default state', () => {
    const wrapper = mount(<LoginModal />);
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('should load the component with props', () => {
+  test('should load the component with props', () => {
    const props = {
      visibility: true,
      error: {
@ -45,7 +45,7 @@ describe('<LoginModal />', () => {
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('onCancel: should close the login modal', () => {
+  test('onCancel: should close the login modal', () => {
    const props = {
      visibility: true,
      error: {
@ -61,7 +61,7 @@ describe('<LoginModal />', () => {
    expect(props.onCancel).toHaveBeenCalled();
  });

-  it('setCredentials - should set username and password in state', () => {
+  test('setCredentials - should set username and password in state', () => {
    const props = {
      visibility: true,
      error: {},
@ -78,7 +78,7 @@ describe('<LoginModal />', () => {
    expect(wrapper.state('form').password.value).toEqual('1234');
  });

-  it('validateCredentials: should validate credentials', async () => {
+  test('validateCredentials: should validate credentials', async () => {
    const props = {
      visibility: true,
      error: {},
@ -106,7 +106,7 @@ describe('<LoginModal />', () => {
    expect(submitCredentials).toHaveBeenCalledTimes(1);
  });

-  it('submitCredentials: should submit credentials', async () => {
+  test('submitCredentials: should submit credentials', async () => {
    const props = {
      onSubmit: jest.fn(),
    };
--- a/test/unit/webui/components/noitems.spec.js
+++ b/test/unit/webui/components/noitems.spec.js
@ -9,12 +9,12 @@ import NoItems from '../../../../src/webui/components/NoItems/index';
 console.error = jest.fn();

 describe('<NoItem /> component', () => {
-  it('should load the component in default state', () => {
+  test('should load the component in default state', () => {
    const wrapper = mount(<NoItems />);
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('should set html from props', () => {
+  test('should set html from props', () => {
    const props = {
      text: 'This is a test string'
    };
--- a/test/unit/webui/components/notfound.spec.js
+++ b/test/unit/webui/components/notfound.spec.js
@ -9,12 +9,12 @@ import NotFound from '../../../../src/webui/components/NotFound/index';
 console.error = jest.fn();

 describe('<NotFound /> component', () => {
-  it('should load the component in default state', () => {
-    const wrapper = mount(<NotFound pkg='test' />);
+  test('should load the component in default state', () => {
+    const wrapper = mount(<NotFound pkg={"test"} />);
    expect(wrapper.html()).toMatchSnapshot();
  });

-  it('should set html from props', () => {
+  test('should set html from props', () => {
    const props = {
      pkg: 'verdaccio'
    };
--- a/test/unit/webui/components/package.spec.js
+++ b/test/unit/webui/components/package.spec.js
@ -16,7 +16,7 @@ import { Version, Wrapper, Field, OverviewItem } from '../../../../src/webui/com
 const dateOneMonthAgo = () => new Date(1544377770747)

 describe('<Package /> component', () => {
-  it.skip('should load the component', () => {
+  test.skip('should load the component', () => {
    const props = {
      name: 'verdaccio',
      version: '1.0.0',
@ -35,7 +35,7 @@ describe('<Package /> component', () => {
      <Package {...props} />
    );

-  
+
    // integration expectations

    // check link
@ -50,7 +50,7 @@ describe('<Package /> component', () => {
    // check description
    expect(wrapper.find(Field).someWhere(n => {
      return (
-        n.children().first().get(0).props.children[0].props.text === 'Description' && 
+        n.children().first().get(0).props.children[0].props.text === 'Description' &&
        n.children().childAt(1).containsMatchingElement(<span>{props.description}</span>)
      )
    })).toBe(true);
@ -63,7 +63,7 @@ describe('<Package /> component', () => {

  });

-  it.skip('should load the component without author', () => {
+  test.skip('should load the component without author', () => {
    const props = {
      name: 'verdaccio',
      version: '1.0.0',
--- a/test/unit/webui/components/packagedetail.spec.js
+++ b/test/unit/webui/components/packagedetail.spec.js
@ -10,12 +10,12 @@ import {WEB_TITLE} from '../../../../src/lib/constants';
 console.error = jest.fn();

 describe('<PackageDetail /> component', () => {
-  it('should give error for required props', () => {
+  test('should give error for required props', () => {
    shallow(<PackageDetail />);
-    expect(console.error).toBeCalled();
+    expect(console.error).toHaveBeenCalled();
  });

-  it('should load the component', () => {
+  test('should load the component', () => {
    const props = {
      readMe: 'Test readme',
      packageName: WEB_TITLE
--- a/Show more
+++ b/Show more