Skip to content

Commit 5678222

Browse files
kyledurandkyledurand
authored
Upgrade nextjs (#7566)
https://nextjs.org/docs/upgrading https://nextjs.org/docs/advanced-features/codemods#migrate-next-image-experimental-experimental
1 parent 432bdd5 commit 5678222

File tree

15 files changed

+348
-269
lines changed

15 files changed

+348
-269
lines changed

‎.changeset/three-lemons-juggle.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': patch
3+
---
4+
5+
Bumped nextjs

‎polaris.shopify.com/package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@
3030
"gray-matter": "^4.0.3",
3131
"lodash.get": "^4.4.2",
3232
"lodash.throttle": "^4.1.1",
33-
"next": "12.1.6",
33+
"next": "^13.0.0",
3434
"prismjs": "^1.27.0",
35-
"react": "18.2.0",
36-
"react-dom": "18.2.0",
35+
"react": "^18.2.0",
36+
"react-dom": "^18.2.0",
3737
"react-markdown": "^8.0.2",
3838
"remark-gfm": "^3.0.1",
3939
"use-dark-mode": "^2.3.1"
@@ -47,24 +47,24 @@
4747
"@types/node": "17.0.21",
4848
"@types/prismjs": "^1.26.0",
4949
"@types/react": "18.0.15",
50+
"babel-plugin-preval": "^5.1.0",
5051
"chokidar": "^3.5.3",
5152
"eslint": "8.10.0",
52-
"eslint-config-next": "12.1.0",
53+
"eslint-config-next": "^13.0.0",
5354
"execa": "^6.1.0",
5455
"frontmatter": "^0.0.3",
55-
"babel-plugin-preval": "^5.1.0",
5656
"generact": "^0.4.0",
5757
"get-site-urls": "3.0.0-alpha.1",
5858
"globby": "^11.1.0",
5959
"js-yaml": "^4.1.0",
6060
"lodash.set": "^4.3.2",
61-
"playroom": "^0.28.0",
62-
"p-map": "^5.5.0",
6361
"marked": "^4.0.16",
62+
"p-map": "^5.5.0",
63+
"playroom": "^0.28.0",
6464
"puppeteer": "^16.0.0",
65-
"style-loader": "^3.3.1",
6665
"rehype-raw": "^6.1.1",
6766
"sass": "^1.49.9",
67+
"style-loader": "^3.3.1",
6868
"typescript": "^4.7.4"
6969
}
7070
}

‎polaris.shopify.com/pages/api/search/v0/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ const MAX_RESULTS: {[key in SearchResultCategory]: number} = {
3636
icons: 9,
3737
};
3838

39-
const getSearchResults = (query: string) => {
40-
if (query.length === 0) return [];
39+
const getSearchResults = (query?: string) => {
40+
if (query == null || query?.length === 0) return [];
4141

4242
let results: SearchResults = [];
4343

‎polaris.shopify.com/src/components/Breadcrumbs/Breadcrumbs.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,7 @@ function Breadcrumbs() {
4545
key={url}
4646
aria-current={segments.length == i + 1 ? 'page' : 'false'}
4747
>
48-
<Link href={url}>
49-
<a>{text}</a>
50-
</Link>
48+
<Link href={url}>{text}</Link>
5149
</li>
5250
))}
5351
</ul>

‎polaris.shopify.com/src/components/Button/Button.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -53,20 +53,19 @@ export function LinkButton({
5353
...rest
5454
}: LinkButtonProps) {
5555
return (
56-
<Link href={href} passHref>
57-
<a
58-
className={className(
59-
styles.Button,
60-
small && styles.small,
61-
pill && styles.pill,
62-
primary && styles.primary,
63-
fill && styles.fill,
64-
)}
65-
download={download}
66-
{...rest}
67-
>
68-
{children}
69-
</a>
56+
<Link
57+
href={href}
58+
className={className(
59+
styles.Button,
60+
small && styles.small,
61+
pill && styles.pill,
62+
primary && styles.primary,
63+
fill && styles.fill,
64+
)}
65+
download={download}
66+
{...rest}
67+
>
68+
{children}
7069
</Link>
7170
);
7271
}

‎polaris.shopify.com/src/components/ComponentThumbnail/ComponentThumbnail.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,12 @@ function ComponentThumbnail({title}: Props) {
1414
>
1515
<Image
1616
src={`/images/components/${slugify(title)}.png`}
17-
layout="responsive"
18-
width={525}
19-
height={300}
17+
style={{width: '100%', height: 'auto'}}
18+
width={266}
19+
height={140}
2020
quality={70}
2121
sizes="300px"
2222
alt={`Screenshot of the ${title} component`}
23-
lazyBoundary="1000px"
2423
/>
2524
</div>
2625
);

‎polaris.shopify.com/src/components/Frame/Frame.tsx‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -110,17 +110,14 @@ function Frame({darkMode, children}: Props) {
110110
<NavToggleIcon />
111111
</button>
112112

113-
<Link href="/">
114-
<a className={styles.Logo}>
115-
<Image
116-
src="/images/shopify-logo.svg"
117-
layout="fixed"
118-
width={24}
119-
height={24}
120-
alt="Shopify logo"
121-
/>
122-
Polaris
123-
</a>
113+
<Link href="/" className={styles.Logo}>
114+
<Image
115+
alt="Shopify logo"
116+
src="/images/shopify-logo.svg"
117+
width={24}
118+
height={24}
119+
/>
120+
Polaris
124121
</Link>
125122

126123
<button className={styles.DarkModeToggle} onClick={darkMode.toggle}>
@@ -236,20 +233,19 @@ function NavItem({
236233
isCurrent && styles.isCurrent,
237234
)}
238235
>
239-
<Link href={child.slug} passHref>
240-
<a
241-
onClick={handleLinkClick}
242-
aria-current={isCurrent ? 'page' : 'false'}
243-
onKeyDown={(evt) => {
244-
if (level === 0 && i === 0) {
245-
handleShiftTabOnFirstLink(evt);
246-
}
247-
}}
248-
>
249-
{child.title}
250-
251-
{child.status && <StatusBadge status={child.status} />}
252-
</a>
236+
<Link
237+
href={child.slug}
238+
onClick={handleLinkClick}
239+
aria-current={isCurrent ? 'page' : 'false'}
240+
onKeyDown={(evt) => {
241+
if (level === 0 && i === 0) {
242+
handleShiftTabOnFirstLink(evt);
243+
}
244+
}}
245+
>
246+
{child.title}
247+
248+
{child.status && <StatusBadge status={child.status} />}
253249
</Link>
254250

255251
{isExpandable && (

‎polaris.shopify.com/src/components/Grid/Grid.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,15 @@ function GridItem({
3535
const searchAttributes = useGlobalSearchResult();
3636
return (
3737
<li className={styles.GridItem} {...searchAttributes}>
38-
<Link href={url} passHref>
39-
<a className={styles.Text}>
40-
<SearchResultHighlight />
41-
{renderPreview && (
42-
<div className={styles.Preview}>{renderPreview()}</div>
43-
)}
44-
<h4>
45-
{title} {status && <StatusBadge status={status} />}
46-
</h4>
47-
<p>{stripMarkdownLinks(description)}</p>
48-
</a>
38+
<Link href={url} className={styles.Text}>
39+
<SearchResultHighlight />
40+
{renderPreview && (
41+
<div className={styles.Preview}>{renderPreview()}</div>
42+
)}
43+
<h4>
44+
{title} {status && <StatusBadge status={status} />}
45+
</h4>
46+
<p>{stripMarkdownLinks(description)}</p>
4947
</Link>
5048
{deepLinks && (
5149
<ul className={styles.DeepLinks}>

‎polaris.shopify.com/src/components/HomePage/HomePage.tsx‎

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -29,44 +29,35 @@ function HomePage({}: Props) {
2929
</div>
3030

3131
<div className={styles.EntryPoints}>
32-
<Link href="/foundations">
33-
<a className={styles.EntryPoint}>
34-
<h3>Foundations</h3>
35-
<p>
36-
Fundamental design guidance for creating quality admin
37-
experiences
38-
</p>
39-
</a>
32+
<Link href="/foundations" className={styles.EntryPoint}>
33+
<h3>Foundations</h3>
34+
<p>
35+
Fundamental design guidance for creating quality admin experiences
36+
</p>
4037
</Link>
4138

42-
<Link href="/components">
43-
<a className={styles.EntryPoint}>
44-
<h3>Components</h3>
45-
<p>
46-
Reusable elements and styles, packaged through code, for
47-
building admin interfaces
48-
</p>
49-
</a>
39+
<Link href="/components" className={styles.EntryPoint}>
40+
<h3>Components</h3>
41+
<p>
42+
Reusable elements and styles, packaged through code, for building
43+
admin interfaces
44+
</p>
5045
</Link>
5146

52-
<Link href="/tokens/colors">
53-
<a className={styles.EntryPoint}>
54-
<h3>Tokens</h3>
55-
<p>
56-
Coded names that represent design decisions for color, spacing,
57-
typography, and more
58-
</p>
59-
</a>
47+
<Link href="/tokens/colors" className={styles.EntryPoint}>
48+
<h3>Tokens</h3>
49+
<p>
50+
Coded names that represent design decisions for color, spacing,
51+
typography, and more
52+
</p>
6053
</Link>
6154

62-
<Link href="/icons">
63-
<a className={styles.EntryPoint}>
64-
<h3>Icons</h3>
65-
<p>
66-
Over 400 carefully designed icons focused on commerce and
67-
entrepreneurship
68-
</p>
69-
</a>
55+
<Link href="/icons" className={styles.EntryPoint}>
56+
<h3>Icons</h3>
57+
<p>
58+
Over 400 carefully designed icons focused on commerce and
59+
entrepreneurship
60+
</p>
7061
</Link>
7162
</div>
7263

‎polaris.shopify.com/src/components/IconGrid/IconGrid.tsx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,16 @@ function IconGridItem({icon, activeIcon, query}: IconGridItemProps) {
4444
},
4545
}}
4646
scroll={false}
47+
className={className(
48+
styles.Icon,
49+
activeIcon === id && styles.isSelected,
50+
)}
51+
id={icon.id}
52+
{...searchAttributes}
4753
>
48-
<a
49-
className={className(
50-
styles.Icon,
51-
activeIcon === id && styles.isSelected,
52-
)}
53-
id={icon.id}
54-
{...searchAttributes}
55-
>
56-
<SearchResultHighlight />
57-
<Icon source={(polarisIcons as any)[id]} />
58-
<p>{name}</p>
59-
</a>
54+
<SearchResultHighlight />
55+
<Icon source={(polarisIcons as any)[id]} />
56+
<p>{name}</p>
6057
</Link>
6158
</li>
6259
);

0 commit comments

Comments
 (0)