i18n
Overview
Shared internationalization constants, utilities, and components.
@workspace/i18n is the shared package for internationalization across the monorepo. It provides language constants, validation utilities, browser-based language detection, ready-to-use React components, and build helpers for serving translation files — all framework-agnostic (no i18next dependency).
The translation messages themselves live in @workspace/i18n-messages.
Quick Start
import {
detectPreferredLanguage,
getLanguageSelectorOptions,
Lang,
parseLanguage,
} from '@workspace/i18n';
import { LanguageSelect } from '@workspace/i18n/components/language-select';
// Define your app's supported languages
const SUPPORTED = ['fr', 'en'] as const;
// Parse user input safely
const lang = parseLanguage(userInput, Lang.FR, SUPPORTED);
// Detect browser preference
const preferred = detectPreferredLanguage(SUPPORTED, Lang.FR);
// Build options for a language dropdown
const options = getLanguageSelectorOptions(SUPPORTED);Sub-path Exports
The package exposes granular sub-path exports:
| Import Path | Description |
|---|---|
@workspace/i18n | Constants, types, validation, detection and world-language helpers (no components) |
@workspace/i18n/constants | Language codes, names, OG locales, storage key, toPlayerLang |
@workspace/i18n/types | TypeScript types for language selectors and banners |
@workspace/i18n/validation | Language parsing, validation, selector options, display names |
@workspace/i18n/detection | Browser language detection and localStorage persistence |
@workspace/i18n/load-path | Content-hashed loadPath for i18next-http-backend (browser-safe) |
@workspace/i18n/vite | Build-time helpers: copy targets and locale hashes (Node only) |
@workspace/i18n/components/* | One entry per component: language-select, language-drawer, language-banner, localized |
@workspace/i18n/styles.css | Tailwind @source directive for the component classes |
Components are only reachable through their own sub-path; the root entry does not re-export them:
import { LanguageSelect } from '@workspace/i18n/components/language-select';
import { LanguageDrawer } from '@workspace/i18n/components/language-drawer';
import { LanguageBanner } from '@workspace/i18n/components/language-banner';
import { Localized, useLocalized } from '@workspace/i18n/components/localized';Supported Languages
The package defines 11 languages used across the monorepo. Individual apps may use subsets.
| Code | Language |
|---|---|
ca | Català |
de | Deutsch |
en | English |
es | Español |
fr | Français |
it | Italiano |
nl | Nederlands |
pl | Polski |
pt | Português |
sv | Svenska |
el | Ελληνικά |
Package Structure
constants.ts
detection.ts
index.ts
load-path.ts
styles.css
types.ts
validation.ts
vite.ts
world-languages.ts
language-banner.tsx
language-drawer.tsx
language-select.tsx
localized.tsx