@musecat/functionkit 1.0.0 → 1.0.2

package/tests/utils/clipboardShare.test.ts

@@ -0,0 +1,78 @@
+import { describe, test, expect, vi, afterEach } from "vitest";
+import { NavigatorClipboard, NavigatorShare } from "@/packages/utils/clipboardShare";
+
+describe("NavigatorClipboard", () => {
+	test("resolves with success: true on write", async () => {
+		Object.defineProperty(navigator, "clipboard", {
+			value: { writeText: vi.fn(() => Promise.resolve()) },
+			writable: true,
+			configurable: true,
+		});
+
+		const result = await NavigatorClipboard({ text: "hello" });
+		expect(result).toEqual({ success: true });
+	});
+
+	test("resolves with success: false on failure", async () => {
+		Object.defineProperty(navigator, "clipboard", {
+			value: { writeText: vi.fn(() => Promise.reject(new Error("denied"))) },
+			writable: true,
+			configurable: true,
+		});
+
+		const result = await NavigatorClipboard({ text: "hello" });
+		expect(result).toEqual({ success: false });
+	});
+});
+
+describe("NavigatorShare", () => {
+	afterEach(() => { vi.restoreAllMocks(); });
+
+	test("uses Web Share API when available", async () => {
+		Object.defineProperty(navigator, "share", {
+			value: vi.fn(() => Promise.resolve()),
+			writable: true,
+			configurable: true,
+		});
+		Object.defineProperty(navigator, "clipboard", {
+			value: { writeText: vi.fn() },
+			writable: true,
+			configurable: true,
+		});
+
+		const result = await NavigatorShare({ title: "Test", text: "Hello", link: "https://example.com" });
+		expect(result).toEqual({ success: true, method: "share" });
+	});
+
+	test("falls back to clipboard when share is unavailable", async () => {
+		Object.defineProperty(navigator, "share", {
+			value: undefined,
+			writable: true,
+			configurable: true,
+		});
+		Object.defineProperty(navigator, "clipboard", {
+			value: { writeText: vi.fn(() => Promise.resolve()) },
+			writable: true,
+			configurable: true,
+		});
+
+		const result = await NavigatorShare({ title: "Test", text: "Hello", link: "https://example.com" });
+		expect(result).toEqual({ success: true, method: "clipboard" });
+	});
+
+	test("returns unsupported when neither share nor clipboard", async () => {
+		Object.defineProperty(navigator, "share", {
+			value: undefined,
+			writable: true,
+			configurable: true,
+		});
+		Object.defineProperty(navigator, "clipboard", {
+			value: undefined,
+			writable: true,
+			configurable: true,
+		});
+
+		const result = await NavigatorShare({ title: "Test", text: "Hello", link: "https://example.com" });
+		expect(result).toEqual({ success: false, method: "unsupported" });
+	});
+});

package/tests/utils/floatingMotion.test.ts

@@ -0,0 +1,84 @@
+import { describe, test, expect } from "vitest";
+import {
+	getFloatingMotionPreset,
+	getFloatingTransformOrigin,
+	getFloatingHiddenTransform,
+} from "@/packages/utils/floatingMotion";
+
+describe("getFloatingMotionPreset", () => {
+	test("returns anchored preset", () => {
+		const preset = getFloatingMotionPreset("anchored");
+		expect(preset.enterMs).toBe(230);
+		expect(preset.exitMs).toBe(170);
+	});
+
+	test("returns modal-center preset", () => {
+		const preset = getFloatingMotionPreset("modal-center");
+		expect(preset.enterMs).toBe(340);
+		expect(preset.exitMs).toBe(260);
+	});
+
+	test("returns center-selected preset", () => {
+		const preset = getFloatingMotionPreset("center-selected");
+		expect(preset.enterMs).toBe(190);
+		expect(preset.exitMs).toBe(140);
+	});
+
+	test("returns mobile-sheet preset", () => {
+		const preset = getFloatingMotionPreset("mobile-sheet");
+		expect(preset.enterMs).toBe(360);
+		expect(preset.exitMs).toBe(280);
+	});
+});
+
+describe("getFloatingTransformOrigin", () => {
+	test("returns default when no placement", () => {
+		expect(getFloatingTransformOrigin()).toBe("top center");
+	});
+
+	test("returns correct origin for top-left", () => {
+		expect(getFloatingTransformOrigin("top-left")).toBe("bottom left");
+	});
+
+	test("returns correct origin for bottom-right", () => {
+		expect(getFloatingTransformOrigin("bottom-right")).toBe("top right");
+	});
+
+	test("returns correct origin for middle-center", () => {
+		expect(getFloatingTransformOrigin("middle-center")).toBe("center center");
+	});
+});
+
+describe("getFloatingHiddenTransform", () => {
+	test("returns mobile-sheet transform", () => {
+		expect(getFloatingHiddenTransform({ mode: "mobile-sheet" })).toBe("translateY(1.8rem) scale(1)");
+	});
+
+	test("returns modal-center transform", () => {
+		expect(getFloatingHiddenTransform({ mode: "modal-center" })).toBe("translateY(.8rem) scale(.94)");
+	});
+
+	test("returns center-selected transform", () => {
+		expect(getFloatingHiddenTransform({ mode: "center-selected" })).toBe("translateY(.45rem) scale(.99)");
+	});
+
+	test("anchored with no placement", () => {
+		expect(getFloatingHiddenTransform({ mode: "anchored" })).toBe("translateY(.4rem) scale(.975)");
+	});
+
+	test("anchored with top placement", () => {
+		expect(getFloatingHiddenTransform({ mode: "anchored", placement: "top-left" })).toBe("translateY(.4rem) scale(.975)");
+	});
+
+	test("anchored with bottom placement", () => {
+		expect(getFloatingHiddenTransform({ mode: "anchored", placement: "bottom-center" })).toBe("translateY(-.4rem) scale(.975)");
+	});
+
+	test("anchored with middle-left placement", () => {
+		expect(getFloatingHiddenTransform({ mode: "anchored", placement: "middle-left" })).toBe("translateX(.4rem) scale(.975)");
+	});
+
+	test("anchored with middle-right placement", () => {
+		expect(getFloatingHiddenTransform({ mode: "anchored", placement: "middle-right" })).toBe("translateX(-.4rem) scale(.975)");
+	});
+});

package/tests/utils/keyboardTarget.test.ts

@@ -0,0 +1,44 @@
+import { describe, test, expect } from "vitest";
+import { isEditableKeyboardTarget } from "@/packages/utils/keyboardTarget";
+
+describe("isEditableKeyboardTarget", () => {
+	test("returns true for contentEditable", () => {
+		const el = document.createElement("div");
+		Object.defineProperty(el, "isContentEditable", { value: true });
+		expect(isEditableKeyboardTarget(el)).toBe(true);
+	});
+
+	test("returns true for TEXTAREA", () => {
+		const el = document.createElement("textarea");
+		expect(isEditableKeyboardTarget(el)).toBe(true);
+	});
+
+	test("returns true for text INPUT", () => {
+		const el = document.createElement("input");
+		el.type = "text";
+		expect(isEditableKeyboardTarget(el)).toBe(true);
+	});
+
+	test("returns false for button INPUT", () => {
+		const el = document.createElement("input");
+		el.type = "button";
+		expect(isEditableKeyboardTarget(el)).toBe(false);
+	});
+
+	test("returns false for checkbox INPUT", () => {
+		const el = document.createElement("input");
+		el.type = "checkbox";
+		expect(isEditableKeyboardTarget(el)).toBe(false);
+	});
+
+	test("returns false for radio INPUT", () => {
+		const el = document.createElement("input");
+		el.type = "radio";
+		expect(isEditableKeyboardTarget(el)).toBe(false);
+	});
+
+	test("returns false for regular div", () => {
+		const el = document.createElement("div");
+		expect(isEditableKeyboardTarget(el)).toBe(false);
+	});
+});

package/tests/utils/mergeRefs.test.ts

@@ -0,0 +1,18 @@
+import { describe, test, expect, vi } from "vitest";
+import { mergeRefs } from "@/packages/utils/mergeRefs";
+
+describe("mergeRefs", () => {
+	test("merges multiple refs", () => {
+		const ref1 = vi.fn();
+		const ref2 = { current: null };
+		const ref3 = null;
+
+		const merged = mergeRefs(ref1, ref2, ref3);
+		const element = document.createElement("div");
+
+		merged(element as any);
+
+		expect(ref1).toHaveBeenCalledWith(element);
+		expect(ref2.current).toBe(element);
+	});
+});

package/tests/utils/seen.test.ts

@@ -0,0 +1,31 @@
+import { describe, test, expect } from "vitest";
+import {
+	parseSeen,
+	hasSeenKey,
+	buildSeenValue,
+	SEEN_STORAGE_KEY,
+} from "@/packages/utils/seen";
+
+describe("seen", () => {
+	test("SEEN_STORAGE_KEY", () => {
+		expect(SEEN_STORAGE_KEY).toBe("seen");
+	});
+
+	test("parseSeen", () => {
+		expect(parseSeen(null)).toEqual({});
+		expect(parseSeen('{"a":true}')).toEqual({ a: true });
+		expect(parseSeen("invalid json")).toEqual({});
+		expect(parseSeen("[]")).toEqual({});
+	});
+
+	test("hasSeenKey", () => {
+		expect(hasSeenKey('{"a":true}', "a")).toBe(true);
+		expect(hasSeenKey('{"a":true}', "b")).toBe(false);
+		expect(hasSeenKey(null, "a")).toBe(false);
+	});
+
+	test("buildSeenValue", () => {
+		const result = buildSeenValue('{"a":true}', "b");
+		expect(JSON.parse(result)).toEqual({ a: true, b: true });
+	});
+});

package/tests/utils/subscribeKeyboardHeight.test.ts

@@ -0,0 +1,50 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
+import { subscribeKeyboardHeight } from "@/packages/utils/subscribeKeyboardHeight";
+
+describe("subscribeKeyboardHeight", () => {
+	let visualViewport: any;
+
+	beforeEach(() => {
+		visualViewport = {
+			height: 600,
+			width: 390,
+			offsetTop: 0,
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+		};
+		Object.defineProperty(window, "visualViewport", {
+			value: visualViewport,
+			writable: true,
+			configurable: true,
+		});
+		Object.defineProperty(window, "innerHeight", {
+			value: 800,
+			writable: true,
+			configurable: true,
+		});
+	});
+
+	afterEach(() => { vi.useRealTimers(); });
+
+	test("subscribes to resize events", () => {
+		const callback = vi.fn();
+		subscribeKeyboardHeight({ callback });
+		expect(visualViewport.addEventListener).toHaveBeenCalledWith("resize", expect.any(Function));
+		expect(visualViewport.addEventListener).toHaveBeenCalledWith("scroll", expect.any(Function));
+	});
+
+	test("calls immediately when immediate is true", () => {
+		vi.useFakeTimers();
+		const callback = vi.fn();
+		subscribeKeyboardHeight({ callback, immediate: true });
+		vi.advanceTimersByTime(16);
+		expect(callback).toHaveBeenCalled();
+	});
+
+	test("returns unsubscribe function", () => {
+		const callback = vi.fn();
+		const { unsubscribe } = subscribeKeyboardHeight({ callback });
+		unsubscribe();
+		expect(visualViewport.removeEventListener).toHaveBeenCalled();
+	});
+});

package/tsconfig.json

@@ -1,18 +1,18 @@
 {
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "incremental": true
-  },
-  "include": ["**/*.ts", "**/*.tsx"]
+	"compilerOptions": {
+		"target": "ES2017",
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"allowJs": true,
+		"skipLibCheck": true,
+		"strict": true,
+		"noEmit": true,
+		"esModuleInterop": true,
+		"module": "esnext",
+		"moduleResolution": "bundler",
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"jsx": "react-jsx",
+		"incremental": true
+	},
+	"include": ["**/*.ts", "**/*.tsx"]
 }

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "vitest/config";
+import path from "path";
+
+export default defineConfig({
+	test: {
+		environment: "jsdom",
+		setupFiles: ["./tests/setup.ts"],
+		include: ["tests/**/*.test.{ts,tsx}"],
+		globals: true,
+	},
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./"),
+		},
+	},
+});

package/components/ViewportPortal.tsx

@@ -1,40 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
-
-const VIEWPORT_PORTAL_ROOT_ID = "viewport-portal-root";
-
-export function getViewportPortalRoot() {
-  if (typeof document === "undefined") {
-    return null;
-  }
-
-  const existingRoot = document.getElementById(VIEWPORT_PORTAL_ROOT_ID);
-  if (existingRoot instanceof HTMLDivElement) {
-    return existingRoot;
-  }
-
-  const root = document.createElement("div");
-  root.id = VIEWPORT_PORTAL_ROOT_ID;
-  root.setAttribute("data-viewport-portal-root", "true");
-  root.style.cssText =
-    "position:fixed;inset:0;pointer-events:none;z-index:9999;";
-  document.body.appendChild(root);
-  return root;
-}
-
-type ViewportPortalProps = {
-  children: React.ReactNode;
-};
-
-export function ViewportPortal({ children }: ViewportPortalProps) {
-  const [root, setRoot] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    setRoot(getViewportPortalRoot());
-  }, []);
-
-  if (!root) return null;
-  return createPortal(children, root);
-}

package/cookie/cookie.shared.ts

@@ -1,142 +0,0 @@
-"use client";
-
-const EXPIRED_COOKIE_DATE = "Thu, 01 Jan 1970 00:00:00 GMT";
-
-type CookieStoreLike = {
-  delete: (name: string) => Promise<void>;
-};
-
-type DocumentCookieRef = {
-  cookie: string;
-};
-
-type ClearClientCookieOptions = {
-  hostname?: string;
-  path?: string;
-  documentRef?: DocumentCookieRef;
-  cookieStore?: CookieStoreLike;
-};
-
-type ClearAllClientCookiesOptions = ClearClientCookieOptions & {
-  /**
-   * If true, cookies in the hostname's root path ("/") are also deleted.
-   * Use with caution.
-   */
-  includeRoot?: boolean;
-  cookieString?: string;
-};
-
-function findClientCookie(
-  name: string,
-  documentRef: DocumentCookieRef,
-): string | undefined {
-  const parsed = parseClientCookie(documentRef.cookie);
-  return parsed[name];
-}
-
-function parseClientCookie(cookieString: string): Record<string, string> {
-  return cookieString
-    .split(";")
-    .map((pair) => pair.trim().split("=") as [string, string])
-    .reduce<Record<string, string>>((acc, [key, value]) => {
-      if (key) {
-        acc[key] = value;
-      }
-      return acc;
-    }, {});
-}
-
-export function parseClientCookieNames(cookieString: string): string[] {
-  return cookieString
-    .split(";")
-    .map((entry) => {
-      const eqPos = entry.indexOf("=");
-      return eqPos > -1 ? entry.slice(0, eqPos).trim() : entry.trim();
-    })
-    .filter(Boolean);
-}
-
-export function getClientCookie(name: string): string | undefined {
-  if (typeof document === "undefined") {
-    return undefined;
-  }
-
-  return findClientCookie(name, document);
-}
-
-export function setClientCookie(name: string, value: string, days?: number) {
-  if (typeof document === "undefined") {
-    return;
-  }
-
-  let expires = "";
-  if (days) {
-    const date = new Date();
-    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
-    expires = `; expires=${date.toUTCString()}`;
-  }
-
-  document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/`;
-}
-
-export function clearClientCookie(
-  name: string,
-  options: ClearClientCookieOptions = {},
-): void {
-  const {
-    hostname = window.location.hostname,
-    path = "/",
-    documentRef = document,
-  } = options;
-
-  documentRef.cookie = `${name}=; expires=${EXPIRED_COOKIE_DATE}; path=${path}; domain=${hostname};`;
-}
-
-export function clearAllClientCookies(
-  options: ClearAllClientCookiesOptions = {},
-): string[] {
-  const {
-    documentRef = document,
-    cookieStore,
-    includeRoot = false,
-    cookieString,
-  } = options;
-
-  const entries = cookieString
-    ? parseClientCookieNames(cookieString)
-    : documentRef.cookie
-        .split(/;\s*/)
-        .map((entry) => {
-          const eqPos = entry.indexOf("=");
-          return eqPos > -1 ? entry.slice(0, eqPos).trim() : entry.trim();
-        })
-        .filter(Boolean);
-
-  if (cookieStore) {
-    for (const name of entries) {
-      cookieStore.delete(name);
-    }
-    return entries;
-  }
-
-  const hostnameParts = window.location.hostname.split(".");
-  const { pathname } = window.location;
-
-  const paths = [pathname];
-  if (includeRoot) {
-    paths.unshift("/");
-  }
-
-  for (const name of entries) {
-    if (!name) continue;
-
-    for (const path of paths) {
-      for (let i = 0; i < hostnameParts.length; i++) {
-        const domain = hostnameParts.slice(i).join(".");
-        documentRef.cookie = `${name}=; expires=${EXPIRED_COOKIE_DATE}; path=${path}; domain=${domain};`;
-      }
-    }
-  }
-
-  return entries;
-}

package/datetime/dateTime.client.ts

@@ -1,108 +0,0 @@
-import {
-    type DateInput,
-    type DatePreset,
-    format24HourTime,
-    formatDotDate,
-    formatKoreanTime,
-    formatLongDate,
-    formatRelativeText,
-    formatTwelveHourTime,
-    type TimePreset,
-    toDate,
-} from "./dateTime.shared";
-
-export function formatClientDate(
-  value: DateInput,
-  options: {
-    locale?: string;
-    timeZone?: string;
-    preset: DatePreset;
-  },
-): string {
-  const date = toDate(value);
-  if (!date) return "";
-
-  return options.preset === "dot"
-    ? formatDotDate(date, options.timeZone)
-    : formatLongDate(date, options.locale, options.timeZone);
-}
-
-export function formatClientTime(
-  value: DateInput,
-  options: {
-    locale?: string;
-    timeZone?: string;
-    preset: TimePreset;
-  },
-): string {
-  const date = toDate(value);
-  if (!date) return "";
-
-  switch (options.preset) {
-    case "ko":
-      return formatKoreanTime(date, options.timeZone);
-    case "12h":
-      return formatTwelveHourTime(date, options.locale, options.timeZone);
-    case "24h-second":
-      return format24HourTime(date, {
-        includeSeconds: true,
-        timeZone: options.timeZone,
-      });
-    default:
-      return format24HourTime(date, { timeZone: options.timeZone });
-  }
-}
-
-export function formatClientDateTime(
-  value: DateInput,
-  options: {
-    locale?: string;
-    timeZone?: string;
-    datePreset?: DatePreset;
-    timePreset?: TimePreset;
-  },
-): string {
-  const dateText = formatClientDate(value, {
-    locale: options.locale,
-    timeZone: options.timeZone,
-    preset: options.datePreset ?? "long",
-  });
-  const timeText = formatClientTime(value, {
-    locale: options.locale,
-    timeZone: options.timeZone,
-    preset: options.timePreset ?? "24h-minute",
-  });
-  return dateText && timeText
-    ? `${dateText} ${timeText}`
-    : dateText || timeText;
-}
-
-export function formatClientRelative(
-  value: DateInput,
-  options: {
-    locale?: string;
-    now?: DateInput;
-    maxRelativeDays?: number;
-    fallbackDatePreset?: DatePreset;
-  },
-): { text: string; isRelative: boolean } {
-  const date = toDate(value);
-  const now = toDate(options.now ?? Date.now());
-  if (!date || !now) {
-    return { text: "", isRelative: false };
-  }
-
-  const diffMs = Math.max(0, now.getTime() - date.getTime());
-  const maxRelativeMs = (options.maxRelativeDays ?? 7) * 24 * 60 * 60 * 1000;
-  if (diffMs > maxRelativeMs) {
-    return {
-      text: formatClientDate(date, {
-        locale: options.locale,
-        preset: options.fallbackDatePreset ?? "dot",
-      }),
-      isRelative: false,
-    };
-  }
-
-  return formatRelativeText(diffMs, options.locale);
-}