xertica-ui 2.4.0 → 2.5.0

package/contexts/AuthContext.tsx

@@ -1,121 +1,121 @@
-import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Types
-// ─────────────────────────────────────────────────────────────────────────────
-
-export interface AuthUser {
-  email: string;
-  name?: string;
-  avatar?: string;
-}
-
-interface AuthContextValue {
-  /** Currently authenticated user, or null when logged out */
-  user: AuthUser | null;
-  /** True while the initial session hydration from localStorage is pending */
-  isLoading: boolean;
-  /** Attempt login — returns true on success, false on invalid credentials */
-  login: (email: string, password: string) => boolean;
-  /** Clear session and redirect to /login */
-  logout: () => void;
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Context
-// ─────────────────────────────────────────────────────────────────────────────
-
-const AuthContext = createContext<AuthContextValue | null>(null);
-
-const STORAGE_KEY = 'xertica_user';
-const AUTH_PATHS = ['/login', '/forgot-password', '/verify-email', '/reset-password'];
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Provider
-// ─────────────────────────────────────────────────────────────────────────────
-
-/**
- * `AuthProvider` — manages authentication state for the devops app.
- *
- * Must be rendered **inside** `<BrowserRouter>` so that `useNavigate` is available.
- * Wrap your `<Routes>` tree with this provider to give all pages access to
- * `user`, `login`, and `logout` via `useAuth()` without prop-drilling.
- *
- * @example
- * ```tsx
- * <Router>
- *   <AuthProvider>
- *     <AppRoutes />
- *   </AuthProvider>
- * </Router>
- * ```
- */
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [user, setUser] = useState<AuthUser | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const navigate = useNavigate();
-
-  // Hydrate session from localStorage on mount
-  useEffect(() => {
-    try {
-      const raw = localStorage.getItem(STORAGE_KEY);
-      if (raw) setUser(JSON.parse(raw));
-    } catch {
-      localStorage.removeItem(STORAGE_KEY);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  // Redirect authenticated users away from auth-only pages
-  useEffect(() => {
-    if (!isLoading && user && AUTH_PATHS.includes(window.location.pathname)) {
-      navigate('/home', { replace: true });
-    }
-  }, [isLoading, user, navigate]);
-
-  const login = useCallback(
-    (email: string, password: string): boolean => {
-      if (!email.trim() || !password.trim()) return false;
-      const userData: AuthUser = { email };
-      setUser(userData);
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(userData));
-      navigate('/home');
-      return true;
-    },
-    [navigate]
-  );
-
-  const logout = useCallback(() => {
-    setUser(null);
-    localStorage.removeItem(STORAGE_KEY);
-    navigate('/login');
-  }, [navigate]);
-
-  return (
-    <AuthContext.Provider value={{ user, isLoading, login, logout }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Hook
-// ─────────────────────────────────────────────────────────────────────────────
-
-/**
- * `useAuth` — consume authentication state anywhere inside `<AuthProvider>`.
- *
- * @throws if called outside `<AuthProvider>`
- *
- * @example
- * ```tsx
- * const { user, logout } = useAuth();
- * ```
- */
-export function useAuth(): AuthContextValue {
-  const ctx = useContext(AuthContext);
-  if (!ctx) throw new Error('useAuth must be used within <AuthProvider>');
-  return ctx;
-}
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface AuthUser {
+  email: string;
+  name?: string;
+  avatar?: string;
+}
+
+interface AuthContextValue {
+  /** Currently authenticated user, or null when logged out */
+  user: AuthUser | null;
+  /** True while the initial session hydration from localStorage is pending */
+  isLoading: boolean;
+  /** Attempt login — returns true on success, false on invalid credentials */
+  login: (email: string, password: string) => boolean;
+  /** Clear session and redirect to /login */
+  logout: () => void;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+const STORAGE_KEY = 'xertica_user';
+const AUTH_PATHS = ['/login', '/forgot-password', '/verify-email', '/reset-password'];
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * `AuthProvider` — manages authentication state for the devops app.
+ *
+ * Must be rendered **inside** `<BrowserRouter>` so that `useNavigate` is available.
+ * Wrap your `<Routes>` tree with this provider to give all pages access to
+ * `user`, `login`, and `logout` via `useAuth()` without prop-drilling.
+ *
+ * @example
+ * ```tsx
+ * <Router>
+ *   <AuthProvider>
+ *     <AppRoutes />
+ *   </AuthProvider>
+ * </Router>
+ * ```
+ */
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+
+  // Hydrate session from localStorage on mount
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (raw) setUser(JSON.parse(raw));
+    } catch {
+      localStorage.removeItem(STORAGE_KEY);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Redirect authenticated users away from auth-only pages
+  useEffect(() => {
+    if (!isLoading && user && AUTH_PATHS.includes(window.location.pathname)) {
+      navigate('/home', { replace: true });
+    }
+  }, [isLoading, user, navigate]);
+
+  const login = useCallback(
+    (email: string, password: string): boolean => {
+      if (!email.trim() || !password.trim()) return false;
+      const userData: AuthUser = { email };
+      setUser(userData);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(userData));
+      navigate('/home');
+      return true;
+    },
+    [navigate]
+  );
+
+  const logout = useCallback(() => {
+    setUser(null);
+    localStorage.removeItem(STORAGE_KEY);
+    navigate('/login');
+  }, [navigate]);
+
+  return (
+    <AuthContext.Provider value={{ user, isLoading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Hook
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * `useAuth` — consume authentication state anywhere inside `<AuthProvider>`.
+ *
+ * @throws if called outside `<AuthProvider>`
+ *
+ * @example
+ * ```tsx
+ * const { user, logout } = useAuth();
+ * ```
+ */
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used within <AuthProvider>');
+  return ctx;
+}

package/contexts/BrandColorsContext.tsx

@@ -178,20 +178,51 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
       `--gradient-diagonal: linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
     );
 
-    // Inject into head as a style tag rather than inline on HTML element
-    // Usamos prepend em vez de appendChild para garantir que a injeção seja
-    // lida ANTES de qualquer arquivo CSS estático (como tokens.css), garantindo que
-    // as modificações feitas pelo desenvolvedor em :root tenham prioridade natural de cascata.
+    // 7. Surface colors for dark mode (tinted toward the theme hue)
+    //    Only applied when dark surface tokens exist on the theme.
+    const darkSurfaceVars: string[] = [];
+    if (colors.darkBackground) {
+      darkSurfaceVars.push(`--background: ${colors.darkBackground}`);
+      darkSurfaceVars.push(`--card: ${colors.darkCard}`);
+      darkSurfaceVars.push(`--popover: ${colors.darkCard}`);
+      darkSurfaceVars.push(`--secondary: ${colors.darkMuted}`);
+      darkSurfaceVars.push(`--muted: ${colors.darkMuted}`);
+      darkSurfaceVars.push(`--accent: ${colors.darkMuted}`);
+      darkSurfaceVars.push(`--border: ${colors.darkBorder}`);
+      darkSurfaceVars.push(`--input: ${colors.darkMuted}`);
+      darkSurfaceVars.push(`--input-background: ${colors.darkMuted}`);
+    }
+
+    // Apply primary-related tokens directly as inline styles on <html>.
+    // Inline styles have the highest possible specificity and always win over
+    // any stylesheet rule, regardless of order or selector specificity.
+    cssVars.forEach(declaration => {
+      const eqIdx = declaration.indexOf(':');
+      if (eqIdx === -1) return;
+      const prop = declaration.substring(0, eqIdx).trim();
+      const val = declaration.substring(eqIdx + 1).trim();
+      root.style.setProperty(prop, val); // `root` is document.documentElement, declared at line 79
+    });
+
+    // Surface tokens (background, card, muted, etc.) are injected via a style
+    // tag appended last in <head> so they win the cascade for their selectors.
     const styleId = 'xertica-brand-colors-injection';
     let styleEl = document.getElementById(styleId);
     if (!styleEl) {
       styleEl = document.createElement('style');
       styleEl.id = styleId;
-      document.head.prepend(styleEl);
+      document.head.appendChild(styleEl);
+    } else {
+      document.head.appendChild(styleEl);
     }
-    styleEl.innerHTML = `:root {
-  ${cssVars.join(';\n  ')};
-}`;
+
+    const darkSurfaceBlock =
+      darkSurfaceVars.length > 0
+        ? `\n:root[data-mode='dark'], .dark {\n  ${darkSurfaceVars.join(';\n  ')};\n}`
+        : '';
+
+    // The style tag handles only the surface tokens that vary per theme in dark mode.
+    styleEl.innerHTML = darkSurfaceBlock.trim();
   }, [colors, currentTheme, radius, useCustomTokens]);
 
   // Aplicar cores quando elas mudarem

package/contexts/LanguageContext.test.tsx

@@ -1,121 +1,121 @@
-import { renderHook, act } from '@testing-library/react';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import {
-  LanguageProvider,
-  useLanguage,
-  DEFAULT_LANGUAGES,
-  type LanguageDefinition,
-} from './LanguageContext';
-import React from 'react';
-
-function makeWrapper(props?: Partial<React.ComponentProps<typeof LanguageProvider>>) {
-  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
-  return ({ children }: { children: React.ReactNode }) => (
-    <QueryClientProvider client={queryClient}>
-      <LanguageProvider {...props}>{children}</LanguageProvider>
-    </QueryClientProvider>
-  );
-}
-
-describe('LanguageContext', () => {
-  beforeEach(() => {
-    window.localStorage.clear();
-  });
-
-  describe('default behavior', () => {
-    it('provides default language (pt-BR)', () => {
-      const { result } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
-      expect(result.current.language).toBe('pt-BR');
-    });
-
-    it('exposes the default three languages', () => {
-      const { result } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
-      expect(result.current.availableLanguages).toHaveLength(3);
-      expect(result.current.availableLanguages.map(l => l.code)).toEqual(['pt-BR', 'en', 'es']);
-    });
-
-    it('is not monolingual when using defaults', () => {
-      const { result } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
-      expect(result.current.isMonolingual).toBe(false);
-    });
-
-    it('updates language', () => {
-      const { result } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
-      act(() => result.current.setLanguage('en'));
-      expect(result.current.language).toBe('en');
-    });
-  });
-
-  describe('monolingual mode', () => {
-    const englishOnly: LanguageDefinition[] = [{ code: 'en', label: 'English' }];
-
-    it('reports isMonolingual = true with a single language', () => {
-      const { result } = renderHook(() => useLanguage(), {
-        wrapper: makeWrapper({ availableLanguages: englishOnly }),
-      });
-      expect(result.current.isMonolingual).toBe(true);
-      expect(result.current.availableLanguages).toEqual(englishOnly);
-    });
-
-    it('defaults to the only language available', () => {
-      const { result } = renderHook(() => useLanguage(), {
-        wrapper: makeWrapper({ availableLanguages: englishOnly }),
-      });
-      expect(result.current.language).toBe('en');
-    });
-  });
-
-  describe('custom languages', () => {
-    it('accepts extra languages beyond the defaults', () => {
-      const extended: LanguageDefinition[] = [
-        ...DEFAULT_LANGUAGES,
-        { code: 'fr', label: 'Français', shortLabel: 'FR' },
-      ];
-      const { result } = renderHook(() => useLanguage(), {
-        wrapper: makeWrapper({ availableLanguages: extended }),
-      });
-      expect(result.current.availableLanguages).toHaveLength(4);
-      act(() => result.current.setLanguage('fr'));
-      expect(result.current.language).toBe('fr');
-    });
-
-    it('ignores attempts to switch to a language not in the list', () => {
-      const { result } = renderHook(() => useLanguage(), {
-        wrapper: makeWrapper({ availableLanguages: [{ code: 'en', label: 'English' }] }),
-      });
-      act(() => result.current.setLanguage('xx-XX' as any));
-      // language should remain 'en' (the only valid option)
-      expect(result.current.language).toBe('en');
-    });
-  });
-
-  describe('defaultLanguage prop', () => {
-    it('respects an explicit defaultLanguage', () => {
-      const { result } = renderHook(() => useLanguage(), {
-        wrapper: makeWrapper({ defaultLanguage: 'es' }),
-      });
-      expect(result.current.language).toBe('es');
-    });
-  });
-
-  describe('error handling', () => {
-    it('throws when availableLanguages is an empty array', () => {
-      // Suppress React's error logging for this expected throw
-      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      expect(() =>
-        renderHook(() => useLanguage(), { wrapper: makeWrapper({ availableLanguages: [] }) })
-      ).toThrow(/availableLanguages.*cannot be empty/);
-      consoleErrorSpy.mockRestore();
-    });
-  });
-
-  describe('reference stability', () => {
-    it('keeps setLanguage stable across re-renders with the same languages', () => {
-      const { result, rerender } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
-      const firstSetLanguage = result.current.setLanguage;
-      rerender();
-      expect(result.current.setLanguage).toBe(firstSetLanguage);
-    });
-  });
-});
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  LanguageProvider,
+  useLanguage,
+  DEFAULT_LANGUAGES,
+  type LanguageDefinition,
+} from './LanguageContext';
+import React from 'react';
+
+function makeWrapper(props?: Partial<React.ComponentProps<typeof LanguageProvider>>) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <LanguageProvider {...props}>{children}</LanguageProvider>
+    </QueryClientProvider>
+  );
+}
+
+describe('LanguageContext', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  describe('default behavior', () => {
+    it('provides default language (pt-BR)', () => {
+      const { result } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
+      expect(result.current.language).toBe('pt-BR');
+    });
+
+    it('exposes the default three languages', () => {
+      const { result } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
+      expect(result.current.availableLanguages).toHaveLength(3);
+      expect(result.current.availableLanguages.map(l => l.code)).toEqual(['pt-BR', 'en', 'es']);
+    });
+
+    it('is not monolingual when using defaults', () => {
+      const { result } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
+      expect(result.current.isMonolingual).toBe(false);
+    });
+
+    it('updates language', () => {
+      const { result } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
+      act(() => result.current.setLanguage('en'));
+      expect(result.current.language).toBe('en');
+    });
+  });
+
+  describe('monolingual mode', () => {
+    const englishOnly: LanguageDefinition[] = [{ code: 'en', label: 'English' }];
+
+    it('reports isMonolingual = true with a single language', () => {
+      const { result } = renderHook(() => useLanguage(), {
+        wrapper: makeWrapper({ availableLanguages: englishOnly }),
+      });
+      expect(result.current.isMonolingual).toBe(true);
+      expect(result.current.availableLanguages).toEqual(englishOnly);
+    });
+
+    it('defaults to the only language available', () => {
+      const { result } = renderHook(() => useLanguage(), {
+        wrapper: makeWrapper({ availableLanguages: englishOnly }),
+      });
+      expect(result.current.language).toBe('en');
+    });
+  });
+
+  describe('custom languages', () => {
+    it('accepts extra languages beyond the defaults', () => {
+      const extended: LanguageDefinition[] = [
+        ...DEFAULT_LANGUAGES,
+        { code: 'fr', label: 'Français', shortLabel: 'FR' },
+      ];
+      const { result } = renderHook(() => useLanguage(), {
+        wrapper: makeWrapper({ availableLanguages: extended }),
+      });
+      expect(result.current.availableLanguages).toHaveLength(4);
+      act(() => result.current.setLanguage('fr'));
+      expect(result.current.language).toBe('fr');
+    });
+
+    it('ignores attempts to switch to a language not in the list', () => {
+      const { result } = renderHook(() => useLanguage(), {
+        wrapper: makeWrapper({ availableLanguages: [{ code: 'en', label: 'English' }] }),
+      });
+      act(() => result.current.setLanguage('xx-XX' as any));
+      // language should remain 'en' (the only valid option)
+      expect(result.current.language).toBe('en');
+    });
+  });
+
+  describe('defaultLanguage prop', () => {
+    it('respects an explicit defaultLanguage', () => {
+      const { result } = renderHook(() => useLanguage(), {
+        wrapper: makeWrapper({ defaultLanguage: 'es' }),
+      });
+      expect(result.current.language).toBe('es');
+    });
+  });
+
+  describe('error handling', () => {
+    it('throws when availableLanguages is an empty array', () => {
+      // Suppress React's error logging for this expected throw
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      expect(() =>
+        renderHook(() => useLanguage(), { wrapper: makeWrapper({ availableLanguages: [] }) })
+      ).toThrow(/availableLanguages.*cannot be empty/);
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('reference stability', () => {
+    it('keeps setLanguage stable across re-renders with the same languages', () => {
+      const { result, rerender } = renderHook(() => useLanguage(), { wrapper: makeWrapper() });
+      const firstSetLanguage = result.current.setLanguage;
+      rerender();
+      expect(result.current.setLanguage).toBe(firstSetLanguage);
+    });
+  });
+});