@etus/bhono-app 0.1.1

package/templates/base/src/client/hooks/__tests__/use-theme.test.tsx

@@ -0,0 +1,172 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"
+import { renderHook, act } from "@testing-library/react"
+import type { ReactNode } from "react"
+import { ThemeProvider, useTheme } from "../use-theme"
+
+// Mock localStorage
+const localStorageMock = {
+  getItem: vi.fn(),
+  setItem: vi.fn(),
+  removeItem: vi.fn(),
+  clear: vi.fn(),
+}
+Object.defineProperty(window, "localStorage", { value: localStorageMock })
+
+// Mock matchMedia
+let mediaQueryChangeHandler: ((e: MediaQueryListEvent) => void) | null = null
+const mockMatchMedia = vi.fn().mockImplementation((query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  addEventListener: vi.fn((event: string, handler: (e: MediaQueryListEvent) => void) => {
+    if (event === "change") {
+      mediaQueryChangeHandler = handler
+    }
+  }),
+  removeEventListener: vi.fn(),
+  dispatchEvent: vi.fn(),
+}))
+Object.defineProperty(window, "matchMedia", { value: mockMatchMedia })
+
+function Wrapper({ children }: { children: ReactNode }) {
+  return <ThemeProvider>{children}</ThemeProvider>
+}
+
+describe("useTheme", () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    localStorageMock.getItem.mockReturnValue(null)
+    mediaQueryChangeHandler = null
+    document.documentElement.classList.remove("light", "dark")
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("throws error when used outside ThemeProvider", () => {
+    // Suppress console.error for this test
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {})
+
+    expect(() => {
+      renderHook(() => useTheme())
+    }).toThrow("useTheme must be used within a ThemeProvider")
+
+    consoleSpy.mockRestore()
+  })
+
+  it("returns theme context when used within ThemeProvider", () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })
+
+    expect(result.current.theme).toBe("system")
+    expect(result.current.resolvedTheme).toBe("light")
+    expect(typeof result.current.setTheme).toBe("function")
+  })
+
+  it("applies theme class to document on mount", () => {
+    renderHook(() => useTheme(), { wrapper: Wrapper })
+
+    expect(document.documentElement.classList.contains("light")).toBe(true)
+  })
+
+  it("reads stored theme from localStorage", () => {
+    localStorageMock.getItem.mockReturnValue("dark")
+
+    const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })
+
+    expect(result.current.theme).toBe("dark")
+    expect(result.current.resolvedTheme).toBe("dark")
+  })
+
+  it("setTheme updates theme and persists to localStorage", () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })
+
+    act(() => {
+      result.current.setTheme("dark")
+    })
+
+    expect(result.current.theme).toBe("dark")
+    expect(localStorageMock.setItem).toHaveBeenCalledWith("theme", "dark")
+  })
+
+  it("updates resolved theme when system theme changes", () => {
+    // Start with system theme preference
+    localStorageMock.getItem.mockReturnValue("system")
+
+    const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })
+
+    expect(result.current.theme).toBe("system")
+    expect(result.current.resolvedTheme).toBe("light") // matchMedia returns false by default
+
+    // Simulate system theme change to dark
+    act(() => {
+      if (mediaQueryChangeHandler) {
+        mediaQueryChangeHandler({ matches: true } as MediaQueryListEvent)
+      }
+    })
+
+    expect(result.current.resolvedTheme).toBe("dark")
+
+    // Simulate system theme change back to light
+    act(() => {
+      if (mediaQueryChangeHandler) {
+        mediaQueryChangeHandler({ matches: false } as MediaQueryListEvent)
+      }
+    })
+
+    expect(result.current.resolvedTheme).toBe("light")
+  })
+
+  it("ignores system theme changes when explicit theme is set", () => {
+    localStorageMock.getItem.mockReturnValue("light")
+
+    const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })
+
+    expect(result.current.theme).toBe("light")
+    expect(result.current.resolvedTheme).toBe("light")
+
+    // Simulate system theme change to dark
+    act(() => {
+      if (mediaQueryChangeHandler) {
+        mediaQueryChangeHandler({ matches: true } as MediaQueryListEvent)
+      }
+    })
+
+    // Should still be light because explicit theme is set
+    expect(result.current.resolvedTheme).toBe("light")
+  })
+
+  it("applies dark class when dark theme is set", () => {
+    localStorageMock.getItem.mockReturnValue("dark")
+
+    renderHook(() => useTheme(), { wrapper: Wrapper })
+
+    expect(document.documentElement.classList.contains("dark")).toBe(true)
+    expect(document.documentElement.classList.contains("light")).toBe(false)
+  })
+
+  it("handles invalid stored theme gracefully", () => {
+    localStorageMock.getItem.mockReturnValue("invalid-theme")
+
+    const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })
+
+    // Should default to system
+    expect(result.current.theme).toBe("system")
+  })
+
+  it("removes previous theme class when switching themes", () => {
+    const { result } = renderHook(() => useTheme(), { wrapper: Wrapper })
+
+    // Start with light (default)
+    expect(document.documentElement.classList.contains("light")).toBe(true)
+
+    act(() => {
+      result.current.setTheme("dark")
+    })
+
+    expect(document.documentElement.classList.contains("dark")).toBe(true)
+    expect(document.documentElement.classList.contains("light")).toBe(false)
+  })
+})

package/templates/base/src/client/hooks/use-auth.ts

@@ -0,0 +1,53 @@
+// src/client/hooks/use-auth.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'sonner'
+import type { AuthUser } from '@shared/types'
+
+interface AuthResponse {
+  user: AuthUser
+}
+
+async function fetchMe(): Promise<AuthResponse | null> {
+  const res = await fetch('/auth/me', { credentials: 'include' })
+  if (!res.ok) return null
+  return res.json()
+}
+
+async function logout(): Promise<void> {
+  const res = await fetch('/auth/logout', { method: 'POST', credentials: 'include' })
+  if (!res.ok) {
+    throw new Error('Failed to logout')
+  }
+}
+
+export function useAuth() {
+  const queryClient = useQueryClient()
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['auth', 'me'],
+    queryFn: fetchMe,
+    retry: false,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  })
+
+  const logoutMutation = useMutation({
+    mutationFn: logout,
+    onSuccess: () => {
+      queryClient.setQueryData(['auth', 'me'], null)
+      toast.success('Logged out successfully')
+      // Redirect to login page
+      window.location.href = '/login'
+    },
+    onError: () => {
+      toast.error('Failed to logout. Please try again.')
+    },
+  })
+
+  return {
+    user: data?.user ?? null,
+    isLoading,
+    isAuthenticated: !!data?.user,
+    logout: logoutMutation.mutate,
+    isLoggingOut: logoutMutation.isPending,
+  }
+}

package/templates/base/src/client/hooks/use-theme.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react'
+import { createContext, use, useEffect, useState, useCallback } from 'react'
+
+type Theme = 'light' | 'dark' | 'system'
+
+interface ThemeContextValue {
+  theme: Theme
+  resolvedTheme: 'light' | 'dark'
+  setTheme: (theme: Theme) => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | undefined>(undefined)
+
+const STORAGE_KEY = 'theme'
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+function getStoredTheme(): Theme {
+  if (typeof window === 'undefined') return 'system'
+  const stored = localStorage.getItem(STORAGE_KEY)
+  if (stored === 'light' || stored === 'dark' || stored === 'system') {
+    return stored
+  }
+  return 'system'
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>(() => getStoredTheme())
+  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(() => getSystemTheme())
+
+  // Compute resolved theme from preference and system theme
+  const resolvedTheme = theme === 'system' ? systemTheme : theme
+
+  // Apply theme class to document
+  const applyThemeClass = useCallback((resolved: 'light' | 'dark') => {
+    const root = document.documentElement
+    root.classList.remove('light', 'dark')
+    root.classList.add(resolved)
+  }, [])
+
+  const handleSetTheme = useCallback((newTheme: Theme) => {
+    setTheme(newTheme)
+    localStorage.setItem(STORAGE_KEY, newTheme)
+  }, [])
+
+  // Apply theme class on mount and when resolved theme changes
+  useEffect(() => {
+    applyThemeClass(resolvedTheme)
+  }, [resolvedTheme, applyThemeClass])
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = (e: MediaQueryListEvent) => {
+      setSystemTheme(e.matches ? 'dark' : 'light')
+    }
+
+    mediaQuery.addEventListener('change', handleChange)
+    return () => { mediaQuery.removeEventListener('change', handleChange) }
+  }, [])
+
+  return (
+    <ThemeContext value={{ theme, resolvedTheme, setTheme: handleSetTheme }}>
+      {children}
+    </ThemeContext>
+  )
+}
+
+export function useTheme() {
+  const context = use(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}