react-panel-layout 0.5.2 → 0.6.1

package/src/hooks/ContentCacheContext.tsx

@@ -0,0 +1,87 @@
+/**
+ * @file Context + Provider pattern for shared content caching.
+ *
+ * Use this when you need to share content caching across a component tree,
+ * such as when multiple child components need access to cached content.
+ *
+ * For local caching within a single component, use useContentCache directly.
+ */
+import * as React from "react";
+import { useContentCache, type ContentResolver, type UseContentCacheResult } from "./useContentCache";
+
+/**
+ * Context value type for content cache.
+ */
+export type ContentCacheContextValue<TId extends string = string> = UseContentCacheResult<TId>;
+
+/**
+ * Creates a content cache context and associated hooks/providers.
+ *
+ * @example
+ * ```tsx
+ * // Create context for a specific use case
+ * const { Provider, useCache } = createContentCacheContext<LayerId>('LayerContent');
+ *
+ * // In provider component
+ * <Provider resolveContent={getLayerContent} validIds={layerIds}>
+ *   {children}
+ * </Provider>
+ *
+ * // In consumer component
+ * const { getCachedContent } = useCache();
+ * return <div>{getCachedContent(layerId)}</div>;
+ * ```
+ */
+export function createContentCacheContext<TId extends string = string>(displayName: string): {
+  /**
+   * Provider component that manages content caching for its children.
+   */
+  Provider: React.FC<ContentCacheProviderProps<TId>>;
+  /**
+   * Hook to access the content cache from a child component.
+   */
+  useCache: () => ContentCacheContextValue<TId>;
+  /**
+   * The raw React context (for advanced use cases).
+   */
+  Context: React.Context<ContentCacheContextValue<TId> | null>;
+} {
+  const Context = React.createContext<ContentCacheContextValue<TId> | null>(null);
+  Context.displayName = `${displayName}CacheContext`;
+
+  const useCache = (): ContentCacheContextValue<TId> => {
+    const ctx = React.useContext(Context);
+    if (!ctx) {
+      throw new Error(`use${displayName}Cache must be used within ${displayName}CacheProvider`);
+    }
+    return ctx;
+  };
+
+  const Provider: React.FC<ContentCacheProviderProps<TId>> = ({ resolveContent, validIds, children }) => {
+    const cacheResult = useContentCache({ resolveContent, validIds });
+
+    const value = React.useMemo<ContentCacheContextValue<TId>>(
+      () => cacheResult,
+      [cacheResult],
+    );
+
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+  };
+  Provider.displayName = `${displayName}CacheProvider`;
+
+  return { Provider, useCache, Context };
+}
+
+/**
+ * Props for content cache provider components.
+ */
+export type ContentCacheProviderProps<TId extends string = string> = React.PropsWithChildren<{
+  /**
+   * Function to resolve content by ID.
+   */
+  resolveContent: ContentResolver<TId>;
+  /**
+   * Current valid IDs for cache cleanup.
+   */
+  validIds: readonly TId[];
+}>;

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,241 @@
+/**
+ * @file Tests for gesture simulator utilities.
+ */
+import {
+  createGestureSimulator,
+  createMockContainer,
+  createMockContainerRef,
+} from "./createGestureSimulator.js";
+
+type EventTracker = {
+  calls: ReadonlyArray<PointerEvent>;
+  handler: (event: Event) => void;
+};
+
+const createEventTracker = (): EventTracker => {
+  const calls: PointerEvent[] = [];
+  const handler = (event: Event): void => {
+    calls.push(event as PointerEvent);
+  };
+  return { calls, handler };
+};
+
+describe("createGestureSimulator", () => {
+  describe("pointerDown", () => {
+    it("dispatches pointerdown event", () => {
+      const simulator = createGestureSimulator();
+      const tracker = createEventTracker();
+      document.addEventListener("pointerdown", tracker.handler);
+
+      simulator.pointerDown(100, 200);
+
+      expect(tracker.calls).toHaveLength(1);
+      const event = tracker.calls[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", tracker.handler);
+    });
+  });
+
+  describe("pointerMove", () => {
+    it("dispatches pointermove event after pointerdown", () => {
+      const simulator = createGestureSimulator();
+      const tracker = createEventTracker();
+      document.addEventListener("pointermove", tracker.handler);
+
+      simulator.pointerDown(100, 100);
+      simulator.pointerMove(150, 120);
+
+      expect(tracker.calls).toHaveLength(1);
+      const event = tracker.calls[0] as PointerEvent;
+      expect(event.clientX).toBe(150);
+      expect(event.clientY).toBe(120);
+
+      document.removeEventListener("pointermove", tracker.handler);
+    });
+
+    it("does not dispatch pointermove if pointer is not down", () => {
+      const simulator = createGestureSimulator();
+      const tracker = createEventTracker();
+      document.addEventListener("pointermove", tracker.handler);
+
+      simulator.pointerMove(150, 120);
+
+      expect(tracker.calls).toHaveLength(0);
+
+      document.removeEventListener("pointermove", tracker.handler);
+    });
+  });
+
+  describe("pointerUp", () => {
+    it("dispatches pointerup event", () => {
+      const simulator = createGestureSimulator();
+      const tracker = createEventTracker();
+      document.addEventListener("pointerup", tracker.handler);
+
+      simulator.pointerDown(100, 100);
+      simulator.pointerUp();
+
+      expect(tracker.calls).toHaveLength(1);
+
+      document.removeEventListener("pointerup", tracker.handler);
+    });
+
+    it("does not dispatch pointerup if pointer is not down", () => {
+      const simulator = createGestureSimulator();
+      const tracker = createEventTracker();
+      document.addEventListener("pointerup", tracker.handler);
+
+      simulator.pointerUp();
+
+      expect(tracker.calls).toHaveLength(0);
+
+      document.removeEventListener("pointerup", tracker.handler);
+    });
+  });
+
+  describe("swipe", () => {
+    it("dispatches complete swipe sequence", () => {
+      const simulator = createGestureSimulator();
+      const downTracker = createEventTracker();
+      const moveTracker = createEventTracker();
+      const upTracker = createEventTracker();
+
+      document.addEventListener("pointerdown", downTracker.handler);
+      document.addEventListener("pointermove", moveTracker.handler);
+      document.addEventListener("pointerup", upTracker.handler);
+
+      simulator.swipe({ x: 100, y: 100 }, { x: 200, y: 100 }, 5);
+
+      expect(downTracker.calls).toHaveLength(1);
+      expect(moveTracker.calls).toHaveLength(5); // 5 steps
+      expect(upTracker.calls).toHaveLength(1);
+
+      // Check intermediate positions
+      const lastMove = moveTracker.calls[4] as PointerEvent;
+      expect(lastMove.clientX).toBe(200);
+      expect(lastMove.clientY).toBe(100);
+
+      document.removeEventListener("pointerdown", downTracker.handler);
+      document.removeEventListener("pointermove", moveTracker.handler);
+      document.removeEventListener("pointerup", upTracker.handler);
+    });
+  });
+
+  describe("edgeSwipe", () => {
+    it("simulates left edge swipe", () => {
+      const simulator = createGestureSimulator();
+      const downTracker = createEventTracker();
+      const upTracker = createEventTracker();
+
+      document.addEventListener("pointerdown", downTracker.handler);
+      document.addEventListener("pointerup", upTracker.handler);
+
+      simulator.edgeSwipe("left", 100, 300);
+
+      expect(downTracker.calls).toHaveLength(1);
+      const downEvent = downTracker.calls[0] as PointerEvent;
+      expect(downEvent.clientX).toBe(10); // Edge offset
+      expect(upTracker.calls).toHaveLength(1);
+
+      document.removeEventListener("pointerdown", downTracker.handler);
+      document.removeEventListener("pointerup", upTracker.handler);
+    });
+
+    it("simulates right edge swipe", () => {
+      const simulator = createGestureSimulator();
+      const downTracker = createEventTracker();
+
+      document.addEventListener("pointerdown", downTracker.handler);
+
+      simulator.edgeSwipe("right", 100, 300);
+
+      const downEvent = downTracker.calls[0] as PointerEvent;
+      expect(downEvent.clientX).toBe(290); // containerSize - edgeOffset
+
+      document.removeEventListener("pointerdown", downTracker.handler);
+    });
+  });
+
+  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 tracker = createEventTracker();
+      document.addEventListener("pointerdown", tracker.handler);
+
+      simulator.pointerDown(100, 100);
+
+      const event = tracker.calls[0] as PointerEvent;
+      expect(event.pointerType).toBe("mouse");
+
+      document.removeEventListener("pointerdown", tracker.handler);
+    });
+
+    it("respects custom pointer ID", () => {
+      const simulator = createGestureSimulator({ pointerId: 5 });
+      const tracker = createEventTracker();
+      document.addEventListener("pointerdown", tracker.handler);
+
+      simulator.pointerDown(100, 100);
+
+      const event = tracker.calls[0] as PointerEvent;
+      expect(event.pointerId).toBe(5);
+
+      document.removeEventListener("pointerdown", tracker.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);
+  });
+});