add a new language - Ukrainian && fix bug with dayjs locale (#472)

i18n/config.ts

@@ -8,6 +8,7 @@ import translationDE from './translations/de-DE.json';
 import translationFR from './translations/fr-FR.json';
 import translationCN from './translations/zh-CN.json';
 import translationJP from './translations/ja-JP.json';
+import translationUA from './translations/uk-UA.json';
 
 const languages = {
   'en-US': {
@@ -31,6 +32,9 @@ const languages = {
   'ja-JP': {
     translation: translationJP,
   },
+  'uk-UA': {
+    translation: translationUA,
+  },
 };
 
 type Language = keyof typeof languages;
@@ -44,7 +48,7 @@ i18n
     // in case window.VEDACCIO_LANGUAGE is undefined,it will fall back to 'en-US'
     lng: window?.__VERDACCIO_BASENAME_UI_OPTIONS?.language,
     fallbackLng: 'en-US',
-    whitelist: ['en-US', 'pt-BR', 'es-ES', 'de-DE', 'fr-FR', 'zh-CN', 'ja-JP'],
+    whitelist: ['en-US', 'pt-BR', 'es-ES', 'de-DE', 'fr-FR', 'zh-CN', 'ja-JP', 'uk-UA'],
     load: 'currentOnly',
     resources: languages,
     debug: false,

i18n/translations/de-DE.json

@@ -143,7 +143,8 @@
         "spanish": "Spanisch",
         "german": "Deutsch",
         "chinese": "Chinesisch",
-        "french": "Französisch"
+        "french": "Französisch",
+        "ukraine": "Ukrainisch"
     },
     "help-to-translate": "Hilfe beim Übersetzen",
     "change-language": "Sprache ändern"

i18n/translations/en-US.json

@@ -143,7 +143,8 @@
         "spanish": "Spanish",
         "german": "German",
         "chinese": "Chinese",
-        "french":  "French"
+        "french":  "French",
+        "ukraine": "Ukraine"
     },
     "help-to-translate": "Help to translate",
     "change-language": "Change language"

i18n/translations/es-ES.json

@@ -143,7 +143,8 @@
         "spanish": "Español",
         "german": "Alemán",
         "chinese": "Chino",
-        "french": "francés"
+        "french": "Francés",
+        "ukraine": "Ucraniano"
     },
     "help-to-translate": "Ayuda a traducir",
     "change-language": "Cambiar idioma"

i18n/translations/fr-FR.json

@@ -143,7 +143,8 @@
         "spanish": "Espagnol",
         "german": "Allemand",
         "chinese": "Chinois",
-        "french": "Français"
+        "french": "Français",
+        "ukraine": "Ukrainien"
     },
     "help-to-translate": "Aide à la traduction",
     "change-language": "Changer la langue"

i18n/translations/ja-JP.json

@@ -143,7 +143,8 @@
     "spanish": "スペイン語",
     "german": "ドイツ語",
     "chinese": "中国語",
-    "french": "フランス語"
+    "french": "フランス語",
+    "ukraine": "ウクライナ"
    },
    "help-to-translate": "翻訳を助ける",
    "change-language": "言語を変更"

i18n/translations/pt-BR.json

@@ -143,7 +143,8 @@
         "spanish": "Espanhol",
         "german": "Alemão",
         "chinese": "Chinês",
-        "french": "Francês"
+        "french": "Francês",
+        "ukraine": "Ucraniano"
     },
     "help-to-translate": "Ajude a traduzir",
     "change-language": "Mudar idioma"

i18n/translations/uk-UA.json

@@ -0,0 +1,151 @@
+{
+    "copy-to-clipboard": "Копіювати в буфер обміну",
+    "author-anonymous": "Анонімний",
+    "action-bar-action": {
+        "visit-home-page": "Відвідати домашню сторінку",
+        "open-an-issue": "Відкрити питання, проблему, ...",
+        "download-tarball": "Завантажити архів"
+    },
+    "dialog": {
+        "registry-info": {
+            "title": "Інформація про реєстр"
+        }
+    },
+    "header": {
+        "documentation": "Документація",
+        "registry-info": "Інформація про реєстр",
+        "greetings": "Привіт "
+    },
+    "search": {
+        "packages": "Пошук пакетів"
+    },
+    "auto-complete": {
+        "loading": "Завантаження...",
+        "no-results-found": "Нічого не знайдено"
+    },
+    "tab": {
+        "uplinks": "Публікації",
+        "versions": "Версії",
+        "dependencies": "Залежності",
+        "readme": "Опис"
+    },
+    "uplinks": {
+        "title": "Публікації",
+        "no-items": "{{name}} не опубліковано."
+    },
+    "versions": {
+        "current-tags": "Поточні теги",
+        "version-history": "Історія версій",
+        "not-available": "Недоступний"
+    },
+    "package": {
+        "published-on": "Опубліковано {{time}} •",
+        "version": "v{{version}}",
+        "visit-home-page": "Відвідати домашню сторінку",
+        "homepage": "Домашня сторінка",
+        "open-an-issue": "Відкрити питання, проблему, ...",
+        "bugs": "Помилки",
+        "download": "Завантажити {{what}}",
+        "the-tar-file": "файл tar",
+        "tarball": "Завантажити"
+    },
+    "dependencies": {
+        "has-no-dependencies": "{{package}} не має залежностей.",
+        "dependency-block": "{{package}}@{{version}}"
+    },
+    "form": {
+        "username": "Ім'я користувача",
+        "password": "Пароль"
+    },
+    "form-placeholder": {
+        "username": "Ваше ім'я користувача",
+        "password": "Ваш надійний пароль"
+    },
+    "form-validation": {
+        "required-field": "Це поле є обов'язковим",
+        "required-min-length": "Для цього поля потрібна мінімальна довжина {{length}}",
+        "unable-to-sign-in": "Неможливо ввійти",
+        "username-or-password-cant-be-empty": "Ім'я користувача або пароль не можуть бути порожніми !"
+    },
+    "help": {
+        "title": "Пакети ще не опубліковані",
+        "sub-title": "Опублікувати свій перший пакет просто:",
+        "first-step": "1. Підключіться",
+        "first-step-command-line": "npm adduser --registry {{registryUrl}}",
+        "second-step": "2. Опублікуйте",
+        "second-step-command-line": "npm publish --registry {{registryUrl}}",
+        "third-step": "3. Оновіть цю сторінку."
+    },
+    "sidebar": {
+        "detail": {
+            "latest-version": "Остання версія v{{version}}",
+            "version": "v{{version}}"
+        },
+        "installation": {
+            "title": "Встановлення",
+            "install-using-yarn": "Встановлення за допомогою yarn",
+            "install-using-yarn-command": "yarn add {{packageName}}",
+            "install-using-npm": "Встановлення за допомогою npm",
+            "install-using-npm-command": "npm install {{packageName}}",
+            "install-using-pnpm": "Встановлення за допомогою pnpm",
+            "install-using-pnpm-command": "pnpm install {{packageName}}"
+        },
+        "repository": {
+            "title": "Сховище"
+        },
+        "author": {
+            "title": "Автор"
+        },
+        "distribution": {
+            "title": "Умови поширення",
+            "license": "Ліцензія",
+            "size": "Розмір",
+            "file-count": "кількість файлів"
+        },
+        "maintainers": {
+            "title": "Технічне супроводження"
+        },
+        "contributors": {
+            "title": "Автори"
+        },
+        "engines": {
+            "npm-version": "NPM версія",
+            "node-js": "NODE JS"
+        }
+    },
+    "footer": {
+        "powered-by": "Працює на",
+        "made-with-love-on": "Зроблено з <0> ♥ </0> на"
+    },
+    "button": {
+        "close": "Закрити",
+        "cancel": "Скасувати",
+        "login": "Вхід",
+        "logout": "Вийти",
+        "go-to-the-home-page": "Перейдіть на головну сторінку",
+        "learn-more": "Вивчайте більше",
+        "fund-this-package": "<0>Фінансувати</0> цей пакет"
+    },
+    "error": {
+        "unspecific": "Щось пішло не так.",
+        "404": {
+            "page-not-found": "404 - Сторінку не знайдено",
+            "sorry-we-could-not-find-it": "На жаль, ми не змогли його знайти ..."
+        },
+        "app-context-not-correct-used": "Контекст програми не використовувався правильно",
+        "theme-context-not-correct-used": "Контекст теми використано неправильно",
+        "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
+    },
+    "lng": {
+        "english": "Англійська",
+        "japanese": "Японська",
+        "portuguese": "Португальська",
+        "spanish": "Іспанська",
+        "german": "Німецька",
+        "chinese": "Китайська",
+        "french":  "Французька",
+        "ukraine": "Українська"
+    },
+    "help-to-translate": "Допоможіть перекласти",
+    "change-language": "Змінити мову"
+}

i18n/translations/zh-CN.json

@@ -142,7 +142,8 @@
         "spanish": "西班牙语",
         "german": "德语",
         "chinese": "中文",
-        "french": "法语"
+        "french": "法语",
+        "ukraine": "烏克蘭"
     },
     "help-to-translate": "幫助翻译",
     "change-language": "改变语言"

package.json

@@ -144,7 +144,7 @@
     },
     {
       "path": "./static/main.*.js",
-      "maxSize": "30 kB"
+      "maxSize": "35 kB"
     },
     {
       "path": "./static/[0-9].*.{js,css}",

partials/storage/jquery/package.json

@@ -4984,4 +4984,4 @@
 	"_rev": "61-e6be890a78963127",
 	"readme": "# jQuery\n\n> jQuery is a fast, small, and feature-rich JavaScript library.\n\nFor information on how to get started and how to use jQuery, please see [jQuery's documentation](http://api.jquery.com/).\nFor source files and issues, please visit the [jQuery repo](https://github.com/jquery/jquery).\n\nIf upgrading, please see the [blog post for 3.3.1](https://blog.jquery.com/2017/03/20/jquery-3.3.1-now-available/). This includes notable differences from the previous version and a more readable changelog.\n\n## Including jQuery\n\nBelow are some of the most common ways to include jQuery.\n\n### Browser\n\n#### Script tag\n\n```html\n<script src=\"https://code.jquery.com/jquery-3.3.1.min.js\"></script>\n```\n\n#### Babel\n\n[Babel](http://babeljs.io/) is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.\n\n```js\nimport $ from \"jquery\";\n```\n\n#### Browserify/Webpack\n\nThere are several ways to use [Browserify](http://browserify.org/) and [Webpack](https://webpack.github.io/). For more information on using these tools, please refer to the corresponding project's documention. In the script, including jQuery will usually look like this...\n\n```js\nvar $ = require(\"jquery\");\n```\n\n#### AMD (Asynchronous Module Definition)\n\nAMD is a module format built for the browser. For more information, we recommend [require.js' documentation](http://requirejs.org/docs/whyamd.html).\n\n```js\ndefine([\"jquery\"], function($) {\n\n});\n```\n\n### Node\n\nTo include jQuery in [Node](nodejs.org), first install with npm.\n\n```sh\nnpm install jquery\n```\n\nFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as [jsdom](https://github.com/tmpvar/jsdom). This can be useful for testing purposes.\n\n```js\nrequire(\"jsdom\").env(\"\", function(err, window) {\n\tif (err) {\n\t\tconsole.error(err);\n\t\treturn;\n\t}\n\n\tvar $ = require(\"jquery\")(window);\n});\n```",
 	"_id": "jquery"
-}
+}

src/App/App.tsx

@@ -13,10 +13,10 @@ import Loading from '../components/Loading';
 import Box from '../muiComponents/Box';
 import StyleBaseline from '../design-tokens/StyleBaseline';
 import { Theme } from '../design-tokens/theme';
+import loadDayJSLocale from '../design-tokens/load-dayjs-locale';
 
 import AppContextProvider from './AppContextProvider';
 import AppRoute, { history } from './AppRoute';
-import loadDayJSLocale from './load-dayjs-locale';
 
 const StyledBox = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   backgroundColor: theme?.palette.background.default,

src/components/Icon/Icon.tsx

@@ -14,6 +14,7 @@ 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 ukraine from './img/ukraine.svg';
 import earth from './img/earth.svg';
 import verdaccio from './img/verdaccio.svg';
 import filebinary from './img/filebinary.svg';
@@ -34,6 +35,7 @@ export interface IconsMap {
   germany: string;
   india: string;
   japan: string;
+  ukraine: string;
   earth: string;
   verdaccio: string;
   license: string;
@@ -63,6 +65,7 @@ export const Icons: IconsMap = {
   usa,
   france,
   japan,
+  ukraine,
 };
 
 export interface Props {

src/components/Icon/img/ukraine.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" id="ukraine"><path d="M0 248v121.6C0 396.8 21.6 416 48 416h400c26.4 0 48-19.2 48-46.4V248H0z" fill="#fdce0c"/><path d="M248 248l197.6 168c26.4 0 50.4-19.2 50.4-46.4V248H248z" fill="#f4ba00"/><path d="M448 80H48C21.6 80 0 99.2 0 126.4V248h496V126.4c0-27.2-21.6-46.4-48-46.4z" fill="#44c1ef"/><path d="M448 80H48l200 168h248V126.4c0-27.2-21.6-46.4-48-46.4z" fill="#18b4ea"/><path d="M496 368.8c0 29.6-21.6 47.2-48 47.2H48c-26.4 0-48-20.8-48-48" fill="#f2a700"/><path d="M48 80h400c26.4 0 48 19.2 48 46.4V216" fill="#10a2e2"/></svg>

src/components/LanguageSwitch/LanguageSwitch.tsx

@@ -59,6 +59,11 @@ const getTranslatedCurrentLanguageDetails = (
         translation: t('lng.japanese'),
         icon: 'japan',
       };
+    case 'uk-UA':
+      return {
+        translation: t('lng.ukraine'),
+        icon: 'ukraine',
+      };
     default:
       return {
         translation: t('lng.english'),

src/design-tokens/ThemeProvider.tsx

@@ -3,6 +3,7 @@ import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
 import i18next from 'i18next';
 
+import loadDayJSLocale from './load-dayjs-locale';
 import ThemeContext from './ThemeContext';
 import { getTheme, ThemeMode } from './theme';
 import useLocalStorage from './useLocalStorage';
@@ -22,7 +23,8 @@ const ThemeProvider: React.FC = ({ children }) => {
 
   useEffect(() => {
     changeLanguage();
-  }, [language, changeLanguage]);
+    loadDayJSLocale();
+  }, [language, changeLanguage, loadDayJSLocale]);
 
   return (
     <ThemeContext.Provider value={{ isDarkMode, setIsDarkMode, language, setLanguage }}>

src/design-tokens/load-dayjs-locale.ts

@@ -19,12 +19,7 @@ function loadDayJSLocale() {
   const fallbackLanguage = getFallFackLanguage();
   const locale = i18n.language || fallbackLanguage;
 
-  // dayjs loades en-US by default
-  if (!locale || locale === 'en-US') {
-    return;
-  }
-
-  switch (locale.toLowerCase()) {
+  switch (locale?.toLowerCase()) {
     case 'pt-br':
       {
         require('dayjs/locale/pt-br');
@@ -61,7 +56,17 @@ function loadDayJSLocale() {
         dayjs.locale('ja');
       }
       break;
+    case 'uk-ua':
+      {
+        require('dayjs/locale/uk');
+        dayjs.locale('uk');
+      }
+      break;
     default:
+      {
+        require('dayjs/locale/en');
+        dayjs.locale('en');
+      }
       break;
   }
 }