feat: migrate lib layer to TypeScript

[devin-ai-integration]

Summary

Migrates the three utility files in lib/ from JavaScript to TypeScript with proper type annotations, and sets up the TypeScript foundation for the project.

TypeScript foundation:

• Added tsconfig.json with strict: true, allowJs: true (so existing .js/.jsx files still compile), and ignoreDeprecations: "6.0" (required since TS 6.0 deprecates moduleResolution: "node")
• Installed typescript, @types/react@17.0.39, @types/react-dom@17.0.11, @types/node (pinned @types/react to 17.x for Next.js 12 compatibility — newer versions use exports maps that break Next.js 12's require.resolve check)
• Removed .babelrc and @babel/core/@babel/preset-react (Next.js SWC handles JSX compilation)
• Created types/index.ts with shared SanityProduct, CartItem, SanityBanner interfaces
• Created types/canvas-confetti.d.ts (no @types/canvas-confetti package exists)
• Added auto-generated next-env.d.ts

File migrations:

• lib/client.js → lib/client.ts — typed client as SanityClient, urlFor param as SanityImageSource with ImageUrlBuilder return type
• lib/getStripe.js → lib/getStripe.ts — typed stripePromise as Promise<Stripe | null> | undefined, added explicit return type
• lib/utils.js → lib/utils.ts — added : void return to runFireworks, typed randomInRange params/return

Verified locally: npx tsc --noEmit passes, npm run build succeeds.

Review & Testing Checklist for Human

• Babel removal safety: Verify that removing .babelrc and @babel/core/@babel/preset-react doesn't break JSX compilation for the remaining .jsx/.js files (Next.js SWC should handle it, but worth confirming via npm run build or npm run dev)
• Non-null assertion in getStripe.ts: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY! uses ! — if the env var is unset, loadStripe receives undefined at runtime with no type error. Confirm this is acceptable vs. throwing early.
• Import resolution: Verify that all consumers of lib/client, lib/getStripe, lib/utils (components/Cart.jsx, pages/success.js, etc.) still resolve correctly after the rename. allowJs: true in tsconfig should handle this, but test npm run dev and navigate through the app.
• Custom canvas-confetti type declaration: Review types/canvas-confetti.d.ts for completeness — it covers the options used in utils.ts but is not exhaustive.

Recommended test plan: Run npm run dev, navigate the storefront, add an item to cart, and complete the Stripe checkout flow to reach the success page (which triggers runFireworks from lib/utils.ts).

Notes

• @types/react is pinned to 17.0.39 because newer patch versions (even within 17.x) add an exports map that breaks Next.js 12's internal require.resolve('@types/react/index.d.ts') check during build.
• Git rename detection may not track client.js → client.ts and getStripe.js → getStripe.ts as renames in the diff (they show as delete+create), though git mv was used.

Link to Devin session: https://app.devin.ai/sessions/8ecd0e1a650240ac8abc2aac14025297
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]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional findings.

[devin-ai-integration]

End-to-End Test Results

Ran npm run dev locally against the migrated TypeScript files, tested all three lib modules through the UI.

All tests passed.

Test Results

Test	Result
Home page loads products (lib/client.ts → client.fetch())	PASSED
Product detail renders images (lib/client.ts → urlFor())	PASSED
Success page fires confetti (lib/utils.ts → runFireworks())	PASSED
No module resolution errors in browser console	PASSED

Evidence Screenshots

Home page — lib/client.ts data fetching + banner images

5 products with Sanity CDN images, hero/footer banners rendered via urlFor().

Product detail — lib/client.ts urlFor() for product images

Main image + 4 thumbnails rendered via typed urlFor(source: SanityImageSource).

Success page — lib/utils.ts runFireworks() confetti

Confetti particles visible, confirming canvas-confetti import works from migrated .ts file.

Not Tested

• Stripe checkout (lib/getStripe.ts): Only invoked on "Pay with Stripe" click, requires real Stripe session. Import resolves correctly (Cart component renders without errors).

Build verification: npx tsc --noEmit (0 errors) and npm run build (compiled successfully) both pass.

Devin session