feat(i18n): add en-US locale with American date formatting (#1262)

feat(i18n): add en-US locale with American
   date formatting

   - Rename 'en' to 'en-GB' for explicit UK locale (DD/MM/YYYY)
   - Add 'en-US' locale for American date formatting (MM/DD/YYYY)
   - Both locales share the same English translations
   - Update getDateFnsLocale to support exact locale matching

Author: Djauron

packages/app-builder/src/root.tsx

@@ -139,7 +139,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
           <AgnosticNavigationContext.Provider value={navigate}>
             <AuthenticityTokenProvider token={loaderData?.['csrf'] ?? ''}>
               <FormatContext.Provider
-                value={{ locale: loaderData?.locale ?? 'en', timezone: loaderData?.timezone ?? 'UTC' }}
+                value={{ locale: loaderData?.locale ?? 'en-GB', timezone: loaderData?.timezone ?? 'UTC' }}
               >
                 <Tooltip.Provider>{children}</Tooltip.Provider>
               </FormatContext.Provider>

packages/app-builder/src/services/i18n/i18n-config.ts

@@ -4,19 +4,21 @@ import 'cronstrue/locales/fr.js';
 import { type Locale } from 'date-fns/locale';
 import { ar } from 'date-fns/locale/ar';
 import { enGB } from 'date-fns/locale/en-GB';
+import { enUS } from 'date-fns/locale/en-US';
 import { fr } from 'date-fns/locale/fr';
 import { type InitOptions } from 'i18next';
 
 export const defaultNS = 'common';
 
 // When adding a new supported lng, add corresponding cronstrue locale above too
-export const supportedLngs = ['en', 'fr', 'ar'] as const;
+export const supportedLngs = ['en-GB', 'en-US', 'fr', 'ar'] as const;
 export const languageNames: Record<(typeof supportedLngs)[number], { dir: 'ltr' | 'rtl'; name: string }> = {
-  en: { dir: 'ltr', name: 'English' },
+  'en-GB': { dir: 'ltr', name: 'English (UK)' },
+  'en-US': { dir: 'ltr', name: 'English (US)' },
   fr: { dir: 'ltr', name: 'Français' },
   ar: { dir: 'rtl', name: 'العربية' },
 };
-const fallbackLng = 'en';
+const fallbackLng = 'en-GB';
 
 export const i18nConfig = {
   interpolation: {
@@ -33,13 +35,19 @@ export const i18nConfig = {
 } satisfies InitOptions;
 
 const dateFnsLocales = {
-  en: enGB,
+  'en-GB': enGB,
+  'en-US': enUS,
   fr: fr,
   ar: ar,
 } satisfies Record<(typeof supportedLngs)[number], Locale>;
 
 export function getDateFnsLocale(locale: string): Locale {
-  // Extract language code (e.g., "fr" from "fr-FR")
+  // First try exact match (e.g., "en-US"), then fallback to language code (e.g., "en")
+  const exactMatch = supportedLngs.find((lng) => locale === lng);
+  if (exactMatch) {
+    return dateFnsLocales[exactMatch];
+  }
+
   const lang = locale.split('-')[0];
   const supportedLocale = supportedLngs.find((lng) => lang === lng) ?? fallbackLng;
   return dateFnsLocales[supportedLocale];

packages/app-builder/src/services/i18n/resources/resources.server.ts

@@ -4,7 +4,8 @@ import { en } from './en.server';
 import { fr } from './fr.server';
 
 export const resources = {
-  en,
+  'en-GB': en,
+  'en-US': en, // Reuse English translations, date/number formatting differs via locale
   fr,
   ar,
 } satisfies Record<(typeof supportedLngs)[number], typeof en>;