xertica-ui 2.3.0 → 2.4.0

package/components/brand/language-selector/language-selector.test.tsx

@@ -1,101 +1,101 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { LanguageSelector } from './LanguageSelector';
-import React from 'react';
-
-// Default mock — three-language app (matches DEFAULT_LANGUAGES)
-const defaultLanguages = [
-  { code: 'pt-BR', label: 'Português (BR)', shortLabel: 'PT' },
-  { code: 'en', label: 'English', shortLabel: 'EN' },
-  { code: 'es', label: 'Español', shortLabel: 'ES' },
-];
-
-const useLanguageMock = vi.fn(() => ({
-  language: 'pt-BR',
-  setLanguage: vi.fn(),
-  availableLanguages: defaultLanguages,
-  isMonolingual: false,
-}));
-
-vi.mock('../../../contexts/LanguageContext', () => ({
-  useLanguage: () => useLanguageMock(),
-}));
-
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string, fallback?: string) => {
-      const map: Record<string, string> = {
-        'languageSelector.label': 'Selecionar idioma',
-        'languageSelector.placeholder': 'Idioma',
-        'languageSelector.ptBR': 'Português (BR)',
-        'languageSelector.en': 'English',
-        'languageSelector.es': 'Español',
-      };
-      return map[key] ?? fallback ?? key;
-    },
-  }),
-}));
-
-describe('LanguageSelector', () => {
-  beforeEach(() => {
-    // Reset to default three-language behavior between tests
-    useLanguageMock.mockReturnValue({
-      language: 'pt-BR',
-      setLanguage: vi.fn(),
-      availableLanguages: defaultLanguages,
-      isMonolingual: false,
-    });
-  });
-
-  it('renders with current language from context', () => {
-    render(<LanguageSelector />);
-    expect(screen.getByText('Português (BR)')).toBeInTheDocument();
-  });
-
-  it('renders the globe icon by default', () => {
-    render(<LanguageSelector />);
-    // Globe icon is rendered as SVG
-    expect(document.querySelector('svg')).toBeInTheDocument();
-  });
-
-  it('applies the aria-label from i18n', () => {
-    render(<LanguageSelector />);
-    expect(screen.getByLabelText('Selecionar idioma')).toBeInTheDocument();
-  });
-
-  it('renders nothing when monolingual (default behavior)', () => {
-    useLanguageMock.mockReturnValue({
-      language: 'en',
-      setLanguage: vi.fn(),
-      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
-      isMonolingual: true,
-    });
-    const { container } = render(<LanguageSelector />);
-    expect(container.firstChild).toBeNull();
-  });
-
-  it('renders even when monolingual if showWhenMonolingual is true', () => {
-    useLanguageMock.mockReturnValue({
-      language: 'en',
-      setLanguage: vi.fn(),
-      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
-      isMonolingual: true,
-    });
-    render(<LanguageSelector showWhenMonolingual />);
-    expect(screen.getByText('English')).toBeInTheDocument();
-  });
-
-  it('shows custom languages added via availableLanguages', () => {
-    useLanguageMock.mockReturnValue({
-      language: 'fr',
-      setLanguage: vi.fn(),
-      availableLanguages: [
-        ...defaultLanguages,
-        { code: 'fr', label: 'Français', shortLabel: 'FR' },
-      ],
-      isMonolingual: false,
-    });
-    render(<LanguageSelector />);
-    expect(screen.getByText('Français')).toBeInTheDocument();
-  });
-});
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { LanguageSelector } from './LanguageSelector';
+import React from 'react';
+
+// Default mock — three-language app (matches DEFAULT_LANGUAGES)
+const defaultLanguages = [
+  { code: 'pt-BR', label: 'Português (BR)', shortLabel: 'PT' },
+  { code: 'en', label: 'English', shortLabel: 'EN' },
+  { code: 'es', label: 'Español', shortLabel: 'ES' },
+];
+
+const useLanguageMock = vi.fn(() => ({
+  language: 'pt-BR',
+  setLanguage: vi.fn(),
+  availableLanguages: defaultLanguages,
+  isMonolingual: false,
+}));
+
+vi.mock('../../../contexts/LanguageContext', () => ({
+  useLanguage: () => useLanguageMock(),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, fallback?: string) => {
+      const map: Record<string, string> = {
+        'languageSelector.label': 'Selecionar idioma',
+        'languageSelector.placeholder': 'Idioma',
+        'languageSelector.ptBR': 'Português (BR)',
+        'languageSelector.en': 'English',
+        'languageSelector.es': 'Español',
+      };
+      return map[key] ?? fallback ?? key;
+    },
+  }),
+}));
+
+describe('LanguageSelector', () => {
+  beforeEach(() => {
+    // Reset to default three-language behavior between tests
+    useLanguageMock.mockReturnValue({
+      language: 'pt-BR',
+      setLanguage: vi.fn(),
+      availableLanguages: defaultLanguages,
+      isMonolingual: false,
+    });
+  });
+
+  it('renders with current language from context', () => {
+    render(<LanguageSelector />);
+    expect(screen.getByText('Português (BR)')).toBeInTheDocument();
+  });
+
+  it('renders the globe icon by default', () => {
+    render(<LanguageSelector />);
+    // Globe icon is rendered as SVG
+    expect(document.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('applies the aria-label from i18n', () => {
+    render(<LanguageSelector />);
+    expect(screen.getByLabelText('Selecionar idioma')).toBeInTheDocument();
+  });
+
+  it('renders nothing when monolingual (default behavior)', () => {
+    useLanguageMock.mockReturnValue({
+      language: 'en',
+      setLanguage: vi.fn(),
+      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
+      isMonolingual: true,
+    });
+    const { container } = render(<LanguageSelector />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders even when monolingual if showWhenMonolingual is true', () => {
+    useLanguageMock.mockReturnValue({
+      language: 'en',
+      setLanguage: vi.fn(),
+      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
+      isMonolingual: true,
+    });
+    render(<LanguageSelector showWhenMonolingual />);
+    expect(screen.getByText('English')).toBeInTheDocument();
+  });
+
+  it('shows custom languages added via availableLanguages', () => {
+    useLanguageMock.mockReturnValue({
+      language: 'fr',
+      setLanguage: vi.fn(),
+      availableLanguages: [
+        ...defaultLanguages,
+        { code: 'fr', label: 'Français', shortLabel: 'FR' },
+      ],
+      isMonolingual: false,
+    });
+    render(<LanguageSelector />);
+    expect(screen.getByText('Français')).toBeInTheDocument();
+  });
+});

package/components/brand/theme-toggle/ThemeToggle.tsx

@@ -1,70 +1,74 @@
-import React from 'react';
-import { Sun, Moon } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { Button } from '../../ui/button';
-import { useTheme } from '../../../contexts/ThemeContext';
-
-interface ThemeToggleProps {
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'outline' | 'ghost';
-  className?: string;
-  showLabel?: boolean;
-}
-
-export function ThemeToggle({
-  size = 'md',
-  variant = 'ghost',
-  className = '',
-  showLabel = false,
-}: ThemeToggleProps) {
-  const { isDark, toggleTheme } = useTheme();
-  const { t } = useTranslation();
-
-  const getSizeClasses = () => {
-    switch (size) {
-      case 'sm':
-        return 'h-8 w-8 p-0';
-      case 'lg':
-        return 'h-12 w-12 p-0';
-      default:
-        return 'h-9 w-9 p-0';
-    }
-  };
-
-  const getIconSize = () => {
-    switch (size) {
-      case 'sm':
-        return 'h-3 w-3';
-      case 'lg':
-        return 'h-6 w-6';
-      default:
-        return 'h-4 w-4';
-    }
-  };
-
-  const buttonClasses = showLabel ? 'flex items-center gap-2 px-3 py-2' : getSizeClasses();
-
-  return (
-    <Button
-      variant={variant}
-      onClick={toggleTheme}
-      className={`group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`}
-      title={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
-      aria-label={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
-    >
-      {isDark ? (
-        <>
-          <Sun
-            className={`${getIconSize()} text-primary dark:text-amber-400 group-hover:opacity-80`}
-          />
-          {showLabel && <span>{t('themeToggle.lightMode')}</span>}
-        </>
-      ) : (
-        <>
-          <Moon className={`${getIconSize()} text-muted-foreground group-hover:text-foreground`} />
-          {showLabel && <span>{t('themeToggle.darkMode')}</span>}
-        </>
-      )}
-    </Button>
-  );
-}
+import React from 'react';
+import { Sun, Moon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../ui/button';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+interface ThemeToggleProps {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline' | 'ghost';
+  className?: string;
+  showLabel?: boolean;
+}
+
+export function ThemeToggle({
+  size = 'md',
+  variant = 'ghost',
+  className = '',
+  showLabel = false,
+}: ThemeToggleProps) {
+  const { isDark, toggleTheme, disableDarkMode } = useTheme();
+  const { t } = useTranslation();
+
+  if (disableDarkMode) {
+    return null;
+  }
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'h-8 w-8 p-0';
+      case 'lg':
+        return 'h-12 w-12 p-0';
+      default:
+        return 'h-9 w-9 p-0';
+    }
+  };
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 'h-3 w-3';
+      case 'lg':
+        return 'h-6 w-6';
+      default:
+        return 'h-4 w-4';
+    }
+  };
+
+  const buttonClasses = showLabel ? 'flex items-center gap-2 px-3 py-2' : getSizeClasses();
+
+  return (
+    <Button
+      variant={variant}
+      onClick={toggleTheme}
+      className={`group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`}
+      title={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
+      aria-label={isDark ? t('themeToggle.switchToLight') : t('themeToggle.switchToDark')}
+    >
+      {isDark ? (
+        <>
+          <Sun
+            className={`${getIconSize()} text-primary dark:text-amber-400 group-hover:opacity-80`}
+          />
+          {showLabel && <span>{t('themeToggle.lightMode')}</span>}
+        </>
+      ) : (
+        <>
+          <Moon className={`${getIconSize()} text-muted-foreground group-hover:text-foreground`} />
+          {showLabel && <span>{t('themeToggle.darkMode')}</span>}
+        </>
+      )}
+    </Button>
+  );
+}

package/components/brand/xertica-provider/XerticaProvider.tsx

@@ -1,112 +1,109 @@
-import React from 'react';
-import { ApiKeyProvider } from '../../../contexts/ApiKeyContext';
-import { AssistenteProvider } from '../../../contexts/AssistenteContext';
-import { BrandColorsProvider } from '../../../contexts/BrandColorsContext';
-import {
-  LanguageProvider,
-  type Language,
-  type LanguageDefinition,
-} from '../../../contexts/LanguageContext';
-import { LayoutProvider } from '../../../contexts/LayoutContext';
-import { ThemeProvider } from '../../../contexts/ThemeContext';
-import { GoogleMapsLoaderProvider } from '../../ui/google-maps-loader';
-import { Toaster } from '../../ui/sonner';
-import { TooltipProvider } from '../../ui/tooltip';
-
-/**
- * Props for the XerticaProvider component.
- */
-interface XerticaProviderProps {
-  /** The application content to be wrapped by the providers */
-  children: React.ReactNode;
-  /** Optional Gemini API Key for AI features */
-  apiKey?: string;
-  /** Optional Google Maps API Key for map features */
-  googleMapsApiKey?: string;
-  /** Default theme name for branding ('default', 'dark', etc.) */
-  defaultBrandTheme?: string;
-  /** Primary brand color hex value */
-  primaryColor?: string;
-  /** Whether to use custom theme tokens from CSS */
-  useCustomTokens?: boolean;
-  /** Whether to completely disable dark mode support */
-  disableDarkMode?: boolean;
-  /**
-   * List of languages available to this app. Defaults to the built-in
-   * `pt-BR`, `en`, and `es`. Pass a single-element array for a monolingual
-   * app (the `LanguageSelector` will auto-hide). Pass extra entries with
-   * `resources` to add new locales without editing `i18n.ts`.
-   *
-   * @example
-   * ```tsx
-   * // Monolingual English app — no language picker rendered
-   * <XerticaProvider availableLanguages={[{ code: 'en', label: 'English' }]}>
-   * ```
-   *
-   * @example
-   * ```tsx
-   * // Add French alongside built-in locales
-   * import fr from './locales/fr.json';
-   * import { DEFAULT_LANGUAGES } from 'xertica-ui';
-   *
-   * <XerticaProvider 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`. */
-  defaultLanguage?: Language;
-}
-
-/**
- * Universal Context Provider for Xertica UI.
- *
- * @description
- * This component aggregates all necessary context providers. It should be placed at the
- * root of your application, ideally inside the App component.
- */
-export function XerticaProvider({
-  children,
-  apiKey,
-  googleMapsApiKey,
-  defaultBrandTheme,
-  primaryColor,
-  useCustomTokens,
-  disableDarkMode,
-  availableLanguages,
-  defaultLanguage,
-}: XerticaProviderProps) {
-  return (
-    <ThemeProvider disableDarkMode={disableDarkMode}>
-      <BrandColorsProvider
-        defaultTheme={defaultBrandTheme}
-        primaryColor={primaryColor}
-        useCustomTokens={useCustomTokens}
-      >
-        <LanguageProvider
-          availableLanguages={availableLanguages}
-          defaultLanguage={defaultLanguage}
-        >
-          <ApiKeyProvider
-            initialApiKey={apiKey}
-            initialGeminiApiKey={apiKey}
-            initialGoogleMapsApiKey={googleMapsApiKey}
-          >
-            <GoogleMapsLoaderProvider apiKey={googleMapsApiKey}>
-              <AssistenteProvider>
-                <LayoutProvider>
-                  <TooltipProvider>
-                    {children}
-                    <Toaster position="top-right" richColors />
-                  </TooltipProvider>
-                </LayoutProvider>
-              </AssistenteProvider>
-            </GoogleMapsLoaderProvider>
-          </ApiKeyProvider>
-        </LanguageProvider>
-      </BrandColorsProvider>
-    </ThemeProvider>
-  );
-}
+import React from 'react';
+import { ApiKeyProvider } from '../../../contexts/ApiKeyContext';
+import { AssistenteProvider } from '../../../contexts/AssistenteContext';
+import { BrandColorsProvider } from '../../../contexts/BrandColorsContext';
+import {
+  LanguageProvider,
+  type Language,
+  type LanguageDefinition,
+} from '../../../contexts/LanguageContext';
+import { LayoutProvider } from '../../../contexts/LayoutContext';
+import { ThemeProvider } from '../../../contexts/ThemeContext';
+import { GoogleMapsLoaderProvider } from '../../ui/google-maps-loader';
+import { Toaster } from '../../ui/sonner';
+import { TooltipProvider } from '../../ui/tooltip';
+
+/**
+ * Props for the XerticaProvider component.
+ */
+interface XerticaProviderProps {
+  /** The application content to be wrapped by the providers */
+  children: React.ReactNode;
+  /** Optional Gemini API Key for AI features */
+  apiKey?: string;
+  /** Optional Google Maps API Key for map features */
+  googleMapsApiKey?: string;
+  /** Default theme name for branding ('default', 'dark', etc.) */
+  defaultBrandTheme?: string;
+  /** Primary brand color hex value */
+  primaryColor?: string;
+  /** Whether to use custom theme tokens from CSS */
+  useCustomTokens?: boolean;
+  /** Whether to completely disable dark mode support */
+  disableDarkMode?: boolean;
+  /**
+   * List of languages available to this app. Defaults to the built-in
+   * `pt-BR`, `en`, and `es`. Pass a single-element array for a monolingual
+   * app (the `LanguageSelector` will auto-hide). Pass extra entries with
+   * `resources` to add new locales without editing `i18n.ts`.
+   *
+   * @example
+   * ```tsx
+   * // Monolingual English app — no language picker rendered
+   * <XerticaProvider availableLanguages={[{ code: 'en', label: 'English' }]}>
+   * ```
+   *
+   * @example
+   * ```tsx
+   * // Add French alongside built-in locales
+   * import fr from './locales/fr.json';
+   * import { DEFAULT_LANGUAGES } from 'xertica-ui';
+   *
+   * <XerticaProvider 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`. */
+  defaultLanguage?: Language;
+}
+
+/**
+ * Universal Context Provider for Xertica UI.
+ *
+ * @description
+ * This component aggregates all necessary context providers. It should be placed at the
+ * root of your application, ideally inside the App component.
+ */
+export function XerticaProvider({
+  children,
+  apiKey,
+  googleMapsApiKey,
+  defaultBrandTheme,
+  primaryColor,
+  useCustomTokens,
+  disableDarkMode,
+  availableLanguages,
+  defaultLanguage,
+}: XerticaProviderProps) {
+  return (
+    <ThemeProvider disableDarkMode={disableDarkMode}>
+      <BrandColorsProvider
+        defaultTheme={defaultBrandTheme}
+        primaryColor={primaryColor}
+        useCustomTokens={useCustomTokens}
+      >
+        <LanguageProvider availableLanguages={availableLanguages} defaultLanguage={defaultLanguage}>
+          <ApiKeyProvider
+            initialApiKey={apiKey}
+            initialGeminiApiKey={apiKey}
+            initialGoogleMapsApiKey={googleMapsApiKey}
+          >
+            <GoogleMapsLoaderProvider apiKey={googleMapsApiKey}>
+              <AssistenteProvider>
+                <LayoutProvider>
+                  <TooltipProvider>
+                    {children}
+                    <Toaster position="top-right" richColors />
+                  </TooltipProvider>
+                </LayoutProvider>
+              </AssistenteProvider>
+            </GoogleMapsLoaderProvider>
+          </ApiKeyProvider>
+        </LanguageProvider>
+      </BrandColorsProvider>
+    </ThemeProvider>
+  );
+}