Merge pull request #85 from sillsdev/BL14005_DefaultLang

fix: Default to browser language (BL-14005)

Author: hatton

components/language-chooser/react/common/I18nProvider.tsx

@@ -1,35 +1,52 @@
-import React, { useState, useEffect } from 'react';
-import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
-import { i18n, initI18n } from './i18n';
+import React, { useState, useEffect } from "react";
+import { I18nProvider as LinguiI18nProvider } from "@lingui/react";
+import { i18n, initI18n } from "./i18n";
 
 interface I18nProviderProps {
   locale?: string;
   children: React.ReactNode;
 }
 
-export const I18nProvider: React.FC<I18nProviderProps> = ({ 
-  locale = 'en',
-  children 
+export const I18nProvider: React.FC<I18nProviderProps> = ({
+  locale,
+  children,
 }) => {
   const [isI18nInitialized, setIsI18nInitialized] = useState(false);
+  const effectiveLocale = locale || detectBrowserLocale();
 
   useEffect(() => {
     const setupI18n = async () => {
-      await initI18n(locale);
+      await initI18n(effectiveLocale);
       setIsI18nInitialized(true);
     };
-    
+
     setupI18n();
-  }, [locale]);
+  }, [effectiveLocale]);
 
   if (!isI18nInitialized) {
     // You can replace this with a loading indicator if needed
     return null;
   }
 
-  return (
-    <LinguiI18nProvider i18n={i18n}>
-      {children}
-    </LinguiI18nProvider>
-  );
-};
+  return <LinguiI18nProvider i18n={i18n}>{children}</LinguiI18nProvider>;
+};
+
+/**
+ * Detects the browser's preferred language
+ * @returns The detected browser locale or 'en' as fallback
+ */
+function detectBrowserLocale(): string {
+  if (typeof window === "undefined") {
+    return "en"; // Default for server-side rendering
+  }
+
+  // Use navigator language APIs to get the user's preferred language
+  const browserLocale =
+    navigator.languages?.[0] ||
+    navigator.language ||
+    (navigator as any).userLanguage ||
+    (navigator as any).browserLanguage ||
+    "en";
+
+  return browserLocale;
+}

components/language-chooser/react/language-chooser-react-mui/.storybook/preview.tsx

@@ -7,7 +7,7 @@ import availableLocales from "../../../../../available-locales.json" with { type
 
 const preview: Preview = {
   parameters: {
-    uiLanguage: "en",
+    uiLanguage: undefined,
   },
   decorators: [
     (Story, context) => {
@@ -45,15 +45,20 @@ const preview: Preview = {
 };
 
 const LanguageSelector: React.FC<{
-  locale: string;
-  onChange: (value: string) => void;
+  locale: string | undefined;
+  onChange: (value: string | undefined) => void;
 }> = ({ locale, onChange }) => (
   <FormControl>
     <Select
-      value={locale}
-      onChange={(e) => onChange(e.target.value)}
+      value={locale || "default"}
+      onChange={(e) =>
+        onChange(e.target.value === "default" ? undefined : e.target.value)
+      }
       size="small"
     >
+      <MenuItem key="default" value="default">
+        Default (browser locale)
+      </MenuItem>
       {availableLocales.map((code) => (
         <MenuItem key={code} value={code}>
           {code}