@orion-studios/payload-admin-components 0.2.0-beta.11 → 0.2.0-beta.12

package/src/helpers/configureAdmin.ts

@@ -25,6 +25,23 @@ function getPkgDistDir(): string {
   }
 }
 
+export type StudioGlobalLink = {
+  label: string
+  slug: string
+}
+
+export interface AdminStudioConfig {
+  enabled?: boolean
+  globals?: StudioGlobalLink[]
+  media?: {
+    collectionSlug?: string
+  }
+  pages?: {
+    builderBasePath?: string
+    collectionSlug?: string
+  }
+}
+
 export interface AdminConfig {
   brandName: string
   brandPrimary?: string
@@ -33,6 +50,8 @@ export interface AdminConfig {
   logoUrl?: string
   /** Pass your config file's `dirname` so configureAdmin can generate a CSS file with your brand colors. */
   basePath?: string
+  /** Enable the unified custom Studio experience under `/admin`. */
+  studio?: AdminStudioConfig
 }
 
 export function configureAdmin(config: AdminConfig) {
@@ -43,6 +62,18 @@ export function configureAdmin(config: AdminConfig) {
     defaultTheme = 'brand-light',
   } = config
 
+  const studioEnabled = Boolean(config.studio?.enabled)
+  const pagesCollectionSlug = config.studio?.pages?.collectionSlug || 'pages'
+  const builderBasePath = config.studio?.pages?.builderBasePath || '/builder'
+  const mediaCollectionSlug = config.studio?.media?.collectionSlug || 'media'
+
+  const globals: StudioGlobalLink[] =
+    config.studio?.globals || [
+      { slug: 'site-settings', label: 'Website Settings' },
+      { slug: 'header', label: 'Header & Navigation' },
+      { slug: 'footer', label: 'Footer' },
+    ]
+
   let cssPath: string
 
   const pkgDist = getPkgDistDir()
@@ -64,32 +95,100 @@ export function configureAdmin(config: AdminConfig) {
     cssPath = sourceCssPath
   }
 
+  const clientPath = '@orion-studios/payload-admin-components/client'
+
   return {
     admin: {
       css: cssPath,
       components: {
+        ...(studioEnabled
+          ? {
+              Nav: {
+                exportName: 'AdminStudioNav',
+                path: clientPath,
+                clientProps: {
+                  brandName,
+                },
+              },
+            }
+          : {}),
         graphics: {
           Logo: {
             exportName: 'Logo',
-            path: '@orion-studios/payload-admin-components/client',
+            path: clientPath,
           },
           Icon: {
             exportName: 'Icon',
-            path: '@orion-studios/payload-admin-components/client',
+            path: clientPath,
           },
         },
         views: {
           dashboard: {
             Component: {
-              exportName: 'Dashboard',
-              path: '@orion-studios/payload-admin-components/client',
+              exportName: studioEnabled ? 'AdminStudioDashboard' : 'Dashboard',
+              path: clientPath,
             },
           },
+          ...(studioEnabled
+            ? {
+                studioPages: {
+                  path: '/pages' as const,
+                  Component: {
+                    exportName: 'AdminStudioPagesListView',
+                    path: clientPath,
+                    clientProps: {
+                      pagesCollectionSlug,
+                    },
+                  },
+                },
+                studioPageEdit: {
+                  path: '/pages/:id' as const,
+                  Component: {
+                    exportName: 'AdminStudioPageEditView',
+                    path: clientPath,
+                    clientProps: {
+                      builderBasePath,
+                    },
+                  },
+                },
+                studioGlobals: {
+                  path: '/globals' as const,
+                  Component: {
+                    exportName: 'AdminStudioGlobalsView',
+                    path: clientPath,
+                    clientProps: {
+                      globals,
+                    },
+                  },
+                },
+                studioMedia: {
+                  path: '/media' as const,
+                  Component: {
+                    exportName: 'AdminStudioMediaView',
+                    path: clientPath,
+                    clientProps: {
+                      mediaCollectionSlug,
+                    },
+                  },
+                },
+                studioTools: {
+                  path: '/tools' as const,
+                  Component: {
+                    exportName: 'AdminStudioToolsView',
+                    path: clientPath,
+                    clientProps: {
+                      mediaCollectionSlug,
+                      pagesCollectionSlug,
+                    },
+                  },
+                },
+              }
+            : {}),
         },
         providers: [
           {
             exportName: 'ThemeProvider',
-            path: '@orion-studios/payload-admin-components/client',
+            path: clientPath,
             clientProps: {
               defaultTheme,
             },
@@ -98,7 +197,7 @@ export function configureAdmin(config: AdminConfig) {
         afterNavLinks: [
           {
             exportName: 'ThemeSwitcher',
-            path: '@orion-studios/payload-admin-components/client',
+            path: clientPath,
             clientProps: {
               defaultTheme,
             },
@@ -118,7 +217,11 @@ export function configureAdmin(config: AdminConfig) {
     wrapUsers(usersCollection: CollectionConfig): CollectionConfig {
       const existingFields = usersCollection.fields || []
       const hasThemePreference = existingFields.some(
-        (field) => typeof field === 'object' && field !== null && 'name' in field && field.name === 'themePreference',
+        (field) =>
+          typeof field === 'object' &&
+          field !== null &&
+          'name' in field &&
+          field.name === 'themePreference',
       )
 
       return {