Problem Statement
VeriNode has a global user base requiring support for multiple languages, including right-to-left scripts. Implement an i18n framework with runtime locale switching, on-demand locale JSON loading, CLDR pluralization, RTL layout support, and localized number/date/currency formatting.
Technical Bounds
- Locales: en-US, zh-CN, ja-JP, ko-KR, ru-RU, ar-SA (RTL), es-ES, fr-FR, de-DE.
- Translation keys: ~400 keys across all UI components.
- Bundle size: each locale file <= 8 KB gzipped; loaded on-demand via dynamic import.
- Pluralization:
Intl.PluralRules for CLDR-compliant plural forms.
- RTL: CSS logical properties for layout;
dir="rtl" on <html> for RTL locales.
- Number/date:
Intl.NumberFormat and Intl.DateTimeFormat with locale-appropriate settings.
- Fallback:
locale -> en-US -> console.warn in development.
Steps
- Create locale JSON files in
src/i18n/locales/{locale}.json with nested key structure.
- Implement
I18nProvider context with useTranslation() hook returning t(key, params?).
- Implement dynamic import:
t() triggers import(./locales/${locale}.json) on first access.
- Build
LocaleSwitcher component: dropdown with flag icons; persist preference in localStorage.
- Implement
IntlNumber and IntlDate components using native Intl APIs.
- Add RTL support: set
dir attribute, audit all components for logical property usage.
Problem Statement
VeriNode has a global user base requiring support for multiple languages, including right-to-left scripts. Implement an i18n framework with runtime locale switching, on-demand locale JSON loading, CLDR pluralization, RTL layout support, and localized number/date/currency formatting.
Technical Bounds
Intl.PluralRulesfor CLDR-compliant plural forms.dir="rtl"on<html>for RTL locales.Intl.NumberFormatandIntl.DateTimeFormatwith locale-appropriate settings.locale -> en-US -> console.warnin development.Steps
src/i18n/locales/{locale}.jsonwith nested key structure.I18nProvidercontext withuseTranslation()hook returningt(key, params?).t()triggersimport(./locales/${locale}.json)on first access.LocaleSwitchercomponent: dropdown with flag icons; persist preference in localStorage.IntlNumberandIntlDatecomponents using native Intl APIs.dirattribute, audit all components for logical property usage.