feat: migrate context layer to TypeScript

[devin-ai-integration]

Summary

Migrates context/StateContext.js → context/StateContext.tsx with full type safety, and sets up the TypeScript foundation for the project.

TypeScript setup:

• Added typescript@^6.0.3, @types/react@^17.0.40, @types/react-dom@^17.0.14, @types/node as devDependencies
• Created tsconfig.json with strict: true and allowJs: true (so existing JS files continue to work)
• Removed .babelrc and Babel dependencies (Next.js handles transpilation natively)
• Created types/index.ts with SanityProduct, CartItem, SanityBanner interfaces

Context migration:

• Defined StateContextType interface covering all 14 context properties
• Typed all function parameters (onAdd, onRemove, toggleCartItemQuanitity)
• createContext<StateContextType | undefined>(undefined) with a runtime guard in useStateContext
• useState calls are now generic-typed (e.g. useState<CartItem[]>([]))

Bug fixes introduced during migration (please verify these are desired):

• onAdd: the .map() callback now returns cartProduct in the non-matching branch (previously returned undefined, corrupting the cart array)
• onAdd else branch: no longer mutates the input product parameter directly
• onAdd toast: now uses the quantity parameter instead of the qty state variable — the original code would display the wrong number if onAdd was called with a quantity different from the current qty state
• onRemove / toggleCartItemQuanitity: added null guards for foundProduct (previously would crash if the item wasn't found)

Review & Testing Checklist for Human

• Verify .babelrc removal doesn't break anything: The project relied on @babel/preset-react via .babelrc. Next.js 12+ handles JSX transpilation natively (via SWC), but confirm all pages render correctly after this removal.
• Verify the onAdd map fix (context/StateContext.tsx:46): the original .map() silently returned undefined for non-matching items. The new code adds return cartProduct;. This changes runtime behavior — confirm cart update works correctly when adding duplicate products.
• Test the full cart flow end-to-end: add items, increment/decrement quantities, remove items — the null guards and map fix change behavior in edge cases.
• Verify useStateContext runtime guard: The hook now throws if used outside the provider. If any component consumes the context without being wrapped in <StateContext>, it will crash instead of silently returning undefined.
• Note on @types/react version pinning: @types/react@^17.0.40 was chosen because versions ≥17.0.80 have an exports field that breaks Next.js 12's type detection under modern Node.js. Running npm update carelessly could re-break the build.

Notes

• npx tsc --noEmit and npm run build both pass locally
• The unused index variable in toggleCartItemQuanitity was carried over from the original code (not introduced by this PR)
• The typo toggleCartItemQuanitity (missing 't' in "Quantity") is preserved from the original to avoid breaking consumers
• allowJs: true means existing .js/.jsx files are included but not strictly type-checked — this is intentional for incremental migration

Link to Devin session: https://app.devin.ai/sessions/90b2a71cbd334160925b40a6e5c905a1
Requested by: @WesternConcrete

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

End-to-End Test Results

Ran the dev server locally and tested the full cart flow in the browser. All 5 tests passed.

Devin session

Cart Flow Tests (5/5 passed)

#	Test	Result
1	Add product to cart, verify toast shows correct quantity	✅ Passed
2	Add duplicate product — tests .map() fix	✅ Passed
3	Cart sidebar shows merged items with correct totals	✅ Passed
4	Increment/decrement quantity in cart	✅ Passed
5	Remove item, verify empty state	✅ Passed

Screenshots

Test 1: Toast shows "1 Speaker added to the cart." (uses quantity param, not qty state)

Test 2: Duplicate add — toast shows "3 Speaker added to the cart.", badge shows 4

Test 3: Cart sidebar — single merged entry, qty 4, subtotal $224

Test 4: After increment to 5 then decrement twice — qty 3, subtotal $168

Test 5: Item removed — empty cart, badge shows 0

Build Verification

• npx tsc --noEmit: 0 errors
• npm run build: compiled successfully