refactor: remove ChakraUI components; implement custom components and styles with Tailwind CSS; add Roboto Condensed font

Author: artemkdr

client/src/_foundation/components/color-mode-switcher/index.test.tsx

@@ -0,0 +1,54 @@
+import useColorMode from '@/_foundation/hooks/useColorMode';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { vi } from 'vitest';
+import { ColorModeSwitcher } from './index';
+
+vi.mock('@/_foundation/hooks/useColorMode');
+
+describe('ColorModeSwitcher', () => {
+    it('renders the button', () => {
+        vi.mocked(useColorMode).mockReturnValue({
+            colorMode: 'light',
+            toggleColorMode: vi.fn(),
+        });
+
+        render(<ColorModeSwitcher />);
+        const button = screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+    });
+
+    it('displays the correct icon based on color mode', () => {
+        vi.mocked(useColorMode).mockReturnValue({
+            colorMode: 'light',
+            toggleColorMode: vi.fn(),
+        });
+
+        render(<ColorModeSwitcher />);
+        expect(
+            screen.getByLabelText('Switch to dark mode')
+        ).toBeInTheDocument();
+
+        vi.mocked(useColorMode).mockReturnValue({
+            colorMode: 'dark',
+            toggleColorMode: vi.fn(),
+        });
+
+        render(<ColorModeSwitcher />);
+        expect(
+            screen.getByLabelText('Switch to light mode')
+        ).toBeInTheDocument();
+    });
+
+    it('calls toggleColorMode on button click', () => {
+        const toggleColorMode = vi.fn();
+        vi.mocked(useColorMode).mockReturnValue({
+            colorMode: 'light',
+            toggleColorMode,
+        });
+
+        render(<ColorModeSwitcher />);
+        const button = screen.getByRole('button');
+        fireEvent.click(button);
+        expect(toggleColorMode).toHaveBeenCalledTimes(1);
+    });
+});

client/src/_foundation/components/color-mode-switcher/index.tsx

@@ -0,0 +1,22 @@
+import useColorMode from '@/_foundation/hooks/useColorMode';
+import { FaMoon } from 'react-icons/fa';
+import { MdSunny } from 'react-icons/md';
+
+export const ColorModeSwitcher: React.FC<
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+> = (props) => {
+    const { colorMode, toggleColorMode } = useColorMode();
+
+    return (
+        <button
+            className="text-current text-md p-2"
+            onClick={() => {
+                toggleColorMode();
+            }}
+            aria-label={`Switch to ${colorMode === 'dark' ? 'light' : 'dark'} mode`}
+            {...props}
+        >
+            {colorMode === 'light' ? <FaMoon /> : <MdSunny />}
+        </button>
+    );
+};

client/src/_foundation/components/simple-suspense.test.tsx renamed to client/src/_foundation/components/simple-suspense/index.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { SimpleSuspense } from './simple-suspense';
+import { SimpleSuspense } from '.';
 
 describe('SimpleSuspense', () => {
     it('renders fallback when children is undefined', () => {

client/src/_foundation/components/simple-suspense.tsx renamed to client/src/_foundation/components/simple-suspense/index.tsx

@@ -0,0 +1,38 @@
+import { renderHook } from '@testing-library/react';
+import { vi } from 'vitest';
+import useColorMode from './useColorMode';
+
+describe('useColorMode', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        document.documentElement.className = '';
+    });
+
+    it('should initialize with light mode by default', () => {
+        const { result } = renderHook(() => useColorMode());
+        expect(result.current.colorMode).toBe('light');
+        expect(document.documentElement.classList.contains('light')).toBe(true);
+    });
+
+    it('should initialize with dark mode if prefers-color-scheme is dark', () => {
+        window.matchMedia = vi.fn().mockImplementation((query) => ({
+            matches: query === '(prefers-color-scheme: dark)',
+            media: query,
+            onchange: null,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+        }));
+
+        const { result } = renderHook(() => useColorMode());
+        expect(result.current.colorMode).toBe('dark');
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
+    });
+
+    it('should initialize with saved theme from localStorage', () => {
+        localStorage.setItem('theme', 'dark');
+        const { result } = renderHook(() => useColorMode());
+
+        expect(result.current.colorMode).toBe('dark');
+        expect(document.documentElement.classList.contains('dark')).toBe(true);
+    });
+});

client/src/_foundation/hooks/useColorMode.test.ts

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const useColorMode = () => {
+    const [colorMode, setThemeMode] = useState<'dark' | 'light'>('light');
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            document.documentElement.classList.add(savedTheme);
+            setThemeMode(savedTheme as 'dark' | 'light');
+        } else {
+            const prefersDarkScheme =
+                typeof window.matchMedia === 'function' &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (prefersDarkScheme) {
+                document.documentElement.classList.add('dark');
+                setThemeMode('dark');
+            } else {
+                document.documentElement.classList.add('light');
+                setThemeMode('light');
+            }
+        }
+    }, []);
+
+    const toggleColorMode = useCallback(() => {
+        const cls = document.documentElement.classList;
+        if (cls.contains('dark')) {
+            cls.remove('dark');
+            cls.add('light');
+            localStorage.setItem('theme', 'light');
+            setThemeMode('light');
+        } else {
+            cls.remove('light');
+            cls.add('dark');
+            localStorage.setItem('theme', 'dark');
+            setThemeMode('dark');
+        }
+    }, []);
+
+    return { colorMode, toggleColorMode };
+};
+
+export default useColorMode;