@payloadcms/admin-bar 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE.md ADDED
@@ -0,0 +1,22 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2018-2025 Payload CMS, Inc. <info@payloadcms.com>
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ 'Software'), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19
+ IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
20
+ CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21
+ TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22
+ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,119 @@
1
+ # Payload Admin Bar
2
+
3
+ An admin bar for React apps using [Payload](https://github.com/payloadcms/payload).
4
+
5
+ ### Installation
6
+
7
+ ```bash
8
+ pnpm i @payloadcms/admin-bar
9
+ ```
10
+
11
+ ### Basic Usage
12
+
13
+ ```jsx
14
+ import { PayloadAdminBar } from '@payloadcms/admin-bar'
15
+
16
+ export const App = () => {
17
+ return <PayloadAdminBar cmsURL="https://cms.website.com" collection="pages" id="12345" />
18
+ }
19
+ ```
20
+
21
+ Checks for authentication with Payload CMS by hitting the [`/me`](https://payloadcms.com/docs/authentication/operations#me) route. If authenticated, renders an admin bar with simple controls to do the following:
22
+
23
+ - Navigate to the admin dashboard
24
+ - Navigate to the currently logged-in user's account
25
+ - Edit the current collection
26
+ - Create a new collection of the same type
27
+ - Logout
28
+ - Indicate and exit preview mode
29
+
30
+ The admin bar ships with very little style and is fully customizable.
31
+
32
+ ### Dynamic props
33
+
34
+ With client-side routing, we need to update the admin bar with a new collection type and document id on each route change. This will depend on your app's specific setup, but here are a some common examples:
35
+
36
+ #### NextJS
37
+
38
+ For NextJS apps using dynamic-routes, use `getStaticProps`:
39
+
40
+ ```ts
41
+ export const getStaticProps = async ({ params: { slug } }) => {
42
+ const props = {}
43
+
44
+ const pageReq = await fetch(
45
+ `https://cms.website.com/api/pages?where[slug][equals]=${slug}&depth=1`,
46
+ )
47
+ const pageData = await pageReq.json()
48
+
49
+ if (pageReq.ok) {
50
+ const { docs } = pageData
51
+ const [doc] = docs
52
+
53
+ props = {
54
+ ...doc,
55
+ collection: 'pages',
56
+ collectionLabels: {
57
+ singular: 'page',
58
+ plural: 'pages',
59
+ },
60
+ }
61
+ }
62
+
63
+ return props
64
+ }
65
+ ```
66
+
67
+ Now your app can forward these props onto the admin bar. Something like this:
68
+
69
+ ```ts
70
+ import { PayloadAdminBar } from '@payloadcms/admin-bar';
71
+
72
+ export const App = (appProps) => {
73
+ const {
74
+ pageProps: {
75
+ collection,
76
+ collectionLabels,
77
+ id
78
+ }
79
+ } = appProps;
80
+
81
+ return (
82
+ <PayloadAdminBar
83
+ {...{
84
+ cmsURL: 'https://cms.website.com',
85
+ collection,
86
+ collectionLabels,
87
+ id
88
+ }}
89
+ />
90
+ )
91
+ }
92
+ ```
93
+
94
+ ### Props
95
+
96
+ | Property | Type | Required | Default | Description |
97
+ | ------------------ | ------------------------------------------------------------------------------------------------------------------------ | -------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
98
+ | cmsURL | `string` | true | `http://localhost:8000` | `serverURL` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
99
+ | adminPath | `string` | false | /admin | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
100
+ | apiPath | `string` | false | /api | `routes` as defined in your [Payload config](https://payloadcms.com/docs/configuration/overview#options) |
101
+ | authCollectionSlug | `string` | false | 'users' | Slug of your [auth collection](https://payloadcms.com/docs/configuration/collections) |
102
+ | collectionSlug | `string` | true | undefined | Slug of your [collection](https://payloadcms.com/docs/configuration/collections) |
103
+ | collectionLabels | `{ singular?: string, plural?: string }` | false | undefined | Labels of your [collection](https://payloadcms.com/docs/configuration/collections) |
104
+ | id | `string` | true | undefined | id of the document |
105
+ | logo | `ReactElement` | false | undefined | Custom logo |
106
+ | classNames | `{ logo?: string, user?: string, controls?: string, create?: string, logout?: string, edit?: string, preview?: string }` | false | undefined | Custom class names, one for each rendered element |
107
+ | logoProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
108
+ | userProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
109
+ | divProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
110
+ | createProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
111
+ | logoutProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
112
+ | editProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
113
+ | previewProps | `{[key: string]?: unknown}` | false | undefined | Custom props |
114
+ | style | `CSSProperties` | false | undefined | Custom inline style |
115
+ | unstyled | `boolean` | false | undefined | If true, renders no inline style |
116
+ | onAuthChange | `(user: PayloadMeUser) => void` | false | undefined | Fired on each auth change |
117
+ | devMode | `boolean` | false | undefined | If true, fakes authentication (useful when dealing with [SameSite cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite)) |
118
+ | preview | `boolean` | false | undefined | If true, renders an exit button with your `onPreviewExit` handler) |
119
+ | onPreviewExit | `function` | false | undefined | Callback for the preview button `onClick` event) |
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import type { PayloadAdminBarProps } from './types.js';
3
+ export declare const PayloadAdminBar: React.FC<PayloadAdminBarProps>;
4
+ //# sourceMappingURL=AdminBar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AdminBar.d.ts","sourceRoot":"","sources":["../src/AdminBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAOlD,OAAO,KAAK,EAAE,oBAAoB,EAAiB,MAAM,YAAY,CAAA;AAErE,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkV1D,CAAA"}
@@ -0,0 +1,269 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import React, { useEffect, useState } from 'react';
4
+ const dummyUser = {
5
+ id: '12345',
6
+ email: 'dev@email.com'
7
+ };
8
+ export const PayloadAdminBar = (props)=>{
9
+ const { id: docID, adminPath = '/admin', apiPath = '/api', authCollectionSlug = 'users', className, classNames, cmsURL = 'http://localhost:8000', collectionLabels, collectionSlug, createProps, devMode, divProps, editProps, logo, logoProps, logoutProps, onAuthChange, onPreviewExit, preview, previewProps, style, unstyled, userProps } = props;
10
+ const [user, setUser] = useState();
11
+ useEffect(()=>{
12
+ const fetchMe = async ()=>{
13
+ try {
14
+ const meRequest = await fetch(`${cmsURL}${apiPath}/${authCollectionSlug}/me`, {
15
+ credentials: 'include',
16
+ method: 'get'
17
+ });
18
+ const meResponse = await meRequest.json();
19
+ const { user } = meResponse;
20
+ if (user) {
21
+ setUser(user);
22
+ } else {
23
+ if (devMode !== true) {
24
+ setUser(null);
25
+ } else {
26
+ setUser(dummyUser);
27
+ }
28
+ }
29
+ } catch (err) {
30
+ console.warn(err);
31
+ if (devMode === true) {
32
+ setUser(dummyUser);
33
+ }
34
+ }
35
+ };
36
+ void fetchMe();
37
+ }, [
38
+ cmsURL,
39
+ adminPath,
40
+ apiPath,
41
+ devMode
42
+ ]);
43
+ useEffect(()=>{
44
+ if (typeof onAuthChange === 'function') {
45
+ onAuthChange(user);
46
+ }
47
+ }, [
48
+ user,
49
+ onAuthChange
50
+ ]);
51
+ if (user) {
52
+ const { id: userID, email } = user;
53
+ return /*#__PURE__*/ _jsxs("div", {
54
+ className: className,
55
+ id: "payload-admin-bar",
56
+ style: {
57
+ ...unstyled !== true ? {
58
+ alignItems: 'center',
59
+ backgroundColor: '#222',
60
+ boxSizing: 'border-box',
61
+ color: '#fff',
62
+ display: 'flex',
63
+ fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',
64
+ fontSize: 'small',
65
+ left: 0,
66
+ minWidth: '0',
67
+ padding: '0.5rem',
68
+ position: 'fixed',
69
+ top: 0,
70
+ width: '100%',
71
+ zIndex: 99999
72
+ } : {},
73
+ ...style
74
+ },
75
+ children: [
76
+ /*#__PURE__*/ _jsx("a", {
77
+ className: classNames?.logo,
78
+ href: `${cmsURL}${adminPath}`,
79
+ ...logoProps,
80
+ style: {
81
+ ...unstyled !== true ? {
82
+ alignItems: 'center',
83
+ color: 'inherit',
84
+ display: 'flex',
85
+ flexShrink: 0,
86
+ height: '20px',
87
+ marginRight: '10px',
88
+ textDecoration: 'none',
89
+ ...logoProps?.style ? {
90
+ ...logoProps.style
91
+ } : {}
92
+ } : {}
93
+ },
94
+ children: logo || 'Payload CMS'
95
+ }),
96
+ /*#__PURE__*/ _jsx("a", {
97
+ className: classNames?.user,
98
+ href: `${cmsURL}${adminPath}/collections/${authCollectionSlug}/${userID}`,
99
+ rel: "noopener noreferrer",
100
+ target: "_blank",
101
+ ...userProps,
102
+ style: {
103
+ ...unstyled !== true ? {
104
+ color: 'inherit',
105
+ display: 'block',
106
+ marginRight: '10px',
107
+ minWidth: '50px',
108
+ overflow: 'hidden',
109
+ textDecoration: 'none',
110
+ textOverflow: 'ellipsis',
111
+ whiteSpace: 'nowrap',
112
+ ...userProps?.style ? {
113
+ ...userProps.style
114
+ } : {}
115
+ } : {}
116
+ },
117
+ children: /*#__PURE__*/ _jsx("span", {
118
+ style: {
119
+ ...unstyled !== true ? {
120
+ overflow: 'hidden',
121
+ textOverflow: 'ellipsis',
122
+ whiteSpace: 'nowrap'
123
+ } : {}
124
+ },
125
+ children: email || 'Profile'
126
+ })
127
+ }),
128
+ /*#__PURE__*/ _jsxs("div", {
129
+ className: classNames?.controls,
130
+ ...divProps,
131
+ style: {
132
+ ...unstyled !== true ? {
133
+ alignItems: 'center',
134
+ display: 'flex',
135
+ flexGrow: 1,
136
+ flexShrink: 1,
137
+ justifyContent: 'flex-end',
138
+ marginRight: '10px',
139
+ ...divProps?.style ? {
140
+ ...divProps.style
141
+ } : {}
142
+ } : {}
143
+ },
144
+ children: [
145
+ collectionSlug && docID && /*#__PURE__*/ _jsx("a", {
146
+ className: classNames?.edit,
147
+ href: `${cmsURL}${adminPath}/collections/${collectionSlug}/${docID}`,
148
+ rel: "noopener noreferrer",
149
+ target: "_blank",
150
+ ...editProps,
151
+ style: {
152
+ display: 'block',
153
+ ...unstyled !== true ? {
154
+ color: 'inherit',
155
+ flexShrink: 1,
156
+ marginRight: '10px',
157
+ overflow: 'hidden',
158
+ textDecoration: 'none',
159
+ textOverflow: 'ellipsis',
160
+ whiteSpace: 'nowrap',
161
+ ...editProps?.style ? {
162
+ ...editProps.style
163
+ } : {}
164
+ } : {}
165
+ },
166
+ children: /*#__PURE__*/ _jsx("span", {
167
+ style: {
168
+ ...unstyled !== true ? {
169
+ overflow: 'hidden',
170
+ textOverflow: 'ellipsis',
171
+ whiteSpace: 'nowrap'
172
+ } : {}
173
+ },
174
+ children: `Edit ${collectionLabels?.singular || 'page'}`
175
+ })
176
+ }),
177
+ collectionSlug && /*#__PURE__*/ _jsx("a", {
178
+ className: classNames?.create,
179
+ href: `${cmsURL}${adminPath}/collections/${collectionSlug}/create`,
180
+ rel: "noopener noreferrer",
181
+ target: "_blank",
182
+ ...createProps,
183
+ style: {
184
+ ...unstyled !== true ? {
185
+ color: 'inherit',
186
+ display: 'block',
187
+ flexShrink: 1,
188
+ overflow: 'hidden',
189
+ textDecoration: 'none',
190
+ textOverflow: 'ellipsis',
191
+ whiteSpace: 'nowrap',
192
+ ...createProps?.style ? {
193
+ ...createProps.style
194
+ } : {}
195
+ } : {}
196
+ },
197
+ children: /*#__PURE__*/ _jsx("span", {
198
+ style: {
199
+ ...unstyled !== true ? {
200
+ overflow: 'hidden',
201
+ textOverflow: 'ellipsis',
202
+ whiteSpace: 'nowrap'
203
+ } : {}
204
+ },
205
+ children: `New ${collectionLabels?.singular || 'page'}`
206
+ })
207
+ }),
208
+ preview && /*#__PURE__*/ _jsx("button", {
209
+ className: classNames?.preview,
210
+ onClick: onPreviewExit,
211
+ ...previewProps,
212
+ style: {
213
+ ...unstyled !== true ? {
214
+ background: 'none',
215
+ border: 'none',
216
+ color: 'inherit',
217
+ cursor: 'pointer',
218
+ fontFamily: 'inherit',
219
+ fontSize: 'inherit',
220
+ marginLeft: '10px',
221
+ padding: 0,
222
+ ...previewProps?.style ? {
223
+ ...previewProps.style
224
+ } : {}
225
+ } : {}
226
+ },
227
+ type: "button",
228
+ children: "Exit preview mode"
229
+ })
230
+ ]
231
+ }),
232
+ /*#__PURE__*/ _jsx("a", {
233
+ className: classNames?.logout,
234
+ href: `${cmsURL}${adminPath}/logout`,
235
+ rel: "noopener noreferrer",
236
+ target: "_blank",
237
+ ...logoutProps,
238
+ style: {
239
+ ...unstyled !== true ? {
240
+ color: 'inherit',
241
+ display: 'block',
242
+ flexShrink: 1,
243
+ overflow: 'hidden',
244
+ textDecoration: 'none',
245
+ textOverflow: 'ellipsis',
246
+ whiteSpace: 'nowrap',
247
+ ...logoutProps?.style ? {
248
+ ...logoutProps.style
249
+ } : {}
250
+ } : {}
251
+ },
252
+ children: /*#__PURE__*/ _jsx("span", {
253
+ style: {
254
+ ...unstyled !== true ? {
255
+ overflow: 'hidden',
256
+ textOverflow: 'ellipsis',
257
+ whiteSpace: 'nowrap'
258
+ } : {}
259
+ },
260
+ children: "Logout"
261
+ })
262
+ })
263
+ ]
264
+ });
265
+ }
266
+ return null;
267
+ };
268
+
269
+ //# sourceMappingURL=AdminBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/AdminBar.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useState } from 'react'\n\nconst dummyUser = {\n id: '12345',\n email: 'dev@email.com',\n}\n\nimport type { PayloadAdminBarProps, PayloadMeUser } from './types.js'\n\nexport const PayloadAdminBar: React.FC<PayloadAdminBarProps> = (props) => {\n const {\n id: docID,\n adminPath = '/admin',\n apiPath = '/api',\n authCollectionSlug = 'users',\n className,\n classNames,\n cmsURL = 'http://localhost:8000',\n collectionLabels,\n collectionSlug,\n createProps,\n devMode,\n divProps,\n editProps,\n logo,\n logoProps,\n logoutProps,\n onAuthChange,\n onPreviewExit,\n preview,\n previewProps,\n style,\n unstyled,\n userProps,\n } = props\n\n const [user, setUser] = useState<PayloadMeUser>()\n\n useEffect(() => {\n const fetchMe = async () => {\n try {\n const meRequest = await fetch(`${cmsURL}${apiPath}/${authCollectionSlug}/me`, {\n credentials: 'include',\n method: 'get',\n })\n const meResponse = await meRequest.json()\n const { user } = meResponse\n\n if (user) {\n setUser(user)\n } else {\n if (devMode !== true) {\n setUser(null)\n } else {\n setUser(dummyUser)\n }\n }\n } catch (err) {\n console.warn(err)\n if (devMode === true) {\n setUser(dummyUser)\n }\n }\n }\n\n void fetchMe()\n }, [cmsURL, adminPath, apiPath, devMode])\n\n useEffect(() => {\n if (typeof onAuthChange === 'function') {\n onAuthChange(user)\n }\n }, [user, onAuthChange])\n\n if (user) {\n const { id: userID, email } = user\n\n return (\n <div\n className={className}\n id=\"payload-admin-bar\"\n style={{\n ...(unstyled !== true\n ? {\n alignItems: 'center',\n backgroundColor: '#222',\n boxSizing: 'border-box',\n color: '#fff',\n display: 'flex',\n fontFamily:\n '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif',\n fontSize: 'small',\n left: 0,\n minWidth: '0',\n padding: '0.5rem',\n position: 'fixed',\n top: 0,\n width: '100%',\n zIndex: 99999,\n }\n : {}),\n ...style,\n }}\n >\n <a\n className={classNames?.logo}\n href={`${cmsURL}${adminPath}`}\n {...logoProps}\n style={{\n ...(unstyled !== true\n ? {\n alignItems: 'center',\n color: 'inherit',\n display: 'flex',\n flexShrink: 0,\n height: '20px',\n marginRight: '10px',\n textDecoration: 'none',\n ...(logoProps?.style\n ? {\n ...logoProps.style,\n }\n : {}),\n }\n : {}),\n }}\n >\n {logo || 'Payload CMS'}\n </a>\n <a\n className={classNames?.user}\n href={`${cmsURL}${adminPath}/collections/${authCollectionSlug}/${userID}`}\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n {...userProps}\n style={{\n ...(unstyled !== true\n ? {\n color: 'inherit',\n display: 'block',\n marginRight: '10px',\n minWidth: '50px',\n overflow: 'hidden',\n textDecoration: 'none',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...(userProps?.style\n ? {\n ...userProps.style,\n }\n : {}),\n }\n : {}),\n }}\n >\n <span\n style={{\n ...(unstyled !== true\n ? {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }\n : {}),\n }}\n >\n {email || 'Profile'}\n </span>\n </a>\n <div\n className={classNames?.controls}\n {...divProps}\n style={{\n ...(unstyled !== true\n ? {\n alignItems: 'center',\n display: 'flex',\n flexGrow: 1,\n flexShrink: 1,\n justifyContent: 'flex-end',\n marginRight: '10px',\n ...(divProps?.style\n ? {\n ...divProps.style,\n }\n : {}),\n }\n : {}),\n }}\n >\n {collectionSlug && docID && (\n <a\n className={classNames?.edit}\n href={`${cmsURL}${adminPath}/collections/${collectionSlug}/${docID}`}\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n {...editProps}\n style={{\n display: 'block',\n ...(unstyled !== true\n ? {\n color: 'inherit',\n flexShrink: 1,\n marginRight: '10px',\n overflow: 'hidden',\n textDecoration: 'none',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...(editProps?.style\n ? {\n ...editProps.style,\n }\n : {}),\n }\n : {}),\n }}\n >\n <span\n style={{\n ...(unstyled !== true\n ? {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }\n : {}),\n }}\n >\n {`Edit ${collectionLabels?.singular || 'page'}`}\n </span>\n </a>\n )}\n {collectionSlug && (\n <a\n className={classNames?.create}\n href={`${cmsURL}${adminPath}/collections/${collectionSlug}/create`}\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n {...createProps}\n style={{\n ...(unstyled !== true\n ? {\n color: 'inherit',\n display: 'block',\n flexShrink: 1,\n overflow: 'hidden',\n textDecoration: 'none',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...(createProps?.style\n ? {\n ...createProps.style,\n }\n : {}),\n }\n : {}),\n }}\n >\n <span\n style={{\n ...(unstyled !== true\n ? {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }\n : {}),\n }}\n >\n {`New ${collectionLabels?.singular || 'page'}`}\n </span>\n </a>\n )}\n {preview && (\n <button\n className={classNames?.preview}\n onClick={onPreviewExit}\n {...previewProps}\n style={{\n ...(unstyled !== true\n ? {\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n marginLeft: '10px',\n padding: 0,\n ...(previewProps?.style\n ? {\n ...previewProps.style,\n }\n : {}),\n }\n : {}),\n }}\n type=\"button\"\n >\n Exit preview mode\n </button>\n )}\n </div>\n <a\n className={classNames?.logout}\n href={`${cmsURL}${adminPath}/logout`}\n rel=\"noopener noreferrer\"\n target=\"_blank\"\n {...logoutProps}\n style={{\n ...(unstyled !== true\n ? {\n color: 'inherit',\n display: 'block',\n flexShrink: 1,\n overflow: 'hidden',\n textDecoration: 'none',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n ...(logoutProps?.style\n ? {\n ...logoutProps.style,\n }\n : {}),\n }\n : {}),\n }}\n >\n <span\n style={{\n ...(unstyled !== true\n ? {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n }\n : {}),\n }}\n >\n Logout\n </span>\n </a>\n </div>\n )\n }\n\n return null\n}\n"],"names":["React","useEffect","useState","dummyUser","id","email","PayloadAdminBar","props","docID","adminPath","apiPath","authCollectionSlug","className","classNames","cmsURL","collectionLabels","collectionSlug","createProps","devMode","divProps","editProps","logo","logoProps","logoutProps","onAuthChange","onPreviewExit","preview","previewProps","style","unstyled","userProps","user","setUser","fetchMe","meRequest","fetch","credentials","method","meResponse","json","err","console","warn","userID","div","alignItems","backgroundColor","boxSizing","color","display","fontFamily","fontSize","left","minWidth","padding","position","top","width","zIndex","a","href","flexShrink","height","marginRight","textDecoration","rel","target","overflow","textOverflow","whiteSpace","span","controls","flexGrow","justifyContent","edit","singular","create","button","onClick","background","border","cursor","marginLeft","type","logout"],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ export { PayloadAdminBar } from './AdminBar.js';
2
+ export type { PayloadAdminBarProps, PayloadMeUser } from './types.js';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAC/C,YAAY,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}
package/dist/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export { PayloadAdminBar } from './AdminBar.js';
2
+
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { PayloadAdminBar } from './AdminBar.js'\nexport type { PayloadAdminBarProps, PayloadMeUser } from './types.js'\n"],"names":["PayloadAdminBar"],"mappings":"AAAA,SAASA,eAAe,QAAQ,gBAAe"}
@@ -0,0 +1,63 @@
1
+ import type { CSSProperties, ReactElement } from 'react';
2
+ export type PayloadMeUser = {
3
+ email: string;
4
+ id: string;
5
+ } | null | undefined;
6
+ export type PayloadAdminBarProps = {
7
+ adminPath?: string;
8
+ apiPath?: string;
9
+ authCollectionSlug?: string;
10
+ className?: string;
11
+ classNames?: {
12
+ controls?: string;
13
+ create?: string;
14
+ edit?: string;
15
+ logo?: string;
16
+ logout?: string;
17
+ preview?: string;
18
+ user?: string;
19
+ };
20
+ cmsURL?: string;
21
+ collectionLabels?: {
22
+ plural?: string;
23
+ singular?: string;
24
+ };
25
+ collectionSlug?: string;
26
+ createProps?: {
27
+ [key: string]: unknown;
28
+ style?: CSSProperties;
29
+ };
30
+ devMode?: boolean;
31
+ divProps?: {
32
+ [key: string]: unknown;
33
+ style?: CSSProperties;
34
+ };
35
+ editProps?: {
36
+ [key: string]: unknown;
37
+ style?: CSSProperties;
38
+ };
39
+ id?: string;
40
+ logo?: ReactElement;
41
+ logoProps?: {
42
+ [key: string]: unknown;
43
+ style?: CSSProperties;
44
+ };
45
+ logoutProps?: {
46
+ [key: string]: unknown;
47
+ style?: CSSProperties;
48
+ };
49
+ onAuthChange?: (user: PayloadMeUser) => void;
50
+ onPreviewExit?: () => void;
51
+ preview?: boolean;
52
+ previewProps?: {
53
+ [key: string]: unknown;
54
+ style?: CSSProperties;
55
+ };
56
+ style?: CSSProperties;
57
+ unstyled?: boolean;
58
+ userProps?: {
59
+ [key: string]: unknown;
60
+ style?: CSSProperties;
61
+ };
62
+ };
63
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAExD,MAAM,MAAM,aAAa,GACrB;IACE,KAAK,EAAE,MAAM,CAAA;IACb,EAAE,EAAE,MAAM,CAAA;CACX,GACD,IAAI,GACJ,SAAS,CAAA;AAEb,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE;QACX,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,IAAI,CAAC,EAAE,MAAM,CAAA;KACd,CAAA;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB,CAAC,EAAE;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW,CAAC,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,KAAK,CAAC,EAAE,aAAa,CAAA;KACtB,CAAA;IACD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE;QACT,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,KAAK,CAAC,EAAE,aAAa,CAAA;KACtB,CAAA;IACD,SAAS,CAAC,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,KAAK,CAAC,EAAE,aAAa,CAAA;KACtB,CAAA;IACD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,SAAS,CAAC,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,KAAK,CAAC,EAAE,aAAa,CAAA;KACtB,CAAA;IACD,WAAW,CAAC,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,KAAK,CAAC,EAAE,aAAa,CAAA;KACtB,CAAA;IACD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,YAAY,CAAC,EAAE;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,KAAK,CAAC,EAAE,aAAa,CAAA;KACtB,CAAA;IACD,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE;QACV,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;QACtB,KAAK,CAAC,EAAE,aAAa,CAAA;KACtB,CAAA;CACF,CAAA"}
package/dist/types.js ADDED
@@ -0,0 +1,3 @@
1
+ export { };
2
+
3
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/types.ts"],"sourcesContent":["import type { CSSProperties, ReactElement } from 'react'\n\nexport type PayloadMeUser =\n | {\n email: string\n id: string\n }\n | null\n | undefined\n\nexport type PayloadAdminBarProps = {\n adminPath?: string\n apiPath?: string\n authCollectionSlug?: string\n className?: string\n classNames?: {\n controls?: string\n create?: string\n edit?: string\n logo?: string\n logout?: string\n preview?: string\n user?: string\n }\n cmsURL?: string\n collectionLabels?: {\n plural?: string\n singular?: string\n }\n collectionSlug?: string\n createProps?: {\n [key: string]: unknown\n style?: CSSProperties\n }\n devMode?: boolean\n divProps?: {\n [key: string]: unknown\n style?: CSSProperties\n }\n editProps?: {\n [key: string]: unknown\n style?: CSSProperties\n }\n id?: string\n logo?: ReactElement\n logoProps?: {\n [key: string]: unknown\n style?: CSSProperties\n }\n logoutProps?: {\n [key: string]: unknown\n style?: CSSProperties\n }\n onAuthChange?: (user: PayloadMeUser) => void\n onPreviewExit?: () => void\n preview?: boolean\n previewProps?: {\n [key: string]: unknown\n style?: CSSProperties\n }\n style?: CSSProperties\n unstyled?: boolean\n userProps?: {\n [key: string]: unknown\n style?: CSSProperties\n }\n}\n"],"names":[],"mappings":"AAUA,WAwDC"}
package/package.json ADDED
@@ -0,0 +1,55 @@
1
+ {
2
+ "name": "@payloadcms/admin-bar",
3
+ "version": "0.0.1",
4
+ "description": "An admin bar for React apps using Payload",
5
+ "homepage": "https://payloadcms.com",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/payloadcms/payload.git",
9
+ "directory": "packages/admin-bar"
10
+ },
11
+ "license": "MIT",
12
+ "author": "Payload <dev@payloadcms.com> (https://payloadcms.com)",
13
+ "maintainers": [
14
+ {
15
+ "name": "Payload",
16
+ "email": "info@payloadcms.com",
17
+ "url": "https://payloadcms.com"
18
+ }
19
+ ],
20
+ "type": "module",
21
+ "exports": {
22
+ ".": {
23
+ "import": "./dist/index.js",
24
+ "types": "./dist/index.d.ts",
25
+ "default": "./dist/index.js"
26
+ }
27
+ },
28
+ "main": "./dist/index.js",
29
+ "types": "./dist/index.d.ts",
30
+ "files": [
31
+ "dist"
32
+ ],
33
+ "devDependencies": {
34
+ "@types/react": "19.0.10",
35
+ "@types/react-dom": "19.0.4",
36
+ "payload": "3.26.0",
37
+ "@payloadcms/eslint-config": "3.9.0"
38
+ },
39
+ "peerDependencies": {
40
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
41
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
42
+ },
43
+ "publishConfig": {
44
+ "registry": "https://registry.npmjs.org/"
45
+ },
46
+ "scripts": {
47
+ "build": "pnpm copyfiles && pnpm build:types && pnpm build:swc",
48
+ "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
49
+ "build:types": "tsc --emitDeclarationOnly --outDir dist",
50
+ "clean": "rimraf -g {dist,*.tsbuildinfo}",
51
+ "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
52
+ "lint": "eslint .",
53
+ "lint:fix": "eslint . --fix"
54
+ }
55
+ }