react-panel-layout 0.5.2 → 0.6.0

package/src/hooks/gesture/presets.spec.ts

@@ -0,0 +1,86 @@
+/**
+ * @file Tests for swipe gesture presets.
+ *
+ * TDD: スワイプの閾値が過敏すぎるため、プラットフォーム固有のプリセットを提供する
+ */
+import {
+  SWIPE_PRESETS,
+  getSwipePreset,
+} from "./presets.js";
+
+describe("swipe gesture presets", () => {
+  describe("SWIPE_PRESETS", () => {
+    it("provides iOS preset with appropriate thresholds", () => {
+      // iOS: 高速で滑らかなスワイプ、適度な閾値
+      expect(SWIPE_PRESETS.ios).toBeDefined();
+      expect(SWIPE_PRESETS.ios.distanceThreshold).toBeGreaterThanOrEqual(50);
+      expect(SWIPE_PRESETS.ios.velocityThreshold).toBeGreaterThanOrEqual(0.3);
+      expect(SWIPE_PRESETS.ios.lockThreshold).toBeDefined();
+    });
+
+    it("provides Android preset with appropriate thresholds", () => {
+      // Android: より寛容な閾値（多様なデバイスに対応）
+      expect(SWIPE_PRESETS.android).toBeDefined();
+      expect(SWIPE_PRESETS.android.distanceThreshold).toBeGreaterThanOrEqual(60);
+      expect(SWIPE_PRESETS.android.velocityThreshold).toBeGreaterThanOrEqual(0.25);
+    });
+
+    it("provides desktop preset with larger thresholds", () => {
+      // デスクトップ: マウス操作のため、より大きな閾値が必要
+      expect(SWIPE_PRESETS.desktop).toBeDefined();
+      expect(SWIPE_PRESETS.desktop.distanceThreshold).toBeGreaterThan(
+        SWIPE_PRESETS.ios.distanceThreshold
+      );
+    });
+
+    it("provides relaxed preset for less sensitive detection", () => {
+      // Relaxed: 誤操作防止のため高い閾値
+      expect(SWIPE_PRESETS.relaxed).toBeDefined();
+      expect(SWIPE_PRESETS.relaxed.distanceThreshold).toBeGreaterThanOrEqual(80);
+      expect(SWIPE_PRESETS.relaxed.velocityThreshold).toBeGreaterThanOrEqual(0.5);
+    });
+
+    it("all presets have required threshold properties", () => {
+      const requiredProps = ["distanceThreshold", "velocityThreshold", "lockThreshold"];
+
+      for (const preset of Object.values(SWIPE_PRESETS)) {
+        for (const prop of requiredProps) {
+          expect(preset).toHaveProperty(prop);
+          expect(typeof (preset as Record<string, unknown>)[prop]).toBe("number");
+        }
+      }
+    });
+  });
+
+  describe("getSwipePreset", () => {
+    it("returns iOS preset for iOS user agent", () => {
+      const preset = getSwipePreset("Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)");
+      expect(preset).toEqual(SWIPE_PRESETS.ios);
+    });
+
+    it("returns iOS preset for iPad user agent", () => {
+      const preset = getSwipePreset("Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X)");
+      expect(preset).toEqual(SWIPE_PRESETS.ios);
+    });
+
+    it("returns Android preset for Android user agent", () => {
+      const preset = getSwipePreset("Mozilla/5.0 (Linux; Android 14; Pixel 8)");
+      expect(preset).toEqual(SWIPE_PRESETS.android);
+    });
+
+    it("returns desktop preset for Chrome on Windows", () => {
+      const preset = getSwipePreset("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36");
+      expect(preset).toEqual(SWIPE_PRESETS.desktop);
+    });
+
+    it("returns desktop preset for Chrome on Mac", () => {
+      const preset = getSwipePreset("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36");
+      expect(preset).toEqual(SWIPE_PRESETS.desktop);
+    });
+
+    it("falls back to ios preset for unknown user agent", () => {
+      const preset = getSwipePreset("Unknown Browser/1.0");
+      expect(preset).toEqual(SWIPE_PRESETS.ios);
+    });
+  });
+});

package/src/hooks/gesture/presets.ts

@@ -0,0 +1,95 @@
+/**
+ * @file Platform-specific swipe gesture presets.
+ *
+ * Provides pre-configured threshold values for different platforms
+ * to match their native gesture behaviors.
+ */
+import type { SwipeInputThresholds } from "./types.js";
+
+/**
+ * Platform-specific swipe gesture presets.
+ *
+ * - ios: Matches iOS native swipe behavior (responsive, smooth)
+ * - android: Matches Android gesture behavior (slightly more tolerant)
+ * - desktop: For mouse-based interactions (larger thresholds)
+ * - relaxed: For contexts where accidental swipes should be avoided
+ */
+export const SWIPE_PRESETS: Record<string, SwipeInputThresholds> = {
+  /**
+   * iOS preset: Responsive swipe matching native behavior.
+   * Apple devices have precise touch sensors and expect quick response.
+   */
+  ios: {
+    distanceThreshold: 50,
+    velocityThreshold: 0.3,
+    lockThreshold: 10,
+  },
+
+  /**
+   * Android preset: Slightly more tolerant thresholds.
+   * Accounts for diverse device hardware and touch sensor quality.
+   */
+  android: {
+    distanceThreshold: 60,
+    velocityThreshold: 0.25,
+    lockThreshold: 12,
+  },
+
+  /**
+   * Desktop preset: Larger thresholds for mouse-based interactions.
+   * Mouse movements are less precise for swipe gestures.
+   */
+  desktop: {
+    distanceThreshold: 80,
+    velocityThreshold: 0.4,
+    lockThreshold: 15,
+  },
+
+  /**
+   * Relaxed preset: Higher thresholds to avoid accidental swipes.
+   * Use in contexts where unintentional navigation would be disruptive.
+   */
+  relaxed: {
+    distanceThreshold: 100,
+    velocityThreshold: 0.5,
+    lockThreshold: 20,
+  },
+} as const;
+
+/**
+ * Detect platform from user agent string and return appropriate preset.
+ *
+ * @param userAgent - Navigator userAgent string
+ * @returns Appropriate SwipeInputThresholds for the detected platform
+ *
+ * @example
+ * ```ts
+ * const thresholds = getSwipePreset(navigator.userAgent);
+ * const { state, containerProps } = useSwipeInput({
+ *   containerRef,
+ *   axis: "horizontal",
+ *   thresholds,
+ * });
+ * ```
+ */
+export function getSwipePreset(userAgent: string): SwipeInputThresholds {
+  const ua = userAgent.toLowerCase();
+
+  // iOS detection (iPhone, iPad, iPod)
+  if (/iphone|ipad|ipod/.test(ua)) {
+    return SWIPE_PRESETS.ios;
+  }
+
+  // Android detection
+  if (/android/.test(ua)) {
+    return SWIPE_PRESETS.android;
+  }
+
+  // Desktop fallback (Windows, Mac, Linux without touch indicators)
+  if (/windows|macintosh|linux/.test(ua) && !/android|mobile/.test(ua)) {
+    return SWIPE_PRESETS.desktop;
+  }
+
+  // Default to iOS preset for unknown platforms
+  return SWIPE_PRESETS.ios;
+}

package/src/hooks/gesture/testing/createGestureSimulator.spec.ts

@@ -0,0 +1,237 @@
+/**
+ * @file Tests for gesture simulator utilities.
+ */
+/* eslint-disable no-restricted-globals, no-restricted-properties -- test utilities need vi for timing and mocks */
+import {
+  createGestureSimulator,
+  createMockContainer,
+  createMockContainerRef,
+} from "./createGestureSimulator.js";
+
+describe("createGestureSimulator", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  describe("pointerDown", () => {
+    it("dispatches pointerdown event", () => {
+      const simulator = createGestureSimulator();
+      const handler = vi.fn();
+      document.addEventListener("pointerdown", handler);
+
+      simulator.pointerDown(100, 200);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      const event = handler.mock.calls[0][0] as PointerEvent;
+      expect(event.clientX).toBe(100);
+      expect(event.clientY).toBe(200);
+      expect(event.pointerType).toBe("touch");
+      expect(event.pointerId).toBe(1);
+
+      document.removeEventListener("pointerdown", handler);
+    });
+  });
+
+  describe("pointerMove", () => {
+    it("dispatches pointermove event after pointerdown", () => {
+      const simulator = createGestureSimulator();
+      const handler = vi.fn();
+      document.addEventListener("pointermove", handler);
+
+      simulator.pointerDown(100, 100);
+      simulator.pointerMove(150, 120);
+
+      expect(handler).toHaveBeenCalledTimes(1);
+      const event = handler.mock.calls[0][0] as PointerEvent;
+      expect(event.clientX).toBe(150);
+      expect(event.clientY).toBe(120);
+
+      document.removeEventListener("pointermove", handler);
+    });
+
+    it("does not dispatch pointermove if pointer is not down", () => {
+      const simulator = createGestureSimulator();
+      const handler = vi.fn();
+      document.addEventListener("pointermove", handler);
+
+      simulator.pointerMove(150, 120);
+
+      expect(handler).not.toHaveBeenCalled();
+
+      document.removeEventListener("pointermove", handler);
+    });
+  });
+
+  describe("pointerUp", () => {
+    it("dispatches pointerup event", () => {
+      const simulator = createGestureSimulator();
+      const handler = vi.fn();
+      document.addEventListener("pointerup", handler);
+
+      simulator.pointerDown(100, 100);
+      simulator.pointerUp();
+
+      expect(handler).toHaveBeenCalledTimes(1);
+
+      document.removeEventListener("pointerup", handler);
+    });
+
+    it("does not dispatch pointerup if pointer is not down", () => {
+      const simulator = createGestureSimulator();
+      const handler = vi.fn();
+      document.addEventListener("pointerup", handler);
+
+      simulator.pointerUp();
+
+      expect(handler).not.toHaveBeenCalled();
+
+      document.removeEventListener("pointerup", handler);
+    });
+  });
+
+  describe("swipe", () => {
+    it("dispatches complete swipe sequence", () => {
+      const simulator = createGestureSimulator();
+      const downHandler = vi.fn();
+      const moveHandler = vi.fn();
+      const upHandler = vi.fn();
+
+      document.addEventListener("pointerdown", downHandler);
+      document.addEventListener("pointermove", moveHandler);
+      document.addEventListener("pointerup", upHandler);
+
+      simulator.swipe({ x: 100, y: 100 }, { x: 200, y: 100 }, 5);
+
+      expect(downHandler).toHaveBeenCalledTimes(1);
+      expect(moveHandler).toHaveBeenCalledTimes(5); // 5 steps
+      expect(upHandler).toHaveBeenCalledTimes(1);
+
+      // Check intermediate positions
+      const lastMove = moveHandler.mock.calls[4][0] as PointerEvent;
+      expect(lastMove.clientX).toBe(200);
+      expect(lastMove.clientY).toBe(100);
+
+      document.removeEventListener("pointerdown", downHandler);
+      document.removeEventListener("pointermove", moveHandler);
+      document.removeEventListener("pointerup", upHandler);
+    });
+  });
+
+  describe("edgeSwipe", () => {
+    it("simulates left edge swipe", () => {
+      const simulator = createGestureSimulator();
+      const downHandler = vi.fn();
+      const upHandler = vi.fn();
+
+      document.addEventListener("pointerdown", downHandler);
+      document.addEventListener("pointerup", upHandler);
+
+      simulator.edgeSwipe("left", 100, 300);
+
+      expect(downHandler).toHaveBeenCalledTimes(1);
+      const downEvent = downHandler.mock.calls[0][0] as PointerEvent;
+      expect(downEvent.clientX).toBe(10); // Edge offset
+      expect(upHandler).toHaveBeenCalledTimes(1);
+
+      document.removeEventListener("pointerdown", downHandler);
+      document.removeEventListener("pointerup", upHandler);
+    });
+
+    it("simulates right edge swipe", () => {
+      const simulator = createGestureSimulator();
+      const downHandler = vi.fn();
+
+      document.addEventListener("pointerdown", downHandler);
+
+      simulator.edgeSwipe("right", 100, 300);
+
+      const downEvent = downHandler.mock.calls[0][0] as PointerEvent;
+      expect(downEvent.clientX).toBe(290); // containerSize - edgeOffset
+
+      document.removeEventListener("pointerdown", downHandler);
+    });
+  });
+
+  describe("createReactPointerEvent", () => {
+    it("creates a React-compatible pointer event", () => {
+      const simulator = createGestureSimulator();
+      const event = simulator.createReactPointerEvent("pointerdown", 100, 200);
+
+      expect(event.clientX).toBe(100);
+      expect(event.clientY).toBe(200);
+      expect(event.pointerId).toBe(1);
+      expect(event.pointerType).toBe("touch");
+      expect(event.isPrimary).toBe(true);
+    });
+  });
+
+  describe("options", () => {
+    it("respects custom pointer type", () => {
+      const simulator = createGestureSimulator({ pointerType: "mouse" });
+      const handler = vi.fn();
+      document.addEventListener("pointerdown", handler);
+
+      simulator.pointerDown(100, 100);
+
+      const event = handler.mock.calls[0][0] as PointerEvent;
+      expect(event.pointerType).toBe("mouse");
+
+      document.removeEventListener("pointerdown", handler);
+    });
+
+    it("respects custom pointer ID", () => {
+      const simulator = createGestureSimulator({ pointerId: 5 });
+      const handler = vi.fn();
+      document.addEventListener("pointerdown", handler);
+
+      simulator.pointerDown(100, 100);
+
+      const event = handler.mock.calls[0][0] as PointerEvent;
+      expect(event.pointerId).toBe(5);
+
+      document.removeEventListener("pointerdown", handler);
+    });
+  });
+});
+
+describe("createMockContainer", () => {
+  it("creates container with default dimensions", () => {
+    const container = createMockContainer();
+
+    expect(container.clientWidth).toBe(300);
+    expect(container.clientHeight).toBe(500);
+  });
+
+  it("creates container with custom dimensions", () => {
+    const container = createMockContainer({ width: 400, height: 600 });
+
+    expect(container.clientWidth).toBe(400);
+    expect(container.clientHeight).toBe(600);
+  });
+
+  it("returns correct bounding rect", () => {
+    const container = createMockContainer({ width: 300, height: 500, left: 50, top: 100 });
+    const rect = container.getBoundingClientRect();
+
+    expect(rect.left).toBe(50);
+    expect(rect.top).toBe(100);
+    expect(rect.right).toBe(350);
+    expect(rect.bottom).toBe(600);
+    expect(rect.width).toBe(300);
+    expect(rect.height).toBe(500);
+  });
+});
+
+describe("createMockContainerRef", () => {
+  it("creates ref with mock container", () => {
+    const ref = createMockContainerRef({ width: 400, height: 600 });
+
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.clientWidth).toBe(400);
+    expect(ref.current?.clientHeight).toBe(600);
+  });
+});