07 — Component Library (i18n Module)
- 1. PerLocaleFieldGroup (module-specific)
- 2. CoverageRing
- 3. ParamsChips
- 4. LocaleStatusChip
- 5. DriftTableRow
- 6. LocaleFieldRail (tablet/desktop)
- 7. Reuse map
- 8. Typography/locale notes
Components specific to the i18n surface; shared components come from 00-shared/03_Component_Library.md (AppTextField, AppCard, AppListTile, AppChips, AppBadge, AppSnackbar, AppDialog, AppDataTable, AppSkeleton, AppEmptyState, AppOfflineBanner, AppSearchBar, AppFAB). Design tokens per 00-shared/02; module behavior per 06_Screen_Specifications.md.
1. PerLocaleFieldGroup (module-specific)
| Field | Detail |
|---|---|
| Purpose | One locale's value editor inside the Key Editor |
| Props | locale, label (native name), status (shipped/declared/missing), value, params (expected set), onChanged, saving |
| Children | AppTextField (multiline ≥3 rows, auto-grow, TextCapitalization.none) + status chip + placeholder checker line |
| Placeholder checker | inline text: "params match source" (success) / "missing {days}" (amber) / "unexpected {x}" (error) — regex \{(\w+)\} (i18n.service.ts:42-44) |
| States | idle / dirty (dot) / saving (spinner) / saved (check) / missing (amber outline) / error (red outline + message) |
| a11y | single Semantics node "value in {locale}"; status via live region |
| Directionality | directionality: TextDirection.ltr for all current locales (all LTR). RTL locale (forward-looking) → per-field TextDirection.rtl driven by locale tag, never hardcoded |
2. CoverageRing
| Field | Detail |
|---|---|
| Purpose | Locale coverage in Locale Management + key-list badge |
| Props | present, total, size (36 default) |
| Behavior | progress arc; amber when < 100 %, green at 100 %; text n/n center |
| a11y | semantic label "coverage 8 of 9 in hi" — never color-only |
3. ParamsChips
| Field | Detail |
|---|---|
| Purpose | Display/enter {param} tokens |
| Props | params (string[]), editable |
| Behavior | chip text without braces (e.g. days); editing appends {...} tokens; invalid chars blocked (regex \w+) |
| Used in | Key Editor header, New Key form, Key List rows |
4. LocaleStatusChip
| Field | Detail |
|---|---|
| Purpose | shipped vs declared vs missing state |
| Variants | shipped (filled), declared (outline), missing (amber), stale (danger outline) |
| a11y | text label always present |
5. DriftTableRow
| Field | Detail |
|---|---|
| Purpose | Sync view row: locale × missing keys with jump-to-editor |
| Behavior | expandable; "Fix" button deep-links Key Editor?filter=missing:<locale> |
6. LocaleFieldRail (tablet/desktop)
| Field | Detail |
|---|---|
| Purpose | Vertical locale tab rail in Key Editor (desktop) |
| Behavior | per-locale status dot on rail; scroll-lock to active field |
7. Reuse map
| Screen | Shared components | Module-specific |
|---|---|---|
| Key List | AppSearchBar, AppChips, AppBadge, AppDataTable, AppSkeleton, AppEmptyState, AppFAB | CoverageRing (badge), ParamsChips, LocaleStatusChip |
| Key Editor | AppTextField, AppButton, AppSnackbar, AppDialog, AppMenu | PerLocaleFieldGroup, ParamsChips, LocaleFieldRail |
| New Key | AppTextField, AppButton, AppChips, AppBottomSheet | ParamsChips |
| Locale Management | AppCard, AppButton, AppBottomSheet | CoverageRing, LocaleStatusChip |
| Sync | AppDataTable, AppButton, AppCard | DriftTableRow |
8. Typography/locale notes
- Devanagari, Tamil, Telugu, Kannada, Malayalam, Gujarati, Marathi, Bengali
scripts render with system fonts; avoid forced
fontFamilyfor these (Indic glyph fallback required). KeepfontFamilynull for translation text. - Text scale: translation fields respect
textScaleFactorup to 2.0 (00-shared/09). - Placeholders never auto-correct; autocorrect off.