Skip to content

Commit 7cf1e09

Browse files
Kanishkagarg16Kanishkagarg16
committed
resolve conflict
2 parents 208b81a + 67ddf36 commit 7cf1e09

30 files changed

Lines changed: 1413 additions & 240 deletions

‎.github/ISSUE_TEMPLATE/I18N_ISSUE.md‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
# Add Internationalization (i18n) Support
2+
3+
## Description
4+
5+
The component library currently only supports English, limiting its accessibility to a global audience. This issue aims to implement comprehensive internationalization support to enable multi-language capabilities.
6+
7+
## Problem Statement
8+
9+
1. **Limited Global Reach**: The library only supports English, excluding non-English speaking developers and users
10+
2. **Accessibility Barrier**: Non-English speakers may struggle to understand and use the components
11+
3. **Market Expansion**: Lack of multi-language support limits adoption in international markets
12+
4. **Inclusivity**: Not supporting multiple languages goes against inclusive design principles
13+
14+
## Proposed Solution
15+
16+
Implement a comprehensive internationalization system with the following features:
17+
18+
### Core Requirements
19+
20+
1. **Multi-language Support**
21+
- English (en) - Default language
22+
- Spanish (es)
23+
- French (fr)
24+
- Extensible architecture for additional languages
25+
26+
2. **Language Detection and Persistence**
27+
- Automatic language detection based on browser settings
28+
- Persistent language selection using localStorage
29+
- Fallback to default language when translations are missing
30+
31+
3. **Translation System**
32+
- Context-based translation management
33+
- Custom React hook for easy translation usage
34+
- Utility functions for common translation patterns
35+
- JSON-based translation files for easy maintenance
36+
37+
4. **User Interface Components**
38+
- Language switcher dropdown component
39+
- Visual indicators for current language
40+
- Responsive design for all device sizes
41+
42+
5. **Component Integration**
43+
- Translate all user-facing text in existing components
44+
- Maintain backward compatibility
45+
- Follow React and Next.js best practices
46+
47+
### Implementation Plan
48+
49+
#### Phase 1: Foundation
50+
- Set up i18n configuration and dependencies
51+
- Create translation context and provider
52+
- Implement language detection and persistence
53+
- Create translation hook and utility functions
54+
55+
#### Phase 2: Translation Files
56+
- Create JSON translation files for English
57+
- Create JSON translation files for Spanish
58+
- Create JSON translation files for French
59+
- Organize translations in a maintainable structure
60+
61+
#### Phase 3: UI Components
62+
- Create language switcher component
63+
- Integrate language switcher into navigation
64+
- Ensure responsive and accessible design
65+
66+
#### Phase 4: Component Integration
67+
- Update existing components to use translations
68+
- Test all translated content
69+
- Verify backward compatibility
70+
71+
#### Phase 5: Documentation
72+
- Create comprehensive i18n documentation
73+
- Provide usage examples and best practices
74+
- Document how to add new languages
75+
76+
## Acceptance Criteria
77+
78+
- [ ] Support for English, Spanish, and French out of the box
79+
- [ ] Automatic language detection based on browser settings
80+
- [ ] Persistent language selection across sessions
81+
- [ ] Language switcher component in the navigation bar
82+
- [ ] All existing components display translated content
83+
- [ ] Backward compatibility maintained
84+
- [ ] Comprehensive documentation provided
85+
- [ ] Easy extensibility for additional languages
86+
- [ ] Proper error handling for missing translations
87+
- [ ] Accessible implementation following WCAG guidelines
88+
89+
## Benefits
90+
91+
1. **Global Accessibility**: Enables non-English speakers to use the library
92+
2. **Market Expansion**: Increases adoption in international markets
93+
3. **Inclusivity**: Supports diverse user base with multiple languages
94+
4. **Developer Experience**: Provides easy-to-use translation system
95+
5. **Maintainability**: Organized translation files for easy updates
96+
6. **Extensibility**: Architecture supports additional languages
97+
98+
## Technical Requirements
99+
100+
### Dependencies to Install
101+
- `next-i18next`
102+
- `react-i18next`
103+
- `i18next`
104+
- `i18next-http-backend`
105+
- `i18next-browser-languagedetector`
106+
107+
### File Structure
108+
```
109+
public/
110+
└── locales/
111+
├── en/
112+
│ └── common.json
113+
├── es/
114+
│ └── common.json
115+
└── fr/
116+
└── common.json
117+
118+
src/
119+
├── app/
120+
│ ├── context/
121+
│ │ └── I18nContext.jsx
122+
│ ├── hooks/
123+
│ │ └── useTranslation.js
124+
│ ├── utils/
125+
│ │ └── translations.js
126+
│ └── components/
127+
│ └── LanguageSwitcher.jsx
128+
├── i18n.js
129+
└── next-i18next.config.js
130+
```
131+
132+
### Integration Points
133+
1. **Layout**: Wrap application with I18nProvider
134+
2. **Navigation**: Add language switcher to Navbar
135+
3. **Components**: Update existing components to use translations
136+
4. **Pages**: Translate all user-facing content
137+
138+
## Additional Notes
139+
140+
- Follow existing code style and patterns
141+
- Ensure all translations are accurate and culturally appropriate
142+
- Test thoroughly across different languages and devices
143+
- Provide clear documentation for adding new languages
144+
- Consider performance implications of loading translation files
145+
- Maintain accessibility standards in all UI components

‎I18N_DOCUMENTATION.md‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
# Internationalization (i18n) Implementation
2+
3+
This document provides comprehensive documentation for the internationalization implementation in the component library.
4+
5+
## Overview
6+
7+
The component library now supports multiple languages through a comprehensive internationalization system. The implementation includes:
8+
9+
- Multi-language support for English, Spanish, and French
10+
- Language switcher component
11+
- Context-based translation management
12+
- Automatic language detection
13+
- Persistent language selection
14+
15+
## Supported Languages
16+
17+
- English (en) - Default language
18+
- Spanish (es)
19+
- French (fr)
20+
21+
## Implementation Details
22+
23+
### 1. Translation Files Structure
24+
25+
Translation files are organized in the `public/locales` directory:
26+
27+
```
28+
public/
29+
└── locales/
30+
├── en/
31+
│ └── common.json
32+
├── es/
33+
│ └── common.json
34+
└── fr/
35+
└── common.json
36+
```
37+
38+
Each language has a `common.json` file containing all translations for that language.
39+
40+
### 2. Translation Context
41+
42+
The `I18nContext` provides translation capabilities throughout the application:
43+
44+
```jsx
45+
import { useI18n } from '../context/I18nContext';
46+
47+
const { locale, locales, changeLanguage, t } = useI18n();
48+
```
49+
50+
### 3. Translation Hook
51+
52+
The `useTranslation` hook simplifies translation usage in components:
53+
54+
```jsx
55+
import { useTranslation } from '../hooks/useTranslation';
56+
57+
const { t, locale } = useTranslation();
58+
const translatedText = t('navigation.home');
59+
```
60+
61+
### 4. Language Switcher Component
62+
63+
The `LanguageSwitcher` component provides a UI for changing languages:
64+
65+
```jsx
66+
import LanguageSwitcher from '../components/LanguageSwitcher';
67+
68+
<LanguageSwitcher />
69+
```
70+
71+
## Adding New Languages
72+
73+
To add a new language:
74+
75+
1. Create a new directory in `public/locales` with the language code (e.g., `de` for German)
76+
2. Create a `common.json` file in the new directory with translations
77+
3. Add the language code to the `locales` array in `next-i18next.config.js`
78+
4. Add the language name to the `languageNames` object in `LanguageSwitcher.jsx`
79+
80+
Example for German:
81+
82+
```json
83+
// public/locales/de/common.json
84+
{
85+
"navigation": {
86+
"home": "Startseite",
87+
"about": "Über uns",
88+
"contact": "Kontakt"
89+
}
90+
}
91+
```
92+
93+
## Using Translations in Components
94+
95+
### Basic Usage
96+
97+
```jsx
98+
import { useTranslation } from '../hooks/useTranslation';
99+
100+
export default function MyComponent() {
101+
const { t } = useTranslation();
102+
103+
return (
104+
<h1>{t('homepage.hero_title')}</h1>
105+
);
106+
}
107+
```
108+
109+
### With Parameters
110+
111+
```jsx
112+
// In translation file:
113+
// "welcome_message": "Welcome, {{name}}!"
114+
115+
const message = t('welcome_message', { name: 'John' });
116+
```
117+
118+
### Nested Translations
119+
120+
```json
121+
{
122+
"homepage": {
123+
"hero": {
124+
"title": "Build beautiful apps",
125+
"description": "Create stunning applications"
126+
}
127+
}
128+
}
129+
```
130+
131+
```jsx
132+
const title = t('homepage.hero.title');
133+
const description = t('homepage.hero.description');
134+
```
135+
136+
## Translation Utilities
137+
138+
The `src/app/utils/translations.js` file provides utility functions for common translation patterns:
139+
140+
- `getTranslatedNavLinks(t)` - Returns translated navigation links
141+
- `getTranslatedFeatures(t)` - Returns translated feature items
142+
- `getTranslatedUsageSteps(t)` - Returns translated usage steps
143+
- `getTranslatedPricingFeatures(t)` - Returns translated pricing features
144+
145+
## Automatic Language Detection
146+
147+
The system automatically detects the user's preferred language based on:
148+
149+
1. Saved preference in localStorage
150+
2. Browser language settings
151+
3. Default language (English) as fallback
152+
153+
## Persistent Language Selection
154+
155+
Language preferences are saved to localStorage and persist across sessions.
156+
157+
## Testing Translations
158+
159+
To test translations:
160+
161+
1. Use the language switcher in the navigation bar
162+
2. Verify all text elements update correctly
163+
3. Check that the selected language persists after page refresh
164+
4. Ensure all components display translated content
165+
166+
## Best Practices
167+
168+
1. **Use descriptive translation keys**: Use clear, hierarchical keys like `homepage.hero.title`
169+
2. **Keep translations consistent**: Maintain consistent terminology across languages
170+
3. **Test all supported languages**: Verify translations work correctly in all supported languages
171+
4. **Handle pluralization**: Use appropriate plural forms for different languages
172+
5. **Consider text length**: Account for varying text lengths in different languages
173+
174+
## Future Improvements
175+
176+
1. **Dynamic imports**: Load translation files on demand
177+
2. **Translation management tool**: Integrate with a translation management platform
178+
3. **Additional languages**: Support more languages based on user demand
179+
4. **RTL support**: Add right-to-left language support
180+
5. **Translation fallbacks**: Implement better fallback mechanisms
181+
182+
## Troubleshooting
183+
184+
### Missing Translations
185+
186+
If text appears as translation keys:
187+
1. Verify the key exists in all translation files
188+
2. Check for typos in the translation keys
189+
3. Ensure the translation files are properly formatted
190+
191+
### Language Switching Issues
192+
193+
If language switching doesn't work:
194+
1. Check browser console for errors
195+
2. Verify the language code is supported
196+
3. Ensure localStorage is accessible
197+
198+
## Contributing Translations
199+
200+
To contribute translations:
201+
202+
1. Fork the repository
203+
2. Add or update translation files in `public/locales`
204+
3. Test the translations in the application
205+
4. Submit a pull request with your changes
206+
207+
Please ensure translations are accurate and culturally appropriate for the target audience.

0 commit comments

Comments
 (0)