Refactor reactUtils.ts into focused modules #2635
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Split the monolithic reactUtils.ts (518 lines, 20+ utilities) into focused modules following Single Responsibility Principle: Created modules: - focusUtils.ts: Focus management, tab trapping, and focus event detection - keyboardUtils.ts: Keyboard event handling and key combinations - mediaQueryUtils.ts: Media queries and responsive design hooks - scrollUtils.ts: Scroll position monitoring Updated reactUtils.ts: - Now serves as a barrel export re-exporting from new modules - Retains general-purpose utilities (DOM events, timeouts, SSR detection) - Maintains backward compatibility - all existing imports continue to work Benefits: - Better code organization by concern - Easier to find and maintain related utilities - Comprehensive JSDoc comments added to all functions - Each module is now testable in isolation - Reduced file size improves readability No breaking changes - all existing exports preserved through re-exports. Related to CORE-1452 and CORE-1454 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
RoyEJohnson
force-pushed
the
core-1454-refactor-reactutils
branch
from
df2b95a to
1f86266
Compare
RoyEJohnson
force-pushed
the
core-1454-refactor-reactutils
branch
from
1f86266 to
3df5b09
Compare
RoyEJohnson
force-pushed
the
core-1454-refactor-reactutils
branch
from
3df5b09 to
c2aa855
Compare
RoyEJohnson
force-pushed
the
core-1454-refactor-reactutils
branch
from
c2aa855 to
65a6749
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Refactors reactUtils.ts by extracting utilities into focused, single-responsibility modules as proposed in CORE-1452.
Changes Made
Split the monolithic reactUtils.ts (518 lines, 20+ utilities) into four focused modules:
focusUtils.ts (412 lines)
useDrawFocus,useFocusElement,useFocusHighlightcreateTrapTab,useTrapTabNavigationuseFocusIn,useFocusLostuseDisableContentTabbingkeyboardUtils.ts (240 lines)
useOnKey,onKeyuseOnEsc,onEscCallbacksuseKeyCombination,keyboardEventMatchesCombinationmediaQueryUtils.ts (120 lines)
useMatchMediaQuery,useMatchMobileQuery,useMatchMobileMediumQueryuseDebouncedWindowSizescrollUtils.ts (40 lines)
useOnScrollTopOffsetUpdated reactUtils.ts
onDOMEventHandler,useOnDOMEvent,useTimeout,isSSRSOLID Principles Applied
Single Responsibility Principle: Each module has one clear concern
Open/Closed Principle: Easier to extend each module independently
Interface Segregation: Focused exports, no forced dependencies
Benefits
Testing
reactUtilscontinue to work via barrel exportsRelated Issues
🤖 Generated with Claude Code