feat: add translations api for fe

packages/web/package.json

@@ -16,6 +16,7 @@
     "@ant-design/colors": "^5.0.0",
     "@mdi/font": "^7.1.96",
     "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-replace": "^3.0.0",
     "@rollup/plugin-typescript": "^8.2.5",

packages/web/rollup.config.js

@@ -8,6 +8,7 @@ import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
 import replace from '@rollup/plugin-replace';
 import css from 'rollup-plugin-css-only';
+import json from '@rollup/plugin-json';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -121,6 +122,7 @@ export default [
         sourceMap: !production,
         inlineSources: !production,
       }),
+      json(),
 
       // In dev mode, call `npm run start` once
       // the bundle has been generated

packages/web/src/translations.ts

@@ -0,0 +1,43 @@
+import enUS from '../../../translations/en-US.json';
+import csCZ from '../../../translations/cs-CZ.json';
+import { getStringSettingsValue } from './settings/settingsTools';
+
+const translations = {
+  'en-US': enUS,
+  'cs-CZ': csCZ,
+};
+
+export function getSelectedLanguage(): string {
+  const borwserLanguage = getBrowserLanguage();
+
+  const selectedLanguage = getStringSettingsValue('localization.language', borwserLanguage);
+  return selectedLanguage;
+}
+
+export function getBrowserLanguage(): string {
+  if (typeof window !== 'undefined') {
+    return (navigator.languages && navigator.languages[0]) || navigator.language || 'en-US';
+  }
+  return 'en-US';
+}
+
+type TranslateOptions = {
+  defaultMessage: string;
+  values?: Record<string, unknown>;
+};
+
+export function _t(key: string, options: TranslateOptions): string {
+  const { defaultMessage } = options;
+
+  const selectedLanguage = getSelectedLanguage();
+  const selectedTranslations = translations[selectedLanguage] ?? enUS;
+
+  const translation = selectedTranslations[key];
+
+  if (!translation) {
+    console.warn(`Translation not found for key: ${key}. For language: ${selectedLanguage}`);
+    return defaultMessage;
+  }
+
+  return translation;
+}

packages/web/tsconfig.json

@@ -5,6 +5,7 @@
   "exclude": ["node_modules/*", "public/*"],
 
   "compilerOptions": {
+    "resolveJsonModule": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
@@ -12,7 +13,7 @@
     "noImplicitAny": false,
     "strictNullChecks": false,
     "strict": false,
-    "target": "es6",
+    "target": "es6"
     // "allowJs": true,
     // "checkJs": true,
   }