@oneplatformdev/hooks 0.1.0-8 → 0.1.0-80

package/src/useLocalStorage/useLocalStorage.ts

@@ -1,191 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-import type { Dispatch, SetStateAction } from 'react'
-
-import { useEventCallback } from '../useEventCallback'
-import { useEventListener } from '../useEventListener'
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-  interface WindowEventMap {
-    'local-storage': CustomEvent
-  }
-}
-
-/**
- * Options for customizing the behavior of serialization and deserialization.
- * @template T - The type of the state to be stored in local storage.
- */
-type UseLocalStorageOptions<T> = {
-  /** A function to serialize the value before storing it. */
-  serializer?: (value: T) => string
-  /** A function to deserialize the stored value. */
-  deserializer?: (value: string) => T
-  /**
-   * If `true` (default), the hook will initialize reading the local storage. In SSR, you should set it to `false`, returning the initial value initially.
-   * @default true
-   */
-  initializeWithValue?: boolean
-}
-
-const IS_SERVER = typeof window === 'undefined'
-
-/**
- * Custom hook that uses the [`localStorage API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to persist state across page reloads.
- * @template T - The type of the state to be stored in local storage.
- * @param {string} key - The key under which the value will be stored in local storage.
- * @param {T | (() => T)} initialValue - The initial value of the state or a function that returns the initial value.
- * @param {UseLocalStorageOptions<T>} [options] - Options for customizing the behavior of serialization and deserialization (optional).
- * @returns {[T, Dispatch<SetStateAction<T>>, () => void]} A tuple containing the stored value, a function to set the value and a function to remove the key from storage.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-local-storage)
- * @example
- * ```tsx
- * const [count, setCount, removeCount] = useLocalStorage('count', 0);
- * // Access the `count` value, the `setCount` function to update it and `removeCount` function to remove the key from storage.
- * ```
- */
-export function useLocalStorage<T>(
-  key: string,
-  initialValue: T | (() => T),
-  options: UseLocalStorageOptions<T> = {},
-): [T, Dispatch<SetStateAction<T>>, () => 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<SetStateAction<T>> = 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 }))
-  })
-
-  useEffect(() => {
-    setStoredValue(readValue())
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key])
-
-  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]
-}

package/src/useLockBody/index.ts

@@ -1 +0,0 @@
-export * from './useLockBody'

package/src/useLockBody/useLockBody.tsx

@@ -1,12 +0,0 @@
-import * as React from "react"
-
-// @see https://usehooks.com/useLockBodyScroll.
-export function useLockBody() {
-  React.useLayoutEffect((): (() => void) => {
-    const originalStyle: string = window.getComputedStyle(
-      document.body
-    ).overflow
-    document.body.style.overflow = "hidden"
-    return () => (document.body.style.overflow = originalStyle)
-  }, [])
-}

package/src/useMap/index.ts

@@ -1 +0,0 @@
-export * from './useMap'

package/src/useMap/useMap.ts

@@ -1,83 +0,0 @@
-import { useCallback, useState } from 'react'
-
-/**
- * Represents the type for either a Map or an array of key-value pairs.
- * @template K - The type of keys in the map.
- * @template V - The type of values in the map.
- */
-type MapOrEntries<K, V> = Map<K, V> | [K, V][]
-
-/**
- * Represents the actions available to interact with the map state.
- * @template K - The type of keys in the map.
- * @template V - The type of values in the map.
- */
-type UseMapActions<K, V> = {
-  /** Set a key-value pair in the map. */
-  set: (key: K, value: V) => void
-  /** Set all key-value pairs in the map. */
-  setAll: (entries: MapOrEntries<K, V>) => void
-  /** Remove a key-value pair from the map. */
-  remove: (key: K) => void
-  /** Reset the map to an empty state. */
-  reset: Map<K, V>['clear']
-}
-
-/**
- * Represents the return type of the `useMap` hook.
- * We hide some setters from the returned map to disable autocompletion.
- * @template K - The type of keys in the map.
- * @template V - The type of values in the map.
- */
-type UseMapReturn<K, V> = [
-  Omit<Map<K, V>, 'set' | 'clear' | 'delete'>,
-  UseMapActions<K, V>,
-]
-
-/**
- * Custom hook that manages a key-value [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) state with setter actions.
- * @template K - The type of keys in the map.
- * @template V - The type of values in the map.
- * @param {MapOrEntries<K, V>} [initialState] - The initial state of the map as a Map or an array of key-value pairs (optional).
- * @returns {UseMapReturn<K, V>} A tuple containing the map state and actions to interact with the map.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-map)
- * @example
- * ```tsx
- * const [map, mapActions] = useMap();
- * // Access the `map` state and use `mapActions` to set, remove, or reset entries.
- * ```
- */
-export function useMap<K, V>(
-  initialState: MapOrEntries<K, V> = new Map(),
-): UseMapReturn<K, V> {
-  const [map, setMap] = useState(new Map(initialState))
-
-  const actions: UseMapActions<K, V> = {
-    set: useCallback((key, value) => {
-      setMap(prev => {
-        const copy = new Map(prev)
-        copy.set(key, value)
-        return copy
-      })
-    }, []),
-
-    setAll: useCallback(entries => {
-      setMap(() => new Map(entries))
-    }, []),
-
-    remove: useCallback(key => {
-      setMap(prev => {
-        const copy = new Map(prev)
-        copy.delete(key)
-        return copy
-      })
-    }, []),
-
-    reset: useCallback(() => {
-      setMap(() => new Map())
-    }, []),
-  }
-
-  return [map, actions]
-}

package/src/useMediaQuery/index.ts

@@ -1 +0,0 @@
-export * from './useMediaQuery'

package/src/useMediaQuery/useMediaQuery.ts

@@ -1,83 +0,0 @@
-import { useState } from 'react'
-
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect'
-
-/** Hook options. */
-type UseMediaQueryOptions = {
-  /**
-   * The default value to return if the hook is being run on the server.
-   * @default false
-   */
-  defaultValue?: boolean
-  /**
-   * If `true` (default), the hook will initialize reading the media query. In SSR, you should set it to `false`, returning `options.defaultValue` or `false` initially.
-   * @default true
-   */
-  initializeWithValue?: boolean
-}
-
-const IS_SERVER = typeof window === 'undefined'
-
-/**
- * Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
- * @param {string} query - The media query to track.
- * @param {?UseMediaQueryOptions} [options] - The options for customizing the behavior of the hook (optional).
- * @returns {boolean} The current state of the media query (true if the query matches, false otherwise).
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-media-query)
- * @example
- * ```tsx
- * const isSmallScreen = useMediaQuery('(max-width: 600px)');
- * // Use `isSmallScreen` to conditionally apply styles or logic based on the screen size.
- * ```
- */
-export function useMediaQuery(
-  query: string,
-  {
-    defaultValue = false,
-    initializeWithValue = true,
-  }: UseMediaQueryOptions = {},
-): boolean {
-  const getMatches = (query: string): boolean => {
-    if (IS_SERVER) {
-      return defaultValue
-    }
-    return window.matchMedia(query).matches
-  }
-
-  const [matches, setMatches] = useState<boolean>(() => {
-    if (initializeWithValue) {
-      return getMatches(query)
-    }
-    return defaultValue
-  })
-
-  // Handles the change event of the media query.
-  function handleChange() {
-    setMatches(getMatches(query))
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    const matchMedia = window.matchMedia(query)
-
-    // Triggered at the first client-side load and if query changes
-    handleChange()
-
-    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
-    if (matchMedia.addListener) {
-      matchMedia.addListener(handleChange)
-    } else {
-      matchMedia.addEventListener('change', handleChange)
-    }
-
-    return () => {
-      if (matchMedia.removeListener) {
-        matchMedia.removeListener(handleChange)
-      } else {
-        matchMedia.removeEventListener('change', handleChange)
-      }
-    }
-  }, [query])
-
-  return matches
-}

package/src/useOnClickOutside/index.ts

@@ -1 +0,0 @@
-export * from './useOnClickOutside'

package/src/useOnClickOutside/useOnClickOutside.ts

@@ -1,61 +0,0 @@
-import type { RefObject } from 'react'
-
-import { useEventListener } from '../useEventListener'
-
-/** Supported event types. */
-type EventType =
-  | 'mousedown'
-  | 'mouseup'
-  | 'touchstart'
-  | 'touchend'
-  | 'focusin'
-  | 'focusout'
-
-/**
- * Custom hook that handles clicks outside a specified element.
- * @template T - The type of the element's reference.
- * @param {RefObject<T> | RefObject<T>[]} ref - The React ref object(s) representing the element(s) to watch for outside clicks.
- * @param {(event: MouseEvent | TouchEvent | FocusEvent) => void} handler - The callback function to be executed when a click outside the element occurs.
- * @param {EventType} [eventType] - The mouse event type to listen for (optional, default is 'mousedown').
- * @param {?AddEventListenerOptions} [eventListenerOptions] - The options object to be passed to the `addEventListener` method (optional).
- * @returns {void}
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-on-click-outside)
- * @example
- * ```tsx
- * const containerRef = useRef(null);
- * useOnClickOutside([containerRef], () => {
- *   // Handle clicks outside the container.
- * });
- * ```
- */
-export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  ref: RefObject<T> | RefObject<T>[],
-  handler: (event: MouseEvent | TouchEvent | FocusEvent) => void,
-  eventType: EventType = 'mousedown',
-  eventListenerOptions: AddEventListenerOptions = {},
-): void {
-  useEventListener(
-    eventType,
-    event => {
-      const target = event.target as Node
-
-      // Do nothing if the target is not connected element with document
-      if (!target || !target.isConnected) {
-        return
-      }
-
-      const isOutside = Array.isArray(ref)
-        ? ref
-            .filter(r => Boolean(r.current))
-            .every(r => r.current && !r.current.contains(target))
-        : ref.current && !ref.current.contains(target)
-
-      if (isOutside) {
-        handler(event)
-      }
-    },
-    undefined,
-    eventListenerOptions,
-  )
-}

package/src/useQueryString/index.ts

@@ -1 +0,0 @@
-export * from "./useQueryString"

package/src/useQueryString/useQueryString.ts

@@ -1,26 +0,0 @@
-import { useCallback } from 'react';
-
-type Nullable<T> = {
-    [P in keyof T]: T[P] | null;
-  };
-type QueryParamsValue = Nullable<string | number | boolean | undefined>
-type QueryParams = Record<string, QueryParamsValue>
-
-export const useQueryString = (searchParams: URLSearchParams) => {
-
-    const createQueryString = useCallback((baseUrl: string, params: QueryParams) => {
-        const newSearchParams = new URLSearchParams(searchParams?.toString());
-
-        Object.entries(params).forEach(([key, value]) => {
-            if (value === null || value === "" || value === undefined) {
-                newSearchParams.delete(key);
-            } else {
-                newSearchParams.set(key, String(value));
-            }
-        });
-
-        return `${baseUrl}?${newSearchParams.toString()}`;
-    }, [searchParams],);
-
-    return { createQueryString, };
-};

package/src/useReadLocalStorage/index.ts

@@ -1 +0,0 @@
-export * from './useReadLocalStorage'

package/src/useReadLocalStorage/useReadLocalStorage.ts

@@ -1,122 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-import { useEventListener } from '../useEventListener'
-
-const IS_SERVER = typeof window === 'undefined'
-
-/**
- * Represents the type for the options available when reading from local storage.
- * @template T - The type of the stored value.
- */
-type Options<T, InitializeWithValue extends boolean | undefined> = {
-  /** Custom deserializer function to convert the stored string value to the desired type (optional). */
-  deserializer?: (value: string) => T
-  /** If `true` (default), the hook will initialize reading the local storage. In SSR, you should set it to `false`, returning `undefined` initially. */
-  initializeWithValue: InitializeWithValue
-}
-
-// SSR version
-export function useReadLocalStorage<T>(
-  key: string,
-  options: Options<T, false>,
-): T | null | undefined
-// CSR version
-export function useReadLocalStorage<T>(
-  key: string,
-  options?: Partial<Options<T, true>>,
-): T | null
-/**
- * Custom hook that reads a value from [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), closely related to [`useLocalStorage()`](https://usehooks-ts.com/react-hook/use-local-storage).
- * @template T - The type of the stored value.
- * @param {string} key - The key associated with the value in local storage.
- * @param {Options<T>} [options] - Additional options for reading the value (optional).
- * @returns {T | null | undefined} The stored value, or null if the key is not present or an error occurs.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-read-local-storage)
- * @example
- * ```tsx
- * const storedData = useReadLocalStorage('myKey');
- * // Access the stored data from local storage.
- * ```
- */
-export function useReadLocalStorage<T>(
-  key: string,
-  options: Partial<Options<T, boolean>> = {},
-): T | null | undefined {
-  let { initializeWithValue = true } = options
-  if (IS_SERVER) {
-    initializeWithValue = false
-  }
-
-  const deserializer = useCallback<(value: string) => T | null>(
-    value => {
-      if (options.deserializer) {
-        return options.deserializer(value)
-      }
-      // Support 'undefined' as a value
-      if (value === 'undefined') {
-        return undefined as unknown as T
-      }
-
-      let parsed: unknown
-      try {
-        parsed = JSON.parse(value)
-      } catch (error) {
-        console.error('Error parsing JSON:', error)
-        return null
-      }
-
-      return parsed as T
-    },
-    [options],
-  )
-
-  // Get from local storage then
-  // parse stored json or return initialValue
-  const readValue = useCallback((): T | null => {
-    // Prevent build error "window is undefined" but keep keep working
-    if (IS_SERVER) {
-      return null
-    }
-
-    try {
-      const raw = window.localStorage.getItem(key)
-      return raw ? deserializer(raw) : null
-    } catch (error) {
-      console.warn(`Error reading localStorage key “${key}”:`, error)
-      return null
-    }
-  }, [key, deserializer])
-
-  const [storedValue, setStoredValue] = useState(() => {
-    if (initializeWithValue) {
-      return readValue()
-    }
-    return undefined
-  })
-
-  // Listen if localStorage changes
-  useEffect(() => {
-    setStoredValue(readValue())
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [key])
-
-  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
-}

package/src/useResizeObserver/index.ts

@@ -1 +0,0 @@
-export * from './useResizeObserver'