@develemit/web-hooks 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,265 @@
+// src/drawer-swipe/swipe-intent.ts
+var BACK_ZONE_PX = 60;
+var FORWARD_ZONE_PX = 30;
+var OPEN_DISTANCE_PX = 80;
+var CLOSE_DISTANCE_PX = 60;
+var VERTICAL_CANCEL_PX = 40;
+var MAX_SWIPE_DURATION_MS = 450;
+var HORIZONTAL_DOMINANCE = 1.5;
+function isInOpenZone(x, viewportWidth) {
+  return x > BACK_ZONE_PX && x < viewportWidth - FORWARD_ZONE_PX;
+}
+function resolveSwipeIntent(start, end, drawerOpen, viewportWidth) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  if (end.time - start.time > MAX_SWIPE_DURATION_MS) return null;
+  if (Math.abs(dx) < Math.abs(dy) * HORIZONTAL_DOMINANCE) return null;
+  if (drawerOpen) {
+    return dx <= -CLOSE_DISTANCE_PX ? "close" : null;
+  }
+  if (dx < OPEN_DISTANCE_PX) return null;
+  return isInOpenZone(start.x, viewportWidth) ? "open" : null;
+}
+function isInsideHorizontalScroller(target) {
+  let node = target instanceof Element ? target : null;
+  while (node && node !== document.body) {
+    const { overflowX } = window.getComputedStyle(node);
+    if ((overflowX === "auto" || overflowX === "scroll") && node.scrollWidth > node.clientWidth) {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+
+// src/drawer-swipe/use-drawer-swipe.ts
+import { useEffect, useRef } from "react";
+function isWideViewport(maxViewportWidth) {
+  return window.matchMedia(`(min-width: ${maxViewportWidth}px)`).matches;
+}
+function useDrawerSwipe({
+  drawerOpen,
+  onOpen,
+  onClose,
+  enabled = true,
+  maxViewportWidth = 768
+}) {
+  const start = useRef(null);
+  const handlers = useRef({ drawerOpen, onOpen, onClose, maxViewportWidth });
+  handlers.current = { drawerOpen, onOpen, onClose, maxViewportWidth };
+  useEffect(() => {
+    if (!enabled) return;
+    function handleStart(event) {
+      start.current = null;
+      if (event.touches.length !== 1) return;
+      if (isWideViewport(handlers.current.maxViewportWidth)) return;
+      if (!handlers.current.drawerOpen && isInsideHorizontalScroller(event.target)) {
+        return;
+      }
+      const touch = event.touches[0];
+      if (!touch) return;
+      start.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
+    }
+    function handleMove(event) {
+      const origin = start.current;
+      const touch = event.touches[0];
+      if (!origin || !touch) return;
+      if (Math.abs(touch.clientY - origin.y) > VERTICAL_CANCEL_PX) {
+        start.current = null;
+      }
+    }
+    function handleEnd(event) {
+      const origin = start.current;
+      start.current = null;
+      const touch = event.changedTouches[0];
+      if (!origin || !touch) return;
+      const { drawerOpen: drawerOpen2, onOpen: onOpen2, onClose: onClose2 } = handlers.current;
+      const intent = resolveSwipeIntent(
+        origin,
+        { x: touch.clientX, y: touch.clientY, time: Date.now() },
+        drawerOpen2,
+        window.innerWidth
+      );
+      if (intent === "open") onOpen2();
+      if (intent === "close") onClose2();
+    }
+    function handleCancel() {
+      start.current = null;
+    }
+    document.addEventListener("touchstart", handleStart, { passive: true });
+    document.addEventListener("touchmove", handleMove, { passive: true });
+    document.addEventListener("touchend", handleEnd, { passive: true });
+    document.addEventListener("touchcancel", handleCancel, { passive: true });
+    return () => {
+      document.removeEventListener("touchstart", handleStart);
+      document.removeEventListener("touchmove", handleMove);
+      document.removeEventListener("touchend", handleEnd);
+      document.removeEventListener("touchcancel", handleCancel);
+    };
+  }, [enabled]);
+}
+
+// src/focus-trap/focusables.ts
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function focusableWithin(container) {
+  return Array.from(
+    container.querySelectorAll(FOCUSABLE_SELECTOR)
+  ).filter((el) => !el.closest("[hidden], [inert]"));
+}
+function nextFocusTarget(items, current, shiftKey, container) {
+  const first = items[0];
+  const last = items[items.length - 1];
+  if (!first || !last) return null;
+  if (!current || !container.contains(current)) return shiftKey ? last : first;
+  if (shiftKey && (current === first || current === container)) return last;
+  if (!shiftKey && current === last) return first;
+  return null;
+}
+
+// src/focus-trap/use-focus-trap.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+var activeTraps = [];
+function useFocusTrap(containerRef, {
+  active,
+  initialFocusRef,
+  returnFocusRef,
+  restoreFocus = true
+}) {
+  const openerRef = useRef2(null);
+  if (active && !openerRef.current && typeof document !== "undefined") {
+    openerRef.current = document.activeElement;
+  }
+  useEffect2(() => {
+    const container = containerRef.current;
+    if (!active || !container) return;
+    const token = {};
+    activeTraps.push(token);
+    if (!container.contains(document.activeElement)) {
+      const target = initialFocusRef?.current ?? focusableWithin(container)[0] ?? container;
+      if (target === container && !container.hasAttribute("tabindex")) {
+        container.setAttribute("tabindex", "-1");
+      }
+      target.focus();
+    }
+    function onKeyDown(event) {
+      if (event.key !== "Tab" || !container) return;
+      if (activeTraps[activeTraps.length - 1] !== token) return;
+      const items = focusableWithin(container);
+      if (items.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const target = nextFocusTarget(
+        items,
+        document.activeElement,
+        event.shiftKey,
+        container
+      );
+      if (target) {
+        event.preventDefault();
+        target.focus();
+      }
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      activeTraps.splice(activeTraps.indexOf(token), 1);
+      const opener = returnFocusRef?.current ?? openerRef.current;
+      openerRef.current = null;
+      if (restoreFocus && opener?.isConnected) opener.focus();
+    };
+  }, [active, containerRef, initialFocusRef, returnFocusRef, restoreFocus]);
+}
+
+// src/escape/use-escape.ts
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+function useEscape(onEscape, active = true) {
+  const handlerRef = useRef3(onEscape);
+  useEffect3(() => {
+    handlerRef.current = onEscape;
+  });
+  useEffect3(() => {
+    if (!active) return;
+    function onKeyDown(event) {
+      if (event.key === "Escape") handlerRef.current();
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [active]);
+}
+
+// src/clipboard/copy-text.ts
+async function copyText(text) {
+  const hasClipboardApi = typeof navigator !== "undefined" && !!navigator.clipboard?.writeText && typeof window !== "undefined" && window.isSecureContext;
+  if (hasClipboardApi) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return { ok: true };
+    } catch {
+    }
+  }
+  if (execCommandCopy(text)) return { ok: true };
+  return { ok: false, reason: hasClipboardApi ? "denied" : "unavailable" };
+}
+function execCommandCopy(text) {
+  if (typeof document === "undefined") return false;
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.readOnly = true;
+  textarea.style.position = "fixed";
+  textarea.style.top = "-1000px";
+  textarea.style.left = "-1000px";
+  textarea.style.fontSize = "16px";
+  document.body.appendChild(textarea);
+  try {
+    textarea.select();
+    textarea.setSelectionRange(0, text.length);
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+// src/clipboard/use-copy-feedback.ts
+import { useCallback, useEffect as useEffect4, useRef as useRef4, useState } from "react";
+function useCopyFeedback({ resetMs = 1500 } = {}) {
+  const [status, setStatus] = useState("idle");
+  const timerRef = useRef4(void 0);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== void 0) clearTimeout(timerRef.current);
+    timerRef.current = void 0;
+  }, []);
+  useEffect4(() => clearTimer, [clearTimer]);
+  const copy = useCallback(
+    async (text) => {
+      const result = await copyText(text);
+      clearTimer();
+      setStatus(result.ok ? "copied" : "failed");
+      timerRef.current = setTimeout(() => setStatus("idle"), resetMs);
+      return result;
+    },
+    [clearTimer, resetMs]
+  );
+  return { copy, status };
+}
+export {
+  BACK_ZONE_PX,
+  CLOSE_DISTANCE_PX,
+  FOCUSABLE_SELECTOR,
+  FORWARD_ZONE_PX,
+  MAX_SWIPE_DURATION_MS,
+  OPEN_DISTANCE_PX,
+  VERTICAL_CANCEL_PX,
+  copyText,
+  focusableWithin,
+  isInOpenZone,
+  isInsideHorizontalScroller,
+  nextFocusTarget,
+  resolveSwipeIntent,
+  useCopyFeedback,
+  useDrawerSwipe,
+  useEscape,
+  useFocusTrap
+};

package/package.json

@@ -1,6 +1,76 @@
 {
   "name": "@develemit/web-hooks",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Shared React behavior hooks for develemit web apps: drawer swipe, focus trap, escape key and clipboard.",
+  "license": "MIT",
+  "author": "Emit Dutcher",
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=20"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./drawer-swipe": {
+      "types": "./dist/drawer-swipe.d.ts",
+      "import": "./dist/drawer-swipe.js",
+      "require": "./dist/drawer-swipe.cjs"
+    },
+    "./focus-trap": {
+      "types": "./dist/focus-trap.d.ts",
+      "import": "./dist/focus-trap.js",
+      "require": "./dist/focus-trap.cjs"
+    },
+    "./escape": {
+      "types": "./dist/escape.d.ts",
+      "import": "./dist/escape.js",
+      "require": "./dist/escape.cjs"
+    },
+    "./clipboard": {
+      "types": "./dist/clipboard.d.ts",
+      "import": "./dist/clipboard.js",
+      "require": "./dist/clipboard.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.0",
+    "typescript-eslint": "^8.0.0",
+    "vitest": "^3.0.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "build": "rm -rf dist && tsup",
+    "check": "pnpm typecheck && pnpm lint && pnpm test && pnpm build",
+    "release": "pnpm check && pnpm publish --access public",
+    "release:dry": "pnpm publish --access public --dry-run"
+  }
 }