@toptal/picasso-utils 1.0.1-alpha-fx-4785-create-a-codemod-to-update-nested-imports-b62d3423a.4050

package/src/utils/useInterval/test.ts

@@ -0,0 +1,61 @@
+import { renderHook } from '@testing-library/react-hooks'
+
+import useInterval from './use-interval'
+
+jest.useFakeTimers()
+
+describe('useInterval', () => {
+  it('calls the callback on each tick', () => {
+    const callback = jest.fn()
+
+    renderHook(() => useInterval({ callback, delay: 100 }))
+    jest.advanceTimersByTime(1000)
+    expect(callback).toHaveBeenCalledTimes(10)
+  })
+
+  describe('when `isPause` parameter changes its state', () => {
+    it('pauses and resumes the interval', () => {
+      const callback = jest.fn()
+      const { rerender } = renderHook(props => useInterval(props), {
+        initialProps: { callback, delay: 100, isPaused: false },
+      })
+
+      jest.advanceTimersByTime(500)
+      expect(callback).toHaveBeenCalledTimes(5)
+
+      rerender({ callback, delay: 100, isPaused: true })
+      jest.advanceTimersByTime(500)
+
+      expect(callback).toHaveBeenCalledTimes(5)
+
+      rerender({ callback, delay: 100, isPaused: false })
+      jest.advanceTimersByTime(500)
+
+      expect(callback).toHaveBeenCalledTimes(10)
+    })
+  })
+  describe('component unmounts', () => {
+    it('cleans up the interval', () => {
+      const callback = jest.fn()
+      const { unmount } = renderHook(() =>
+        useInterval({ callback, delay: 100 })
+      )
+
+      jest.advanceTimersByTime(500)
+      unmount()
+      jest.advanceTimersByTime(500)
+      expect(callback).toHaveBeenCalledTimes(5)
+    })
+  })
+
+  describe('when initialized with `isPaused` set to true', () => {
+    it('does not call the callback when isPaused is true', () => {
+      const callback = jest.fn()
+
+      renderHook(() => useInterval({ callback, delay: 100, isPaused: true }))
+
+      jest.advanceTimersByTime(1000)
+      expect(callback).toHaveBeenCalledTimes(0)
+    })
+  })
+})

package/src/utils/useInterval/use-interval.ts

@@ -0,0 +1,46 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+interface UseIntervalOptions {
+  callback: () => void
+  delay: number
+  isPaused?: boolean
+}
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
+const useInterval = ({
+  callback,
+  delay,
+  isPaused = false,
+}: UseIntervalOptions) => {
+  const intervalId = useRef<NodeJS.Timeout>()
+
+  const pauseInterval = useCallback(() => {
+    if (intervalId.current) {
+      clearInterval(intervalId.current!)
+      intervalId.current = undefined
+    }
+  }, [])
+
+  const resumeInterval = useCallback(() => {
+    if (!intervalId.current) {
+      intervalId.current = setInterval(callback, delay)
+    }
+  }, [callback, delay])
+
+  useEffect(() => {
+    if (isPaused) {
+      pauseInterval()
+    }
+
+    if (!isPaused) {
+      resumeInterval()
+    }
+
+    return () => {
+      pauseInterval()
+    }
+  }, [isPaused, pauseInterval, resumeInterval])
+}
+
+export default useInterval

package/src/utils/useMouseEnter/index.ts

@@ -0,0 +1 @@
+export { default } from './use-mouse-enter'

package/src/utils/useMouseEnter/test.ts

@@ -0,0 +1,51 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+
+import useMouseEnter from './use-mouse-enter'
+
+describe('useMouseOver', () => {
+  describe('when mouse enters and leaves element', () => {
+    it('should update isMouseOver state', () => {
+      const ref = { current: document.createElement('div') }
+      const { result } = renderHook(() => useMouseEnter(ref))
+
+      expect(result.current).toBe(false)
+
+      // Simulate mouse enter
+      act(() => {
+        ref.current.dispatchEvent(new MouseEvent('mouseenter'))
+      })
+      expect(result.current).toBe(true)
+
+      // Simulate mouse leave
+      act(() => {
+        ref.current.dispatchEvent(new MouseEvent('mouseleave'))
+      })
+      expect(result.current).toBe(false)
+    })
+  })
+
+  describe('when unmount is triggered', () => {
+    it('should remove event listeners', () => {
+      const ref = { current: document.createElement('div') }
+      const { result, unmount } = renderHook(() => useMouseEnter(ref))
+
+      expect(result.current).toBe(false)
+
+      // Simulate mouse enter
+      act(() => {
+        ref.current.dispatchEvent(new MouseEvent('mouseenter'))
+      })
+      expect(result.current).toBe(true)
+
+      // Unmount the hook
+      unmount()
+
+      // Simulate mouse leave
+      act(() => {
+        ref.current.dispatchEvent(new MouseEvent('mouseleave'))
+      })
+      // Expect isMouseOver to still be true, since event listeners should have been removed on unmount
+      expect(result.current).toBe(true)
+    })
+  })
+})

package/src/utils/useMouseEnter/use-mouse-enter.ts

@@ -0,0 +1,30 @@
+import type { RefObject } from 'react'
+import { useEffect, useState } from 'react'
+
+const useMouseEnter = <T extends HTMLElement>(ref: RefObject<T>): boolean => {
+  const [isMouseOver, setIsMouseOver] = useState<boolean>(false)
+
+  useEffect(() => {
+    const handleMouseHover = (event: MouseEvent) => {
+      setIsMouseOver(event.type === 'mouseenter')
+    }
+
+    const node = ref.current
+
+    if (node) {
+      node.addEventListener('mouseenter', handleMouseHover)
+      node.addEventListener('mouseleave', handleMouseHover)
+    }
+
+    return () => {
+      if (node) {
+        node.removeEventListener('mouseenter', handleMouseHover)
+        node.removeEventListener('mouseleave', handleMouseHover)
+      }
+    }
+  }, [ref])
+
+  return isMouseOver
+}
+
+export default useMouseEnter

package/src/utils/useOnScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './use-on-screen'

package/src/utils/useOnScreen/use-on-screen.ts

@@ -0,0 +1,50 @@
+import { useEffect, useState, useMemo } from 'react'
+
+interface UseOnScreenProps {
+  ref: React.RefObject<HTMLElement>
+  root?: React.RefObject<HTMLElement>
+  rootMargin?: string
+  threshold?: number | number[]
+}
+
+const useOnScreen = ({
+  ref,
+  root,
+  rootMargin,
+  threshold,
+}: UseOnScreenProps) => {
+  const [isIntersecting, setIntersecting] = useState(false)
+
+  const observer = useMemo(
+    () =>
+      new IntersectionObserver(
+        ([entry]) => {
+          setIntersecting(entry.isIntersecting)
+        },
+        {
+          root: root?.current,
+          rootMargin,
+          threshold,
+        }
+      ),
+    [root, rootMargin, threshold]
+  )
+
+  useEffect(() => {
+    const element = ref.current
+
+    if (!element) {
+      return
+    }
+
+    observer.observe(element)
+
+    return () => {
+      observer.unobserve(element)
+    }
+  }, [observer, ref])
+
+  return isIntersecting
+}
+
+export default useOnScreen

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": { "outDir": "dist-package" },
+  "include": ["src"],
+  "references": [
+    { "path": "../../picasso-provider" },
+    { "path": "../../shared" }
+  ]
+}