feat: Implement frontend localization with i18n and measurement units
Some checks failed
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled

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:
2025-10-03 10:52:38 +00:00
parent cd1ed96714
commit c1e37d30b0
49 changed files with 5167 additions and 20 deletions

View File

@@ -0,0 +1,46 @@
import { useCallback } from 'react';
import { useTranslation } from './useTranslation';
import { supportedLanguages } from '@/lib/i18n/config';
export type MeasurementSystem = 'metric' | 'imperial';
/**
* Custom hook for managing locale and measurement preferences
*/
export function useLocale() {
const { i18n, language, changeLanguage } = useTranslation();
const setLanguage = useCallback(
async (lang: string) => {
await changeLanguage(lang);
localStorage.setItem('preferred-language', lang);
},
[changeLanguage]
);
const getCurrentLanguage = useCallback(() => {
return supportedLanguages.find((lang) => lang.code === language) || supportedLanguages[0];
}, [language]);
const getMeasurementSystem = useCallback((): MeasurementSystem => {
const stored = localStorage.getItem('measurement-system');
return (stored as MeasurementSystem) || 'metric';
}, []);
const setMeasurementSystem = useCallback((system: MeasurementSystem) => {
localStorage.setItem('measurement-system', system);
// Trigger a custom event so other components can react to the change
window.dispatchEvent(
new CustomEvent('measurement-system-changed', { detail: system })
);
}, []);
return {
language,
setLanguage,
currentLanguage: getCurrentLanguage(),
supportedLanguages,
measurementSystem: getMeasurementSystem(),
setMeasurementSystem,
};
}