symref/dist/test/react/ComponentHooks.test.js

Static code checker for AI code agents (Windsurf, Cline, etc.)

import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useState, useEffect, useCallback, useMemo } from 'react';
// カスタムフック：カウンター
function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);
    const increment = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);
    const decrement = useCallback(() => {
        setCount(prev => prev - 1);
    }, []);
    const reset = useCallback(() => {
        setCount(initialValue);
    }, [initialValue]);
    return { count, increment, decrement, reset };
}
// カスタムフック：ウィンドウサイズ
function useWindowSize() {
    const [windowSize, setWindowSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight,
    });
    useEffect(() => {
        function handleResize() {
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight,
            });
        }
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);
    return windowSize;
}
// カスタムフック：ローカルストレージ
function useLocalStorage(key, initialValue) {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        }
        catch (error) {
            console.error(error);
            return initialValue;
        }
    });
    const setValue = (value) => {
        try {
            const valueToStore = value instanceof Function ? value(storedValue) : value;
            setStoredValue(valueToStore);
            window.localStorage.setItem(key, JSON.stringify(valueToStore));
        }
        catch (error) {
            console.error(error);
        }
    };
    return [storedValue, setValue];
}
// カウンターコンポーネント
const CounterComponent = () => {
    const { count, increment, decrement, reset } = useCounter(0);
    const windowSize = useWindowSize();
    return (_jsxs("div", { children: [_jsxs("h2", { children: ["Counter: ", count] }), _jsxs("p", { children: ["Window size: ", windowSize.width, " x ", windowSize.height] }), _jsx("button", { onClick: increment, children: "Increment" }), _jsx("button", { onClick: decrement, children: "Decrement" }), _jsx("button", { onClick: reset, children: "Reset" })] }));
};
// テーマコンポーネント
const ThemeComponent = () => {
    const [theme, setTheme] = useLocalStorage('theme', 'light');
    const toggleTheme = () => {
        setTheme(theme === 'light' ? 'dark' : 'light');
    };
    const themeStyle = useMemo(() => ({
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#333' : '#fff',
        padding: '20px',
    }), [theme]);
    return (_jsxs("div", { style: themeStyle, children: [_jsxs("h2", { children: ["Current Theme: ", theme] }), _jsx("button", { onClick: toggleTheme, children: "Toggle Theme" }), _jsx(CounterComponent, {})] }));
};
// アプリコンポーネント
const HooksApp = () => {
    return (_jsxs("div", { children: [_jsx("h1", { children: "Hooks Testing App" }), _jsx(ThemeComponent, {})] }));
};
export { useCounter, useWindowSize, useLocalStorage, CounterComponent, ThemeComponent, HooksApp };
//# sourceMappingURL=ComponentHooks.test.js.map