[UI v2] feat: Adds useLocalStorage hook (#16900)

ui-v2/src/hooks/use-local-storage.test.ts

@@ -0,0 +1,21 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { useLocalStorage } from "./use-local-storage";
+
+describe("useLocalStorage ", () => {
+	it("is able to synchronize state with local storage", () => {
+		// TEST
+		const { result } = renderHook(() => useLocalStorage("name", ""));
+		const [, setState] = result.current;
+
+		expect(localStorage.getItem).toBeCalledWith("name");
+
+		act(() => setState("new value"));
+		const [nextState] = result.current;
+
+		// nb: appends a set of "" when storing in local storage
+		expect(nextState).toEqual("new value");
+		expect(localStorage.setItem).toBeCalledWith("name", '"new value"');
+	});
+});

ui-v2/src/hooks/use-local-storage.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+
+/**
+ *
+ * @param key local storage key
+ * @param initialValue initial value of stored state
+ * @returns a hook to synchronize state with local storage
+ *
+ * @example
+ * ```ts
+ * function MyComponent() {
+ *   const [name, setName] = useLocalStorage<string>('name', '');
+ *   return (
+ *     <div>
+ *       <input type="text" value={name} onChange={e => setName(e.target.value)} />
+ *       <p>Hello, {name}!</p>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useLocalStorage<T>(
+	key: string,
+	initialValue: T,
+): [T, (value: T | ((prevValue: T) => T)) => void] {
+	const [storedValue, setStoredValue] = useState<T>(() => {
+		if (typeof window !== "undefined") {
+			try {
+				const item = localStorage.getItem(key);
+				return item ? (JSON.parse(item) as T) : initialValue;
+			} catch (error) {
+				console.log(error);
+				return initialValue;
+			}
+		} else {
+			return initialValue;
+		}
+	});
+
+	useEffect(() => {
+		if (typeof window !== "undefined") {
+			localStorage.setItem(key, JSON.stringify(storedValue));
+		}
+	}, [key, storedValue]);
+
+	return [storedValue, setStoredValue];
+}

ui-v2/tests/setup.ts

@@ -59,6 +59,17 @@ class ResizeObserverMock {
 
 global.ResizeObserver = ResizeObserverMock;
 
+// Mock localStorage
+const localStorageMock: Storage = {
+	key: vi.fn(),
+	length: 0,
+	getItem: vi.fn(),
+	setItem: vi.fn(),
+	removeItem: vi.fn(),
+	clear: vi.fn(),
+};
+global.localStorage = localStorageMock;
+
 // Add this along with the ResizeObserver mock
 Element.prototype.getBoundingClientRect = vi.fn(() => ({
 	width: 500,