chore(deps): bumps @payloadcms/admin-bar in templates and examples (#11566)

The Payload Admin Bar is now maintained in core and released under the
`@payloadcms` scope thanks to #3684. All templates and examples that
rely on this package now install from here and have been migrated
accordingly.

examples/draft-preview/README.md

@@ -68,7 +68,7 @@ If your front-end is statically generated then you may also want to regenerate t
 
 ### Admin Bar
 
-You might also want to render an admin bar on your front-end so that logged-in users can quickly navigate between the front-end and Payload as they're editing. For React apps, check out the official [Payload Admin Bar](https://github.com/payloadcms/payload-admin-bar). For other frameworks, simply hit the `/me` route with `credentials: 'include'` and render your own admin bar if the user is logged in.
+You might also want to render an admin bar on your front-end so that logged-in users can quickly navigate between the front-end and Payload as they're editing. For React apps, check out the official [Payload Admin Bar](https://github.com/payloadcms/payload/tree/main/packages/admin-bar). For other frameworks, simply hit the `/me` route with `credentials: 'include'` and render your own admin bar if the user is logged in.
 
 ### CORS
 

examples/draft-preview/package.json

@@ -16,6 +16,7 @@
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
+    "@payloadcms/admin-bar": "latest",
     "@payloadcms/db-mongodb": "latest",
     "@payloadcms/next": "latest",
     "@payloadcms/richtext-slate": "latest",
@@ -25,7 +26,6 @@
     "graphql": "^16.9.0",
     "next": "^15.0.0",
     "payload": "latest",
-    "payload-admin-bar": "^1.0.7",
     "react": "19.0.0",
     "react-dom": "19.0.0"
   },

examples/draft-preview/src/components/AdminBar/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import type { PayloadAdminBarProps } from 'payload-admin-bar'
+import type { PayloadAdminBarProps } from '@payloadcms/admin-bar'
 
 import { useRouter } from 'next/navigation'
-import { PayloadAdminBar } from 'payload-admin-bar'
+import { PayloadAdminBar } from '@payloadcms/admin-bar'
 import React, { useState } from 'react'
 
 import { Gutter } from '../Gutter'
@@ -42,7 +42,7 @@ export const AdminBar: React.FC<{
             user: classes.user,
           }}
           cmsURL={process.env.NEXT_PUBLIC_SERVER_URL}
-          collection={collection}
+          collectionSlug={collection}
           collectionLabels={{
             plural: collectionLabels[collection]?.plural || 'Pages',
             singular: collectionLabels[collection]?.singular || 'Page',

examples/draft-preview/src/seed/home.ts

@@ -52,7 +52,7 @@ export const home: Page = {
           children: [{ text: 'Payload Admin Bar' }],
           linkType: 'custom',
           newTab: true,
-          url: 'https://github.com/payloadcms/payload-admin-bar',
+          url: 'https://github.com/payloadcms/payload/tree/main/packages/admin-bar',
         },
         {
           text: ' appear at the top of this site. This will allow you to seamlessly navigate between the two apps. Then, navigate to the ',

examples/localization/package.json

@@ -42,7 +42,6 @@
     "next": "^15.1.0",
     "next-intl": "^3.23.2",
     "payload": "latest",
-    "payload-admin-bar": "^1.0.7",
     "prism-react-renderer": "^2.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

examples/localization/pnpm-lock.yaml

@@ -83,9 +83,6 @@ importers:
       payload:
         specifier: latest
         version: 3.25.0(graphql@16.10.0)(typescript@5.7.3)
-      payload-admin-bar:
-        specifier: ^1.0.7
-        version: 1.0.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       prism-react-renderer:
         specifier: ^2.3.1
         version: 2.4.1(react@19.0.0)
@@ -3354,12 +3351,6 @@ packages:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
 
-  payload-admin-bar@1.0.7:
-    resolution: {integrity: sha512-eY/FjfCGkyXOxRupv4IPZ+HFh8CQnJBQS++VItgTXe/g9H0B4RqxfdpU3g3tART3e8MzmZYGOBxV5EGGO2+jbg==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   payload@3.25.0:
     resolution: {integrity: sha512-azT1qtirV8QqIPpyWaxbF5TJPoWT5fpYoxin83wZxF5gmg0O06bL5YKCGFfCpzgCcw4FrFtLSzD68zGMc5m5Eg==}
     engines: {node: ^18.20.2 || >=20.9.0}
@@ -8386,11 +8377,6 @@ snapshots:
 
   path-type@4.0.0: {}
 
-  payload-admin-bar@1.0.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
-    dependencies:
-      react: 19.0.0
-      react-dom: 19.0.0(react@19.0.0)
-
   payload@3.25.0(graphql@16.10.0)(typescript@5.7.3):
     dependencies:
       '@next/env': 15.2.0

examples/localization/src/app/(frontend)/[locale]/layout.tsx

@@ -5,7 +5,6 @@ import { GeistMono } from 'geist/font/mono'
 import { GeistSans } from 'geist/font/sans'
 import React from 'react'
 
-import { AdminBar } from '@/components/AdminBar'
 import { Footer } from '@/globals/Footer/Component'
 import { Header } from '@/globals/Header/Component'
 import { LivePreviewListener } from '@/components/LivePreviewListener'
@@ -57,13 +56,7 @@ export default async function RootLayout({ children, params }: Args) {
       <body>
         <Providers>
           <NextIntlClientProvider messages={messages}>
-            <AdminBar
-              adminBarProps={{
-                preview: isEnabled,
-              }}
-            />
             <LivePreviewListener />
-
             <Header locale={locale} />
             {children}
             <Footer locale={locale} />

examples/localization/src/components/AdminBar/index.scss

@@ -1,7 +0,0 @@
-@import '~@payloadcms/ui/scss';
-
-.admin-bar {
-  @include small-break {
-    display: none;
-  }
-}

examples/localization/src/components/AdminBar/index.tsx

@@ -1,85 +0,0 @@
-'use client'
-
-import type { PayloadAdminBarProps } from 'payload-admin-bar'
-
-import { cn } from '@/utilities/ui'
-import { useSelectedLayoutSegments } from 'next/navigation'
-import { PayloadAdminBar } from 'payload-admin-bar'
-import React, { useState } from 'react'
-import { useRouter } from 'next/navigation'
-
-import './index.scss'
-import { useTranslations } from 'next-intl'
-
-const baseClass = 'admin-bar'
-
-const collectionLabels = {
-  pages: {
-    plural: 'Pages',
-    singular: 'Page',
-  },
-  posts: {
-    plural: 'Posts',
-    singular: 'Post',
-  },
-  projects: {
-    plural: 'Projects',
-    singular: 'Project',
-  },
-}
-
-export const AdminBar: React.FC<{
-  adminBarProps?: PayloadAdminBarProps
-}> = (props) => {
-  const { adminBarProps } = props || {}
-  const segments = useSelectedLayoutSegments()
-  const [show, setShow] = useState(false)
-  const collection = collectionLabels?.[segments?.[1]] ? segments?.[1] : 'pages'
-  const router = useRouter()
-  const t = useTranslations()
-
-  const onAuthChange = React.useCallback((user) => {
-    setShow(user?.id)
-  }, [])
-
-  return (
-    <div
-      className={cn(baseClass, 'py-2 bg-black text-white', {
-        block: show,
-        hidden: !show,
-      })}
-    >
-      <div className="container">
-        <PayloadAdminBar
-          {...adminBarProps}
-          className="py-2 text-white"
-          classNames={{
-            controls: 'font-medium text-white',
-            logo: 'text-white',
-            user: 'text-white',
-          }}
-          cmsURL={process.env.NEXT_PUBLIC_SERVER_URL}
-          collection={collection}
-          collectionLabels={{
-            plural: collectionLabels[collection]?.plural || 'Pages',
-            singular: collectionLabels[collection]?.singular || 'Page',
-          }}
-          logo={<span>{t('dashboard')}</span>}
-          onAuthChange={onAuthChange}
-          onPreviewExit={() => {
-            fetch('/next/exit-preview').then(() => {
-              router.push('/')
-              router.refresh()
-            })
-          }}
-          style={{
-            backgroundColor: 'transparent',
-            padding: 0,
-            position: 'relative',
-            zIndex: 'unset',
-          }}
-        />
-      </div>
-    </div>
-  )
-}

templates/website/README.md

@@ -173,7 +173,7 @@ Core features:
 - [Next.js App Router](https://nextjs.org)
 - [TypeScript](https://www.typescriptlang.org)
 - [React Hook Form](https://react-hook-form.com)
-- [Payload Admin Bar](https://github.com/payloadcms/payload-admin-bar)
+- [Payload Admin Bar](https://github.com/payloadcms/payload/tree/main/packages/admin-bar)
 - [TailwindCSS styling](https://tailwindcss.com/)
 - [shadcn/ui components](https://ui.shadcn.com/)
 - User Accounts and Authentication

templates/website/package.json

@@ -19,6 +19,7 @@
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
+    "@payloadcms/admin-bar": "latest",
     "@payloadcms/db-mongodb": "latest",
     "@payloadcms/live-preview-react": "latest",
     "@payloadcms/next": "latest",
@@ -43,7 +44,6 @@
     "next": "15.2.0",
     "next-sitemap": "^4.2.3",
     "payload": "latest",
-    "payload-admin-bar": "^1.0.7",
     "prism-react-renderer": "^2.3.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",

templates/website/src/components/AdminBar/index.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import type { PayloadAdminBarProps, PayloadMeUser } from 'payload-admin-bar'
+import type { PayloadAdminBarProps, PayloadMeUser } from '@payloadcms/admin-bar'
 
 import { cn } from '@/utilities/ui'
 import { useSelectedLayoutSegments } from 'next/navigation'
-import { PayloadAdminBar } from 'payload-admin-bar'
+import { PayloadAdminBar } from '@payloadcms/admin-bar'
 import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
 
@@ -63,7 +63,7 @@ export const AdminBar: React.FC<{
             user: 'text-white',
           }}
           cmsURL={getClientSideURL()}
-          collection={collection}
+          collectionSlug={collection}
           collectionLabels={{
             plural: collectionLabels[collection]?.plural || 'Pages',
             singular: collectionLabels[collection]?.singular || 'Page',

templates/with-vercel-website/README.md

@@ -31,7 +31,7 @@ Core features:
 
 Click the 'Deploy' button above to spin up this template directly into Vercel hosting. It will first prompt you save this template into your own Github repo so that you own the code and can make any changes you want to it.
 
-Set up the following services and secrets and then once the app has been built and deployed you will be able to visit your site at the generated URL.  
+Set up the following services and secrets and then once the app has been built and deployed you will be able to visit your site at the generated URL.
 From this point on you can access your admin panel at `/admin` of your app URL, create an admin user and then click the 'Seed the database' button in the dashboard to add content into your app.
 
 ### Services
@@ -197,7 +197,7 @@ Core features:
 - [Next.js App Router](https://nextjs.org)
 - [TypeScript](https://www.typescriptlang.org)
 - [React Hook Form](https://react-hook-form.com)
-- [Payload Admin Bar](https://github.com/payloadcms/payload-admin-bar)
+- [Payload Admin Bar](https://github.com/payloadcms/payload/tree/main/packages/admin-bar)
 - [TailwindCSS styling](https://tailwindcss.com/)
 - [shadcn/ui components](https://ui.shadcn.com/)
 - User Accounts and Authentication

templates/with-vercel-website/package.json

@@ -20,6 +20,7 @@
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
+    "@payloadcms/admin-bar": "latest",
     "@payloadcms/db-vercel-postgres": "latest",
     "@payloadcms/live-preview-react": "latest",
     "@payloadcms/next": "latest",
@@ -45,7 +46,6 @@
     "next": "15.2.0",
     "next-sitemap": "^4.2.3",
     "payload": "latest",
-    "payload-admin-bar": "^1.0.7",
     "prism-react-renderer": "^2.3.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",

templates/with-vercel-website/src/components/AdminBar/index.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import type { PayloadAdminBarProps, PayloadMeUser } from 'payload-admin-bar'
+import type { PayloadAdminBarProps, PayloadMeUser } from '@payloadcms/admin-bar'
 
 import { cn } from '@/utilities/ui'
 import { useSelectedLayoutSegments } from 'next/navigation'
-import { PayloadAdminBar } from 'payload-admin-bar'
+import { PayloadAdminBar } from '@payloadcms/admin-bar'
 import React, { useState } from 'react'
 import { useRouter } from 'next/navigation'
 
@@ -63,7 +63,7 @@ export const AdminBar: React.FC<{
             user: 'text-white',
           }}
           cmsURL={getClientSideURL()}
-          collection={collection}
+          collectionSlug={collection}
           collectionLabels={{
             plural: collectionLabels[collection]?.plural || 'Pages',
             singular: collectionLabels[collection]?.singular || 'Page',