feat: Implement frontend localization with i18n and measurement units
Implemented comprehensive frontend localization infrastructure supporting 5 languages (English, Spanish, French, Portuguese, Chinese) with measurement unit preferences (Metric/Imperial). This lays the foundation for international user support. **Core Infrastructure:** - Installed i18next, react-i18next, i18next-browser-languagedetector - Created I18nProvider component integrated into app layout - Configured i18next with language detection and localStorage persistence - Created 35 translation files (5 languages × 7 namespaces) **Translation Namespaces:** - common: App-wide UI elements, navigation, actions - tracking: Activity tracking (feeding, sleep, diaper, milestones) - ai: AI assistant chat interface - auth: Authentication flows (login, signup, password reset) - settings: Settings and preferences - onboarding: Onboarding flow - errors: Error messages and validation **Custom Hooks:** - useTranslation: Type-safe translation wrapper - useLocale: Language and measurement system management - useFormatting: Date, time, number, and unit formatting **Measurement Unit Support:** - Created unit conversion utilities (weight, height, temperature, volume) - Metric: kg, cm, °C, ml - Imperial: lb, in, °F, oz - Bidirectional conversion functions **UI Components:** - LanguageSelector: Dropdown to change app language - MeasurementUnitSelector: Toggle between Metric/Imperial - Integrated both into Settings page Preferences section **Next Steps (Remaining):** - Add measurement preferences to backend user schema - Create onboarding flow with language/measurement selection - Apply translations to existing components (dashboard, tracking forms) - Implement multi-language AI responses - Add professional translations (currently using basic translations) **File Highlights:** - lib/i18n/config.ts: i18next configuration - hooks/useFormatting.ts: Formatting utilities with locale support - lib/utils/unitConversion.ts: Unit conversion logic - components/settings/*Selector.tsx: Language and measurement selectors - locales/*/: Translation files for 5 languages 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
125
maternal-web/lib/i18n/config.ts
Normal file
125
maternal-web/lib/i18n/config.ts
Normal file
@@ -0,0 +1,125 @@
|
||||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
|
||||
// Import translation files
|
||||
import enCommon from '@/locales/en/common.json';
|
||||
import enTracking from '@/locales/en/tracking.json';
|
||||
import enAi from '@/locales/en/ai.json';
|
||||
import enAuth from '@/locales/en/auth.json';
|
||||
import enSettings from '@/locales/en/settings.json';
|
||||
import enOnboarding from '@/locales/en/onboarding.json';
|
||||
import enErrors from '@/locales/en/errors.json';
|
||||
|
||||
import esCommon from '@/locales/es/common.json';
|
||||
import esTracking from '@/locales/es/tracking.json';
|
||||
import esAi from '@/locales/es/ai.json';
|
||||
import esAuth from '@/locales/es/auth.json';
|
||||
import esSettings from '@/locales/es/settings.json';
|
||||
import esOnboarding from '@/locales/es/onboarding.json';
|
||||
import esErrors from '@/locales/es/errors.json';
|
||||
|
||||
import frCommon from '@/locales/fr/common.json';
|
||||
import frTracking from '@/locales/fr/tracking.json';
|
||||
import frAi from '@/locales/fr/ai.json';
|
||||
import frAuth from '@/locales/fr/auth.json';
|
||||
import frSettings from '@/locales/fr/settings.json';
|
||||
import frOnboarding from '@/locales/fr/onboarding.json';
|
||||
import frErrors from '@/locales/fr/errors.json';
|
||||
|
||||
import ptCommon from '@/locales/pt/common.json';
|
||||
import ptTracking from '@/locales/pt/tracking.json';
|
||||
import ptAi from '@/locales/pt/ai.json';
|
||||
import ptAuth from '@/locales/pt/auth.json';
|
||||
import ptSettings from '@/locales/pt/settings.json';
|
||||
import ptOnboarding from '@/locales/pt/onboarding.json';
|
||||
import ptErrors from '@/locales/pt/errors.json';
|
||||
|
||||
import zhCommon from '@/locales/zh/common.json';
|
||||
import zhTracking from '@/locales/zh/tracking.json';
|
||||
import zhAi from '@/locales/zh/ai.json';
|
||||
import zhAuth from '@/locales/zh/auth.json';
|
||||
import zhSettings from '@/locales/zh/settings.json';
|
||||
import zhOnboarding from '@/locales/zh/onboarding.json';
|
||||
import zhErrors from '@/locales/zh/errors.json';
|
||||
|
||||
export const resources = {
|
||||
en: {
|
||||
common: enCommon,
|
||||
tracking: enTracking,
|
||||
ai: enAi,
|
||||
auth: enAuth,
|
||||
settings: enSettings,
|
||||
onboarding: enOnboarding,
|
||||
errors: enErrors,
|
||||
},
|
||||
es: {
|
||||
common: esCommon,
|
||||
tracking: esTracking,
|
||||
ai: esAi,
|
||||
auth: esAuth,
|
||||
settings: esSettings,
|
||||
onboarding: esOnboarding,
|
||||
errors: esErrors,
|
||||
},
|
||||
fr: {
|
||||
common: frCommon,
|
||||
tracking: frTracking,
|
||||
ai: frAi,
|
||||
auth: frAuth,
|
||||
settings: frSettings,
|
||||
onboarding: frOnboarding,
|
||||
errors: frErrors,
|
||||
},
|
||||
pt: {
|
||||
common: ptCommon,
|
||||
tracking: ptTracking,
|
||||
ai: ptAi,
|
||||
auth: ptAuth,
|
||||
settings: ptSettings,
|
||||
onboarding: ptOnboarding,
|
||||
errors: ptErrors,
|
||||
},
|
||||
zh: {
|
||||
common: zhCommon,
|
||||
tracking: zhTracking,
|
||||
ai: zhAi,
|
||||
auth: zhAuth,
|
||||
settings: zhSettings,
|
||||
onboarding: zhOnboarding,
|
||||
errors: zhErrors,
|
||||
},
|
||||
} as const;
|
||||
|
||||
export const defaultNS = 'common';
|
||||
|
||||
export const supportedLanguages = [
|
||||
{ code: 'en', name: 'English', nativeName: 'English' },
|
||||
{ code: 'es', name: 'Spanish', nativeName: 'Español' },
|
||||
{ code: 'fr', name: 'French', nativeName: 'Français' },
|
||||
{ code: 'pt', name: 'Portuguese', nativeName: 'Português' },
|
||||
{ code: 'zh', name: 'Chinese', nativeName: '中文' },
|
||||
] as const;
|
||||
|
||||
i18n
|
||||
.use(LanguageDetector)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources,
|
||||
defaultNS,
|
||||
fallbackLng: 'en',
|
||||
supportedLngs: ['en', 'es', 'fr', 'pt', 'zh'],
|
||||
interpolation: {
|
||||
escapeValue: false, // React already escapes values
|
||||
},
|
||||
detection: {
|
||||
order: ['localStorage', 'navigator'],
|
||||
caches: ['localStorage'],
|
||||
lookupLocalStorage: 'i18nextLng',
|
||||
},
|
||||
react: {
|
||||
useSuspense: false, // Disable suspense for SSR compatibility
|
||||
},
|
||||
});
|
||||
|
||||
export default i18n;
|
||||
Reference in New Issue
Block a user