chore(apollo-vertex): replace unmaintained @uidotdev/usehooks lib

Author: pieman1313

apps/apollo-vertex/package.json

@@ -60,7 +60,6 @@
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-router": "^1.132.31",
     "@tanstack/react-table": "^8.21.3",
-    "@uidotdev/usehooks": "^2.4.1",
     "@vercel/analytics": "^1.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

apps/apollo-vertex/registry.json

@@ -874,7 +874,7 @@
         "@tanstack/react-router",
         "pkce-challenge",
         "sonner",
-        "@uidotdev/usehooks"
+        "@mantine/hooks@^9.0.0"
       ],
       "registryDependencies": [
         "button",
@@ -987,7 +987,7 @@
       "type": "registry:hook",
       "title": "useDataTable",
       "description": "A generic data table hook that manages sorting, filtering, pagination, column visibility, and column order with localStorage persistence.",
-      "dependencies": ["@tanstack/react-table", "@uidotdev/usehooks"],
+      "dependencies": ["@tanstack/react-table", "@mantine/hooks@^9.0.0"],
       "files": [
         {
           "path": "registry/use-data-table/types.ts",

apps/apollo-vertex/registry/shell/shell-company.tsx

@@ -1,4 +1,4 @@
-import { useLocalStorage } from "@uidotdev/usehooks";
+import { useLocalStorage } from "@mantine/hooks";
 import { AnimatePresence, motion } from "framer-motion";
 import { PanelLeft } from "lucide-react";
 import { useState } from "react";
@@ -86,10 +86,10 @@ export const Company = ({
   companyLogo,
 }: CompanyProps) => {
   const { t } = useTranslation();
-  const [isCollapsed, setIsCollapsed] = useLocalStorage(
-    SIDEBAR_COLLAPSED_KEY,
-    false,
-  );
+  const [isCollapsed, setIsCollapsed] = useLocalStorage<boolean>({
+    key: SIDEBAR_COLLAPSED_KEY,
+    defaultValue: false,
+  });
   const iconElement = (
     <motion.div
       className="w-8 h-8 rounded-[4px] bg-primary-700 dark:bg-primary-400 flex items-center justify-center shrink-0"

apps/apollo-vertex/registry/shell/shell-nav-item.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from "@tanstack/react-router";
-import { useLocalStorage } from "@uidotdev/usehooks";
+import { useLocalStorage } from "@mantine/hooks";
 import { AnimatePresence, motion } from "framer-motion";
 import type { LucideIcon } from "lucide-react";
 import {
@@ -25,7 +25,10 @@ interface NavItemProps {
 }
 
 export const NavItem = ({ to, icon: Icon, label }: NavItemProps) => {
-  const [isCollapsed] = useLocalStorage(SIDEBAR_COLLAPSED_KEY, false);
+  const [isCollapsed] = useLocalStorage<boolean>({
+    key: SIDEBAR_COLLAPSED_KEY,
+    defaultValue: false,
+  });
   const { pathname } = useLocation();
   const isActive = pathname === to || pathname.startsWith(`${to}/`);
 

apps/apollo-vertex/registry/shell/shell-sidebar.tsx

@@ -1,4 +1,4 @@
-import { useLocalStorage } from "@uidotdev/usehooks";
+import { useLocalStorage } from "@mantine/hooks";
 import { motion } from "framer-motion";
 import { cn } from "@/lib/utils";
 import type { CompanyLogo, ShellNavItem } from "./shell";
@@ -25,7 +25,10 @@ export const Sidebar = ({
   companyLogo,
   navItems,
 }: SidebarProps) => {
-  const [isCollapsed] = useLocalStorage(SIDEBAR_COLLAPSED_KEY, false);
+  const [isCollapsed] = useLocalStorage<boolean>({
+    key: SIDEBAR_COLLAPSED_KEY,
+    defaultValue: false,
+  });
 
   const sidebarWidth = isCollapsed ? "w-16" : "w-[280px]";
 

apps/apollo-vertex/registry/shell/shell-theme-toggle.tsx

@@ -1,4 +1,4 @@
-import { useLocalStorage } from "@uidotdev/usehooks";
+import { useLocalStorage } from "@mantine/hooks";
 import { Moon, Sun } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/ui/button";
@@ -13,7 +13,10 @@ import { useTheme } from "./shell-theme-provider";
 
 export function ThemeToggle() {
   const { t } = useTranslation();
-  const [isCollapsed] = useLocalStorage(SIDEBAR_COLLAPSED_KEY, false);
+  const [isCollapsed] = useLocalStorage<boolean>({
+    key: SIDEBAR_COLLAPSED_KEY,
+    defaultValue: false,
+  });
   const { setTheme } = useTheme();
 
   return (

apps/apollo-vertex/registry/use-data-table/useEntityDataTable.tsx

@@ -10,7 +10,7 @@ import { useSolution } from "@uipath/vs-core";
 import { useState } from "react";
 
 import { ENTITY_TABLE_STORAGE_PREFIX } from "@/lib/constants";
-import { useLocalStorage } from "@uidotdev/usehooks";
+import { useLocalStorage } from "@mantine/hooks";
 
 import type {
   ColumnDefWithAccessorKey,
@@ -93,10 +93,10 @@ export function useEntityDataTable<
     [],
   );
   const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
-  const [globalFilter, setGlobalFilter] = useLocalStorage(
-    `${ENTITY_TABLE_STORAGE_PREFIX}global-filter-${storageKey}`,
-    "",
-  );
+  const [globalFilter, setGlobalFilter] = useLocalStorage({
+    key: `${ENTITY_TABLE_STORAGE_PREFIX}global-filter-${storageKey}`,
+    defaultValue: "",
+  });
   const [pagination, setPagination] = useState<PaginationState>({
     pageIndex: 0,
     pageSize: 10,

apps/apollo-vertex/registry/use-data-table/usePersistedColumnOrder.ts

@@ -3,7 +3,7 @@
 import type { OnChangeFn } from "@tanstack/react-table";
 
 import { ENTITY_TABLE_STORAGE_PREFIX } from "@/lib/constants";
-import { useLocalStorage } from "@uidotdev/usehooks";
+import { useLocalStorage } from "@mantine/hooks";
 
 export interface UsePersistedColumnOrderOptions {
   storageKey: string;
@@ -14,10 +14,10 @@ export function usePersistedColumnOrder({
   storageKey,
   defaultColumnOrder,
 }: UsePersistedColumnOrderOptions) {
-  const [columnOrder, setColumnOrder] = useLocalStorage<string[]>(
-    `${ENTITY_TABLE_STORAGE_PREFIX}order-${storageKey}`,
-    defaultColumnOrder,
-  );
+  const [columnOrder, setColumnOrder] = useLocalStorage<string[]>({
+    key: `${ENTITY_TABLE_STORAGE_PREFIX}order-${storageKey}`,
+    defaultValue: defaultColumnOrder,
+  });
 
   const onColumnOrderChange: OnChangeFn<string[]> = (updaterOrValue) => {
     const newOrder =

apps/apollo-vertex/registry/use-data-table/usePersistedColumns.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useLocalStorage } from "@uidotdev/usehooks";
+import { useLocalStorage } from "@mantine/hooks";
 import { ENTITY_TABLE_COLUMNS_STORAGE_PREFIX } from "@/lib/constants";
 
 export interface UsePersistedColumnsProps {
@@ -16,10 +16,10 @@ export function usePersistedColumns({
 }: UsePersistedColumnsProps): [string[], (columns: string[]) => void] {
   const fullKey = `${ENTITY_TABLE_COLUMNS_STORAGE_PREFIX}${storageKey}`;
 
-  const [rawColumns, setRawColumns] = useLocalStorage<string[]>(
-    fullKey,
-    defaultColumns,
-  );
+  const [rawColumns, setRawColumns] = useLocalStorage<string[]>({
+    key: fullKey,
+    defaultValue: defaultColumns,
+  });
 
   const visibleColumns = availableColumns
     ? rawColumns.filter((key) => availableColumns.includes(key))

apps/apollo-vertex/registry/use-data-table/usePersistedSorting.ts

@@ -3,7 +3,7 @@
 import type { OnChangeFn, SortingState } from "@tanstack/react-table";
 
 import { ENTITY_TABLE_STORAGE_PREFIX } from "@/lib/constants";
-import { useLocalStorage } from "@uidotdev/usehooks";
+import { useLocalStorage } from "@mantine/hooks";
 
 export interface UsePersistedSortingOptions {
   storageKey: string;
@@ -12,10 +12,10 @@ export interface UsePersistedSortingOptions {
 export function usePersistedSorting({
   storageKey,
 }: UsePersistedSortingOptions) {
-  const [sorting, setSorting] = useLocalStorage<SortingState>(
-    `${ENTITY_TABLE_STORAGE_PREFIX}sorting-${storageKey}`,
-    [],
-  );
+  const [sorting, setSorting] = useLocalStorage<SortingState>({
+    key: `${ENTITY_TABLE_STORAGE_PREFIX}sorting-${storageKey}`,
+    defaultValue: [],
+  });
 
   const onSortingChange: OnChangeFn<SortingState> = (updaterOrValue) => {
     const newSorting =