@musecat/functionkit 1.0.1 → 1.1.0

package/packages/hooks/useRelativeDateTime.ts

@@ -6,49 +6,46 @@ import type { DateInput, DatePreset } from "../datetime/dateTime.shared";
 import { toDate } from "../datetime/dateTime.shared";
 
 type UseRelativeDateTimeOptions = {
-  locale?: string;
-  maxRelativeDays?: number;
-  fallbackDatePreset?: DatePreset;
-  updateIntervalMs?: number;
+	locale?: string;
+	maxRelativeDays?: number;
+	fallbackDatePreset?: DatePreset;
+	updateIntervalMs?: number;
 };
 
-export function useRelativeDateTime(
-  value: DateInput,
-  options?: UseRelativeDateTimeOptions,
-) {
-  const [ready, setReady] = useState(false);
-  const [text, setText] = useState("");
-  const [isRelative, setIsRelative] = useState(false);
+export function useRelativeDateTime(value: DateInput, options?: UseRelativeDateTimeOptions) {
+	const [ready, setReady] = useState(false);
+	const [text, setText] = useState("");
+	const [isRelative, setIsRelative] = useState(false);
 
-  useEffect(() => {
-    const update = () => {
-      const next = formatClientRelative(value, {
-        locale: options?.locale,
-        maxRelativeDays: options?.maxRelativeDays,
-        fallbackDatePreset: options?.fallbackDatePreset,
-        now: Date.now(),
-      });
-      setText(next.text);
-      setIsRelative(next.isRelative);
-      setReady(true);
-    };
+	useEffect(() => {
+		const update = () => {
+			const next = formatClientRelative(value, {
+				locale: options?.locale,
+				maxRelativeDays: options?.maxRelativeDays,
+				fallbackDatePreset: options?.fallbackDatePreset,
+				now: Date.now(),
+			});
+			setText(next.text);
+			setIsRelative(next.isRelative);
+			setReady(true);
+		};
 
-    update();
+		update();
 
-    const timer = window.setInterval(update, options?.updateIntervalMs ?? 1000);
-    return () => window.clearInterval(timer);
-  }, [
-    options?.fallbackDatePreset,
-    options?.locale,
-    options?.maxRelativeDays,
-    options?.updateIntervalMs,
-    value,
-  ]);
+		const timer = window.setInterval(update, options?.updateIntervalMs ?? 1000);
+		return () => window.clearInterval(timer);
+	}, [
+		options?.fallbackDatePreset,
+		options?.locale,
+		options?.maxRelativeDays,
+		options?.updateIntervalMs,
+		value,
+	]);
 
-  return {
-    ready,
-    text,
-    isRelative,
-    date: toDate(value),
-  };
+	return {
+		ready,
+		text,
+		isRelative,
+		date: toDate(value),
+	};
 }

package/packages/hooks/useTimeout.ts

@@ -5,52 +5,52 @@ import { useCallback, useEffect, useRef } from "react";
 import { usePreservedCallback } from "./usePreservedCallback";
 
 type UseTimeoutOptions = {
-  enabled?: boolean;
+	enabled?: boolean;
 };
 
 export type UseTimeoutControls = {
-  start: (overrideDelay?: number) => void;
-  reset: (overrideDelay?: number) => void;
-  clear: () => void;
-  isPending: () => boolean;
+	start: (overrideDelay?: number) => void;
+	reset: (overrideDelay?: number) => void;
+	clear: () => void;
+	isPending: () => boolean;
 };
 
 export function useTimeout(
-  callback: () => void,
-  delay = 0,
-  options?: UseTimeoutOptions,
+	callback: () => void,
+	delay = 0,
+	options?: UseTimeoutOptions,
 ): UseTimeoutControls {
-  const { enabled = true } = options ?? {};
-  const preservedCallback = usePreservedCallback(callback);
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  const clear = useCallback(() => {
-    if (timeoutRef.current !== null) {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
-
-  const start = useCallback(
-    (overrideDelay?: number) => {
-      clear();
-      timeoutRef.current = setTimeout(() => {
-        timeoutRef.current = null;
-        preservedCallback();
-      }, overrideDelay ?? delay);
-    },
-    [clear, delay, preservedCallback],
-  );
-
-  const isPending = useCallback(() => timeoutRef.current !== null, []);
-
-  useEffect(() => {
-    if (!enabled) return;
-    start();
-    return clear;
-  }, [enabled, start, clear]);
-
-  useEffect(() => clear, [clear]);
-
-  return { start, reset: start, clear, isPending };
+	const { enabled = true } = options ?? {};
+	const preservedCallback = usePreservedCallback(callback);
+	const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const clear = useCallback(() => {
+		if (timeoutRef.current !== null) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	}, []);
+
+	const start = useCallback(
+		(overrideDelay?: number) => {
+			clear();
+			timeoutRef.current = setTimeout(() => {
+				timeoutRef.current = null;
+				preservedCallback();
+			}, overrideDelay ?? delay);
+		},
+		[clear, delay, preservedCallback],
+	);
+
+	const isPending = useCallback(() => timeoutRef.current !== null, []);
+
+	useEffect(() => {
+		if (!enabled) return;
+		start();
+		return clear;
+	}, [enabled, start, clear]);
+
+	useEffect(() => clear, [clear]);
+
+	return { start, reset: start, clear, isPending };
 }

package/packages/hooks/useToggleState.ts

@@ -3,11 +3,11 @@
 import { useCallback, useState } from "react";
 
 export function useToggleState(initialValue = false) {
-  const [value, setValue] = useState(initialValue);
+	const [value, setValue] = useState(initialValue);
 
-  const setTrue = useCallback(() => setValue(true), []);
-  const setFalse = useCallback(() => setValue(false), []);
-  const toggle = useCallback(() => setValue((v) => !v), []);
+	const setTrue = useCallback(() => setValue(true), []);
+	const setFalse = useCallback(() => setValue(false), []);
+	const toggle = useCallback(() => setValue((v) => !v), []);
 
-  return { value, setValue, setTrue, setFalse, toggle };
+	return { value, setValue, setTrue, setFalse, toggle };
 }

package/packages/hooks/useViewportHeight.ts

@@ -3,21 +3,20 @@
 import { useEffect, useState } from "react";
 
 export function useViewportHeight() {
-  const [height, setHeight] = useState(0);
+	const [height, setHeight] = useState(0);
 
-  useEffect(() => {
-    const update = () =>
-      setHeight(window.visualViewport?.height ?? window.innerHeight);
+	useEffect(() => {
+		const update = () => setHeight(window.visualViewport?.height ?? window.innerHeight);
 
-    update();
-    window.visualViewport?.addEventListener("resize", update);
-    window.addEventListener("resize", update);
+		update();
+		window.visualViewport?.addEventListener("resize", update);
+		window.addEventListener("resize", update);
 
-    return () => {
-      window.visualViewport?.removeEventListener("resize", update);
-      window.removeEventListener("resize", update);
-    };
-  }, []);
+		return () => {
+			window.visualViewport?.removeEventListener("resize", update);
+			window.removeEventListener("resize", update);
+		};
+	}, []);
 
-  return { height };
+	return { height };
 }

package/packages/hooks/useViewportMatch.ts

@@ -2,32 +2,22 @@
 
 import { useEffect, useState } from "react";
 
-/**
- * Tracks whether the current viewport matches a media query.
- *
- * @param mediaQuery CSS media query string.
- * @returns True when current viewport matches the given query.
- */
 export function useViewportMatch(mediaQuery: string): boolean {
-  const [isMatched, setIsMatched] = useState(false);
+	const [isMatched, setIsMatched] = useState(false);
 
-  useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
+	useEffect(() => {
+		const mediaQueryList = window.matchMedia(mediaQuery);
+		const syncMatchState = () => {
+			setIsMatched(mediaQueryList.matches);
+		};
 
-    const mediaQueryList = window.matchMedia(mediaQuery);
-    const syncMatchState = () => {
-      setIsMatched(mediaQueryList.matches);
-    };
+		syncMatchState();
+		mediaQueryList.addEventListener("change", syncMatchState);
 
-    syncMatchState();
-    mediaQueryList.addEventListener("change", syncMatchState);
+		return () => {
+			mediaQueryList.removeEventListener("change", syncMatchState);
+		};
+	}, [mediaQuery]);
 
-    return () => {
-      mediaQueryList.removeEventListener("change", syncMatchState);
-    };
-  }, [mediaQuery]);
-
-  return isMatched;
+	return isMatched;
 }

package/packages/utils/browserStorage.ts

@@ -3,57 +3,57 @@
 type StorageKind = "localStorage" | "sessionStorage";
 
 function getStorage(kind: StorageKind): Storage | null {
-  if (typeof window === "undefined") return null;
-  return window[kind];
+	if (typeof window === "undefined") return null;
+	return window[kind];
 }
 
 function saveStorage(kind: StorageKind, key: string, value: unknown) {
-  const storage = getStorage(kind);
-  if (!storage) return;
-  try {
-    storage.setItem(key, JSON.stringify(value));
-  } catch {}
+	const storage = getStorage(kind);
+	if (!storage) return;
+	try {
+		storage.setItem(key, JSON.stringify(value));
+	} catch {}
 }
 
 function loadStorage(kind: StorageKind, key: string): unknown {
-  const storage = getStorage(kind);
-  if (!storage) return null;
-  try {
-    const raw = storage.getItem(key);
-    return raw === null ? null : (JSON.parse(raw) as unknown);
-  } catch {
-    return null;
-  }
+	const storage = getStorage(kind);
+	if (!storage) return null;
+	try {
+		const raw = storage.getItem(key);
+		return raw === null ? null : (JSON.parse(raw) as unknown);
+	} catch {
+		return null;
+	}
 }
 
 function removeStorage(kind: StorageKind, key: string) {
-  const storage = getStorage(kind);
-  if (!storage) return;
-  try {
-    storage.removeItem(key);
-  } catch {}
+	const storage = getStorage(kind);
+	if (!storage) return;
+	try {
+		storage.removeItem(key);
+	} catch {}
 }
 
 export function getLocalStorage(key: string): unknown {
-  return loadStorage("localStorage", key);
+	return loadStorage("localStorage", key);
 }
 
 export function updateLocalStorage(key: string, value: unknown) {
-  saveStorage("localStorage", key, value);
+	saveStorage("localStorage", key, value);
 }
 
 export function removeLocalStorage(key: string) {
-  removeStorage("localStorage", key);
+	removeStorage("localStorage", key);
 }
 
 export function getSessionStorage(key: string): unknown {
-  return loadStorage("sessionStorage", key);
+	return loadStorage("sessionStorage", key);
 }
 
 export function updateSessionStorage(key: string, value: unknown) {
-  saveStorage("sessionStorage", key, value);
+	saveStorage("sessionStorage", key, value);
 }
 
 export function removeSessionStorage(key: string) {
-  removeStorage("sessionStorage", key);
+	removeStorage("sessionStorage", key);
 }

package/packages/utils/buildContext.tsx

@@ -1,19 +1,18 @@
 "use client";
 
-import { createContext, type ReactNode, useContext, useMemo } from "react";
+import { createContext, type ReactNode, useContext } from "react";
 
 export function buildContext<T>(defaultValue: T) {
-  const Ctx = createContext<T>(defaultValue);
+	const Ctx = createContext<T>(defaultValue);
 
-  function Provider({ value, children }: { value: T; children: ReactNode }) {
-    const stable = useMemo(() => value, [value]);
-    return <Ctx.Provider value={stable}>{children}</Ctx.Provider>;
-  }
+	function Provider({ value, children }: { value: T; children: ReactNode }) {
+		return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+	}
 
-  function useValue() {
-    const ctx = useContext(Ctx);
-    return ctx;
-  }
+	function useValue() {
+		const ctx = useContext(Ctx);
+		return ctx;
+	}
 
-  return [Provider, useValue] as const;
+	return [Provider, useValue] as const;
 }

package/packages/utils/checkDevice.ts

@@ -1,74 +1,74 @@
 export type DeviceInfo = {
-  isMobile: boolean;
-  isIOS: boolean;
-  isAndroid: boolean;
-  isSafari: boolean;
-  isIOSSafari: boolean;
-  isMacSafari: boolean;
-  isSamsungBrowser: boolean;
-  isTouchDevice: boolean;
-  browser: string;
+	isMobile: boolean;
+	isIOS: boolean;
+	isAndroid: boolean;
+	isSafari: boolean;
+	isIOSSafari: boolean;
+	isMacSafari: boolean;
+	isSamsungBrowser: boolean;
+	isTouchDevice: boolean;
+	browser: string;
 };
 
 export function getDeviceInfo(): DeviceInfo {
-  let isMobile = false;
-  let isIOS = false;
-  let isAndroid = false;
-  let isSafari = false;
-  let isIOSSafari = false;
-  let isMacSafari = false;
-  let isSamsungBrowser = false;
-  let isTouchDevice = false;
-  let browser = "unknown";
+	let isMobile = false;
+	let isIOS = false;
+	let isAndroid = false;
+	let isSafari = false;
+	let isIOSSafari = false;
+	let isMacSafari = false;
+	let isSamsungBrowser = false;
+	let isTouchDevice = false;
+	let browser = "unknown";
 
-  if (typeof window === "undefined") {
-    return {
-      isMobile,
-      isIOS,
-      isAndroid,
-      isSafari,
-      isIOSSafari,
-      isMacSafari,
-      isSamsungBrowser,
-      isTouchDevice,
-      browser,
-    };
-  }
+	if (typeof window === "undefined") {
+		return {
+			isMobile,
+			isIOS,
+			isAndroid,
+			isSafari,
+			isIOSSafari,
+			isMacSafari,
+			isSamsungBrowser,
+			isTouchDevice,
+			browser,
+		};
+	}
 
-  const ua = navigator.userAgent;
+	const ua = navigator.userAgent;
 
-  isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(ua);
-  isIOS = /iPhone|iPad|iPod/i.test(ua);
-  isAndroid = /Android/i.test(ua);
-  isSafari = /Safari/i.test(ua) && !/Chrome/i.test(ua);
-  isIOSSafari = isIOS && isSafari;
-  isMacSafari = /Macintosh/i.test(ua) && isSafari && !isIOS;
-  isSamsungBrowser = /SamsungBrowser/i.test(ua);
-  isTouchDevice = "ontouchstart" in window;
+	isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(ua);
+	isIOS = /iPhone|iPad|iPod/i.test(ua);
+	isAndroid = /Android/i.test(ua);
+	isSafari = /Safari/i.test(ua) && !/Chrome/i.test(ua);
+	isIOSSafari = isIOS && isSafari;
+	isMacSafari = /Macintosh/i.test(ua) && isSafari && !isIOS;
+	isSamsungBrowser = /SamsungBrowser/i.test(ua);
+	isTouchDevice = "ontouchstart" in window;
 
-  if (isSamsungBrowser) {
-    browser = "samsung";
-  } else if (isSafari) {
-    browser = "safari";
-  } else if (/Chrome/i.test(ua)) {
-    browser = "chrome";
-  } else if (/Firefox/i.test(ua)) {
-    browser = "firefox";
-  } else if (/Edge/i.test(ua)) {
-    browser = "edge";
-  } else {
-    browser = "unknown";
-  }
+	if (isSamsungBrowser) {
+		browser = "samsung";
+	} else if (isSafari) {
+		browser = "safari";
+	} else if (/Chrome/i.test(ua)) {
+		browser = "chrome";
+	} else if (/Firefox/i.test(ua)) {
+		browser = "firefox";
+	} else if (/Edge/i.test(ua)) {
+		browser = "edge";
+	} else {
+		browser = "unknown";
+	}
 
-  return {
-    isMobile,
-    isIOS,
-    isAndroid,
-    isSafari,
-    isIOSSafari,
-    isMacSafari,
-    isSamsungBrowser,
-    isTouchDevice,
-    browser,
-  };
+	return {
+		isMobile,
+		isIOS,
+		isAndroid,
+		isSafari,
+		isIOSSafari,
+		isMacSafari,
+		isSamsungBrowser,
+		isTouchDevice,
+		browser,
+	};
 }

package/packages/utils/clipboardShare.tsx

@@ -1,47 +1,47 @@
 "use client";
 
 import type {
-  NavigatorClipboardProps,
-  NavigatorClipboardResult,
-  NavigatorShareProps,
-  NavigatorShareResult,
+	NavigatorClipboardProps,
+	NavigatorClipboardResult,
+	NavigatorShareProps,
+	NavigatorShareResult,
 } from "./clipboardShare.types";
 
 export function NavigatorClipboard({
-  text,
+	text,
 }: NavigatorClipboardProps): Promise<NavigatorClipboardResult> {
-  return navigator.clipboard.writeText(text).then(
-    () => ({ success: true }),
-    () => ({ success: false }),
-  );
+	return navigator.clipboard.writeText(text).then(
+		() => ({ success: true }),
+		() => ({ success: false }),
+	);
 }
 
 export function NavigatorShare({
-  title,
-  text,
-  link,
+	title,
+	text,
+	link,
 }: NavigatorShareProps): Promise<NavigatorShareResult> {
-  if (navigator.share) {
-    return navigator.share({ title, text, url: link }).then(
-      () => ({ success: true, method: "share" }),
-      (error) => {
-        if (error instanceof DOMException && error.name === "AbortError") {
-          return { success: false, method: "share" };
-        }
-        return clipboardFallback(link);
-      },
-    );
-  }
+	if (navigator.share) {
+		return navigator.share({ title, text, url: link }).then(
+			() => ({ success: true, method: "share" }),
+			(error) => {
+				if (error instanceof DOMException && error.name === "AbortError") {
+					return { success: false, method: "share" };
+				}
+				return clipboardFallback(link);
+			},
+		);
+	}
 
-  return clipboardFallback(link);
+	return clipboardFallback(link);
 }
 
 function clipboardFallback(link: string): Promise<NavigatorShareResult> {
-  if (navigator.clipboard) {
-    return navigator.clipboard.writeText(link).then(
-      () => ({ success: true, method: "clipboard" }),
-      () => ({ success: false, method: "unsupported" }),
-    );
-  }
-  return Promise.resolve({ success: false, method: "unsupported" });
+	if (navigator.clipboard) {
+		return navigator.clipboard.writeText(link).then(
+			() => ({ success: true, method: "clipboard" }),
+			() => ({ success: false, method: "unsupported" }),
+		);
+	}
+	return Promise.resolve({ success: false, method: "unsupported" });
 }

package/packages/utils/clipboardShare.types.ts

@@ -1,18 +1,18 @@
 export type NavigatorClipboardProps = {
-  text: string;
+	text: string;
 };
 
 export type NavigatorShareProps = {
-  title: string;
-  text: string;
-  link: string;
+	title: string;
+	text: string;
+	link: string;
 };
 
 export type NavigatorClipboardResult = {
-  success: boolean;
+	success: boolean;
 };
 
 export type NavigatorShareResult = {
-  success: boolean;
-  method: "share" | "clipboard" | "unsupported";
+	success: boolean;
+	method: "share" | "clipboard" | "unsupported";
 };