Skip to content

Commit f0e16df

Browse files
author
Michael Smith
committed
chore: convert box to native components, transform ignore patterns, remove themeget, remove octicon (#1843)
<!-- What / Why --> <!-- Describe the request in detail. What it does and why it's being changed. --> ## References <!-- Examples: Related to #0 Depends on #0 Blocked by #0 Fixes #0 Closes #0 -->
1 parent 88377a6 commit f0e16df

20 files changed

Lines changed: 258 additions & 237 deletions

‎.eslintrc.js‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,8 @@ module.exports = {
9090
'dfn',
9191
'dialog',
9292
'dir',
93-
'div',
93+
// ok because Box is deprecated and styles are provided via CSS modules
94+
// 'div',
9495
'dl',
9596
'dt',
9697
'element',
@@ -110,12 +111,15 @@ module.exports = {
110111
'h5',
111112
'h6',
112113
'head',
113-
'header',
114+
// ok because Box is deprecated and styles are provided via CSS modules
115+
// 'header',
114116
'hgroup',
115117
'hr',
116118
// used in head
117119
// 'html',
118120
'i',
121+
// ok because Box is deprecated and styles are provided via CSS modules
122+
// 'iframe',
119123
'input',
120124
'ins',
121125
'isindex',
@@ -126,24 +130,28 @@ module.exports = {
126130
// ok because there is no mdx replacement and styles are provided via parent ul/ol
127131
// 'li',
128132
'listing',
129-
'main',
133+
// ok because Box is deprecated and styles are provided via CSS modules
134+
// 'main',
130135
'map',
131136
'mark',
132137
'menu',
133138
'menuitem',
134139
'meter',
135-
'nav',
140+
// ok because Box is deprecated and styles are provided via CSS modules
141+
// 'nav',
136142
'noembed',
137143
'noscript',
138144
'object',
139145
'ol',
140146
'optgroup',
141147
'option',
142148
'output',
143-
'p',
149+
// ok because Box is deprecated and styles are provided via CSS modules
150+
// 'p',
144151
'param',
145152
'plaintext',
146-
'pre',
153+
// ok because Box is deprecated and styles are provided via CSS modules
154+
// 'pre',
147155
'progress',
148156
'q',
149157
'rp',
@@ -181,7 +189,8 @@ module.exports = {
181189
'track',
182190
'tt',
183191
'u',
184-
'ul',
192+
// ok because Box is deprecated and styles are provided via CSS modules
193+
// 'ul',
185194
'var',
186195
'video',
187196
'wbr',

‎jest.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ module.exports = {
44
transform: {
55
'^.+\\.jsx?$': `<rootDir>/jest-preprocess.js`,
66
},
7+
transformIgnorePatterns: [
8+
'node_modules/(?!(@primer/react|@primer/octicons-react|@primer/behaviors|@lit-labs|@lit|@github)/)',
9+
],
710
moduleNameMapper: {
811
'.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
912
},

‎src/components/header.js‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react'
2-
import {Box} from '@primer/react'
32
import styled from 'styled-components'
43
import * as Search from './search'
54
import NavDrawer from './nav-drawer'
@@ -12,7 +11,7 @@ import SiteTitle from './site-title'
1211

1312
import * as styles from './header.module.css'
1413

15-
const NpmHeaderBar = styled(Box)`
14+
const NpmHeaderBar = styled.div`
1615
height: ${HEADER_BAR}px;
1716
background-image: linear-gradient(139deg, #fb8817, #ff4b01, #c12127, #e02aff);
1817
`
@@ -21,30 +20,32 @@ function Header() {
2120
const search = useSearch()
2221

2322
return (
24-
<DarkTheme style={{zIndex: Z_INDEX.HEADER}} className={styles.DarkTheme}>
25-
<NpmHeaderBar />
26-
<Box as="header" className={styles.headerBox}>
27-
<Box className={styles.Box}>
28-
<SiteTitle logo={true} className={styles.SiteTitle} />
29-
<Box className={styles.searchDesktop}>
30-
<Search.Desktop {...search} />
31-
</Box>
32-
</Box>
33-
<Box className={styles.Box_1}>
34-
<Box className={styles.navDesktop}>
35-
{headerNavItems.map((item, index) => (
36-
<Link key={index} href={item.url} className={styles.Link}>
37-
{item.title}
38-
</Link>
39-
))}
40-
</Box>
41-
<Box className={styles.navMobile}>
42-
<Search.Mobile {...search} />
43-
<NavDrawer />
44-
</Box>
45-
</Box>
46-
</Box>
47-
</DarkTheme>
23+
<div className={styles.stickyHeader} style={{zIndex: Z_INDEX.HEADER}}>
24+
<DarkTheme>
25+
<NpmHeaderBar />
26+
<header className={styles.headerBox}>
27+
<div className={styles.Box}>
28+
<SiteTitle logo={true} className={styles.SiteTitle} />
29+
<div className={styles.searchDesktop}>
30+
<Search.Desktop {...search} />
31+
</div>
32+
</div>
33+
<div className={styles.Box_1}>
34+
<div className={styles.navDesktop}>
35+
{headerNavItems.map((item, index) => (
36+
<Link key={index} href={item.url} className={styles.Link}>
37+
{item.title}
38+
</Link>
39+
))}
40+
</div>
41+
<div className={styles.navMobile}>
42+
<Search.Mobile {...search} />
43+
<NavDrawer />
44+
</div>
45+
</div>
46+
</header>
47+
</DarkTheme>
48+
</div>
4849
)
4950
}
5051

‎src/components/header.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
display: flex;
88
}
99

10-
.DarkTheme {
10+
.stickyHeader {
1111
top: 0;
1212
position: sticky;
1313
}

‎src/components/nav-drawer.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import {Button, Box} from '@primer/react'
2+
import {Button} from '@primer/react'
33
import {XIcon, ThreeBarsIcon} from '@primer/octicons-react'
44
import NavItems from './nav-items'
55
import {useIsMobile} from '../hooks/use-breakpoint'
@@ -17,38 +17,36 @@ const Drawer = ({isOpen, onDismiss, children}) => (
1717
// These event handlers fix a bug that caused links below the fold
1818
// to be unclickable in macOS Safari.
1919
// Reference: https://github.com/theKashey/react-focus-lock/issues/79
20-
<Box
20+
<div
2121
onMouseDown={event => event.preventDefault()}
2222
onKeyDown={event => event.target.focus()}
2323
onClick={event => event.target.focus()}
2424
role="button"
2525
tabIndex="0"
2626
>
2727
<FocusOn returnFocus={true} onEscapeKey={onDismiss}>
28-
<Box
28+
<motion.div
2929
key="overlay"
30-
as={motion.div}
3130
initial={{opacity: 0}}
3231
animate={{opacity: 1}}
3332
exit={{opacity: 0}}
3433
transition={{type: 'tween'}}
3534
onClick={onDismiss}
3635
className={styles.Box}
3736
/>
38-
<Box
37+
<motion.div
3938
style={{top: `${HEADER_BAR}px`}}
4039
key="drawer"
41-
as={motion.div}
4240
initial={{x: '100%'}}
4341
animate={{x: 0}}
4442
exit={{x: '100%'}}
4543
transition={{type: 'tween', duration: 0.2}}
4644
className={styles.Box_1}
4745
>
4846
{children}
49-
</Box>
47+
</motion.div>
5048
</FocusOn>
51-
</Box>
49+
</div>
5250
) : null}
5351
</AnimatePresence>
5452
)
@@ -69,19 +67,19 @@ function NavDrawer() {
6967
<ThreeBarsIcon />
7068
</Button>
7169
<LightTheme as={Drawer} isOpen={open} onDismiss={() => setOpen(false)}>
72-
<Box style={{WebkitOverflowScrolling: 'touch'}} className={styles.Box_2}>
73-
<Box className={styles.Box_3}>
70+
<div style={{WebkitOverflowScrolling: 'touch'}} className={styles.Box_2}>
71+
<div className={styles.Box_3}>
7472
<DarkTheme style={{height: `${HEADER_HEIGHT}px`}} className={styles.DarkTheme}>
7573
<SiteTitle />
7674
<Button aria-label="Close" onClick={() => setOpen(false)}>
7775
<XIcon />
7876
</Button>
7977
</DarkTheme>
80-
<Box className={styles.Box_4}>
78+
<div className={styles.Box_4}>
8179
<NavItems />
82-
</Box>
83-
</Box>
84-
</Box>
80+
</div>
81+
</div>
82+
</div>
8583
</LightTheme>
8684
</>
8785
)

‎src/components/nav-items.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import {Box, NavList} from '@primer/react'
2+
import {NavList} from '@primer/react'
33
import {LinkExternalIcon} from '@primer/octicons-react'
44
import Link from './link'
55
import * as getNav from '../util/get-nav'
@@ -65,9 +65,9 @@ const Navigation = () => {
6565
<NavItems items={items} path={pathname} />
6666
<NavList.Divider />
6767
{headerNavItems.map(item => (
68-
<Box key={item.title} className={styles.headerNavItem}>
68+
<div key={item.title} className={styles.headerNavItem}>
6969
<ExternalNavItem title={item.title} href={item.url} />
70-
</Box>
70+
</div>
7171
))}
7272
<ExternalNavItem title="GitHub" href={repositoryUrl} />
7373
</NavList>

‎src/components/page-footer.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
2-
import {Box, Avatar, Text} from '@primer/react'
3-
import {Octicon} from '@primer/react/deprecated'
2+
import {Avatar, Text} from '@primer/react'
43
import {Tooltip} from '@primer/react/next'
54
import {PencilIcon} from '@primer/octicons-react'
65
import Link from './link'
@@ -34,7 +33,7 @@ const Contributors = ({contributors = [], latestCommit}) => {
3433

3534
return (
3635
<>
37-
<Box className={styles.Box}>
36+
<div className={styles.Box}>
3837
<Text className={styles.Text}>
3938
{contributors.length} {pluralize('contributor', contributors.length)}
4039
</Text>
@@ -45,7 +44,7 @@ const Contributors = ({contributors = [], latestCommit}) => {
4544
</Link>
4645
</Tooltip>
4746
))}
48-
</Box>
47+
</div>
4948
{latestCommit ? (
5049
<Text className={styles.Text_1}>
5150
Last edited by{' '}
@@ -70,17 +69,17 @@ const PageFooter = () => {
7069
}
7170

7271
return (
73-
<Box className={styles.Box_1}>
74-
<Box className={styles.Box_2}>
72+
<div className={styles.Box_1}>
73+
<div className={styles.Box_2}>
7574
{editUrl ? (
7675
<Link href={editUrl}>
77-
<Octicon icon={PencilIcon} className={styles.Text} />
76+
<PencilIcon className={styles.Text} />
7877
Edit this page on GitHub
7978
</Link>
8079
) : null}
8180
<Contributors contributors={contributors} latestCommit={latestCommit} />
82-
</Box>
83-
</Box>
81+
</div>
82+
</div>
8483
)
8584
}
8685

0 commit comments

Comments
 (0)