From e7e9458af8909349199f269a357ff4a65f1c284b Mon Sep 17 00:00:00 2001 From: Cohan Carpentier Date: Tue, 12 Nov 2024 22:02:18 -0500 Subject: [PATCH] remove uselocalstorage --- README.md | 2 +- hooks/use-local-storage.ts | 155 -------------------------- package.json | 3 +- stories/use-local-storage.stories.tsx | 55 --------- 4 files changed, 2 insertions(+), 213 deletions(-) delete mode 100644 hooks/use-local-storage.ts delete mode 100644 stories/use-local-storage.stories.tsx diff --git a/README.md b/README.md index 4ebb82d..bd65371 100644 --- a/README.md +++ b/README.md @@ -18,4 +18,4 @@ https://www.npmjs.com/package/@risc0/ui | Statements | Branches | Functions | Lines | | --------------------------- | ----------------------- | ------------------------- | ----------------- | -| ![Statements](https://img.shields.io/badge/statements-35.89%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-78.37%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-71.73%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-35.89%25-red.svg?style=flat) | +| ![Statements](https://img.shields.io/badge/statements-38.87%25-red.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-79.16%25-red.svg?style=flat) | ![Functions](https://img.shields.io/badge/functions-72.72%25-red.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-38.87%25-red.svg?style=flat) | diff --git a/hooks/use-local-storage.ts b/hooks/use-local-storage.ts deleted file mode 100644 index 6096ac7..0000000 --- a/hooks/use-local-storage.ts +++ /dev/null @@ -1,155 +0,0 @@ -import { type Dispatch, type SetStateAction, useCallback, useEffect, useState } from "react"; -import { useEventCallback, useEventListener } from "usehooks-ts"; - -declare global { - // eslint-disable-next-line @typescript-eslint/consistent-type-definitions - interface WindowEventMap { - "local-storage": CustomEvent; - } -} - -type UseLocalStorageOptions = { - serializer?: (value: T) => string; - deserializer?: (value: string) => T; - initializeWithValue?: boolean; -}; - -const IS_SERVER = typeof window === "undefined"; - -export function useLocalStorage( - key: string, - initialValue: T | (() => T), - options: UseLocalStorageOptions = {}, -): [T, Dispatch>, () => void] { - const { initializeWithValue = true } = options; - - const serializer = useCallback<(value: T) => string>( - (value) => { - if (options.serializer) { - return options.serializer(value); - } - - return JSON.stringify(value); - }, - [options], - ); - - const deserializer = useCallback<(value: string) => T>( - (value) => { - if (options.deserializer) { - return options.deserializer(value); - } - // Support 'undefined' as a value - if (value === "undefined") { - return undefined as unknown as T; - } - - const defaultValue = initialValue instanceof Function ? initialValue() : initialValue; - - let parsed: unknown; - try { - parsed = JSON.parse(value); - } catch (error) { - console.error("Error parsing JSON:", error); - return defaultValue; // Return initialValue if parsing fails - } - - return parsed as T; - }, - [options, initialValue], - ); - - // Get from local storage then - // parse stored json or return initialValue - const readValue = useCallback((): T => { - const initialValueToUse = initialValue instanceof Function ? initialValue() : initialValue; - - // Prevent build error "window is undefined" but keep working - if (IS_SERVER) { - return initialValueToUse; - } - - try { - const raw = window.localStorage.getItem(key); - return raw ? deserializer(raw) : initialValueToUse; - } catch (error) { - console.warn(`Error reading localStorage key “${key}”:`, error); - return initialValueToUse; - } - }, [initialValue, key, deserializer]); - - const [storedValue, setStoredValue] = useState(() => { - if (initializeWithValue) { - return readValue(); - } - - return initialValue instanceof Function ? initialValue() : initialValue; - }); - - // Return a wrapped version of useState's setter function that ... - // ... persists the new value to localStorage. - const setValue: Dispatch> = useEventCallback((value) => { - // Prevent build error "window is undefined" but keeps working - if (IS_SERVER) { - console.warn(`Tried setting localStorage key “${key}” even though environment is not a client`); - } - - try { - // Allow value to be a function so we have the same API as useState - const newValue = value instanceof Function ? value(readValue()) : value; - - // Save to local storage - window.localStorage.setItem(key, serializer(newValue)); - - // Save state - setStoredValue(newValue); - - // We dispatch a custom event so every similar useLocalStorage hook is notified - window.dispatchEvent(new StorageEvent("local-storage", { key })); - } catch (error) { - console.warn(`Error setting localStorage key “${key}”:`, error); - } - }); - - const removeValue = useEventCallback(() => { - // Prevent build error "window is undefined" but keeps working - if (IS_SERVER) { - console.warn(`Tried removing localStorage key “${key}” even though environment is not a client`); - } - - const defaultValue = initialValue instanceof Function ? initialValue() : initialValue; - - // Remove the key from local storage - window.localStorage.removeItem(key); - - // Save state with default value - setStoredValue(defaultValue); - - // We dispatch a custom event so every similar useLocalStorage hook is notified - window.dispatchEvent(new StorageEvent("local-storage", { key })); - }); - - // biome-ignore lint/correctness/useExhaustiveDependencies: ignore - useEffect(() => { - setStoredValue(readValue()); - }, []); - - const handleStorageChange = useCallback( - (event: StorageEvent | CustomEvent) => { - if ((event as StorageEvent).key && (event as StorageEvent).key !== key) { - return; - } - setStoredValue(readValue()); - }, - [key, readValue], - ); - - // this only works for other documents, not the current one - useEventListener("storage", handleStorageChange); - - // this is a custom event, triggered in writeValueToLocalStorage - // See: useLocalStorage() - useEventListener("local-storage", handleStorageChange); - - return [storedValue, setValue, removeValue]; -} diff --git a/package.json b/package.json index 9f2cf84..e57f7ec 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@risc0/ui", - "version": "0.0.211", + "version": "0.0.212", "private": false, "sideEffects": false, "type": "module", @@ -45,7 +45,6 @@ "tailwindcss": "3.4.14", "tailwindcss-animate": "1.0.7", "typescript": "5.7.0-dev.20240925", - "usehooks-ts": "3.1.0", "vaul": "1.1.1" }, "devDependencies": { diff --git a/stories/use-local-storage.stories.tsx b/stories/use-local-storage.stories.tsx deleted file mode 100644 index 61944df..0000000 --- a/stories/use-local-storage.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/* c8 ignore start */ -import { Button } from "button"; -import { useLocalStorage } from "../hooks/use-local-storage"; -import { Input } from "../input"; -import { Label } from "../label"; - -export function Default() { - const [value, setValue] = useLocalStorage("example-key", "initial value"); - - return ( -
-

useLocalStorage Hook

-

Current value: {value}

-
- - -
-
- ); -} - -export function MultipleValues() { - const [name, setName] = useLocalStorage("user-name", ""); - const [age, setAge] = useLocalStorage("user-age", 0); - - const clearAll = () => { - setName(""); - setAge(0); - }; - - return ( -
-

useLocalStorage Hook - Multiple Values

-
-
- - setName(e.target.value)} /> -
-
- - setAge(Number(e.target.value))} /> -
-
-
-

Stored Name: {name}

-

Stored Age: {age}

-
- -
- ); -}