fix(i18n): mark supported languages for translation (#2377)

packages/lib/constants/i18n.ts

@@ -1,23 +1,13 @@
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/core/macro';
 import { z } from 'zod';
 
-export const SUPPORTED_LANGUAGE_CODES = [
-  'de',
-  'en',
-  'fr',
-  'es',
-  'it',
-  'nl',
-  'pl',
-  'pt-BR',
-  'ja',
-  'ko',
-  'zh',
-] as const;
+import { SUPPORTED_LANGUAGE_CODES, type SupportedLanguageCodes } from './locales';
+
+export * from './locales';
 
 export const ZSupportedLanguageCodeSchema = z.enum(SUPPORTED_LANGUAGE_CODES).catch('en');
 
-export type SupportedLanguageCodes = (typeof SUPPORTED_LANGUAGE_CODES)[number];
-
 export type I18nLocaleData = {
   /**
    * The supported language extracted from the locale.
@@ -30,61 +20,55 @@ export type I18nLocaleData = {
   locales: string[];
 };
 
-export const APP_I18N_OPTIONS = {
-  supportedLangs: SUPPORTED_LANGUAGE_CODES,
-  sourceLang: 'en',
-  defaultLocale: 'en-US',
-} as const;
-
 type SupportedLanguage = {
-  full: string;
   short: string;
+  full: MessageDescriptor;
 };
 
 export const SUPPORTED_LANGUAGES: Record<string, SupportedLanguage> = {
   de: {
-    full: 'German',
     short: 'de',
+    full: msg`German`,
   },
   en: {
-    full: 'English',
     short: 'en',
+    full: msg`English`,
   },
   fr: {
-    full: 'French',
     short: 'fr',
+    full: msg`French`,
   },
   es: {
-    full: 'Spanish',
     short: 'es',
+    full: msg`Spanish`,
   },
   it: {
-    full: 'Italian',
     short: 'it',
+    full: msg`Italian`,
   },
   nl: {
     short: 'nl',
-    full: 'Dutch',
+    full: msg`Dutch`,
   },
   pl: {
     short: 'pl',
-    full: 'Polish',
+    full: msg`Polish`,
   },
   'pt-BR': {
     short: 'pt-BR',
-    full: 'Portuguese (Brazil)',
+    full: msg`Portuguese (Brazil)`,
   },
   ja: {
     short: 'ja',
-    full: 'Japanese',
+    full: msg`Japanese`,
   },
   ko: {
     short: 'ko',
-    full: 'Korean',
+    full: msg`Korean`,
   },
   zh: {
     short: 'zh',
-    full: 'Chinese',
+    full: msg`Chinese`,
   },
 } satisfies Record<SupportedLanguageCodes, SupportedLanguage>;
 

packages/lib/constants/locales.ts

@@ -0,0 +1,21 @@
+export const SUPPORTED_LANGUAGE_CODES = [
+  'de',
+  'en',
+  'fr',
+  'es',
+  'it',
+  'nl',
+  'pl',
+  'pt-BR',
+  'ja',
+  'ko',
+  'zh',
+] as const;
+
+export type SupportedLanguageCodes = (typeof SUPPORTED_LANGUAGE_CODES)[number];
+
+export const APP_I18N_OPTIONS = {
+  supportedLangs: SUPPORTED_LANGUAGE_CODES,
+  sourceLang: 'en',
+  defaultLocale: 'en-US',
+} as const;

packages/ui/components/common/language-switcher-dialog.tsx

@@ -45,7 +45,7 @@ export const LanguageSwitcherDialog = ({ open, setOpen }: LanguageSwitcherDialog
           {Object.values(SUPPORTED_LANGUAGES).map((language) => (
             <CommandItem
               key={language.short}
-              value={language.full}
+              value={_(language.full)}
               onSelect={async () => setLanguage(language.short)}
             >
               <CheckIcon
@@ -54,7 +54,7 @@ export const LanguageSwitcherDialog = ({ open, setOpen }: LanguageSwitcherDialog
                   i18n.locale === language.short ? 'opacity-100' : 'opacity-0',
                 )}
               />
-              {SUPPORTED_LANGUAGES[language.short].full}
+              {_(language.full)}
             </CommandItem>
           ))}
         </CommandGroup>

packages/ui/primitives/document-flow/add-settings.tsx

@@ -269,7 +269,7 @@ export const AddSettingsFormPartial = ({
                       <SelectContent>
                         {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
                           <SelectItem key={code} value={code}>
-                            {language.full}
+                            {t(language.full)}
                           </SelectItem>
                         ))}
                       </SelectContent>

packages/ui/primitives/template-flow/add-template-settings.tsx

@@ -96,7 +96,7 @@ export const AddTemplateSettingsFormPartial = ({
   onSubmit,
   onAutoSave,
 }: AddTemplateSettingsFormProps) => {
-  const { t, i18n } = useLingui();
+  const { t } = useLingui();
 
   const organisation = useCurrentOrganisation();
 
@@ -262,7 +262,7 @@ export const AddTemplateSettingsFormPartial = ({
                       <SelectContent>
                         {Object.entries(SUPPORTED_LANGUAGES).map(([code, language]) => (
                           <SelectItem key={code} value={code}>
-                            {language.full}
+                            {t(language.full)}
                           </SelectItem>
                         ))}
                       </SelectContent>
@@ -391,7 +391,7 @@ export const AddTemplateSettingsFormPartial = ({
                         {Object.values(DOCUMENT_DISTRIBUTION_METHODS).map(
                           ({ value, description }) => (
                             <SelectItem key={value} value={value}>
-                              {i18n._(description)}
+                              {t(description)}
                             </SelectItem>
                           ),
                         )}