feat(i18n): added i18next for user interface translations (#432)

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>

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>
   );

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>"`;

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)({

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>
       );

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>
   );
 };

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>"`;

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;

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>
   );
 };

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,
+});

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',
 }

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>
   );

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';
@@ -21,12 +22,17 @@ 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;

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 = {

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}>

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',
+}));

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"

src/components/Developers/index.ts

@@ -1 +1,2 @@
-export { default, DeveloperType } from './Developers';
+export { default } from './Developers';
+export { DeveloperType } from './types';

src/components/Developers/types.ts

@@ -0,0 +1,4 @@
+export enum DeveloperType {
+  CONTRIBUTORS = 'contributors',
+  MAINTAINERS = 'maintainers',
+}

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>
   );

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>"`;

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} />

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>"`;

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;

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"
       >

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';
 
@@ -44,7 +45,7 @@ describe('<Header /> component with logged in state', () => {
   });
 
   test('should open login dialog', async () => {
-    const { getByText } = render(
+    const { getByTestId } = render(
       <Router>
         <AppContextProvider>
           <Header />
@@ -52,9 +53,9 @@ describe('<Header /> component with logged in state', () => {
       </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();
   });
 
@@ -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(() =>

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>
       )}

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;

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;

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>

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>

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

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} />

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>
       );

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

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;

src/components/LoginDialog/LoginDialog.test.tsx

@@ -1,8 +1,9 @@
 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';
 
@@ -35,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();
   });
 

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 />

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;

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>
   );

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>
   );
 };

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>
   );

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();
   });
 });

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"
   >

src/components/NotFound/index.ts

@@ -1 +1 @@
-export { default, NOT_FOUND_TEXT } from './NotFound';
+export { default } from './NotFound';

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()}

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;

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

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}

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()

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>"`;

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');

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} />
         </>
       )}

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;