@k8o/arte-odyssey 0.0.0

package/dist/hooks/interval/index.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+const useInterval = (callback, timeout) => {
+  useEffect(() => {
+    let intervalId = null;
+    intervalId = window.setInterval(() => {
+      callback();
+    }, timeout);
+    return () => {
+      if (intervalId) {
+        window.clearInterval(intervalId);
+      }
+    };
+  }, [callback, timeout]);
+};
+export {
+  useInterval
+};

package/dist/hooks/interval/index.test.js

@@ -0,0 +1,32 @@
+import { renderHook } from "@testing-library/react";
+import { useInterval } from ".";
+describe("useInterval", () => {
+  it("\u6307\u5B9A\u6642\u9593\u3054\u3068\u306B\u5B9F\u884C\u3055\u308C\u308B", () => {
+    const fn = vi.fn();
+    vi.useFakeTimers();
+    renderHook(() => {
+      useInterval(fn, 1e3);
+    });
+    vi.advanceTimersByTime(2e3);
+    expect(fn).toHaveBeenCalledTimes(2);
+  });
+  it("\u6307\u5B9A\u6642\u9593\u3092\u904E\u304E\u306A\u3044\u3068\u5B9F\u884C\u3055\u308C\u306A\u3044", () => {
+    const fn = vi.fn();
+    vi.useFakeTimers();
+    renderHook(() => {
+      useInterval(fn, 1e3);
+    });
+    vi.advanceTimersByTime(10);
+    expect(fn).not.toHaveBeenCalled();
+  });
+  it("\u30A2\u30F3\u30DE\u30A6\u30F3\u30C8\u5F8C\u306F\u5B9F\u884C\u3055\u308C\u306A\u3044", () => {
+    const fn = vi.fn();
+    vi.useFakeTimers();
+    const { unmount } = renderHook(() => {
+      useInterval(fn, 1e3);
+    });
+    unmount();
+    vi.advanceTimersByTime(2e3);
+    expect(fn).not.toHaveBeenCalled();
+  });
+});

package/dist/hooks/local-storage/index.d.ts

@@ -0,0 +1 @@
+export declare const useLocalStorage: <T>(key: string, initialValue: T) => readonly [T, (value: T) => void, () => void];

package/dist/hooks/local-storage/index.js

@@ -0,0 +1,48 @@
+import { useCallback, useMemo, useSyncExternalStore } from "react";
+const dispatchStorageEvent = (key, newValue) => window.dispatchEvent(new StorageEvent("storage", { key, newValue }));
+const getLocalStorageItem = (key) => window.localStorage.getItem(key);
+const localStorageSubscribe = (cb) => {
+  window.addEventListener("storage", cb);
+  return () => {
+    window.removeEventListener("storage", cb);
+  };
+};
+const useLocalStorage = (key, initialValue) => {
+  const getSnapshot = () => getLocalStorageItem(key);
+  const store = useSyncExternalStore(
+    localStorageSubscribe,
+    getSnapshot,
+    () => null
+  );
+  const current = useMemo(() => {
+    try {
+      if (store === null) {
+        return initialValue;
+      }
+      return JSON.parse(store);
+    } catch (e) {
+      console.error(e);
+      return initialValue;
+    }
+  }, [store, initialValue]);
+  const handleRemove = useCallback(() => {
+    window.localStorage.removeItem(key);
+    dispatchStorageEvent(key, null);
+  }, [key]);
+  const setState = useCallback(
+    (value) => {
+      if (value === void 0 || value === null) {
+        handleRemove();
+      } else {
+        const stringifiedValue = JSON.stringify(value);
+        window.localStorage.setItem(key, stringifiedValue);
+        dispatchStorageEvent(key, stringifiedValue);
+      }
+    },
+    [key, handleRemove]
+  );
+  return [current, setState, handleRemove];
+};
+export {
+  useLocalStorage
+};

package/dist/hooks/local-storage/index.test.js

@@ -0,0 +1,82 @@
+import { act, renderHook } from "@testing-library/react";
+import { useLocalStorage } from "./index";
+const consoleErrorMock = vi.spyOn(console, "error").mockImplementation(() => void 0);
+describe("useLocalStorage", () => {
+  const key = "testKey";
+  beforeEach(() => {
+    localStorage.clear();
+  });
+  afterAll(() => {
+    consoleErrorMock.mockReset();
+  });
+  it("localStorage\u306B\u5024\u304C\u306A\u3051\u308C\u3070\u521D\u671F\u5024\u3092\u8FD4\u3059", () => {
+    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+    expect(result.current[0]).toBe("defaultValue");
+  });
+  it("localStorage\u306B\u5024\u304C\u5B58\u5728\u3042\u308C\u3070\u305D\u306E\u5024\u3092\u8FD4\u3059", () => {
+    localStorage.setItem(key, JSON.stringify("storedValue"));
+    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+    expect(result.current[0]).toBe("storedValue");
+  });
+  it("\u66F4\u65B0\u51E6\u7406\u3067\u306FlocalStorage\u3068state\u306E\u4E21\u65B9\u3092\u66F4\u65B0\u3059\u308B", () => {
+    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+    act(() => {
+      result.current[1]("newValue");
+    });
+    expect(localStorage.getItem(key)).toBe(JSON.stringify("newValue"));
+    expect(result.current[0]).toBe("newValue");
+  });
+  it("\u524A\u9664\u51E6\u7406\u3067\u306FlocalStorage\u306F\u5024\u3092\u524A\u9664\u3055\u308C\u3001state\u306F\u521D\u671F\u5024\u306B\u306A\u308B", () => {
+    localStorage.setItem(key, JSON.stringify("storedValue"));
+    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+    act(() => {
+      result.current[2]();
+    });
+    expect(localStorage.getItem(key)).toBeNull();
+    expect(result.current[0]).toBe("defaultValue");
+  });
+  it("null\u3067\u66F4\u65B0\u3057\u305F\u5834\u5408\u306Fremove\u3068\u540C\u3058\u7D50\u679C\u306B\u306A\u308B", () => {
+    const { result } = renderHook(
+      () => useLocalStorage(key, {
+        lang: ["ja", "en"]
+      })
+    );
+    act(() => {
+      result.current[1](null);
+    });
+    expect(localStorage.getItem(key)).toBeNull();
+    expect(result.current[0]).toEqual({ lang: ["ja", "en"] });
+  });
+  it("storage\u30A4\u30D9\u30F3\u30C8\u306E\u767A\u706B\u306B\u5FDC\u3058\u3066\u72B6state\u304C\u66F4\u65B0\u3055\u308C\u308B", () => {
+    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+    act(() => {
+      localStorage.setItem(key, JSON.stringify("updatedValue"));
+      window.dispatchEvent(
+        new StorageEvent("storage", {
+          key,
+          newValue: JSON.stringify("updatedValue")
+        })
+      );
+    });
+    expect(result.current[0]).toBe("updatedValue");
+  });
+  it("\u7570\u306A\u308B\u30AD\u30FC\u306Estorage\u30A4\u30D9\u30F3\u30C8\u306Fstate\u3092\u66F4\u65B0\u3057\u306A\u3044", () => {
+    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+    act(() => {
+      localStorage.setItem("otherKey", JSON.stringify("otherValue"));
+      window.dispatchEvent(
+        new StorageEvent("storage", {
+          key: "otherKey",
+          newValue: JSON.stringify("otherValue")
+        })
+      );
+    });
+    expect(result.current[0]).toBe("defaultValue");
+  });
+  it("JSON\u3092\u30D1\u30FC\u30B9\u3067\u304D\u306A\u3044\u6642\u306F\u30A8\u30E9\u30FC\u3092\u5410\u3044\u3066\u521D\u671F\u5024\u3092\u8FD4\u3059", () => {
+    localStorage.setItem(key, "{invalidJSON");
+    const { result } = renderHook(() => useLocalStorage(key, "defaultValue"));
+    expect(result.current[0]).toBe("defaultValue");
+    expect(consoleErrorMock).toHaveBeenCalledOnce();
+  });
+});

package/dist/hooks/scroll-direction/index.d.ts

@@ -0,0 +1,6 @@
+type ScrollDirection = {
+    x: 'left' | 'right';
+    y: 'up' | 'down';
+};
+export declare const useScrollDirection: (threshold?: number) => ScrollDirection;
+export {};

package/dist/hooks/scroll-direction/index.js

@@ -0,0 +1,40 @@
+"use client";
+import { useEffect, useState } from "react";
+const useScrollDirection = (threshold = 50) => {
+  const [scrollDirection, setScrollDirection] = useState({
+    x: "right",
+    y: "up"
+  });
+  const [prevScrollY, setPrevScrollY] = useState(0);
+  const [prevScrollX, setPrevScrollX] = useState(0);
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      const currentScrollX = window.scrollX;
+      const newDirection = { ...scrollDirection };
+      if (currentScrollY > prevScrollY && currentScrollY > threshold) {
+        newDirection.y = "down";
+      } else if (currentScrollY < prevScrollY) {
+        newDirection.y = "up";
+      }
+      if (currentScrollX > prevScrollX && currentScrollX > threshold) {
+        newDirection.x = "right";
+      } else if (currentScrollX < prevScrollX) {
+        newDirection.x = "left";
+      }
+      setScrollDirection(newDirection);
+      setPrevScrollY(currentScrollY);
+      setPrevScrollX(currentScrollX);
+    };
+    window.addEventListener("scroll", handleScroll, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [prevScrollY, prevScrollX, scrollDirection, threshold]);
+  return scrollDirection;
+};
+export {
+  useScrollDirection
+};

package/dist/hooks/scroll-direction/index.test.js

@@ -0,0 +1,174 @@
+import { act, renderHook } from "@testing-library/react";
+import { useScrollDirection } from ".";
+describe("useScrollDirection", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "scrollY", {
+      writable: true,
+      value: 0
+    });
+    Object.defineProperty(window, "scrollX", {
+      writable: true,
+      value: 0
+    });
+  });
+  it("\u521D\u671F\u72B6\u614B\u3067\u306Fx: right, y: up\u3092\u8FD4\u3059", () => {
+    const { result } = renderHook(() => useScrollDirection());
+    expect(result.current).toEqual({ x: "right", y: "up" });
+  });
+  describe("Vertical scroll", () => {
+    it("100px\u4EE5\u4E0A\u4E0B\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068y: down\u3092\u8FD4\u3059", () => {
+      const { result } = renderHook(() => useScrollDirection());
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 150 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("down");
+    });
+    it("100px\u672A\u6E80\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306Fy: up\u306E\u307E\u307E", () => {
+      const { result } = renderHook(() => useScrollDirection());
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 50 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("up");
+    });
+    it("\u4E0A\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068y: up\u3092\u8FD4\u3059", () => {
+      const { result } = renderHook(() => useScrollDirection());
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 200 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("down");
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 100 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("up");
+    });
+  });
+  describe("Horizontal scroll", () => {
+    it("100px\u4EE5\u4E0A\u53F3\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068x: right\u3092\u8FD4\u3059", () => {
+      const { result } = renderHook(() => useScrollDirection());
+      act(() => {
+        Object.defineProperty(window, "scrollX", { value: 150 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.x).toBe("right");
+    });
+    it("100px\u672A\u6E80\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306Fx: right\u306E\u307E\u307E", () => {
+      const { result } = renderHook(() => useScrollDirection());
+      act(() => {
+        Object.defineProperty(window, "scrollX", { value: 50 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.x).toBe("right");
+    });
+    it("\u5DE6\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3059\u308B\u3068x: left\u3092\u8FD4\u3059", () => {
+      const { result } = renderHook(() => useScrollDirection());
+      act(() => {
+        Object.defineProperty(window, "scrollX", { value: 200 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.x).toBe("right");
+      act(() => {
+        Object.defineProperty(window, "scrollX", { value: 100 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.x).toBe("left");
+    });
+  });
+  describe("Combined scroll", () => {
+    it("\u7E26\u6A2A\u540C\u6642\u306B\u30B9\u30AF\u30ED\u30FC\u30EB\u3057\u305F\u5834\u5408\u3001\u4E21\u65B9\u5411\u3092\u6B63\u3057\u304F\u691C\u77E5\u3059\u308B", () => {
+      const { result } = renderHook(() => useScrollDirection());
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 150 });
+        Object.defineProperty(window, "scrollX", { value: 150 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current).toEqual({ x: "right", y: "down" });
+    });
+  });
+  it("\u30A2\u30F3\u30DE\u30A6\u30F3\u30C8\u5F8C\u306F\u30A4\u30D9\u30F3\u30C8\u30EA\u30B9\u30CA\u30FC\u304C\u524A\u9664\u3055\u308C\u308B", () => {
+    const removeEventListenerSpy = vi.spyOn(window, "removeEventListener");
+    const { unmount } = renderHook(() => useScrollDirection());
+    unmount();
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      "scroll",
+      expect.any(Function)
+    );
+  });
+  it("\u30B9\u30AF\u30ED\u30FC\u30EB\u30A4\u30D9\u30F3\u30C8\u304Cpassive: true\u3067\u767B\u9332\u3055\u308C\u308B", () => {
+    const addEventListenerSpy = vi.spyOn(window, "addEventListener");
+    renderHook(() => useScrollDirection());
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      "scroll",
+      expect.any(Function),
+      { passive: true }
+    );
+  });
+  describe("Threshold parameter", () => {
+    it("threshold\u304C100\u306E\u5834\u5408\u3001100px\u4EE5\u4E0B\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306F\u65B9\u5411\u304C\u5909\u308F\u3089\u306A\u3044", () => {
+      const { result } = renderHook(() => useScrollDirection(100));
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 100 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("up");
+      act(() => {
+        Object.defineProperty(window, "scrollX", { value: 100 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.x).toBe("right");
+    });
+    it("threshold\u304C100\u306E\u5834\u5408\u3001101px\u4EE5\u4E0A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u65B9\u5411\u304C\u5909\u308F\u308B", () => {
+      const { result } = renderHook(() => useScrollDirection(100));
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 101 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("down");
+      act(() => {
+        Object.defineProperty(window, "scrollX", { value: 101 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.x).toBe("right");
+    });
+    it("threshold\u304C10\u306E\u5834\u5408\u300110px\u4EE5\u4E0B\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u306F\u65B9\u5411\u304C\u5909\u308F\u3089\u306A\u3044", () => {
+      const { result } = renderHook(() => useScrollDirection(10));
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 10 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("up");
+    });
+    it("threshold\u304C10\u306E\u5834\u5408\u300111px\u4EE5\u4E0A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u65B9\u5411\u304C\u5909\u308F\u308B", () => {
+      const { result } = renderHook(() => useScrollDirection(10));
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 11 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("down");
+    });
+    it("threshold\u304C0\u306E\u5834\u5408\u30011px\u4EE5\u4E0A\u306E\u30B9\u30AF\u30ED\u30FC\u30EB\u3067\u65B9\u5411\u304C\u5909\u308F\u308B", () => {
+      const { result } = renderHook(() => useScrollDirection(0));
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 1 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("down");
+    });
+    it("\u30C7\u30D5\u30A9\u30EB\u30C8\u5024\uFF08threshold\u672A\u6307\u5B9A\uFF09\u3067\u306F50px\u306E\u95BE\u5024\u304C\u9069\u7528\u3055\u308C\u308B", () => {
+      const { result } = renderHook(() => useScrollDirection());
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 50 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("up");
+      act(() => {
+        Object.defineProperty(window, "scrollY", { value: 51 });
+        window.dispatchEvent(new Event("scroll"));
+      });
+      expect(result.current.y).toBe("down");
+    });
+  });
+});

package/dist/hooks/step/index.d.ts

@@ -0,0 +1,13 @@
+type Step = {
+    count: number;
+    next: () => void;
+    back: () => void;
+    isDisabledBack: boolean;
+    isDisabledNext: boolean;
+};
+type UseStep = (props: {
+    initialCount: number;
+    maxCount: number;
+}) => Step;
+export declare const useStep: UseStep;
+export {};

package/dist/hooks/step/index.js

@@ -0,0 +1,39 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+const useStep = ({ initialCount, maxCount }) => {
+  const [count, setCount] = useState(initialCount);
+  const isDisabledBack = count === initialCount;
+  const isDisabledNext = count === maxCount;
+  const back = useCallback(() => {
+    setCount((prev) => {
+      if (prev === initialCount) return prev;
+      return prev - 1;
+    });
+  }, [initialCount]);
+  const next = useCallback(() => {
+    setCount((prev) => {
+      if (prev === maxCount) return prev;
+      return prev + 1;
+    });
+  }, [maxCount]);
+  useEffect(() => {
+    const listener = (e) => {
+      if (e.key === "ArrowLeft") back();
+      if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", listener);
+    return () => {
+      window.removeEventListener("keydown", listener);
+    };
+  }, [back, next]);
+  return {
+    count,
+    next,
+    back,
+    isDisabledBack,
+    isDisabledNext
+  };
+};
+export {
+  useStep
+};

package/dist/hooks/step/index.test.js

@@ -0,0 +1,85 @@
+import { act, renderHook } from "@testing-library/react";
+import { userEvent } from "@vitest/browser/context";
+import { useStep } from ".";
+describe("useStep", () => {
+  it("\u521D\u671F\u72B6\u614B", () => {
+    const initialCount = 1;
+    const maxCount = 10;
+    const { result } = renderHook(() => useStep({ initialCount, maxCount }));
+    expect(result.current.count).toBe(initialCount);
+    expect(result.current.isDisabledBack).toBeTruthy();
+    expect(result.current.isDisabledNext).toBeFalsy();
+  });
+  it("next\u3067initialCount\u304B\u30891\u9032\u3080", () => {
+    const initialCount = 1;
+    const maxCount = 10;
+    const { result } = renderHook(() => useStep({ initialCount, maxCount }));
+    act(() => {
+      result.current.next();
+    });
+    expect(result.current.count).toBe(initialCount + 1);
+    expect(result.current.isDisabledBack).toBeFalsy();
+    expect(result.current.isDisabledNext).toBeFalsy();
+  });
+  it("initialCount\u304B\u3089\u306Fback\u3067\u304D\u306A\u3044", () => {
+    const initialCount = 1;
+    const maxCount = 10;
+    const { result } = renderHook(() => useStep({ initialCount, maxCount }));
+    act(() => {
+      result.current.back();
+    });
+    expect(result.current.count).toBe(initialCount);
+    expect(result.current.isDisabledBack).toBeTruthy();
+    expect(result.current.isDisabledNext).toBeFalsy();
+  });
+  it("maxCount\u307E\u3067\u9032\u3080", () => {
+    const initialCount = 1;
+    const maxCount = 3;
+    const { result } = renderHook(() => useStep({ initialCount, maxCount }));
+    act(() => {
+      result.current.next();
+      result.current.next();
+    });
+    expect(result.current.count).toBe(maxCount);
+    expect(result.current.isDisabledBack).toBeFalsy();
+    expect(result.current.isDisabledNext).toBeTruthy();
+  });
+  it("maxCount\u4EE5\u4E0A\u306F\u9032\u3081\u306A\u3044", () => {
+    const initialCount = 1;
+    const maxCount = 3;
+    const { result } = renderHook(() => useStep({ initialCount, maxCount }));
+    act(() => {
+      result.current.next();
+      result.current.next();
+      result.current.next();
+    });
+    expect(result.current.count).toBe(maxCount);
+    expect(result.current.isDisabledBack).toBeFalsy();
+    expect(result.current.isDisabledNext).toBeTruthy();
+  });
+  it("next\u3068back\u3092\u7D44\u307F\u5408\u308F\u305B\u3066\u5229\u7528\u3067\u304D\u308B", () => {
+    const initialCount = 1;
+    const maxCount = 3;
+    const { result } = renderHook(() => useStep({ initialCount, maxCount }));
+    act(() => {
+      result.current.next();
+      result.current.back();
+    });
+    expect(result.current.count).toBe(initialCount);
+    expect(result.current.isDisabledBack).toBeTruthy();
+    expect(result.current.isDisabledNext).toBeFalsy();
+  });
+  it("\u5DE6\u53F3\u30AD\u30FC\u3067\u64CD\u4F5C\u3067\u304D\u308B", async () => {
+    const initialCount = 1;
+    const maxCount = 3;
+    const { result } = renderHook(() => useStep({ initialCount, maxCount }));
+    await act(async () => {
+      await userEvent.keyboard("{arrowright}");
+    });
+    expect(result.current.count).toBe(initialCount + 1);
+    await act(async () => {
+      await userEvent.keyboard("{arrowleft}");
+    });
+    expect(result.current.count).toBe(initialCount);
+  });
+});

package/dist/hooks/timeout/index.d.ts

@@ -0,0 +1 @@
+export declare const useTimeout: (callback: () => void, delay: number) => void;

package/dist/hooks/timeout/index.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+const useTimeout = (callback, delay) => {
+  useEffect(() => {
+    let timeoutId = null;
+    timeoutId = window.setTimeout(() => {
+      callback();
+    }, delay);
+    return () => {
+      if (timeoutId) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+  }, [callback, delay]);
+};
+export {
+  useTimeout
+};

package/dist/hooks/timeout/index.test.js

@@ -0,0 +1,31 @@
+import { renderHook } from "@testing-library/react";
+import { useTimeout } from ".";
+describe("useTimeout", () => {
+  it("\u6307\u5B9A\u6642\u9593\u5F8C\u306B\u5B9F\u884C\u3055\u308C\u308B", () => {
+    const fn = vi.fn();
+    vi.useFakeTimers();
+    renderHook(() => {
+      useTimeout(fn, 1e3);
+    });
+    vi.advanceTimersByTime(1e3);
+    expect(fn).toHaveBeenCalledOnce();
+  });
+  it("\u6307\u5B9A\u6642\u9593\u524D\u306B\u5B9F\u884C\u3055\u308C\u306A\u3044", () => {
+    const fn = vi.fn();
+    vi.useFakeTimers();
+    renderHook(() => {
+      useTimeout(fn, 1e3);
+    });
+    vi.advanceTimersByTime(10);
+    expect(fn).not.toHaveBeenCalled();
+  });
+  it("\u6307\u5B9A\u6642\u9593\u524D\u306B\u30A2\u30F3\u30DE\u30A6\u30F3\u30C8\u3055\u308C\u306A\u3044\u5834\u5408\u306F\u5B9F\u884C\u3055\u308C\u306A\u3044", () => {
+    const fn = vi.fn();
+    vi.useFakeTimers();
+    const { unmount } = renderHook(() => {
+      useTimeout(fn, 1e3);
+    });
+    unmount();
+    expect(fn).not.toHaveBeenCalled();
+  });
+});

package/dist/hooks/window-size/index.d.ts

@@ -0,0 +1,6 @@
+type Size = {
+    width: number;
+    height: number;
+};
+export declare const useWindowSize: () => Size;
+export {};

package/dist/hooks/window-size/index.js

@@ -0,0 +1,22 @@
+"use client";
+import { useLayoutEffect, useState } from "react";
+const useWindowSize = () => {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return size;
+};
+export {
+  useWindowSize
+};

package/dist/hooks/window-size/index.test.js

@@ -0,0 +1,18 @@
+import { act, renderHook } from "@testing-library/react";
+import { useWindowSize } from ".";
+describe("useWindowSize", () => {
+  it("window\u30B5\u30A4\u30BA\u306E\u5909\u66F4\u306B\u5408\u308F\u305B\u3066\u73FE\u5728\u306Ewindow\u30B5\u30A4\u30BA\u3092\u53D6\u5F97\u3059\u308B", () => {
+    const initWindowSize = { width: 0, height: 0 };
+    const resizedWindowSize = { width: 1e3, height: 1e3 };
+    window.innerWidth = initWindowSize.width;
+    window.innerHeight = initWindowSize.height;
+    const { result } = renderHook(() => useWindowSize());
+    expect(result.current).toEqual(initWindowSize);
+    window.innerWidth = resizedWindowSize.width;
+    window.innerHeight = resizedWindowSize.height;
+    act(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+    expect(result.current).toEqual(resizedWindowSize);
+  });
+});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './hooks';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./hooks";

package/dist/package.json

@@ -0,0 +1,6 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ]
+}