use app router

Author: gautamsi

packages/auth/src/components/Navigation.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
 
 import { ActionButton } from '@keystar/ui/button'
 import { Divider } from '@keystar/ui/layout'
@@ -15,7 +16,7 @@ import {
   getHrefFromList,
 } from '@keystone-6/core/admin-ui/components'
 import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
-import { useRouter } from '@keystone-6/core/admin-ui/router'
+import { useKeystone } from '@keystone-6/core/admin-ui/context'
 
 export default ({ labelField }: { labelField: string }) =>
   (props: NavigationProps) => <Navigation labelField={labelField} {...props} />
@@ -43,13 +44,15 @@ function Navigation({
     )
   )
 
+  const { adminPath } = useKeystone()
+
   return (
     <NavContainer>
       <NavList>
         <NavItem href="/">Dashboard</NavItem>
         <Divider />
         {lists.map(list => (
-          <NavItem key={list.key} href={getHrefFromList(list)}>
+          <NavItem key={list.key} href={getHrefFromList(list, adminPath)}>
             {list.label}
           </NavItem>
         ))}

packages/auth/src/index.ts

@@ -69,23 +69,24 @@ export function createAuth<ListTypeInfo extends BaseListTypeInfo>({
             : 'id')
 
     const authGqlNames = getAuthGqlNames(listConfig.graphql?.singular ?? listKey)
+    const ext = (config.ui.tsx ?? true) ? 'tsx' : 'js'
     const filesToWrite: AdminFileToWrite[] = [
       {
         mode: 'write',
         src: signinTemplate({ authGqlNames, identityField, secretField }),
-        outputPath: 'pages/signin.js',
+        outputPath: `signin/page.${ext}`,
       },
       {
         mode: 'write',
         src: configTemplate({ labelField }),
-        outputPath: 'config.ts',
+        outputPath: '.admin/config.tsx',
       },
     ]
     if (initFirstItem) {
       filesToWrite.push({
         mode: 'write',
         src: initTemplate({ authGqlNames, listKey, initFirstItem }),
-        outputPath: 'pages/init.js',
+        outputPath: `init/page.${ext}`,
       })
     }
     return filesToWrite

packages/auth/src/lib/useFromRedirect.ts

@@ -1,16 +1,13 @@
 import NextHead from 'next/head'
+import { useRouter } from 'next/navigation'
 
 import { gql, useMutation } from '@keystone-6/core/admin-ui/apollo'
-import { useList } from '@keystone-6/core/admin-ui/context'
-import { useRouter } from '@keystone-6/core/admin-ui/router'
+import { useKeystone, useList } from '@keystone-6/core/admin-ui/context'
 import { Fields, useBuildItem } from '@keystone-6/core/admin-ui/utils'
 import { GraphQLErrorNotice, Logo } from '@keystone-6/core/admin-ui/components'
 import { Button } from '@keystar/ui/button'
 import { Grid, HStack, VStack } from '@keystar/ui/layout'
 import { Heading } from '@keystar/ui/typography'
-
-import { useRedirect } from '../lib/useFromRedirect'
-
 import type { AuthGqlNames } from '../types'
 
 export default (props: Parameters<typeof InitPage>[0]) => () => <InitPage {...props} />
@@ -25,7 +22,7 @@ function InitPage({
   fieldPaths: string[]
 }) {
   const router = useRouter()
-  const redirect = useRedirect()
+  const { adminPath } = useKeystone()
   const list = useList(listKey)
 
   const builder = useBuildItem(list, fieldPaths)
@@ -62,7 +59,7 @@ function InitPage({
       return
     }
 
-    router.push(redirect)
+    router.push(adminPath || '/')
   }
 
   const pending = loading || data?.authenticate?.__typename === successTypename

packages/auth/src/pages/InitPage.tsx

@@ -1,4 +1,5 @@
 import NextHead from 'next/head'
+import { useRouter } from 'next/navigation'
 import { type FormEvent, useState } from 'react'
 
 import { Button } from '@keystar/ui/button'
@@ -11,7 +12,6 @@ import { Heading, Text } from '@keystar/ui/typography'
 
 import { gql, useMutation } from '@keystone-6/core/admin-ui/apollo'
 import { GraphQLErrorNotice, Logo } from '@keystone-6/core/admin-ui/components'
-import { useRouter } from '@keystone-6/core/admin-ui/router'
 
 import type { AuthGqlNames } from '../types'
 

packages/auth/src/pages/SigninPage.tsx

@@ -10,7 +10,8 @@ export default function ({
   listKey: string
   initFirstItem: NonNullable<AuthConfig<BaseListTypeInfo>['initFirstItem']>
 }) {
-  return `import makeInitPage from '@keystone-6/auth/pages/InitPage'
+  return `'use client'
+import makeInitPage from '@keystone-6/auth/pages/InitPage'
 
 export default makeInitPage(${JSON.stringify({
     listKey,

packages/auth/src/templates/init.ts

@@ -9,7 +9,8 @@ export default function ({
   identityField: string
   secretField: string
 }) {
-  return `import makeSigninPage from '@keystone-6/auth/pages/SigninPage'
+  return `'use client'
+import makeSigninPage from '@keystone-6/auth/pages/SigninPage'
 
 export default makeSigninPage(${JSON.stringify({
     authGqlNames,

packages/auth/src/templates/signin.ts

@@ -66,11 +66,6 @@
       "module": "./admin-ui/apollo/dist/keystone-6-core-admin-ui-apollo.esm.js",
       "default": "./admin-ui/apollo/dist/keystone-6-core-admin-ui-apollo.cjs.js"
     },
-    "./admin-ui/router": {
-      "types": "./admin-ui/router/dist/keystone-6-core-admin-ui-router.cjs.js",
-      "module": "./admin-ui/router/dist/keystone-6-core-admin-ui-router.esm.js",
-      "default": "./admin-ui/router/dist/keystone-6-core-admin-ui-router.cjs.js"
-    },
     "./admin-ui/context": {
       "types": "./admin-ui/context/dist/keystone-6-core-admin-ui-context.cjs.js",
       "module": "./admin-ui/context/dist/keystone-6-core-admin-ui-context.esm.js",
@@ -316,7 +311,6 @@
       "admin-ui/components/index.ts",
       "admin-ui/apollo.tsx",
       "admin-ui/context.tsx",
-      "admin-ui/router.tsx",
       "admin-ui/image.tsx",
       "admin-ui/utils/index.ts",
       "fields/index.ts",

packages/core/package.json

@@ -1,22 +1,23 @@
-import type { AppProps } from 'next/app'
 import type { AdminConfig, FieldViews } from '../../../../types'
 import { ErrorBoundary } from '../../../../admin-ui/components'
 import { KeystoneProvider } from '../../../../admin-ui/context'
 
+type AdminProps = {
+  children: React.ReactNode
+  config: AppConfig
+}
+
 type AppConfig = {
   adminConfig: AdminConfig
   fieldViews: FieldViews
   apiPath: string
+  adminPath: string
 }
 
-export const getApp =
-  (props: AppConfig) =>
-  ({ Component, pageProps }: AppProps) => {
-    return (
-      <KeystoneProvider {...props}>
-        <ErrorBoundary>
-          <Component {...pageProps} />
-        </ErrorBoundary>
-      </KeystoneProvider>
-    )
-  }
+export function Layout({ children, config }: AdminProps) {
+  return (
+    <KeystoneProvider {...config}>
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </KeystoneProvider>
+  )
+}

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/App/index.tsx

@@ -1,9 +1,9 @@
-import { useRouter } from 'next/router'
-
+import { type Usable, use } from 'react'
+import { useRouter } from 'next/navigation'
 import { Button } from '@keystar/ui/button'
 import { VStack } from '@keystar/ui/layout'
 
-import { useList } from '../../../../admin-ui'
+import { useKeystone, useList } from '../../../../admin-ui'
 import { GraphQLErrorNotice } from '../../../../admin-ui/components'
 import { PageContainer } from '../../../../admin-ui/components/PageContainer'
 import { Fields } from '../../../../admin-ui/utils'
@@ -14,10 +14,13 @@ export const getCreateItemPage = (props: Parameters<typeof CreateItemPage>[0]) =
   <CreateItemPage {...props} />
 )
 
-function CreateItemPage({ listKey }: { listKey: string }) {
-  const list = useList(listKey)
+export function CreateItemPage({ params }: { params: Usable<{ listKey: string }> }) {
+  const { listsKeyByPath } = useKeystone()
+  const _params = use<{ listKey: string }>(params)
+  const list = useList(listsKeyByPath[_params.listKey])
   const createItem = useCreateItem(list)
   const router = useRouter()
+  const { adminPath } = useKeystone()
 
   return (
     <PageContainer
@@ -42,7 +45,7 @@ function CreateItemPage({ listKey }: { listKey: string }) {
             const item = await createItem.create()
             if (!item) return
 
-            router.push(`/${list.path}/${item.id}`)
+            router.push(`${adminPath}/${list.path}/${item.id}`)
           }}
           style={{ display: 'contents' }}
         >