tabshift/payload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Jacob Fletcher
2025-03-06 12:09:32 -05:00
committed by GitHub
parent 557ac9931a
commit 7cef8900a7
17 changed files with 6719 additions and 1170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/draft-preview/README.md
View File

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

2
examples/draft-preview/package.json
View File

@@ -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"
},

5671
examples/draft-preview/pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
examples/draft-preview/src/components/AdminBar/index.tsx
View File

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

2
examples/draft-preview/src/seed/home.ts
View File

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

1
examples/localization/package.json
View File

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

14
examples/localization/pnpm-lock.yaml generated
View File

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

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

@@ -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} />

7
examples/localization/src/components/AdminBar/index.scss
View File

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

85
examples/localization/src/components/AdminBar/index.tsx
View File

@@ -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>
)
}

2
templates/website/README.md
View File

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

2
templates/website/package.json
View File

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

2070
templates/website/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

6
templates/website/src/components/AdminBar/index.tsx
View File

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

4
templates/with-vercel-website/README.md
View File

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

2
templates/with-vercel-website/package.json
View File

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

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

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