react-permission-gate 0.1.0

package/dist/react-router/index.d.cts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ProtectedRouteProps {
+    /** Required permission to access route */
+    permission?: string;
+    /** Allow access if user has ANY of these permissions */
+    anyOf?: string[];
+    /** Allow access if user has ALL of these permissions */
+    allOf?: string[];
+    /** Route content */
+    children: ReactNode;
+    /** Redirect path when access is denied (default: "/") */
+    redirectTo?: string;
+    /** Component to show while loading (default: null) */
+    loadingComponent?: ReactNode;
+}
+/**
+ * Route wrapper that checks permissions before rendering.
+ * Redirects when permission check fails. Admin users bypass all checks.
+ *
+ * @example
+ * <Route path="/users" element={
+ *   <ProtectedRoute permission="users.read">
+ *     <UsersPage />
+ *   </ProtectedRoute>
+ * } />
+ */
+declare function ProtectedRoute({ permission, anyOf, allOf, children, redirectTo, loadingComponent, }: ProtectedRouteProps): react_jsx_runtime.JSX.Element;
+
+export { ProtectedRoute, type ProtectedRouteProps };

package/dist/react-router/index.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ProtectedRouteProps {
+    /** Required permission to access route */
+    permission?: string;
+    /** Allow access if user has ANY of these permissions */
+    anyOf?: string[];
+    /** Allow access if user has ALL of these permissions */
+    allOf?: string[];
+    /** Route content */
+    children: ReactNode;
+    /** Redirect path when access is denied (default: "/") */
+    redirectTo?: string;
+    /** Component to show while loading (default: null) */
+    loadingComponent?: ReactNode;
+}
+/**
+ * Route wrapper that checks permissions before rendering.
+ * Redirects when permission check fails. Admin users bypass all checks.
+ *
+ * @example
+ * <Route path="/users" element={
+ *   <ProtectedRoute permission="users.read">
+ *     <UsersPage />
+ *   </ProtectedRoute>
+ * } />
+ */
+declare function ProtectedRoute({ permission, anyOf, allOf, children, redirectTo, loadingComponent, }: ProtectedRouteProps): react_jsx_runtime.JSX.Element;
+
+export { ProtectedRoute, type ProtectedRouteProps };

package/dist/react-router/index.js

@@ -0,0 +1,74 @@
+// src/react-router/protected-route.tsx
+import { Navigate, useLocation } from "react-router-dom";
+
+// src/react/use-permissions.ts
+import { useContext } from "react";
+
+// src/react/context.ts
+import { createContext } from "react";
+var PermissionContext = createContext(
+  null
+);
+
+// src/react/use-permissions.ts
+function usePermissions() {
+  const context = useContext(PermissionContext);
+  if (!context) {
+    throw new Error(
+      "usePermissions must be used within a <PermissionProvider>"
+    );
+  }
+  const { checker, permissions, userType, isAdmin, isLoading } = context;
+  return {
+    /** Raw permission strings */
+    permissions,
+    /** User type string */
+    userType,
+    /** Whether the user is an admin type */
+    isAdmin,
+    /** Whether permission data is still loading */
+    isLoading,
+    /** Check if user has a specific permission */
+    hasPermission: (permission) => checker.hasPermission(permission),
+    /** Check if user has ANY of the given permissions */
+    hasAnyPermission: (permissionList) => checker.hasAnyPermission(permissionList),
+    /** Check if user has ALL of the given permissions */
+    hasAllPermissions: (permissionList) => checker.hasAllPermissions(permissionList),
+    /** Detailed permission check with reason */
+    check: (permission) => checker.check(permission)
+  };
+}
+
+// src/react-router/protected-route.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+function ProtectedRoute({
+  permission,
+  anyOf,
+  allOf,
+  children,
+  redirectTo = "/",
+  loadingComponent = null
+}) {
+  const location = useLocation();
+  const { hasPermission, hasAnyPermission, hasAllPermissions, isAdmin, isLoading } = usePermissions();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Fragment, { children: loadingComponent });
+  }
+  if (isAdmin) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (permission && !hasPermission(permission)) {
+    return /* @__PURE__ */ jsx(Navigate, { to: redirectTo, state: { from: location }, replace: true });
+  }
+  if (anyOf && anyOf.length > 0 && !hasAnyPermission(anyOf)) {
+    return /* @__PURE__ */ jsx(Navigate, { to: redirectTo, state: { from: location }, replace: true });
+  }
+  if (allOf && allOf.length > 0 && !hasAllPermissions(allOf)) {
+    return /* @__PURE__ */ jsx(Navigate, { to: redirectTo, state: { from: location }, replace: true });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export {
+  ProtectedRoute
+};
+//# sourceMappingURL=index.js.map

package/dist/react-router/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react-router/protected-route.tsx","../../src/react/use-permissions.ts","../../src/react/context.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Navigate, useLocation } from \"react-router-dom\";\nimport { usePermissions } from \"../react/use-permissions\";\n\nexport interface ProtectedRouteProps {\n  /** Required permission to access route */\n  permission?: string;\n  /** Allow access if user has ANY of these permissions */\n  anyOf?: string[];\n  /** Allow access if user has ALL of these permissions */\n  allOf?: string[];\n  /** Route content */\n  children: ReactNode;\n  /** Redirect path when access is denied (default: \"/\") */\n  redirectTo?: string;\n  /** Component to show while loading (default: null) */\n  loadingComponent?: ReactNode;\n}\n\n/**\n * Route wrapper that checks permissions before rendering.\n * Redirects when permission check fails. Admin users bypass all checks.\n *\n * @example\n * <Route path=\"/users\" element={\n *   <ProtectedRoute permission=\"users.read\">\n *     <UsersPage />\n *   </ProtectedRoute>\n * } />\n */\nexport function ProtectedRoute({\n  permission,\n  anyOf,\n  allOf,\n  children,\n  redirectTo = \"/\",\n  loadingComponent = null,\n}: ProtectedRouteProps) {\n  const location = useLocation();\n  const { hasPermission, hasAnyPermission, hasAllPermissions, isAdmin, isLoading } =\n    usePermissions();\n\n  if (isLoading) {\n    return <>{loadingComponent}</>;\n  }\n\n  if (isAdmin) {\n    return <>{children}</>;\n  }\n\n  if (permission && !hasPermission(permission)) {\n    return <Navigate to={redirectTo} state={{ from: location }} replace />;\n  }\n\n  if (anyOf && anyOf.length > 0 && !hasAnyPermission(anyOf)) {\n    return <Navigate to={redirectTo} state={{ from: location }} replace />;\n  }\n\n  if (allOf && allOf.length > 0 && !hasAllPermissions(allOf)) {\n    return <Navigate to={redirectTo} state={{ from: location }} replace />;\n  }\n\n  return <>{children}</>;\n}\n","import { useContext } from \"react\";\nimport type { PermissionCheckResult } from \"../core/types\";\nimport { PermissionContext } from \"./context\";\n\n/**\n * Hook for checking user permissions within a PermissionProvider.\n *\n * @example\n * const { hasPermission, isAdmin } = usePermissions();\n *\n * if (hasPermission(\"users.read\")) { ... }\n * if (isAdmin) { ... }\n */\nexport function usePermissions() {\n  const context = useContext(PermissionContext);\n\n  if (!context) {\n    throw new Error(\n      \"usePermissions must be used within a <PermissionProvider>\",\n    );\n  }\n\n  const { checker, permissions, userType, isAdmin, isLoading } = context;\n\n  return {\n    /** Raw permission strings */\n    permissions,\n    /** User type string */\n    userType,\n    /** Whether the user is an admin type */\n    isAdmin,\n    /** Whether permission data is still loading */\n    isLoading,\n    /** Check if user has a specific permission */\n    hasPermission: (permission: string): boolean =>\n      checker.hasPermission(permission),\n    /** Check if user has ANY of the given permissions */\n    hasAnyPermission: (permissionList: string[]): boolean =>\n      checker.hasAnyPermission(permissionList),\n    /** Check if user has ALL of the given permissions */\n    hasAllPermissions: (permissionList: string[]): boolean =>\n      checker.hasAllPermissions(permissionList),\n    /** Detailed permission check with reason */\n    check: (permission: string): PermissionCheckResult =>\n      checker.check(permission),\n  };\n}\n","import { createContext } from \"react\";\nimport type { PermissionChecker } from \"../core/permission-checker\";\n\nexport interface PermissionContextValue {\n  checker: PermissionChecker;\n  permissions: string[];\n  userType: string;\n  isAdmin: boolean;\n  isLoading: boolean;\n}\n\nexport const PermissionContext = createContext<PermissionContextValue | null>(\n  null,\n);\n"],"mappings":";AACA,SAAS,UAAU,mBAAmB;;;ACDtC,SAAS,kBAAkB;;;ACA3B,SAAS,qBAAqB;AAWvB,IAAM,oBAAoB;AAAA,EAC/B;AACF;;;ADAO,SAAS,iBAAiB;AAC/B,QAAM,UAAU,WAAW,iBAAiB;AAE5C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AAEA,QAAM,EAAE,SAAS,aAAa,UAAU,SAAS,UAAU,IAAI;AAE/D,SAAO;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA,eAAe,CAAC,eACd,QAAQ,cAAc,UAAU;AAAA;AAAA,IAElC,kBAAkB,CAAC,mBACjB,QAAQ,iBAAiB,cAAc;AAAA;AAAA,IAEzC,mBAAmB,CAAC,mBAClB,QAAQ,kBAAkB,cAAc;AAAA;AAAA,IAE1C,OAAO,CAAC,eACN,QAAQ,MAAM,UAAU;AAAA,EAC5B;AACF;;;ADHW;AAbJ,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,mBAAmB;AACrB,GAAwB;AACtB,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,eAAe,kBAAkB,mBAAmB,SAAS,UAAU,IAC7E,eAAe;AAEjB,MAAI,WAAW;AACb,WAAO,gCAAG,4BAAiB;AAAA,EAC7B;AAEA,MAAI,SAAS;AACX,WAAO,gCAAG,UAAS;AAAA,EACrB;AAEA,MAAI,cAAc,CAAC,cAAc,UAAU,GAAG;AAC5C,WAAO,oBAAC,YAAS,IAAI,YAAY,OAAO,EAAE,MAAM,SAAS,GAAG,SAAO,MAAC;AAAA,EACtE;AAEA,MAAI,SAAS,MAAM,SAAS,KAAK,CAAC,iBAAiB,KAAK,GAAG;AACzD,WAAO,oBAAC,YAAS,IAAI,YAAY,OAAO,EAAE,MAAM,SAAS,GAAG,SAAO,MAAC;AAAA,EACtE;AAEA,MAAI,SAAS,MAAM,SAAS,KAAK,CAAC,kBAAkB,KAAK,GAAG;AAC1D,WAAO,oBAAC,YAAS,IAAI,YAAY,OAAO,EAAE,MAAM,SAAS,GAAG,SAAO,MAAC;AAAA,EACtE;AAEA,SAAO,gCAAG,UAAS;AACrB;","names":[]}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "react-permission-gate",
+  "version": "0.1.0",
+  "description": "Flexible, type-safe permission management for React and React Router applications",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/core/index.js",
+      "require": "./dist/core/index.cjs",
+      "types": "./dist/core/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs",
+      "types": "./dist/react/index.d.ts"
+    },
+    "./react-router": {
+      "import": "./dist/react-router/index.js",
+      "require": "./dist/react-router/index.cjs",
+      "types": "./dist/react-router/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "permissions",
+    "authorization",
+    "rbac",
+    "access-control",
+    "react-router",
+    "gate"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-router-dom": ">=6"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
+    "jsdom": "^26.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.4.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2",
+    "vitest": "^3.1.1"
+  }
+}