@jbpark/use-hooks 2.3.0 → 2.4.0

package/README.ko.md

@@ -128,12 +128,11 @@ dist/                            # 빌드된 라이브러리 (ESM + types)
 
 ## 빌드 및 배포
 
-이 프로젝트는 `develop` → `main` 브랜치 흐름과 AI 기반 자동 릴리스 노트를 사용합니다:
+배포는 [changesets](https://github.com/changesets/changesets)로 완전히 자동화되어 있습니다:
 
-- **기능 브랜치**는 `develop`으로 머지됩니다.
-- `develop`에 push될 때마다 워크플로가 diff를 분석해 `CHANGELOG.md`의 `## [Unreleased]` 섹션에 항목을 누적합니다 (버전은 아직 올리지 않음).
-- `develop`이 `main`으로 머지되면 `Unreleased` 섹션에 버전+날짜가 확정되고 `package.json` 버전이 그에 맞춰 올라간 릴리스 PR이 생성됩니다.
-- 이 릴리스 PR을 머지하면 빌드, npm 배포, 태그 생성까지 자동으로 진행됩니다.
+- `main`으로 향하는 PR마다 AI가 변경 내용을 요약한 changeset 파일을 초안으로 작성합니다.
+- `main`에 changeset들이 쌓이면 "Version Packages" PR이 `package.json`의 버전을 승격시키고 `CHANGELOG.md`를 정리합니다.
+- 이 PR을 머지하면 빌드, npm 배포, 태그 생성까지 자동으로 진행됩니다.
 
 라이브러리는 다음과 같이 빌드됩니다:
 

package/README.md

@@ -128,12 +128,11 @@ dist/                            # Built library (ESM + types)
 
 ## Build & Deployment
 
-This project uses a `develop` → `main` branch flow with automated, AI-assisted release notes:
+Releases are fully automated via [changesets](https://github.com/changesets/changesets):
 
-- **Feature branches** merge into `develop`.
-- On every push to `develop`, a workflow analyzes the diff and appends bullet points to the `## [Unreleased]` section of `CHANGELOG.md` (no version bump yet).
-- When `develop` is merged into `main`, that `Unreleased` section is stamped with a version + date and `package.json` is bumped to match, opened as a release PR.
-- Merging the release PR builds, publishes to npm, and tags the release.
+- Each PR against `main` gets an AI-drafted changeset file describing its change.
+- Once changesets accumulate on `main`, a "Version Packages" PR bumps `package.json`'s version and consolidates `CHANGELOG.md`.
+- Merging that PR builds, publishes to npm, and tags the release.
 
 The library is built as:
 

package/dist/hooks/index.d.mts

@@ -3,6 +3,7 @@ import { useBodyScrollLock } from "./use-body-scroll-lock.mjs";
 import { useClickOutside } from "./use-click-outside.mjs";
 import { useElementPosition } from "./use-element-position.mjs";
 import { useElementScroll } from "./use-element-scroll.mjs";
+import { useHistoryState } from "./use-history-state.mjs";
 import { useResponsiveSize } from "./use-responsive-size.mjs";
 import { useImage } from "./use-image.mjs";
 import { useLocalStorage } from "./use-local-storage.mjs";

package/dist/hooks/index.mjs

@@ -3,6 +3,7 @@ import useBodyScrollLock from "./use-body-scroll-lock.mjs";
 import useClickOutside from "./use-click-outside.mjs";
 import useElementPosition from "./use-element-position.mjs";
 import useElementScroll from "./use-element-scroll.mjs";
+import useHistoryState from "./use-history-state.mjs";
 import useResponsiveSize from "./use-responsive-size.mjs";
 import useImage from "./use-image.mjs";
 import useLocalStorage from "./use-local-storage.mjs";

package/dist/hooks/use-history-state.d.mts

@@ -0,0 +1,16 @@
+//#region src/hooks/use-history-state.d.ts
+interface UseHistoryStateOptions {
+  limit?: number;
+}
+declare const useHistoryState: <T>(initialValue: T, options?: UseHistoryStateOptions) => {
+  readonly value: T;
+  readonly setValue: (value: T | ((prev: T) => T)) => void;
+  readonly undo: () => void;
+  readonly redo: () => void;
+  readonly reset: (value: T) => void;
+  readonly canUndo: boolean;
+  readonly canRedo: boolean;
+};
+//#endregion
+export { useHistoryState };
+//# sourceMappingURL=use-history-state.d.mts.map

package/dist/hooks/use-history-state.mjs

@@ -0,0 +1,79 @@
+import { useCallback, useReducer } from "react";
+
+//#region src/hooks/use-history-state.ts
+const createReducer = (limit) => (state, action) => {
+	switch (action.type) {
+		case "SET": {
+			const resolved = action.value instanceof Function ? action.value(state.present) : action.value;
+			if (resolved === state.present) return state;
+			return {
+				past: [...state.past, state.present].slice(-limit),
+				present: resolved,
+				future: []
+			};
+		}
+		case "UNDO": {
+			if (state.past.length === 0) return state;
+			const previous = state.past[state.past.length - 1];
+			return {
+				past: state.past.slice(0, -1),
+				present: previous,
+				future: [state.present, ...state.future]
+			};
+		}
+		case "REDO": {
+			if (state.future.length === 0) return state;
+			const [next, ...rest] = state.future;
+			return {
+				past: [...state.past, state.present].slice(-limit),
+				present: next,
+				future: rest
+			};
+		}
+		case "RESET": return {
+			past: [],
+			present: action.value,
+			future: []
+		};
+		default: return state;
+	}
+};
+const DEFAULT_LIMIT = 50;
+const useHistoryState = (initialValue, options) => {
+	const [state, dispatch] = useReducer(createReducer(options?.limit ?? DEFAULT_LIMIT), {
+		past: [],
+		present: initialValue,
+		future: []
+	});
+	const setValue = useCallback((value) => {
+		dispatch({
+			type: "SET",
+			value
+		});
+	}, []);
+	const undo = useCallback(() => {
+		dispatch({ type: "UNDO" });
+	}, []);
+	const redo = useCallback(() => {
+		dispatch({ type: "REDO" });
+	}, []);
+	const reset = useCallback((value) => {
+		dispatch({
+			type: "RESET",
+			value
+		});
+	}, []);
+	return {
+		value: state.present,
+		setValue,
+		undo,
+		redo,
+		reset,
+		canUndo: state.past.length > 0,
+		canRedo: state.future.length > 0
+	};
+};
+
+//#endregion
+export { useHistoryState as default };
+//# sourceMappingURL=use-history-state.mjs.map

package/dist/hooks/use-history-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-history-state.mjs","names":[],"sources":["../../src/hooks/use-history-state.ts"],"sourcesContent":["import { useCallback, useReducer } from 'react';\n\ninterface HistoryState<T> {\n  past: T[];\n  present: T;\n  future: T[];\n}\n\ntype Action<T> =\n  | { type: 'SET'; value: T | ((prev: T) => T) }\n  | { type: 'UNDO' }\n  | { type: 'REDO' }\n  | { type: 'RESET'; value: T };\n\nconst createReducer =\n  <T>(limit: number) =>\n  (state: HistoryState<T>, action: Action<T>): HistoryState<T> => {\n    switch (action.type) {\n      case 'SET': {\n        const resolved =\n          action.value instanceof Function\n            ? action.value(state.present)\n            : action.value;\n\n        if (resolved === state.present) {\n          return state;\n        }\n\n        return {\n          past: [...state.past, state.present].slice(-limit),\n          present: resolved,\n          future: [],\n        };\n      }\n\n      case 'UNDO': {\n        if (state.past.length === 0) {\n          return state;\n        }\n\n        const previous = state.past[state.past.length - 1] as T;\n\n        return {\n          past: state.past.slice(0, -1),\n          present: previous,\n          future: [state.present, ...state.future],\n        };\n      }\n\n      case 'REDO': {\n        if (state.future.length === 0) {\n          return state;\n        }\n\n        const [next, ...rest] = state.future;\n\n        return {\n          past: [...state.past, state.present].slice(-limit),\n          present: next as T,\n          future: rest,\n        };\n      }\n\n      case 'RESET': {\n        return { past: [], present: action.value, future: [] };\n      }\n\n      default: {\n        return state;\n      }\n    }\n  };\n\ninterface UseHistoryStateOptions {\n  limit?: number;\n}\n\nconst DEFAULT_LIMIT = 50;\n\nconst useHistoryState = <T>(\n  initialValue: T,\n  options?: UseHistoryStateOptions,\n) => {\n  const limit = options?.limit ?? DEFAULT_LIMIT;\n\n  const [state, dispatch] = useReducer(createReducer<T>(limit), {\n    past: [],\n    present: initialValue,\n    future: [],\n  });\n\n  const setValue = useCallback((value: T | ((prev: T) => T)) => {\n    dispatch({ type: 'SET', value });\n  }, []);\n\n  const undo = useCallback(() => {\n    dispatch({ type: 'UNDO' });\n  }, []);\n\n  const redo = useCallback(() => {\n    dispatch({ type: 'REDO' });\n  }, []);\n\n  const reset = useCallback((value: T) => {\n    dispatch({ type: 'RESET', value });\n  }, []);\n\n  return {\n    value: state.present,\n    setValue,\n    undo,\n    redo,\n    reset,\n    canUndo: state.past.length > 0,\n    canRedo: state.future.length > 0,\n  } as const;\n};\n\nexport default useHistoryState;\n"],"mappings":";;;AAcA,MAAM,iBACA,WACH,OAAwB,WAAuC;AAC9D,SAAQ,OAAO,MAAf;EACE,KAAK,OAAO;GACV,MAAM,WACJ,OAAO,iBAAiB,WACpB,OAAO,MAAM,MAAM,QAAQ,GAC3B,OAAO;AAEb,OAAI,aAAa,MAAM,QACrB,QAAO;AAGT,UAAO;IACL,MAAM,CAAC,GAAG,MAAM,MAAM,MAAM,QAAQ,CAAC,MAAM,CAAC,MAAM;IAClD,SAAS;IACT,QAAQ,EAAE;IACX;;EAGH,KAAK,QAAQ;AACX,OAAI,MAAM,KAAK,WAAW,EACxB,QAAO;GAGT,MAAM,WAAW,MAAM,KAAK,MAAM,KAAK,SAAS;AAEhD,UAAO;IACL,MAAM,MAAM,KAAK,MAAM,GAAG,GAAG;IAC7B,SAAS;IACT,QAAQ,CAAC,MAAM,SAAS,GAAG,MAAM,OAAO;IACzC;;EAGH,KAAK,QAAQ;AACX,OAAI,MAAM,OAAO,WAAW,EAC1B,QAAO;GAGT,MAAM,CAAC,MAAM,GAAG,QAAQ,MAAM;AAE9B,UAAO;IACL,MAAM,CAAC,GAAG,MAAM,MAAM,MAAM,QAAQ,CAAC,MAAM,CAAC,MAAM;IAClD,SAAS;IACT,QAAQ;IACT;;EAGH,KAAK,QACH,QAAO;GAAE,MAAM,EAAE;GAAE,SAAS,OAAO;GAAO,QAAQ,EAAE;GAAE;EAGxD,QACE,QAAO;;;AASf,MAAM,gBAAgB;AAEtB,MAAM,mBACJ,cACA,YACG;CAGH,MAAM,CAAC,OAAO,YAAY,WAAW,cAFvB,SAAS,SAAS,cAE4B,EAAE;EAC5D,MAAM,EAAE;EACR,SAAS;EACT,QAAQ,EAAE;EACX,CAAC;CAEF,MAAM,WAAW,aAAa,UAAgC;AAC5D,WAAS;GAAE,MAAM;GAAO;GAAO,CAAC;IAC/B,EAAE,CAAC;CAEN,MAAM,OAAO,kBAAkB;AAC7B,WAAS,EAAE,MAAM,QAAQ,CAAC;IACzB,EAAE,CAAC;CAEN,MAAM,OAAO,kBAAkB;AAC7B,WAAS,EAAE,MAAM,QAAQ,CAAC;IACzB,EAAE,CAAC;CAEN,MAAM,QAAQ,aAAa,UAAa;AACtC,WAAS;GAAE,MAAM;GAAS;GAAO,CAAC;IACjC,EAAE,CAAC;AAEN,QAAO;EACL,OAAO,MAAM;EACb;EACA;EACA;EACA;EACA,SAAS,MAAM,KAAK,SAAS;EAC7B,SAAS,MAAM,OAAO,SAAS;EAChC"}

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import { useBodyScrollLock } from "./hooks/use-body-scroll-lock.mjs";
 import { useClickOutside } from "./hooks/use-click-outside.mjs";
 import { useElementPosition } from "./hooks/use-element-position.mjs";
 import { useElementScroll } from "./hooks/use-element-scroll.mjs";
+import { useHistoryState } from "./hooks/use-history-state.mjs";
 import { useResponsiveSize } from "./hooks/use-responsive-size.mjs";
 import { useImage } from "./hooks/use-image.mjs";
 import { useLocalStorage } from "./hooks/use-local-storage.mjs";
@@ -13,4 +14,4 @@ import { useTimeline } from "./hooks/use-timeline.mjs";
 import { useWindowScroll } from "./hooks/use-window-scroll.mjs";
 import { useViewport } from "./hooks/use-viewport.mjs";
 import "./hooks/index.mjs";
-export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useImage, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useHistoryState, useImage, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };

package/dist/index.mjs

@@ -3,6 +3,7 @@ import useBodyScrollLock from "./hooks/use-body-scroll-lock.mjs";
 import useClickOutside from "./hooks/use-click-outside.mjs";
 import useElementPosition from "./hooks/use-element-position.mjs";
 import useElementScroll from "./hooks/use-element-scroll.mjs";
+import useHistoryState from "./hooks/use-history-state.mjs";
 import useResponsiveSize from "./hooks/use-responsive-size.mjs";
 import useImage from "./hooks/use-image.mjs";
 import useLocalStorage from "./hooks/use-local-storage.mjs";
@@ -14,4 +15,4 @@ import useWindowScroll from "./hooks/use-window-scroll.mjs";
 import useViewport from "./hooks/use-viewport.mjs";
 import "./hooks/index.mjs";
 
-export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useImage, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };
+export { useBodyScrollLock, useClickOutside, useDebounce, useElementPosition, useElementScroll, useHistoryState, useImage, useLocalStorage, useRecursiveTimeout, useResponsiveSize, useScrollToElements, useThrottle, useTimeline, useViewport, useWindowScroll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/use-hooks",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "A collection of reusable React 19 hooks for common UI and interaction patterns",
   "keywords": [
     "react",
@@ -41,6 +41,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && tsdown",
+    "build:demo": "vite build",
     "lint": "eslint .",
     "preview": "vite preview",
     "prepublishOnly": "pnpm build",
@@ -51,8 +52,10 @@
     "react-dom": "^19.1.1"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.31.1",
     "@eslint/js": "^9.33.0",
     "@jbpark/ui-kit": "^2.7.0",
+    "@radix-ui/react-icons": "^1.3.2",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/node": "^24.5.2",
     "@types/react": "^19.1.10",