chore(deps): upgrade all dependencies (2026-04-16)

[devin-ai-integration]

Summary

Upgrades all 15 outdated npm dependencies across patch, minor, and major versions. The most significant change is the React 17 → 19 migration, which required updating src/index.js from the legacy ReactDOM.render API to the createRoot API and adding nodeRef props to CSSTransition components to avoid findDOMNode crashes.

Patch upgrades

Package	Old	New
@testing-library/jest-dom	5.16.3	5.17.0
@testing-library/react	12.1.4	12.1.5
react-transition-group	4.4.2	4.4.5
react-scripts	5.0.0	5.0.1

Minor upgrades

Package	Old	New
classnames	2.3.1	2.5.1
react-countdown	2.3.2	2.3.6
react-icons	4.3.1	4.12.0
sass	1.49.9	1.99.0
lint-staged	12.3.7	12.5.0

Major upgrades

Package	Old	New
react	17.0.2	19.2.5
react-dom	17.0.2	19.2.5
@testing-library/jest-dom	5.17.0	6.9.1
@testing-library/react	12.1.5	16.3.2
@testing-library/user-event	13.5.0	14.6.1
react-icons	4.12.0	5.6.0
web-vitals	2.1.4	5.2.0
husky	7.0.4	9.1.7
lint-staged	12.5.0	16.4.0
prettier	2.6.1	3.8.3

Source code changes

• src/index.js: Migrated from ReactDOM.render() to createRoot() (required for React 18+)
• src/components/Alert/Alert.jsx: Added useRef + nodeRef prop to CSSTransition to avoid findDOMNode crash in React 19
• src/components/Modal/Modal.jsx: Added nodeRef prop to CSSTransition to avoid findDOMNode crash in React 19
• src/App.jsx, src/hooks/useOnClickOutside.js, src/lib/words.js: Trailing comma formatting from Prettier 3
• src/styles/_transitionStyles.scss: Multi-line transition property formatting from Prettier 3

Skipped packages

None — all outdated dependencies were successfully upgraded.

Validation

Check	Status
Prettier (npm run check)	✅ Pass
Build (react-scripts build)	✅ Pass
Tests (react-scripts test)	❌ Fail (pre-existing on main — App.test.jsx missing AlertProvider wrapper)

Review & Testing Checklist for Human

• Run the app locally and play a full game of Wordle — React 17→19 is a two-major-version jump and could cause subtle runtime issues (e.g., event handling, state batching, Strict Mode behavior) that aren't caught by the build
• Verify modals and keyboard interactions work — react-transition-group v4 now uses nodeRef instead of findDOMNode; test the info modal, settings modal, stats modal, and virtual keyboard to confirm transitions animate correctly
• Verify alerts display correctly — The Alert component's CSSTransition was updated with nodeRef; trigger an alert (e.g., submit an invalid word) and confirm the fade-in/fade-out animation works
• Check browser console for runtime warnings/errors — sass@1.99 may emit deprecation warnings for legacy SCSS features; React 19 may warn about legacy patterns
• Confirm react-scripts@5.0.1 + React 19 is acceptable — CRA is unmaintained and react-scripts 5 was built for React 17/18; consider whether migrating off CRA is needed

Recommended test plan: Start the dev server (npm start), open http://localhost:3000, play through a full game (type guesses, see color feedback, win/lose), open each modal (info, settings with dark mode toggle, stats), and check the browser console for errors throughout.

Notes

• The existing test suite was already failing on main due to App.test.jsx rendering <App> without the required <AlertProvider> wrapper. This is a pre-existing issue, not introduced by this PR.
• Version pinning convention preserved: caret (^) for most deps, exact versions for react-scripts and prettier (matching the original package.json).
• Vulnerabilities reduced from 72 to 66 (remaining are transitive via react-scripts).
• React 19 removed ReactDOM.findDOMNode(), which react-transition-group v4 calls internally when nodeRef is not provided. Added nodeRef to both CSSTransition usages (Alert.jsx, Modal.jsx) to prevent runtime TypeError.

Link to Devin session: https://app.devin.ai/sessions/d9c58d9621134031a7edca274004275a
Requested by: @dr-phil

---

[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]

Frontend Verification Results — All 5 Tests PASSED

Test	Result
Home page loads without errors	PASSED
All major UI sections render (header, grid, keyboard)	PASSED
Modals open/close with CSSTransition animations	PASSED
Interactive elements (word submit, alerts, dark mode)	PASSED
No console errors after interaction	PASSED

Key Validations

• React 19 createRoot migration: App boots and renders correctly
• CSSTransition nodeRef fix: All 3 modals (info, stats, settings) open/close without crash. "Not enough letters" alert fade-in animation works
• Word submission: Color feedback (green/yellow/gray) renders on grid and keyboard
• Dark mode toggle: Theme switches between dark and light correctly
• Console: Zero JavaScript errors — only React DevTools info message

Full video recording of the walkthrough is attached to the PR session.