@yargram/react 1.0.0

package/src/hooks/useLogWindowShortcut.test.ts

@@ -0,0 +1,111 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useLogWindowShortcut } from './useLogWindowShortcut';
+
+describe('useLogWindowShortcut', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('returns isOpen false initially', () => {
+    const { result } = renderHook(() => useLogWindowShortcut());
+    expect(result.current.isOpen).toBe(false);
+    expect(result.current.escapeCount).toBe(0);
+  });
+
+  it('open() sets isOpen to true', () => {
+    const { result } = renderHook(() => useLogWindowShortcut());
+    act(() => {
+      result.current.open();
+    });
+    expect(result.current.isOpen).toBe(true);
+  });
+
+  it('close() sets isOpen to false', () => {
+    const { result } = renderHook(() => useLogWindowShortcut());
+    act(() => {
+      result.current.open();
+    });
+    act(() => {
+      result.current.close();
+    });
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it('toggle() flips isOpen', () => {
+    const { result } = renderHook(() => useLogWindowShortcut());
+    expect(result.current.isOpen).toBe(false);
+    act(() => {
+      result.current.toggle();
+    });
+    expect(result.current.isOpen).toBe(true);
+    act(() => {
+      result.current.toggle();
+    });
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it('opening after threshold Escape key presses', () => {
+    const { result } = renderHook(() =>
+      useLogWindowShortcut({ escapeCount: 3, resetAfterMs: 2000 })
+    );
+    const dispatchEscape = () => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    };
+
+    expect(result.current.isOpen).toBe(false);
+    act(() => {
+      dispatchEscape();
+    });
+    expect(result.current.escapeCount).toBe(1);
+    act(() => {
+      dispatchEscape();
+    });
+    expect(result.current.escapeCount).toBe(2);
+    act(() => {
+      dispatchEscape();
+    });
+    expect(result.current.isOpen).toBe(true);
+    expect(result.current.escapeCount).toBe(0);
+  });
+
+  it('resets escape count after resetAfterMs', () => {
+    const { result } = renderHook(() =>
+      useLogWindowShortcut({ escapeCount: 5, resetAfterMs: 500 })
+    );
+    const dispatchEscape = () => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    };
+
+    act(() => {
+      dispatchEscape();
+      dispatchEscape();
+    });
+    expect(result.current.escapeCount).toBe(2);
+    act(() => {
+      vi.advanceTimersByTime(600);
+    });
+    expect(result.current.escapeCount).toBe(0);
+  });
+
+  it('calls onTrigger when provided and threshold reached', () => {
+    const onTrigger = vi.fn();
+    const { result } = renderHook(() =>
+      useLogWindowShortcut({ escapeCount: 2, onTrigger })
+    );
+    const dispatchEscape = () => {
+      window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    };
+
+    act(() => {
+      dispatchEscape();
+      dispatchEscape();
+    });
+    expect(onTrigger).toHaveBeenCalledTimes(1);
+    expect(result.current.isOpen).toBe(false);
+  });
+});

package/src/hooks/useLogWindowShortcut.ts

@@ -0,0 +1,96 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+export type UseLogWindowShortcutOptions = {
+  /** ログウィンドウを開くために必要な Escape の連続押下回数 */
+  escapeCount?: number;
+  /** この時間（ms）以内に次の Escape が押されないとカウントをリセットする */
+  resetAfterMs?: number;
+  /** ログウィンドウ表示中に Escape を押したら閉じる */
+  closeOnEscape?: boolean;
+  /** 指定時は threshold 到達時に open の代わりにこのコールバックを呼ぶ（例: 認証時はログアウトしてログインウィンドウ表示） */
+  onTrigger?: () => void;
+};
+
+export type UseLogWindowShortcutResult = {
+  /** ログウィンドウを表示するか */
+  isOpen: boolean;
+  /** ログウィンドウを開く */
+  open: () => void;
+  /** ログウィンドウを閉じる */
+  close: () => void;
+  /** トグル */
+  toggle: () => void;
+  /** 現在の Escape カウント（0 〜 escapeCount-1）。デバッグ・UI 表示用 */
+  escapeCount: number;
+};
+
+export function useLogWindowShortcut(
+  options: UseLogWindowShortcutOptions = {}
+): UseLogWindowShortcutResult {
+  const {
+    escapeCount: threshold = 5,
+    resetAfterMs = 1500,
+    closeOnEscape = true,
+    onTrigger,
+  } = options;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [escapeCount, setEscapeCount] = useState(0);
+  const lastEscapeAt = useRef<number>(0);
+  const resetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+
+      if (isOpen) {
+        if (closeOnEscape) {
+          close();
+        }
+        return;
+      }
+
+      const now = Date.now();
+      if (now - lastEscapeAt.current > resetAfterMs) {
+        setEscapeCount(1);
+      } else {
+        setEscapeCount((c) => {
+          const next = c + 1;
+          if (next >= threshold) {
+            lastEscapeAt.current = 0;
+            if (resetTimer.current) {
+              clearTimeout(resetTimer.current);
+              resetTimer.current = null;
+            }
+            if (onTrigger) {
+              onTrigger();
+            } else {
+              open();
+            }
+            return 0;
+          }
+          return next;
+        });
+      }
+      lastEscapeAt.current = now;
+
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+      resetTimer.current = setTimeout(() => {
+        setEscapeCount(0);
+        resetTimer.current = null;
+      }, resetAfterMs);
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      if (resetTimer.current) clearTimeout(resetTimer.current);
+    };
+  }, [isOpen, threshold, resetAfterMs, closeOnEscape, open, close, onTrigger]);
+
+  return { isOpen, open, close, toggle, escapeCount };
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+// Api（provider: 'rest' | 'graphql' で REST: get/post/put/delete、GraphQL: ransack/handing）
+export {
+  useApi,
+  type RestApiContextValue,
+  type GraphqlApiContextValue,
+} from './contexts/ApiContext';
+
+// Printer
+export { usePrinter } from './contexts/PrinterContext';
+
+// 統合 Context（Api + Printer + LogWindow）
+export { YargramProvider, useYargram } from './contexts/YargramContext';
+export type { YargramProviderProps } from './contexts/YargramContext';
+export { gql } from '@apollo/client';

package/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/vitest.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+    include: ['src/**/*.{test,spec}.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: ['src/**/*.stories.tsx', 'src/test/**', 'src/**/*.d.ts'],
+    },
+  },
+});