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>[] | ||
| } |
8910bf9 to
23c0d01
Compare
c703182 to
b61c265
Compare
23c0d01 to
2778f92
Compare
b61c265 to
5a97537
Compare
2778f92 to
af649ea
Compare
5a97537 to
a00a887
Compare
af649ea to
da95916
Compare
a00a887 to
4176f8a
Compare
4176f8a to
5b888fc
Compare
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