feat(lng): Added change language on the fly (#456)

* feat(lng): added change language on the fly

* fixed dropdown

* applied feedbacks

* added translation

* updated bundlesize

* fixed error

* updated snaps

* added french language

* added language in storage

* updated styles

* fixed tests

i18n/config.ts

@@ -8,6 +8,29 @@ import translationDE from './translations/de-DE.json';
 import translationFR from './translations/fr-FR.json';
 import translationCN from './translations/zh-CN.json';
 
+const languages = {
+  'en-US': {
+    translation: translationEN,
+  },
+  'pt-BR': {
+    translation: translationPT,
+  },
+  'es-ES': {
+    translation: translationES,
+  },
+  'de-DE': {
+    translation: translationDE,
+  },
+  'fr-FR': {
+    translation: translationFR,
+  },
+  'zh-CN': {
+    translation: translationCN,
+  },
+};
+
+type Language = keyof typeof languages;
+
 i18n
   // pass the i18n instance to react-i18next.
   .use(initReactI18next)
@@ -19,26 +42,7 @@ i18n
     fallbackLng: 'en-US',
     whitelist: ['en-US', 'pt-BR', 'es-ES', 'de-DE', 'fr-FR', 'zh-CN'],
     load: 'currentOnly',
-    resources: {
-      'en-US': {
-        translation: translationEN,
-      },
-      'pt-BR': {
-        translation: translationPT,
-      },
-      'es-ES': {
-        translation: translationES,
-      },
-      'de-DE': {
-        translation: translationDE,
-      },
-      'fr-FR': {
-        translation: translationFR,
-      },
-      'zh-CN': {
-        translation: translationCN,
-      },
-    },
+    resources: languages,
     debug: false,
     interpolation: {
       escapeValue: false, // react already safes from xss
@@ -46,3 +50,4 @@ i18n
   });
 
 export default i18n;
+export { Language };

i18n/translations/de-DE.json

@@ -135,5 +135,15 @@
         "app-context-not-correct-used": "Der App-Kontext wurde nicht korrekt verwendet",
         "theme-context-not-correct-used": "Der Theme-Kontext wurde nicht korrekt verwendet",
         "package-meta-is-required-at-detail-context": "packageMeta wird bei DetailContext benötigt"
-    }
+    },
+    "lng": {
+        "english": "Englisch",
+        "portuguese": "Portugiesisch",
+        "spanish": "Spanisch",
+        "german": "Deutsch",
+        "chinese": "Chinesisch",
+        "french": "Französisch"
+    },
+    "help-to-translate": "Hilfe beim Übersetzen",
+    "change-language": "Sprache ändern"
 }

i18n/translations/en-US.json

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

i18n/translations/es-ES.json

@@ -135,5 +135,15 @@
         "app-context-not-correct-used": "El contexto de la aplicación no fue correctamente usado",
         "theme-context-not-correct-used": "El contexto del tema no fue correctamente usado",
         "package-meta-is-required-at-detail-context": "packageMeta es requerido en DetailContext"
-    }
+    },
+    "lng": {
+        "english": "Inglés",
+        "portuguese": "Portugués",
+        "spanish": "Español",
+        "german": "Alemán",
+        "chinese": "Chino",
+        "french": "francés"
+    },
+    "help-to-translate": "Ayuda a traducir",
+    "change-language": "Cambiar idioma"
 }

i18n/translations/fr-FR.json

@@ -135,5 +135,15 @@
         "app-context-not-correct-used": "Le contexte de l'application n'a pas été utilisé correctement",
         "theme-context-not-correct-used": "Le contexte du thème n'a pas été utilisé correctement",
         "package-meta-is-required-at-detail-context": "packageMeta est obligatoire à DetailContext"
-    }
+    },
+    "lng": {
+        "english": "Anglaise",
+        "portuguese": "Portugaise",
+        "spanish": "Espagnol",
+        "german": "Allemande",
+        "chinese": "Chinoise",
+        "french": "Française"
+    },
+    "help-to-translate": "Aide à traduire",
+    "change-language": "Changer la langue"
 }

i18n/translations/pt-BR.json

@@ -114,7 +114,7 @@
         }
     },
     "footer": {
-        "powered-by": "Distribuído por",
+        "powered-by": "Feito por",
         "made-with-love-on": "Feito com amor <0>♥</0> no(a)"
     },
     "button": {
@@ -135,5 +135,15 @@
         "app-context-not-correct-used": "O contexto do aplicativo não foi usado corretamente",
         "theme-context-not-correct-used": "O contexto do tema não foi usado corretamente",
         "package-meta-is-required-at-detail-context": "packageMeta é requerido em DetailContext"
-    }
+    },
+    "lng": {
+        "english": "Inglês",
+        "portuguese": "Português",
+        "spanish": "Espanhol",
+        "german": "Alemão",
+        "chinese": "Chinês",
+        "french": "Francês"
+    },
+    "help-to-translate": "Ajude a traduzir",
+    "change-language": "Mudar idioma"
 }

i18n/translations/zh-CN.json

@@ -134,5 +134,15 @@
         },
         "app-context-not-correct-used": "The app context was not correct used",
         "package-meta-is-required-at-detail-context": "packageMeta is required at DetailContext"
-    }
+    },
+    "lng": {
+        "english": "英語",
+        "portuguese": "葡萄牙語",
+        "spanish": "西班牙文",
+        "german": "德語",
+        "chinese": "中文",
+        "french": "法國人"
+    },
+    "help-to-translate": "幫助翻譯",
+    "change-language": "改變語言"
 }