xertica-ui 2.2.1 → 2.3.0

package/contexts/LanguageContext.tsx

@@ -1,251 +1,251 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from 'react';
-import i18n from '../i18n';
-import { useQueryClient } from '@tanstack/react-query';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────────
-
-/**
- * Language code — any string is allowed so consumers can extend with their own
- * locales (e.g. `'fr'`, `'de'`, `'ja'`). The library ships with built-in
- * support for `'pt-BR'`, `'en'`, and `'es'`, but those are recommendations not
- * restrictions.
- */
-export type Language = string;
-
-/**
- * Descriptor for a single language available in the picker.
- */
-export interface LanguageDefinition {
-  /** ISO/BCP-47 code stored in localStorage and passed to i18n.changeLanguage() */
-  code: Language;
-  /** Full display label shown in the LanguageSelector dropdown */
-  label: string;
-  /** Short label shown in `variant="minimal"` (e.g. "PT", "EN") */
-  shortLabel?: string;
-  /** Optional translation JSON. When provided, it is registered with i18next
-   *  on mount so dynamically added locales are loaded automatically.
-   *  Use a plain object matching your `pt-BR.json` shape. */
-  resources?: Record<string, unknown>;
-}
-
-interface LanguageContextType {
-  /** Currently active language code */
-  language: Language;
-  /** Change the active language (persists + updates i18n + invalidates queries) */
-  setLanguage: (language: Language) => void;
-  /** All languages registered for this app */
-  availableLanguages: LanguageDefinition[];
-  /** True when only a single language is configured — UI can hide selectors */
-  isMonolingual: boolean;
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Defaults
-// ─────────────────────────────────────────────────────────────────────────────
-
-/**
- * Default language set when no `availableLanguages` prop is provided.
- * These are the locales the library ships with out-of-the-box.
- */
-export const DEFAULT_LANGUAGES: LanguageDefinition[] = [
-  { code: 'pt-BR', label: 'Português (BR)', shortLabel: 'PT' },
-  { code: 'en', label: 'English', shortLabel: 'EN' },
-  { code: 'es', label: 'Español', shortLabel: 'ES' },
-];
-
-const STORAGE_KEY = 'xertica_language';
-
-// Maps legacy localStorage values (from older versions) to canonical codes.
-const LEGACY_LANGUAGE_MAP: Record<string, string> = {
-  PT: 'pt-BR',
-  pt: 'pt-BR',
-  EN: 'en',
-  'en-US': 'en',
-  ES: 'es',
-};
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Context
-// ─────────────────────────────────────────────────────────────────────────────
-
-const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Provider
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface LanguageProviderProps {
-  children: ReactNode;
-  /**
-   * List of languages available to this app. The first item is the default
-   * when no saved preference exists. Pass a single-item array to lock the
-   * app to one language (the LanguageSelector will hide itself automatically).
-   * Defaults to `DEFAULT_LANGUAGES` (pt-BR, en, es) when omitted.
-   *
-   * @example
-   * ```tsx
-   * // Monolingual English app
-   * <LanguageProvider availableLanguages={[{ code: 'en', label: 'English' }]}>
-   * ```
-   *
-   * @example
-   * ```tsx
-   * // Add French alongside the built-in languages
-   * import fr from './locales/fr.json';
-   *
-   * <LanguageProvider availableLanguages={[
-   *   ...DEFAULT_LANGUAGES,
-   *   { code: 'fr', label: 'Français', shortLabel: 'FR', resources: fr },
-   * ]}>
-   * ```
-   */
-  availableLanguages?: LanguageDefinition[];
-  /**
-   * Override the default language. Falls back to the first item in
-   * `availableLanguages` when omitted.
-   */
-  defaultLanguage?: Language;
-}
-
-export function LanguageProvider({
-  children,
-  availableLanguages = DEFAULT_LANGUAGES,
-  defaultLanguage,
-}: LanguageProviderProps) {
-  // Hard guard: empty array is almost always a consumer mistake. Throwing here
-  // surfaces the bug at provider mount instead of letting the app silently fall
-  // back to DEFAULT_LANGUAGES (which would, in turn, surprise monolingual apps
-  // that meant to pass `[{code:'en',...}]` but accidentally passed `[]`).
-  if (availableLanguages.length === 0) {
-    throw new Error(
-      'LanguageProvider: `availableLanguages` cannot be empty. Pass at least one ' +
-        'LanguageDefinition or omit the prop to use DEFAULT_LANGUAGES.'
-    );
-  }
-  const languages = availableLanguages;
-
-  // useQueryClient() works because LanguageProvider is always rendered inside
-  // <QueryClientProvider> (both in App.tsx and via XerticaProvider in templates).
-  const queryClient = useQueryClient();
-
-  // Stable "signature" of the configured languages — string of comma-joined
-  // codes. This prevents the effect below (and downstream `useMemo`) from
-  // firing every render when a consumer passes `availableLanguages={[...]}`
-  // inline (a fresh array reference on every render).
-  const languageCodesKey = useMemo(() => languages.map(l => l.code).join(','), [languages]);
-
-  // Register any locale `resources` carried by language definitions. This
-  // allows consumers to ship new locales without editing `i18n.ts`.
-  useEffect(() => {
-    for (const lang of languages) {
-      if (lang.resources && !i18n.hasResourceBundle(lang.code, 'translation')) {
-        i18n.addResourceBundle(lang.code, 'translation', lang.resources, true, true);
-      }
-    }
-    // `languageCodesKey` is a stable string signature; only re-runs when the
-    // set of configured language codes actually changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [languageCodesKey]);
-
-  const resolvedDefault = defaultLanguage ?? languages[0].code;
-
-  const [language, setLanguageState] = useState<Language>(() => {
-    const saved =
-      typeof window !== 'undefined' ? window.localStorage?.getItem(STORAGE_KEY) : null;
-
-    // Direct match against configured languages
-    if (saved && languages.some(l => l.code === saved)) {
-      return saved;
-    }
-
-    // Legacy migration
-    if (saved && LEGACY_LANGUAGE_MAP[saved]) {
-      const migrated = LEGACY_LANGUAGE_MAP[saved];
-      if (languages.some(l => l.code === migrated)) {
-        return migrated;
-      }
-    }
-
-    return resolvedDefault;
-  });
-
-  /** Change language: persists to localStorage, updates i18next, and invalidates
-   *  the React Query cache so any query whose result contains translated strings
-   *  is refetched in the new language on next render.
-   *
-   *  Components using `useTranslation()` already update instantly (i18next notifies
-   *  them). Queries using `useFeatureCards()` / `useAssistantConfig()` etc. also
-   *  update instantly because language is included in their queryKey — switching
-   *  language means a new key → cache miss → immediate refetch.
-   *
-   *  Wrapped in `useCallback` so that consumers destructuring `setLanguage` and
-   *  passing it into effect dependency arrays get a stable reference. */
-  const setLanguage = useCallback(
-    (lang: Language) => {
-      // Silently no-op if the requested language is not registered.
-      if (!languages.some(l => l.code === lang)) {
-        if (typeof console !== 'undefined') {
-          console.warn(
-            `[LanguageProvider] Language "${lang}" is not in availableLanguages — ignoring.`
-          );
-        }
-        return;
-      }
-      setLanguageState(lang);
-      window.localStorage?.setItem(STORAGE_KEY, lang);
-      i18n.changeLanguage(lang);
-      // Defensive invalidation: refetches any query that didn't include language
-      // in its queryKey and would otherwise serve stale translated strings.
-      queryClient.invalidateQueries();
-    },
-    // Depend on the stable codes signature instead of the `languages` array
-    // reference so the callback identity remains stable across inline-prop renders.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [languageCodesKey, queryClient]
-  );
-
-  // Sync i18next on mount in case the page refreshed with a saved language
-  useEffect(() => {
-    if (i18n.language !== language) {
-      i18n.changeLanguage(language);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // mount-only — i18n.ts already reads localStorage for the initial lng
-
-  const value = useMemo<LanguageContextType>(
-    () => ({
-      language,
-      setLanguage,
-      availableLanguages: languages,
-      isMonolingual: languages.length <= 1,
-    }),
-    // `setLanguage` is stable thanks to useCallback above; `languages` is gated
-    // by `languageCodesKey` so that inline-array consumers don't thrash the memo.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [language, setLanguage, languageCodesKey]
-  );
-
-  return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>;
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Hook
-// ─────────────────────────────────────────────────────────────────────────────
-
-export function useLanguage() {
-  const context = useContext(LanguageContext);
-  if (context === undefined) {
-    throw new Error('useLanguage must be used within a LanguageProvider');
-  }
-  return context;
-}
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import i18n from '../i18n';
+import { useQueryClient } from '@tanstack/react-query';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Language code — any string is allowed so consumers can extend with their own
+ * locales (e.g. `'fr'`, `'de'`, `'ja'`). The library ships with built-in
+ * support for `'pt-BR'`, `'en'`, and `'es'`, but those are recommendations not
+ * restrictions.
+ */
+export type Language = string;
+
+/**
+ * Descriptor for a single language available in the picker.
+ */
+export interface LanguageDefinition {
+  /** ISO/BCP-47 code stored in localStorage and passed to i18n.changeLanguage() */
+  code: Language;
+  /** Full display label shown in the LanguageSelector dropdown */
+  label: string;
+  /** Short label shown in `variant="minimal"` (e.g. "PT", "EN") */
+  shortLabel?: string;
+  /** Optional translation JSON. When provided, it is registered with i18next
+   *  on mount so dynamically added locales are loaded automatically.
+   *  Use a plain object matching your `pt-BR.json` shape. */
+  resources?: Record<string, unknown>;
+}
+
+interface LanguageContextType {
+  /** Currently active language code */
+  language: Language;
+  /** Change the active language (persists + updates i18n + invalidates queries) */
+  setLanguage: (language: Language) => void;
+  /** All languages registered for this app */
+  availableLanguages: LanguageDefinition[];
+  /** True when only a single language is configured — UI can hide selectors */
+  isMonolingual: boolean;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Defaults
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Default language set when no `availableLanguages` prop is provided.
+ * These are the locales the library ships with out-of-the-box.
+ */
+export const DEFAULT_LANGUAGES: LanguageDefinition[] = [
+  { code: 'pt-BR', label: 'Português (BR)', shortLabel: 'PT' },
+  { code: 'en', label: 'English', shortLabel: 'EN' },
+  { code: 'es', label: 'Español', shortLabel: 'ES' },
+];
+
+const STORAGE_KEY = 'xertica_language';
+
+// Maps legacy localStorage values (from older versions) to canonical codes.
+const LEGACY_LANGUAGE_MAP: Record<string, string> = {
+  PT: 'pt-BR',
+  pt: 'pt-BR',
+  EN: 'en',
+  'en-US': 'en',
+  ES: 'es',
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface LanguageProviderProps {
+  children: ReactNode;
+  /**
+   * List of languages available to this app. The first item is the default
+   * when no saved preference exists. Pass a single-item array to lock the
+   * app to one language (the LanguageSelector will hide itself automatically).
+   * Defaults to `DEFAULT_LANGUAGES` (pt-BR, en, es) when omitted.
+   *
+   * @example
+   * ```tsx
+   * // Monolingual English app
+   * <LanguageProvider availableLanguages={[{ code: 'en', label: 'English' }]}>
+   * ```
+   *
+   * @example
+   * ```tsx
+   * // Add French alongside the built-in languages
+   * import fr from './locales/fr.json';
+   *
+   * <LanguageProvider availableLanguages={[
+   *   ...DEFAULT_LANGUAGES,
+   *   { code: 'fr', label: 'Français', shortLabel: 'FR', resources: fr },
+   * ]}>
+   * ```
+   */
+  availableLanguages?: LanguageDefinition[];
+  /**
+   * Override the default language. Falls back to the first item in
+   * `availableLanguages` when omitted.
+   */
+  defaultLanguage?: Language;
+}
+
+export function LanguageProvider({
+  children,
+  availableLanguages = DEFAULT_LANGUAGES,
+  defaultLanguage,
+}: LanguageProviderProps) {
+  // Hard guard: empty array is almost always a consumer mistake. Throwing here
+  // surfaces the bug at provider mount instead of letting the app silently fall
+  // back to DEFAULT_LANGUAGES (which would, in turn, surprise monolingual apps
+  // that meant to pass `[{code:'en',...}]` but accidentally passed `[]`).
+  if (availableLanguages.length === 0) {
+    throw new Error(
+      'LanguageProvider: `availableLanguages` cannot be empty. Pass at least one ' +
+        'LanguageDefinition or omit the prop to use DEFAULT_LANGUAGES.'
+    );
+  }
+  const languages = availableLanguages;
+
+  // useQueryClient() works because LanguageProvider is always rendered inside
+  // <QueryClientProvider> (both in App.tsx and via XerticaProvider in templates).
+  const queryClient = useQueryClient();
+
+  // Stable "signature" of the configured languages — string of comma-joined
+  // codes. This prevents the effect below (and downstream `useMemo`) from
+  // firing every render when a consumer passes `availableLanguages={[...]}`
+  // inline (a fresh array reference on every render).
+  const languageCodesKey = useMemo(() => languages.map(l => l.code).join(','), [languages]);
+
+  // Register any locale `resources` carried by language definitions. This
+  // allows consumers to ship new locales without editing `i18n.ts`.
+  useEffect(() => {
+    for (const lang of languages) {
+      if (lang.resources && !i18n.hasResourceBundle(lang.code, 'translation')) {
+        i18n.addResourceBundle(lang.code, 'translation', lang.resources, true, true);
+      }
+    }
+    // `languageCodesKey` is a stable string signature; only re-runs when the
+    // set of configured language codes actually changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [languageCodesKey]);
+
+  const resolvedDefault = defaultLanguage ?? languages[0].code;
+
+  const [language, setLanguageState] = useState<Language>(() => {
+    const saved =
+      typeof window !== 'undefined' ? window.localStorage?.getItem(STORAGE_KEY) : null;
+
+    // Direct match against configured languages
+    if (saved && languages.some(l => l.code === saved)) {
+      return saved;
+    }
+
+    // Legacy migration
+    if (saved && LEGACY_LANGUAGE_MAP[saved]) {
+      const migrated = LEGACY_LANGUAGE_MAP[saved];
+      if (languages.some(l => l.code === migrated)) {
+        return migrated;
+      }
+    }
+
+    return resolvedDefault;
+  });
+
+  /** Change language: persists to localStorage, updates i18next, and invalidates
+   *  the React Query cache so any query whose result contains translated strings
+   *  is refetched in the new language on next render.
+   *
+   *  Components using `useTranslation()` already update instantly (i18next notifies
+   *  them). Queries using `useFeatureCards()` / `useAssistantConfig()` etc. also
+   *  update instantly because language is included in their queryKey — switching
+   *  language means a new key → cache miss → immediate refetch.
+   *
+   *  Wrapped in `useCallback` so that consumers destructuring `setLanguage` and
+   *  passing it into effect dependency arrays get a stable reference. */
+  const setLanguage = useCallback(
+    (lang: Language) => {
+      // Silently no-op if the requested language is not registered.
+      if (!languages.some(l => l.code === lang)) {
+        if (typeof console !== 'undefined') {
+          console.warn(
+            `[LanguageProvider] Language "${lang}" is not in availableLanguages — ignoring.`
+          );
+        }
+        return;
+      }
+      setLanguageState(lang);
+      window.localStorage?.setItem(STORAGE_KEY, lang);
+      i18n.changeLanguage(lang);
+      // Defensive invalidation: refetches any query that didn't include language
+      // in its queryKey and would otherwise serve stale translated strings.
+      queryClient.invalidateQueries();
+    },
+    // Depend on the stable codes signature instead of the `languages` array
+    // reference so the callback identity remains stable across inline-prop renders.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [languageCodesKey, queryClient]
+  );
+
+  // Sync i18next on mount in case the page refreshed with a saved language
+  useEffect(() => {
+    if (i18n.language !== language) {
+      i18n.changeLanguage(language);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // mount-only — i18n.ts already reads localStorage for the initial lng
+
+  const value = useMemo<LanguageContextType>(
+    () => ({
+      language,
+      setLanguage,
+      availableLanguages: languages,
+      isMonolingual: languages.length <= 1,
+    }),
+    // `setLanguage` is stable thanks to useCallback above; `languages` is gated
+    // by `languageCodesKey` so that inline-array consumers don't thrash the memo.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [language, setLanguage, languageCodesKey]
+  );
+
+  return <LanguageContext.Provider value={value}>{children}</LanguageContext.Provider>;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function useLanguage() {
+  const context = useContext(LanguageContext);
+  if (context === undefined) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+}

package/contexts/LayoutContext.test.tsx

@@ -1,29 +1,29 @@
-import { renderHook, act } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { LayoutProvider, useLayout, useOptionalLayout } from './LayoutContext';
-import React from 'react';
-
-describe('LayoutContext', () => {
-  it('toggles sidebar', () => {
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
-      <LayoutProvider>{children}</LayoutProvider>
-    );
-
-    const { result } = renderHook(() => useLayout(), { wrapper });
-
-    // Default depends on screen size usually, but check initial
-    const initial = result.current.sidebarExpanded;
-
-    act(() => {
-      result.current.toggleSidebar();
-    });
-
-    expect(result.current.sidebarExpanded).toBe(!initial);
-  });
-
-  it('returns null for optional layout outside the provider', () => {
-    const { result } = renderHook(() => useOptionalLayout());
-
-    expect(result.current).toBeNull();
-  });
-});
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { LayoutProvider, useLayout, useOptionalLayout } from './LayoutContext';
+import React from 'react';
+
+describe('LayoutContext', () => {
+  it('toggles sidebar', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <LayoutProvider>{children}</LayoutProvider>
+    );
+
+    const { result } = renderHook(() => useLayout(), { wrapper });
+
+    // Default depends on screen size usually, but check initial
+    const initial = result.current.sidebarExpanded;
+
+    act(() => {
+      result.current.toggleSidebar();
+    });
+
+    expect(result.current.sidebarExpanded).toBe(!initial);
+  });
+
+  it('returns null for optional layout outside the provider', () => {
+    const { result } = renderHook(() => useOptionalLayout());
+
+    expect(result.current).toBeNull();
+  });
+});