6d6185dc5e
- Add multi-language support with i18next and react-i18next - Implement user-selectable date format preferences (5 formats) - Add time format preferences (12-hour/24-hour) - Implement RTL (right-to-left) support for Arabic, Hebrew, Persian, Urdu - Add first day of week preference - Create LocalizationContext for managing i18n settings - Add LocalizationSettings component to Settings page - Include sample translations: English, Spanish, Arabic - Configure 10 languages: en, es, fr, de, ar, he, zh, ja, pt, ru - Add translation management documentation and Crowdin config - Create date formatting utilities that respect user preferences - Add RTL CSS styles for proper layout mirroring - Update Settings and ThemeToggle components to use translations - Add comprehensive documentation (implementation guide, quick reference, translation guide) All user preferences are persisted to localStorage and apply throughout the app.
118 lines
2.3 KiB
Markdown
118 lines
2.3 KiB
Markdown
# Internationalization (i18n) Setup
|
|
|
|
This directory contains the internationalization configuration for Donetick.
|
|
|
|
## Structure
|
|
|
|
```
|
|
src/i18n/
|
|
├── config.js # i18next configuration
|
|
└── README.md # This file
|
|
|
|
public/locales/
|
|
├── en/ # English (default)
|
|
│ ├── common.json
|
|
│ ├── settings.json
|
|
│ └── chores.json
|
|
├── es/ # Spanish
|
|
├── ar/ # Arabic (RTL)
|
|
└── ...
|
|
```
|
|
|
|
## Usage in Components
|
|
|
|
### Using translations
|
|
|
|
```jsx
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
function MyComponent() {
|
|
const { t } = useTranslation('settings') // or 'common', 'chores'
|
|
|
|
return <h1>{t('title')}</h1>
|
|
}
|
|
```
|
|
|
|
### Using date formatting
|
|
|
|
```jsx
|
|
import { useLocalization } from '@/contexts/LocalizationContext'
|
|
|
|
function MyComponent() {
|
|
const { formatDate, formatDateTime, formatRelative } = useLocalization()
|
|
|
|
const date = new Date()
|
|
|
|
return (
|
|
<div>
|
|
<p>Date: {formatDate(date)}</p>
|
|
<p>DateTime: {formatDateTime(date)}</p>
|
|
<p>Relative: {formatRelative(date)}</p>
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
### Using language/format settings
|
|
|
|
```jsx
|
|
import { useLocalization } from '@/contexts/LocalizationContext'
|
|
|
|
function MyComponent() {
|
|
const {
|
|
language,
|
|
setLanguage,
|
|
dateFormat,
|
|
setDateFormat,
|
|
isRTL
|
|
} = useLocalization()
|
|
|
|
return (
|
|
<div dir={isRTL ? 'rtl' : 'ltr'}>
|
|
Current language: {language}
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Available Namespaces
|
|
|
|
- **common**: General UI elements (buttons, messages, etc.)
|
|
- **settings**: Settings page translations
|
|
- **chores**: Chores-related translations
|
|
|
|
## Adding New Translations
|
|
|
|
1. Add the text to the appropriate JSON file in `public/locales/en/`
|
|
2. Use the translation in your component with `t('key')`
|
|
3. Upload to translation platform for community translation
|
|
|
|
## RTL Support
|
|
|
|
Languages in the `RTL_LANGUAGES` array automatically get:
|
|
- `dir="rtl"` on the document
|
|
- RTL-specific CSS styles
|
|
- Proper text alignment
|
|
|
|
Currently supported RTL languages: Arabic (ar), Hebrew (he), Persian (fa), Urdu (ur)
|
|
|
|
## Date Format Preferences
|
|
|
|
Users can choose from:
|
|
- MM/DD/YYYY (US)
|
|
- DD/MM/YYYY (Europe)
|
|
- YYYY-MM-DD (ISO)
|
|
- Long format (January 1, 2024)
|
|
- Short format (Jan 1, 2024)
|
|
|
|
## Time Format Preferences
|
|
|
|
- 12-hour (with AM/PM)
|
|
- 24-hour
|
|
|
|
## First Day of Week
|
|
|
|
Users can choose:
|
|
- Sunday
|
|
- Monday
|