Merge branch 'master' into feat/custom-favicon

Improve list of languages in Chinese (Simplified) and other misc improvements

Co-authored-by: Juan Picado <juanpicado19@gmail.com>

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.7.1](https://github.com/verdaccio/ui/compare/v1.7.0...v1.7.1) (2020-04-27)
+
+
+### Bug Fixes
+
+* **i18n:** fixed current locale ([#462](https://github.com/verdaccio/ui/issues/462)) ([f44abd7](https://github.com/verdaccio/ui/commit/f44abd7dd08a8d68b1bfc2bf0c053f3e80a343d0))
+
 ## [1.7.0](https://github.com/verdaccio/ui/compare/v1.6.0...v1.7.0) (2020-04-24)
 
 

i18n/translations/de-DE.json

@@ -138,6 +138,7 @@
     },
     "lng": {
         "english": "Englisch",
+        "japanese": "Japanisch",
         "portuguese": "Portugiesisch",
         "spanish": "Spanisch",
         "german": "Deutsch",

i18n/translations/en-US.json

@@ -138,6 +138,7 @@
     },
     "lng": {
         "english": "English",
+        "japanese": "Japanese",
         "portuguese": "Portuguese",
         "spanish": "Spanish",
         "german": "German",
@@ -146,4 +147,4 @@
     },
     "help-to-translate": "Help to translate",
     "change-language": "Change language"
-}
+}

i18n/translations/es-ES.json

@@ -138,6 +138,7 @@
     },
     "lng": {
         "english": "Inglés",
+        "japanese": "Japonés",
         "portuguese": "Portugués",
         "spanish": "Español",
         "german": "Alemán",

i18n/translations/fr-FR.json

@@ -137,13 +137,14 @@
         "package-meta-is-required-at-detail-context": "packageMeta est obligatoire à DetailContext"
     },
     "lng": {
-        "english": "Anglaise",
-        "portuguese": "Portugaise",
+        "english": "Anglais",
+        "japanese": "Japonais",
+        "portuguese": "Portugais",
         "spanish": "Espagnol",
-        "german": "Allemande",
-        "chinese": "Chinoise",
-        "french": "Française"
+        "german": "Allemand",
+        "chinese": "Chinois",
+        "french": "Français"
     },
-    "help-to-translate": "Aide à traduire",
+    "help-to-translate": "Aide à la traduction",
     "change-language": "Changer la langue"
-}
+}

i18n/translations/ja-JP.json

@@ -135,5 +135,16 @@
       "app-context-not-correct-used": "AppContextが正しく使用されませんでした",
       "theme-context-not-correct-used": "ThemeContextが正しく使用されませんでした",
       "package-meta-is-required-at-detail-context": "DetailContextではpackageMetaが必要です"
-  }
-}
+  },
+  "lng": {
+    "english": "英語",
+    "japanese": "日本語",
+    "portuguese": "ポルトガル語",
+    "spanish": "スペイン語",
+    "german": "ドイツ語",
+    "chinese": "中国語",
+    "french": "フランス語"
+   },
+   "help-to-translate": "翻訳を助ける",
+   "change-language": "言語を変更"
+}

i18n/translations/pt-BR.json

@@ -138,6 +138,7 @@
     },
     "lng": {
         "english": "Inglês",
+        "japanese": "Japonês",
         "portuguese": "Português",
         "spanish": "Espanhol",
         "german": "Alemão",
@@ -146,4 +147,4 @@
     },
     "help-to-translate": "Ajude a traduzir",
     "change-language": "Mudar idioma"
-}
+}

i18n/translations/zh-CN.json

@@ -109,7 +109,7 @@
             "title": "贡献者"
         },
         "engines": {
-            "npm-version": "NPM Version",
+            "npm-version": "NPM版本",
             "node-js": "NODE JS"
         }
     },
@@ -136,13 +136,14 @@
         "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
     },
     "lng": {
-        "english": "英語",
-        "portuguese": "葡萄牙語",
-        "spanish": "西班牙文",
-        "german": "德語",
+        "english": "英语",
+        "japanese": "日语",
+        "portuguese": "葡萄牙语",
+        "spanish": "西班牙语",
+        "german": "德语",
         "chinese": "中文",
-        "french": "法國人"
+        "french": "法语"
     },
-    "help-to-translate": "幫助翻譯",
-    "change-language": "改變語言"
-}
+    "help-to-translate": "幫助翻译",
+    "change-language": "改变语言"
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@verdaccio/ui-theme",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "description": "Verdaccio User Interface",
   "author": {
     "name": "Verdaccio Core Team",

src/components/Icon/Icon.tsx

@@ -13,6 +13,7 @@ import austria from './img/austria.svg';
 import spain from './img/spain.svg';
 import usa from './img/usa.svg';
 import france from './img/france.svg';
+import japan from './img/japan.svg';
 import earth from './img/earth.svg';
 import verdaccio from './img/verdaccio.svg';
 import filebinary from './img/filebinary.svg';
@@ -32,6 +33,7 @@ export interface IconsMap {
   france: string;
   germany: string;
   india: string;
+  japan: string;
   earth: string;
   verdaccio: string;
   license: string;
@@ -60,6 +62,7 @@ export const Icons: IconsMap = {
   germany,
   usa,
   france,
+  japan,
 };
 
 export interface Props {

src/components/Icon/img/japan.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="japan"><path d="M473.655 88.275H38.345C17.167 88.275 0 105.442 0 126.62v258.76c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345V126.62c0-21.178-17.167-38.345-38.345-38.345z" fill="#f5f5f5"/><circle cx="256" cy="255.999" r="97.1" fill="#ff4b55"/></svg>

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -9,7 +9,6 @@ import Grow from '@material-ui/core/Grow';
 import Popper from '@material-ui/core/Popper';
 import MenuList from '@material-ui/core/MenuList';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
 
 import { Language } from '../../../i18n/config';
 import ThemeContext from '../../design-tokens/ThemeContext';
@@ -25,34 +24,48 @@ import Icon from '../Icon';
 
 const VERDACCIO_UI_GITHUB_REPOSITORY = 'https://github.com/verdaccio/ui';
 
-const getTranslatedCurrentLanguage = (
-  t: TFunction
-): { [key: string]: { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } } => ({
-  'en-us': {
-    translation: t('lng.english'),
-    icon: 'usa',
-  },
-  'fr-fr': {
-    translation: t('lng.french'),
-    icon: 'france',
-  },
-  'pt-br': {
-    translation: t('lng.portuguese'),
-    icon: 'brazil',
-  },
-  'de-de': {
-    translation: t('lng.german'),
-    icon: 'germany',
-  },
-  'es-es': {
-    translation: t('lng.spanish'),
-    icon: 'spain',
-  },
-  'zh-cn': {
-    translation: t('lng.chinese'),
-    icon: 'china',
-  },
-});
+const getTranslatedCurrentLanguageDetails = (
+  t: TFunction,
+  currentLanguage: string
+): { translation: string; icon: React.ComponentProps<typeof Icon>['name'] } => {
+  switch (currentLanguage) {
+    case 'fr-FR':
+      return {
+        translation: t('lng.french'),
+        icon: 'france',
+      };
+    case 'pt-BR':
+      return {
+        translation: t('lng.portuguese'),
+        icon: 'brazil',
+      };
+    case 'de-DE':
+      return {
+        translation: t('lng.german'),
+        icon: 'germany',
+      };
+    case 'es-ES':
+      return {
+        translation: t('lng.spanish'),
+        icon: 'spain',
+      };
+    case 'zh-CN':
+      return {
+        translation: t('lng.chinese'),
+        icon: 'china',
+      };
+    case 'ja-JP':
+      return {
+        translation: t('lng.japanese'),
+        icon: 'japan',
+      };
+    default:
+      return {
+        translation: t('lng.english'),
+        icon: 'usa',
+      };
+  }
+};
 
 const LanguageSwitch = () => {
   const themeContext = useContext(ThemeContext);
@@ -65,9 +78,9 @@ const LanguageSwitch = () => {
   }
 
   const languages = (i18next.options.resources ? Object.keys(i18next.options.resources) : []) as Array<Language>;
-  const currentLanguage: Language = i18next.language || i18next.options?.fallbackLng?.[0];
+  const currentLanguage = themeContext.language;
 
-  const { translation: userLanguage } = getTranslatedCurrentLanguage(t)[currentLanguage.toLowerCase()];
+  const { translation: userLanguage } = getTranslatedCurrentLanguageDetails(t, currentLanguage);
 
   const handleToggle = useCallback(() => {
     setOpen(prevOpen => !prevOpen);
@@ -124,7 +137,7 @@ const LanguageSwitch = () => {
                   {languages
                     .filter(language => language !== currentLanguage)
                     .map(language => {
-                      const { icon, translation } = getTranslatedCurrentLanguage(t)[language.toLowerCase()];
+                      const { icon, translation } = getTranslatedCurrentLanguageDetails(t, language);
                       return (
                         <StyledMenuItem
                           key={language}

src/design-tokens/ThemeProvider.tsx

@@ -3,15 +3,13 @@ import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 import i18next from 'i18next';
 
-import { Language } from '../../i18n/config';
-
 import ThemeContext from './ThemeContext';
 import { getTheme, ThemeMode } from './theme';
 import useLocalStorage from './useLocalStorage';
 
 const ThemeProvider: React.FC = ({ children }) => {
   const isDarkModeDefault = window?.__VERDACCIO_BASENAME_UI_OPTIONS?.darkMode;
-  const currentLanguage: Language = i18next.language || i18next.options?.fallbackLng?.[0];
+  const currentLanguage = i18next.languages?.[0];
 
   const [isDarkMode, setIsDarkMode] = useLocalStorage('darkMode', !!isDarkModeDefault);
   const [language, setLanguage] = useLocalStorage('language', currentLanguage);

src/template/index.html

@@ -6,7 +6,7 @@
     <title>
         <%= htmlWebpackPlugin.options.title %>
     </title>
-    <link rel="icon" type="image/png" href="<%= htmlWebpackPlugin.options.verdaccioURL %>/-/static/favicon.ico" />
+    <link rel="icon" type="image/png" href="<%= htmlWebpackPlugin.options.verdaccioURL %>/-/mapped/favicon" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script>
         window.__VERDACCIO_BASENAME_UI_OPTIONS = JSON.parse('<%= htmlWebpackPlugin.options.__UI_OPTIONS %>');

tools/webpack.prod.config.babel.js

@@ -49,7 +49,6 @@ const prodConf = {
       logo: 'ToReplaceByLogo',
       primary_color: 'ToReplaceByPrimaryColor',
       filename: 'index.html',
-      favicon: `${env.SRC_ROOT}/template/favicon.ico`,
       verdaccioURL: 'ToReplaceByVerdaccio',
       version_app: 'ToReplaceByVersion',
       template: `${env.SRC_ROOT}/template/index.html`,