@okyrychenko-dev/react-action-guard-router 0.2.0

package/dist/types-C3CPuZip.d.ts

@@ -0,0 +1,105 @@
+/**
+ * Core types for navigation blocking functionality
+ */
+/**
+ * Base configuration for navigation blocking
+ */
+interface BaseNavigationBlockerOptions {
+    /**
+     * Condition to determine if blocking should be active
+     * Can be a boolean value or a function that returns a boolean
+     */
+    when?: boolean | (() => boolean);
+    /**
+     * Scope(s) from react-action-guard to check for blocking
+     * When specified, navigation is blocked if any of these scopes are currently blocked
+     */
+    scope?: string | Array<string>;
+    /**
+     * Message to show in confirmation dialog
+     * @default "Are you sure you want to leave? Changes you made may not be saved."
+     */
+    message?: string;
+    /**
+     * Callback when navigation is blocked
+     */
+    onBlock?: () => void;
+    /**
+     * Callback when navigation is allowed
+     */
+    onAllow?: () => void;
+    /**
+     * Whether to also block browser unload events (tab close, refresh)
+     * @default true
+     */
+    blockBrowserUnload?: boolean;
+    /**
+     * Custom confirmation handler for showing your own dialog UI.
+     *
+     * If provided, this will be called instead of window.confirm() to allow
+     * custom dialog components. Async handlers are supported, but note:
+     * - Next.js Pages Router re-attempts navigation after resolve.
+     * - Router adapters may ignore stale resolves if a newer confirm starts.
+     *
+     * @param message - The confirmation message to display
+     * @returns boolean | Promise<boolean> - true to allow navigation, false to block
+     *
+     * @example
+     * ```tsx
+     * // With custom dialog component
+     * const [dialogState, setDialogState] = useState(null);
+     *
+     * onConfirm: (message) => {
+     *   return new Promise((resolve) => {
+     *     setDialogState({ message, resolve });
+     *   });
+     * }
+     *
+     * // In JSX:
+     * {dialogState && (
+     *   <CustomDialog
+     *     message={dialogState.message}
+     *     onConfirm={() => {
+     *       dialogState.resolve(true);
+     *       setDialogState(null);
+     *     }}
+     *     onCancel={() => {
+     *       dialogState.resolve(false);
+     *       setDialogState(null);
+     *     }}
+     *   />
+     * )}
+     * ```
+     */
+    onConfirm?: (message: string) => boolean | PromiseLike<boolean>;
+}
+/**
+ * Configuration for browser beforeunload event
+ */
+interface BeforeUnloadOptions {
+    /**
+     * Condition to determine if blocking should be active
+     */
+    when: boolean | (() => boolean);
+    /**
+     * Custom message (may be ignored by modern browsers)
+     * @default "Changes you made may not be saved."
+     */
+    message?: string;
+}
+/**
+ * Return type for navigation blocker hooks
+ */
+interface NavigationBlockerReturn {
+    /**
+     * Whether the blocking condition is currently active.
+     */
+    isBlocking: boolean;
+    /**
+     * Whether navigation is currently being intercepted.
+     * Only available for adapters that can observe active interception state.
+     */
+    isIntercepting?: boolean;
+}
+
+export type { BaseNavigationBlockerOptions as B, NavigationBlockerReturn as N, BeforeUnloadOptions as a };

package/package.json

@@ -0,0 +1,139 @@
+{
+  "name": "@okyrychenko-dev/react-action-guard-router",
+  "version": "0.2.0",
+  "type": "module",
+  "description": "Navigation blocking adapters for React Action Guard across React Router, TanStack Router, and Next.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react-router": {
+      "types": "./dist/react-router/index.d.ts",
+      "import": "./dist/react-router/index.js",
+      "require": "./dist/react-router/index.cjs"
+    },
+    "./tanstack-router": {
+      "types": "./dist/tanstack-router/index.d.ts",
+      "import": "./dist/tanstack-router/index.js",
+      "require": "./dist/tanstack-router/index.cjs"
+    },
+    "./nextjs": {
+      "types": "./dist/nextjs/index.d.ts",
+      "import": "./dist/nextjs/index.js",
+      "require": "./dist/nextjs/index.cjs"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "npm run lint:fix && prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "npm run lint && prettier --check \"src/**/*.{ts,tsx}\"",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "prepare": "husky",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "react",
+    "router",
+    "navigation",
+    "ui-blocking",
+    "react-router",
+    "tanstack-router",
+    "nextjs",
+    "navigation-blocking",
+    "route-guard",
+    "unsaved-changes"
+  ],
+  "author": "Oleksii Kyrychenko alexey.kirichenko@gmail.com",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/okyrychenko-dev/react-action-guard-router"
+  },
+  "bugs": {
+    "url": "https://github.com/okyrychenko-dev/react-action-guard-router/issues"
+  },
+  "homepage": "https://github.com/okyrychenko-dev/react-action-guard-router#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@okyrychenko-dev/react-action-guard": "^1.0.1",
+    "@tanstack/react-router": "^1.0.0",
+    "next": "^13.4.0 || ^14.0.0 || ^15.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-router-dom": "^6.0.0 || ^7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-router-dom": {
+      "optional": true
+    },
+    "@tanstack/react-router": {
+      "optional": true
+    },
+    "next": {
+      "optional": true
+    }
+  },
+  "overrides": {
+    "@okyrychenko-dev/react-zustand-toolkit": "^0.3.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@okyrychenko-dev/react-action-guard": "^1.0.1",
+    "@storybook/addon-a11y": "10.0.8",
+    "@storybook/addon-docs": "10.0.8",
+    "@storybook/react-vite": "10.0.8",
+    "@tanstack/react-router": "^1.94.4",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^24.10.4",
+    "@types/react": "^19.2.5",
+    "@typescript-eslint/eslint-plugin": "^8.46.4",
+    "@typescript-eslint/parser": "^8.46.4",
+    "@vitest/coverage-v8": "^4.0.9",
+    "@vitest/ui": "^4.0.9",
+    "clsx": "^2.1.1",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-storybook": "10.0.8",
+    "happy-dom": "^20.0.10",
+    "husky": "^9.1.7",
+    "next": "^15.1.6",
+    "prettier": "^3.6.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.1.3",
+    "remark-gfm": "^4.0.1",
+    "storybook": "10.0.8",
+    "tsup": "^8.5.1",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.46.4",
+    "vitest": "^4.0.9",
+    "zustand": "^5.0.8"
+  }
+}