feat(hooks): begin generic react hooks package

packages/hooks/README.md

@@ -0,0 +1,3 @@
+# Hooks
+
+Hooks library

packages/hooks/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "currency",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "source": "./src/index.ts",
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "test": "jest",
+    "dev": "tsc -w",
+    "build": "tsc",
+    "lint": "TIMING=1 eslint src --fix",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "@ethersproject/address": "^5.5.0",
+    "tiny-invariant": "^1.2.0",
+    "chain": "workspace:*",
+    "math": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/jest": "^27.4.1",
+    "config": "workspace:*",
+    "jest": "^27.5.1",    
+    "typescript": "^4.6.2"
+  },
+  "jest": {
+    "preset": "config/jest/node"
+  }
+}

packages/hooks/src/index.ts

@@ -0,0 +1,5 @@
+export { default as useDebounce } from './useDebounce'
+export { default as isWindowVisible } from './useIsWindowVisible'
+export { default as useOnClickOutside } from './useOnClickOutside'
+export { default as usePrevious } from './usePrevious'
+export { default as useWindowSize } from './useWindowSize'

packages/hooks/src/useDebounce.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+
+// modified from https://usehooks.com/useDebounce/
+export default function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    // Update debounced value after delay
+    const handler = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    // Cancel the timeout if value changes (also on delay change or unmount)
+    // This is how we prevent debounced value from updating if value is changed ...
+    // .. within the delay period. Timeout gets cleared and restarted.
+    return () => {
+      clearTimeout(handler)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}

packages/hooks/src/useIsWindowVisible.ts

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react'
+
+const VISIBILITY_STATE_SUPPORTED = typeof document !== 'undefined' && 'visibilityState' in document
+
+function isWindowVisible() {
+  return !VISIBILITY_STATE_SUPPORTED || document.visibilityState !== 'hidden'
+}
+
+/**
+ * Returns whether the window is currently visible to the user.
+ */
+export default function useIsWindowVisible(): boolean {
+  const [focused, setFocused] = useState<boolean>(isWindowVisible())
+  const listener = useCallback(() => {
+    setFocused(isWindowVisible())
+  }, [setFocused])
+
+  useEffect(() => {
+    if (!VISIBILITY_STATE_SUPPORTED) return undefined
+
+    document.addEventListener('visibilitychange', listener)
+    return () => {
+      document.removeEventListener('visibilitychange', listener)
+    }
+  }, [listener])
+
+  return focused
+}

packages/hooks/src/useOnClickOutside.ts

@@ -0,0 +1,25 @@
+import { RefObject, useEffect, useRef } from 'react'
+
+function useOnClickOutside<T extends HTMLElement>(node: RefObject<T | undefined>, handler: undefined | (() => void)) {
+  const handlerRef = useRef<undefined | (() => void)>(handler)
+  useEffect(() => {
+    handlerRef.current = handler
+  }, [handler])
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (node.current?.contains(e.target as Node) ?? false) {
+        return
+      }
+      if (handlerRef.current) handlerRef.current()
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [node])
+}
+
+export default useOnClickOutside

packages/hooks/src/usePrevious.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from 'react'
+
+// modified from https://usehooks.com/usePrevious/
+export default function usePrevious<T>(value: T) {
+  // The ref object is a generic container whose current property is mutable ...
+  // ... and can hold any value, similar to an instance property on a class
+  const ref = useRef<T>()
+
+  // Store current value in ref
+  useEffect(() => {
+    ref.current = value
+  }, [value]) // Only re-run if value changes
+
+  // Return previous value (happens before update in useEffect above)
+  return ref.current
+}

packages/hooks/src/useWindowSize.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+
+const isClient = typeof window === 'object'
+
+function getSize() {
+  return {
+    width: isClient ? window.innerWidth : undefined,
+    height: isClient ? window.innerHeight : undefined,
+  }
+}
+
+// https://usehooks.com/useWindowSize/
+const useWindowSize = () => {
+  const [windowSize, setWindowSize] = useState(getSize)
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowSize(getSize())
+    }
+    if (isClient) {
+      window.addEventListener('resize', handleResize)
+      return () => {
+        window.removeEventListener('resize', handleResize)
+      }
+    }
+    return undefined
+  }, [])
+
+  return windowSize
+}
+
+export default useWindowSize

packages/hooks/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "config/typescript/base.json",
+  "include": ["src"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "lib": ["ES2015"],
+    "module": "CommonJS",
+    "target": "ES5",
+    "outDir": "./dist",
+    "rootDir": "./src"
+  }
+}