update js deps and add package-lock.json (#192)

- replaces use-is-in-viewport package with lib/use-intersection-observer.ts due to npm dependency conflict

beszel/site/src/lib/use-intersection-observer.ts

@@ -0,0 +1,169 @@
+import { useEffect, useRef, useState } from 'react'
+
+// adapted from usehooks-ts/use-intersection-observer
+
+/** The hook internal state. */
+type State = {
+	/** A boolean indicating if the element is intersecting. */
+	isIntersecting: boolean
+	/** The intersection observer entry. */
+	entry?: IntersectionObserverEntry
+}
+
+/** Represents the options for configuring the Intersection Observer. */
+type UseIntersectionObserverOptions = {
+	/**
+	 * The element that is used as the viewport for checking visibility of the target.
+	 * @default null
+	 */
+	root?: Element | Document | null
+	/**
+	 * A margin around the root.
+	 * @default '0%'
+	 */
+	rootMargin?: string
+	/**
+	 * A threshold indicating the percentage of the target's visibility needed to trigger the callback.
+	 * @default 0
+	 */
+	threshold?: number | number[]
+	/**
+	 * If true, freezes the intersection state once the element becomes visible.
+	 * @default true
+	 */
+	freeze?: boolean
+	/**
+	 * A callback function to be invoked when the intersection state changes.
+	 * @param {boolean} isIntersecting - A boolean indicating if the element is intersecting.
+	 * @param {IntersectionObserverEntry} entry - The intersection observer Entry.
+	 * @default undefined
+	 */
+	onChange?: (isIntersecting: boolean, entry: IntersectionObserverEntry) => void
+	/**
+	 * The initial state of the intersection.
+	 * @default false
+	 */
+	initialIsIntersecting?: boolean
+}
+
+/**
+ * The return type of the useIntersectionObserver hook.
+ *
+ * Supports both tuple and object destructing.
+ * @param {(node: Element | null) => void} ref - The ref callback function.
+ * @param {boolean} isIntersecting - A boolean indicating if the element is intersecting.
+ * @param {IntersectionObserverEntry | undefined} entry - The intersection observer Entry.
+ */
+type IntersectionReturn = {
+	ref: (node?: Element | null) => void
+	isIntersecting: boolean
+	entry?: IntersectionObserverEntry
+}
+
+/**
+ * Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [`Intersection Observer API`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
+ * @param {UseIntersectionObserverOptions} options - The options for the Intersection Observer.
+ * @returns {IntersectionReturn} The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.
+ * @example
+ * ```tsx
+ * const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
+ * ```
+ */
+export function useIntersectionObserver({
+	threshold = 0,
+	root = null,
+	rootMargin = '0%',
+	freeze = true,
+	initialIsIntersecting = false,
+	onChange,
+}: UseIntersectionObserverOptions = {}): IntersectionReturn {
+	const [ref, setRef] = useState<Element | null>(null)
+
+	const [state, setState] = useState<State>(() => ({
+		isIntersecting: initialIsIntersecting,
+		entry: undefined,
+	}))
+
+	const callbackRef = useRef<UseIntersectionObserverOptions['onChange']>()
+
+	callbackRef.current = onChange
+
+	const frozen = state.entry?.isIntersecting && freeze
+
+	useEffect(() => {
+		// Ensure we have a ref to observe
+		if (!ref) return
+
+		// Ensure the browser supports the Intersection Observer API
+		if (!('IntersectionObserver' in window)) return
+
+		// Skip if frozen
+		if (frozen) return
+
+		let unobserve: (() => void) | undefined
+
+		const observer = new IntersectionObserver(
+			(entries: IntersectionObserverEntry[]): void => {
+				const thresholds = Array.isArray(observer.thresholds)
+					? observer.thresholds
+					: [observer.thresholds]
+
+				entries.forEach((entry) => {
+					const isIntersecting =
+						entry.isIntersecting &&
+						thresholds.some((threshold) => entry.intersectionRatio >= threshold)
+
+					setState({ isIntersecting, entry })
+
+					if (callbackRef.current) {
+						callbackRef.current(isIntersecting, entry)
+					}
+
+					if (isIntersecting && freeze && unobserve) {
+						unobserve()
+						unobserve = undefined
+					}
+				})
+			},
+			{ threshold, root, rootMargin }
+		)
+
+		observer.observe(ref)
+
+		return () => {
+			observer.disconnect()
+		}
+
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [
+		ref,
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		JSON.stringify(threshold),
+		root,
+		rootMargin,
+		frozen,
+		freeze,
+	])
+
+	// ensures that if the observed element changes, the intersection observer is reinitialized
+	const prevRef = useRef<Element | null>(null)
+
+	useEffect(() => {
+		if (
+			!ref &&
+			state.entry?.target &&
+			!freeze &&
+			!frozen &&
+			prevRef.current !== state.entry.target
+		) {
+			prevRef.current = state.entry.target
+			setState({ isIntersecting: initialIsIntersecting, entry: undefined })
+		}
+	}, [ref, state.entry, freeze, frozen, initialIsIntersecting])
+
+	return {
+		ref: setRef,
+		isIntersecting: !!state.isIntersecting,
+		entry: state.entry,
+	} as IntersectionReturn
+}