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

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