@musecat/functionkit 1.0.1 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # @musecat/functionkit
 
-React 19 기반 프론트엔드 유틸리티 라이브러리입니다.
+A React 19 + TypeScript UI F.E. utility library.
 
 ## Installation
 
@@ -10,16 +10,29 @@ npm install @musecat/functionkit
 
 ## Usage
 
-모든 훅, 컴포넌트, 유틸리티는 배럴 파일을 통해 직접 임포트하여 사용할 수 있습니다.
-
 ```tsx
 import { useDebounce, formatClientDateTime } from "@musecat/functionkit";
+
+export default function Example() {
+  const handleSearch = useDebounce((term: string) => fetchResults(term), 300);
+  const now = formatClientDateTime(new Date(), {
+    datePreset: "long",
+    timePreset: "24h-minute",
+  });
+
+  return (
+    <View column gap={24}>
+      <Input onChange={(e) => handleSearch(e.target.value)} />
+      <Text type="Caption1">{now}</Text>
+    </View>
+  );
+}
 ```
 
 ## Acknowledgements
 
-이 프로젝트의 많은 유틸리티 및 훅 코드는 [toss/react-simplikit](https://github.com/toss/react-simplikit/) 프로젝트를 참조 및 영감을 받아 작성되었습니다.
+- [toss/react-simplikit](https://github.com/toss/react-simplikit/)
 
 ## License
 
-MIT License © Musecat Team. 여기에서 [라이센스](./LICENSE) 정보 확인하기
+[MIT License](./LICENSE) © Musecat Team.

package/biome.json

@@ -0,0 +1,25 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.5.4/schema.json",
+	"assist": { "actions": { "source": { "organizeImports": "on" } } },
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"preset": "recommended"
+		}
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab",
+		"indentWidth": 2,
+		"lineWidth": 100
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double",
+			"semicolons": "always"
+		}
+	},
+	"files": {
+		"includes": ["**", "!**/dist", "!**/coverage", "!**/node_modules"]
+	}
+}

package/index.ts

@@ -1,53 +1,49 @@
-// 컴포넌트
 export {
-  getViewportPortalRoot,
-  ViewportPortal
+	getViewportPortalRoot,
+	ViewportPortal,
 } from "./packages/components/ViewportPortal";
-// 쿠키
 export {
-  clearAllClientCookies,
-  clearClientCookie,
-  getClientCookie,
-  parseClientCookieNames,
-  setClientCookie
+	clearAllClientCookies,
+	clearClientCookie,
+	getClientCookie,
+	setClientCookie,
 } from "./packages/cookie/cookie.shared";
-// 날짜/시간
+export { parseClientCookieNames } from "./packages/cookie/cookieNames.shared";
 export {
-  formatClientDate,
-  formatClientDateTime,
-  formatClientRelative,
-  formatClientTime
+	formatClientDate,
+	formatClientDateTime,
+	formatClientRelative,
+	formatClientTime,
 } from "./packages/datetime/dateTime.client";
 export {
-  formatServerDate,
-  formatServerDateTime,
-  formatServerRelative,
-  formatServerTime
+	formatServerDate,
+	formatServerDateTime,
+	formatServerRelative,
+	formatServerTime,
 } from "./packages/datetime/dateTime.server";
-export {
-  addUtcDays,
-  format24HourTime,
-  formatDotDate,
-  formatKoreanTime,
-  formatLongDate,
-  formatRelativeText,
-  formatRemainingText,
-  formatTwelveHourTime,
-  formatUtcDateKey,
-  getUtcWeekdayIndex,
-  normalizeAppLocale,
-  parseUtcDateInput,
-  toDate,
-  toIntlLocale,
-  toUtcMidnight
-} from "./packages/datetime/dateTime.shared";
 export type {
-  AppLocale,
-  DateInput,
-  DatePreset,
-  TimePreset
+	AppLocale,
+	DateInput,
+	DatePreset,
+	TimePreset,
+} from "./packages/datetime/dateTime.shared";
+export {
+	addUtcDays,
+	format24HourTime,
+	formatDotDate,
+	formatKoreanTime,
+	formatLongDate,
+	formatRelativeText,
+	formatRemainingText,
+	formatTwelveHourTime,
+	formatUtcDateKey,
+	getUtcWeekdayIndex,
+	normalizeAppLocale,
+	parseUtcDateInput,
+	toDate,
+	toIntlLocale,
+	toUtcMidnight,
 } from "./packages/datetime/dateTime.shared";
-// hooks
 export { useAvoidKeyboard } from "./packages/hooks/useAvoidKeyboard";
 export { useClientDateTime } from "./packages/hooks/useClientDateTime";
 export { useDebounce } from "./packages/hooks/useDebounce";
@@ -68,44 +64,43 @@ export { useTimeout } from "./packages/hooks/useTimeout";
 export { useToggleState } from "./packages/hooks/useToggleState";
 export { useViewportHeight } from "./packages/hooks/useViewportHeight";
 export { useViewportMatch } from "./packages/hooks/useViewportMatch";
-// 유틸리티
 export {
-  getLocalStorage,
-  getSessionStorage,
-  removeLocalStorage,
-  removeSessionStorage,
-  updateLocalStorage,
-  updateSessionStorage
+	getLocalStorage,
+	getSessionStorage,
+	removeLocalStorage,
+	removeSessionStorage,
+	updateLocalStorage,
+	updateSessionStorage,
 } from "./packages/utils/browserStorage";
-// 유틸리티
 export { buildContext } from "./packages/utils/buildContext";
-export { getDeviceInfo } from "./packages/utils/checkDevice";
 export type { DeviceInfo } from "./packages/utils/checkDevice";
-export { NavigatorClipboard, NavigatorShare } from "./packages/utils/clipboardShare";
+export { getDeviceInfo } from "./packages/utils/checkDevice";
+export {
+	NavigatorClipboard,
+	NavigatorShare,
+} from "./packages/utils/clipboardShare";
 export type {
-  NavigatorClipboardProps,
-  NavigatorClipboardResult,
-  NavigatorShareProps,
-  NavigatorShareResult
+	NavigatorClipboardProps,
+	NavigatorClipboardResult,
+	NavigatorShareProps,
+	NavigatorShareResult,
 } from "./packages/utils/clipboardShare.types";
-export {
-  getFloatingHiddenTransform,
-  getFloatingMotionPreset,
-  getFloatingTransformOrigin
-} from "./packages/utils/floatingMotion";
 export type {
-  FloatingMotionMode,
-  FloatingMotionPreset,
-  FloatingPlacement
+	FloatingMotionMode,
+	FloatingMotionPreset,
+	FloatingPlacement,
+} from "./packages/utils/floatingMotion";
+export {
+	getFloatingHiddenTransform,
+	getFloatingMotionPreset,
+	getFloatingTransformOrigin,
 } from "./packages/utils/floatingMotion";
-// 유틸리티
 export { isEditableKeyboardTarget } from "./packages/utils/keyboardTarget";
 export { mergeRefs } from "./packages/utils/mergeRefs";
 export {
-  buildSeenValue,
-  hasSeenKey,
-  parseSeen,
-  SEEN_STORAGE_KEY
+	buildSeenValue,
+	hasSeenKey,
+	parseSeen,
+	SEEN_STORAGE_KEY,
 } from "./packages/utils/seen";
 export { subscribeKeyboardHeight } from "./packages/utils/subscribeKeyboardHeight";
-

package/package.json

@@ -1,15 +1,48 @@
 {
-  "name": "@musecat/functionkit",
-  "version": "1.0.1",
-  "type": "module",
-  "main": "./index.ts",
-  "types": "./index.ts",
-  "exports": {
-    ".": "./index.ts",
-    "./*": "./*"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  }
+	"name": "@musecat/functionkit",
+	"version": "1.1.0",
+	"description": "React 19 + TypeScript frontend utility library — hooks, components, datetime, cookie, and utils",
+	"keywords": [
+		"react",
+		"hooks",
+		"typescript",
+		"utility",
+		"frontend"
+	],
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/TheTechclip/FunctionKit.git"
+	},
+	"bugs": {
+		"url": "https://github.com/TheTechclip/FunctionKit/issues"
+	},
+	"homepage": "https://musecat.app",
+	"type": "module",
+	"main": "./index.ts",
+	"types": "./index.ts",
+	"exports": {
+		".": "./index.ts",
+		"./*": "./*"
+	},
+	"scripts": {
+		"lint": "biome check",
+		"format": "prettier --write . && biome format --write",
+		"test": "vitest run",
+		"test:coverage": "vitest run --coverage"
+	},
+	"peerDependencies": {
+		"react": "^19.0.0",
+		"react-dom": "^19.0.0"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.5.4",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/react": "^16.2.0",
+		"@testing-library/user-event": "^14.6.1",
+		"@vitest/coverage-v8": "^4.1.10",
+		"jsdom": "^26.0.0",
+		"prettier": "^3.9.5",
+		"vitest": "^4.1.10"
+	}
 }

package/packages/components/ScrolltoTop.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 
 export function ScrolltoTop() {
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  });
+	useEffect(() => {
+		window.scrollTo(0, 0);
+	}, []);
 }

package/packages/components/SwitchCase.tsx

@@ -1,15 +1,15 @@
 import type { ReactNode } from "react";
 
 type SwitchCaseProps<T extends string | number> = {
-  value: T;
-  cases: Partial<Record<T, ReactNode>>;
-  otherwise?: ReactNode;
+	value: T;
+	cases: Partial<Record<T, ReactNode>>;
+	otherwise?: ReactNode;
 };
 
 export function SwitchCase<T extends string | number>({
-  value,
-  cases,
-  otherwise = null,
+	value,
+	cases,
+	otherwise = null,
 }: SwitchCaseProps<T>) {
-  return (cases[value] ?? otherwise) as ReactNode;
+	return (cases[value] ?? otherwise) as ReactNode;
 }

package/packages/components/ViewportPortal.tsx

@@ -6,35 +6,34 @@ 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;
+	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;
+	children: React.ReactNode;
 };
 
 export function ViewportPortal({ children }: ViewportPortalProps) {
-  const [root, setRoot] = useState<HTMLElement | null>(null);
+	const [root, setRoot] = useState<HTMLElement | null>(null);
 
-  useEffect(() => {
-    setRoot(getViewportPortalRoot());
-  }, []);
+	useEffect(() => {
+		setRoot(getViewportPortalRoot());
+	}, []);
 
-  if (!root) return null;
-  return createPortal(children, root);
+	if (!root) return null;
+	return createPortal(children, root);
 }

package/packages/cookie/cookie.shared.ts

@@ -3,140 +3,110 @@
 const EXPIRED_COOKIE_DATE = "Thu, 01 Jan 1970 00:00:00 GMT";
 
 type CookieStoreLike = {
-  delete: (name: string) => Promise<void>;
+	delete: (name: string) => Promise<void>;
 };
 
 type DocumentCookieRef = {
-  cookie: string;
+	cookie: string;
 };
 
 type ClearClientCookieOptions = {
-  hostname?: string;
-  path?: string;
-  documentRef?: DocumentCookieRef;
-  cookieStore?: CookieStoreLike;
+	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;
+	includeRoot?: boolean;
+	cookieString?: string;
 };
 
-function findClientCookie(
-  name: string,
-  documentRef: DocumentCookieRef,
-): string | undefined {
-  const parsed = parseClientCookie(documentRef.cookie);
-  return parsed[name];
+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;
-    }, {});
+	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);
-}
+import { parseClientCookieNames } from "./cookieNames.shared";
+export { parseClientCookieNames };
 
 export function getClientCookie(name: string): string | undefined {
-  if (typeof document === "undefined") {
-    return undefined;
-  }
+	if (typeof document === "undefined") {
+		return undefined;
+	}
 
-  return findClientCookie(name, document);
+	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=/`;
+	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 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;
+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) {
+		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/packages/cookie/cookieNames.shared.ts

@@ -0,0 +1,9 @@
+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);
+}