@codeleap/hooks 4.3.0

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@codeleap/hooks",
+  "version": "4.3.0",
+  "main": "src/index.ts",
+  "license": "UNLICENSED",
+  "repository": {
+    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
+    "type": "git",
+    "directory": "packages/hooks"
+  },
+  "devDependencies": {
+    "@codeleap/config": "4.3.0",
+    "@codeleap/types": "4.3.0",
+    "@codeleap/utils": "4.3.0",
+    "@codeleap/logger": "4.3.0",
+    "ts-node-dev": "1.1.8"
+  },
+  "scripts": {
+    "build": "echo 'No build needed'"
+  },
+  "peerDependencies": {
+    "@codeleap/types": "4.3.0",
+    "@codeleap/utils": "4.3.0",
+    "@codeleap/logger": "4.3.0",
+    "axios": "^1.7.9",
+    "typescript": "5.0.4",
+    "react": "18.1.0",
+    "@tanstack/react-query": "5.60.6"
+  }
+}

package/package.json.bak

@@ -0,0 +1,30 @@
+{
+  "name": "@codeleap/hooks",
+  "version": "4.3.0",
+  "main": "src/index.ts",
+  "license": "UNLICENSED",
+  "repository": {
+    "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",
+    "type": "git",
+    "directory": "packages/hooks"
+  },
+  "devDependencies": {
+    "@codeleap/config": "workspace:*",
+    "@codeleap/types": "workspace:*",
+    "@codeleap/utils": "workspace:*",
+    "@codeleap/logger": "workspace:*",
+    "ts-node-dev": "1.1.8"
+  },
+  "scripts": {
+    "build": "echo 'No build needed'"
+  },
+  "peerDependencies": {
+    "@codeleap/types": "workspace:*",
+    "@codeleap/utils": "workspace:*",
+    "@codeleap/logger": "workspace:*",
+    "axios": "^1.7.9",
+    "typescript": "5.0.4",
+    "react": "18.1.0",
+    "@tanstack/react-query": "5.60.6"
+  }
+}

package/src/GlobalContext.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, ReactNode, useContext } from 'react'
+import { Logger, silentLogger } from '@codeleap/logger'
+import { AppSettings } from '@codeleap/types'
+
+type ContextProps = {
+  logger: Logger
+  Settings: AppSettings
+  isBrowser: boolean
+}
+
+const GlobalContext = createContext<ContextProps>({} as ContextProps)
+
+type ProviderProps = {
+  logger: Logger
+  settings: AppSettings
+  isBrowser: boolean
+  children: ReactNode
+}
+
+export const GlobalContextProvider = (props: ProviderProps) => {
+  const {
+    logger,
+    settings,
+    isBrowser,
+    children
+  } = props
+
+  const value: ContextProps = {
+    logger: logger || silentLogger,
+    Settings: settings,
+    isBrowser,
+  }
+
+  return (
+    <GlobalContext.Provider
+      value={value}
+    >
+      {children}
+    </GlobalContext.Provider>
+  )
+}
+
+export const useGlobalContext = () => {
+  const context = useContext(GlobalContext)
+
+  if (!context) {
+    throw new Error('GlobalContext not found')
+  }
+
+  return context
+}

package/src/index.ts

@@ -0,0 +1,47 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  useImperativeHandle,
+  useMemo,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useDebugValue,
+  useReducer,
+} from 'react'
+
+export * from './useConditionalState'
+export * from './usePromise'
+export * from './useListState'
+export * from './useUncontrolled'
+export * from './useCounter'
+export * from './useForceRender'
+export * from './useDebounce'
+export * from './useInterval'
+export * from './onMount'
+export * from './onUpdate'
+export * from './usePrevious'
+export * from './useToggle'
+export * from './useBooleanToggle'
+export * from './useModal'
+export * from './usePlaces'
+export * from './usePlacesAutocompleteUtils'
+export * from './useEffectOnce'
+export * from './useUnmount'
+export * from './useSearch'
+export * from './usePartialState'
+export * from './GlobalContext'
+
+export {
+  useEffect,
+  useRef,
+  useState,
+  useImperativeHandle,
+  useMemo,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useDebugValue,
+  useReducer,
+}

package/src/onMount.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react'
+import { AnyFunction } from '@codeleap/types'
+
+export const onMount = (func: AnyFunction) => {
+  useEffect(() => {
+    return func()
+  }, [])
+}

package/src/onUpdate.ts

@@ -0,0 +1,8 @@
+import { useEffect } from 'react'
+import { AnyFunction } from '@codeleap/types'
+
+export const onUpdate = (func: AnyFunction, listeners = []) => {
+  useEffect(() => {
+    return func()
+  }, listeners)
+}

package/src/useBooleanToggle.ts

@@ -0,0 +1,15 @@
+import { useState } from 'react'
+
+export function useBooleanToggle(initial: boolean) {
+  const [v, setV] = useState(initial)
+
+  function toggleOrSet(value?: boolean) {
+    if (typeof value === 'boolean') {
+      setV(value)
+    } else {
+      setV((previous) => !previous)
+    }
+  }
+
+  return [v, toggleOrSet] as const
+}

package/src/useConditionalState.ts

@@ -0,0 +1,26 @@
+import { useState, SetStateAction, Dispatch } from 'react'
+import { AnyFunction } from '@codeleap/types'
+import { useBooleanToggle } from './useBooleanToggle'
+
+type UseConditionalStateOptions<T> = {
+  initialValue?: T
+  isBooleanToggle?: boolean
+}
+
+type SetState<T> = Dispatch<SetStateAction<T>> & ((value: T) => void) & (() => void)
+
+export const useConditionalState = <T>(
+  value: T | undefined,
+  setter: AnyFunction,
+  options: UseConditionalStateOptions<T> = {}
+): [T, SetState<T>] => {
+  const state = options?.isBooleanToggle
+    ? useBooleanToggle(options?.initialValue as boolean)
+    : useState(options?.initialValue)
+
+  if (!value && typeof setter === 'function') {
+    return [value, setter]
+  }
+
+  return state as unknown as [T, SetState<T>]
+}

package/src/useCounter.ts

@@ -0,0 +1,5 @@
+import { useReducer } from 'react'
+
+export function useCounter() {
+  return useReducer((x) => x + 1, 0)
+}

package/src/useDebounce.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react'
+
+export function useDebounce<T>(
+  value: T,
+  debounce: number,
+): [T, () => void] {
+  const [debouncedValue, setDebouncedValue] = useState(value)
+
+  const timeoutRef = useRef(null)
+
+  const reset = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+  }
+  useEffect(() => {
+    timeoutRef.current = setTimeout(() => {
+      setDebouncedValue(value)
+    }, debounce)
+
+    return reset
+  }, [value])
+
+  return [debouncedValue, reset]
+}

package/src/useEffectOnce.ts

@@ -0,0 +1,5 @@
+import { EffectCallback, useEffect } from 'react'
+
+export const useEffectOnce = (effect: EffectCallback) => {
+  useEffect(effect, [])
+}

package/src/useForceRender.ts

@@ -0,0 +1,6 @@
+import { useReducer } from 'react'
+
+export function useForceRender() {
+  const [_, forceRender] = useReducer((x) => x + 1, 0)
+  return forceRender
+}

package/src/useInterval.ts

@@ -0,0 +1,21 @@
+import { useRef } from 'react'
+import { AnyFunction } from '@codeleap/types'
+
+export function useInterval(callback: AnyFunction, interval: number) {
+  const intervalRef = useRef(null)
+
+  function clear() {
+    clearInterval(intervalRef.current)
+    intervalRef.current = null
+  }
+
+  function start() {
+    intervalRef.current = setInterval(callback, interval)
+  }
+
+  return {
+    clear,
+    start,
+    interval: intervalRef.current,
+  }
+}

package/src/useListState.ts

@@ -0,0 +1,92 @@
+import { useState } from 'react'
+
+export interface UseListStateHandler<T> {
+  setState: React.Dispatch<React.SetStateAction<T[]>>
+  append: (...items: T[]) => void
+  prepend: (...items: T[]) => void
+  insert: (index: number, ...items: T[]) => void
+  pop: () => void
+  shift: () => void
+  apply: (fn: (item: T, index?: number) => T) => void
+  applyWhere: (
+    condition: (item: T, index: number) => boolean,
+    fn: (item: T, index?: number) => T
+  ) => void
+  remove: (...indices: number[]) => void
+  reorder: ({ from, to }: { from: number; to: number }) => void
+  setItem: (index: number, item: T) => void
+  setItemProp: <K extends keyof T, U extends T[K]>(index: number, prop: K, value: U) => void
+}
+
+export type UseListState<T> = [T[], UseListStateHandler<T>]
+
+export function useListState<T>(initialValue: (T[] | (() => T[])) = []): UseListState<T> {
+  const [state, setState] = useState(initialValue)
+
+  const append = (...items: T[]) => setState((current) => [...current, ...items])
+  const prepend = (...items: T[]) => setState((current) => [...items, ...current])
+
+  const insert = (index: number, ...items: T[]) => setState((current) => [...current.slice(0, index), ...items, ...current.slice(index)])
+
+  const apply = (fn: (item: T, index?: number) => T) => setState((current) => current.map((item, index) => fn(item, index)))
+
+  const remove = (...indices: number[]) => setState((current) => current.filter((_, index) => !indices.includes(index)))
+
+  const pop = () => setState((current) => {
+    const cloned = [...current]
+    cloned.pop()
+    return cloned
+  })
+
+  const shift = () => setState((current) => {
+    const cloned = [...current]
+    cloned.shift()
+    return cloned
+  })
+
+  const reorder = ({ from, to }: { from: number; to: number }) => setState((current) => {
+    const cloned = [...current]
+    const item = current[from]
+
+    cloned.splice(from, 1)
+    cloned.splice(to, 0, item)
+
+    return cloned
+  })
+
+  const setItem = (index: number, item: T) => setState((current) => {
+    const cloned = [...current]
+    cloned[index] = item
+    return cloned
+  })
+
+  const setItemProp = <K extends keyof T, U extends T[K]>(index: number, prop: K, value: U) => setState((current) => {
+    const cloned = [...current]
+    cloned[index] = { ...cloned[index], [prop]: value }
+    return cloned
+  })
+
+  const applyWhere = (
+    condition: (item: T, index: number) => boolean,
+    fn: (item: T, index?: number) => T,
+  ) => setState((current) => current.map((item, index) => (condition(item, index) ? fn(item, index) : item)),
+  )
+
+  return [
+    state,
+    {
+      setState,
+      append,
+      prepend,
+      insert,
+      pop,
+      shift,
+      apply,
+      applyWhere,
+      remove,
+      reorder,
+      setItem,
+      setItemProp,
+    },
+  ]
+}

package/src/useModal.ts

@@ -0,0 +1,10 @@
+import { useBooleanToggle } from './useBooleanToggle'
+
+export function useModal(startsOpen = false) {
+  const [visible, toggle] = useBooleanToggle(startsOpen)
+
+  return {
+    visible, 
+    toggle,
+  }
+}

package/src/usePartialState.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react'
+import { DeepPartial } from '@codeleap/types'
+import { deepMerge } from '@codeleap/utils'
+
+type SetPartialStateCallback<T> = (value: T) => DeepPartial<T>
+
+export function usePartialState<T= any>(initial: T | (() => T)) {
+  const [state, setState] = useState(initial)
+
+  function setPartial(
+    value: DeepPartial<T> | SetPartialStateCallback<T>,
+  ) {
+    if (typeof value === 'function') {
+      setState((v) => deepMerge(v, value(v as T)))
+    } else {
+      setState(deepMerge(state, value))
+    }
+  }
+
+  return [state as T, setPartial] as const
+}

package/src/usePlaces.ts

@@ -0,0 +1,63 @@
+import axios from 'axios'
+import { useQuery } from '@tanstack/react-query'
+
+const BASE_URL = 'https://maps.googleapis.com/maps/api/place/autocomplete/json'
+const BASE_URL_DETAILS = 'https://maps.googleapis.com/maps/api/place/details/json'
+const BASE_URL_GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json'
+
+const latLngRegex = /^-?\d+(\.\d+)?,-?\d+(\.\d+)?$/
+
+type Params = {
+  input?: string
+  key?: string
+  showDetails?: boolean
+}
+
+export const retrievePlaceDetails = async (placeId: string, apiKey: string) => {
+  const response = await axios.get(BASE_URL_DETAILS, {
+    params: {
+      place_id: placeId,
+      key: apiKey,
+    },
+  })
+
+  return response?.data?.result
+}
+
+export const retrievePlaces = async (params: Params) => {
+  let response
+  const inputWithoutSpaces = params?.input?.replace(/\s/g, '')
+  const isLatLng = latLngRegex?.test(inputWithoutSpaces)
+
+  if (isLatLng) {
+    response = await axios?.get(BASE_URL_GEOCODING, { params: { latlng: params?.input, key: params?.key } })
+  } else {
+    response = await axios?.get(BASE_URL, { params })
+  }
+
+  let places = response?.data?.results || response?.data?.predictions
+
+  if (params?.showDetails) {
+    const apiKey = params?.key
+    places = await Promise.all(
+      places?.map(async (place) => {
+        const placeId = place?.place_id
+        const details = await retrievePlaceDetails(placeId, apiKey)
+        return { ...place, details }
+      }),
+    )
+  }
+
+  return places
+}
+
+export type UsePlacesParams = Params
+
+export const usePlaces = (params: Params) => {
+  const places = useQuery({
+    queryKey: ['places', params],
+    queryFn: () => retrievePlaces(params),
+  })
+
+  return places
+}

package/src/usePlacesAutocompleteUtils.ts

@@ -0,0 +1,59 @@
+import React from 'react'
+import { TypeGuards } from '@codeleap/types'
+
+export type UsePlacesAutocompleteUtilsProps<T extends Record<string, any>> = {
+  debounce?: number
+  onValueChange?: (address: string) => void
+  onPress?: (address: string, item: T) => void
+}
+
+export const usePlacesAutocompleteUtils = <T extends Record<string, any>>(props: UsePlacesAutocompleteUtilsProps<T>) => {
+  const {
+    debounce = 250,
+    onValueChange,
+    onPress,
+  } = props
+
+  const [address, setAddress] = React.useState('')
+  const [isTyping, setIsTyping] = React.useState(false)
+
+  const setSearchTimeout = React.useRef<NodeJS.Timeout | null>(null)
+
+  const handleChangeAddress = (address: string) => {
+    setAddress(address)
+
+    if (TypeGuards.isNil(debounce)) {
+      onValueChange?.(address)
+      setTimeout(() => setIsTyping(false), 250)
+    } else {
+      if (setSearchTimeout.current) {
+        clearTimeout(setSearchTimeout.current)
+        setSearchTimeout.current = null
+      }
+
+      setSearchTimeout.current = setTimeout(() => {
+        onValueChange?.(address)
+        setIsTyping(false)
+      }, debounce ?? 0)
+    }
+  }
+
+  const handlePressAddress = (address: string, item: T) => {
+    setAddress(address)
+    onPress?.(address, item)
+  }
+
+  const handleClearAddress = () => {
+    setAddress('')
+    onValueChange?.('')
+  }
+
+  return {
+    handleChangeAddress,
+    handlePressAddress,
+    handleClearAddress,
+    address,
+    isTyping,
+    setIsTyping,
+  }
+}

package/src/usePrevious.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react'
+
+export const usePrevious = <T>(value: T) => {
+  const ref = useRef<T>()
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}

package/src/usePromise.ts

@@ -0,0 +1,46 @@
+import { useRef } from 'react'
+import { TypeGuards, AnyFunction } from '@codeleap/types'
+
+type UsePromiseOptions<T = any> = {
+  onResolve?: (value: T) => void
+  onReject?: (err: any) => void
+  timeout?: number
+  debugName?: string
+}
+
+export const usePromise = <T = any>(options?: UsePromiseOptions<T>) => {
+  const rejectRef = useRef<AnyFunction>()
+  const resolveRef = useRef<(v:T) => any>()
+  const timeoutRef = useRef(null)
+  const reject = async (err: any) => {
+    await rejectRef.current?.(err)
+    options?.onReject?.(err)
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    rejectRef.current = null
+  }
+
+  const resolve = async (value: T) => {
+    await resolveRef.current?.(value)
+    options?.onResolve?.(value)
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    resolveRef.current = null
+  }
+
+  const _await = () => {
+    return new Promise<T>((resolve, reject) => {
+      rejectRef.current = reject
+      resolveRef.current = resolve
+      if (TypeGuards.isNumber(options?.timeout) && options?.timeout > 0) {
+        timeoutRef.current = setTimeout(() => {
+          reject(new Error(`usePromise: ${options?.debugName || ''} timed out after ${options?.timeout}ms`))
+        }, options?.timeout)
+      }
+    })
+  }
+
+  return {
+    _await,
+    resolve,
+    reject,
+  }
+}

package/src/useSearch/index.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import { useBooleanToggle } from '../useBooleanToggle'
+import { useSearchParams } from './types'
+import { TypeGuards } from '@codeleap/types'
+
+export function useSearch<T extends string|number = string, Multi extends boolean = false>(props: useSearchParams<T, Multi>) {
+  const {
+    value,
+    multiple,
+    options,
+    filterItems,
+    debugName,
+    defaultOptions,
+
+    loadOptions,
+    onLoadOptionsError,
+  } = { ...props }
+
+  const [loading, setLoading] = useBooleanToggle(false)
+  const isValueArray = TypeGuards.isArray(value) && multiple
+  const [labelOptions, setLabelOptions] = useState(() => {
+    if (isValueArray) {
+      return defaultOptions.filter(o => value.includes(o.value))
+    }
+
+    const _option = defaultOptions.find(o => o.value === value)
+
+    if (!_option) {
+      return []
+    }
+
+    return [_option]
+  })
+
+  const [filteredOptions, setFilteredOptions] = useState(defaultOptions)
+  const [, setSearchInput] = useState('')
+
+  async function load() {
+    setLoading(true)
+    try {
+      const options = await loadOptions('')
+      setFilteredOptions(options)
+    } catch (e) {
+      onLoadOptionsError(e)
+    }
+    setLoading(false)
+  }
+
+  const onChangeSearch = async (searchValue:string) => {
+    setSearchInput(searchValue)
+
+    if (!!loadOptions) {
+      setLoading(true)
+      try {
+        const _opts = await loadOptions(searchValue)
+        setFilteredOptions(_opts)
+      } catch (e) {
+        console.error(`Error loading select options [${debugName}], e`)
+        onLoadOptionsError?.(e)
+      }
+      setTimeout(() => {
+        setLoading(false)
+      }, 0)
+      return
+    }
+    const _opts = filterItems(searchValue, options)
+    setFilteredOptions(_opts)
+  }
+
+  return { loading, setLoading, labelOptions, setLabelOptions, filteredOptions, load, onChangeSearch }
+}

package/src/useSearch/types.ts

@@ -0,0 +1,14 @@
+export type AutocompleteValue<T, Multi extends boolean = false> = Multi extends true ? T[] : T
+
+type Options<T> = { label: any; value: T }[]
+
+export type useSearchParams<T, Multi extends boolean = false> = {
+  value: AutocompleteValue<T, Multi>
+  multiple:Multi
+  options: Options<T>
+  filterItems: (search: string, items: Options<T>) => Options<T>
+  debugName: string
+  defaultOptions: Options<T>
+  loadOptions: (search: string) => Promise<Options<T>>
+  onLoadOptionsError: (error: any) => void
+}

package/src/useToggle.ts

@@ -0,0 +1,16 @@
+import { useState } from 'react'
+
+export function useToggle<T extends readonly [any, any], V extends T[0] | T[1]>(
+  options: T,
+  initial: V,
+) {
+  const [value, setValue] = useState(initial)
+
+  function toggleOrSetValue(newValue?: V) {
+    const v: V = newValue || (value === options[0] ? options[1] : options[0])
+
+    setValue(v)
+  }
+
+  return [value, toggleOrSetValue] as const
+}

package/src/useUncontrolled.ts

@@ -0,0 +1,69 @@
+import { useEffect, useRef, useState } from 'react'
+
+export type UncontrolledMode = 'initial' | 'controlled' | 'uncontrolled'
+
+export interface UncontrolledOptions<T> {
+  value: T | null | undefined
+  defaultValue: T | null | undefined
+  finalValue: T | null
+  onChange(value: T | null): void
+  onValueUpdate?(value: T | null): void
+  rule: (value: T | null | undefined) => boolean
+}
+
+export function useUncontrolled<T>({
+  value,
+  defaultValue,
+  finalValue,
+  rule,
+  onChange,
+  onValueUpdate,
+}: UncontrolledOptions<T>): readonly [T | null, (nextValue: T | null) => void, UncontrolledMode] {
+  // determine, whether new props indicate controlled state
+  const shouldBeControlled = rule(value)
+
+  // initialize state
+  const modeRef = useRef<UncontrolledMode>('initial')
+  const initialValue = rule(defaultValue) ? defaultValue : finalValue
+  const [uncontrolledValue, setUncontrolledValue] = useState(initialValue)
+
+  // compute effective value
+  let effectiveValue = shouldBeControlled ? value : uncontrolledValue
+
+  if (!shouldBeControlled && modeRef.current === 'controlled') {
+    // We are transitioning from controlled to uncontrolled
+    // this transition is special as it happens when clearing out
+    // the input using "invalid" value (typically null or undefined).
+    //
+    // Since the value is invalid, doing nothing would mean just
+    // transitioning to uncontrolled state and using whatever value
+    // it currently holds which is likely not the behavior
+    // user expects, so lets change the state to finalValue.
+    //
+    // The value will be propagated to internal state by useEffect below.
+
+    effectiveValue = finalValue
+  }
+
+  modeRef.current = shouldBeControlled ? 'controlled' : 'uncontrolled'
+  const mode = modeRef.current
+
+  const handleChange = (nextValue: T | null) => {
+    typeof onChange === 'function' && onChange(nextValue)
+
+    // Controlled input only triggers onChange event and expects
+    // the controller to propagate new value back.
+    if (mode === 'uncontrolled') {
+      setUncontrolledValue(nextValue)
+    }
+  }
+
+  useEffect(() => {
+    if (mode === 'uncontrolled') {
+      setUncontrolledValue(effectiveValue)
+    }
+    typeof onValueUpdate === 'function' && onValueUpdate(effectiveValue)
+  }, [mode, effectiveValue])
+
+  return [effectiveValue, handleChange, modeRef.current] as const
+}

package/src/useUnmount.ts

@@ -0,0 +1,11 @@
+import { useRef } from 'react'
+import { useEffectOnce } from './useEffectOnce'
+
+export const useUnmount = (fn: () => any): void => {
+  const fnRef = useRef(fn)
+
+  // update the ref each render so if it change the newest callback will be invoked
+  fnRef.current = fn
+
+  useEffectOnce(() => () => fnRef.current())
+}