Skip to content

feat: Add i18n localization foundation (#461)#513

Open
Awointa wants to merge 2 commits into
Predictify-org:mainfrom
Awointa:main
Open

feat: Add i18n localization foundation (#461)#513
Awointa wants to merge 2 commits into
Predictify-org:mainfrom
Awointa:main

Conversation

@Awointa

@Awointa Awointa commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Closes #461

Summary
  
  Implements the translation message-catalog layer on top of the existing
  language-preference infrastructure (SUPPORTED_LANGUAGES, getStoredLanguage,
  saveLanguage). No external library is introduced — the solution uses pure
  TypeScript utilities that match the project's existing patterns and adds zero
  new dependencies.
  
  What changed
  
  New files
  
  - app/i18n/types.ts — Messages, MessageKey, and InterpolationValues type
  definitions
  - app/i18n/messages/en.ts — English base catalog with 160+ keys across 10
  namespaces: nav, auth, dashboard, events, predictions, wallet, settings,
  disputes, finances, profile, error, feedback, a11y
  - app/i18n/messages/index.ts — synchronous catalog loader; getMessages(locale)
   with English fallback, AVAILABLE_LOCALES
  - app/i18n/t.ts — translation utilities:
    - interpolate() — {variable} placeholder substitution
    - createTranslator(messages) — builds a bound t() function from a catalog
    - getTranslator(locale?) — server-safe helper (reads stored locale, falls
  back to en)
    - useTranslation() — React hook returning a reactive t() that re-renders on
  language change
  
  - app/i18n/LangAttribute.tsx — invisible client component that keeps <html
  lang> in sync with the active locale on hydration and every subsequent change
  - app/i18n/__tests__/t.test.ts — 31 tests covering all utilities and catalog
  integrity
  
  Modified files
  
  - app/i18n/index.ts — extended with re-exports for all new types and
  utilities; no breaking changes to the existing
  Language/SUPPORTED_LANGUAGES/saveLanguage surface
  - components/providers.tsx — mounts <LangAttribute /> once at the app root to
  integrate i18n with the Next.js App Router
  - app/settings/language/page.tsx — uses useTranslation() for all user-visible
  strings as a live integration demonstration
  
  How to use
  
  // In any client component
  import { useTranslation } from "@/app/i18n";
  
  function MyComponent() {
    const { t } = useTranslation();
    return <h1>{t("nav.dashboard")}</h1>;
  }
  
  // With interpolation
  t("dashboard.welcome", { name: "Alice" }) // → "Welcome back, Alice!"
  
  // Outside React (API routes, metadata)
  import { getTranslator } from "@/app/i18n";
  const t = getTranslator("en");
  t("error.generic") // → "Something went wrong. Please try again."
  
  Adding a new locale
  
  1. Create app/i18n/messages/<code>.ts exporting a Messages object with all
  keys from en.ts
  2. Import it in app/i18n/messages/index.ts and add it to CATALOGS
  3. It will appear automatically in AVAILABLE_LOCALES and be served by
  getMessages()
  
  Tests
  
  New suite  (app/i18n/__tests__/t.test.ts):  31 passed, 0 failed
  Full suite:  539 passed (vs 508 before), 19 failed (all pre-existing,
  unrelated to this PR)
  
  Checklist
  
  - [x] Implementation matches the description
  - [x] Tests added and passing (31 new)
  - [x] No breaking changes to existing i18n surface
  - [x] WCAG 2.1 AA — <html lang> kept current via LangAttribute; a11y.* keys
  added to catalog
  - [x] Dark-mode / design-token consistency maintained
  - [x] Inline comments and JSDoc on all public exports
  - [x] Docs updated (app/i18n/messages/index.ts includes instructions for
  adding locales)

Awointa added 2 commits July 23, 2026 20:26
Set up the translation message-catalog layer on top of the existing
language-preference infrastructure.

New files
─────────
app/i18n/types.ts
  Messages, MessageKey, InterpolationValues type definitions.

app/i18n/messages/en.ts
  English base catalog (160+ keys across nav, auth, dashboard, events,
  predictions, wallet, settings, disputes, finances, profile, errors,
  feedback, and a11y namespaces).

app/i18n/messages/index.ts
  Synchronous catalog loader with English fallback; exposes
  getMessages(), AVAILABLE_LOCALES, and defaultMessages.

app/i18n/t.ts
  interpolate()   – {variable} placeholder substitution
  createTranslator() – builds a t() function from a catalog
  getTranslator()    – server-safe helper (reads stored locale)
  useTranslation()   – React hook; reactive t() for client components

app/i18n/LangAttribute.tsx
  Invisible client component; keeps <html lang> in sync with the
  user's active locale on hydration and change.

app/i18n/__tests__/t.test.ts
  31 tests covering interpolate, createTranslator, getTranslator,
  getMessages, defaultMessages catalog integrity, and AVAILABLE_LOCALES.

Modified files
──────────────
app/i18n/index.ts
  Extended with re-exports for all new types and utilities.
  Existing Language/SUPPORTED_LANGUAGES/getStoredLanguage/saveLanguage
  surface is unchanged – no breaking changes.

components/providers.tsx
  Mounts <LangAttribute /> to keep document lang current.

app/settings/language/page.tsx
  Demonstration integration: uses useTranslation() for all user-visible
  strings (page heading, description, active label, helper note,
  fieldset aria-label).

Test results
────────────
New:       31 passed, 0 failed  (app/i18n/__tests__/t.test.ts)
Existing: 539 passed (vs 508 before), 19 failed (vs 20 before)
Lint:      ESLint binary not present in this environment (pre-existing)

Closes Predictify-org#461
@vercel

vercel Bot commented Jul 23, 2026

Copy link
Copy Markdown

@Awointa is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Jul 23, 2026

Copy link
Copy Markdown

@Awointa Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add localization foundation (i18n)

1 participant