@djangocfg/layouts 2.1.304 → 2.1.308

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

@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import { Search, X } from 'lucide-react';
+
+import { Input } from '@djangocfg/ui-core/components';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { LocaleCard } from './LocaleCard';
+import { getLocaleMeta, type LocaleMeta } from './localeMeta';
+
+export interface LocaleGridProps {
+  locale: string;
+  locales: string[];
+  onSelect: (locale: string) => void;
+  labels?: Record<string, string>;
+  searchPlaceholder?: string;
+  emptyResults?: string;
+  /** Force compact (single-column list) layout. @default false (grid on ≥sm) */
+  compact?: boolean;
+  /** Search input visibility. Auto-shown when more than `searchThreshold` locales. */
+  searchThreshold?: number;
+}
+
+interface LocaleEntry {
+  code: string;
+  meta: LocaleMeta;
+}
+
+const DEFAULT_SEARCH_THRESHOLD = 8;
+
+export function LocaleGrid({
+  locale,
+  locales,
+  onSelect,
+  labels,
+  searchPlaceholder = 'Search language…',
+  emptyResults = 'No languages found',
+  compact = false,
+  searchThreshold = DEFAULT_SEARCH_THRESHOLD,
+}: LocaleGridProps) {
+  const [query, setQuery] = React.useState('');
+
+  const entries = React.useMemo<LocaleEntry[]>(
+    () =>
+      locales.map((code) => ({
+        code,
+        meta: getLocaleMeta(code, labels),
+      })),
+    [locales, labels],
+  );
+
+  const showSearch = entries.length > searchThreshold;
+
+  const filtered = React.useMemo(() => {
+    if (!query.trim()) return entries;
+    const q = query.trim().toLowerCase();
+    return entries.filter(
+      (e) =>
+        e.code.toLowerCase().includes(q) ||
+        e.meta.native.toLowerCase().includes(q) ||
+        e.meta.english.toLowerCase().includes(q),
+    );
+  }, [entries, query]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col gap-4">
+      {showSearch && (
+        // `p-px` reserves the focus-ring offset so it isn't clipped by the
+        // scroll container below.
+        <div className="relative shrink-0 p-px">
+          <Search
+            className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
+            aria-hidden
+          />
+          <Input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={searchPlaceholder}
+            className="h-11 rounded-xl pl-10 pr-9"
+            // Avoid forcing the keyboard open on mobile.
+            autoFocus={false}
+          />
+          {query && (
+            <button
+              type="button"
+              onClick={() => setQuery('')}
+              aria-label="Clear search"
+              className="absolute right-2.5 top-1/2 inline-flex h-7 w-7 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* `p-px` reserves the focus / active ring offset around cards. */}
+      <div className="flex-1 min-h-0 overflow-y-auto p-px">
+        {filtered.length === 0 ? (
+          <div className="flex h-full items-center justify-center py-12 text-sm text-muted-foreground">
+            {emptyResults}
+          </div>
+        ) : (
+          <div
+            className={cn(
+              'grid gap-2.5',
+              compact
+                ? 'grid-cols-1'
+                : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+            )}
+          >
+            {filtered.map(({ code, meta }) => (
+              <LocaleCard
+                key={code}
+                code={code}
+                meta={meta}
+                active={code === locale}
+                onSelect={onSelect}
+                compact={compact}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,100 @@
+'use client';
+
+import * as React from 'react';
+
+import { useLayoutI18n } from '../../AppLayout/LayoutI18nProvider';
+
+import { LocaleSwitcherDialog } from './LocaleSwitcherDialog';
+import { LocaleSwitcherDropdown } from './LocaleSwitcherDropdown';
+import { LocaleSwitcherTrigger } from './LocaleSwitcherTrigger';
+import type { LocaleSwitcherVariant } from './types';
+
+export interface LocaleSwitcherProps {
+  /**
+   * UI flavour.
+   * - `dialog` (default): fullscreen language picker with brand header, search, grid.
+   * - `dropdown`: compact dropdown menu — best for navbars and dense rails.
+   */
+  variant?: LocaleSwitcherVariant;
+  /** Override / add native names per locale (`{ es: 'Español' }`). */
+  labels?: Record<string, string>;
+
+  // Trigger styling — applies to both variants.
+  showCode?: boolean;
+  buttonVariant?: 'ghost' | 'outline' | 'default';
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  /** Show the leading Globe icon when no flag is rendered. @default true */
+  showIcon?: boolean;
+  /** Show the country flag in the trigger. @default true */
+  showFlag?: boolean;
+  /** Show the label text in the trigger. @default true */
+  showTriggerLabel?: boolean;
+  /** Extra trigger className. */
+  className?: string;
+}
+
+/**
+ * Locale switcher with two flavours: a compact dropdown and a fullscreen
+ * dialog. Pulls `locale` / `locales` / `onChange` / `brand` / `dialogLabels`
+ * from `LayoutI18nProvider` (mounted by `BaseApp`) — no need to thread them
+ * through props.
+ */
+export function LocaleSwitcher({
+  variant = 'dialog',
+  labels,
+  className,
+  showCode = false,
+  buttonVariant = 'ghost',
+  size = 'sm',
+  showIcon = true,
+  showFlag = true,
+  showTriggerLabel = true,
+}: LocaleSwitcherProps) {
+  const i18n = useLayoutI18n();
+  const [open, setOpen] = React.useState(false);
+
+  if (variant === 'dropdown') {
+    return (
+      <LocaleSwitcherDropdown
+        locale={i18n.locale}
+        locales={i18n.locales}
+        onChange={i18n.onLocaleChange}
+        labels={labels}
+        className={className}
+        showCode={showCode}
+        variant={buttonVariant}
+        size={size}
+        showIcon={showIcon}
+        showFlag={showFlag}
+        showTriggerLabel={showTriggerLabel}
+      />
+    );
+  }
+
+  return (
+    <>
+      <LocaleSwitcherTrigger
+        locale={i18n.locale}
+        labels={labels}
+        showFlag={showFlag}
+        showLabel={showTriggerLabel}
+        showCode={showCode}
+        variant={buttonVariant}
+        size={size}
+        className={className}
+        ariaLabel={i18n.dialogLabels?.triggerLabel ?? 'Change language'}
+        onClick={() => setOpen(true)}
+      />
+      <LocaleSwitcherDialog
+        locale={i18n.locale}
+        locales={i18n.locales}
+        onChange={i18n.onLocaleChange}
+        labels={labels}
+        i18nLabels={i18n.dialogLabels}
+        brand={i18n.brand}
+        open={open}
+        onOpenChange={setOpen}
+      />
+    </>
+  );
+}

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,101 @@
+'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;
+  const isIconOnly = size === 'icon';
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {isIconOnly ? (
+          <Button
+            variant={variant}
+            size={size}
+            aria-label={currentLabel}
+            className={cn('overflow-hidden rounded-full p-0', className)}
+          >
+            {showFlag ? (
+              <LanguageFlag code={locale} className="h-full w-full object-cover" />
+            ) : (
+              <Globe className="h-4 w-4" aria-hidden />
+            )}
+          </Button>
+        ) : (
+          <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,103 @@
+'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;
+  const isIconOnly = size === 'icon';
+
+  // Icon-only trigger: full-bleed flag inside a circular pill that lines up
+  // with neighbouring avatars / icon buttons. No padding, no inner gap.
+  if (isIconOnly) {
+    return (
+      <Button
+        ref={ref}
+        type="button"
+        variant={variant}
+        size={size}
+        onClick={onClick}
+        aria-label={ariaLabel ?? labelText}
+        className={cn(
+          'overflow-hidden rounded-full p-0',
+          className,
+        )}
+      >
+        {showFlag ? (
+          <LanguageFlag
+            code={locale}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <Globe className="h-4 w-4" aria-hidden />
+        )}
+      </Button>
+    );
+  }
+
+  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';