add QueryParamProvider to BiProvider

README.md

@@ -39,7 +39,7 @@ yarn upgrade uikit
 | `uikit/utils`      | utility functions                     | -                                       |
 | `uikit/pagination` | pagination                            | Chakra + React + react-icons            |
 | `uikit/layout`     | Header                                | Chakra + React                          |
-| `uikit/core`       | API، BiProvider، Keycloak، Permission | Chakra + React Query + Axios + Keycloak |
+| `uikit/core`       | API، BiProvider، Keycloak، Permission | Chakra + React Query + Axios + Keycloak + Query Params |
 | `uikit/table`      | DataTable                             | Chakra + TanStack Table + Pagination    |
 | `uikit/remote/ui`  | Remote UI components مثل `GBadge`     | Chakra + React + remote static file     |
 
@@ -142,6 +142,8 @@ yarn add framer-motion@^12
 yarn add @tanstack/react-query@^5
 yarn add axios@^1
 yarn add keycloak-js
+yarn add next-query-params@^5.1.0
+yarn add use-query-params@^2.2.2
 ```
 
 ---

dist/core.js

@@ -6,6 +6,8 @@ import { useQueryClient as ee, useMutation as te, useQuery as W, QueryClient as
 import { createRoot as oe } from "react-dom/client";
 import { extendTheme as ie, withDefaultColorScheme as se, ChakraProvider as N, Spinner as ae, Badge as ue } from "@chakra-ui/react";
 import { Global as de } from "@emotion/react";
+import NextAdapterPages from "next-query-params/pages";
+import { QueryParamProvider } from "use-query-params";
 let O = null, o = null, Y = null, v = !1;
 const ce = L(null), le = ({ url: e, realm: r, clientId: t }) => (o || (o = new j({
   url: e,
@@ -508,7 +510,7 @@ function et({
     /* @__PURE__ */ T(Me, {}),
     /* @__PURE__ */ D(ne, { client: Pe, children: [
       h && /* @__PURE__ */ T(ve, { ...u }),
-      b
+      /* @__PURE__ */ T(QueryParamProvider, { adapter: NextAdapterPages, children: b })
     ] })
   ] });
 }

package.json

@@ -56,7 +56,9 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-hook-form": "^7.0.0",
     "react-icons": "^5.0.0",
-    "react-select": "^5.0.0"
+    "react-select": "^5.0.0",
+    "next-query-params": "^5.1.0",
+    "use-query-params": "^2.2.2"
   },
   "peerDependenciesMeta": {
     "@chakra-ui/react": {
@@ -100,6 +102,12 @@
     },
     "react-select": {
       "optional": true
+    },
+    "next-query-params": {
+      "optional": true
+    },
+    "use-query-params": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -118,7 +126,8 @@
     "react-hook-form": "^7.0.0",
     "react-icons": "^5.0.0",
     "react-select": "5",
-    "vite": "5.4.19"
-  },
-  "dependencies": {}
+    "vite": "5.4.19",
+    "next-query-params": "^5.1.0",
+    "use-query-params": "^2.2.2"
+  }
 }

src/core/BiProvider.jsx

@@ -2,6 +2,8 @@ import React, { useEffect, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { Badge, ChakraProvider, Spinner } from "@chakra-ui/react";
 import { QueryClientProvider } from "@tanstack/react-query";
+import NextAdapterPages from "next-query-params/pages";
+import { QueryParamProvider } from "use-query-params";
 import { KeycloakProvider } from "./keycloak.jsx";
 import { PermissionProvider } from "./permission.jsx";
 import { UpdateChecker } from "./UpdateChecker.jsx";
@@ -136,7 +138,9 @@ export function BiProvider({
       <QueryClientProvider client={queryClient}>
         {updateChecker && <UpdateChecker {...updateCheckerProps} />}
 
-        {content}
+        <QueryParamProvider adapter={NextAdapterPages}>
+          {content}
+        </QueryParamProvider>
       </QueryClientProvider>
     </ChakraProvider>
   );

vite.config.js

@@ -25,6 +25,9 @@ const externalPackages = [
   "react-hook-form",
   "react-select",
   "chakra-react-select",
+
+  "use-query-params",
+  "next-query-params",
 ];
 
 export default defineConfig(({ mode }) => {
@@ -112,7 +115,8 @@ export default defineConfig(({ mode }) => {
             id.startsWith("react-dom/") ||
             id.startsWith("react-icons/") ||
             id.startsWith("@emotion/") ||
-            id.startsWith("react-select/")
+            id.startsWith("react-select/") ||
+            id.startsWith("next-query-params/")
           );
         },
 

yarn.lock

@@ -1544,3 +1544,20 @@ yaml@^1.10.0:
   version "1.10.3"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.3.tgz#76e407ed95c42684fb8e14641e5de62fe65bbcb3"
   integrity sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==
+
+next-query-params@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/next-query-params/-/next-query-params-5.1.0.tgz"
+  dependencies:
+    tslib "^2.0.3"
+
+serialize-query-params@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/serialize-query-params/-/serialize-query-params-2.0.4.tgz"
+
+use-query-params@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/use-query-params/-/use-query-params-2.2.2.tgz"
+  dependencies:
+    serialize-query-params "^2.0.3"
+