Feat/compt 30 state storage hooks by a-elkhiraooui-ciscode · Pull Request #6 · CISCODE-MA/HooksKit

a-elkhiraooui-ciscode · 2026-03-30T12:45:13Z

Summary

What does this PR change?

Why

Why is this change needed?

Checklist

Added/updated tests (if behavior changed)
npm run lint passes
npm run typecheck passes
npm test passes
npm run build passes
Added a changeset (npx changeset) if this affects consumers

Notes

Anything reviewers should pay attention to?

…ooks - useDebounce<T>(value, delay): returns debounced value, resets timer on value/delay change - useLocalStorage<T>(key, initial): syncs with localStorage, SSR-safe, JSON serialization - useSessionStorage<T>(key, initial): same pattern for sessionStorage - Shared storage.ts helper with readStorageValue/writeStorageValue (SSR guard + parse fallback) - All three exported from src/hooks/index.ts -> src/index.ts - Full test coverage: timer reset, JSON sync, parse error fallback, SSR guard - tsc --noEmit passes, lint passes (0 warnings), 13/13 tests pass

…y pre-commit - .changeset/COMPT-30-state-storage-hooks.md: minor bump summary for 0.0.1 release - .github/instructions/copilot-instructions.md: updated to HooksKit package identity, real src structure with COMPT-30 hooks marked, COMPT-XX branch naming convention - .husky/pre-commit: removed deprecated husky v9 shebang lines (breaks in v10)

sonarqubecloud · 2026-03-30T12:45:44Z

Quality Gate passed

Issues
18 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Copilot

Pull request overview

Adds the first “state & storage” hooks for the HooksKit library, plus supporting storage utilities, tests, and documentation/metadata updates.

Changes:

Introduces useDebounce, useLocalStorage, and useSessionStorage hooks with Vitest coverage.
Adds shared storage.ts helpers for JSON (de)serialization with SSR guards.
Updates hook barrel exports, Changeset metadata, Husky hook config, and contributor instructions.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
`src/hooks/useSessionStorage.ts`	New hook for sessionStorage-backed state using shared storage helpers.
`src/hooks/useSessionStorage.test.ts`	Tests for session storage behavior and fallback scenarios.
`src/hooks/useLocalStorage.ts`	New hook for localStorage-backed state using shared storage helpers.
`src/hooks/useLocalStorage.test.ts`	Tests for local storage behavior and fallback scenarios.
`src/hooks/useDebounce.ts`	New debounce hook implemented with a timeout-based effect.
`src/hooks/useDebounce.test.ts`	Tests covering debounce timing behavior with fake timers.
`src/hooks/storage.ts`	New shared helpers to read/write JSON values with SSR/error guards.
`src/hooks/index.ts`	Exports the newly added hooks from the hooks barrel.
`.husky/pre-commit`	Modifies the pre-commit hook to run `lint-staged`.
`.github/instructions/copilot-instructions.md`	Updates project guidelines/docs for the new HooksKit focus.
`.changeset/COMPT-30-state-storage-hooks.md`	Adds a Changeset entry describing the new hooks release.

Copilot · 2026-03-30T12:50:22Z

.changeset/COMPT-30-state-storage-hooks.md

@@ -0,0 +1,21 @@
+---
+"@ciscode/reactts-developerkit": minor


The changeset frontmatter targets "@ciscode/reactts-developerkit", but package.json declares the package name as @ciscode/hooks-kit. With the wrong package name, Changesets won’t version/release the actual package. Update the changeset to reference the real package name.

Suggested change

"@ciscode/reactts-developerkit": minor

"@ciscode/hooks-kit": minor

Copilot · 2026-03-30T12:50:23Z

.github/instructions/copilot-instructions.md


-**Package**: `@ciscode/ui-components` (example)  
-**Type**: React Component Library  
+**Package**: `@ciscode/reactts-developerkit`  


This doc states the package name is @ciscode/reactts-developerkit, but package.json currently uses @ciscode/hooks-kit. Please align the documentation with the actual published package name to avoid confusing consumers/contributors.

Suggested change

**Package**: `@ciscode/reactts-developerkit`

**Package**: `@ciscode/hooks-kit`

Copilot · 2026-03-30T12:50:23Z

src/hooks/useLocalStorage.ts

+    writeStorageValue(storage, key, storedValue);
+  }, [key, storedValue, storage]);


When key changes, the hook keeps the previous storedValue (since the useState initializer only runs once) but the effect will start writing that old value under the new key. This can overwrite an existing value for the new key and never re-read it. Either document that key must be stable, or add logic to re-read/reset state when key changes (and avoid overwriting until after the re-read).

Suggested change

writeStorageValue(storage, key, storedValue);

}, [key, storedValue, storage]);

const value = readStorageValue(storage, key, initialValue);

setStoredValue(value);

}, [key, storage, initialValue]);

useEffect(() => {

writeStorageValue(storage, key, storedValue);

}, [storedValue, storage]);

Copilot · 2026-03-30T12:50:24Z

src/hooks/useSessionStorage.ts

+  const [storedValue, setStoredValue] = useState<T>(() => {
+    return readStorageValue(storage, key, initialValue);
+  });
+
+  useEffect(() => {
+    writeStorageValue(storage, key, storedValue);
+  }, [key, storedValue, storage]);


If key changes over time, the hook won’t re-read sessionStorage for the new key (the useState initializer runs once), but the effect will write the existing state to the new key. That can overwrite a pre-existing value for the new key. Consider either enforcing/documenting a stable key, or syncing state on key changes before writing.

Copilot · 2026-03-30T12:50:24Z

.husky/pre-commit

-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged


.husky/pre-commit no longer has a shebang or Husky bootstrap (. "$(dirname -- "$0")/_/husky.sh"). Git executes hooks as standalone programs; without a shebang this commonly fails with an “exec format error” and the hook won’t run. Restore the standard Husky header so the hook is executable and runs reliably across environments.

Copilot · 2026-03-30T12:50:24Z

src/hooks/useDebounce.ts

+    const timeoutId = window.setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      window.clearTimeout(timeoutId);


useDebounce uses window.setTimeout/window.clearTimeout. This breaks the repo’s SSR-safety convention (all window access must be guarded) and also fails in non-browser React environments where window is undefined. Prefer globalThis.setTimeout/globalThis.clearTimeout or the unqualified setTimeout/clearTimeout (and/or guard with typeof window === 'undefined'). See .github/instructions/copilot-instructions.md (SSR-safe rule).

Suggested change

const timeoutId = window.setTimeout(() => {

setDebouncedValue(value);

}, delay);

return () => {

window.clearTimeout(timeoutId);

const timeoutId = setTimeout(() => {

setDebouncedValue(value);

}, delay);

return () => {

clearTimeout(timeoutId);

Copilot · 2026-03-30T12:50:24Z

src/hooks/useLocalStorage.test.ts

+  it('returns initial value when window is undefined (SSR guard)', () => {
+    vi.stubGlobal('window', undefined);
+
+    const value = readStorageValue(undefined, 'ssr', 'fallback');
+    expect(value).toBe('fallback');
+  });


This test is labeled as verifying the hook’s SSR guard, but it never calls useLocalStorage; it only tests readStorageValue. That leaves useLocalStorage’s SSR behavior untested and can let regressions slip through. Either rename/move this test to a storage helper test suite, or add a test that renders useLocalStorage with window undefined and asserts it returns the initial value without throwing.

Copilot · 2026-03-30T12:50:24Z

src/hooks/useSessionStorage.test.ts

+  it('returns initial value when window is undefined (SSR guard)', () => {
+    vi.stubGlobal('window', undefined);
+
+    const value = readStorageValue(undefined, 'ssr', 'fallback');
+    expect(value).toBe('fallback');
+  });


This test is labeled as verifying the hook’s SSR guard, but it never calls useSessionStorage; it only tests readStorageValue. That means useSessionStorage’s SSR behavior isn’t actually covered. Either rename/move this test to a storage helper test suite, or add a test that renders useSessionStorage with window undefined and asserts it returns the initial value without throwing.

a-elkhiraooui-ciscode added 2 commits March 30, 2026 13:22

Copilot AI review requested due to automatic review settings March 30, 2026 12:45

Copilot started reviewing on behalf of a-elkhiraooui-ciscode March 30, 2026 12:45 View session

a-elkhiraooui-ciscode merged commit 8cde8b0 into develop Mar 30, 2026
5 of 6 checks passed

Copilot AI reviewed Mar 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/compt 30 state storage hooks#6

Feat/compt 30 state storage hooks#6
a-elkhiraooui-ciscode merged 2 commits intodevelopfrom
feat/COMPT-30-state-storage-hooks

a-elkhiraooui-ciscode commented Mar 30, 2026

Uh oh!

sonarqubecloud bot commented Mar 30, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Copilot AI Mar 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	"@ciscode/reactts-developerkit": minor
	"@ciscode/hooks-kit": minor

	Package: `@ciscode/reactts-developerkit`
	Package: `@ciscode/hooks-kit`

		writeStorageValue(storage, key, storedValue);
		}, [key, storedValue, storage]);

Conversation

a-elkhiraooui-ciscode commented Mar 30, 2026

Summary

Why

Checklist

Notes

Uh oh!

sonarqubecloud bot commented Mar 30, 2026

Quality Gate passed

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants