@djangocfg/layouts 2.1.304 → 2.1.307

package/src/layouts/_components/locale-switcher/LocaleSwitcherDialog.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import * as React from 'react';
+import { Globe, X } from 'lucide-react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogClose,
+} from '@djangocfg/ui-core/components';
+import { useIsMobile } from '@djangocfg/ui-core/hooks';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LocaleGrid } from './LocaleGrid';
+import type {
+  LocaleSwitcherBrand,
+  LocaleSwitcherLabels,
+  LocaleSwitcherSharedProps,
+} from './types';
+
+export interface LocaleSwitcherDialogProps extends LocaleSwitcherSharedProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  brand?: LocaleSwitcherBrand;
+}
+
+const DEFAULT_LABELS: Required<LocaleSwitcherLabels> = {
+  dialogTitle: 'Choose your language',
+  dialogSubtitle: 'Pick the language you want to browse the site in.',
+  searchPlaceholder: 'Search language…',
+  emptyResults: 'No languages found',
+  closeLabel: 'Close',
+  triggerLabel: 'Change language',
+};
+
+/**
+ * Fullscreen language picker dialog. Slides up from the bottom on mobile,
+ * fades into a centred fullscreen sheet on tablet/desktop.
+ *
+ * The dialog uses ui-core's `<DialogContent fullscreen>` and provides a
+ * custom pill-shaped close button via `closeButton` so the default Radix
+ * X glyph does not stack on top.
+ */
+export function LocaleSwitcherDialog({
+  locale,
+  locales,
+  onChange,
+  open,
+  onOpenChange,
+  brand,
+  labels,
+  i18nLabels,
+}: LocaleSwitcherDialogProps) {
+  const isMobile = useIsMobile();
+
+  const merged = React.useMemo(
+    () => ({ ...DEFAULT_LABELS, ...i18nLabels }),
+    [i18nLabels],
+  );
+
+  const handleSelect = React.useCallback(
+    (code: string) => {
+      onChange(code);
+      onOpenChange(false);
+    },
+    [onChange, onOpenChange],
+  );
+
+  const closeButton = React.useMemo(
+    () => (
+      <DialogClose
+        aria-label={merged.closeLabel}
+        className={cn(
+          'absolute right-4 top-4 inline-flex h-10 w-10 items-center justify-center',
+          'cursor-pointer rounded-full border border-border/60 bg-background/90 text-muted-foreground shadow-sm',
+          'transition-colors hover:bg-accent hover:text-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
+        )}
+      >
+        <X className="h-4 w-4" />
+      </DialogClose>
+    ),
+    [merged.closeLabel],
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        fullscreen
+        closeButton={closeButton}
+        className={cn(
+          'bg-background/95 backdrop-blur-md',
+          isMobile
+            ? 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom'
+            : null,
+        )}
+      >
+        <DialogTitle className="sr-only">{merged.dialogTitle}</DialogTitle>
+
+        {/*
+          Single padded shell — both header and grid use the same horizontal
+          rhythm, so the search input lines up with the cards beneath it.
+          The shell scrolls; the grid below uses overflow-hidden so the focus
+          ring on the search input isn't clipped by an inner scroll edge.
+         */}
+        <div className="mx-auto flex h-full w-full max-w-5xl flex-col px-4 sm:px-6 lg:px-8">
+          <LocaleSwitcherDialogHeader brand={brand} labels={merged} />
+
+          <div className="flex-1 min-h-0 pb-6 lg:pb-10">
+            <LocaleGrid
+              locale={locale}
+              locales={locales}
+              onSelect={handleSelect}
+              labels={labels}
+              searchPlaceholder={merged.searchPlaceholder}
+              emptyResults={merged.emptyResults}
+              compact={isMobile}
+            />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface DialogHeaderProps {
+  brand?: LocaleSwitcherBrand;
+  labels: Required<LocaleSwitcherLabels>;
+}
+
+function LocaleSwitcherDialogHeader({ brand, labels }: DialogHeaderProps) {
+  const hasBrand = Boolean(brand?.logo || brand?.name);
+
+  return (
+    <header className="shrink-0 pb-5 pt-6 sm:pt-8 lg:pb-7 lg:pt-10">
+      <div className="mb-5 inline-flex items-center gap-2.5 lg:mb-7">
+        {hasBrand ? (
+          <>
+            {brand?.logo ? (
+              <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-primary/10 text-primary">
+                {brand.logo}
+              </span>
+            ) : null}
+            {brand?.name ? (
+              <span className="text-sm font-semibold tracking-tight text-foreground">
+                {brand.name}
+              </span>
+            ) : null}
+          </>
+        ) : (
+          <span className="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
+            <Globe className="h-4 w-4" aria-hidden />
+          </span>
+        )}
+      </div>
+
+      <h2 className="text-2xl font-semibold tracking-tight text-foreground sm:text-3xl">
+        {labels.dialogTitle}
+      </h2>
+      {labels.dialogSubtitle && (
+        <p className="mt-1.5 text-sm text-muted-foreground sm:text-base">
+          {labels.dialogSubtitle}
+        </p>
+      )}
+    </header>
+  );
+}

package/src/layouts/_components/locale-switcher/LocaleSwitcherDropdown.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import * as React from 'react';
+import { Globe } from 'lucide-react';
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  LanguageFlag,
+} from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { getLocaleMeta } from './localeMeta';
+import type { LocaleSwitcherSharedProps } from './types';
+
+export interface LocaleSwitcherDropdownProps extends LocaleSwitcherSharedProps {
+  showCode?: boolean;
+  variant?: 'ghost' | 'outline' | 'default';
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  showIcon?: boolean;
+  showFlag?: boolean;
+  showTriggerLabel?: boolean;
+}
+
+/**
+ * Compact dropdown locale switcher — kept for navbar and dense layouts where
+ * a fullscreen dialog feels heavy.
+ */
+export function LocaleSwitcherDropdown({
+  locale,
+  locales,
+  onChange,
+  labels,
+  showCode = false,
+  variant = 'ghost',
+  size = 'sm',
+  showIcon = true,
+  showFlag = true,
+  showTriggerLabel = true,
+  className,
+}: LocaleSwitcherDropdownProps) {
+  const currentMeta = getLocaleMeta(locale, labels);
+  const currentLabel = showCode ? locale.toUpperCase() : currentMeta.native;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant={variant} size={size} className={className}>
+          {showFlag ? (
+            <LanguageFlag
+              code={locale}
+              rounded
+              className={cn('h-3 w-4 shrink-0', showTriggerLabel && 'mr-1.5')}
+            />
+          ) : showIcon ? (
+            <Globe className={cn('h-4 w-4 shrink-0', showTriggerLabel && 'mr-1')} />
+          ) : null}
+          {showTriggerLabel && <span>{currentLabel}</span>}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {locales.map((code) => {
+          const meta = getLocaleMeta(code, labels);
+          const active = code === locale;
+          return (
+            <DropdownMenuItem
+              key={code}
+              onClick={() => onChange(code)}
+              className={cn(
+                'flex items-center gap-2',
+                active && 'bg-accent',
+              )}
+            >
+              {showFlag && <LanguageFlag code={code} rounded className="h-3 w-4 shrink-0" />}
+              <span>{showCode ? `${code.toUpperCase()} - ${meta.native}` : meta.native}</span>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/layouts/_components/locale-switcher/LocaleSwitcherTrigger.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+import { Globe } from 'lucide-react';
+
+import { Button, LanguageFlag } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { getLocaleMeta } from './localeMeta';
+
+export interface LocaleSwitcherTriggerProps {
+  locale: string;
+  labels?: Record<string, string>;
+  /** Show the flag in the trigger. @default true */
+  showFlag?: boolean;
+  /** Show the locale label / native name in the trigger. @default true */
+  showLabel?: boolean;
+  /** Show locale code instead of the native name (`'EN'` instead of `'English'`). */
+  showCode?: boolean;
+  variant?: 'ghost' | 'outline' | 'default';
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  className?: string;
+  ariaLabel?: string;
+  onClick?: () => void;
+}
+
+/**
+ * Footer / navbar trigger that opens the dialog. Visually matches the
+ * existing dropdown trigger so swapping `variant` does not shift the row.
+ */
+export const LocaleSwitcherTrigger = React.forwardRef<
+  HTMLButtonElement,
+  LocaleSwitcherTriggerProps
+>(function LocaleSwitcherTrigger(
+  {
+    locale,
+    labels,
+    showFlag = true,
+    showLabel = true,
+    showCode = false,
+    variant = 'outline',
+    size = 'default',
+    className,
+    ariaLabel,
+    onClick,
+  },
+  ref,
+) {
+  const meta = getLocaleMeta(locale, labels);
+  const labelText = showCode ? locale.toUpperCase() : meta.native;
+
+  return (
+    <Button
+      ref={ref}
+      type="button"
+      variant={variant}
+      size={size}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      className={cn('inline-flex items-center gap-2', className)}
+    >
+      {showFlag ? (
+        <LanguageFlag
+          code={locale}
+          rounded
+          className="h-3 w-4 shrink-0"
+        />
+      ) : (
+        <Globe className="h-4 w-4 shrink-0" aria-hidden />
+      )}
+      {showLabel && <span className="truncate">{labelText}</span>}
+    </Button>
+  );
+});

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

@@ -0,0 +1,27 @@
+export { LocaleSwitcher } from './LocaleSwitcher';
+export type { LocaleSwitcherProps } from './LocaleSwitcher';
+
+export { LocaleSwitcherDialog } from './LocaleSwitcherDialog';
+export type { LocaleSwitcherDialogProps } from './LocaleSwitcherDialog';
+
+export { LocaleSwitcherDropdown } from './LocaleSwitcherDropdown';
+export type { LocaleSwitcherDropdownProps } from './LocaleSwitcherDropdown';
+
+export { LocaleSwitcherTrigger } from './LocaleSwitcherTrigger';
+export type { LocaleSwitcherTriggerProps } from './LocaleSwitcherTrigger';
+
+export { LocaleGrid } from './LocaleGrid';
+export type { LocaleGridProps } from './LocaleGrid';
+
+export { LocaleCard } from './LocaleCard';
+export type { LocaleCardProps } from './LocaleCard';
+
+export { getLocaleMeta } from './localeMeta';
+export type { LocaleMeta } from './localeMeta';
+
+export type {
+  LocaleSwitcherBrand,
+  LocaleSwitcherLabels,
+  LocaleSwitcherSharedProps,
+  LocaleSwitcherVariant,
+} from './types';

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;
 }
 
 // ============================================================================