@musecat/functionkit 1.0.1 → 1.0.2

package/packages/utils/floatingMotion.ts

@@ -1,99 +1,99 @@
 export type FloatingMotionMode =
-  | "anchored"
-  | "center-selected"
-  | "modal-center"
-  | "mobile-sheet";
+	| "anchored"
+	| "center-selected"
+	| "modal-center"
+	| "mobile-sheet";
 
 export type FloatingPlacement =
-  | "top-left"
-  | "top-center"
-  | "top-right"
-  | "middle-left"
-  | "middle-center"
-  | "middle-right"
-  | "bottom-left"
-  | "bottom-center"
-  | "bottom-right";
+	| "top-left"
+	| "top-center"
+	| "top-right"
+	| "middle-left"
+	| "middle-center"
+	| "middle-right"
+	| "bottom-left"
+	| "bottom-center"
+	| "bottom-right";
 
 export interface FloatingMotionPreset {
-  enterMs: number;
-  exitMs: number;
-  ease: string;
+	enterMs: number;
+	exitMs: number;
+	ease: string;
 }
 
 export const getFloatingMotionPreset = (
-  mode: FloatingMotionMode,
+	mode: FloatingMotionMode,
 ): FloatingMotionPreset => {
-  if (mode === "mobile-sheet") {
-    return {
-      enterMs: 360,
-      exitMs: 280,
-      ease: "cubic-bezier(0.2, 0.8, 0.2, 1)",
-    };
-  }
+	if (mode === "mobile-sheet") {
+		return {
+			enterMs: 360,
+			exitMs: 280,
+			ease: "cubic-bezier(0.2, 0.8, 0.2, 1)",
+		};
+	}
 
-  if (mode === "modal-center") {
-    return {
-      enterMs: 340,
-      exitMs: 260,
-      ease: "cubic-bezier(0.22, 1, 0.36, 1)",
-    };
-  }
+	if (mode === "modal-center") {
+		return {
+			enterMs: 340,
+			exitMs: 260,
+			ease: "cubic-bezier(0.22, 1, 0.36, 1)",
+		};
+	}
 
-  if (mode === "center-selected") {
-    return {
-      enterMs: 190,
-      exitMs: 140,
-      ease: "cubic-bezier(0.2, 0, 0, 1)",
-    };
-  }
+	if (mode === "center-selected") {
+		return {
+			enterMs: 190,
+			exitMs: 140,
+			ease: "cubic-bezier(0.2, 0, 0, 1)",
+		};
+	}
 
-  return {
-    enterMs: 230,
-    exitMs: 170,
-    ease: "cubic-bezier(0.16, 1, 0.3, 1)",
-  };
+	return {
+		enterMs: 230,
+		exitMs: 170,
+		ease: "cubic-bezier(0.16, 1, 0.3, 1)",
+	};
 };
 
 export const getFloatingTransformOrigin = (
-  placement?: FloatingPlacement,
+	placement?: FloatingPlacement,
 ): string => {
-  if (!placement) return "top center";
+	if (!placement) return "top center";
 
-  const [row, col] = placement.split("-") as [
-    "top" | "middle" | "bottom",
-    "left" | "center" | "right",
-  ];
-  const y = row === "top" ? "bottom" : row === "bottom" ? "top" : "center";
-  const x = col === "right" ? "right" : col === "left" ? "left" : "center";
+	const [row, col] = placement.split("-") as [
+		"top" | "middle" | "bottom",
+		"left" | "center" | "right",
+	];
+	const y = row === "top" ? "bottom" : row === "bottom" ? "top" : "center";
+	const x = col === "right" ? "right" : col === "left" ? "left" : "center";
 
-  return `${y} ${x}`;
+	return `${y} ${x}`;
 };
 
 export const getFloatingHiddenTransform = ({
-  mode,
-  placement,
+	mode,
+	placement,
 }: {
-  mode: FloatingMotionMode;
-  placement?: FloatingPlacement;
+	mode: FloatingMotionMode;
+	placement?: FloatingPlacement;
 }): string => {
-  if (mode === "mobile-sheet") return "translateY(1.8rem) scale(1)";
-  if (mode === "modal-center") return "translateY(.8rem) scale(.94)";
-  if (mode === "center-selected") return "translateY(.45rem) scale(.99)";
-  if (!placement) return "translateY(.4rem) scale(.975)";
+	if (mode === "mobile-sheet") return "translateY(1.8rem) scale(1)";
+	if (mode === "modal-center") return "translateY(.8rem) scale(.94)";
+	if (mode === "center-selected") return "translateY(.45rem) scale(.99)";
+	if (!placement) return "translateY(.4rem) scale(.975)";
 
-  const [row, col] = placement.split("-") as [
-    "top" | "middle" | "bottom",
-    "left" | "center" | "right",
-  ];
+	const [row, col] = placement.split("-") as [
+		"top" | "middle" | "bottom",
+		"left" | "center" | "right",
+	];
 
-  if (row === "top") return "translateY(.4rem) scale(.975)";
-  if (row === "bottom") return "translateY(-.4rem) scale(.975)";
+	if (row === "top") return "translateY(.4rem) scale(.975)";
+	if (row === "bottom") return "translateY(-.4rem) scale(.975)";
 
-  if (row === "middle") {
-    if (col === "left") return "translateX(.4rem) scale(.975)";
-    if (col === "right") return "translateX(-.4rem) scale(.975)";
-  }
+	if (row === "middle") {
+		if (col === "left") return "translateX(.4rem) scale(.975)";
+		if (col === "right") return "translateX(-.4rem) scale(.975)";
+	}
 
-  return "translateY(.4rem) scale(.975)";
+	return "translateY(.4rem) scale(.975)";
 };

package/packages/utils/keyboardTarget.ts

@@ -1,13 +1,13 @@
 "use client";
 
 export function isEditableKeyboardTarget(target: HTMLElement) {
-  return (
-    target.isContentEditable ||
-    target.tagName === "TEXTAREA" ||
-    target.tagName === "SELECT" ||
-    (target.tagName === "INPUT" &&
-      (target as HTMLInputElement).type !== "button" &&
-      (target as HTMLInputElement).type !== "checkbox" &&
-      (target as HTMLInputElement).type !== "radio")
-  );
+	return (
+		target.isContentEditable ||
+		target.tagName === "TEXTAREA" ||
+		target.tagName === "SELECT" ||
+		(target.tagName === "INPUT" &&
+			(target as HTMLInputElement).type !== "button" &&
+			(target as HTMLInputElement).type !== "checkbox" &&
+			(target as HTMLInputElement).type !== "radio")
+	);
 }

package/packages/utils/mergeRefs.ts

@@ -3,13 +3,13 @@ import type { Ref, RefCallback } from "react";
 type ReactRef<T> = Ref<T> | undefined | null;
 
 export function mergeRefs<T>(...refs: ReactRef<T>[]): RefCallback<T> {
-  return (value: T | null) => {
-    for (const ref of refs) {
-      if (typeof ref === "function") {
-        ref(value);
-      } else if (ref && "current" in ref) {
-        (ref as { current: T | null }).current = value;
-      }
-    }
-  };
+	return (value: T | null) => {
+		for (const ref of refs) {
+			if (typeof ref === "function") {
+				ref(value);
+			} else if (ref && "current" in ref) {
+				(ref as { current: T | null }).current = value;
+			}
+		}
+	};
 }

package/packages/utils/seen.ts

@@ -3,27 +3,27 @@ export const SEEN_STORAGE_KEY = "seen";
 type SeenMap = Partial<Record<string, boolean>>;
 
 export function parseSeen(raw: string | null): SeenMap {
-  if (!raw) return {};
+	if (!raw) return {};
 
-  try {
-    const parsed = JSON.parse(raw) as unknown;
-    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-      return {};
-    }
+	try {
+		const parsed = JSON.parse(raw) as unknown;
+		if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+			return {};
+		}
 
-    return parsed as SeenMap;
-  } catch {
-    return {};
-  }
+		return parsed as SeenMap;
+	} catch {
+		return {};
+	}
 }
 
 export function hasSeenKey(raw: string | null, key: string) {
-  const map = parseSeen(raw);
-  return map[key] === true;
+	const map = parseSeen(raw);
+	return map[key] === true;
 }
 
 export function buildSeenValue(raw: string | null, key: string): string {
-  const map = parseSeen(raw);
-  map[key] = true;
-  return JSON.stringify(map);
+	const map = parseSeen(raw);
+	map[key] = true;
+	return JSON.stringify(map);
 }

package/packages/utils/subscribeKeyboardHeight.ts

@@ -1,54 +1,54 @@
 "use client";
 
 type SubscribeKeyboardHeightOptions = {
-  callback: (height: number) => void;
-  immediate?: boolean;
-  throttleMs?: number;
+	callback: (height: number) => void;
+	immediate?: boolean;
+	throttleMs?: number;
 };
 
 export function subscribeKeyboardHeight({
-  callback,
-  immediate = false,
-  throttleMs = 16,
+	callback,
+	immediate = false,
+	throttleMs = 16,
 }: SubscribeKeyboardHeightOptions) {
-  let ticking = false;
-  let lastHeight = 0;
-
-  const notify = (height: number) => {
-    if (ticking) return;
-    ticking = true;
-
-    const run = () => {
-      if (height !== lastHeight) {
-        lastHeight = height;
-        callback(height);
-      }
-      ticking = false;
-    };
-
-    if (throttleMs > 0) {
-      setTimeout(run, throttleMs);
-    } else {
-      run();
-    }
-  };
-
-  const handleResize = () => {
-    const vv = window.visualViewport;
-    if (!vv) return;
-    const diff = window.innerHeight - vv.height;
-    notify(diff > 0 ? diff : 0);
-  };
-
-  if (immediate) handleResize();
-
-  window.visualViewport?.addEventListener("resize", handleResize);
-  window.visualViewport?.addEventListener("scroll", handleResize);
-
-  return {
-    unsubscribe() {
-      window.visualViewport?.removeEventListener("resize", handleResize);
-      window.visualViewport?.removeEventListener("scroll", handleResize);
-    },
-  };
+	let ticking = false;
+	let lastHeight = 0;
+
+	const notify = (height: number) => {
+		if (ticking) return;
+		ticking = true;
+
+		const run = () => {
+			if (height !== lastHeight) {
+				lastHeight = height;
+				callback(height);
+			}
+			ticking = false;
+		};
+
+		if (throttleMs > 0) {
+			setTimeout(run, throttleMs);
+		} else {
+			run();
+		}
+	};
+
+	const handleResize = () => {
+		const vv = window.visualViewport;
+		if (!vv) return;
+		const diff = window.innerHeight - vv.height;
+		notify(diff > 0 ? diff : 0);
+	};
+
+	if (immediate) handleResize();
+
+	window.visualViewport?.addEventListener("resize", handleResize);
+	window.visualViewport?.addEventListener("scroll", handleResize);
+
+	return {
+		unsubscribe() {
+			window.visualViewport?.removeEventListener("resize", handleResize);
+			window.visualViewport?.removeEventListener("scroll", handleResize);
+		},
+	};
 }

package/tests/components/ScrolltoTop.test.tsx

@@ -0,0 +1,15 @@
+import { describe, test, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { ScrolltoTop } from "@/packages/components/ScrolltoTop";
+
+describe("ScrolltoTop", () => {
+	test("calls window.scrollTo(0, 0) on mount", () => {
+		const originalScrollTo = window.scrollTo;
+		window.scrollTo = vi.fn();
+
+		render(<ScrolltoTop />);
+		expect(window.scrollTo).toHaveBeenCalledWith(0, 0);
+
+		window.scrollTo = originalScrollTo;
+	});
+});

package/tests/components/SwitchCase.test.tsx

@@ -0,0 +1,34 @@
+import { describe, test, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { SwitchCase } from "@/packages/components/SwitchCase";
+import React from "react";
+
+describe("SwitchCase", () => {
+	const cases = {
+		1: <div>Case 1</div>,
+		2: <div>Case 2</div>,
+		three: <div>Case Three</div>,
+	};
+
+	test("renders correctly matching case", () => {
+		const { container } = render(<SwitchCase value={1} cases={cases} />);
+		expect(container.textContent).toBe("Case 1");
+	});
+
+	test("renders another case", () => {
+		const { container } = render(<SwitchCase value="three" cases={cases} />);
+		expect(container.textContent).toBe("Case Three");
+	});
+
+	test("renders otherwise when case does not exist", () => {
+		const { container } = render(
+			<SwitchCase value={99} cases={cases} otherwise={<div>Fallback</div>} />,
+		);
+		expect(container.textContent).toBe("Fallback");
+	});
+
+	test("renders null when case does not exist and otherwise is not provided", () => {
+		const { container } = render(<SwitchCase value={99} cases={cases} />);
+		expect(container.innerHTML).toBe("");
+	});
+});

package/tests/components/ViewportPortal.test.tsx

@@ -0,0 +1,42 @@
+import { describe, test, expect, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+	ViewportPortal,
+	getViewportPortalRoot,
+} from "@/packages/components/ViewportPortal";
+import React from "react";
+
+describe("ViewportPortal", () => {
+	beforeEach(() => {
+		document.body.innerHTML = "";
+	});
+
+	test("getViewportPortalRoot creates a root element if it doesn't exist", () => {
+		const root = getViewportPortalRoot();
+		expect(root).not.toBeNull();
+		expect(root?.id).toBe("viewport-portal-root");
+		expect(document.getElementById("viewport-portal-root")).toBe(root);
+	});
+
+	test("getViewportPortalRoot returns existing root element if it exists", () => {
+		const root1 = getViewportPortalRoot();
+		const root2 = getViewportPortalRoot();
+		expect(root1).toBe(root2);
+		expect(document.querySelectorAll("#viewport-portal-root").length).toBe(1);
+	});
+
+	test("ViewportPortal renders children into the portal root", () => {
+		render(
+			<ViewportPortal>
+				<div data-testid="portal-content">Portal Content</div>
+			</ViewportPortal>,
+		);
+
+		const root = document.getElementById("viewport-portal-root");
+		expect(root).not.toBeNull();
+
+		const content = screen.getByTestId("portal-content");
+		expect(content.textContent).toBe("Portal Content");
+		expect(root?.contains(content)).toBe(true);
+	});
+});

package/tests/cookie/cookie.test.ts

@@ -0,0 +1,156 @@
+import { describe, test, expect, beforeEach, vi, afterEach } from "vitest";
+import {
+	parseClientCookieNames,
+	getClientCookie,
+	setClientCookie,
+	clearClientCookie,
+	clearAllClientCookies,
+} from "@/packages/cookie/cookie.shared";
+
+describe("cookie module", () => {
+	beforeEach(() => {
+		// Reset cookies
+		Object.defineProperty(document, "cookie", {
+			writable: true,
+			value: "",
+		});
+
+		// Mock window location
+		Object.defineProperty(window, "location", {
+			writable: true,
+			value: { hostname: "example.com", pathname: "/test/path" },
+		});
+	});
+
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	describe("parseClientCookieNames", () => {
+		test("parses cookie string correctly", () => {
+			const result = parseClientCookieNames("foo=bar; baz=qux; ; empty=");
+			expect(result).toEqual(["foo", "baz", "empty"]);
+		});
+
+		test("returns empty array for empty string", () => {
+			expect(parseClientCookieNames("")).toEqual([]);
+		});
+	});
+
+	describe("getClientCookie", () => {
+		test("returns cookie value if it exists", () => {
+			document.cookie = "foo=bar; baz=qux";
+			expect(getClientCookie("foo")).toBe("bar");
+			expect(getClientCookie("baz")).toBe("qux");
+		});
+
+		test("returns undefined if cookie does not exist", () => {
+			document.cookie = "foo=bar";
+			expect(getClientCookie("missing")).toBeUndefined();
+		});
+
+		test("handles undefined document", () => {
+			const originalDocument = global.document;
+			// @ts-ignore
+			delete global.document;
+
+			expect(getClientCookie("foo")).toBeUndefined();
+
+			global.document = originalDocument;
+		});
+	});
+
+	describe("setClientCookie", () => {
+		test("sets cookie with name and value", () => {
+			setClientCookie("foo", "bar");
+			expect(document.cookie).toBe("foo=bar; path=/");
+		});
+
+		test("sets cookie with days", () => {
+			vi.useFakeTimers();
+			vi.setSystemTime(new Date("2020-01-01T00:00:00Z"));
+
+			setClientCookie("foo", "bar", 7);
+
+			const expectedDate = new Date("2020-01-08T00:00:00Z").toUTCString();
+			expect(document.cookie).toBe(`foo=bar; expires=${expectedDate}; path=/`);
+
+			vi.useRealTimers();
+		});
+
+		test("encodes cookie value", () => {
+			setClientCookie("foo", "val ue;");
+			expect(document.cookie).toBe("foo=val%20ue%3B; path=/");
+		});
+	});
+
+	describe("clearClientCookie", () => {
+		test("clears cookie with default options", () => {
+			document.cookie = "foo=bar";
+			clearClientCookie("foo");
+			expect(document.cookie).toBe(
+				"foo=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=example.com;",
+			);
+		});
+
+		test("clears cookie with custom options", () => {
+			const mockDoc = { cookie: "" };
+			clearClientCookie("foo", {
+				hostname: "custom.com",
+				path: "/custom",
+				documentRef: mockDoc as any,
+			});
+			expect(mockDoc.cookie).toBe(
+				"foo=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/custom; domain=custom.com;",
+			);
+		});
+	});
+
+	describe("clearAllClientCookies", () => {
+		test("clears all cookies based on documentRef.cookie", () => {
+			const mockDoc = { cookie: "a=1; b=2" };
+			const entries = clearAllClientCookies({ documentRef: mockDoc as any });
+
+			expect(entries).toEqual(["a", "b"]);
+			expect(mockDoc.cookie).toContain(
+				"b=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/test/path; domain=com;",
+			);
+		});
+
+		test("clears cookies using cookieStore if provided", async () => {
+			const cookieStore = { delete: vi.fn().mockResolvedValue(undefined) };
+			const mockDoc = { cookie: "a=1; b=2" };
+
+			const entries = clearAllClientCookies({
+				documentRef: mockDoc as any,
+				cookieStore: cookieStore as any,
+			});
+
+			expect(entries).toEqual(["a", "b"]);
+			expect(cookieStore.delete).toHaveBeenCalledWith("a");
+			expect(cookieStore.delete).toHaveBeenCalledWith("b");
+		});
+
+		test("clears cookies from root path when includeRoot is true", () => {
+			const mockDoc = { cookie: "a=1" };
+			clearAllClientCookies({ documentRef: mockDoc as any, includeRoot: true });
+
+			// The function iterates and updates document.cookie, so it will contain the last assignment.
+			// With paths ["/", "/test/path"] and domain "example.com"
+			expect(mockDoc.cookie).toContain(
+				"a=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/test/path; domain=com;",
+			);
+		});
+
+		test("uses provided cookieString instead of documentRef.cookie", () => {
+			const mockDoc = { cookie: "a=1" };
+			const entries = clearAllClientCookies({
+				documentRef: mockDoc as any,
+				cookieString: "x=1; y=2",
+			});
+
+			expect(entries).toEqual(["x", "y"]);
+			expect(mockDoc.cookie).toContain("y=;");
+		});
+	});
+});