feat: add initI18n to use selected language with fallback

Author: mchappell

packages/translation/src/index.ts

@@ -1,3 +1,4 @@
 export * from './types';
 export * from './lib/i18n';
 export { default as i18n } from './lib/i18n';
+export { initI18n } from './lib/i18n';

packages/translation/src/lib/i18n.ts

@@ -25,6 +25,49 @@ for (const lang of Object.values(Language)) {
   });
 }
 
+const normalizeNavigatorLanguage = (input: Language | string): Language => {
+  const code = String(input).toLowerCase();
+  const base = code.split(/[_-]/)[0]; // "en-GB" -> "en", "ja-JP" -> "ja"
+  switch (base) {
+    case 'en': {
+      return Language.en;
+    }
+    case 'ja': {
+      return Language.ja;
+    }
+    default: {
+      return DEFAULT_LANG;
+    }
+  }
+};
+
+export const initI18n = async (
+  lang?: Language | string,
+): Promise<typeof i18n> => {
+  const resolved = normalizeNavigatorLanguage(lang ?? DEFAULT_LANG);
+
+  if (i18n.isInitialized) {
+    return i18n.changeLanguage(resolved).then(() => i18n);
+  }
+
+  return i18n
+    .use(initReactI18next)
+    .init({
+      lng: resolved,
+      fallbackLng: DEFAULT_LANG,
+      resources,
+      supportedLngs: Object.values(Language) as string[],
+      nonExplicitSupportedLngs: true,
+      lowerCaseLng: true,
+      interpolation: { escapeValue: false },
+      react: {
+        useSuspense: false,
+        transSupportBasicHtmlNodes: true,
+      },
+    })
+    .then(() => i18n);
+};
+
 i18n.use(initReactI18next).init({
   fallbackLng: DEFAULT_LANG,
   interpolation: {

packages/translation/src/types/types.ts

@@ -6,6 +6,7 @@ import type {
 
 export enum Language {
   en = 'en',
+  ja = 'ja',
 }
 
 export type TranslationKey = keyof (typeof allTranslations)[Language.en];