chore(ui): extracts collection and global component maps into standalone files

packages/ui/src/providers/ComponentMap/buildComponentMap/collections.tsx

@@ -0,0 +1,132 @@
+import type {
+  AdminViewProps,
+  EditViewProps,
+  SanitizedCollectionConfig,
+  SanitizedConfig,
+} from 'payload/types'
+
+import React from 'react'
+
+import type { CollectionComponentMap } from './types.js'
+
+import { mapActions } from './actions.js'
+import { mapFields } from './fields.js'
+
+export const mapCollections = ({
+  DefaultEditView,
+  DefaultListView,
+  collections,
+  config,
+  readOnly: readOnlyOverride,
+}: {
+  DefaultEditView: React.FC<EditViewProps>
+  DefaultListView: React.FC<AdminViewProps>
+  collections: SanitizedCollectionConfig[]
+  config: SanitizedConfig
+  readOnly?: boolean
+}): {
+  [key: SanitizedCollectionConfig['slug']]: CollectionComponentMap
+} =>
+  collections.reduce((acc, collectionConfig) => {
+    const { slug, fields } = collectionConfig
+
+    const internalCollections = ['payload-preferences', 'payload-migrations']
+
+    if (internalCollections.includes(slug)) {
+      return acc
+    }
+
+    const editViewFromConfig = collectionConfig?.admin?.components?.views?.Edit
+
+    const listViewFromConfig = collectionConfig?.admin?.components?.views?.List
+
+    const CustomEditView =
+      typeof editViewFromConfig === 'function'
+        ? editViewFromConfig
+        : typeof editViewFromConfig === 'object' && typeof editViewFromConfig.Default === 'function'
+          ? editViewFromConfig.Default
+          : typeof editViewFromConfig?.Default === 'object' &&
+              'Component' in editViewFromConfig.Default &&
+              typeof editViewFromConfig.Default.Component === 'function'
+            ? (editViewFromConfig.Default.Component as React.FC<EditViewProps>)
+            : undefined
+
+    const CustomListView =
+      typeof listViewFromConfig === 'function'
+        ? listViewFromConfig
+        : typeof listViewFromConfig === 'object' &&
+            typeof listViewFromConfig.Component === 'function'
+          ? listViewFromConfig.Component
+          : undefined
+
+    const Edit = (CustomEditView as React.FC<EditViewProps>) || DefaultEditView
+
+    const List = CustomListView || DefaultListView
+
+    const beforeList = collectionConfig?.admin?.components?.BeforeList
+
+    const beforeListTable = collectionConfig?.admin?.components?.BeforeListTable
+
+    const afterList = collectionConfig?.admin?.components?.AfterList
+
+    const afterListTable = collectionConfig?.admin?.components?.AfterListTable
+
+    const SaveButtonComponent = collectionConfig?.admin?.components?.edit?.SaveButton
+    const SaveButton = SaveButtonComponent ? <SaveButtonComponent /> : undefined
+
+    const SaveDraftButtonComponent = collectionConfig?.admin?.components?.edit?.SaveDraftButton
+    const SaveDraftButton = SaveDraftButtonComponent ? <SaveDraftButtonComponent /> : undefined
+
+    const PreviewButtonComponent = collectionConfig?.admin?.components?.edit?.PreviewButton
+    const PreviewButton = PreviewButtonComponent ? <PreviewButtonComponent /> : undefined
+
+    const PublishButtonComponent = collectionConfig?.admin?.components?.edit?.PublishButton
+    const PublishButton = PublishButtonComponent ? <PublishButtonComponent /> : undefined
+
+    const BeforeList =
+      (beforeList && Array.isArray(beforeList) && beforeList?.map((Component) => <Component />)) ||
+      null
+
+    const BeforeListTable =
+      (beforeListTable &&
+        Array.isArray(beforeListTable) &&
+        beforeListTable?.map((Component) => <Component />)) ||
+      null
+
+    const AfterList =
+      (afterList && Array.isArray(afterList) && afterList?.map((Component) => <Component />)) ||
+      null
+
+    const AfterListTable =
+      (afterListTable &&
+        Array.isArray(afterListTable) &&
+        afterListTable?.map((Component) => <Component />)) ||
+      null
+
+    const componentMap: CollectionComponentMap = {
+      AfterList,
+      AfterListTable,
+      BeforeList,
+      BeforeListTable,
+      Edit: <Edit collectionSlug={collectionConfig.slug} />,
+      List: <List collectionSlug={collectionConfig.slug} />,
+      PreviewButton,
+      PublishButton,
+      SaveButton,
+      SaveDraftButton,
+      actionsMap: mapActions({
+        collectionConfig,
+      }),
+      fieldMap: mapFields({
+        config,
+        fieldSchema: fields,
+        readOnly: readOnlyOverride,
+      }),
+      isPreviewEnabled: !!collectionConfig?.admin?.preview,
+    }
+
+    return {
+      ...acc,
+      [slug]: componentMap,
+    }
+  }, {})

packages/ui/src/providers/ComponentMap/buildComponentMap/globals.tsx

@@ -0,0 +1,74 @@
+import type { EditViewProps, SanitizedConfig, SanitizedGlobalConfig } from 'payload/types'
+
+import React from 'react'
+
+import type { GlobalComponentMap } from './types.js'
+
+import { mapActions } from './actions.js'
+import { mapFields } from './fields.js'
+
+export const mapGlobals = ({
+  DefaultEditView,
+  config,
+  globals,
+  readOnly: readOnlyOverride,
+}: {
+  DefaultEditView: React.FC<EditViewProps>
+  config: SanitizedConfig
+  globals: SanitizedGlobalConfig[]
+  readOnly?: boolean
+}): {
+  [key: SanitizedGlobalConfig['slug']]: GlobalComponentMap
+} =>
+  globals.reduce((acc, globalConfig) => {
+    const { slug, fields } = globalConfig
+
+    const editViewFromConfig = globalConfig?.admin?.components?.views?.Edit
+
+    const SaveButton = globalConfig?.admin?.components?.elements?.SaveButton
+    const SaveButtonComponent = SaveButton ? <SaveButton /> : undefined
+
+    const SaveDraftButton = globalConfig?.admin?.components?.elements?.SaveDraftButton
+    const SaveDraftButtonComponent = SaveDraftButton ? <SaveDraftButton /> : undefined
+
+    const PreviewButton = globalConfig?.admin?.components?.elements?.PreviewButton
+    const PreviewButtonComponent = PreviewButton ? <PreviewButton /> : undefined
+
+    const PublishButton = globalConfig?.admin?.components?.elements?.PublishButton
+    const PublishButtonComponent = PublishButton ? <PublishButton /> : undefined
+
+    const CustomEditView =
+      typeof editViewFromConfig === 'function'
+        ? editViewFromConfig
+        : typeof editViewFromConfig === 'object' && typeof editViewFromConfig.Default === 'function'
+          ? editViewFromConfig.Default
+          : typeof editViewFromConfig?.Default === 'object' &&
+              'Component' in editViewFromConfig.Default &&
+              typeof editViewFromConfig.Default.Component === 'function'
+            ? editViewFromConfig.Default.Component
+            : undefined
+
+    const Edit = (CustomEditView as React.FC<EditViewProps>) || DefaultEditView
+
+    const componentMap: GlobalComponentMap = {
+      Edit: <Edit globalSlug={globalConfig.slug} />,
+      PreviewButton: PreviewButtonComponent,
+      PublishButton: PublishButtonComponent,
+      SaveButton: SaveButtonComponent,
+      SaveDraftButton: SaveDraftButtonComponent,
+      actionsMap: mapActions({
+        globalConfig,
+      }),
+      fieldMap: mapFields({
+        config,
+        fieldSchema: fields,
+        readOnly: readOnlyOverride,
+      }),
+      isPreviewEnabled: !!globalConfig?.admin?.preview,
+    }
+
+    return {
+      ...acc,
+      [slug]: componentMap,
+    }
+  }, {})

packages/ui/src/providers/ComponentMap/buildComponentMap/index.tsx

@@ -1,15 +1,15 @@
-import type { EditViewProps, SanitizedConfig } from 'payload/types'
+import type { AdminViewProps, EditViewProps, SanitizedConfig } from 'payload/types'
 
 import React from 'react'
 
-import type { CollectionComponentMap, ComponentMap, GlobalComponentMap } from './types.js'
+import type { ComponentMap } from './types.js'
 
-import { mapActions } from './mapActions.js'
-import { mapFields } from './mapFields.js'
+import { mapCollections } from './collections.js'
+import { mapGlobals } from './globals.js'
 
 export const buildComponentMap = (args: {
   DefaultEditView: React.FC<EditViewProps>
-  DefaultListView: React.FC<EditViewProps>
+  DefaultListView: React.FC<AdminViewProps>
   children: React.ReactNode
   config: SanitizedConfig
   readOnly?: boolean
@@ -17,166 +17,22 @@ export const buildComponentMap = (args: {
   componentMap: ComponentMap
   wrappedChildren: React.ReactNode
 } => {
-  const { DefaultEditView, DefaultListView, children, config, readOnly: readOnlyOverride } = args
+  const { DefaultEditView, DefaultListView, children, config, readOnly } = args
 
-  // Collections
-  const collections = config.collections.reduce((acc, collectionConfig) => {
-    const { slug, fields } = collectionConfig
+  const collections = mapCollections({
+    DefaultEditView,
+    DefaultListView,
+    collections: config.collections,
+    config,
+    readOnly,
+  })
 
-    const internalCollections = ['payload-preferences', 'payload-migrations']
-
-    if (internalCollections.includes(slug)) {
-      return acc
-    }
-
-    const editViewFromConfig = collectionConfig?.admin?.components?.views?.Edit
-
-    const listViewFromConfig = collectionConfig?.admin?.components?.views?.List
-
-    const CustomEditView =
-      typeof editViewFromConfig === 'function'
-        ? editViewFromConfig
-        : typeof editViewFromConfig === 'object' && typeof editViewFromConfig.Default === 'function'
-          ? editViewFromConfig.Default
-          : typeof editViewFromConfig?.Default === 'object' &&
-              'Component' in editViewFromConfig.Default &&
-              typeof editViewFromConfig.Default.Component === 'function'
-            ? (editViewFromConfig.Default.Component as React.FC<EditViewProps>)
-            : undefined
-
-    const CustomListView =
-      typeof listViewFromConfig === 'function'
-        ? listViewFromConfig
-        : typeof listViewFromConfig === 'object' &&
-            typeof listViewFromConfig.Component === 'function'
-          ? listViewFromConfig.Component
-          : undefined
-
-    const Edit = (CustomEditView as React.FC<EditViewProps>) || DefaultEditView
-
-    const List = CustomListView || DefaultListView
-
-    const beforeList = collectionConfig?.admin?.components?.BeforeList
-
-    const beforeListTable = collectionConfig?.admin?.components?.BeforeListTable
-
-    const afterList = collectionConfig?.admin?.components?.AfterList
-
-    const afterListTable = collectionConfig?.admin?.components?.AfterListTable
-
-    const SaveButtonComponent = collectionConfig?.admin?.components?.edit?.SaveButton
-    const SaveButton = SaveButtonComponent ? <SaveButtonComponent /> : undefined
-
-    const SaveDraftButtonComponent = collectionConfig?.admin?.components?.edit?.SaveDraftButton
-    const SaveDraftButton = SaveDraftButtonComponent ? <SaveDraftButtonComponent /> : undefined
-
-    const PreviewButtonComponent = collectionConfig?.admin?.components?.edit?.PreviewButton
-    const PreviewButton = PreviewButtonComponent ? <PreviewButtonComponent /> : undefined
-
-    const PublishButtonComponent = collectionConfig?.admin?.components?.edit?.PublishButton
-    const PublishButton = PublishButtonComponent ? <PublishButtonComponent /> : undefined
-
-    const BeforeList =
-      (beforeList && Array.isArray(beforeList) && beforeList?.map((Component) => <Component />)) ||
-      null
-
-    const BeforeListTable =
-      (beforeListTable &&
-        Array.isArray(beforeListTable) &&
-        beforeListTable?.map((Component) => <Component />)) ||
-      null
-
-    const AfterList =
-      (afterList && Array.isArray(afterList) && afterList?.map((Component) => <Component />)) ||
-      null
-
-    const AfterListTable =
-      (afterListTable &&
-        Array.isArray(afterListTable) &&
-        afterListTable?.map((Component) => <Component />)) ||
-      null
-
-    const componentMap: CollectionComponentMap = {
-      AfterList,
-      AfterListTable,
-      BeforeList,
-      BeforeListTable,
-      Edit: <Edit collectionSlug={collectionConfig.slug} />,
-      List: <List collectionSlug={collectionConfig.slug} />,
-      PreviewButton,
-      PublishButton,
-      SaveButton,
-      SaveDraftButton,
-      actionsMap: mapActions({
-        collectionConfig,
-      }),
-      fieldMap: mapFields({
-        config,
-        fieldSchema: fields,
-        readOnly: readOnlyOverride,
-      }),
-      isPreviewEnabled: !!collectionConfig?.admin?.preview,
-    }
-
-    return {
-      ...acc,
-      [slug]: componentMap,
-    }
-  }, {})
-
-  // Globals
-  const globals = config.globals.reduce((acc, globalConfig) => {
-    const { slug, fields } = globalConfig
-
-    const editViewFromConfig = globalConfig?.admin?.components?.views?.Edit
-
-    const SaveButton = globalConfig?.admin?.components?.elements?.SaveButton
-    const SaveButtonComponent = SaveButton ? <SaveButton /> : undefined
-
-    const SaveDraftButton = globalConfig?.admin?.components?.elements?.SaveDraftButton
-    const SaveDraftButtonComponent = SaveDraftButton ? <SaveDraftButton /> : undefined
-
-    const PreviewButton = globalConfig?.admin?.components?.elements?.PreviewButton
-    const PreviewButtonComponent = PreviewButton ? <PreviewButton /> : undefined
-
-    const PublishButton = globalConfig?.admin?.components?.elements?.PublishButton
-    const PublishButtonComponent = PublishButton ? <PublishButton /> : undefined
-
-    const CustomEditView =
-      typeof editViewFromConfig === 'function'
-        ? editViewFromConfig
-        : typeof editViewFromConfig === 'object' && typeof editViewFromConfig.Default === 'function'
-          ? editViewFromConfig.Default
-          : typeof editViewFromConfig?.Default === 'object' &&
-              'Component' in editViewFromConfig.Default &&
-              typeof editViewFromConfig.Default.Component === 'function'
-            ? editViewFromConfig.Default.Component
-            : undefined
-
-    const Edit = (CustomEditView as React.FC<EditViewProps>) || DefaultEditView
-
-    const componentMap: GlobalComponentMap = {
-      Edit: <Edit globalSlug={globalConfig.slug} />,
-      PreviewButton: PreviewButtonComponent,
-      PublishButton: PublishButtonComponent,
-      SaveButton: SaveButtonComponent,
-      SaveDraftButton: SaveDraftButtonComponent,
-      actionsMap: mapActions({
-        globalConfig,
-      }),
-      fieldMap: mapFields({
-        config,
-        fieldSchema: fields,
-        readOnly: readOnlyOverride,
-      }),
-      isPreviewEnabled: !!globalConfig?.admin?.preview,
-    }
-
-    return {
-      ...acc,
-      [slug]: componentMap,
-    }
-  }, {})
+  const globals = mapGlobals({
+    DefaultEditView,
+    config,
+    globals: config.globals,
+    readOnly,
+  })
 
   const NestProviders = ({ children, providers }) => {
     const Component = providers[0]

packages/ui/src/utilities/buildComponentMap.ts

@@ -1,3 +1,3 @@
+export { mapFields } from '../providers/ComponentMap/buildComponentMap/fields.js'
 export { buildComponentMap } from '../providers/ComponentMap/buildComponentMap/index.js'
-export { mapFields } from '../providers/ComponentMap/buildComponentMap/mapFields.js'
 export type * from '../providers/ComponentMap/buildComponentMap/types.js'