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:
46
maternal-web/hooks/useLocale.ts
Normal file
46
maternal-web/hooks/useLocale.ts
Normal 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,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user