Files

Mo Tarbin 6d6185dc5e feat: Add comprehensive internationalization (i18n) support

- 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.

2026-03-08 15:57:57 +00:00

2.3 KiB

Raw Blame History

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

import { useTranslation } from 'react-i18next'

function MyComponent() {
  const { t } = useTranslation('settings') // or 'common', 'chores'
  
  return <h1>{t('title')}</h1>
}

Using date formatting

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

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

Add the text to the appropriate JSON file in public/locales/en/
Use the translation in your component with t('key')
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

2.3 KiB Raw Blame History