Upgrade to next ^13

.changeset/sharp-countries-decide.md

@@ -0,0 +1,18 @@
+---
+'@keystone-ui/website': minor
+'@keystone-6/website': minor
+'@keystone-6/example-auth': minor
+'@keystone-6/example-custom-admin-ui-logo': minor
+'@keystone-6/example-custom-admin-ui-pages': minor
+'@keystone-6/example-custom-field-view': minor
+'@keystone-6/example-document-field': minor
+'@keystone-6/example-document-field-customisation-nextjs-frontend': minor
+'@keystone-6/example-e2e-boilerplate-nextjs-frontend': minor
+'@keystone-6/example-ecommerce': minor
+'@keystone-6/example-embedded-nextjs': minor
+'@keystone-6/example-roles': minor
+'@keystone-6/core': minor
+'@keystone-6/test-projects-live-reloading': minor
+---
+
+Next.js 13 Upgrade

.github/actions/ci-setup/action.yml

@@ -11,7 +11,7 @@ runs:
 
     - name: Get yarn cache directory path
       id: yarn-cache-dir-path
-      run: echo "::set-output name=dir::$(yarn cache dir)"
+      run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
       shell: bash
 
     - uses: actions/cache@main

design-system/packages/button/package.json

@@ -19,7 +19,7 @@
     "@keystone-ui/core": "^5.0.2",
     "@keystone-ui/icons": "^6.0.2",
     "@keystone-ui/loading": "^6.0.2",
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/design-system/packages/button"
 }

design-system/packages/core/package.json

@@ -13,12 +13,12 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.9",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",

design-system/packages/fields/package.json

@@ -20,7 +20,7 @@
     "@keystone-ui/icons": "^6.0.2",
     "@keystone-ui/popover": "^6.0.2",
     "date-fns": "^2.26.0",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
     "react-day-picker": "^8.0.4",
     "react-focus-lock": "^2.7.1",
     "react-select": "^5.2.1"

design-system/packages/icons/package.json

@@ -1168,15 +1168,15 @@
     "feather-icons": "^4.28.0",
     "fs-extra": "^10.0.0",
     "globby": "^11.0.4",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
     "to-pascal-case": "^1.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@keystone-ui/core": "^5.0.2"
   },
   "peerDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "preconstruct": {
     "entrypoints": [

design-system/packages/loading/package.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@keystone-ui/core": "^5.0.2",
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/design-system/packages/loading"
 }

design-system/packages/modals/package.json

@@ -18,7 +18,7 @@
     "@babel/runtime": "^7.16.3",
     "@keystone-ui/button": "^7.0.2",
     "@keystone-ui/core": "^5.0.2",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
     "react-focus-lock": "^2.7.1",
     "react-remove-scroll": "^2.4.3",
     "react-transition-group": "^4.4.2"

design-system/packages/notice/package.json

@@ -19,7 +19,7 @@
     "@keystone-ui/button": "^7.0.2",
     "@keystone-ui/core": "^5.0.2",
     "@keystone-ui/icons": "^6.0.2",
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/design-system/packages/notice"
 }

design-system/packages/options/package.json

@@ -12,10 +12,10 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "devDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",

design-system/packages/pill/package.json

@@ -12,10 +12,10 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "devDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",

design-system/packages/popover/package.json

@@ -12,12 +12,12 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",

design-system/packages/segmented-control/package.json

@@ -13,14 +13,14 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.9",
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@keystone-ui/core": "^5.0.2"
   },
   "peerDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/design-system/packages/segmented-control"
 }

design-system/packages/toast/package.json

@@ -13,15 +13,15 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.9",
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@keystone-ui/core": "^5.0.2",
     "@keystone-ui/icons": "^6.0.2"
   },
   "peerDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/design-system/packages/toast"
 }

design-system/packages/tooltip/package.json

@@ -12,12 +12,12 @@
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",

design-system/website/components/Navigation.tsx

@@ -10,16 +10,15 @@ const Brand = () => {
   const { palette } = useTheme();
   return (
     <h2>
-      <Link href="/" passHref>
-        <a
-          css={{
-            color: palette.neutral700,
-            textDecoration: 'none',
-            display: 'block',
-          }}
-        >
-          Keystone UI
-        </a>
+      <Link
+        href="/"
+        css={{
+          color: palette.neutral700,
+          textDecoration: 'none',
+          display: 'block',
+        }}
+      >
+        Keystone UI
       </Link>
     </h2>
   );
@@ -48,23 +47,22 @@ const NavItem = ({ href, children }: NavItemProps) => {
         paddingLeft: 0,
       }}
     >
-      <Link href={href} passHref>
-        <a
-          css={{
-            color: isSelected ? palette.neutral800 : palette.neutral700,
-            backgroundColor: isSelected ? palette.white : undefined,
-            borderRadius: radii.medium,
-            padding: spacing.small,
-            display: 'block',
-            textDecoration: 'none',
-            ':hover': {
-              color: isSelected ? undefined : palette.blue500,
-              backgroundColor: isSelected ? undefined : palette.white,
-            },
-          }}
-        >
-          {children}
-        </a>
+      <Link
+        href={href}
+        css={{
+          color: isSelected ? palette.neutral800 : palette.neutral700,
+          backgroundColor: isSelected ? palette.white : undefined,
+          borderRadius: radii.medium,
+          padding: spacing.small,
+          display: 'block',
+          textDecoration: 'none',
+          ':hover': {
+            color: isSelected ? undefined : palette.blue500,
+            backgroundColor: isSelected ? undefined : palette.white,
+          },
+        }}
+      >
+        {children}
       </Link>
     </li>
   );

design-system/website/package.json

@@ -24,9 +24,9 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.4",
     "@types/tinycolor2": "^1.4.3",
-    "next": "^12.2.4",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "next": "^13.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "tinycolor2": "^1.4.2"
   },
   "devDependencies": {

docs/components/Breadcrumbs.tsx

@@ -68,17 +68,15 @@ export function Breadcrumbs() {
         {breadcrumbs.map(({ title, href }) => (
           <li key={href}>
             <Link href={href}>
-              <a>
-                <Type
-                  look="body12"
-                  css={{
-                    textTransform: 'uppercase',
-                    color: 'var(--muted)',
-                  }}
-                >
-                  {title}
-                </Type>
-              </a>
+              <Type
+                look="body12"
+                css={{
+                  textTransform: 'uppercase',
+                  color: 'var(--muted)',
+                }}
+              >
+                {title}
+              </Type>
             </Link>
           </li>
         ))}

docs/components/Footer.tsx

@@ -63,24 +63,16 @@ export function Footer() {
             </Type>
             <List>
               <li>
-                <Link href="/why-keystone">
-                  <a>Our Story</a>
-                </Link>
+                <Link href="/why-keystone">Our Story</Link>
               </li>
               <li>
-                <Link href="/for-developers">
-                  <a>For Developers</a>
-                </Link>
+                <Link href="/for-developers">For Developers</Link>
               </li>
               <li>
-                <Link href="/for-organisations">
-                  <a>For Organisations</a>
-                </Link>
+                <Link href="/for-organisations">For Organisations</Link>
               </li>
               <li>
-                <Link href="/for-content-management">
-                  <a>For Content management</a>
-                </Link>
+                <Link href="/for-content-management">For Content management</Link>
               </li>
             </List>
           </div>
@@ -90,29 +82,19 @@ export function Footer() {
             </Type>
             <List>
               <li>
-                <Link href="/docs/getting-started">
-                  <a>Getting started</a>
-                </Link>
+                <Link href="/docs/getting-started">Getting started</Link>
               </li>
               <li>
-                <Link href="/docs">
-                  <a>Docs</a>
-                </Link>
+                <Link href="/docs">Docs</Link>
               </li>
               <li>
-                <Link href="/docs/guides">
-                  <a>Guides</a>
-                </Link>
+                <Link href="/docs/guides">Guides</Link>
               </li>
               <li>
-                <Link href="/docs/apis">
-                  <a>API reference</a>
-                </Link>
+                <Link href="/docs/apis">API reference</Link>
               </li>
               <li>
-                <Link href="/branding">
-                  <a>Branding</a>
-                </Link>
+                <Link href="/branding">Branding</Link>
               </li>
             </List>
           </div>
@@ -165,19 +147,13 @@ export function Footer() {
             </Type>
             <List>
               <li>
-                <Link href="/updates">
-                  <a>Latest News</a>
-                </Link>
+                <Link href="/updates">Latest News</Link>
               </li>
               <li>
-                <Link href="/updates/roadmap">
-                  <a>Roadmap</a>
-                </Link>
+                <Link href="/updates/roadmap">Roadmap</Link>
               </li>
               <li>
-                <Link href="/releases">
-                  <a>Release Notes</a>
-                </Link>
+                <Link href="/releases">Release Notes</Link>
               </li>
             </List>
           </div>