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

@@ -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',