@djangocfg/layouts 2.1.304 → 2.1.308

package/src/layouts/_components/locale-switcher/localeMeta.ts

@@ -0,0 +1,109 @@
+/**
+ * Locale metadata — native name + english name per locale code.
+ *
+ * Covers the codes shipped with `@djangocfg/i18n` (and their common regional
+ * variants). Unknown codes fall back to the uppercase code itself.
+ */
+
+export interface LocaleMeta {
+  /** Native rendering — `'Русский'`, `'한국어'`. */
+  native: string;
+  /** English name — `'Russian'`, `'Korean'`. Used as the secondary line. */
+  english: string;
+  /** Marks the locale as RTL (`ar`, `he`, `fa`, `ur`). */
+  rtl?: boolean;
+}
+
+const RTL_LANGS = new Set(['ar', 'he', 'fa', 'ur', 'ps', 'sd', 'yi', 'ku']);
+
+const META: Record<string, { native: string; english: string }> = {
+  // Major
+  en: { native: 'English', english: 'English' },
+  ru: { native: 'Русский', english: 'Russian' },
+  ko: { native: '한국어', english: 'Korean' },
+  zh: { native: '中文', english: 'Chinese' },
+  ja: { native: '日本語', english: 'Japanese' },
+  es: { native: 'Español', english: 'Spanish' },
+  fr: { native: 'Français', english: 'French' },
+  de: { native: 'Deutsch', english: 'German' },
+  pt: { native: 'Português', english: 'Portuguese' },
+  it: { native: 'Italiano', english: 'Italian' },
+  ar: { native: 'العربية', english: 'Arabic' },
+  hi: { native: 'हिन्दी', english: 'Hindi' },
+  tr: { native: 'Türkçe', english: 'Turkish' },
+  pl: { native: 'Polski', english: 'Polish' },
+  nl: { native: 'Nederlands', english: 'Dutch' },
+  uk: { native: 'Українська', english: 'Ukrainian' },
+
+  // Regional variants
+  'pt-BR': { native: 'Português (Brasil)', english: 'Portuguese (Brazil)' },
+  'pt-PT': { native: 'Português (Portugal)', english: 'Portuguese (Portugal)' },
+  'zh-CN': { native: '简体中文', english: 'Chinese (Simplified)' },
+  'zh-TW': { native: '繁體中文', english: 'Chinese (Traditional)' },
+  'en-US': { native: 'English (US)', english: 'English (US)' },
+  'en-GB': { native: 'English (UK)', english: 'English (UK)' },
+  'es-MX': { native: 'Español (México)', english: 'Spanish (Mexico)' },
+  'es-ES': { native: 'Español (España)', english: 'Spanish (Spain)' },
+  'fr-CA': { native: 'Français (Canada)', english: 'French (Canada)' },
+
+  // Scandinavian
+  sv: { native: 'Svenska', english: 'Swedish' },
+  no: { native: 'Norsk', english: 'Norwegian' },
+  nb: { native: 'Norsk Bokmål', english: 'Norwegian Bokmål' },
+  nn: { native: 'Norsk Nynorsk', english: 'Norwegian Nynorsk' },
+  da: { native: 'Dansk', english: 'Danish' },
+  fi: { native: 'Suomi', english: 'Finnish' },
+  is: { native: 'Íslenska', english: 'Icelandic' },
+
+  // Other European
+  cs: { native: 'Čeština', english: 'Czech' },
+  sk: { native: 'Slovenčina', english: 'Slovak' },
+  hu: { native: 'Magyar', english: 'Hungarian' },
+  ro: { native: 'Română', english: 'Romanian' },
+  bg: { native: 'Български', english: 'Bulgarian' },
+  hr: { native: 'Hrvatski', english: 'Croatian' },
+  sr: { native: 'Српски', english: 'Serbian' },
+  sl: { native: 'Slovenščina', english: 'Slovenian' },
+  et: { native: 'Eesti', english: 'Estonian' },
+  lv: { native: 'Latviešu', english: 'Latvian' },
+  lt: { native: 'Lietuvių', english: 'Lithuanian' },
+  el: { native: 'Ελληνικά', english: 'Greek' },
+
+  // Other
+  th: { native: 'ไทย', english: 'Thai' },
+  vi: { native: 'Tiếng Việt', english: 'Vietnamese' },
+  id: { native: 'Indonesia', english: 'Indonesian' },
+  ms: { native: 'Bahasa Melayu', english: 'Malay' },
+  he: { native: 'עברית', english: 'Hebrew' },
+  fa: { native: 'فارسی', english: 'Persian' },
+};
+
+function normalize(code: string): { exact: string; base: string } {
+  const trimmed = code.trim();
+  const dash = trimmed.indexOf('-');
+  if (dash === -1) {
+    return { exact: trimmed.toLowerCase(), base: trimmed.toLowerCase() };
+  }
+  const lang = trimmed.slice(0, dash).toLowerCase();
+  const region = trimmed.slice(dash + 1).toUpperCase();
+  return { exact: `${lang}-${region}`, base: lang };
+}
+
+export function getLocaleMeta(
+  code: string,
+  overrides?: Record<string, string>,
+): LocaleMeta {
+  const { exact, base } = normalize(code);
+
+  // Manual overrides win — match either the exact code or the base.
+  const overrideNative = overrides?.[code] ?? overrides?.[exact] ?? overrides?.[base];
+
+  // Try exact match first (`pt-BR`), fall back to base (`pt`).
+  const direct = META[exact] ?? META[base];
+
+  return {
+    native: overrideNative ?? direct?.native ?? code.toUpperCase(),
+    english: direct?.english ?? code.toUpperCase(),
+    rtl: RTL_LANGS.has(base),
+  };
+}

package/src/layouts/_components/locale-switcher/types.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+
+export type LocaleSwitcherVariant = 'dropdown' | 'dialog';
+
+/**
+ * Brand block shown in the dialog header. Pass either a logo node, a
+ * project name string, or both. Falls back to a Globe icon + "Select
+ * language" header when no brand is provided.
+ */
+export interface LocaleSwitcherBrand {
+  /** Logo node (img, svg, lucide icon, …). Sized at ~40×40 in the dialog header. */
+  logo?: ReactNode;
+  /** Project name displayed alongside the logo. */
+  name?: string;
+}
+
+export interface LocaleSwitcherLabels {
+  /**
+   * Title rendered in the dialog hero (`Choose your language`).
+   * The dialog also exposes this string as the accessible DialogTitle.
+   */
+  dialogTitle?: string;
+  /** Subtitle below the title. */
+  dialogSubtitle?: string;
+  /** Search input placeholder. */
+  searchPlaceholder?: string;
+  /** Empty state when no locales match the search. */
+  emptyResults?: string;
+  /** Aria-label for the close button (also used as tooltip). */
+  closeLabel?: string;
+  /** Aria-label for the trigger button. */
+  triggerLabel?: string;
+}
+
+export interface LocaleSwitcherSharedProps {
+  /** Current locale (ISO 639-1, optionally with region — `'pt-BR'`). */
+  locale: string;
+  /** Available locales. */
+  locales: string[];
+  /** Selection callback. */
+  onChange: (locale: string) => void;
+  /** Override / add native names (`{ es: 'Español' }`). */
+  labels?: Record<string, string>;
+  /** UI strings (search placeholder, close, …). */
+  i18nLabels?: LocaleSwitcherLabels;
+  /** Extra trigger className. */
+  className?: string;
+}

package/src/layouts/types/layout.types.ts

@@ -62,6 +62,13 @@ export interface BaseLayoutProps {
 
   /** Debug panel configuration */
   debug?: DebugConfig;
+
+  /**
+   * Locale-switching plumbing. Mounted into a `LayoutI18nProvider` inside
+   * `BaseApp` — every locale-aware component (footer, navbar, sidebar,
+   * UserMenu, LocaleSwitcher) reads from there via `useLayoutI18n()`.
+   */
+  i18n?: I18nLayoutConfig;
 }
 
 /** Debug panel config — enabled in development by default, pass enabled: true/false to override */
@@ -70,9 +77,34 @@ export interface DebugConfig extends DebugButtonProps {
   enabled?: boolean;
 }
 
+/**
+ * Brand block surfaced inside the locale-switcher dialog. Shared via
+ * `I18nLayoutConfig.brand` so footer / navbar / sidebar all open the same
+ * dialog with the same identity.
+ */
+export interface I18nBrandConfig {
+  /** Logo node — img / svg / lucide icon. Sized ~36×36 in the dialog header. */
+  logo?: ReactNode;
+  /** Project name shown beside the logo. */
+  name?: string;
+}
+
+/** UI strings for the locale-switcher dialog (also passed via i18n). */
+export interface I18nDialogLabels {
+  dialogTitle?: string;
+  dialogSubtitle?: string;
+  searchPlaceholder?: string;
+  emptyResults?: string;
+  closeLabel?: string;
+  triggerLabel?: string;
+}
+
 /**
  * i18n configuration consumed by layouts, navbars, footer controls, and the
- * UserMenu locale row. Same shape as `@djangocfg/nextjs`'s `useLocaleSwitcher`.
+ * UserMenu locale row. Same shape as `@djangocfg/nextjs`'s `useLocaleSwitcher`,
+ * with optional `brand` / `dialogLabels` so every locale-switcher mount
+ * (footer, navbar, sidebar) opens the same fullscreen dialog with a
+ * consistent identity.
  */
 export interface I18nLayoutConfig {
   /** Current locale (e.g. `"en"`, `"ru"`, `"pt-BR"`). */
@@ -81,6 +113,10 @@ export interface I18nLayoutConfig {
   locales: string[];
   /** Called when the user picks a new locale. */
   onLocaleChange: (locale: string) => void;
+  /** Brand surfaced in the locale-switcher dialog header. */
+  brand?: I18nBrandConfig;
+  /** Custom UI strings for the locale-switcher dialog. */
+  dialogLabels?: I18nDialogLabels;
 }
 
 // ============================================================================