andrei/maternal-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Andrei
2025-10-03 10:52:38 +00:00
parent cd1ed96714
commit c1e37d30b0
49 changed files with 5167 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
maternal-web/app/layout.tsx
View File

@@ -10,6 +10,7 @@ import { VoiceFloatingButton } from '@/components/voice/VoiceFloatingButton';
import { FocusManagementProvider } from '@/components/providers/FocusManagementProvider';
import { BackgroundSyncProvider } from '@/components/providers/BackgroundSyncProvider';
import { InstallPrompt } from '@/components/pwa/InstallPrompt';
import { I18nProvider } from '@/components/providers/I18nProvider';
// import { PerformanceMonitor } from '@/components/common/PerformanceMonitor'; // Temporarily disabled
import './globals.css';
@@ -47,25 +48,27 @@ export default function RootLayout({
</head>
<body className={inter.className}>
<AxeProvider>
<ErrorBoundary>
<ReduxProvider>
<ApolloProvider>
<BackgroundSyncProvider>
<ThemeRegistry>
<FocusManagementProvider>
<SkipNavigation />
{/* <PerformanceMonitor /> */}
<main id="main-content" tabIndex={-1}>
{children}
</main>
<VoiceFloatingButton />
<InstallPrompt />
</FocusManagementProvider>
</ThemeRegistry>
</BackgroundSyncProvider>
</ApolloProvider>
</ReduxProvider>
</ErrorBoundary>
<I18nProvider>
<ErrorBoundary>
<ReduxProvider>
<ApolloProvider>
<BackgroundSyncProvider>
<ThemeRegistry>
<FocusManagementProvider>
<SkipNavigation />
{/* <PerformanceMonitor /> */}
<main id="main-content" tabIndex={-1}>
{children}
</main>
<VoiceFloatingButton />
<InstallPrompt />
</FocusManagementProvider>
</ThemeRegistry>
</BackgroundSyncProvider>
</ApolloProvider>
</ReduxProvider>
</ErrorBoundary>
</I18nProvider>
</AxeProvider>
</body>
</html>