Skip to content

Upgrade nextjs #7566

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 31, 2022
Merged

Upgrade nextjs #7566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
63c669b
Upgrade nextjs
kyledurand Oct 28, 2022
e67a67e
move eslint-next to dev dep
kyledurand Oct 28, 2022
b0bea7b
check for undefined
kyledurand Oct 28, 2022
ab0759b
changeset
kyledurand Oct 28, 2022
7ccecf8
fix image sizes
kyledurand Oct 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/three-lemons-juggle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'polaris.shopify.com': patch
---

Bumped nextjs
16 changes: 8 additions & 8 deletions polaris.shopify.com/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@
"gray-matter": "^4.0.3",
"lodash.get": "^4.4.2",
"lodash.throttle": "^4.1.1",
"next": "12.1.6",
"next": "^13.0.0",
"prismjs": "^1.27.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-markdown": "^8.0.2",
"remark-gfm": "^3.0.1",
"use-dark-mode": "^2.3.1"
Expand All @@ -47,24 +47,24 @@
"@types/node": "17.0.21",
"@types/prismjs": "^1.26.0",
"@types/react": "18.0.15",
"babel-plugin-preval": "^5.1.0",
"chokidar": "^3.5.3",
"eslint": "8.10.0",
"eslint-config-next": "12.1.0",
"eslint-config-next": "^13.0.0",
"execa": "^6.1.0",
"frontmatter": "^0.0.3",
"babel-plugin-preval": "^5.1.0",
"generact": "^0.4.0",
"get-site-urls": "3.0.0-alpha.1",
"globby": "^11.1.0",
"js-yaml": "^4.1.0",
"lodash.set": "^4.3.2",
"playroom": "^0.28.0",
"p-map": "^5.5.0",
"marked": "^4.0.16",
"p-map": "^5.5.0",
"playroom": "^0.28.0",
"puppeteer": "^16.0.0",
"style-loader": "^3.3.1",
"rehype-raw": "^6.1.1",
"sass": "^1.49.9",
"style-loader": "^3.3.1",
"typescript": "^4.7.4"
}
}
4 changes: 2 additions & 2 deletions polaris.shopify.com/pages/api/search/v0/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ const MAX_RESULTS: {[key in SearchResultCategory]: number} = {
icons: 9,
};

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

let results: SearchResults = [];

Expand Down
4 changes: 1 addition & 3 deletions polaris.shopify.com/src/components/Breadcrumbs/Breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,7 @@ function Breadcrumbs() {
key={url}
aria-current={segments.length == i + 1 ? 'page' : 'false'}
>
<Link href={url}>
<a>{text}</a>
</Link>
<Link href={url}>{text}</Link>
</li>
))}
</ul>
Expand Down
27 changes: 13 additions & 14 deletions polaris.shopify.com/src/components/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,20 +53,19 @@ export function LinkButton({
...rest
}: LinkButtonProps) {
return (
<Link href={href} passHref>
<a
className={className(
styles.Button,
small && styles.small,
pill && styles.pill,
primary && styles.primary,
fill && styles.fill,
)}
download={download}
{...rest}
>
{children}
</a>
<Link
href={href}
className={className(
Comment on lines +56 to +58
Copy link
Member

@alex-page alex-page Oct 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank the lord. This old API sucked, this is much nicer.

styles.Button,
small && styles.small,
pill && styles.pill,
primary && styles.primary,
fill && styles.fill,
)}
download={download}
{...rest}
>
{children}
</Link>
);
}
Expand Down
7 changes: 3 additions & 4 deletions polaris.shopify.com/src/components/ComponentThumbnail/ComponentThumbnail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,12 @@ function ComponentThumbnail({title}: Props) {
>
<Image
src={`/images/components/${slugify(title)}.png`}
layout="responsive"
width={525}
height={300}
style={{width: '100%', height: 'auto'}}
width={266}
height={140}
quality={70}
sizes="300px"
alt={`Screenshot of the ${title} component`}
lazyBoundary="1000px"
/>
</div>
);
Expand Down
46 changes: 21 additions & 25 deletions polaris.shopify.com/src/components/Frame/Frame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,17 +110,14 @@ function Frame({darkMode, children}: Props) {
<NavToggleIcon />
</button>

<Link href="/">
<a className={styles.Logo}>
<Image
src="/images/shopify-logo.svg"
layout="fixed"
width={24}
height={24}
alt="Shopify logo"
/>
Polaris
</a>
<Link href="/" className={styles.Logo}>
<Image
alt="Shopify logo"
src="/images/shopify-logo.svg"
width={24}
height={24}
/>
Polaris
</Link>

<button className={styles.DarkModeToggle} onClick={darkMode.toggle}>
Expand Down Expand Up @@ -236,20 +233,19 @@ function NavItem({
isCurrent && styles.isCurrent,
)}
>
<Link href={child.slug} passHref>
<a
onClick={handleLinkClick}
aria-current={isCurrent ? 'page' : 'false'}
onKeyDown={(evt) => {
if (level === 0 && i === 0) {
handleShiftTabOnFirstLink(evt);
}
}}
>
{child.title}

{child.status && <StatusBadge status={child.status} />}
</a>
<Link
href={child.slug}
onClick={handleLinkClick}
aria-current={isCurrent ? 'page' : 'false'}
onKeyDown={(evt) => {
if (level === 0 && i === 0) {
handleShiftTabOnFirstLink(evt);
}
}}
>
{child.title}

{child.status && <StatusBadge status={child.status} />}
</Link>

{isExpandable && (
Expand Down
20 changes: 9 additions & 11 deletions polaris.shopify.com/src/components/Grid/Grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,15 @@ function GridItem({
const searchAttributes = useGlobalSearchResult();
return (
<li className={styles.GridItem} {...searchAttributes}>
<Link href={url} passHref>
<a className={styles.Text}>
<SearchResultHighlight />
{renderPreview && (
<div className={styles.Preview}>{renderPreview()}</div>
)}
<h4>
{title} {status && <StatusBadge status={status} />}
</h4>
<p>{stripMarkdownLinks(description)}</p>
</a>
<Link href={url} className={styles.Text}>
<SearchResultHighlight />
{renderPreview && (
<div className={styles.Preview}>{renderPreview()}</div>
)}
<h4>
{title} {status && <StatusBadge status={status} />}
</h4>
<p>{stripMarkdownLinks(description)}</p>
</Link>
{deepLinks && (
<ul className={styles.DeepLinks}>
Expand Down
55 changes: 23 additions & 32 deletions polaris.shopify.com/src/components/HomePage/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,44 +29,35 @@ function HomePage({}: Props) {
</div>

<div className={styles.EntryPoints}>
<Link href="/foundations">
<a className={styles.EntryPoint}>
<h3>Foundations</h3>
<p>
Fundamental design guidance for creating quality admin
experiences
</p>
</a>
<Link href="/foundations" className={styles.EntryPoint}>
<h3>Foundations</h3>
<p>
Fundamental design guidance for creating quality admin experiences
</p>
</Link>

<Link href="/components">
<a className={styles.EntryPoint}>
<h3>Components</h3>
<p>
Reusable elements and styles, packaged through code, for
building admin interfaces
</p>
</a>
<Link href="/components" className={styles.EntryPoint}>
<h3>Components</h3>
<p>
Reusable elements and styles, packaged through code, for building
admin interfaces
</p>
</Link>

<Link href="/tokens/colors">
<a className={styles.EntryPoint}>
<h3>Tokens</h3>
<p>
Coded names that represent design decisions for color, spacing,
typography, and more
</p>
</a>
<Link href="/tokens/colors" className={styles.EntryPoint}>
<h3>Tokens</h3>
<p>
Coded names that represent design decisions for color, spacing,
typography, and more
</p>
</Link>

<Link href="/icons">
<a className={styles.EntryPoint}>
<h3>Icons</h3>
<p>
Over 400 carefully designed icons focused on commerce and
entrepreneurship
</p>
</a>
<Link href="/icons" className={styles.EntryPoint}>
<h3>Icons</h3>
<p>
Over 400 carefully designed icons focused on commerce and
entrepreneurship
</p>
</Link>
</div>

Expand Down
21 changes: 9 additions & 12 deletions polaris.shopify.com/src/components/IconGrid/IconGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,19 +44,16 @@ function IconGridItem({icon, activeIcon, query}: IconGridItemProps) {
},
}}
scroll={false}
className={className(
styles.Icon,
activeIcon === id && styles.isSelected,
)}
id={icon.id}
{...searchAttributes}
>
<a
className={className(
styles.Icon,
activeIcon === id && styles.isSelected,
)}
id={icon.id}
{...searchAttributes}
>
<SearchResultHighlight />
<Icon source={(polarisIcons as any)[id]} />
<p>{name}</p>
</a>
<SearchResultHighlight />
<Icon source={(polarisIcons as any)[id]} />
<p>{name}</p>
</Link>
</li>
);
Expand Down
19 changes: 8 additions & 11 deletions polaris.shopify.com/src/components/SandboxHeader/SandboxHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,17 +17,14 @@ function SandboxHeader({url, setHelpIsOpen}: Props) {

return (
<div className={styles.Header}>
<Link href="/">
<a className={styles.Logo}>
<Image
src="/images/shopify-logo.svg"
layout="fixed"
width={24}
height={24}
alt="Shopify logo"
/>
Polaris Sandbox
</a>
<Link href="/" className={styles.Logo}>
<Image
src="/images/shopify-logo.svg"
width={24}
height={24}
alt="Shopify logo"
/>
Polaris Sandbox
</Link>

<div className={styles.Buttons}>
Expand Down
10 changes: 6 additions & 4 deletions polaris.shopify.com/src/components/TokenList/TokenList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,10 +138,12 @@ function TokenListItem({
<SearchResultHighlight marginY="edge" />
<TokenPreview name={name} value={value} />
{isClickableSearchResult && (
<Link href={`/tokens/${category}#${searchAttributes?.id}`}>
<a className={styles.ClickableItemLink} tabIndex={-1}>
View token
</a>
<Link
href={`/tokens/${category}#${searchAttributes?.id}`}
className={styles.ClickableItemLink}
tabIndex={-1}
>
View token
</Link>
)}
</td>
Expand Down
9 changes: 5 additions & 4 deletions polaris.shopify.com/src/components/TokensPage/TokensPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,11 @@ function TokensPage({tokenGroup}: Props) {
const isCurrent = router.asPath.endsWith(slugify(item.title));
return (
<li key={item.title}>
<Link href={item.url} passHref>
<a aria-current={isCurrent ? 'page' : undefined}>
{item.title}
</a>
<Link
href={item.url}
aria-current={isCurrent ? 'page' : undefined}
>
{item.title}
</Link>
</li>
);
Expand Down
14 changes: 9 additions & 5 deletions polaris.shopify.com/src/components/WhatsNewListing/WhatsNewListing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,15 @@ function WhatsNewListing({posts}: WhatsNewListingProps) {
{posts.map(({title, description, slug, imageUrl}) => (
<article key={slug} className={styles.Post}>
<Link href={slug}>
<a>
<Image width={1600} height={800} src={imageUrl} alt="s" />
<h2>{title}</h2>
<p>{description}</p>
</a>
<Image
width={1600}
height={800}
style={{width: '100%', height: 'auto'}}
src={imageUrl}
alt="s"
/>
<h2>{title}</h2>
<p>{description}</p>
</Link>
</article>
))}
Expand Down
Loading