Move shared utilities out of React component files#7940
Conversation
|
|
There was a problem hiding this comment.
Pull request overview
Refactors several @primer/react components and hooks to move non-component constants/helpers into local constants.ts, utils.ts, or dedicated modules to improve React Refresh compatibility while preserving existing public exports/import surfaces.
Changes:
- Extracted shared constants/utilities from component implementation files into colocated
constants.ts/utils.tsmodules (e.g. Overlay, Timeline, Token, UnderlineNav, FilteredActionList, KeybindingHint). - Kept existing public exports stable by re-exporting moved symbols from the original component modules.
- Split
MatchMedia/context out ofuseMedia.tsinto separate hook modules while keepinguseMedia’s import surface intact.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/UnderlineNav/utils.ts | Introduces extracted getValidChildren helper. |
| packages/react/src/UnderlineNav/UnderlineNav.tsx | Consumes extracted helper and re-exports it to preserve public API. |
| packages/react/src/Token/utils.ts | Extracts isTokenInteractive helper. |
| packages/react/src/Token/constants.ts | Extracts token size constants/types. |
| packages/react/src/Token/TokenBase.tsx | Switches to extracted constants/utils and re-exports them. |
| packages/react/src/Timeline/constants.ts | Extracts TimelineBadgeVariants constant. |
| packages/react/src/Timeline/Timeline.tsx | Imports and re-exports extracted TimelineBadgeVariants. |
| packages/react/src/Overlay/constants.ts | Extracts heightMap/widthMap constants. |
| packages/react/src/Overlay/Overlay.tsx | Imports and re-exports extracted overlay dimension maps. |
| packages/react/src/KeybindingHint/components/utils.ts | Extracts key-chord parsing/sorting + accessible string helpers. |
| packages/react/src/KeybindingHint/components/Chord.tsx | Uses extracted chord utilities and re-exports accessibleChordString. |
| packages/react/src/KeybindingHint/components/Sequence.tsx | Uses extracted sequence accessibility helper and re-exports it. |
| packages/react/src/hooks/MatchMediaContext.ts | New module for MatchMediaContext and MediaQueryFeatures type. |
| packages/react/src/hooks/MatchMedia.tsx | New module for MatchMedia component + shallow-stabilization helper. |
| packages/react/src/hooks/useMedia.ts | Updated to consume extracted context and re-export MatchMedia. |
| packages/react/src/FilteredActionList/constants.ts | Extracts loader type class + constants. |
| packages/react/src/FilteredActionList/FilteredActionListLoaders.tsx | Imports and re-exports extracted loader symbols. |
Copilot's findings
- Files reviewed: 17/17 changed files
- Comments generated: 1
| import React from 'react' | ||
|
|
||
| export const getValidChildren = (children: React.ReactNode) => { | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| return React.Children.toArray(children).filter(child => React.isValidElement(child)) as React.ReactElement<any>[] | ||
| } |
Closes #
No linked issue.
Extracts constants and utility helpers from component files into local
constants.ts,utils.ts, or hook/component modules for React Refresh compatibility.Changelog
New
useMediainto a hook module with separateMatchMediacomponent/context modules.Changed
Removed
Rollout strategy
Testing & Reviewing
Review moved helpers by component area;
useMediakeeps the existing extensionless import surface.Merge checklist