Skip to content

Commit fb091b4

Browse files
committed
chore: update dependencies and add global styles for Primer React
- Updated @primer/react to version 37.30.0 and added @primer/primitives and @primer/view-components. - Introduced a new global CSS file for consolidated Primer React styles. - Added empty stubs for deprecated and removed components in the view-components library. - Updated the _app.tsx file to include the new global CSS. - Changed the import of Banner component from @primer/react/drafts to @primer/react/experimental in SearchOverlay.
1 parent f4236da commit fb091b4

File tree

23 files changed

+4337
-4919
lines changed

23 files changed

+4337
-4919
lines changed

next.config.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ export default {
3636
'color-4-api',
3737
'mixed-decls',
3838
],
39+
// Allow resolving our local stubs for removed @primer/view-components sass partials
40+
includePaths: [path.join(process.cwd(), 'src/frame/stylesheets/vendor')],
3941
},
4042
// Don't use automatic Next.js logging in dev unless the log level is `debug` or higher
4143
// See `src/observability/logger/README.md` for log levels
@@ -53,6 +55,16 @@ export default {
5355
config.experiments = config.experiments || {}
5456
config.experiments.topLevelAwait = true
5557
config.resolve.fallback = { fs: false, async_hooks: false }
58+
// Alias missing Ruby view-components SCSS imports to local empty stubs
59+
config.resolve.alias = {
60+
...(config.resolve.alias || {}),
61+
'@primer/view-components': path.join(
62+
process.cwd(),
63+
'src/frame/stylesheets/vendor/@primer/view-components',
64+
),
65+
// Force ESM build of @primer/react so restored TabNav export is used and to avoid CJS CSS requires
66+
'@primer/react$': path.join(process.cwd(), 'node_modules/@primer/react/lib-esm/index.js'),
67+
}
5668
return config
5769
},
5870

package-lock.json

Lines changed: 4216 additions & 4915 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,9 @@
257257
"@primer/live-region-element": "^0.7.2",
258258
"@primer/octicons": "^19.14.0",
259259
"@primer/octicons-react": "^19.14.0",
260-
"@primer/react": "36.27.0",
260+
"@primer/primitives": "^10.7.0",
261+
"@primer/react": "^37.30.0",
262+
"@primer/view-components": "^0.43.6",
261263
"accept-language-parser": "^1.5.0",
262264
"ajv": "^8.17.1",
263265
"ajv-errors": "^3.0.0",
@@ -311,8 +313,8 @@
311313
"ora": "^8.0.1",
312314
"parse5": "7.1.2",
313315
"quick-lru": "7.0.1",
314-
"react": "18.3.1",
315-
"react-dom": "18.3.1",
316+
"react": "^18.3.1",
317+
"react-dom": "^18.3.1",
316318
"react-markdown": "^10.1.0",
317319
"rehype-highlight": "^7.0.2",
318320
"rehype-raw": "^7.0.0",
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* Consolidated Primer React hashed component CSS imported once at app root */
2+
@import '../../../node_modules/@primer/react/lib-esm/ActionList/ActionList-167cf6c7.css';
3+
@import '../../../node_modules/@primer/react/lib-esm/ActionList/Group-2c8b5711.css';
4+
@import '../../../node_modules/@primer/react/lib-esm/ActionList/Heading-b9360636.css';
5+
@import '../../../node_modules/@primer/react/lib-esm/ActionBar/ActionBar-e6a5d54e.css';
6+
@import '../../../node_modules/@primer/react/lib-esm/ActionMenu/ActionMenu-5fe972e2.css';
7+
@import '../../../node_modules/@primer/react/lib-esm/AnchoredOverlay/AnchoredOverlay-73c1b2d1.css';
8+
@import '../../../node_modules/@primer/react/lib-esm/Autocomplete/AutocompleteMenu-7f135c03.css';
9+
@import '../../../node_modules/@primer/react/lib-esm/Autocomplete/AutocompleteOverlay-d99d778c.css';
10+
@import '../../../node_modules/@primer/react/lib-esm/Avatar/Avatar-61b19061.css';
11+
@import '../../../node_modules/@primer/react/lib-esm/AvatarPair/AvatarPair-68990abe.css';
12+
@import '../../../node_modules/@primer/react/lib-esm/AvatarStack/AvatarStack-f0712fca.css';
13+
@import '../../../node_modules/@primer/react/lib-esm/Banner/Banner-a1837714.css';
14+
@import '../../../node_modules/@primer/react/lib-esm/SideNav-baa2364d.css';
15+
@import '../../../node_modules/@primer/react/lib-esm/BaseStyles-79fd37c4.css';
16+
@import '../../../node_modules/@primer/react/lib-esm/Blankslate/Blankslate-2be5efdc.css';
17+
@import '../../../node_modules/@primer/react/lib-esm/BranchName/BranchName-2fad4f4b.css';
18+
@import '../../../node_modules/@primer/react/lib-esm/Breadcrumbs/Breadcrumbs-99078f17.css';
19+
@import '../../../node_modules/@primer/react/lib-esm/Button/ButtonBase-0a7871f4.css';
20+
@import '../../../node_modules/@primer/react/lib-esm/ButtonGroup/ButtonGroup-10292330.css';
21+
@import '../../../node_modules/@primer/react/lib-esm/Checkbox/Checkbox-2aef6693.css';
22+
@import '../../../node_modules/@primer/react/lib-esm/Checkbox/shared-edc41e16.css';
23+
@import '../../../node_modules/@primer/react/lib-esm/ConfirmationDialog/ConfirmationDialog-de0401ff.css';
24+
@import '../../../node_modules/@primer/react/lib-esm/CounterLabel/CounterLabel-44fb5d16.css';
25+
@import '../../../node_modules/@primer/react/lib-esm/DataTable/Pagination-b6f8418c.css';
26+
@import '../../../node_modules/@primer/react/lib-esm/DataTable/Table-87f4043f.css';
27+
@import '../../../node_modules/@primer/react/lib-esm/Details/Details-8093044f.css';
28+
@import '../../../node_modules/@primer/react/lib-esm/Dialog/Dialog-8a809d11.css';
29+
@import '../../../node_modules/@primer/react/lib-esm/FilteredActionList/FilteredActionList-c11b6d2f.css';
30+
@import '../../../node_modules/@primer/react/lib-esm/FilteredActionList/FilteredActionListLoaders-6f14c45b.css';
31+
@import '../../../node_modules/@primer/react/lib-esm/Flash/Flash-a3596568.css';
32+
@import '../../../node_modules/@primer/react/lib-esm/FormControl/FormControl-fa33984d.css';
33+
@import '../../../node_modules/@primer/react/lib-esm/FormControl/FormControlCaption-f58db5f7.css';
34+
@import '../../../node_modules/@primer/react/lib-esm/Header/Header-aff64597.css';
35+
@import '../../../node_modules/@primer/react/lib-esm/Heading/Heading-26b4879b.css';
36+
@import '../../../node_modules/@primer/react/lib-esm/Hidden/Hidden-b3896306.css';
37+
@import '../../../node_modules/@primer/react/lib-esm/InlineMessage/InlineMessage-80d97643.css';
38+
@import '../../../node_modules/@primer/react/lib-esm/Label/Label-7904957c.css';
39+
@import '../../../node_modules/@primer/react/lib-esm/Overlay/Overlay-e34594a5.css';
40+
@import '../../../node_modules/@primer/react/lib-esm/PageLayout/PageLayout-8a294e74.css';
41+
@import '../../../node_modules/@primer/react/lib-esm/Pagination/Pagination-e98833e8.css';
42+
@import '../../../node_modules/@primer/react/lib-esm/Popover/Popover-b609f443.css';
43+
@import '../../../node_modules/@primer/react/lib-esm/ProgressBar/ProgressBar-430cdef7.css';
44+
@import '../../../node_modules/@primer/react/lib-esm/Radio/Radio-b2a92b7d.css';
45+
@import '../../../node_modules/@primer/react/lib-esm/KeybindingHint/KeybindingHint-0856c11b.css';
46+
@import '../../../node_modules/@primer/react/lib-esm/Link/Link-948b910e.css';
47+
@import '../../../node_modules/@primer/react/lib-esm/PageHeader/PageHeader-4e1d8fee.css';
48+
@import '../../../node_modules/@primer/react/lib-esm/SegmentedControl/SegmentedControl-459caec8.css';
49+
@import '../../../node_modules/@primer/react/lib-esm/Skeleton/SkeletonBox-248bfcc3.css';
50+
@import '../../../node_modules/@primer/react/lib-esm/SkeletonAvatar/SkeletonAvatar-e00fff32.css';
51+
@import '../../../node_modules/@primer/react/lib-esm/SkeletonText/SkeletonText-5cf908c1.css';
52+
@import '../../../node_modules/@primer/react/lib-esm/Spinner/Spinner-2dbceeca.css';
53+
@import '../../../node_modules/@primer/react/lib-esm/Stack/Stack-9e7b935d.css';
54+
@import '../../../node_modules/@primer/react/lib-esm/SubNav/SubNav-88128e5c.css';
55+
@import '../../../node_modules/@primer/react/lib-esm/TabNav/TabNav-83c6145e.css';
56+
@import '../../../node_modules/@primer/react/lib-esm/Text/Text-ca7603b7.css';
57+
@import '../../../node_modules/@primer/react/lib-esm/TextInputWithTokens/TextInputWithTokens-fb9b5109.css';
58+
@import '../../../node_modules/@primer/react/lib-esm/Textarea/TextArea-54099020.css';
59+
@import '../../../node_modules/@primer/react/lib-esm/Timeline/Timeline-e8e88a13.css';
60+
@import '../../../node_modules/@primer/react/lib-esm/Token/Token-942271b0.css';
61+
@import '../../../node_modules/@primer/react/lib-esm/Token/IssueLabelToken-99c9b914.css';
62+
@import '../../../node_modules/@primer/react/lib-esm/Token/TokenBase-0386597b.css';
63+
@import '../../../node_modules/@primer/react/lib-esm/Token/AvatarToken-ff45cc85.css';
64+
@import '../../../node_modules/@primer/react/lib-esm/Token/_RemoveTokenButton-d7f5985b.css';
65+
@import '../../../node_modules/@primer/react/lib-esm/Token/_TokenTextContainer-2ab10996.css';
66+
@import '../../../node_modules/@primer/react/lib-esm/VisuallyHidden/VisuallyHidden-ce2a3270.css';
67+
@import '../../../node_modules/@primer/react/lib-esm/experimental/IssueLabel/IssueLabel-5507fbf3.css';
68+
@import '../../../node_modules/@primer/react/lib-esm/experimental/UnderlinePanels/UnderlinePanels-e4b325b9.css';
69+
@import '../../../node_modules/@primer/react/lib-esm/experimental/SelectPanel2/SelectPanel-e919f619.css';
70+
@import '../../../node_modules/@primer/react/lib-esm/internal/components/ButtonReset-904f2483.css';
71+
@import '../../../node_modules/@primer/react/lib-esm/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup-e38b5339.css';
72+
@import '../../../node_modules/@primer/react/lib-esm/internal/components/InputLabel-eb267c58.css';
73+
@import '../../../node_modules/@primer/react/lib-esm/internal/components/InputValidation-057236a4.css';
74+
@import '../../../node_modules/@primer/react/lib-esm/internal/components/TextInputInnerAction-477e9b99.css';
75+
@import '../../../node_modules/@primer/react/lib-esm/internal/components/TextInputInnerVisualSlot-4a14b955.css';
76+
@import '../../../node_modules/@primer/react/lib-esm/internal/components/TextInputWrapper-889df5d3.css';
77+
@import '../../../node_modules/@primer/react/lib-esm/internal/components/UnderlineTabbedInterface-addc90dd.css';
78+
@import '../../../node_modules/@primer/react/lib-esm/internal/components/UnstyledTextInput-8270f063.css';
79+
@import '../../../node_modules/@primer/react/lib-esm/TooltipV2/Tooltip-5a80d7b2.css';
80+
@import '../../../node_modules/@primer/react/lib-esm/TreeView/TreeView-cd08cabc.css';
81+
@import '../../../node_modules/@primer/react/lib-esm/Truncate/Truncate-030d5f52.css';
82+
@import '../../../node_modules/@primer/react/lib-esm/Select/Select-ab428dc7.css';
83+
@import '../../../node_modules/@primer/react/lib-esm/SelectPanel/SelectPanel-06900070.css';
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Empty stub for removed @primer/view-components truncate partial
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Empty stub for alpha dialog partial
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Stub for deprecated alpha layout.
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Stub for removed alpha menu view-component.
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Empty stub for alpha tab nav partial
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Stub for deprecated alpha text_field.

0 commit comments

Comments
 (0)