test(utils): add tests for stripHash and isValidHex (JhaSourav07#568)

## Description

Fixes JhaSourav07#349 

Added unit tests for `stripHash` and `isValidHex` in
`app/customize/utils.test.ts`.

### Changes made

Added test coverage for:
• `stripHash` with hash prefix
• `stripHash` without hash prefix
• `stripHash` with empty string
• `isValidHex` with valid hex values
• `isValidHex` with invalid characters
• `isValidHex` with short hex values
• `isValidHex` with hash prefixed values

Reviewed utility behavior to ensure consistency with existing sanitizer
logic and verified that all tests pass successfully.

## Pillar

☐ 🎨 Pillar 1 New Theme Design
☐ 📐 Pillar 2 Geometric SVG Improvement
☐ 🕐 Pillar 3 Timezone Logic Optimization
☑ 🛠️ Other Bug fix refactoring docs

## Visual Preview

N/A test and utility improvement only.

## Checklist before requesting a review

☑ I have read the `CONTRIBUTING.md` file.
☑ I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
☑ I have run `npm run format` and `npm run lint` locally and resolved
all errors.
☑ My commits follow the Conventional Commits format.
☑ I have updated `README.md` if required.
☑ I have starred the repo.
☑ I have made sure that I have only one commit in this PR.
☑ The SVG output matches the CommitPulse premium quality aesthetic
standard.
☑ I joined the CommitPulse Discord community for contributor discussions
and PR support.

Author: abhilashgedela28-lang

app/customize/utils.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest';
+import { stripHash, isValidHex } from './utils';
+
+describe('Customize Utils', () => {
+  describe('stripHash', () => {
+    it('removes leading # from hex color', () => {
+      expect(stripHash('#ff0000')).toBe('ff0000');
+    });
+
+    it('returns unchanged string if no # prefix', () => {
+      expect(stripHash('ff0000')).toBe('ff0000');
+    });
+
+    it('handles empty string', () => {
+      expect(stripHash('')).toBe('');
+    });
+
+    it('only removes leading #, not all occurrences', () => {
+      expect(stripHash('##ff0000')).toBe('#ff0000');
+    });
+
+    it('handles just # character', () => {
+      expect(stripHash('#')).toBe('');
+    });
+  });
+
+  describe('isValidHex', () => {
+    describe('valid 6-digit hex colors', () => {
+      it('accepts lowercase hex without #', () => {
+        expect(isValidHex('ffffff')).toBe(true);
+        expect(isValidHex('000000')).toBe(true);
+        expect(isValidHex('ff0000')).toBe(true);
+      });
+
+      it('accepts uppercase hex without #', () => {
+        expect(isValidHex('FFFFFF')).toBe(true);
+        expect(isValidHex('FF0000')).toBe(true);
+      });
+
+      it('accepts mixed case hex without #', () => {
+        expect(isValidHex('FfFfFf')).toBe(true);
+        expect(isValidHex('aAbBcC')).toBe(true);
+      });
+
+      it('accepts 6-digit hex with # prefix', () => {
+        expect(isValidHex('#ffffff')).toBe(true);
+        expect(isValidHex('#000000')).toBe(true);
+      });
+    });
+
+    describe('invalid hex colors', () => {
+      it('rejects non-hex characters', () => {
+        expect(isValidHex('zzzzzz')).toBe(false);
+        expect(isValidHex('gggggg')).toBe(false);
+        expect(isValidHex('ff@0000')).toBe(false);
+      });
+
+      it('rejects wrong length', () => {
+        expect(isValidHex('f')).toBe(false);
+        expect(isValidHex('ff')).toBe(false);
+        expect(isValidHex('fff')).toBe(false);
+        expect(isValidHex('fffff')).toBe(false);
+        expect(isValidHex('fffffff')).toBe(false);
+        expect(isValidHex('ffffffff')).toBe(false);
+      });
+
+      it('rejects hex with # but invalid length', () => {
+        expect(isValidHex('#fff')).toBe(false);
+        expect(isValidHex('#fffff')).toBe(false);
+      });
+
+      it('rejects empty string', () => {
+        expect(isValidHex('')).toBe(false);
+      });
+
+      it('rejects hex with invalid characters and #', () => {
+        expect(isValidHex('#zzzzzz')).toBe(false);
+        expect(isValidHex('#ff@000')).toBe(false);
+      });
+    });
+  });
+});

app/customize/utils.ts

@@ -2,10 +2,19 @@ import type { ExportFormat } from './types';
 
 const BADGE_BASE_URL = 'https://commitpulse.vercel.app/api/streak';
 
+/**
+ * Removes the leading # from a hex color string.
+ * Used specifically for color picker handling in the customize interface.
+ */
 export function stripHash(val: string): string {
   return val.replace(/^#/, '');
 }
 
+/**
+ * Validates if a string is a valid 6-digit hex color for the color picker.
+ * Intentionally strict (6-digit only) for color customization.
+ * Note: lib/svg/sanitizer.ts has a more flexible version supporting 3,4,6,8 digits for SVG theming.
+ */
 export function isValidHex(value: string): boolean {
   return /^[0-9a-fA-F]{6}$/.test(stripHash(value));
 }

hooks/useRecentSearches.ts

@@ -16,35 +16,24 @@ export function useRecentSearches() {
   const [state, setState] = useState<State>({ searches: [], mounted: false });
 
   useEffect(() => {
-    let saved: string[] = [];
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      if (stored) saved = JSON.parse(stored) as string[];
-    } catch {
-      // ignore malformed storage
-    }
     // Single setState call — reads external system (localStorage) and syncs
     // React state in one update, which is exactly what effects are for.
     // eslint-disable-next-line react-hooks/set-state-in-effect
-    setState({ searches: saved, mounted: true });
+    setState({ searches: loadFromStorage(), mounted: true });
   }, []);
 
   const addSearch = (query: string) => {
     if (!query.trim()) return;
     setState((prev) => {
       const deduped = [query, ...prev.searches.filter((s) => s !== query)].slice(0, MAX_SEARCHES);
-      try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(deduped));
-      } catch {}
+      writeStorage(deduped);
       return { ...prev, searches: deduped };
     });
   };
 
   const clearSearches = () => {
     setState((prev) => ({ ...prev, searches: [] }));
-    try {
-      localStorage.removeItem(STORAGE_KEY);
-    } catch {}
+    writeStorage(null);
   };
 
   // Return empty searches until after hydration to prevent SSR/client mismatch.