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

src/utils/constants.ts

@@ -1,7 +1,3 @@
-export const TEXT = {
-  CLIPBOARD_COPY: 'Copy to Clipboard',
-};
-
 export const NODE_MANAGER = {
   npm: 'npm',
   yarn: 'yarn',

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

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

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

src/utils/test-enzyme.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { mount, shallow } from 'enzyme';
 
 import ThemeProvider from '../design-tokens/ThemeProvider';

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