chore(release): 1.0.0

feat(de-translations): added de-DE translations to the UI (#441 )
feat: spanish translations to UI (#440 )
2020-03-13 07:35:00 +01:00 · 2020-03-12 11:40:12 +01:00 · 2020-03-09 07:01:01 +01:00 · 2020-03-08 16:45:07 +01:00 · 2020-03-03 09:32:26 +01:00 · 2020-03-02 21:29:16 +01:00
91 changed files with 4848 additions and 1839 deletions
--- a/.github/workflows/security.yml
+++ b/.github/workflows/security.yml
@@ -0,0 +1,11 @@
+name: Security Flow
+on: push
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Run Snyk to check for vulnerabilities
+        uses: snyk/actions/node@0.1.0
+        env:
+          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,26 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## [1.0.0](https://github.com/verdaccio/ui/compare/v0.3.13...v1.0.0) (2020-03-13)
+
+
+### Features
+
+* **de-translations:** added de-DE translations to the UI ([#441](https://github.com/verdaccio/ui/issues/441)) ([e27d59b](https://github.com/verdaccio/ui/commit/e27d59bff7039473e566090fa0f825f7e462aa4e))
+* spanish translations to UI ([#440](https://github.com/verdaccio/ui/issues/440)) ([0abe1ef](https://github.com/verdaccio/ui/commit/0abe1ef41ca93b900ddda72e2d873ee52078221c))
+* **i18n:** added i18next for user interface translations  ([#432](https://github.com/verdaccio/ui/issues/432)) ([7428384](https://github.com/verdaccio/ui/commit/7428384b55e6089dbe45e6b216eee0b670dff576))
+
+### [0.3.13](https://github.com/verdaccio/ui/compare/v0.3.12...v0.3.13) (2020-02-02)
+
+
+### Bug Fixes
+
+* do not capitalize heading - closes [#428](https://github.com/verdaccio/ui/issues/428) ([#431](https://github.com/verdaccio/ui/issues/431)) ([d481f54](https://github.com/verdaccio/ui/commit/d481f549484361c1d1bc011e0858e8f99b8a2528))
+* package list refresh based on logged-in user ([#415](https://github.com/verdaccio/ui/issues/415)) ([222ffed](https://github.com/verdaccio/ui/commit/222ffed0226f5aaa62f2d5b91bb08717b2aa24ef)), closes [#414](https://github.com/verdaccio/ui/issues/414) [#414](https://github.com/verdaccio/ui/issues/414)
+* reload packages on log in ([#421](https://github.com/verdaccio/ui/issues/421)) ([1eca1f4](https://github.com/verdaccio/ui/commit/1eca1f40797790e87d9592204ca061527d09c4ae))
+* typo ([#423](https://github.com/verdaccio/ui/issues/423)) ([164cea6](https://github.com/verdaccio/ui/commit/164cea6c10804c1d2097c2a582eb3e1e51814d4a))
+* update dependencies ([#420](https://github.com/verdaccio/ui/issues/420)) ([ee1c3f0](https://github.com/verdaccio/ui/commit/ee1c3f08eb16da2313d8841cfab18358d7f4ea10))
+
 ### [0.3.12](https://github.com/verdaccio/ui/compare/v0.3.11...v0.3.12) (2020-01-09)


--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@
 [![stackshare](https://img.shields.io/badge/Follow%20on-StackShare-blue.svg?logo=stackshare&style=flat)](https://stackshare.io/verdaccio)
 [![discord](https://img.shields.io/discord/388674437219745793.svg)](http://chat.verdaccio.org/)
 [![node](https://img.shields.io/node/v/@verdaccio/ui-theme/latest.svg)](https://www.npmjs.com/package/@verdaccio/ui-theme)
-![MIT](https://img.shields.io/github/license/mashape/apistatus.svg)
+[![MIT](https://img.shields.io/github/license/mashape/apistatus.svg)](./LICENSE)
 [![Crowdin](https://d322cqt584bo4o.cloudfront.net/verdaccio/localized.svg)](https://crowdin.com/project/verdaccio)
 [![codecov](https://codecov.io/gh/verdaccio/ui/branch/master/graph/badge.svg)](https://codecov.io/gh/verdaccio/ui)

--- a/i18n/config.ts
+++ b/i18n/config.ts
@@ -0,0 +1,40 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import translationEN from './translations/en-US.json';
+import translationPT from './translations/pt-BR.json';
+import translationES from './translations/es-ES.json';
+import translationDE from './translations/de-DE.json';
+
+i18n
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    // in case window.VEDACCIO_LANGUAGE is undefined,it will fall back to 'en-US'
+    lng: window?.__VERDACCIO_BASENAME_UI_OPTIONS?.language,
+    fallbackLng: 'en-US',
+    whitelist: ['en-US', 'pt-BR', 'es-ES', 'de-DE'],
+    load: 'currentOnly',
+    resources: {
+      'en-US': {
+        translation: translationEN,
+      },
+      'pt-BR': {
+        translation: translationPT,
+      },
+      'es-ES': {
+        translation: translationES,
+      },
+      'de-DE': {
+        translation: translationDE,
+      },
+    },
+    debug: false,
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;
--- a/i18n/translations/de-DE.json
+++ b/i18n/translations/de-DE.json
@@ -0,0 +1,138 @@
+{
+    "copy-to-clipboard": "In die Zwischenablage kopieren",
+    "author-anonymous": "Anonymus",
+    "action-bar-action": {
+        "visit-home-page": "Zur Homepage",
+        "open-an-issue": "Einen Fehler melden",
+        "download-tarball": "Archiv (Tarball) herunterladen"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "Registrierungsinformationen"
+        }
+    },
+    "header": {
+        "documentation": "Dokumentation",
+        "registry-info": "Registrierungsinformationen",
+        "greetings": "Hallo "
+    },
+    "search": {
+        "packages": "Pakete suchen"
+    },
+    "auto-complete": {
+        "loading": "wird geladen...",
+        "no-results-found": "Kein Ergebnis gefunden"
+    },
+    "tab": {
+        "uplinks": "Uplinks",
+        "versions": "Versionen",
+        "dependencies": "Abhängigkeiten",
+        "readme": "Liesmich"
+    },
+    "uplinks": {
+        "title": "Uplinks",
+        "no-items": "{{name}} hat keine Uplinks."
+    },
+    "versions": {
+        "current-tags": "Aktuelle Tags",
+        "version-history": "Versionsgeschichte",
+        "not-available": "Nicht verfügbar"
+    },
+    "package": {
+        "published-on": "Veröffentlicht am {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "Zur Homepage",
+        "homepage": "Homepage",
+        "open-an-issue": "Einen Fehler melden",
+        "bugs": "Fehler",
+        "download": "{{what}} herunterladen",
+        "the-tar-file": "die tar-Datei",
+        "tarball": "Archiv (Tarball)"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} hat keine Abhängigkeiten",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "Benutzername",
+        "password": "Passwort"
+    },
+    "form-placeholder": {
+        "username": "Dein Benutzername",
+        "password": "Dein sicheres Passwort"
+    },
+    "form-validation": {
+        "required-field": "Dieses Feld ist erforderlich",
+        "required-min-length": "Dieses Feld erfordert eine Mindestlänge von {{length}}",
+        "unable-to-sign-in": "Anmeldung nicht möglich",
+        "username-or-password-cant-be-empty": "Benutzername und Passwort dürfen nicht leer sein!"
+    },
+    "help": {
+        "title": "Noch kein Paket publiziert.",
+        "sub-title": "Um dein erstes Paket einfach zu publizieren:",
+        "first-step": "1. Einloggen",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. Publizieren",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. Diese Seite aktualisieren."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "Letzte v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "Installierung",
+            "install-using-yarn": "Mit yarn installieren",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "Mit npm installieren",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "Mit pnpm installieren",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "Repository"
+        },
+        "author": {
+            "title": "Autor(in)"
+        },
+        "distribution": {
+            "title": "Neueste Distribution",
+            "license": "Lizenz",
+            "size": "Größe",
+            "file-count": "Anzahl der Dateien"
+        },
+        "maintainers": {
+            "title": "Maintainer"
+        },
+        "contributors": {
+            "title": "Contributor"
+        },
+        "engines": {
+            "npm-version": "NPM Version",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Unterstützt von",
+        "made-with-love-on": "Gemacht mit <0>♥</0> in"
+    },
+    "button": {
+        "close": "Schließen",
+        "cancel": "Abbrechen",
+        "login": "Einloggen",
+        "logout": "Ausloggen",
+        "go-to-the-home-page": "Zur Homepage",
+        "learn-more": "Mehr erfahren",
+        "fund-this-package": "Dieses Paket <0>finanzieren</0>"
+    },
+    "error": {
+        "unspecific": "Etwas ist schief gelaufen.",
+        "404": {
+            "page-not-found": "404 - Seite nicht gefunden",
+            "sorry-we-could-not-find-it": "Entschuldigung, wir konnten es nicht finden..."
+        },
+        "app-context-not-correct-used": "Der App-Kontext wurde nicht korrekt verwendet",
+        "package-meta-is-required-at-detail-context": "packageMeta wird bei DetailContext benötigt"
+    }
+}
--- a/i18n/translations/en-US.json
+++ b/i18n/translations/en-US.json
@@ -0,0 +1,138 @@
+{
+    "copy-to-clipboard": "Copy to clipboard",
+    "author-anonymous": "Anonymous",
+    "action-bar-action": {
+        "visit-home-page": "Visit homepage",
+        "open-an-issue": "Open an issue",
+        "download-tarball": "Download tarball"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "Register Info"
+        }
+    },
+    "header": {
+        "documentation": "Documentation",
+        "registry-info": "Registry Information",
+        "greetings": "Hi "
+    },
+    "search": {
+        "packages": "Search Packages"
+    },
+    "auto-complete": {
+        "loading": "Loading...",
+        "no-results-found": "No results found"
+    },
+    "tab": {
+        "uplinks": "Uplinks",
+        "versions": "Versions",
+        "dependencies": "Dependencies",
+        "readme": "Readme"
+    },
+    "uplinks": {
+        "title": "Uplinks",
+        "no-items": "{{name}} has no uplinks."
+    },
+    "versions": {
+        "current-tags": "Current Tags",
+        "version-history": "Version history",
+        "not-available": "Not available"
+    },
+    "package": {
+        "published-on": "Published on {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "Visit homepage",
+        "homepage": "Homepage",
+        "open-an-issue": "Open an issue",
+        "bugs": "Bugs",
+        "download": "Download {{what}}",
+        "the-tar-file": "the tar file",
+        "tarball": "Tarball"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} has no dependencies.",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "Username",
+        "password": "Password"
+    },
+    "form-placeholder": {
+        "username": "Your username",
+        "password": "Your strong password"
+    },
+    "form-validation": {
+        "required-field": "This field is required",
+        "required-min-length": "This field required the min length of {{length}}",
+        "unable-to-sign-in": "Unable to sign in",
+        "username-or-password-cant-be-empty": "Username or password can't be empty!"
+    },
+    "help": {
+        "title": "No Package Published Yet.",
+        "sub-title": "To publish your first package just:",
+        "first-step": "1. Login",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. Publish",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. Refresh this page."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "Latest v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "Installation",
+            "install-using-yarn": "Install using yarn",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "Install using npm",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "Install using pnpm",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "Repository"
+        },
+        "author": {
+            "title": "Author"
+        },
+        "distribution": {
+            "title": "Latest Distribution",
+            "license": "License",
+            "size": "Size",
+            "file-count": "file count"
+        },
+        "maintainers": {
+            "title": "Maintainers"
+        },
+        "contributors": {
+            "title": "Contributors"
+        },
+        "engines": {
+            "npm-version": "NPM Version",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Powered by",
+        "made-with-love-on": "Made with <0>♥</0> on"
+    },
+    "button": {
+        "close": "Close",
+        "cancel": "Cancel",
+        "login": "Login",
+        "logout": "Logout",
+        "go-to-the-home-page": "Go to the home page",
+        "learn-more": "Learn More",
+        "fund-this-package": "<0>Fund</0> this package"
+    },
+    "error": {
+        "unspecific": "Something went wrong.",
+        "404": {
+            "page-not-found": "404 - Page not found",
+            "sorry-we-could-not-find-it": "Sorry, we couldn't find it..."
+        },
+        "app-context-not-correct-used": "The app context was not correct used",
+        "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
+    }
+}
--- a/i18n/translations/es-ES.json
+++ b/i18n/translations/es-ES.json
@@ -0,0 +1,138 @@
+{
+    "copy-to-clipboard": "Copiar al portapapeles",
+    "author-anonymous": "Anónimo",
+    "action-bar-action": {
+        "visit-home-page": "Visitar página principal",
+        "open-an-issue": "Reportar un error",
+        "download-tarball": "Descargar libreria"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "Información del Registro"
+        }
+    },
+    "header": {
+        "documentation": "Documentación",
+        "registry-info": "Información del Registro",
+        "greetings": "Hola "
+    },
+    "search": {
+        "packages": "Buscar paquetes"
+    },
+    "auto-complete": {
+        "loading": "Cargando...",
+        "no-results-found": "Sin resultados encontrados"
+    },
+    "tab": {
+        "uplinks": "Remoto",
+        "versions": "Versiones",
+        "dependencies": "Dependencias",
+        "readme": "Léeme"
+    },
+    "uplinks": {
+        "title": "Remoto",
+        "no-items": "{{name}} not tiene remotos."
+    },
+    "versions": {
+        "current-tags": "Etiquetas actuales",
+        "version-history": "Historial de versiones",
+        "not-available": "No disponible"
+    },
+    "package": {
+        "published-on": "Publicado en {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "Ir a la página principal",
+        "homepage": "Página pricinpal",
+        "open-an-issue": "Reportar un problema",
+        "bugs": "Errores",
+        "download": "Descargar {{what}}",
+        "the-tar-file": "el archivo tar",
+        "tarball": "Libreria"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} no tiene dependencias.",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "Usuario",
+        "password": "Contraseña"
+    },
+    "form-placeholder": {
+        "username": "Tu usuario",
+        "password": "Tu fuerte conntraseña"
+    },
+    "form-validation": {
+        "required-field": "Este campo es requerido",
+        "required-min-length": "Este campo es requerido y la mínima longitud es {{length}}",
+        "unable-to-sign-in": "No se ha podido iniciar sesión",
+        "username-or-password-cant-be-empty": "Nombre de usuario o contraseña no puede estar vacio!"
+    },
+    "help": {
+        "title": "Ningún paquete ha sido publicado aun.",
+        "sub-title": "Para publicar tu primer paquete:",
+        "first-step": "1. Inicia sesión",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. Publica",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. Refresca la página."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "Última v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "Instalación",
+            "install-using-yarn": "Instala usando yarn",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "Instala usando npm",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "Instala usando pnpm",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "Repositorio"
+        },
+        "author": {
+            "title": "Autor"
+        },
+        "distribution": {
+            "title": "Última distribución",
+            "license": "Licencia",
+            "size": "Tamaño",
+            "file-count": "archivo cuenta"
+        },
+        "maintainers": {
+            "title": "Mantenedores"
+        },
+        "contributors": {
+            "title": "Colaboradores"
+        },
+        "engines": {
+            "npm-version": "Version NPM",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Hecho con",
+        "made-with-love-on": "Hecho con <0>♥</0> on"
+    },
+    "button": {
+        "close": "Cerrar",
+        "cancel": "Cancelar",
+        "login": "Iniciar sesión",
+        "logout": "Cerrar sesión",
+        "go-to-the-home-page": "Ir a la página principal",
+        "learn-more": "Aprender más",
+        "fund-this-package": "<0>Donar</0> a este paquete"
+    },
+    "error": {
+        "unspecific": "Algo ha salido mal.",
+        "404": {
+            "page-not-found": "404 - Paquete no encontrado",
+            "sorry-we-could-not-find-it": "Lo siento, no hemos podido encontrarlo..."
+        },
+        "app-context-not-correct-used": "El contexto de la aplicación no fue correctamente usado",
+        "package-meta-is-required-at-detail-context": "packageMeta es requerido en DetailContext"
+    }
+}
--- a/i18n/translations/pt-BR.json
+++ b/i18n/translations/pt-BR.json
@@ -0,0 +1,138 @@
+{
+    "copy-to-clipboard": "Copiar para área de transferência",
+    "author-anonymous": "Anônimo(a)",
+    "action-bar-action": {
+        "visit-home-page": "Visitar a página inicial",
+        "open-an-issue": "Criar um incidente",
+        "download-tarball": "Baixar Tarball"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "Informações do Registro"
+        }
+    },
+    "header": {
+        "documentation": "Documentação",
+        "registry-info": "Informações do Registro",
+        "greetings": "Oi "
+    },
+    "search": {
+        "packages": "Pesquisar Pacotes"
+    },
+    "auto-complete": {
+        "loading": "Carregando...",
+        "no-results-found": "Nenhum resultado encontrado"
+    },
+    "tab": {
+        "uplinks": "Uplinks",
+        "versions": "Versões",
+        "dependencies": "Dependências",
+        "readme": "Leia-me"
+    },
+    "uplinks": {
+        "title": "Uplinks",
+        "no-items": "{{name}} não tem uplinks."
+    },
+    "versions": {
+        "current-tags": "Tags atuais",
+        "version-history": "Histórico de versões",
+        "not-available": "Não disponível"
+    },
+    "package": {
+        "published-on": "Publicado em {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "Visitar a página inicial",
+        "homepage": "Página inicial",
+        "open-an-issue": "Criar um incidente",
+        "bugs": "Erros",
+        "download": "Baixar {{what}}",
+        "the-tar-file": "o arquivo tar",
+        "tarball": "Tarball"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} não tem dependências.",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "Nome do usuário",
+        "password": "Senha"
+    },
+    "form-placeholder": {
+        "username": "O seu nome",
+        "password": "A sua senha forte"
+    },
+    "form-validation": {
+        "required-field": "Este campo é obrigatório",
+        "required-min-length": "Este campo requer o mínimo de {{length}} caracteres",
+        "unable-to-sign-in": "Não foi possível fazer login",
+        "username-or-password-cant-be-empty": "Nome de usuário ou senha não podem estar vazios!"
+    },
+    "help": {
+        "title": "Nenhum pacote publicado ainda.",
+        "sub-title": "Para publicar seu primeiro pacote apenas:",
+        "first-step": "1. Faça login",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. Publique",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. Atualize esta página."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "Última versão: v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "Instalação",
+            "install-using-yarn": "Instale usando yarn",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "Instale usando npm",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "Instale usando pnpm",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "Repositório"
+        },
+        "author": {
+            "title": "Autor(a)"
+        },
+        "distribution": {
+            "title": "Distribuição mais recente",
+            "license": "Licença",
+            "size": "Tamanho",
+            "file-count": "Contagem de arquivos"
+        },
+        "maintainers": {
+            "title": "Mantenedores(as)"
+        },
+        "contributors": {
+            "title": "Contribuidores(as)"
+        },
+        "engines": {
+            "npm-version": "Versão NPM",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Distribuído por",
+        "made-with-love-on": "Feito com amor <0>♥</0> no(a)"
+    },
+    "button": {
+        "close": "Fechar",
+        "cancel": "Cancelar",
+        "login": "Conectar",
+        "logout": "Desconectar",
+        "go-to-the-home-page": "Ir para a página inicial",
+        "learn-more": "Leia mais",
+        "fund-this-package": "<0>Financie</0> este pacote"
+    },
+    "error": {
+        "unspecific": "Algo deu errado.",
+        "404": {
+            "page-not-found": "404 - Página não encontrada",
+            "sorry-we-could-not-find-it": "Desculpe, não conseguimos encontrar..."
+        },
+        "app-context-not-correct-used": "O contexto do aplicativo não foi usado corretamente",
+        "package-meta-is-required-at-detail-context": "packageMeta é requerido em DetailContext"
+    }
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@verdaccio/ui-theme",
-  "version": "0.3.12",
+  "version": "1.0.0",
  "description": "Verdaccio User Interface",
  "author": {
    "name": "Verdaccio Core Team",
@@ -13,10 +13,10 @@
  "homepage": "https://verdaccio.org",
  "main": "index.js",
  "devDependencies": {
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.7.4",
-    "@babel/plugin-proposal-optional-chaining": "7.7.5",
-    "@commitlint/cli": "8.2.0",
-    "@commitlint/config-conventional": "8.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.8.0",
+    "@babel/plugin-proposal-optional-chaining": "7.8.0",
+    "@commitlint/cli": "8.3.5",
+    "@commitlint/config-conventional": "8.3.4",
    "@emotion/core": "10.0.22",
    "@emotion/styled": "10.0.23",
    "@material-ui/core": "4.8.0",
@@ -29,33 +29,33 @@
    "@types/jest": "24.0.24",
    "@types/js-base64": "2.3.1",
    "@types/lodash": "4.14.149",
-    "@types/node": "12.12.21",
+    "@types/node": "13.1.6",
    "@types/react": "16.9.17",
    "@types/react-autosuggest": "9.3.13",
    "@types/react-dom": "16.9.4",
    "@types/react-router-dom": "5.1.3",
    "@types/request": "2.48.4",
    "@types/validator": "12.0.1",
-    "@types/webpack-env": "1.14.1",
-    "@typescript-eslint/parser": "2.12.0",
-    "@verdaccio/babel-preset": "8.4.2",
-    "@verdaccio/commons-api": "8.4.2",
+    "@types/webpack-env": "1.15.0",
+    "@typescript-eslint/parser": "2.18.0",
+    "@verdaccio/babel-preset": "9.0.0",
+    "@verdaccio/commons-api": "9.0.0",
    "@verdaccio/eslint-config": "8.4.2",
-    "@verdaccio/types": "8.4.2",
+    "@verdaccio/types": "9.0.0",
    "autosuggest-highlight": "3.1.1",
    "babel-loader": "8.0.6",
    "bundlesize": "0.18.0",
-    "codeceptjs": "2.3.6",
-    "codecov": "3.6.1",
+    "codeceptjs": "2.4.0",
+    "codecov": "3.6.5",
    "concurrently": "5.0.2",
    "cross-env": "6.0.3",
-    "css-loader": "3.4.0",
-    "dayjs": "1.8.18",
+    "css-loader": "3.4.2",
+    "dayjs": "1.8.19",
    "detect-secrets": "1.0.5",
-    "emotion": "10.0.23",
-    "emotion-theming": "10.0.19",
-    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.15.1",
+    "emotion": "10.0.27",
+    "emotion-theming": "10.0.27",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.2",
    "enzyme-to-json": "3.4.3",
    "eslint": "6.7.2",
    "eslint-plugin-codeceptjs": "1.2.0",
@@ -71,19 +71,20 @@
    "github-markdown-css": "3.0.1",
    "html-webpack-plugin": "3.2.0",
    "husky": "3.1.0",
+    "i18next": "19.1.0",
    "identity-obj-proxy": "3.0.0",
    "in-publish": "2.0.0",
    "jest": "24.9.0",
-    "jest-emotion": "10.0.26",
+    "jest-emotion": "10.0.27",
    "jest-environment-jsdom": "24.9.0",
    "jest-environment-jsdom-global": "1.2.0",
-    "jest-environment-node": "24.9.0",
-    "jest-fetch-mock": "2.1.2",
+    "jest-environment-node": "25.1.0",
+    "jest-fetch-mock": "3.0.1",
    "js-base64": "2.5.1",
    "js-yaml": "3.13.1",
    "lint-staged": "9.5.0",
    "localstorage-memory": "1.0.3",
-    "lockfile-lint": "3.0.3",
+    "lockfile-lint": "3.0.5",
    "lodash": "^4.17.15",
    "mini-css-extract-plugin": "0.9.0",
    "mutationobserver-shim": "0.3.3",
@@ -96,9 +97,10 @@
    "puppeteer": "2.0.0",
    "react": "16.12.0",
    "react-autosuggest": "9.4.3",
-    "react-dom": "16.12.0",
+    "react-dom": "16.13.0",
    "react-hook-form": "3.29.4",
    "react-hot-loader": "4.12.18",
+    "react-i18next": "11.3.1",
    "react-router-dom": "5.1.2",
    "request": "2.88.0",
    "resolve-url-loader": "3.1.1",
@@ -113,15 +115,15 @@
    "stylelint-webpack-plugin": "1.1.2",
    "supertest": "4.0.2",
    "typeface-roboto": "0.0.75",
-    "typescript": "3.7.3",
+    "typescript": "3.7.4",
    "uglifyjs-webpack-plugin": "2.2.0",
    "url-loader": "3.0.0",
    "validator": "12.1.0",
-    "verdaccio": "4.4.0",
-    "verdaccio-auth-memory": "8.4.2",
-    "verdaccio-memory": "8.4.2",
+    "verdaccio": "4.4.2",
+    "verdaccio-auth-memory": "9.0.0",
+    "verdaccio-memory": "9.0.0",
    "wait-on": "3.3.0",
-    "webpack": "4.41.4",
+    "webpack": "4.41.5",
    "webpack-bundle-analyzer": "3.6.0",
    "webpack-bundle-size-analyzer": "3.1.0",
    "webpack-cli": "3.3.10",
@@ -138,7 +140,7 @@
  "bundlesize": [
    {
      "path": "./static/vendors.*.js",
-      "maxSize": "185 kB"
+      "maxSize": "200 kB"
    },
    {
      "path": "./static/main.*.js",
@@ -171,6 +173,7 @@
    "test:acceptance:server": "concurrently --kill-others \"npm run verdaccio:server\" \"npm run test:acceptance\"",
    "test:e2e": "cross-env BABEL_ENV=test jest --config ./test/jest.config.e2e.js",
    "test": "cross-env NODE_ENV=test BABEL_ENV=test TZ=UTC jest --config ./jest/jest.config.js --maxWorkers 2 --passWithNoTests",
+    "test:update-snapshot": "npm run test -- -u",
    "test:size": "bundlesize",
    "lint": "npm run lint:js && npm run lint:css && npm run lint:lockfile",
    "lint:js": "npm run type-check && eslint . --ext .js,.ts,.tsx",
--- a/partials/storage/jquery/package.json
+++ b/partials/storage/jquery/package.json
@@ -4976,8 +4976,12 @@
 	"_attachments": {
 		"jquery-1.5.1.tgz": {
 			"shasum": "2ae2d661e906c1a01e044a71bb5b2743942183e5"
+		},
+		"jquery-3.3.1.tgz": {
+			"shasum": "958ce29e81c9790f31be7792df5d4d95fc57fbca"
 		}
 	},
-	"_rev": "60-fed4915c27b9c1e6",
-	"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```"
-}
+	"_rev": "61-e6be890a78963127",
+	"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```",
+	"_id": "jquery"
+}
--- a/src/App/App.tsx
+++ b/src/App/App.tsx
@@ -1,20 +1,22 @@
-import React, { useState, useEffect } from 'react';
+/* eslint-disable react/jsx-max-depth */
+import React, { useState, useEffect, Suspense } from 'react';
 import styled from '@emotion/styled';
 import isNil from 'lodash/isNil';
 import { Router } from 'react-router-dom';

+import '../../i18n/config';
 import storage from '../utils/storage';
 import { isTokenExpire } from '../utils/login';
-import API from '../utils/api';
 import Header from '../components/Header';
 import Footer from '../components/Footer';
-import Box from '../muiComponents/Box';
 import Loading from '../components/Loading';
+import Box from '../muiComponents/Box';
 import StyleBaseline from '../design-tokens/StyleBaseline';
 import { Theme } from '../design-tokens/theme';

 import AppContextProvider from './AppContextProvider';
 import AppRoute, { history } from './AppRoute';
+import loadDayJSLocale from './load-dayjs-locale';

 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
  backgroundColor: theme && theme.palette.white,
@@ -33,11 +35,8 @@ const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
 /* eslint-disable react-hooks/exhaustive-deps */
 const App: React.FC = () => {
  const [user, setUser] = useState();
-  const [packages, setPackages] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-
  /**
-   * Logouts user
+   * Logout user
   * Required by: <Header />
   */
  const logout = () => {
@@ -59,48 +58,28 @@ const App: React.FC = () => {
    setUser({ username });
  };

-  const loadOnHandler = async () => {
-    try {
-      const packages = await API.request('packages', 'GET');
-      // FIXME add correct type for package
-      setPackages(packages as never[]);
-    } catch (error) {
-      // FIXME: add dialog
-      console.error({
-        title: 'Warning',
-        message: `Unable to load package list: ${error.message}`,
-      });
-    }
-
-    setIsLoading(false);
-  };
-
  useEffect(() => {
    checkUserAlreadyLoggedIn();
-    loadOnHandler();
+    loadDayJSLocale();
  }, []);

  return (
-    <>
+    <Suspense fallback={<Loading />}>
      <StyleBaseline />
      <StyledBox display="flex" flexDirection="column" height="100%">
-        {isLoading ? (
-          <Loading />
-        ) : (
-          <>
-            <Router history={history}>
-              <AppContextProvider packages={packages} user={user}>
-                <Header />
-                <StyledBoxContent flexGrow={1}>
-                  <AppRoute />
-                </StyledBoxContent>
-              </AppContextProvider>
-            </Router>
-            <Footer />
-          </>
-        )}
+        <>
+          <Router history={history}>
+            <AppContextProvider user={user}>
+              <Header />
+              <StyledBoxContent flexGrow={1}>
+                <AppRoute />
+              </StyledBoxContent>
+            </AppContextProvider>
+          </Router>
+          <Footer />
+        </>
      </StyledBox>
-    </>
+    </Suspense>
  );
 };

--- a/src/App/AppContext.ts
+++ b/src/App/AppContext.ts
@@ -3,7 +3,6 @@ import { createContext } from 'react';
 export interface AppProps {
  user?: User;
  scope: string;
-  packages: any[];
 }

 export interface User {
--- a/src/App/AppContextProvider.tsx
+++ b/src/App/AppContextProvider.tsx
@@ -3,15 +3,13 @@ import React, { useState, useEffect } from 'react';
 import AppContext, { AppProps, User } from './AppContext';

 interface Props {
-  packages: any[];
  user?: User;
 }

 /* eslint-disable react-hooks/exhaustive-deps */
-const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
+const AppContextProvider: React.FC<Props> = ({ children, user }) => {
  const [state, setState] = useState<AppProps>({
    scope: window.VERDACCIO_SCOPE || '',
-    packages,
    user,
  });

@@ -22,13 +20,6 @@ const AppContextProvider: React.FC<Props> = ({ children, packages, user }) => {
    });
  }, [user]);

-  useEffect(() => {
-    setState({
-      ...state,
-      packages,
-    });
-  }, [packages]);
-
  const setUser = (user?: User) => {
    setState({
      ...state,
--- a/src/App/AppRoute.tsx
+++ b/src/App/AppRoute.tsx
@@ -1,8 +1,7 @@
-import React, { lazy, useContext, Suspense } from 'react';
+import React, { lazy, useContext } from 'react';
 import { Route as ReactRouterDomRoute, Switch, Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
-
-import Loading from '../components/Loading';
+import { useTranslation } from 'react-i18next';

 import AppContext from './AppContext';

@@ -25,47 +24,46 @@ export const history = createBrowserHistory({

 const AppRoute: React.FC = () => {
  const appContext = useContext(AppContext);
+  const { t } = useTranslation();

  if (!appContext) {
-    throw Error('The app Context was not correct used');
+    throw Error(t('app-context-not-correct-used'));
  }

-  const { user, packages } = appContext;
+  const { user } = appContext;

  const isUserLoggedIn = user && user.username;

  return (
    <Router history={history}>
-      <Suspense fallback={<Loading />}>
-        <Switch>
-          <ReactRouterDomRoute exact={true} path={Route.ROOT}>
-            <HomePage isUserLoggedIn={!!isUserLoggedIn} packages={packages || []} />
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
-            <VersionContextProvider>
-              <VersionPage />
-            </VersionContextProvider>
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
-            <VersionContextProvider>
-              <VersionPage />
-            </VersionContextProvider>
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
-            <VersionContextProvider>
-              <VersionPage />
-            </VersionContextProvider>
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
-            <VersionContextProvider>
-              <VersionPage />
-            </VersionContextProvider>
-          </ReactRouterDomRoute>
-          <ReactRouterDomRoute>
-            <NotFound />
-          </ReactRouterDomRoute>
-        </Switch>
-      </Suspense>
+      <Switch>
+        <ReactRouterDomRoute exact={true} path={Route.ROOT}>
+          <HomePage isUserLoggedIn={!!isUserLoggedIn} />
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.PACKAGE}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.PACKAGE_VERSION}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE_VERSION}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute exact={true} path={Route.SCOPE_PACKAGE}>
+          <VersionContextProvider>
+            <VersionPage />
+          </VersionContextProvider>
+        </ReactRouterDomRoute>
+        <ReactRouterDomRoute>
+          <NotFound />
+        </ReactRouterDomRoute>
+      </Switch>
    </Router>
  );
 };
--- a/src/App/snapshots/App.test.tsx.snap
+++ b/src/App/snapshots/App.test.tsx.snap
--- a/src/App/load-dayjs-locale.ts
+++ b/src/App/load-dayjs-locale.ts
@@ -0,0 +1,52 @@
+import dayjs from 'dayjs';
+import i18n from 'i18next';
+
+function getFallFackLanguage(): string | undefined {
+  const fallbackLanguage = i18n.options.fallbackLng;
+
+  if (Array.isArray(fallbackLanguage)) {
+    return fallbackLanguage[0];
+  }
+
+  if (typeof fallbackLanguage === 'string') {
+    return fallbackLanguage;
+  }
+
+  return undefined;
+}
+
+function loadDayJSLocale() {
+  const fallbackLanguage = getFallFackLanguage();
+  const locale = i18n.language || fallbackLanguage;
+
+  // dayjs loades en-US by default
+  if (!locale || locale === 'en-US') {
+    return;
+  }
+
+  switch (locale.toLowerCase()) {
+    // At the moment we only support pt-BR, please see: i18n/translations/*
+    case 'pt-br':
+      {
+        require('dayjs/locale/pt-br');
+        dayjs.locale('pt-br');
+      }
+      break;
+    case 'de':
+      {
+        require('dayjs/locale/de');
+        dayjs.locale('de');
+      }
+      break;
+    case 'es-es':
+      {
+        require('dayjs/locale/es');
+        dayjs.locale('es');
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+export default loadDayJSLocale;
--- a/src/components/ActionBar/ActionBarAction.tsx
+++ b/src/components/ActionBar/ActionBarAction.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import BugReportIcon from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
+import { useTranslation } from 'react-i18next';

 import Tooltip from '../../muiComponents/Tooltip';
 import Link from '../Link';
@@ -26,10 +27,11 @@ export interface ActionBarActionProps {

 /* eslint-disable react/jsx-no-bind */
 const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
+  const { t } = useTranslation();
  switch (type) {
    case 'VISIT_HOMEPAGE':
      return (
-        <Tooltip title="Visit homepage">
+        <Tooltip title={t('action-bar-action.visit-home-page')}>
          <Link external={true} to={link}>
            <Fab size="small">
              <HomeIcon />
@@ -39,7 +41,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
      );
    case 'OPEN_AN_ISSUE':
      return (
-        <Tooltip title="Open an issue">
+        <Tooltip title={t('action-bar-action.open-an-issue')}>
          <Link external={true} to={link}>
            <Fab size="small">
              <BugReportIcon />
@@ -49,7 +51,7 @@ const ActionBarAction: React.FC<ActionBarActionProps> = ({ type, link }) => {
      );
    case 'DOWNLOAD_TARBALL':
      return (
-        <Tooltip title="Download tarball">
+        <Tooltip title={t('action-bar-action.download-tarball')}>
          <Fab data-testid="download-tarball-btn" onClick={downloadTarball(link)} size="small">
            <DownloadIcon />
          </Fab>
--- a/src/components/Author/Author.tsx
+++ b/src/components/Author/Author.tsx
@@ -1,14 +1,17 @@
 import React, { FC, useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import { isEmail } from '../../utils/url';
 import Avatar from '../../muiComponents/Avatar';
 import List from '../../muiComponents/List';
+import { getAuthorName } from '../../utils/package';

 import { StyledText, AuthorListItem, AuthorListItemText } from './styles';

 const Author: FC = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!packageMeta) {
    return null;
@@ -25,7 +28,7 @@ const Author: FC = () => {
  const avatarComponent = <Avatar alt={author.name} src={author.avatar} />;

  return (
-    <List subheader={<StyledText variant={'subtitle1'}>{'Author'}</StyledText>}>
+    <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.author.title')}</StyledText>}>
      <AuthorListItem button={true}>
        {!email || !isEmail(email) ? (
          avatarComponent
@@ -34,8 +37,7 @@ const Author: FC = () => {
            {avatarComponent}
          </a>
        )}
-
-        <AuthorListItemText primary={name} />
+        {name && <AuthorListItemText primary={getAuthorName(name)} />}
      </AuthorListItem>
    </List>
  );
--- a/src/components/Author/snapshots/Author.test.tsx.snap
+++ b/src/components/Author/snapshots/Author.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

-exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-5wp24z-StyledText e1xuehjw0 MuiTypography-subtitle1\\">sidebar.author.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1k45khb-AuthorListItem e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1cnlq5d-AuthorListItemText e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
--- a/src/components/Author/styles.ts
+++ b/src/components/Author/styles.ts
@@ -7,7 +7,6 @@ import { Theme } from '../../design-tokens/theme';

 export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
  fontWeight: props.theme && props.theme.fontWeight.bold,
-  textTransform: 'capitalize',
 }));

 export const AuthorListItem = styled(ListItem)({
--- a/src/components/AutoComplete/AutoComplete.tsx
+++ b/src/components/AutoComplete/AutoComplete.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
+import { useTranslation } from 'react-i18next';

 import MenuItem from '../../muiComponents/MenuItem';
 import { Theme } from '../../design-tokens/theme';
@@ -83,12 +84,6 @@ const renderMessage = (message): JSX.Element => {
  );
 };

-const SUGGESTIONS_RESPONSE = {
-  LOADING: 'Loading...',
-  FAILURE: 'Something went wrong.',
-  NO_RESULT: 'No results found.',
-};
-
 const AutoComplete = memo(
  ({
    suggestions,
@@ -106,6 +101,8 @@ const AutoComplete = memo(
    suggestionsLoaded = false,
    suggestionsError = false,
  }: Props) => {
+    const { t } = useTranslation();
+
    const autosuggestProps = {
      renderInputComponent,
      suggestions,
@@ -130,9 +127,9 @@ const AutoComplete = memo(
    function renderSuggestionsContainer({ containerProps, children, query }): JSX.Element {
      return (
        <SuggestionContainer {...containerProps} square={true}>
-          {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
-          {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
-          {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
+          {suggestionsLoaded && children === null && query && renderMessage(t('auto-complete.no-results-found'))}
+          {suggestionsLoading && query && renderMessage(t('auto-complete.loading'))}
+          {suggestionsError && renderMessage(t('error.unspecific'))}
          {children}
        </SuggestionContainer>
      );
--- a/src/components/CopyToClipBoard/CopyToClipBoard.tsx
+++ b/src/components/CopyToClipBoard/CopyToClipBoard.tsx
@@ -1,8 +1,8 @@
 import FileCopy from '@material-ui/icons/FileCopy';
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 import { copyToClipBoardUtility } from '../../utils/cli-utils';
-import { TEXT } from '../../utils/constants';
 import Tooltip from '../../muiComponents/Tooltip';

 import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
@@ -20,19 +20,16 @@ const renderText = (text: string, children: React.ReactNode): JSX.Element => {
  return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
 };

-const renderToolTipFileCopy = (text: string): React.ReactElement<HTMLElement> => (
-  <Tooltip disableFocusListener={true} title={TEXT.CLIPBOARD_COPY}>
-    <CopyIcon onClick={copyToClipBoardUtility(text)}>
-      <FileCopy />
-    </CopyIcon>
-  </Tooltip>
-);
-
 const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
+  const { t } = useTranslation();
  return (
    <ClipBoardCopy>
      {renderText(text, children)}
-      {renderToolTipFileCopy(text)}
+      <Tooltip disableFocusListener={true} title={t('copy-to-clipboard')}>
+        <CopyIcon onClick={copyToClipBoardUtility(text)}>
+          <FileCopy />
+        </CopyIcon>
+      </Tooltip>
    </ClipBoardCopy>
  );
 };
--- a/src/components/CopyToClipBoard/snapshots/CopyToClipBoard.test.tsx.snap
+++ b/src/components/CopyToClipBoard/snapshots/CopyToClipBoard.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root  css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`;
+exports[`<CopyToClipBoard /> component should load the component in default state 1`] = `"<div class=\\"css-1in239f-ClipBoardCopy eb8w2fo0\\"><span class=\\"css-7gar9h-ClipBoardCopyText eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root MuiIconButton-root  css-1fs86cq-CopyIcon eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"copy-to-clipboard\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></div>"`;
--- a/src/components/Dependencies/Dependencies.tsx
+++ b/src/components/Dependencies/Dependencies.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';

 import CardContent from '../../muiComponents/CardContent';
 import { PackageDependencies } from '../../../types/packageMeta';
@@ -16,6 +17,7 @@ interface DependencyBlockProps {
 const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }) => {
  const { enableLoading } = useContext(DetailContext);
  const history = useHistory();
+  const { t } = useTranslation();

  const deps = Object.entries(dependencies);

@@ -31,8 +33,14 @@ const DependencyBlock: React.FC<DependencyBlockProps> = ({ title, dependencies }
        <StyledText variant="subtitle1">{`${title} (${deps.length})`}</StyledText>
        <Tags>
          {deps.map(([name, version]) => (
-            // eslint-disable-next-line
-            <Tag className={'dep-tag'} clickable={true} key={name} label={`${name}@${version}`} onClick={() => handleClick(name)} />
+            <Tag
+              className={'dep-tag'}
+              clickable={true}
+              key={name}
+              label={t('dependencies.dependency-block', { package: name, version })}
+              // eslint-disable-next-line
+              onClick={() => handleClick(name)}
+            />
          ))}
        </Tags>
      </CardContent>
@@ -46,9 +54,10 @@ function hasKeys(object?: { [key: string]: any }): boolean {

 const Dependencies: React.FC<{}> = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!packageMeta) {
-    throw new Error('packageMeta is required at DetailContext');
+    throw new Error(t('error.package-meta-is-required-at-detail-context'));
  }

  const { latest } = packageMeta;
@@ -72,7 +81,7 @@ const Dependencies: React.FC<{}> = () => {
    );
  }

-  return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />;
+  return <NoItems className="no-dependencies" text={t('dependencies.has-no-dependencies', { package: name })} />;
 };

 export default Dependencies;
--- a/src/components/DetailContainer/DetailContainer.tsx
+++ b/src/components/DetailContainer/DetailContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
+import React, { useState, useContext } from 'react';

 import { DetailContext } from '../../pages/Version';
 import Box from '../../muiComponents/Box';
@@ -8,24 +8,19 @@ import DetailContainerContent from './DetailContainerContent';
 import { TabPosition } from './tabs';

 const DetailContainer: React.FC = () => {
-  const [tabPosition, setTabPosition] = useState(TabPosition.README);
+  const tabs = Object.values(TabPosition);
+  const [tabPosition, setTabPosition] = useState(0);
  const detailContext = useContext(DetailContext);
  const { readMe } = detailContext;

-  const handleChangeTabPosition = useCallback(
-    (event: ChangeEvent<{}>) => {
-      event.preventDefault();
-      const eventTarget = event.target as HTMLSpanElement;
-      const chosentab = eventTarget.innerText as TabPosition;
-      setTabPosition(TabPosition[chosentab]);
-    },
-    [setTabPosition]
-  );
+  const handleChange = (event, newValue) => {
+    setTabPosition(newValue);
+  };

  return (
    <Box component="div" display="flex" flexDirection="column" padding={2}>
-      <DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
-      <DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
+      <DetailContainerTabs onChange={handleChange} tabPosition={tabPosition} />
+      <DetailContainerContent readDescription={readMe} tabPosition={tabs[tabPosition]} />
    </Box>
  );
 };
--- a/src/components/DetailContainer/DetailContainerTabs.tsx
+++ b/src/components/DetailContainer/DetailContainerTabs.tsx
@@ -1,44 +1,35 @@
-import React, { ChangeEvent, useState, useEffect } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import { default as MuiTabs } from '../../muiComponents/Tabs';
 import Tab from '../../muiComponents/Tab';

-import { TabPosition } from './tabs';
-
 interface Props {
-  tabPosition: TabPosition;
-  onChangeTabPosition: (event: ChangeEvent<{}>) => void;
+  onChange: (event, newValue) => void;
+  tabPosition: number;
 }

-const Tabs = styled(MuiTabs)({
-  marginBottom: 16,
-});
-
-const getTabIndex = (tabPosition: TabPosition): number =>
-  Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
-
-const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
-  const [tabPositionIndex, setTabPositionIndex] = useState(0);
-
-  useEffect(() => {
-    const tabIndex = getTabIndex(tabPosition);
-    setTabPositionIndex(tabIndex);
-  }, [tabPosition]);
+const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChange }) => {
+  const { t } = useTranslation();

  return (
    <Tabs
      indicatorColor={'primary'}
-      onChange={onChangeTabPosition}
+      onChange={onChange}
      textColor={'primary'}
-      value={tabPositionIndex}
+      value={tabPosition}
      variant={'fullWidth'}>
-      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />
-      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} />
-      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} />
-      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={TabPosition.UPLINKS} />
+      <Tab data-testid={'readme-tab'} id={'readme-tab'} label={t('tab.readme')} />
+      <Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={t('tab.dependencies')} />
+      <Tab data-testid={'versions-tab'} id={'versions-tab'} label={t('tab.versions')} />
+      <Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={t('tab.uplinks')} />
    </Tabs>
  );
 };

 export default DetailContainerTabs;
+
+const Tabs = styled(MuiTabs)({
+  marginBottom: 16,
+});
--- a/src/components/DetailContainer/tabs.ts
+++ b/src/components/DetailContainer/tabs.ts
@@ -1,6 +1,6 @@
 export enum TabPosition {
-  README = 'Readme',
-  DEPENDENCIES = 'Dependencies',
-  VERSIONS = 'Versions',
-  UPLINKS = 'Uplinks',
+  README = 'readme',
+  DEPENDENCIES = 'dependencies',
+  VERSIONS = 'versions',
+  UPLINKS = 'uplinks',
 }
--- a/src/components/DetailSidebar/DetailSidebarFundButton.tsx
+++ b/src/components/DetailSidebar/DetailSidebarFundButton.tsx
@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 import Favorite from '@material-ui/icons/Favorite';
+import { Trans } from 'react-i18next';

 import Button from '../../muiComponents/Button';
 import Link from '../Link';
@@ -38,8 +39,7 @@ const DetailSidebarFundButton: React.FC = () => {
  return (
    <StyledLink external={true} to={fundingUrl}>
      <Button color="primary" fullWidth={true} startIcon={<StyledFavoriteIcon />} variant="outlined">
-        <StyledFundStrong>{'Fund'}</StyledFundStrong>
-        {'this package'}
+        <Trans components={[<StyledFundStrong key="fund" />]} i18nKey="button.fund-this-package" />
      </Button>
    </StyledLink>
  );
--- a/src/components/DetailSidebar/DetailSidebarTitle.tsx
+++ b/src/components/DetailSidebar/DetailSidebarTitle.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import Box from '../../muiComponents/Box';
 import Heading from '../../muiComponents/Heading';
@@ -15,19 +16,23 @@ interface Props {
 const StyledHeading = styled(Heading)({
  fontSize: '1rem',
  fontWeight: 700,
-  textTransform: 'capitalize',
 });

 const StyledBoxVersion = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
  color: theme && theme.palette.text.secondary,
 }));

-const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => (
-  <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
-    <StyledHeading>{packageName}</StyledHeading>
-    {description && <div>{description}</div>}
-    <StyledBoxVersion>{`${isLatest ? 'Latest v' : 'v'}${version}`}</StyledBoxVersion>
-  </Box>
-);
+const DetailSidebarTitle: React.FC<Props> = ({ description, packageName, version, isLatest }) => {
+  const { t } = useTranslation();
+  return (
+    <Box className={'detail-info'} display="flex" flexDirection="column" marginBottom="8px">
+      <StyledHeading>{packageName}</StyledHeading>
+      {description && <div>{description}</div>}
+      <StyledBoxVersion>
+        {isLatest ? t('sidebar.detail.latest-version', { version }) : t('sidebar.detail.version', { version })}
+      </StyledBoxVersion>
+    </Box>
+  );
+};

 export default DetailSidebarTitle;
--- a/src/components/Developers/Developers.test.tsx
+++ b/src/components/Developers/Developers.test.tsx
@@ -3,7 +3,8 @@ import React from 'react';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContextProvider } from '../../pages/Version';

-import Developers, { DeveloperType, Fab } from './Developers';
+import Developers, { Fab } from './Developers';
+import { DeveloperType } from './types';

 describe('test Developers', () => {
  const packageMeta = {
--- a/src/components/Developers/Developers.tsx
+++ b/src/components/Developers/Developers.tsx
@@ -1,38 +1,29 @@
 import React, { useState, useCallback, useContext, useEffect, useMemo } from 'react';
 import Add from '@material-ui/icons/Add';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import Tooltip from '../../muiComponents/Tooltip';
 import Avatar from '../../muiComponents/Avatar';
 import Box from '../../muiComponents/Box';
-import Text from '../../muiComponents/Text';
 import FloatingActionButton from '../../muiComponents/FloatingActionButton';
 import { Theme } from '../../design-tokens/theme';

 import getUniqueDeveloperValues from './get-unique-developer-values';
+import DevelopersTitle from './DevelopersTitle';
+import { DeveloperType } from './types';

 export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
  backgroundColor: props.theme && props.theme.palette.primary.main,
  color: props.theme && props.theme.palette.white,
 }));

-export enum DeveloperType {
-  CONTRIBUTORS = 'contributors',
-  MAINTAINERS = 'maintainers',
-}
-
 interface Props {
  type: DeveloperType;
  visibleMax?: number;
 }

-export const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
-  fontWeight: theme && theme.fontWeight.bold,
-  marginBottom: '10px',
-  textTransform: 'capitalize',
-}));
-
 const StyledBox = styled(Box)({
  '> *': {
    margin: 5,
@@ -43,9 +34,10 @@ export const VISIBLE_MAX = 6;

 const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {
  const detailContext = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!detailContext) {
-    throw Error("The app's detail Context was not correct used");
+    throw Error(t('app-context-not-correct-used'));
  }

  const developers = useMemo(() => getUniqueDeveloperValues(detailContext.packageMeta?.latest[type]), [
@@ -69,7 +61,7 @@ const Developers: React.FC<Props> = ({ type, visibleMax = VISIBLE_MAX }) => {

  return (
    <>
-      <StyledText variant={'subtitle1'}>{type}</StyledText>
+      <DevelopersTitle type={type} />
      <StyledBox display="flex" flexWrap="wrap" margin="10px 0 10px 0">
        {visibleDevelopers.map(visibleDeveloper => (
          <Tooltip key={visibleDeveloper.email} title={visibleDeveloper.name}>
--- a/src/components/Developers/DevelopersTitle.tsx
+++ b/src/components/Developers/DevelopersTitle.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
+
+import Text from '../../muiComponents/Text';
+import { Theme } from '../../design-tokens/theme';
+
+import { DeveloperType } from './types';
+
+interface Props {
+  type: DeveloperType;
+}
+
+const DevelopersTitle: React.FC<Props> = ({ type }) => {
+  const { t } = useTranslation();
+  switch (type) {
+    case DeveloperType.CONTRIBUTORS:
+      return <StyledText variant={'subtitle1'}>{t('sidebar.contributors.title')}</StyledText>;
+    case DeveloperType.MAINTAINERS:
+      return <StyledText variant={'subtitle1'}>{t('sidebar.maintainers.title')}</StyledText>;
+      return null;
+  }
+};
+
+export default DevelopersTitle;
+
+const StyledText = styled(Text)<{ theme?: Theme }>(({ theme }) => ({
+  fontWeight: theme && theme.fontWeight.bold,
+  marginBottom: '10px',
+}));
--- a/src/components/Developers/snapshots/Developers.test.tsx.snap
+++ b/src/components/Developers/snapshots/Developers.test.tsx.snap
@@ -4,7 +4,6 @@ exports[`test Developers should render the component for contributors with items
 .emotion-0 {
  font-weight: 700;
  margin-bottom: 10px;
-  text-transform: capitalize;
 }

 .emotion-8 > * {
@@ -14,64 +13,68 @@ exports[`test Developers should render the component for contributors with items
 <Developers
  type="contributors"
 >
-  <StyledText
-    variant="subtitle1"
+  <DevelopersTitle
+    type="contributors"
  >
-    <ForwardRef(Text)
-      className="emotion-0 emotion-1"
+    <StyledText
      variant="subtitle1"
    >
-      <WithStyles(ForwardRef(Typography))
+      <ForwardRef(Text)
        className="emotion-0 emotion-1"
        variant="subtitle1"
      >
-        <ForwardRef(Typography)
+        <WithStyles(ForwardRef(Typography))
          className="emotion-0 emotion-1"
-          classes={
-            Object {
-              "alignCenter": "MuiTypography-alignCenter",
-              "alignJustify": "MuiTypography-alignJustify",
-              "alignLeft": "MuiTypography-alignLeft",
-              "alignRight": "MuiTypography-alignRight",
-              "body1": "MuiTypography-body1",
-              "body2": "MuiTypography-body2",
-              "button": "MuiTypography-button",
-              "caption": "MuiTypography-caption",
-              "colorError": "MuiTypography-colorError",
-              "colorInherit": "MuiTypography-colorInherit",
-              "colorPrimary": "MuiTypography-colorPrimary",
-              "colorSecondary": "MuiTypography-colorSecondary",
-              "colorTextPrimary": "MuiTypography-colorTextPrimary",
-              "colorTextSecondary": "MuiTypography-colorTextSecondary",
-              "displayBlock": "MuiTypography-displayBlock",
-              "displayInline": "MuiTypography-displayInline",
-              "gutterBottom": "MuiTypography-gutterBottom",
-              "h1": "MuiTypography-h1",
-              "h2": "MuiTypography-h2",
-              "h3": "MuiTypography-h3",
-              "h4": "MuiTypography-h4",
-              "h5": "MuiTypography-h5",
-              "h6": "MuiTypography-h6",
-              "noWrap": "MuiTypography-noWrap",
-              "overline": "MuiTypography-overline",
-              "paragraph": "MuiTypography-paragraph",
-              "root": "MuiTypography-root",
-              "srOnly": "MuiTypography-srOnly",
-              "subtitle1": "MuiTypography-subtitle1",
-              "subtitle2": "MuiTypography-subtitle2",
-            }
-          }
          variant="subtitle1"
        >
-          <h6
-            className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+          <ForwardRef(Typography)
+            className="emotion-0 emotion-1"
+            classes={
+              Object {
+                "alignCenter": "MuiTypography-alignCenter",
+                "alignJustify": "MuiTypography-alignJustify",
+                "alignLeft": "MuiTypography-alignLeft",
+                "alignRight": "MuiTypography-alignRight",
+                "body1": "MuiTypography-body1",
+                "body2": "MuiTypography-body2",
+                "button": "MuiTypography-button",
+                "caption": "MuiTypography-caption",
+                "colorError": "MuiTypography-colorError",
+                "colorInherit": "MuiTypography-colorInherit",
+                "colorPrimary": "MuiTypography-colorPrimary",
+                "colorSecondary": "MuiTypography-colorSecondary",
+                "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                "displayBlock": "MuiTypography-displayBlock",
+                "displayInline": "MuiTypography-displayInline",
+                "gutterBottom": "MuiTypography-gutterBottom",
+                "h1": "MuiTypography-h1",
+                "h2": "MuiTypography-h2",
+                "h3": "MuiTypography-h3",
+                "h4": "MuiTypography-h4",
+                "h5": "MuiTypography-h5",
+                "h6": "MuiTypography-h6",
+                "noWrap": "MuiTypography-noWrap",
+                "overline": "MuiTypography-overline",
+                "paragraph": "MuiTypography-paragraph",
+                "root": "MuiTypography-root",
+                "srOnly": "MuiTypography-srOnly",
+                "subtitle1": "MuiTypography-subtitle1",
+                "subtitle2": "MuiTypography-subtitle2",
+              }
+            }
+            variant="subtitle1"
          >
-            contributors
-          </h6>
-        </ForwardRef(Typography)>
-      </WithStyles(ForwardRef(Typography))>
-    </ForwardRef(Text)>
-  </StyledText>
+            <h6
+              className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+            >
+              sidebar.contributors.title
+            </h6>
+          </ForwardRef(Typography)>
+        </WithStyles(ForwardRef(Typography))>
+      </ForwardRef(Text)>
+    </StyledText>
+  </DevelopersTitle>
  <StyledBox
    display="flex"
    flexWrap="wrap"
@@ -427,7 +430,6 @@ exports[`test Developers should render the component for maintainers with items
 .emotion-0 {
  font-weight: 700;
  margin-bottom: 10px;
-  text-transform: capitalize;
 }

 .emotion-8 > * {
@@ -437,64 +439,68 @@ exports[`test Developers should render the component for maintainers with items
 <Developers
  type="maintainers"
 >
-  <StyledText
-    variant="subtitle1"
+  <DevelopersTitle
+    type="maintainers"
  >
-    <ForwardRef(Text)
-      className="emotion-0 emotion-1"
+    <StyledText
      variant="subtitle1"
    >
-      <WithStyles(ForwardRef(Typography))
+      <ForwardRef(Text)
        className="emotion-0 emotion-1"
        variant="subtitle1"
      >
-        <ForwardRef(Typography)
+        <WithStyles(ForwardRef(Typography))
          className="emotion-0 emotion-1"
-          classes={
-            Object {
-              "alignCenter": "MuiTypography-alignCenter",
-              "alignJustify": "MuiTypography-alignJustify",
-              "alignLeft": "MuiTypography-alignLeft",
-              "alignRight": "MuiTypography-alignRight",
-              "body1": "MuiTypography-body1",
-              "body2": "MuiTypography-body2",
-              "button": "MuiTypography-button",
-              "caption": "MuiTypography-caption",
-              "colorError": "MuiTypography-colorError",
-              "colorInherit": "MuiTypography-colorInherit",
-              "colorPrimary": "MuiTypography-colorPrimary",
-              "colorSecondary": "MuiTypography-colorSecondary",
-              "colorTextPrimary": "MuiTypography-colorTextPrimary",
-              "colorTextSecondary": "MuiTypography-colorTextSecondary",
-              "displayBlock": "MuiTypography-displayBlock",
-              "displayInline": "MuiTypography-displayInline",
-              "gutterBottom": "MuiTypography-gutterBottom",
-              "h1": "MuiTypography-h1",
-              "h2": "MuiTypography-h2",
-              "h3": "MuiTypography-h3",
-              "h4": "MuiTypography-h4",
-              "h5": "MuiTypography-h5",
-              "h6": "MuiTypography-h6",
-              "noWrap": "MuiTypography-noWrap",
-              "overline": "MuiTypography-overline",
-              "paragraph": "MuiTypography-paragraph",
-              "root": "MuiTypography-root",
-              "srOnly": "MuiTypography-srOnly",
-              "subtitle1": "MuiTypography-subtitle1",
-              "subtitle2": "MuiTypography-subtitle2",
-            }
-          }
          variant="subtitle1"
        >
-          <h6
-            className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+          <ForwardRef(Typography)
+            className="emotion-0 emotion-1"
+            classes={
+              Object {
+                "alignCenter": "MuiTypography-alignCenter",
+                "alignJustify": "MuiTypography-alignJustify",
+                "alignLeft": "MuiTypography-alignLeft",
+                "alignRight": "MuiTypography-alignRight",
+                "body1": "MuiTypography-body1",
+                "body2": "MuiTypography-body2",
+                "button": "MuiTypography-button",
+                "caption": "MuiTypography-caption",
+                "colorError": "MuiTypography-colorError",
+                "colorInherit": "MuiTypography-colorInherit",
+                "colorPrimary": "MuiTypography-colorPrimary",
+                "colorSecondary": "MuiTypography-colorSecondary",
+                "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                "displayBlock": "MuiTypography-displayBlock",
+                "displayInline": "MuiTypography-displayInline",
+                "gutterBottom": "MuiTypography-gutterBottom",
+                "h1": "MuiTypography-h1",
+                "h2": "MuiTypography-h2",
+                "h3": "MuiTypography-h3",
+                "h4": "MuiTypography-h4",
+                "h5": "MuiTypography-h5",
+                "h6": "MuiTypography-h6",
+                "noWrap": "MuiTypography-noWrap",
+                "overline": "MuiTypography-overline",
+                "paragraph": "MuiTypography-paragraph",
+                "root": "MuiTypography-root",
+                "srOnly": "MuiTypography-srOnly",
+                "subtitle1": "MuiTypography-subtitle1",
+                "subtitle2": "MuiTypography-subtitle2",
+              }
+            }
+            variant="subtitle1"
          >
-            maintainers
-          </h6>
-        </ForwardRef(Typography)>
-      </WithStyles(ForwardRef(Typography))>
-    </ForwardRef(Text)>
-  </StyledText>
+            <h6
+              className="MuiTypography-root emotion-0 emotion-1 MuiTypography-subtitle1"
+            >
+              sidebar.maintainers.title
+            </h6>
+          </ForwardRef(Typography)>
+        </WithStyles(ForwardRef(Typography))>
+      </ForwardRef(Text)>
+    </StyledText>
+  </DevelopersTitle>
  <StyledBox
    display="flex"
    flexWrap="wrap"
--- a/src/components/Developers/index.ts
+++ b/src/components/Developers/index.ts
@@ -1 +1,2 @@
-export { default, DeveloperType } from './Developers';
+export { default } from './Developers';
+export { DeveloperType } from './types';
--- a/src/components/Developers/types.ts
+++ b/src/components/Developers/types.ts
@@ -0,0 +1,4 @@
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}
--- a/src/components/Dist/Dist.tsx
+++ b/src/components/Dist/Dist.tsx
@@ -1,4 +1,5 @@
 import React, { FC, useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import fileSizeSI from '../../utils/file-size';
@@ -22,6 +23,7 @@ const DistChip: FC<{ name: string }> = ({ name, children }) =>

 const Dist: FC = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!packageMeta) {
    return null;
@@ -30,11 +32,11 @@ const Dist: FC = () => {
  const { dist, license } = packageMeta && packageMeta.latest;

  return (
-    <List subheader={<StyledText variant="subtitle1">{'Latest Distribution'}</StyledText>}>
+    <List subheader={<StyledText variant="subtitle1">{t('sidebar.distribution.title')}</StyledText>}>
      <DistListItem button={true}>
-        <DistChip name="file count">{dist.fileCount}</DistChip>
-        <DistChip name="size">{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
-        <DistChip name="license">{formatLicense(license)}</DistChip>
+        <DistChip name={t('sidebar.distribution.file-count')}>{dist.fileCount}</DistChip>
+        <DistChip name={t('sidebar.distribution.size')}>{dist.unpackedSize && fileSizeSI(dist.unpackedSize)}</DistChip>
+        <DistChip name={t('sidebar.distribution.license')}>{formatLicense(license)}</DistChip>
      </DistListItem>
    </List>
  );
--- a/src/components/Dist/snapshots/Dist.test.tsx.snap
+++ b/src/components/Dist/snapshots/Dist.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

-exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

-exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText estxrtg0 MuiTypography-subtitle1\\">sidebar.distribution.title</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1mms18p-DistListItem estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.file-count</b>: 7</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-e2le7v-DistChips estxrtg2\\"><span class=\\"MuiChip-label\\"><b>sidebar.distribution.license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
--- a/src/components/Engines/Engines.tsx
+++ b/src/components/Engines/Engines.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import Avatar from '../../muiComponents/Avatar';
@@ -12,6 +13,7 @@ import node from './img/node.png';

 const Engine: React.FC = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  const engines = packageMeta?.latest?.engines;

@@ -23,7 +25,7 @@ const Engine: React.FC = () => {
    <Grid container={true}>
      {engines.node && (
        <Grid item={true} xs={6}>
-          <List subheader={<StyledText variant={'subtitle1'}>{'node JS'}</StyledText>}>
+          <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.node-js')}</StyledText>}>
            <EngineListItem button={true}>
              <Avatar src={node} />
              <ListItemText primary={engines.node} />
@@ -34,7 +36,7 @@ const Engine: React.FC = () => {

      {engines.npm && (
        <Grid item={true} xs={6}>
-          <List subheader={<StyledText variant={'subtitle1'}>{'NPM version'}</StyledText>}>
+          <List subheader={<StyledText variant={'subtitle1'}>{t('sidebar.engines.npm-version')}</StyledText>}>
            <EngineListItem button={true}>
              <Avatar src={npm} />
              <ListItemText primary={engines.npm} />
--- a/src/components/Engines/snapshots/Engines.test.tsx.snap
+++ b/src/components/Engines/snapshots/Engines.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">node JS</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">NPM version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;
+exports[`<Engines /> component should render the component in default state 1`] = `"<div class=\\"MuiGrid-root MuiGrid-container\\"><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">sidebar.engines.node-js</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;= 0.1.98</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div><div class=\\"MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6\\"><ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-1na337r-StyledText et66bt70 MuiTypography-subtitle1\\">sidebar.engines.npm-version</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-18b06t0-EngineListItem et66bt71 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root MuiAvatar-circle MuiAvatar-colorDefault\\"><svg class=\\"MuiSvgIcon-root MuiAvatar-fallback\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\\"></path></svg></div><div class=\\"MuiListItemText-root\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">&gt;3</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul></div></div>"`;
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,53 +1,38 @@
 import React from 'react';
+import { useTranslation, Trans } from 'react-i18next';

 import { goToVerdaccioWebsite } from '../../utils/windows';

 import { Wrapper, Left, Right, Earth, Flags, Love, Flag, Logo, Inner, ToolTip } from './styles';

-const renderTooltip = (): JSX.Element => (
-  <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="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 = (version = window.VERDACCIO_VERSION): JSX.Element => {
+/* eslint-disable react/jsx-key */
+const Footer: React.FC = () => {
+  const { t } = useTranslation();
  return (
-    <Right>
-      {POWERED_LABEL}
-      <Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
-      {`/ ${version}`}
-    </Right>
+    <Wrapper>
+      <Inner>
+        <Left>
+          <Trans components={[<Love />]} i18nKey="footer.made-with-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="china" size="md" />
+              <Flag name="austria" size="md" />
+            </Flags>
+          </ToolTip>
+        </Left>
+        <Right>
+          {t('footer.powered-by')}
+          <Logo img={true} name="verdaccio" onClick={goToVerdaccioWebsite} pointer={true} size="md" />
+          {`/ ${window.VERDACCIO_VERSION}`}
+        </Right>
+      </Inner>
+    </Wrapper>
  );
 };

-const renderLeft = (): JSX.Element => (
-  <Left>
-    {MADEWITH_LABEL}
-    <Love>{HEARTH_EMOJI}</Love>
-    {ON_LABEL}
-    {renderTooltip()}
-  </Left>
-);
-
-const Footer: React.FC = () => (
-  <Wrapper>
-    <Inner>
-      {renderLeft()}
-      {renderRight()}
-    </Inner>
-  </Wrapper>
-);
-
 export default Footer;
--- a/src/components/Footer/snapshots/Footer.test.tsx.snap
+++ b/src/components/Footer/snapshots/Footer.test.tsx.snap
@@ -167,13 +167,13 @@ exports[`<Footer /> component should load the initial state of Footer component
    <div
      class="emotion-27 emotion-28"
    >
-       Made with
+      Made with 
      <span
        class="emotion-0 emotion-1"
      >
        ♥
      </span>
-      on
+       on
      <span
        class="emotion-25 emotion-26"
      >
--- a/src/components/Header/Header.test.tsx
+++ b/src/components/Header/Header.test.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';

 import { render, fireEvent, waitForElement, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
 import { AppContextProvider } from '../../App';
+import translationEN from '../../../i18n/translations/en-US.json';

 import Header from './Header';

@@ -18,7 +19,7 @@ describe('<Header /> component with logged in state', () => {
  test('should load the component in logged out state', () => {
    const { container, queryByTestId, getByText } = render(
      <Router>
-        <AppContextProvider packages={props.packages}>
+        <AppContextProvider>
          <Header />
        </AppContextProvider>
      </Router>
@@ -32,7 +33,7 @@ describe('<Header /> component with logged in state', () => {
  test('should load the component in logged in state', () => {
    const { container, getByTestId, queryByText } = render(
      <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
          <Header />
        </AppContextProvider>
      </Router>
@@ -44,24 +45,24 @@ describe('<Header /> component with logged in state', () => {
  });

  test('should open login dialog', async () => {
-    const { getByText } = render(
+    const { getByTestId } = render(
      <Router>
-        <AppContextProvider packages={props.packages}>
+        <AppContextProvider>
          <Header />
        </AppContextProvider>
      </Router>
    );

-    const loginBtn = getByText('Login');
+    const loginBtn = getByTestId('header--button-login');
    fireEvent.click(loginBtn);
-    const loginDialog = await waitForElement(() => getByText('Sign in'));
+    const loginDialog = await waitForElement(() => getByTestId('login--dialog'));
    expect(loginDialog).toBeTruthy();
  });

  test('should logout the user', async () => {
    const { getByText, getByTestId } = render(
      <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
          <Header />
        </AppContextProvider>
      </Router>
@@ -79,7 +80,7 @@ describe('<Header /> component with logged in state', () => {
  test("The question icon should open a new tab of verdaccio's website - installation doc", () => {
    const { getByTestId } = render(
      <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
          <Header />
        </AppContextProvider>
      </Router>
@@ -92,7 +93,7 @@ describe('<Header /> component with logged in state', () => {
  test('should open the registrationInfo modal when clicking on the info icon', async () => {
    const { getByTestId } = render(
      <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
          <Header />
        </AppContextProvider>
      </Router>
@@ -109,7 +110,7 @@ describe('<Header /> component with logged in state', () => {
  test('should close the registrationInfo modal when clicking on the button close', async () => {
    const { getByTestId, getByText, queryByTestId } = render(
      <Router>
-        <AppContextProvider packages={props.packages} user={props.user}>
+        <AppContextProvider user={props.user}>
          <Header />
        </AppContextProvider>
      </Router>
@@ -119,7 +120,7 @@ describe('<Header /> component with logged in state', () => {
    fireEvent.click(infoBtn);

    // wait for Close's button of registrationInfo modal appearance and return the element
-    const closeBtn = await waitForElement(() => getByText('CLOSE'));
+    const closeBtn = await waitForElement(() => getByText(translationEN.button.close));
    fireEvent.click(closeBtn);

    const hasRegistrationInfoModalBeenRemoved = await waitForElementToBeRemoved(() =>
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import storage from '../../utils/storage';
 import { getRegistryURL } from '../../utils/url';
@@ -18,13 +19,14 @@ interface Props {

 /* eslint-disable react/jsx-no-bind*/
 const Header: React.FC<Props> = ({ withoutSearch }) => {
+  const { t } = useTranslation();
  const appContext = useContext(AppContext);
  const [isInfoDialogOpen, setOpenInfoDialog] = useState();
  const [showMobileNavBar, setShowMobileNavBar] = useState();
  const [showLoginModal, setShowLoginModal] = useState(false);

  if (!appContext) {
-    throw Error('The app Context was not correct used');
+    throw Error(t('app-context-not-correct-used'));
  }

  const { user, scope, setUser } = appContext;
@@ -67,7 +69,7 @@ const Header: React.FC<Props> = ({ withoutSearch }) => {
            <Search />
          </InnerMobileNavBar>
          <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
-            {'Cancel'}
+            {t('button.cancel')}
          </Button>
        </MobileNavBar>
      )}
--- a/src/components/Header/HeaderGreetings.tsx
+++ b/src/components/Header/HeaderGreetings.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 import Label from '../Label';

@@ -8,11 +9,14 @@ interface Props {
  username: string;
 }

-const HeaderGreetings: React.FC<Props> = ({ username }) => (
-  <>
-    <Greetings>{'Hi,'}</Greetings>
-    <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
-  </>
-);
+const HeaderGreetings: React.FC<Props> = ({ username }) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Greetings>{t('header.greetings')}</Greetings>
+      <Label capitalize={true} data-testid="greetings-label" text={username} weight="bold" />
+    </>
+  );
+};

 export default HeaderGreetings;
--- a/src/components/Header/HeaderMenu.tsx
+++ b/src/components/Header/HeaderMenu.tsx
@@ -1,4 +1,5 @@
 import React, { MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import AccountCircle from '@material-ui/icons/AccountCircle';

 import IconButton from '../../muiComponents/IconButton';
@@ -23,35 +24,38 @@ const HeaderMenu: React.FC<Props> = ({
  anchorEl,
  onLoggedInMenu,
  onLoggedInMenuClose,
-}) => (
-  <>
-    <IconButton
-      color="inherit"
-      data-testid="header--menu-accountcircle"
-      id="header--button-account"
-      onClick={onLoggedInMenu}>
-      <AccountCircle />
-    </IconButton>
-    <Menu
-      anchorEl={anchorEl}
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}
-      onClose={onLoggedInMenuClose}
-      open={isMenuOpen}
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}>
-      <MenuItem disabled={true}>
-        <HeaderGreetings username={username} />
-      </MenuItem>
-      <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
-        {'Logout'}
-      </MenuItem>
-    </Menu>
-  </>
-);
+}) => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <IconButton
+        color="inherit"
+        data-testid="header--menu-accountcircle"
+        id="header--button-account"
+        onClick={onLoggedInMenu}>
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        onClose={onLoggedInMenuClose}
+        open={isMenuOpen}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}>
+        <MenuItem disabled={true}>
+          <HeaderGreetings username={username} />
+        </MenuItem>
+        <MenuItem button={true} data-testid="header--button-logout" id="header--button-logout" onClick={onLogout}>
+          {t('button.logout')}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};

 export default HeaderMenu;
--- a/src/components/Header/HeaderRight.tsx
+++ b/src/components/Header/HeaderRight.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, MouseEvent } from 'react';
+import { useTranslation } from 'react-i18next';

 import Button from '../../muiComponents/Button';

@@ -25,6 +26,7 @@ const HeaderRight: React.FC<Props> = ({
 }) => {
  const [anchorEl, setAnchorEl] = useState();
  const [isMenuOpen, setIsMenuOpen] = useState();
+  const { t } = useTranslation();

  useEffect(() => {
    setIsMenuOpen(Boolean(anchorEl));
@@ -55,10 +57,10 @@ const HeaderRight: React.FC<Props> = ({
  return (
    <RightSide data-testid="header-right">
      {!withoutSearch && (
-        <HeaderToolTip onClick={onToggleMobileNav} title={'Search packages'} tooltipIconType={'search'} />
+        <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
      )}
-      <HeaderToolTip title={'Documentation'} tooltipIconType={'help'} />
-      <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={'Registry Information'} tooltipIconType={'info'} />
+      <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
+      <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
      {username ? (
        <HeaderMenu
          anchorEl={anchorEl}
@@ -70,7 +72,7 @@ const HeaderRight: React.FC<Props> = ({
        />
      ) : (
        <Button color="inherit" data-testid="header--button-login" onClick={handleToggleLogin}>
-          {'Login'}
+          {t('button.login')}
        </Button>
      )}
    </RightSide>
--- a/src/components/Help/Help.tsx
+++ b/src/components/Help/Help.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';

 import { getRegistryURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
@@ -24,23 +25,24 @@ function renderHeadingClipboardSegments(title: string, text: string): React.Reac

 const Help: React.FC = () => {
  const registryUrl = getRegistryURL();
+  const { t } = useTranslation();

  return (
    <Card id="help-card">
      <CardContent>
        <Typography component="h2" gutterBottom={true} id={COMPONENT_HELP_ID} variant="h5">
-          {HELP_TITLE}
+          {t('help.title')}
        </Typography>
        <HelpTitle color="textSecondary" gutterBottom={true}>
-          {'To publish your first package just:'}
+          {t('help.sub-title')}
        </HelpTitle>
-        {renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)}
-        {renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)}
-        <Text variant="body2">{'3. Refresh this page.'}</Text>
+        {renderHeadingClipboardSegments(t('help.first-step'), t('help.first-step-command-line', { registryUrl }))}
+        {renderHeadingClipboardSegments(t('help.second-step'), t('help.second-step-command-line', { registryUrl }))}
+        <Text variant="body2">{t('help.third-step')}</Text>
      </CardContent>
      <CardActions>
        <Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small">
-          {'Learn More'}
+          {t('button.learn-more')}
        </Button>
      </CardActions>
    </Card>
--- a/src/components/Help/snapshots/Help.test.tsx.snap
+++ b/src/components/Help/snapshots/Help.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
      <button
        class="MuiButtonBase-root MuiIconButton-root  emotion-4 emotion-5"
        tabindex="0"
-        title="Copy to Clipboard"
+        title="Copy to clipboard"
        type="button"
      >
        <span
@@ -107,7 +107,7 @@ exports[`<Help /> component should load the component in default state 1`] = `
      <button
        class="MuiButtonBase-root MuiIconButton-root  emotion-4 emotion-5"
        tabindex="0"
-        title="Copy to Clipboard"
+        title="Copy to clipboard"
        type="button"
      >
        <span
--- a/src/components/Install/Install.tsx
+++ b/src/components/Install/Install.tsx
@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import Text from '../../muiComponents/Text';
@@ -14,6 +15,7 @@ const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
 }));

 const Install: React.FC = () => {
+  const { t } = useTranslation();
  const detailContext = useContext(DetailContext);

  const { packageMeta, packageName } = detailContext;
@@ -23,7 +25,9 @@ const Install: React.FC = () => {
  }

  return (
-    <List data-testid={'installList'} subheader={<StyledText variant={'subtitle1'}>{'Installation'}</StyledText>}>
+    <List
+      data-testid={'installList'}
+      subheader={<StyledText variant={'subtitle1'}>{t('sidebar.installation.title')}</StyledText>}>
      <InstallListItem dependencyManager={DependencyManager.NPM} packageName={packageName} />
      <InstallListItem dependencyManager={DependencyManager.YARN} packageName={packageName} />
      <InstallListItem dependencyManager={DependencyManager.PNPM} packageName={packageName} />
--- a/src/components/Install/InstallListItem.tsx
+++ b/src/components/Install/InstallListItem.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import CopyToClipBoard from '../CopyToClipBoard';
 import Avatar from '../../muiComponents/Avatar';
@@ -43,14 +44,16 @@ interface Interface {
 }

 const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }) => {
+  const { t } = useTranslation();
+
  switch (dependencyManager) {
    case DependencyManager.NPM:
      return (
        <InstallItem button={true} data-testid={'installListItem-npm'}>
          <PackageMangerAvatar alt="npm" src={npmLogo} />
          <InstallListItemText
-            primary={<CopyToClipBoard text={`npm install ${packageName}`} />}
-            secondary={'Install using npm'}
+            primary={<CopyToClipBoard text={t('sidebar.installation.install-using-npm-command', { packageName })} />}
+            secondary={t('sidebar.installation.install-using-npm')}
          />
        </InstallItem>
      );
@@ -59,8 +62,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
        <InstallItem button={true} data-testid={'installListItem-yarn'}>
          <PackageMangerAvatar alt="yarn" src={yarnLogo} />
          <InstallListItemText
-            primary={<CopyToClipBoard text={`yarn add ${packageName}`} />}
-            secondary={'Install using yarn'}
+            primary={<CopyToClipBoard text={t('sidebar.installation.install-using-yarn-command', { packageName })} />}
+            secondary={t('sidebar.installation.install-using-yarn')}
          />
        </InstallItem>
      );
@@ -69,8 +72,8 @@ const InstallListItem: React.FC<Interface> = ({ packageName, dependencyManager }
        <InstallItem button={true} data-testid={'installListItem-pnpm'}>
          <PackageMangerAvatar alt={'pnpm'} src={pnpmLogo} />
          <InstallListItemText
-            primary={<CopyToClipBoard text={`pnpm install ${packageName}`} />}
-            secondary={'Install using pnpm'}
+            primary={<CopyToClipBoard text={t('sidebar.installation.install-using-pnpm-command', { packageName })} />}
+            secondary={t('sidebar.installation.install-using-pnpm')}
          />
        </InstallItem>
      );
--- a/src/components/Install/snapshots/Install.test.tsx.snap
+++ b/src/components/Install/snapshots/Install.test.tsx.snap
@@ -94,7 +94,7 @@ exports[`<Install /> renders correctly 1`] = `
          <button
            class="MuiButtonBase-root MuiIconButton-root  emotion-6 emotion-7"
            tabindex="0"
-            title="Copy to Clipboard"
+            title="Copy to clipboard"
            type="button"
          >
            <span
@@ -161,7 +161,7 @@ exports[`<Install /> renders correctly 1`] = `
          <button
            class="MuiButtonBase-root MuiIconButton-root  emotion-6 emotion-7"
            tabindex="0"
-            title="Copy to Clipboard"
+            title="Copy to clipboard"
            type="button"
          >
            <span
@@ -228,7 +228,7 @@ exports[`<Install /> renders correctly 1`] = `
          <button
            class="MuiButtonBase-root MuiIconButton-root  emotion-6 emotion-7"
            tabindex="0"
-            title="Copy to Clipboard"
+            title="Copy to clipboard"
            type="button"
          >
            <span
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { MouseEvent } from 'react';
 import { Link as RouterLink } from 'react-router-dom';

 import Text, { TextProps } from '../../muiComponents/Text';
@@ -8,6 +8,7 @@ interface Props extends Pick<TextProps, 'variant'> {
  className?: string;
  to: string;
  children?: React.ReactNode;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }

 type LinkRef = HTMLAnchorElement;
--- a/src/components/LoginDialog/LoginDialog.test.tsx
+++ b/src/components/LoginDialog/LoginDialog.test.tsx
@@ -1,14 +1,14 @@
 import React from 'react';

-import { render, waitForElement, fireEvent, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
+import { render, waitForElement, fireEvent } from '../../utils/test-react-testing-library';
 import AppContext, { AppContextProps } from '../../App/AppContext';
 import api from '../../utils/api';
+import translationEN from '../../../i18n/translations/en-US.json';

 import LoginDialog from './LoginDialog';

 const appContextValue: AppContextProps = {
  scope: '',
-  packages: [],
  setUser: jest.fn(),
 };

@@ -36,13 +36,13 @@ describe('<LoginDialog /> component', () => {
      onClose: jest.fn(),
    };

-    const { getByText } = render(
+    const { getByTestId } = render(
      <AppContext.Provider value={appContextValue}>
        <LoginDialog onClose={props.onClose} open={props.open} />
      </AppContext.Provider>
    );

-    const loginDialogHeading = await waitForElement(() => getByText('Sign in'));
+    const loginDialogHeading = await waitForElement(() => getByTestId('login-dialog-form-login-button'));
    expect(loginDialogHeading).toBeTruthy();
  });

--- a/src/components/LoginDialog/LoginDialog.tsx
+++ b/src/components/LoginDialog/LoginDialog.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useContext, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';

 import { makeLogin } from '../../utils/login';
 import storage from '../../utils/storage';
@@ -16,10 +17,11 @@ interface Props {
 }

 const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
+  const { t } = useTranslation();
  const appContext = useContext(AppContext);

  if (!appContext) {
-    throw Error('The app Context was not correct used');
+    throw Error(t('app-context-not-correct-used'));
  }

  const [error, setError] = useState();
@@ -43,7 +45,7 @@ const LoginDialog: React.FC<Props> = ({ onClose, open = false }) => {
  );

  return (
-    <Dialog fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
+    <Dialog data-testid="login--dialog" fullWidth={true} id="login--dialog" maxWidth="sm" onClose={onClose} open={open}>
      <LoginDialogCloseButton onClose={onClose} />
      <DialogContent>
        <LoginDialogHeader />
--- a/src/components/LoginDialog/LoginDialogCloseButton.tsx
+++ b/src/components/LoginDialog/LoginDialogCloseButton.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import CloseIcon from '@material-ui/icons/Close';
+import { useTranslation } from 'react-i18next';

 import DialogTitle from '../../muiComponents/DialogTitle';
 import IconButton from '../../muiComponents/IconButton';
@@ -17,12 +18,15 @@ interface Props {
  onClose: () => void;
 }

-const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => (
-  <DialogTitle>
-    <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
-      <CloseIcon titleAccess="Close Dialog" />
-    </StyledIconButton>
-  </DialogTitle>
-);
+const LoginDialogCloseButton: React.FC<Props> = ({ onClose }) => {
+  const { t } = useTranslation();
+  return (
+    <DialogTitle>
+      <StyledIconButton data-testid="close-login-dialog-button" onClick={onClose}>
+        <CloseIcon titleAccess={t('button.close')} />
+      </StyledIconButton>
+    </DialogTitle>
+  );
+};

 export default LoginDialogCloseButton;
--- a/src/components/LoginDialog/LoginDialogForm.tsx
+++ b/src/components/LoginDialog/LoginDialogForm.tsx
@@ -1,5 +1,6 @@
 import React, { memo } from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
 import useForm from 'react-hook-form/dist/react-hook-form.ie11';

 import TextField from '../../muiComponents/TextField';
@@ -28,6 +29,7 @@ interface Props {
 }

 const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
+  const { t } = useTranslation();
  const {
    register,
    errors,
@@ -48,13 +50,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
        helperText={errors.username?.message}
        id="login--dialog-username"
        inputRef={register({
-          required: { value: true, message: 'This field is required' },
-          minLength: { value: 2, message: 'This field required the min length of 2' },
+          required: { value: true, message: t('form-validation.required-field') },
+          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
        })}
-        label="Username"
+        label={t('form.username')}
        margin="normal"
        name="username"
-        placeholder="Your username"
+        placeholder={t('form-placeholder.username')}
        required={true}
        variant="outlined"
      />
@@ -65,13 +67,13 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
        helperText={errors.password?.message}
        id="login--dialog-password"
        inputRef={register({
-          required: { value: true, message: 'This field is required' },
-          minLength: { value: 2, message: 'This field required the min length of 2' },
+          required: { value: true, message: t('form-validation.required-field') },
+          minLength: { value: 2, message: t('form-validation.required-min-length', { length: 2 }) },
        })}
-        label="Password"
+        label={t('form.password')}
        margin="normal"
        name="password"
-        placeholder="Your strong password"
+        placeholder={t('form-placeholder.password')}
        required={true}
        type="password"
        variant="outlined"
@@ -79,13 +81,14 @@ const LoginDialogForm = memo(({ onSubmit, error }: Props) => {
      {error && <LoginDialogFormError error={error} />}
      <StyledButton
        color="primary"
+        data-testid="login-dialog-form-login-button"
        disabled={!isValid}
        fullWidth={true}
        id="login--dialog-button-submit"
        size="large"
        type="submit"
        variant="contained">
-        {'Sign In'}
+        {t('button.login')}
      </StyledButton>
    </StyledForm>
  );
--- a/src/components/LoginDialog/LoginDialogHeader.tsx
+++ b/src/components/LoginDialog/LoginDialogHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import LockOutlined from '@material-ui/icons/LockOutlined';
 import CloseIcon from '@material-ui/icons/Close';
+import { useTranslation } from 'react-i18next';

 import Heading from '../../muiComponents/Heading';
 import Avatar from '../../muiComponents/Avatar';
@@ -26,17 +27,19 @@ interface Props {
 }

 const LoginDialogHeader: React.FC<Props> = ({ onClose }) => {
+  const { t } = useTranslation();
+
  return (
    <Box alignItems="center" display="flex" flexDirection="column" position="relative">
      {onClose && (
-        <StyledIconButton aria-label="Close" onClick={onClose}>
+        <StyledIconButton aria-label={t('button.close')} onClick={onClose}>
          <CloseIcon />
        </StyledIconButton>
      )}
      <StyledAvatar>
        <LockOutlined />
      </StyledAvatar>
-      <Heading>{'Sign in'}</Heading>
+      <Heading>{t('button.login')}</Heading>
    </Box>
  );
 };
--- a/src/components/NotFound/NotFound.tsx
+++ b/src/components/NotFound/NotFound.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';

 import Box from '../../muiComponents/Box';
 import Button from '../../muiComponents/Button';
@@ -9,10 +10,6 @@ import { Theme } from '../../design-tokens/theme';

 import PackageImg from './img/package.svg';

-export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
-export const LABEL_NOT_FOUND = "The page you're looking for doesn't exist.";
-export const GO_TO_HOME_PAGE = 'Go to the home page';
-
 const EmptyPackage = styled('img')({
  width: '150px',
  margin: '0 auto',
@@ -25,6 +22,7 @@ const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({

 const NotFound: React.FC = () => {
  const history = useHistory();
+  const { t } = useTranslation();

  const handleGoHome = useCallback(() => {
    history.push('/');
@@ -39,12 +37,12 @@ const NotFound: React.FC = () => {
      flexGrow={1}
      justifyContent="center"
      p={2}>
-      <EmptyPackage alt="404 - Page not found" src={PackageImg} />
+      <EmptyPackage alt={t('error.404.page-not-found')} src={PackageImg} />
      <StyledHeading className="not-found-text" variant="h4">
-        {NOT_FOUND_TEXT}
+        {t('error.404.sorry-we-could-not-find-it')}
      </StyledHeading>
-      <Button onClick={handleGoHome} variant="contained">
-        {GO_TO_HOME_PAGE}
+      <Button data-testid="not-found-go-to-home-button" onClick={handleGoHome} variant="contained">
+        {t('button.go-to-the-home-page')}
      </Button>
    </Box>
  );
--- a/src/components/NotFound/Notfound.test.tsx
+++ b/src/components/NotFound/Notfound.test.tsx
@@ -3,7 +3,7 @@ import { BrowserRouter as Router } from 'react-router-dom';

 import { render, fireEvent } from '../../utils/test-react-testing-library';

-import NotFound, { GO_TO_HOME_PAGE } from './NotFound';
+import NotFound from './NotFound';

 describe('<NotFound /> component', () => {
  test('should load the component in default state', () => {
@@ -14,17 +14,17 @@ describe('<NotFound /> component', () => {
    );
    expect(container.firstChild).toMatchSnapshot();
  });
-  test('go to Home Page button click', () => {
+
+  test('go to Home Page button click', async () => {
    const spy = jest.spyOn(React, 'useCallback');
-    const { getByText } = render(
+    const { getByTestId } = render(
      <Router>
        <NotFound />
      </Router>
    );

-    const node = getByText(GO_TO_HOME_PAGE);
+    const node = getByTestId('not-found-go-to-home-button');
    fireEvent.click(node);
-
    expect(spy).toHaveBeenCalled();
  });
 });
--- a/src/components/NotFound/snapshots/Notfound.test.tsx.snap
+++ b/src/components/NotFound/snapshots/Notfound.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`<NotFound /> component should load the component in default state 1`] =
  </h4>
  <button
    class="MuiButtonBase-root MuiButton-root MuiButton-contained"
+    data-testid="not-found-go-to-home-button"
    tabindex="0"
    type="button"
  >
--- a/src/components/NotFound/index.ts
+++ b/src/components/NotFound/index.ts
@@ -1 +1 @@
-export { default, NOT_FOUND_TEXT } from './NotFound';
+export { default } from './NotFound';
--- a/src/components/Package/Package.tsx
+++ b/src/components/Package/Package.tsx
@@ -2,12 +2,14 @@ import React from 'react';
 import BugReport from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
+import { useTranslation } from 'react-i18next';

 import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
 import Tag from '../Tag';
 import fileSizeSI from '../../utils/file-size';
-import { formatDate, formatDateDistance } from '../../utils/package';
+import { formatDate, formatDateDistance, getAuthorName } from '../../utils/package';
 import Tooltip from '../../muiComponents/Tooltip';
+import Link from '../Link';
 import { isURL } from '../../utils/url';
 import { downloadTarball } from '../ActionBar';
 import ListItem from '../../muiComponents/ListItem';
@@ -64,11 +66,13 @@ const Package: React.FC<PackageInterface> = ({
  time,
  version,
 }) => {
+  const { t } = useTranslation();
+
  const renderVersionInfo = (): React.ReactNode =>
    version && (
      <OverviewItem>
        <Icon name={'version'} />
-        {`v${version}`}
+        {t('package.version', { version })}
      </OverviewItem>
    );

@@ -77,7 +81,7 @@ const Package: React.FC<PackageInterface> = ({
      <Author>
        <Avatar alt={authorName} src={authorAvatar} />
        <Details>
-          <Text text={authorName} />
+          <Text text={getAuthorName(authorName)} />
        </Details>
      </Author>
    );
@@ -103,7 +107,7 @@ const Package: React.FC<PackageInterface> = ({
    time && (
      <OverviewItem>
        <Icon name="time" />
-        <Published>{`Published on ${formatDate(time)} •`}</Published>
+        <Published>{t('package.published-on', { time: formatDate(time) })}</Published>
        {formatDateDistance(time)}
      </OverviewItem>
    );
@@ -111,26 +115,26 @@ const Package: React.FC<PackageInterface> = ({
  const renderHomePageLink = (): React.ReactNode =>
    homepage &&
    isURL(homepage) && (
-      <a href={homepage} target={'_blank'}>
-        <Tooltip aria-label={'Homepage'} title={'Visit homepage'}>
-          <IconButton aria-label={'Homepage'}>
+      <Link external={true} to={homepage}>
+        <Tooltip aria-label={t('package.homepage')} title={t('package.visit-home-page')}>
+          <IconButton aria-label={t('package.homepage')}>
            <HomeIcon />
          </IconButton>
        </Tooltip>
-      </a>
+      </Link>
    );

  const renderBugsLink = (): React.ReactNode =>
    bugs &&
    bugs.url &&
    isURL(bugs.url) && (
-      <a href={bugs.url} target={'_blank'}>
-        <Tooltip aria-label={'Bugs'} title={'Open an issue'}>
-          <IconButton aria-label={'Bugs'}>
+      <Link external={true} to={bugs.url}>
+        <Tooltip aria-label={t('package.bugs')} title={t('package.open-an-issue')}>
+          <IconButton aria-label={t('package.bugs')}>
            <BugReport />
          </IconButton>
        </Tooltip>
-      </a>
+      </Link>
    );

  const renderDownloadLink = (): React.ReactNode =>
@@ -138,13 +142,13 @@ const Package: React.FC<PackageInterface> = ({
    dist.tarball &&
    isURL(dist.tarball) && (
      // eslint-disable-next-line
-      <a onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))} target={'_blank'}>
-        <Tooltip aria-label={'Download the tar file'} title={'Download tarball'}>
-          <IconButton aria-label={'Download'}>
+      <Link to="#" external={true} onClick={downloadTarball(dist.tarball.replace(`https://registry.npmjs.org/`, window.location.href))}>
+        <Tooltip aria-label={t('package.download', { what: t('package.the-tar-file') })} title={t('package.tarball')}>
+          <IconButton aria-label={t('package.download')}>
            <DownloadIcon />
          </IconButton>
        </Tooltip>
-      </a>
+      </Link>
    );

  const renderPrimaryComponent = (): React.ReactNode => {
@@ -155,7 +159,7 @@ const Package: React.FC<PackageInterface> = ({
            <PackageTitle className="package-title">{packageName}</PackageTitle>
          </WrapperLink>
        </Grid>
-        <GridRightAligned item={true} xs={true}>
+        <GridRightAligned alignItems="center" container={true} item={true} justify="flex-end" xs={true}>
          {renderHomePageLink()}
          {renderBugsLink()}
          {renderDownloadLink()}
--- a/src/components/RegistryInfoDialog/RegistryInfoDialog.tsx
+++ b/src/components/RegistryInfoDialog/RegistryInfoDialog.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 import Button from '../../muiComponents/Button';
 import Dialog from '../../muiComponents/Dialog';
@@ -7,18 +8,19 @@ import DialogActions from '../../muiComponents/DialogActions';
 import { Title, Content } from './styles';
 import { Props } from './types';

-const LABEL = 'CLOSE';
-
-const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => (
-  <Dialog data-testid={'registryInfo--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}>
-        {LABEL}
-      </Button>
-    </DialogActions>
-  </Dialog>
-);
+const RegistryInfoDialog: React.FC<Props> = ({ open = false, children, onClose }) => {
+  const { t } = useTranslation();
+  return (
+    <Dialog data-testid={'registryInfo--dialog'} id="registryInfo--dialog-container" onClose={onClose} open={open}>
+      <Title disableTypography={true}>{t('dialog.registry-info.title')}</Title>
+      <Content>{children}</Content>
+      <DialogActions>
+        <Button color="inherit" id="registryInfo--dialog-close" onClick={onClose}>
+          {t('button.close')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

 export default RegistryInfoDialog;
--- a/src/components/Repository/Repository.tsx
+++ b/src/components/Repository/Repository.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';

 import Avatar from '../../muiComponents/Avatar';
 import Text from '../../muiComponents/Text';
@@ -44,6 +45,7 @@ const RepositoryAvatar = styled(Avatar)({

 const Repository: React.FC = () => {
  const detailContext = React.useContext(DetailContext);
+  const { t } = useTranslation();

  const { packageMeta } = detailContext;

@@ -64,7 +66,7 @@ const Repository: React.FC = () => {
  const repositoryURL = getCorrectRepositoryURL();

  return (
-    <List dense={true} subheader={<StyledText variant="subtitle1">{'Repository'}</StyledText>}>
+    <List dense={true} subheader={<StyledText variant="subtitle1">{t('sidebar.repository.title')}</StyledText>}>
      <RepositoryListItem button={true}>
        <RepositoryAvatar src={git} />
        <RepositoryListItemText
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -2,6 +2,7 @@ import React, { useState, FormEvent, useCallback } from 'react';
 import debounce from 'lodash/debounce';
 import { RouteComponentProps, withRouter } from 'react-router';
 import { SuggestionSelectedEventData } from 'react-autosuggest';
+import { useTranslation } from 'react-i18next';

 import AutoComplete from '../AutoComplete';
 import { callSearch } from '../../utils/calls';
@@ -10,11 +11,11 @@ import SearchAdornment from './SearchAdornment';

 const CONSTANTS = {
  API_DELAY: 300,
-  PLACEHOLDER_TEXT: 'Search Packages',
  ABORT_ERROR: 'AbortError',
 };

 const Search: React.FC<RouteComponentProps> = ({ history }) => {
+  const { t } = useTranslation();
  const [suggestions, setSuggestions] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [search, setSearch] = useState('');
@@ -141,7 +142,7 @@ const Search: React.FC<RouteComponentProps> = ({ history }) => {
      onCleanSuggestions={handlePackagesClearRequested}
      onClick={handleClickSearch}
      onSuggestionsFetch={debounce(handleFetchPackages, CONSTANTS.API_DELAY)}
-      placeholder={CONSTANTS.PLACEHOLDER_TEXT}
+      placeholder={t('search.packages')}
      startAdornment={<SearchAdornment />}
      suggestions={suggestions}
      suggestionsError={error}
--- a/src/components/UpLinks/UpLinks.tsx
+++ b/src/components/UpLinks/UpLinks.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import NoItems from '../NoItems';
@@ -10,6 +11,7 @@ import { StyledText, Spacer, ListItemText } from './styles';

 const UpLinks: React.FC = () => {
  const { packageMeta } = useContext(DetailContext);
+  const { t } = useTranslation();

  if (!packageMeta || !packageMeta._uplinks || !packageMeta.latest) {
    return null;
@@ -18,12 +20,12 @@ const UpLinks: React.FC = () => {
  const { _uplinks: uplinks, latest } = packageMeta;

  if (Object.keys(uplinks).length === 0) {
-    return <NoItems text={`${latest.name} has no uplinks.`} />;
+    return <NoItems text={t('uplinks.no-items', { name: latest.name })} />;
  }

  return (
    <>
-      <StyledText variant="subtitle1">{'Uplinks'}</StyledText>
+      <StyledText variant="subtitle1">{t('uplinks.title')}</StyledText>
      <List>
        {Object.keys(uplinks)
          .reverse()
--- a/src/components/UpLinks/snapshots/UpLinks.test.tsx.snap
+++ b/src/components/UpLinks/snapshots/UpLinks.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">verdaccio has no uplinks.</h6>"`;
+exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">uplinks.no-items</h6>"`;

-exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-5wp24z-StyledText e14i1sy10 MuiTypography-subtitle1\\">uplinks.title</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-t1rp47-Spacer e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-1pxn9ma-ListItemText e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">2 years ago</span></div></li></ul>"`;
--- a/src/components/Versions/Versions.test.tsx
+++ b/src/components/Versions/Versions.test.tsx
@@ -4,8 +4,9 @@ import { MemoryRouter } from 'react-router-dom';
 import { render, cleanup } from '../../utils/test-react-testing-library';
 import { mount } from '../../utils/test-enzyme';
 import { DetailContext, DetailContextProps } from '../../pages/Version';
+import translationEN from '../../../i18n/translations/en-US.json';

-import Versions, { LABEL_CURRENT_TAGS, LABEL_VERSION_HISTORY } from './Versions';
+import Versions from './Versions';
 import data from './__partials__/data.json';

 const detailContextValue: Partial<DetailContextProps> = {
@@ -35,8 +36,8 @@ describe('<Version /> component', () => {
  test('should render versions', () => {
    const { getByText } = render(<ComponentToBeRendered contextValue={detailContextValue} />);

-    expect(getByText(LABEL_VERSION_HISTORY)).toBeTruthy();
-    expect(getByText(LABEL_CURRENT_TAGS)).toBeTruthy();
+    expect(getByText(translationEN.versions['version-history'])).toBeTruthy();
+    expect(getByText(translationEN.versions['current-tags'])).toBeTruthy();

    // pick some versions
    expect(getByText('2.3.0')).toBeTruthy();
@@ -48,8 +49,8 @@ describe('<Version /> component', () => {
      <ComponentToBeRendered contextValue={{ packageName: detailContextValue.packageName }} />
    );

-    expect(queryByText(LABEL_VERSION_HISTORY)).toBeFalsy();
-    expect(queryByText(LABEL_CURRENT_TAGS)).toBeFalsy();
+    expect(queryByText(translationEN.versions['version-history'])).toBeFalsy();
+    expect(queryByText(translationEN.versions['current-tags'])).toBeFalsy();
  });

  test.todo('should click on version link');
--- a/src/components/Versions/Versions.tsx
+++ b/src/components/Versions/Versions.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';

 import { DetailContext } from '../../pages/Version';
 import { DIST_TAGS } from '../../../lib/constants';
@@ -6,13 +7,9 @@ import { DIST_TAGS } from '../../../lib/constants';
 import { StyledText } from './styles';
 import VersionsTagList from './VersionsTagList';
 import VersionsHistoryList from './VersionsHistoryList';
-
-export const NOT_AVAILABLE = 'Not available';
-export const LABEL_CURRENT_TAGS = 'Current Tags';
-export const LABEL_VERSION_HISTORY = 'Version History';
-
 const Versions: React.FC = () => {
  const detailContext = useContext(DetailContext);
+  const { t } = useTranslation();

  const { packageMeta, packageName } = detailContext;

@@ -26,13 +23,13 @@ const Versions: React.FC = () => {
    <>
      {distTags && Object.keys(distTags).length > 0 && (
        <>
-          <StyledText variant="subtitle1">{LABEL_CURRENT_TAGS}</StyledText>
+          <StyledText variant="subtitle1">{t('versions.current-tags')}</StyledText>
          <VersionsTagList tags={distTags} />
        </>
      )}
      {versions && Object.keys(versions).length > 0 && packageName && (
        <>
-          <StyledText variant="subtitle1">{LABEL_VERSION_HISTORY}</StyledText>
+          <StyledText variant="subtitle1">{t('versions.version-history')}</StyledText>
          <VersionsHistoryList packageName={packageName} time={time} versions={versions} />
        </>
      )}
--- a/src/components/Versions/VersionsHistoryList.tsx
+++ b/src/components/Versions/VersionsHistoryList.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';

 import { Versions, Time } from '../../../types/packageMeta';
 import { formatDateDistance } from '../../utils/package';
@@ -7,28 +8,32 @@ import ListItem from '../../muiComponents/ListItem';

 import { Spacer, ListItemText, StyledLink } from './styles';

-export const NOT_AVAILABLE = 'Not available';
-
 interface Props {
  versions: Versions;
  packageName: string;
  time: Time;
 }

-const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => (
-  <List dense={true}>
-    {Object.keys(versions)
-      .reverse()
-      .map(version => (
-        <ListItem className="version-item" key={version}>
-          <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
-            <ListItemText>{version}</ListItemText>
-          </StyledLink>
-          <Spacer />
-          <ListItemText>{time[version] ? formatDateDistance(time[version]) : NOT_AVAILABLE}</ListItemText>
-        </ListItem>
-      ))}
-  </List>
-);
+const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) => {
+  const { t } = useTranslation();
+
+  return (
+    <List dense={true}>
+      {Object.keys(versions)
+        .reverse()
+        .map(version => (
+          <ListItem className="version-item" key={version}>
+            <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
+              <ListItemText>{version}</ListItemText>
+            </StyledLink>
+            <Spacer />
+            <ListItemText>
+              {time[version] ? formatDateDistance(time[version]) : t('versions.not-available')}
+            </ListItemText>
+          </ListItem>
+        ))}
+    </List>
+  );
+};

 export default VersionsHistoryList;
--- a/src/icons/GitHub.tsx
+++ b/src/icons/GitHub.tsx
@@ -1,14 +0,0 @@
-/* eslint-disable max-len */
-/* eslint-disable react/jsx-curly-brace-presence */
-
-import React from 'react';
-
-import SvgIcon from '../muiComponents/SvgIcon';
-
-const GitHub: React.FC = props => (
-  <SvgIcon {...props}>
-    <path d="M12.007 0C6.12 0 1.1 4.27.157 10.08c-.944 5.813 2.468 11.45 8.054 13.312.19.064.397.033.555-.084.16-.117.25-.304.244-.5v-2.042c-3.33.735-4.037-1.56-4.037-1.56-.22-.726-.694-1.35-1.334-1.756-1.096-.75.074-.735.074-.735.773.103 1.454.557 1.846 1.23.694 1.21 2.23 1.638 3.45.96.056-.61.327-1.178.766-1.605-2.67-.3-5.462-1.335-5.462-6.002-.02-1.193.42-2.35 1.23-3.226-.327-1.015-.27-2.116.166-3.09 0 0 1.006-.33 3.3 1.23 1.966-.538 4.04-.538 6.003 0 2.295-1.5 3.3-1.23 3.3-1.23.445 1.006.49 2.144.12 3.18.81.877 1.25 2.033 1.23 3.226 0 4.607-2.805 5.627-5.476 5.927.578.583.88 1.386.825 2.206v3.29c-.005.2.092.393.26.507.164.115.377.14.565.063 5.568-1.88 8.956-7.514 8.007-13.313C22.892 4.267 17.884.007 12.008 0z" />
-  </SvgIcon>
-);
-
-export default GitHub;
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -1 +0,0 @@
-export { default } from './GitHub';
--- a/src/muiComponents/Text/Text.tsx
+++ b/src/muiComponents/Text/Text.tsx
@@ -1,13 +1,10 @@
 import React, { forwardRef } from 'react';
-import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
+import { default as MaterialUITypography } from '@material-ui/core/Typography';
+
+import { TextProps } from './TextConfig';

-type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
 type TextRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];

-export interface TextProps extends Omit<TypographyProps, 'variant'> {
-  variant?: TextType;
-}
-
 // The reference is already from type of the Component, so the any below is not a problem
 const Text = forwardRef<TextRef, TextProps>(function Text(props, ref) {
  return <MaterialUITypography {...props} ref={ref} />;
--- a/src/muiComponents/Text/TextConfig.ts
+++ b/src/muiComponents/Text/TextConfig.ts
@@ -0,0 +1,7 @@
+import { TypographyProps } from '@material-ui/core/Typography';
+
+type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
+
+export interface TextProps extends Omit<TypographyProps, 'variant'> {
+  variant?: TextType;
+}
--- a/src/muiComponents/Text/index.ts
+++ b/src/muiComponents/Text/index.ts
@@ -1 +1,2 @@
-export { default, TextProps } from './Text';
+export { default } from './Text';
+export { TextProps } from './TextConfig';
--- a/src/pages/Version/Version.test.tsx
+++ b/src/pages/Version/Version.test.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter } from 'react-router';
 import { waitForElement } from '@testing-library/dom';

 import { render } from '../../utils/test-react-testing-library';
-import { NOT_FOUND_TEXT } from '../../components/NotFound';
+import translationEN from '../../../i18n/translations/en-US.json';

 import Version from './Version';
 import { DetailContext } from './context';
@@ -51,7 +51,9 @@ describe('test Version page', () => {
      </MemoryRouter>
    );
    // we wait fetch response (mocked above)
-    const notFoundElement = await waitForElement(() => getByText(NOT_FOUND_TEXT));
+    const notFoundElement = await waitForElement(() =>
+      getByText(translationEN.error['404']['sorry-we-could-not-find-it'])
+    );
    expect(notFoundElement).toBeTruthy();
  });

--- a/src/pages/Version/context.ts
+++ b/src/pages/Version/context.ts
@@ -1,24 +1,6 @@
 import { createContext, Consumer, Provider } from 'react';

-import { PackageMetaInterface } from '../../../types/packageMeta';
-export interface DetailContextProps {
-  packageMeta: PackageMetaInterface;
-  packageVersion?: string;
-  readMe: string;
-  packageName: string;
-  enableLoading: () => void;
-  isLoading: boolean;
-  hasNotBeenFound: boolean;
-}
-
-export interface VersionPageConsumerProps {
-  packageMeta: PackageMetaInterface;
-  readMe: string;
-  packageName: string;
-  packageVersion?: string;
-  // FIXME: looking for the appropiated type here
-  enableLoading: any;
-}
+import { DetailContextProps, VersionPageConsumerProps } from './version-config';

 export const DetailContext = createContext<Partial<DetailContextProps>>({});

--- a/src/pages/Version/index.ts
+++ b/src/pages/Version/index.ts
@@ -1,8 +1,4 @@
-export {
-  DetailContext,
-  DetailContextConsumer,
-  DetailContextProvider,
-  DetailContextProps,
-  VersionPageConsumerProps,
-} from './context';
+export { DetailContext, DetailContextConsumer, DetailContextProvider } from './context';
+export { VersionPageConsumerProps, DetailContextProps } from './version-config';
+
 export { default } from './Version';
--- a/src/pages/Version/version-config.ts
+++ b/src/pages/Version/version-config.ts
@@ -0,0 +1,19 @@
+import { PackageMetaInterface } from '../../../types/packageMeta';
+
+export interface DetailContextProps {
+  enableLoading: () => void;
+  hasNotBeenFound: boolean;
+  isLoading: boolean;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
+
+export interface VersionPageConsumerProps {
+  enableLoading: () => void;
+  packageMeta: PackageMetaInterface;
+  packageName: string;
+  packageVersion?: string;
+  readMe: string;
+}
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -1,17 +1,39 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';

 import { PackageList } from '../../components/PackageList';
-import { PackageInterface } from '../../components/Package/Package';
+import API from '../../utils/api';
+import Loading from '../../components/Loading';

 interface Props {
  isUserLoggedIn: boolean;
-  packages: PackageInterface[];
 }

-const Home: React.FC<Props> = ({ packages }) => (
-  <div className="container content">
-    <PackageList packages={packages} />
-  </div>
-);
+const Home: React.FC<Props> = ({ isUserLoggedIn }) => {
+  const [packages, setPackages] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const loadPackages = async () => {
+    try {
+      const packages = await API.request('packages', 'GET');
+      // FIXME add correct type for package
+      setPackages(packages as never[]);
+    } catch (error) {
+      // FIXME: add dialog
+      console.error({
+        title: 'Warning',
+        message: `Unable to load package list: ${error.message}`,
+      });
+    }
+    setIsLoading(false);
+  };
+  useEffect(() => {
+    loadPackages().then();
+  }, [isUserLoggedIn]);
+
+  return (
+    <div className="container content" data-testid="home-page-container">
+      {isLoading ? <Loading /> : <PackageList packages={packages} />}
+    </div>
+  );
+};

 export default Home;
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -20,7 +20,7 @@ export function handleResponseType(response: Response): Promise<[boolean, Blob |
      return Promise.all([response.ok, response.text()]);
    }

-    // unfortunatelly on download files there is no header available
+    // unfortunately on download files there is no header available
    if (response.url && response.url.endsWith('.tgz') === true) {
      return Promise.all([response.ok, response.blob()]);
    }
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,7 +1,3 @@
-export const TEXT = {
-  CLIPBOARD_COPY: 'Copy to Clipboard',
-};
-
 export const NODE_MANAGER = {
  npm: 'npm',
  yarn: 'yarn',
--- a/src/utils/login.test.ts
+++ b/src/utils/login.test.ts
@@ -16,6 +16,22 @@ jest.mock('./api', () => ({
  request: require('../../jest/unit/components/__mocks__/api').default.request,
 }));

+jest.mock('i18next', () => {
+  const translationEN = require('../../i18n/translations/en-US.json');
+  return {
+    t: (key: string) => {
+      const splittedKey = key.split('.');
+      let result = translationEN;
+
+      for (const element of splittedKey) {
+        result = result[element];
+      }
+
+      return result;
+    },
+  };
+});
+
 describe('isTokenExpire', (): void => {
  test('isTokenExpire - null is not a valid payload', (): void => {
    expect(isTokenExpire(null)).toBeTruthy();
--- a/src/utils/login.ts
+++ b/src/utils/login.ts
@@ -2,6 +2,7 @@ import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
 import isEmpty from 'lodash/isEmpty';
 import { Base64 } from 'js-base64';
+import i18next from 'i18next';

 import { HEADERS } from '../../lib/constants';

@@ -56,7 +57,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
  if (isEmpty(username) || isEmpty(password)) {
    const error = {
      type: 'error',
-      description: "Username or password can't be empty!",
+      description: i18next.t('form-validation.username-or-password-cant-be-empty'),
    };
    return { error };
  }
@@ -78,7 +79,7 @@ export async function makeLogin(username?: string, password?: string): Promise<L
    console.error('login error', e.message);
    const error = {
      type: 'error',
-      description: 'Unable to sign in',
+      description: i18next.t('form-validation.unable-to-sign-in'),
    };
    return { error };
  }
--- a/src/utils/package.ts
+++ b/src/utils/package.ts
@@ -1,5 +1,6 @@
 import { isObject } from 'util';

+import i18n from 'i18next';
 import { UpLinks } from '@verdaccio/types';
 import isString from 'lodash/isString';
 import dayjs from 'dayjs';
@@ -90,3 +91,7 @@ export function getRecentReleases(time: Time = {}): Time[] {

  return recent.slice(recent.length - 3, recent.length).reverse();
 }
+
+export function getAuthorName(authorName: string): string {
+  return authorName.toLowerCase() === 'anonymous' ? i18n.t('author-anonymous') : authorName;
+}
--- a/src/utils/test-enzyme.ts
+++ b/src/utils/test-enzyme.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import { mount, shallow } from 'enzyme';

 import ThemeProvider from '../design-tokens/ThemeProvider';
--- a/src/utils/test-react-testing-library.tsx
+++ b/src/utils/test-react-testing-library.tsx
@@ -1,10 +1,17 @@
 import { render } from '@testing-library/react';
 import React from 'react';
+import { I18nextProvider } from 'react-i18next';

+import i18nConfig from '../../i18n/config';
 import ThemeProvider from '../design-tokens/ThemeProvider';

 const customRender = (node: React.ReactElement<any>, ...options: Array<any>) => {
-  return render(<ThemeProvider>{node}</ThemeProvider>, ...options);
+  return render(
+    <ThemeProvider>
+      <I18nextProvider i18n={i18nConfig}>{node}</I18nextProvider>
+    </ThemeProvider>,
+    ...options
+  );
 };

 export * from '@testing-library/react';
--- a/tools/_verdaccio.config.yaml
+++ b/tools/_verdaccio.config.yaml
@@ -10,10 +10,10 @@ auth:
    users:
      foo:
        name: test
-        password: test
+        password: test #pragma: allowlist secret
      bar:
        name: bar
-        password: test
+        password: test #pragma: allowlist secret
 security:
  api:
    jwt:
@@ -23,7 +23,7 @@ security:
  web:
    sign:
      expiresIn: 100d
-      notBefore: 1
+      notBefore: 0

 uplinks:
  npmjs:
--- a/tools/dev.server.js
+++ b/tools/dev.server.js
@@ -17,7 +17,7 @@ compiler.hooks.done.tap('Verdaccio Dev Server', () => {
 });

 new WebpackDevServer(compiler, {
-  contentBase: `${env.DIST_PATH}`,
+  contentBase: env.DIST_PATH,
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: {
--- a/types/index.ts
+++ b/types/index.ts
@@ -2,6 +2,7 @@
 export interface VerdaccioOptions {
  url_prefix: string;
  base: string;
+  language?: string;
 }

 declare global {
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Juan Picado @jotadeveloper	a5f06cb3af	chore(release): 1.0.0	2020-03-13 07:35:00 +01:00
Priscila Oliveira	e27d59bff7	feat(de-translations): added de-DE translations to the UI (#441 )	2020-03-12 11:40:12 +01:00
Juan Picado @jotadeveloper	0abe1ef41c	feat: spanish translations to UI (#440 ) * feat: spanish translations to UI * chore: enable spanish	2020-03-09 07:01:01 +01:00
Priscila Oliveira	7428384b55	feat(i18n): added i18next for user interface translations (#432 )	2020-03-08 16:45:07 +01:00
dependabot-preview[bot]	8d4b3cee7e	build(deps-dev): bump @commitlint/cli from 8.3.4 to 8.3.5 (#436 ) Bumps [@commitlint/cli](https://github.com/conventional-changelog/commitlint) from 8.3.4 to 8.3.5. - [Release notes](https://github.com/conventional-changelog/commitlint/releases) - [Changelog](https://github.com/conventional-changelog/commitlint/blob/master/CHANGELOG.md) - [Commits](https://github.com/conventional-changelog/commitlint/compare/v8.3.4...v8.3.5) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: Priscila Oliveira <priscilawebdev@gmail.com>	2020-03-03 09:32:26 +01:00
dependabot-preview[bot]	d41ba981d2	build(deps-dev): bump react-dom from 16.12.0 to 16.13.0 (#437 )	2020-03-02 21:29:16 +01:00
dependabot-preview[bot]	26dbf3d921	build(deps-dev): [security] bump codecov from 3.6.1 to 3.6.5 (#434 ) Bumps [codecov](https://github.com/codecov/codecov-node) from 3.6.1 to 3.6.5. This update includes a security fix. - [Release notes](https://github.com/codecov/codecov-node/releases) - [Commits](https://github.com/codecov/codecov-node/commits) Signed-off-by: dependabot-preview[bot] <support@dependabot.com>	2020-02-20 07:36:02 +01:00
dependabot-preview[bot]	7cb20fa699	build(deps-dev): bump jest-environment-node from 24.9.0 to 25.1.0 (#430 ) Bumps [jest-environment-node](https://github.com/facebook/jest/tree/HEAD/packages/jest-environment-node) from 24.9.0 to 25.1.0. - [Release notes](https://github.com/facebook/jest/releases) - [Changelog](https://github.com/facebook/jest/blob/master/CHANGELOG.md) - [Commits](https://github.com/facebook/jest/commits/v25.1.0/packages/jest-environment-node) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: Priscila Oliveira <priscilawebdev@gmail.com> Co-authored-by: Juan Picado @jotadeveloper <juanpicado19@gmail.com>	2020-02-02 09:21:49 +01:00
Juan Picado @jotadeveloper	e6aad5370f	chore(release): 0.3.13	2020-02-02 08:37:41 +01:00
Daniel Ruf	d481f54948	fix: do not capitalize heading - closes #428 (#431 )	2020-02-02 08:36:55 +01:00
dependabot-preview[bot]	e6e9cfb2b4	build(deps-dev): bump @typescript-eslint/parser from 2.15.0 to 2.18.0 (#429 )	2020-02-01 22:17:53 +01:00
Juan Picado @jotadeveloper	6570e3fba1	chore: add snyk as an action (#230 )	2020-01-19 09:46:48 +01:00
Alfonso Austin	d4f2720994	chore(build): add missing export (#417 ) Co-authored-by: Juan Picado @jotadeveloper <juanpicado19@gmail.com>	2020-01-14 07:43:31 +01:00
Juan Picado @jotadeveloper	1eca1f4079	fix: reload packages on log in (#421 ) related https://github.com/verdaccio/ui/pull/415	2020-01-14 07:16:39 +01:00
James George	164cea6c10	fix: typo (#423 ) Co-authored-by: Juan Picado @jotadeveloper <juanpicado19@gmail.com>	2020-01-14 04:11:13 +01:00
James George	dad44c46c0	docs: add link to license file (#422 )	2020-01-14 03:47:14 +01:00
coolsp	222ffed022	fix: package list refresh based on logged-in user (#415 ) * fix: package list refresh based on logged-in user description: In `pages/home/Home.tsx` now monitoring any change in a user log-in/out which will trigger a new `API.request` to get the _packages_ from the Verdaccio-server. This is done by creating a `useEffect` on isUserLoggedIn. Code has been transplanted from `App/App.tsx` including the use of the Loading component during the XHR. The use of packages was removed from other components as no longer needed and tests updated. Resolves issue #414 * fix: package list refresh based on logged-in user description: In `pages/home/Home.tsx` now monitoring any change in a user log-in/out which will trigger a new `API.request` to get the _packages_ from the Verdaccio-server. This is done by creating a `useEffect` on isUserLoggedIn. Code has been transplanted from `App/App.tsx` including the use of the Loading component during the XHR. The use of packages was removed from other components as no longer needed and tests updated. Test snapshots updated Resolves issue #414 Co-authored-by: Juan Picado @jotadeveloper <juanpicado19@gmail.com>	2020-01-12 22:21:29 +01:00
Juan Picado @jotadeveloper	ee1c3f08eb	fix: update dependencies (#420 ) - just minor updates - verdaccio internal deps (we know the reason of the major change)	2020-01-12 19:43:05 +01:00
Alfonso Austin	1531cb6226	chore/401 add new script to update tests (#416 ) * chore: add new script to update tests #401 * chore: update script name	2020-01-11 22:22:48 +01:00