Update languages

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.2.0 (IN PROGRESS)
+
+### Features / Enhancements
+
+- Add internationalization i18n (#29)
+
 ## 3.1.0 (2023-10-14)
 
 ### Features / Enhancements

README.md

@@ -2,7 +2,7 @@
 
 ![App](https://github.com/VolkovLabs/volkovlabs-abc-app/raw/main/src/img/app.png)
 
-![Grafana 10](https://img.shields.io/badge/Grafana-10.1-orange)
+![Grafana](https://img.shields.io/badge/Grafana-10.1-orange)
 ![CI](https://github.com/volkovlabs/volkovlabs-abc-app/workflows/CI/badge.svg)
 ![E2E](https://github.com/volkovlabs/volkovlabs-abc-app/workflows/E2E/badge.svg)
 [![codecov](https://codecov.io/gh/VolkovLabs/volkovlabs-abc-app/branch/main/graph/badge.svg?token=2W9VR0PG5N)](https://codecov.io/gh/VolkovLabs/volkovlabs-abc-app)

package.json

@@ -73,5 +73,5 @@
     "test:ci": "jest --maxWorkers 4 --coverage",
     "upgrade": "npm upgrade --save"
   },
-  "version": "3.1.0"
+  "version": "3.2.0"
 }

src/constants/app.ts

@@ -1,9 +1,20 @@
 import { SupportedLanguage } from '../types';
 
+/**
+ * Languages
+ */
+export const enum Languages {
+  DE = 'de',
+  EN = 'en',
+  ES = 'es',
+  FR = 'fr',
+  ZH = 'zh',
+}
+
 /**
  * Default Language
  */
-export const DefaultLanguage: SupportedLanguage = 'en';
+export const DefaultLanguage: SupportedLanguage = Languages.EN;
 
 /**
  * App Information

src/i18n/__mocks__/config.ts

@@ -1,6 +1,7 @@
 import i18next from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { resources } from '../translations';
+import { Languages } from '../../constants';
 
 /**
  * Default Namespace
@@ -11,7 +12,7 @@ export const defaultNS = 'translation';
  * Init i18next
  */
 i18next.use(initReactI18next).init({
-  lng: 'en',
+  lng: Languages.EN,
   debug: false,
   resources,
   defaultNS,

src/i18n/translations/de.json

@@ -0,0 +1,12 @@
+{
+  "configPages": {
+    "config": "Config"
+  },
+  "home": {
+    "greeting": "Hello World!"
+  },
+  "config": {
+    "description": "The Abc App, is a plugin for Grafana that...",
+    "updateButton": "Update Settings"
+  }
+}

src/i18n/translations/es.json

@@ -0,0 +1,12 @@
+{
+  "configPages": {
+    "config": "Config"
+  },
+  "home": {
+    "greeting": "Hello World!"
+  },
+  "config": {
+    "description": "The Abc App, is a plugin for Grafana that...",
+    "updateButton": "Update Settings"
+  }
+}

src/i18n/translations/fr.json

@@ -0,0 +1,12 @@
+{
+  "configPages": {
+    "config": "Config"
+  },
+  "home": {
+    "greeting": "Hello World!"
+  },
+  "config": {
+    "description": "The Abc App, is a plugin for Grafana that...",
+    "updateButton": "Update Settings"
+  }
+}

src/i18n/translations/index.ts

@@ -1,4 +1,8 @@
+import de from './de.json';
 import en from './en.json';
+import es from './es.json';
+import fr from './fr.json';
+import zh from './zh.json';
 
 /**
  * Translation Resources
@@ -10,4 +14,32 @@ export const resources = {
   en: {
     translation: en,
   },
+
+  /**
+   * Spanish
+   */
+  es: {
+    translation: es,
+  },
+
+  /**
+   * French
+   */
+  fr: {
+    translation: fr,
+  },
+
+  /**
+   * German
+   */
+  de: {
+    translation: de,
+  },
+
+  /**
+   * Chinese
+   */
+  zh: {
+    translation: zh,
+  },
 } as const;

src/i18n/translations/zh.json

@@ -0,0 +1,12 @@
+{
+  "configPages": {
+    "config": "Config"
+  },
+  "home": {
+    "greeting": "Hello World!"
+  },
+  "config": {
+    "description": "The Abc App, is a plugin for Grafana that...",
+    "updateButton": "Update Settings"
+  }
+}

src/types.ts

@@ -1,3 +1,5 @@
+import { Languages } from './constants';
+
 /**
  * App Settings
  */
@@ -6,4 +8,4 @@ export interface AppSettings {}
 /**
  * Supported Language
  */
-export type SupportedLanguage = 'en' | 'es' | 'fr' | 'de' | 'zh';
+export type SupportedLanguage = Languages.EN | Languages.ES | Languages.FR | Languages.DE | Languages.ZH;

src/utils.ts

@@ -1,29 +1,29 @@
 import { config } from '@grafana/runtime';
-import { DefaultLanguage } from './constants';
+import { DefaultLanguage, Languages } from './constants';
 import { SupportedLanguage } from './types';
 
 /**
  * Get User Language
  * @param fallback
  */
 export const getUserLanguage = (fallback = DefaultLanguage): SupportedLanguage => {
-    const locale = config?.bootData?.user?.language;
-    const lang = locale?.split('-')?.[0];
+  const locale = config?.bootData?.user?.language;
+  const lang = locale?.split('-')?.[0];
 
-    /**
-     * Validate supported languages
-     */
-    switch (lang) {
-        case 'en':
-        case 'es':
-        case 'fr':
-        case 'de':
-        case 'zh': {
-            return lang;
-        }
+  /**
+   * Validate supported languages
+   */
+  switch (lang) {
+    case Languages.EN:
+    case Languages.ES:
+    case Languages.FR:
+    case Languages.DE:
+    case Languages.ZH: {
+      return lang;
+    }
 
-        default: {
-            return fallback;
-        }
+    default: {
+      return fallback;
     }
+  }
 };