feat(lng): added change language on the fly

Author: priscilawebdev

i18n/translations/en-US.json

@@ -135,5 +135,13 @@
         "app-context-not-correct-used": "The app context was not correct used",
         "theme-context-not-correct-used": "The theme context was not correct used",
         "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
-    }
+    },
+    "lng": {
+        "english": "English",
+        "portuguese": "Portuguese",
+        "spanish": "Spanish",
+        "german": "German",
+        "chinese": "Chinese"
+    },
+    "help-to-translate": "Help to translate"
 }

src/App/load-dayjs-locale.ts

@@ -25,14 +25,13 @@ function loadDayJSLocale() {
   }
 
   switch (locale.toLowerCase()) {
-    // At the moment we only support pt-BR, please see: i18n/translations/*
     case 'pt-br':
       {
         require('dayjs/locale/pt-br');
         dayjs.locale('pt-br');
       }
       break;
-    case 'de':
+    case 'de-de':
       {
         require('dayjs/locale/de');
         dayjs.locale('de');

src/components/Header/HeaderRight.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 
 import Button from '../../muiComponents/Button';
 import ThemeContext from '../../design-tokens/ThemeContext';
+import LanguageSwitch from '../LanguageSwitch';
 
 import { RightSide } from './styles';
 import HeaderToolTip from './HeaderToolTip';
@@ -72,6 +73,7 @@ const HeaderRight: React.FC<Props> = ({
       {!withoutSearch && (
         <HeaderToolTip onClick={onToggleMobileNav} title={t('search.packages')} tooltipIconType={'search'} />
       )}
+      <LanguageSwitch />
       <HeaderToolTip title={t('header.documentation')} tooltipIconType={'help'} />
       <HeaderToolTip onClick={onOpenRegistryInfoDialog} title={t('header.registry-info')} tooltipIconType={'info'} />
       <HeaderToolTip

src/components/Icon/Icon.tsx

@@ -11,6 +11,7 @@ import nicaragua from './img/nicaragua.svg';
 import pakistan from './img/pakistan.svg';
 import austria from './img/austria.svg';
 import spain from './img/spain.svg';
+import usa from './img/usa.svg';
 import earth from './img/earth.svg';
 import verdaccio from './img/verdaccio.svg';
 import filebinary from './img/filebinary.svg';
@@ -23,6 +24,7 @@ export interface IconsMap {
   brazil: string;
   spain: string;
   china: string;
+  usa: string;
   nicaragua: string;
   pakistan: string;
   austria: string;
@@ -54,6 +56,7 @@ export const Icons: IconsMap = {
   time,
   version,
   germany,
+  usa,
 };
 
 export interface Props {

src/components/Icon/img/usa.svg

@@ -0,0 +1,102 @@
+import React, { MouseEvent } from 'react';
+import LanguageIcon from '@material-ui/icons/Language';
+import { useTranslation } from 'react-i18next';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import i18n from 'i18next';
+import { withStyles } from '@material-ui/core/styles';
+import styled from '@emotion/styled';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import Button from '../../muiComponents/Button';
+import Tooltip from '../../muiComponents/Tooltip';
+import Divider from '../../muiComponents/Divider';
+import Box from '../../muiComponents/Box';
+import Link from '../Link';
+import { Theme } from '../../design-tokens/theme';
+
+import LanguageSwitchMenuItemContent from './LanguageSwitchMenuItemContent';
+
+const LanguageSwitch = () => {
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const anchorRef = React.useRef<HTMLButtonElement>(null);
+
+  const languages = i18n.options.resources ? Object.keys(i18n.options.resources) : [];
+  const userLanguage = i18n.language || i18n.options?.fallbackLng?.[0];
+
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+
+  const handleClose = (event: MouseEvent<HTMLLIElement | HTMLUListElement>) => {
+    if (anchorRef.current) {
+      if (anchorRef.current.contains(event.currentTarget)) {
+        return;
+      }
+    }
+
+    setOpen(false);
+  };
+
+  // return focus to the button when we transitioned from !open -> open
+  const prevOpen = React.useRef(open);
+  React.useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      if (anchorRef.current) {
+        anchorRef.current.focus();
+      }
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  const handleSwitchLanguage = (language: string) => (event: MouseEvent<HTMLLIElement>) => {
+    i18n.changeLanguage(language);
+    handleClose(event);
+  };
+
+  return (
+    <>
+      <Tooltip enterDelay={300} title={t('changeLanguage')}>
+        <SwitchButton color="inherit" onClick={handleToggle} ref={anchorRef}>
+          <LanguageIcon />
+          <span>{userLanguage}</span>
+          <ExpandMoreIcon fontSize="small" />
+        </SwitchButton>
+      </Tooltip>
+      <Menu anchorEl={anchorRef.current} onClose={handleClose} open={open}>
+        {languages.map(language => (
+          <MenuItem key={language} onClick={handleSwitchLanguage(language)} selected={userLanguage === language}>
+            <LanguageSwitchMenuItemContent language={language} />
+          </MenuItem>
+        ))}
+        <Box my={1}>
+          <Divider />
+        </Box>
+        <MenuItem
+          component="a"
+          href="https://github.com/verdaccio/ui#translations"
+          onClick={handleClose}
+          target="_blank">
+          {`${t('help-to-translate')}`}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export default LanguageSwitch;
+
+const SwitchButton = withStyles((theme: Theme) => ({
+  label: {
+    display: 'grid',
+    gridGap: theme?.spacing(1),
+    gridTemplateColumns: '24px 1fr 20px',
+  },
+}))(Button);
+
+const StyledLink = styled(Link)<{ theme?: Theme }>(({ theme }) => ({
+  color: theme?.palette.white,
+  textDecoration: 'none',
+}));

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styled from '@emotion/styled';
+
+import Icon from '../Icon';
+import Box from '../../muiComponents/Box';
+import { Theme } from '../../design-tokens/theme';
+
+interface Props {
+  language: string;
+}
+
+const LanguageSwitchMenuItemContent = ({ language }: Props) => {
+  const { t } = useTranslation();
+
+  switch (language.toLowerCase()) {
+    case 'en-us':
+      return (
+        <StyledBox display="grid">
+          <Icon name="usa" size="md" />
+          {t('lng.english')}
+        </StyledBox>
+      );
+    case 'pt-br':
+      return (
+        <StyledBox display="grid">
+          <Icon name="brazil" size="md" />
+          {t('lng.portuguese')}
+        </StyledBox>
+      );
+    case 'de-de':
+      return (
+        <StyledBox display="grid">
+          <Icon name="germany" size="md" />
+          {t('lng.german')}
+        </StyledBox>
+      );
+    case 'es-es':
+      return (
+        <StyledBox display="grid">
+          <Icon name="spain" size="md" />
+          {t('lng.spanish')}
+        </StyledBox>
+      );
+    case 'zh-cn':
+      return (
+        <StyledBox display="grid">
+          <Icon name="china" size="md" />
+          {t('lng.chinese')}
+        </StyledBox>
+      );
+    default:
+      return null;
+  }
+};
+
+export default LanguageSwitchMenuItemContent;
+
+const StyledBox = styled(Box)(({ theme }: Theme) => ({
+  gridGap: theme?.spacing(0.5),
+  gridTemplateColumns: '20px 1fr',
+  alignItems: 'center',
+}));

src/components/LanguageSwitch/LanguageSwitchMenuItemContent.tsx

@@ -0,0 +1 @@
+export { default } from './LanguageSwitch';

src/components/LanguageSwitch/index.ts

@@ -12,7 +12,7 @@ interface Props extends Omit<MenuItemProps, 'component'> {
 const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem({ button, ...props }, ref) {
   // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return <StyledMaterialUIMenuItem {...props} button={button as any} innerRef={ref} />;
+  return <StyledMaterialUIMenuItem {...props} button={button as any} ref={ref as any} />;
 });
 
 MenuItem.defaultProps = {