@asafarim/shared-i18n 0.8.0 → 0.9.0

package/demo/src/components/StatusCard.tsx

@@ -1,109 +1,109 @@
-import { useState, useEffect } from 'react'
-import {
-  useTranslation,
-  SUPPORTED_LANGUAGES,
-  LANGUAGE_NAMES,
-  LANGUAGE_COOKIE_NAME,
-  getLanguageFromCookie,
-  getInitialLanguage,
-  updateUserLanguagePreference,
-  isSupportedLanguage
-} from '@asafarim/shared-i18n'
-import Panel from './Panel'
-
-export default function StatusCard() {
-  const { t, i18n } = useTranslation('demo')
-  const [cookieValue, setCookieValue] = useState<string | null>(null)
-  const [initialLang, setInitialLang] = useState<string>('')
-  const [syncResult, setSyncResult] = useState<{ type: 'success' | 'error'; message: string } | null>(null)
-  const [isSyncing, setIsSyncing] = useState(false)
-
-  useEffect(() => {
-    setCookieValue(getLanguageFromCookie())
-    setInitialLang(getInitialLanguage())
-  }, [i18n.language])
-
-  const backendUrl = import.meta.env.VITE_IDENTITY_API_URL || 'not set'
-
-  const handleSync = async () => {
-    setIsSyncing(true)
-    setSyncResult(null)
-    try {
-      const currentLanguage = i18n.language
-      if (isSupportedLanguage(currentLanguage)) {
-        await updateUserLanguagePreference(currentLanguage)
-      } else {
-        throw new Error(`Unsupported language: ${currentLanguage}`)
-      }
-      setSyncResult({
-        type: 'success',
-        message: t('status.resultOk')
-      })
-    } catch (error) {
-      setSyncResult({
-        type: 'error',
-        message: `${t('status.resultFail')}: ${error instanceof Error ? error.message : 'Unknown error'}`
-      })
-    } finally {
-      setIsSyncing(false)
-    }
-  }
-
-  return (
-    <Panel title={t('status.heading')}>
-      <div className="status-grid">
-        <div className="status-card">
-          <h4>Current Language</h4>
-          <p>{i18n.language}</p>
-        </div>
-
-        <div className="status-card">
-          <h4>{t('status.cookie')}</h4>
-          <p>
-            <strong>Name:</strong> {LANGUAGE_COOKIE_NAME}
-          </p>
-          <p>
-            <strong>Value:</strong> {cookieValue || '(not set)'}
-          </p>
-        </div>
-
-        <div className="status-card">
-          <h4>Initial Language</h4>
-          <p>{initialLang}</p>
-        </div>
-
-        <div className="status-card">
-          <h4>Supported Languages</h4>
-          <ul className="status-list">
-            {SUPPORTED_LANGUAGES.map((lang: string) => (
-              <li key={lang}>
-                {lang}: {LANGUAGE_NAMES[lang as keyof typeof LANGUAGE_NAMES]}
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        <div className="status-card">
-          <h4>{t('status.backend')}</h4>
-          <p>{backendUrl}</p>
-        </div>
-
-        <div className="status-card">
-          <h4>Backend Sync</h4>
-          <button
-            className="sync-button"
-            onClick={handleSync}
-            disabled={isSyncing}
-          >
-            {isSyncing ? 'Syncing...' : t('status.simulate')}
-          </button>
-          {syncResult && (
-            <div className={`sync-result ${syncResult.type}`}>
-              {syncResult.message}
-            </div>
-          )}
-        </div>
-      </div>
-    </Panel>
-  )
-}
+import { useState, useEffect } from 'react'
+import {
+  useTranslation,
+  SUPPORTED_LANGUAGES,
+  LANGUAGE_NAMES,
+  LANGUAGE_COOKIE_NAME,
+  getLanguageFromCookie,
+  getInitialLanguage,
+  updateUserLanguagePreference,
+  isSupportedLanguage
+} from '@asafarim/shared-i18n'
+import Panel from './Panel'
+
+export default function StatusCard() {
+  const { t, i18n } = useTranslation('demo')
+  const [cookieValue, setCookieValue] = useState<string | null>(null)
+  const [initialLang, setInitialLang] = useState<string>('')
+  const [syncResult, setSyncResult] = useState<{ type: 'success' | 'error'; message: string } | null>(null)
+  const [isSyncing, setIsSyncing] = useState(false)
+
+  useEffect(() => {
+    setCookieValue(getLanguageFromCookie())
+    setInitialLang(getInitialLanguage())
+  }, [i18n.language])
+
+  const backendUrl = import.meta.env.VITE_IDENTITY_API_URL || 'not set'
+
+  const handleSync = async () => {
+    setIsSyncing(true)
+    setSyncResult(null)
+    try {
+      const currentLanguage = i18n.language
+      if (isSupportedLanguage(currentLanguage)) {
+        await updateUserLanguagePreference(currentLanguage)
+      } else {
+        throw new Error(`Unsupported language: ${currentLanguage}`)
+      }
+      setSyncResult({
+        type: 'success',
+        message: t('status.resultOk')
+      })
+    } catch (error) {
+      setSyncResult({
+        type: 'error',
+        message: `${t('status.resultFail')}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      })
+    } finally {
+      setIsSyncing(false)
+    }
+  }
+
+  return (
+    <Panel title={t('status.heading')}>
+      <div className="status-grid">
+        <div className="status-card">
+          <h4>Current Language</h4>
+          <p>{i18n.language}</p>
+        </div>
+
+        <div className="status-card">
+          <h4>{t('status.cookie')}</h4>
+          <p>
+            <strong>Name:</strong> {LANGUAGE_COOKIE_NAME}
+          </p>
+          <p>
+            <strong>Value:</strong> {cookieValue || '(not set)'}
+          </p>
+        </div>
+
+        <div className="status-card">
+          <h4>Initial Language</h4>
+          <p>{initialLang}</p>
+        </div>
+
+        <div className="status-card">
+          <h4>Supported Languages</h4>
+          <ul className="status-list">
+            {SUPPORTED_LANGUAGES.map((lang: string) => (
+              <li key={lang}>
+                {lang}: {LANGUAGE_NAMES[lang as keyof typeof LANGUAGE_NAMES]}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="status-card">
+          <h4>{t('status.backend')}</h4>
+          <p>{backendUrl}</p>
+        </div>
+
+        <div className="status-card">
+          <h4>Backend Sync</h4>
+          <button
+            className="sync-button"
+            onClick={handleSync}
+            disabled={isSyncing}
+          >
+            {isSyncing ? 'Syncing...' : t('status.simulate')}
+          </button>
+          {syncResult && (
+            <div className={`sync-result ${syncResult.type}`}>
+              {syncResult.message}
+            </div>
+          )}
+        </div>
+      </div>
+    </Panel>
+  )
+}

package/demo/src/data/countries.ts

@@ -0,0 +1,48 @@
+import type { Country } from '@asafarim/shared-i18n'
+
+/** Benelux + United Kingdom — the scope for this demo. */
+export const countries: Country[] = [
+  {
+    code: 'BE',
+    name: 'Belgium',
+    nativeName: 'België',
+    flag: '🇧🇪',
+    languages: [
+      { code: 'en', label: 'English', nativeLabel: 'English' },
+      { code: 'nl', label: 'Dutch', nativeLabel: 'Nederlands' },
+      { code: 'fr', label: 'French', nativeLabel: 'Français' },
+      { code: 'de', label: 'German', nativeLabel: 'Deutsch' }
+    ]
+  },
+  {
+    code: 'NL',
+    name: 'Netherlands',
+    nativeName: 'Nederland',
+    flag: '��',
+    languages: [
+      { code: 'nl', label: 'Dutch', nativeLabel: 'Nederlands' },
+      { code: 'en', label: 'English', nativeLabel: 'English' }
+    ]
+  },
+  {
+    code: 'LU',
+    name: 'Luxembourg',
+    nativeName: 'Lëtzebuerg',
+    flag: '🇱🇺',
+    languages: [
+      { code: 'lb', label: 'Luxembourgish', nativeLabel: 'Lëtzebuergesch' },
+      { code: 'fr', label: 'French', nativeLabel: 'Français' },
+      { code: 'de', label: 'German', nativeLabel: 'Deutsch' },
+      { code: 'en', label: 'English', nativeLabel: 'English' }
+    ]
+  },
+  {
+    code: 'GB',
+    name: 'United Kingdom',
+    nativeName: 'United Kingdom',
+    flag: '��',
+    languages: [
+      { code: 'en', label: 'English', nativeLabel: 'English' }
+    ]
+  }
+]

package/demo/src/i18n/localeAdapter.ts

@@ -0,0 +1,91 @@
+import type { Locale, Country } from '@asafarim/shared-i18n'
+
+export type ResolveReason = 'same-country' | 'fallback-country' | 'unsupported'
+
+export interface ResolveLocaleResult {
+  locale: Locale
+  reason: ResolveReason
+  /** Human-readable notice when a fallback was applied. */
+  message?: string
+}
+
+/**
+ * Preferred first-choice country code for each language when the current
+ * country does not support the selected language.
+ * If the language isn't listed here, we fall through to the first country
+ * in `countries` that supports it.
+ */
+const PREFERRED_FALLBACK: Record<string, string> = {
+  nl: 'NL',
+  fr: 'BE',
+  de: 'BE',
+  lb: 'LU',
+  en: 'BE',
+}
+
+/**
+ * Resolve a full Locale from a language-only change.
+ *
+ * Rules:
+ * 1. If `currentLocale.country` supports `nextLanguage` → keep country.
+ * 2. Else find the preferred fallback country (see `PREFERRED_FALLBACK`),
+ *    then any other country that supports it.
+ * 3. If no country supports the language → return current locale unchanged.
+ */
+export function resolveLocaleFromLanguage(
+  currentLocale: Locale,
+  nextLanguage: string,
+  countries: Country[],
+): ResolveLocaleResult {
+  const lang = nextLanguage.toLowerCase()
+
+  // 1. Current country already supports the language?
+  const currentCountry = countries.find(
+    c => c.code.toUpperCase() === currentLocale.country.toUpperCase(),
+  )
+  if (currentCountry?.languages.some(l => l.code.toLowerCase() === lang)) {
+    return {
+      locale: { country: currentLocale.country, language: lang },
+      reason: 'same-country',
+    }
+  }
+
+  // 2. Try preferred fallback country.
+  const preferredCode = PREFERRED_FALLBACK[lang]
+  if (preferredCode) {
+    const preferred = countries.find(
+      c => c.code.toUpperCase() === preferredCode.toUpperCase(),
+    )
+    if (preferred?.languages.some(l => l.code.toLowerCase() === lang)) {
+      const fromCountryName = currentCountry?.name ?? currentLocale.country
+      const langLabel = preferred.languages.find(l => l.code.toLowerCase() === lang)?.label ?? lang
+      return {
+        locale: { country: preferred.code, language: lang },
+        reason: 'fallback-country',
+        message: `${langLabel} is not available for ${fromCountryName}, so the locale moved to ${preferred.name}.`,
+      }
+    }
+  }
+
+  // 3. Any country that supports it.
+  for (const country of countries) {
+    if (country.languages.some(l => l.code.toLowerCase() === lang)) {
+      const fromCountryName = currentCountry?.name ?? currentLocale.country
+      const langLabel = country.languages.find(l => l.code.toLowerCase() === lang)?.label ?? lang
+      return {
+        locale: { country: country.code, language: lang },
+        reason: 'fallback-country',
+        message: `${langLabel} is not available for ${fromCountryName}, so the locale moved to ${country.name}.`,
+      }
+    }
+  }
+
+  // 4. Unsupported — no country found.
+  const langLabel = nextLanguage
+  const fromCountryName = currentCountry?.name ?? currentLocale.country
+  return {
+    locale: currentLocale,
+    reason: 'unsupported',
+    message: `${langLabel} is not supported by any country in this demo. Keeping ${fromCountryName}.`,
+  }
+}

package/demo/src/i18n/localeRouting.ts

@@ -0,0 +1,77 @@
+import type { Locale } from '@asafarim/shared-i18n'
+import { countries } from '../data/countries'
+
+export type DemoPage =
+  | 'overview'
+  | 'get-started'
+  | 'language-switchers'
+  | 'country-language-selectors'
+  | 'routing-lab'
+
+export const PAGES: DemoPage[] = [
+  'overview',
+  'get-started',
+  'language-switchers',
+  'country-language-selectors',
+  'routing-lab',
+]
+
+export const DEFAULT_LOCALE: Locale = { country: 'BE', language: 'en' }
+export const DEFAULT_PAGE: DemoPage = 'overview'
+
+/** Vite base path. Mirrors `vite.config.ts` `base`. */
+export const BASE_PATH = '/shared-i18n'
+
+export function isSupportedLocale(locale: Locale): boolean {
+  const country = countries.find(c => c.code.toUpperCase() === locale.country.toUpperCase())
+  if (!country) return false
+  return country.languages.some(l => l.code.toLowerCase() === locale.language.toLowerCase())
+}
+
+export function isSupportedPage(page: string): page is DemoPage {
+  return (PAGES as string[]).includes(page)
+}
+
+export function localeToSlug(locale: Locale): string {
+  return `${locale.country.toLowerCase()}-${locale.language.toLowerCase()}`
+}
+
+export function slugToLocale(slug: string): Locale | null {
+  const match = /^([a-z]{2})-([a-z]{2,3})$/i.exec(slug.trim())
+  if (!match) return null
+  const candidate: Locale = { country: match[1].toUpperCase(), language: match[2].toLowerCase() }
+  return isSupportedLocale(candidate) ? candidate : null
+}
+
+/** Build a path like `/shared-i18n/be-en/overview`. */
+export function buildLocalizedPath(locale: Locale, page: DemoPage): string {
+  return `${BASE_PATH}/${localeToSlug(locale)}/${page}`
+}
+
+export interface ParsedRoute {
+  locale: Locale
+  page: DemoPage
+  /** True if the input did not cleanly map to a known locale + page. */
+  needsRedirect: boolean
+}
+
+/**
+ * Parse a window.location.pathname into a `{ locale, page }` route.
+ * Falls back to `DEFAULT_LOCALE` / `DEFAULT_PAGE` and signals redirect when needed.
+ */
+export function parsePathname(pathname: string): ParsedRoute {
+  let path = pathname
+  if (path.startsWith(BASE_PATH)) path = path.slice(BASE_PATH.length)
+  path = path.replace(/^\/+/, '').replace(/\/+$/, '')
+
+  if (!path) {
+    return { locale: DEFAULT_LOCALE, page: DEFAULT_PAGE, needsRedirect: true }
+  }
+
+  const [slugPart, pagePart] = path.split('/')
+  const parsedLocale = slugToLocale(slugPart)
+  const locale = parsedLocale ?? DEFAULT_LOCALE
+  const page = pagePart && isSupportedPage(pagePart) ? pagePart : DEFAULT_PAGE
+  const needsRedirect = !parsedLocale || !pagePart || !isSupportedPage(pagePart)
+  return { locale, page, needsRedirect }
+}