chore: work on e2e's

test/access-control/e2e.spec.ts

@@ -1,16 +1,17 @@
 import type { Page } from '@playwright/test'
-import type { Payload } from 'payload'
 
 import { expect, test } from '@playwright/test'
+import path from 'path'
 import { fileURLToPath } from 'url'
 
-import type { ReadOnlyCollection, RestrictedVersion } from './payload-types'
+import type { Payload } from '../../packages/payload/src/types/index.js'
+import type { ReadOnlyCollection, RestrictedVersion } from './payload-types.js'
 
-import wait from '../../packages/payload/src/utilities/wait'
-import { exactText, initPageConsoleErrorCatch, openDocControls, openNav } from '../helpers'
-import { AdminUrlUtil } from '../helpers/adminUrlUtil'
-import { initPayloadE2E } from '../helpers/configHelpers'
-import config from './config'
+import wait from '../../packages/payload/src/utilities/wait.js'
+import { exactText, initPageConsoleErrorCatch, openDocControls, openNav } from '../helpers.js'
+import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
+import { initPayloadE2E } from '../helpers/configHelpers.js'
+import config from './config.js'
 import {
   docLevelAccessSlug,
   readOnlySlug,
@@ -18,7 +19,7 @@ import {
   restrictedVersionsSlug,
   slug,
   unrestrictedSlug,
-} from './shared'
+} from './shared.js'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 

test/access-control/int.spec.ts

@@ -1,12 +1,11 @@
-import type { Payload } from '../../packages/payload/src'
-import type { PayloadRequest } from '../../packages/payload/src/types'
-import type { Post, RelyOnRequestHeader, Restricted } from './payload-types'
+import type { Payload, PayloadRequest } from '../../packages/payload/src/types/index.js'
+import type { Post, RelyOnRequestHeader, Restricted } from './payload-types.js'
 
-import { getPayload } from '../../packages/payload/src'
-import { Forbidden } from '../../packages/payload/src/errors'
-import { startMemoryDB } from '../startMemoryDB'
-import configPromise from './config'
-import { requestHeaders } from './config'
+import { Forbidden } from '../../packages/payload/src/errors/index.js'
+import { getPayload } from '../../packages/payload/src/index.js'
+import { startMemoryDB } from '../startMemoryDB.js'
+import configPromise from './config.js'
+import { requestHeaders } from './config.js'
 import {
   firstArrayText,
   hiddenAccessSlug,
@@ -17,7 +16,7 @@ import {
   secondArrayText,
   siblingDataSlug,
   slug,
-} from './shared'
+} from './shared.js'
 
 let payload: Payload
 

test/admin/collections/CustomIdRow.ts

@@ -1,6 +1,4 @@
-import type { CollectionConfig } from 'payload/dist/collections/config/types'
-
-import { customIdCollectionSlug } from '../slugs'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
 export const CustomIdRow: CollectionConfig = {
   slug: 'customIdRow',

test/admin/collections/CustomIdTab.ts

@@ -1,6 +1,4 @@
-import type { CollectionConfig } from 'payload/dist/collections/config/types'
-
-import { customIdCollectionSlug } from '../slugs'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
 export const CustomIdTab: CollectionConfig = {
   slug: 'customIdTab',

test/admin/collections/CustomViews1.ts

@@ -1,7 +1,7 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import { CustomEditView } from '../components/views/CustomEdit'
-import { customViews1CollectionSlug } from '../slugs'
+import { CustomEditView } from '../components/views/CustomEdit/index.js'
+import { customViews1CollectionSlug } from '../slugs.js'
 
 export const CustomViews1: CollectionConfig = {
   slug: customViews1CollectionSlug,

test/admin/collections/CustomViews2.ts

@@ -1,17 +1,17 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import CustomTabComponent from '../components/CustomTabComponent'
-import CustomTabView from '../components/views/CustomTab'
-import CustomTabView2 from '../components/views/CustomTab2'
-import CustomNestedTabView from '../components/views/CustomTabNested'
-import CustomVersionsView from '../components/views/CustomVersions'
+import { CustomTabComponent } from '../components/CustomTabComponent/index.js'
+import { CustomTabView } from '../components/views/CustomTab/index.js'
+import { CustomTabView2 } from '../components/views/CustomTab2/index.js'
+import { CustomNestedTabView } from '../components/views/CustomTabNested/index.js'
+import { CustomVersionsView } from '../components/views/CustomVersions/index.js'
 import {
   customEditLabel,
   customNestedTabViewPath,
   customTabLabel,
   customTabViewPath,
-} from '../shared'
-import { customViews2CollectionSlug } from '../slugs'
+} from '../shared.js'
+import { customViews2CollectionSlug } from '../slugs.js'
 
 export const CustomViews2: CollectionConfig = {
   slug: customViews2CollectionSlug,

test/admin/collections/Geo.ts

@@ -1,9 +1,9 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import CollectionAPIButton from '../components/CollectionAPIButton'
-import CollectionEditButton from '../components/CollectionEditButton'
-import CollectionListButton from '../components/CollectionListButton'
-import { geoCollectionSlug } from '../slugs'
+import { CollectionAPIButton } from '../components/CollectionAPIButton/index.js'
+import { CollectionEditButton } from '../components/CollectionEditButton/index.js'
+import { CollectionListButton } from '../components/CollectionListButton/index.js'
+import { geoCollectionSlug } from '../slugs.js'
 
 export const Geo: CollectionConfig = {
   slug: geoCollectionSlug,

test/admin/collections/Group1A.ts

@@ -1,6 +1,6 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import { group1Collection1Slug } from '../slugs'
+import { group1Collection1Slug } from '../slugs.js'
 
 export const CollectionGroup1A: CollectionConfig = {
   slug: group1Collection1Slug,

test/admin/collections/Group1B.ts

@@ -1,6 +1,6 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import { group1Collection2Slug } from '../slugs'
+import { group1Collection2Slug } from '../slugs.js'
 
 export const CollectionGroup1B: CollectionConfig = {
   slug: group1Collection2Slug,

test/admin/collections/Group2A.ts

@@ -1,6 +1,6 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import { group2Collection1Slug } from '../slugs'
+import { group2Collection1Slug } from '../slugs.js'
 
 export const CollectionGroup2A: CollectionConfig = {
   slug: group2Collection1Slug,

test/admin/collections/Group2B.ts

@@ -1,6 +1,6 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import { group2Collection2Slug } from '../slugs'
+import { group2Collection2Slug } from '../slugs.js'
 
 export const CollectionGroup2B: CollectionConfig = {
   slug: group2Collection2Slug,

test/admin/collections/Hidden.ts

@@ -1,6 +1,6 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import { hiddenCollectionSlug } from '../slugs'
+import { hiddenCollectionSlug } from '../slugs.js'
 
 export const CollectionHidden: CollectionConfig = {
   slug: hiddenCollectionSlug,

test/admin/collections/NoApiView.ts

@@ -1,6 +1,6 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import { noApiViewCollectionSlug } from '../slugs'
+import { noApiViewCollectionSlug } from '../slugs.js'
 
 export const CollectionNoApiView: CollectionConfig = {
   slug: noApiViewCollectionSlug,

test/admin/collections/Posts.ts

@@ -1,11 +1,14 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import { slateEditor } from '../../../packages/richtext-slate/src'
-import DemoUIFieldCell from '../components/DemoUIField/Cell'
-import DemoUIFieldField from '../components/DemoUIField/Field'
-import { FieldDescriptionComponent, FieldDescriptionFunction } from '../components/FieldDescription'
-import { slugPluralLabel, slugSingularLabel } from '../shared'
-import { postsCollectionSlug } from '../slugs'
+import { slateEditor } from '../../../packages/richtext-slate/src/index.js'
+import { DemoUIFieldCell } from '../components/DemoUIField/Cell.js'
+import { DemoUIField } from '../components/DemoUIField/Field.js'
+import {
+  FieldDescriptionComponent,
+  FieldDescriptionFunction,
+} from '../components/FieldDescription/index.js'
+import { slugPluralLabel, slugSingularLabel } from '../shared.js'
+import { postsCollectionSlug } from '../slugs.js'
 
 export const Posts: CollectionConfig = {
   slug: postsCollectionSlug,
@@ -58,7 +61,7 @@ export const Posts: CollectionConfig = {
               label: 'Demo UI Field',
               admin: {
                 components: {
-                  Field: DemoUIFieldField,
+                  Field: DemoUIField,
                   Cell: DemoUIFieldCell,
                 },
               },

test/admin/collections/Users.ts

@@ -1,6 +1,6 @@
-import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types'
+import type { CollectionConfig } from '../../../packages/payload/src/collections/config/types.js'
 
-import { usersCollectionSlug } from '../slugs'
+import { usersCollectionSlug } from '../slugs.js'
 
 export const Users: CollectionConfig = {
   slug: usersCollectionSlug,

test/admin/components/AdminButton/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const baseClass = 'admin-button'
 
-const AdminButton: React.FC = () => {
+export const AdminButton: React.FC = () => {
   return (
     <div
       className={baseClass}
@@ -18,5 +18,3 @@ const AdminButton: React.FC = () => {
     </div>
   )
 }
-
-export default AdminButton

test/admin/components/AfterDashboard/index.tsx

@@ -4,7 +4,7 @@ import './index.scss'
 
 const baseClass = 'after-dashboard'
 
-const AfterDashboard: React.FC = () => {
+export const AfterDashboard: React.FC = () => {
   return (
     <div className={baseClass}>
       <h4>Test Config</h4>
@@ -15,5 +15,3 @@ const AfterDashboard: React.FC = () => {
     </div>
   )
 }
-
-export default AfterDashboard

test/admin/components/AfterNavLinks/index.tsx

@@ -4,14 +4,14 @@ import React from 'react'
 import { NavLink } from 'react-router-dom'
 
 // As this is the demo project, we import our dependencies from the `src` directory.
-import { useConfig } from '../../../../packages/ui/src/providers/Config'
+import { useConfig } from '../../../../packages/ui/src/providers/Config/index.js'
 
 // In your projects, you can import as follows:
 // import { useConfig } from 'payload/components/utilities';
 
 const baseClass = 'after-nav-links'
 
-const AfterNavLinks: React.FC = () => {
+export const AfterNavLinks: React.FC = () => {
   const {
     routes: { admin: adminRoute },
   } = useConfig()
@@ -50,5 +50,3 @@ const AfterNavLinks: React.FC = () => {
     </div>
   )
 }
-
-export default AfterNavLinks

test/admin/components/BeforeLogin/index.tsx

@@ -2,9 +2,9 @@
 
 import React from 'react'
 
-import { useTranslation } from '../../../../packages/ui/src/providers/Translation'
+import { useTranslation } from '../../../../packages/ui/src/providers/Translation/index.js'
 
-const BeforeLogin: React.FC = () => {
+export const BeforeLogin: React.FC = () => {
   const translation = useTranslation()
   return (
     <div>
@@ -20,5 +20,3 @@ const BeforeLogin: React.FC = () => {
     </div>
   )
 }
-
-export default BeforeLogin

test/admin/components/CollectionAPIButton/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const baseClass = 'collection-api-button'
 
-const CollectionAPIButton: React.FC = () => {
+export const CollectionAPIButton: React.FC = () => {
   return (
     <div
       className={baseClass}
@@ -18,5 +18,3 @@ const CollectionAPIButton: React.FC = () => {
     </div>
   )
 }
-
-export default CollectionAPIButton

test/admin/components/CollectionEditButton/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const baseClass = 'collection-edit-button'
 
-const CollectionEditButton: React.FC = () => {
+export const CollectionEditButton: React.FC = () => {
   return (
     <div
       className={baseClass}
@@ -18,5 +18,3 @@ const CollectionEditButton: React.FC = () => {
     </div>
   )
 }
-
-export default CollectionEditButton

test/admin/components/CollectionListButton/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const baseClass = 'collection-list-button'
 
-const CollectionListButton: React.FC = () => {
+export const CollectionListButton: React.FC = () => {
   return (
     <div
       className={baseClass}
@@ -18,5 +18,3 @@ const CollectionListButton: React.FC = () => {
     </div>
   )
 }
-
-export default CollectionListButton

test/admin/components/CustomProvider/index.tsx

@@ -9,7 +9,7 @@ type CustomContext = {
 
 const Context = createContext({} as CustomContext)
 
-const CustomProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const CustomProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [getCustom, setCustom] = useState({})
 
   const value = {
@@ -22,6 +22,4 @@ const CustomProvider: React.FC<{ children: React.ReactNode }> = ({ children }) =
   return <Context.Provider value={value}>{children}</Context.Provider>
 }
 
-export default CustomProvider
-
 export const useCustom = () => useContext(Context)

test/admin/components/CustomTabComponent/index.tsx

@@ -3,11 +3,11 @@
 import React from 'react'
 import { Link, useRouteMatch } from 'react-router-dom'
 
-import type { DocumentTabComponent } from '../../../../packages/payload/src/admin/types'
+import type { DocumentTabComponent } from '../../../../packages/payload/src/admin/types.js'
 
 import './index.scss'
 
-const CustomTabComponent: DocumentTabComponent = (props) => {
+export const CustomTabComponent: DocumentTabComponent = (props) => {
   const { path } = props
   const match = useRouteMatch()
 
@@ -17,5 +17,3 @@ const CustomTabComponent: DocumentTabComponent = (props) => {
     </li>
   )
 }
-
-export default CustomTabComponent

test/admin/components/DemoUIField/Cell.tsx

@@ -1,5 +1,3 @@
 import React from 'react'
 
-const DemoUIFieldCell: React.FC = () => <p>Demo UI Field Cell</p>
-
-export default DemoUIFieldCell
+export const DemoUIFieldCell: React.FC = () => <p>Demo UI Field Cell</p>

test/admin/components/DemoUIField/Field.tsx

@@ -1,5 +1,3 @@
 import React from 'react'
 
-const DemoUIField: React.FC = () => <p className="field-type">Demo UI Field</p>
-
-export default DemoUIField
+export const DemoUIField: React.FC = () => <p className="field-type">Demo UI Field</p>

test/admin/components/FieldDescription/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import type {
   DescriptionComponent,
   DescriptionFunction,
-} from '../../../../packages/payload/src/admin/types'
+} from '../../../../packages/payload/src/admin/types.js'
 
 export const FieldDescriptionComponent: DescriptionComponent<string> = ({ path, value }) => {
   return (

test/admin/components/GlobalAPIButton/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const baseClass = 'global-api-button'
 
-const GlobalAPIButton: React.FC = () => {
+export const GlobalAPIButton: React.FC = () => {
   return (
     <div
       className={baseClass}
@@ -18,5 +18,3 @@ const GlobalAPIButton: React.FC = () => {
     </div>
   )
 }
-
-export default GlobalAPIButton

test/admin/components/GlobalEditButton/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 const baseClass = 'global-edit-button'
 
-const GlobalEditButton: React.FC = () => {
+export const GlobalEditButton: React.FC = () => {
   return (
     <div
       className={baseClass}
@@ -18,5 +18,3 @@ const GlobalEditButton: React.FC = () => {
     </div>
   )
 }
-
-export default GlobalEditButton

test/admin/components/Logout/index.tsx

@@ -2,10 +2,10 @@
 
 import React from 'react'
 
-import { LogOut } from '../../../../packages/ui/src/icons/LogOut'
-import { useConfig } from '../../../../packages/ui/src/providers/Config'
+import { LogOut } from '../../../../packages/ui/src/icons/LogOut/index.js'
+import { useConfig } from '../../../../packages/ui/src/providers/Config/index.js'
 
-const Logout: React.FC = () => {
+export const Logout: React.FC = () => {
   const config = useConfig()
   const {
     admin: { logoutRoute },
@@ -17,5 +17,3 @@ const Logout: React.FC = () => {
     </a>
   )
 }
-
-export default Logout

test/admin/components/richText/elements/Button/Button/index.tsx

@@ -1,8 +1,11 @@
-import { Modal, useModal } from '@faceless-ui/modal'
+import facelessUIImport from '@faceless-ui/modal'
+
+const { Modal, useModal } = facelessUIImport
 import React, { Fragment, useCallback } from 'react'
 import { Transforms } from 'slate'
 import { ReactEditor, useSlate } from 'slate-react'
 
+// TODO:
 import Button from '../../../../../../../packages/payload/src/admin/components/elements/Button'
 import Form from '../../../../../../../packages/payload/src/admin/components/forms/Form'
 import reduceFieldsToValues from '../../../../../../../packages/payload/src/admin/components/forms/Form/reduceFieldsToValues'
@@ -24,12 +27,12 @@ const initialFormData = {
 const insertButton = (editor, { href, label, newTab = false, style }: any) => {
   const text = { text: ' ' }
   const button = {
+    type: 'button',
     children: [text],
     href,
     label,
     newTab,
     style,
-    type: 'button',
   }
 
   const nodes = [button, { children: [{ text: '' }] }]
@@ -50,7 +53,7 @@ const insertButton = (editor, { href, label, newTab = false, style }: any) => {
   ReactEditor.focus(editor)
 }
 
-const ToolbarButton: React.FC<{ path: string }> = ({ path }) => {
+export const ToolbarButton: React.FC<{ path: string }> = ({ path }) => {
   const { closeAll, open } = useModal()
   const editor = useSlate()
 
@@ -103,5 +106,3 @@ const ToolbarButton: React.FC<{ path: string }> = ({ path }) => {
     </Fragment>
   )
 }
-
-export default ToolbarButton

test/admin/components/richText/elements/Button/Element/index.tsx

@@ -4,7 +4,7 @@ import './index.scss'
 
 const baseClass = 'rich-text-button'
 
-const ButtonElement: React.FC = ({ attributes, children, element }) => {
+export const ButtonElement: React.FC = ({ attributes, children, element }) => {
   const { label, style = 'primary' } = element
 
   return (
@@ -19,5 +19,3 @@ const ButtonElement: React.FC = ({ attributes, children, element }) => {
     </div>
   )
 }
-
-export default ButtonElement

test/admin/components/richText/elements/Button/index.ts

@@ -1,14 +1,12 @@
-import type { RichTextCustomElement } from '../../../../../../packages/payload/src/fields/config/types'
+import type { RichTextCustomElement } from '../../../../../../packages/richtext-slate/src/types.js'
 
-import Button from './Button'
-import Element from './Element'
-import plugin from './plugin'
+import { ToolbarButton } from './Button/index.js'
+import { ButtonElement } from './Element/index.js'
+import { withButton } from './plugin.js'
 
-const button: RichTextCustomElement = {
+export const button: RichTextCustomElement = {
   name: 'button',
-  Button,
-  Element,
-  plugins: [plugin],
+  Button: ToolbarButton,
+  Element: ButtonElement,
+  plugins: [withButton],
 }
-
-export default button

test/admin/components/richText/elements/Button/plugin.ts

@@ -1,6 +1,6 @@
 import type { Editor } from 'slate'
 
-const withButton = (incomingEditor: Editor): Editor => {
+export const withButton = (incomingEditor: Editor): Editor => {
   const editor = incomingEditor
   const { isVoid } = editor
 
@@ -8,5 +8,3 @@ const withButton = (incomingEditor: Editor): Editor => {
 
   return editor
 }
-
-export default withButton

test/admin/components/richText/leaves/PurpleBackground/index.ts

@@ -1,5 +1,5 @@
-import Button from './Button'
-import Leaf from './Leaf'
+import Button from './Button/index.js'
+import Leaf from './Leaf/index.js'
 
 export default {
   name: 'purple-background',

test/admin/components/views/CustomAccount/index.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react'
 
-import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
+import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
 
-const CustomAccountView: AdminViewComponent = () => {
+export const CustomAccountView: AdminViewComponent = () => {
   return (
     <Fragment>
       <div
@@ -23,5 +23,3 @@ const CustomAccountView: AdminViewComponent = () => {
     </Fragment>
   )
 }
-
-export default CustomAccountView

test/admin/components/views/CustomDashboard/index.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react'
 
-import { AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
+import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
 
-const CustomDashboardView: AdminViewComponent = () => {
+export const CustomDashboardView: AdminViewComponent = () => {
   return (
     <Fragment>
       <div
@@ -23,5 +23,3 @@ const CustomDashboardView: AdminViewComponent = () => {
     </Fragment>
   )
 }
-
-export default CustomDashboardView

test/admin/components/views/CustomDefault/index.tsx

@@ -3,15 +3,15 @@
 import React, { useEffect } from 'react'
 import { Redirect } from 'react-router-dom'
 
-import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
+import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
 
-import { Button } from '../../../../../packages/ui/src/elements/Button'
+import { Button } from '../../../../../packages/ui/src/elements/Button/index.js'
 // TODO(3.0): Meta?
 // import Meta from '../../../../../packages/payload/src/admin/components/utilities/Meta'
-import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav'
-import { useConfig } from '../../../../../packages/ui/src/providers/Config'
+import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav/index.js'
+import { useConfig } from '../../../../../packages/ui/src/providers/Config/index.js'
 // As this is the demo project, we import our dependencies from the `src` directory.
-import { DefaultTemplate } from '../../../../../packages/ui/src/templates/Default'
+import { DefaultTemplate } from '../../../../../packages/ui/src/templates/Default/index.js'
 
 // In your projects, you can import as follows:
 // import { DefaultTemplate } from 'payload/components/templates';
@@ -24,7 +24,7 @@ import './index.scss'
 
 const baseClass = 'custom-default-view'
 
-const CustomDefaultView: AdminViewComponent = ({ canAccessAdmin, user }) => {
+export const CustomDefaultView: AdminViewComponent = ({ canAccessAdmin, user }) => {
   const {
     routes: { admin: adminRoute },
   } = useConfig()
@@ -76,5 +76,3 @@ const CustomDefaultView: AdminViewComponent = ({ canAccessAdmin, user }) => {
     </DefaultTemplate>
   )
 }
-
-export default CustomDefaultView

test/admin/components/views/CustomEdit/index.tsx

@@ -3,10 +3,10 @@
 import React, { Fragment, useEffect } from 'react'
 import { Redirect } from 'react-router-dom'
 
-import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
+import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
 
-import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav'
-import { useConfig } from '../../../../../packages/ui/src/providers/Config'
+import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav/index.js'
+import { useConfig } from '../../../../../packages/ui/src/providers/Config/index.js'
 
 export const CustomEditView: AdminViewComponent = ({
   canAccessAdmin,

test/admin/components/views/CustomEditDefault/index.tsx

@@ -3,12 +3,12 @@
 import React, { Fragment, useEffect } from 'react'
 import { Redirect } from 'react-router-dom'
 
-import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
+import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
 
-import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav'
-import { useConfig } from '../../../../../packages/ui/src/providers/Config'
+import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav/index.js'
+import { useConfig } from '../../../../../packages/ui/src/providers/Config/index.js'
 
-const CustomDefaultEditView: AdminViewComponent = ({
+export const CustomDefaultEditView: AdminViewComponent = ({
   canAccessAdmin,
   // collection,
   //  global,
@@ -73,5 +73,3 @@ const CustomDefaultEditView: AdminViewComponent = ({
     </Fragment>
   )
 }
-
-export default CustomDefaultEditView

test/admin/components/views/CustomMinimal/index.tsx

@@ -2,10 +2,10 @@
 
 import React from 'react'
 
-import { Button } from '../../../../../packages/ui/src/elements/Button'
-import { useConfig } from '../../../../../packages/ui/src/providers/Config'
+import { Button } from '../../../../../packages/ui/src/elements/Button/index.js'
+import { useConfig } from '../../../../../packages/ui/src/providers/Config/index.js'
 // As this is the demo project, we import our dependencies from the `src` directory.
-import { MinimalTemplate } from '../../../../../packages/ui/src/templates/Minimal'
+import { MinimalTemplate } from '../../../../../packages/ui/src/templates/Minimal/index.js'
 
 // In your projects, you can import as follows:
 // import { MinimalTemplate } from 'payload/components/templates';
@@ -16,7 +16,7 @@ import './index.scss'
 
 const baseClass = 'custom-minimal-view'
 
-const CustomMinimalView: React.FC = () => {
+export const CustomMinimalView: React.FC = () => {
   const {
     routes: { admin: adminRoute },
   } = useConfig()
@@ -38,5 +38,3 @@ const CustomMinimalView: React.FC = () => {
     </MinimalTemplate>
   )
 }
-
-export default CustomMinimalView

test/admin/components/views/CustomTab/index.tsx

@@ -2,11 +2,11 @@
 
 import React, { Fragment, useEffect } from 'react'
 
-import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
-import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav'
-import { customTabViewTitle } from '../../../shared'
+import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
+import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav/index.js'
+import { customTabViewTitle } from '../../../shared.js'
 
-const CustomTabView: AdminViewComponent = () => {
+export const CustomTabView: AdminViewComponent = () => {
   const { setStepNav } = useStepNav()
 
   // This effect will only run one time and will allow us
@@ -40,5 +40,3 @@ const CustomTabView: AdminViewComponent = () => {
     </Fragment>
   )
 }
-
-export default CustomTabView

test/admin/components/views/CustomTab2/index.tsx

@@ -2,11 +2,11 @@
 
 import React, { Fragment, useEffect } from 'react'
 
-import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
-import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav'
-import { customTabViewTitle } from '../../../shared'
+import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
+import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav/index.js'
+import { customTabViewTitle } from '../../../shared.js'
 
-const CustomTabView2: AdminViewComponent = () => {
+export const CustomTabView2: AdminViewComponent = () => {
   const { setStepNav } = useStepNav()
 
   // This effect will only run one time and will allow us
@@ -40,5 +40,3 @@ const CustomTabView2: AdminViewComponent = () => {
     </Fragment>
   )
 }
-
-export default CustomTabView2

test/admin/components/views/CustomTabNested/index.tsx

@@ -2,11 +2,11 @@
 
 import React, { Fragment, useEffect } from 'react'
 
-import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
-import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav'
-import { customNestedTabViewTitle } from '../../../shared'
+import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
+import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav/index.js'
+import { customNestedTabViewTitle } from '../../../shared.js'
 
-const CustomNestedTabView: AdminViewComponent = () => {
+export const CustomNestedTabView: AdminViewComponent = () => {
   const { setStepNav } = useStepNav()
 
   // This effect will only run one time and will allow us
@@ -40,5 +40,3 @@ const CustomNestedTabView: AdminViewComponent = () => {
     </Fragment>
   )
 }
-
-export default CustomNestedTabView

test/admin/components/views/CustomVersions/index.tsx

@@ -3,12 +3,12 @@
 import React, { Fragment, useEffect } from 'react'
 import { Redirect } from 'react-router-dom'
 
-import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
+import type { AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
 
-import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav'
-import { useConfig } from '../../../../../packages/ui/src/providers/Config'
+import { useStepNav } from '../../../../../packages/ui/src/elements/StepNav/index.js'
+import { useConfig } from '../../../../../packages/ui/src/providers/Config/index.js'
 
-const CustomVersionsView: AdminViewComponent = ({
+export const CustomVersionsView: AdminViewComponent = ({
   canAccessAdmin,
   // collection,
   // global,
@@ -71,5 +71,3 @@ const CustomVersionsView: AdminViewComponent = ({
     </Fragment>
   )
 }
-
-export default CustomVersionsView

test/admin/components/views/CustomView/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
-import { customViewTitle } from '../../../shared'
+import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
+import { customViewTitle } from '../../../shared.js'
 
-const CustomView: AdminViewComponent = () => {
+export const CustomView: AdminViewComponent = () => {
   return (
     <div
       style={{
@@ -22,5 +22,3 @@ const CustomView: AdminViewComponent = () => {
     </div>
   )
 }
-
-export default CustomView

test/admin/components/views/CustomViewNested/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types'
-import { customNestedViewTitle } from '../../../shared'
+import { type AdminViewComponent } from '../../../../../packages/payload/src/admin/types.js'
+import { customNestedViewTitle } from '../../../shared.js'
 
-const CustomNestedView: AdminViewComponent = () => {
+export const CustomNestedView: AdminViewComponent = () => {
   return (
     <div
       style={{
@@ -22,5 +22,3 @@ const CustomNestedView: AdminViewComponent = () => {
     </div>
   )
 }
-
-export default CustomNestedView

test/admin/config.ts

@@ -1,37 +1,35 @@
-import path from 'path'
-
-import { buildConfigWithDefaults } from '../buildConfigWithDefaults'
-import { CustomIdRow } from './collections/CustomIdRow'
-import { CustomIdTab } from './collections/CustomIdTab'
-import { CustomViews1 } from './collections/CustomViews1'
-import { CustomViews2 } from './collections/CustomViews2'
-import { Geo } from './collections/Geo'
-import { CollectionGroup1A } from './collections/Group1A'
-import { CollectionGroup1B } from './collections/Group1B'
-import { CollectionGroup2A } from './collections/Group2A'
-import { CollectionGroup2B } from './collections/Group2B'
-import { CollectionHidden } from './collections/Hidden'
-import { CollectionNoApiView } from './collections/NoApiView'
-import { Posts } from './collections/Posts'
-import { Users } from './collections/Users'
-import AdminButton from './components/AdminButton'
-import AfterDashboard from './components/AfterDashboard'
-import AfterNavLinks from './components/AfterNavLinks'
-import BeforeLogin from './components/BeforeLogin'
-import Logout from './components/Logout'
-import CustomDefaultView from './components/views/CustomDefault'
-import CustomMinimalRoute from './components/views/CustomMinimal'
-import CustomView from './components/views/CustomView'
-import CustomNestedView from './components/views/CustomViewNested'
-import { CustomGlobalViews1 } from './globals/CustomViews1'
-import { CustomGlobalViews2 } from './globals/CustomViews2'
-import { Global } from './globals/Global'
-import { GlobalGroup1A } from './globals/Group1A'
-import { GlobalGroup1B } from './globals/Group1B'
-import { GlobalHidden } from './globals/Hidden'
-import { GlobalNoApiView } from './globals/NoApiView'
-import { clearAndSeedEverything } from './seed'
-import { customNestedViewPath, customViewPath } from './shared'
+import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
+import { CustomIdRow } from './collections/CustomIdRow.js'
+import { CustomIdTab } from './collections/CustomIdTab.js'
+import { CustomViews1 } from './collections/CustomViews1.js'
+import { CustomViews2 } from './collections/CustomViews2.js'
+import { Geo } from './collections/Geo.js'
+import { CollectionGroup1A } from './collections/Group1A.js'
+import { CollectionGroup1B } from './collections/Group1B.js'
+import { CollectionGroup2A } from './collections/Group2A.js'
+import { CollectionGroup2B } from './collections/Group2B.js'
+import { CollectionHidden } from './collections/Hidden.js'
+import { CollectionNoApiView } from './collections/NoApiView.js'
+import { Posts } from './collections/Posts.js'
+import { Users } from './collections/Users.js'
+import { AdminButton } from './components/AdminButton/index.js'
+import { AfterDashboard } from './components/AfterDashboard/index.js'
+import { AfterNavLinks } from './components/AfterNavLinks/index.js'
+import { BeforeLogin } from './components/BeforeLogin/index.js'
+import { Logout } from './components/Logout/index.js'
+import { CustomDefaultView } from './components/views/CustomDefault/index.js'
+import { CustomMinimalView } from './components/views/CustomMinimal/index.js'
+import { CustomView } from './components/views/CustomView/index.js'
+import { CustomNestedView } from './components/views/CustomViewNested/index.js'
+import { CustomGlobalViews1 } from './globals/CustomViews1.js'
+import { CustomGlobalViews2 } from './globals/CustomViews2.js'
+import { Global } from './globals/Global.js'
+import { GlobalGroup1A } from './globals/Group1A.js'
+import { GlobalGroup1B } from './globals/Group1B.js'
+import { GlobalHidden } from './globals/Hidden.js'
+import { GlobalNoApiView } from './globals/NoApiView.js'
+import { clearAndSeedEverything } from './seed.js'
+import { customNestedViewPath, customViewPath } from './shared.js'
 
 export default buildConfigWithDefaults({
   admin: {
@@ -49,7 +47,7 @@ export default buildConfigWithDefaults({
         // Account: CustomAccountView,
         CustomMinimalView: {
           path: '/custom-minimal-view',
-          Component: CustomMinimalRoute,
+          Component: CustomMinimalView,
         },
         CustomDefaultView: {
           path: '/custom-default-view',

test/admin/e2e.spec.ts

@@ -3,11 +3,11 @@ import type { Page } from '@playwright/test'
 import { expect, test } from '@playwright/test'
 import qs from 'qs'
 
-import type { Payload } from '../../packages/payload/src'
-import type { Geo, Post } from './payload-types'
+import type { Payload } from '../../packages/payload/src/index.js'
+import type { Geo, Post } from './payload-types.js'
 
-import { mapAsync } from '../../packages/payload/src/utilities/mapAsync'
-import wait from '../../packages/payload/src/utilities/wait'
+import { mapAsync } from '../../packages/payload/src/utilities/mapAsync.js'
+import wait from '../../packages/payload/src/utilities/wait.js'
 import {
   checkBreadcrumb,
   checkPageTitle,
@@ -17,11 +17,11 @@ import {
   openNav,
   saveDocAndAssert,
   saveDocHotkeyAndAssert,
-} from '../helpers'
-import { AdminUrlUtil } from '../helpers/adminUrlUtil'
-import { initPayloadE2E } from '../helpers/configHelpers'
-import config from './config'
-import { clearAndSeedEverything } from './seed'
+} from '../helpers.js'
+import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
+import { initPayloadE2E } from '../helpers/configHelpers.js'
+import config from './config.js'
+import { clearAndSeedEverything } from './seed.js'
 import {
   customEditLabel,
   customNestedTabViewPath,
@@ -34,7 +34,7 @@ import {
   customViewPath,
   customViewTitle,
   slugPluralLabel,
-} from './shared'
+} from './shared.js'
 import {
   customIdCollectionId,
   customIdCollectionSlug,
@@ -46,7 +46,7 @@ import {
   noApiViewCollectionSlug,
   noApiViewGlobalSlug,
   postsCollectionSlug,
-} from './slugs'
+} from './slugs.js'
 
 const { beforeAll, beforeEach, describe } = test
 

test/admin/globals/CustomViews1.ts

@@ -1,7 +1,7 @@
-import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types'
+import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types.js'
 
-import { CustomEditView } from '../components/views/CustomEdit'
-import { customGlobalViews1GlobalSlug } from '../slugs'
+import { CustomEditView } from '../components/views/CustomEdit/index.js'
+import { customGlobalViews1GlobalSlug } from '../slugs.js'
 
 export const CustomGlobalViews1: GlobalConfig = {
   slug: customGlobalViews1GlobalSlug,

test/admin/globals/CustomViews2.ts

@@ -1,10 +1,10 @@
-import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types'
+import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types.js'
 
-import CustomTabComponent from '../components/CustomTabComponent'
-import CustomDefaultEditView from '../components/views/CustomEditDefault'
-import CustomView from '../components/views/CustomTab'
-import CustomVersionsView from '../components/views/CustomVersions'
-import { customGlobalViews2GlobalSlug } from '../slugs'
+import { CustomTabComponent } from '../components/CustomTabComponent/index.js'
+import { CustomDefaultEditView } from '../components/views/CustomEditDefault/index.js'
+import { CustomTabView } from '../components/views/CustomTab/index.js'
+import { CustomVersionsView } from '../components/views/CustomVersions/index.js'
+import { customGlobalViews2GlobalSlug } from '../slugs.js'
 
 export const CustomGlobalViews2: GlobalConfig = {
   slug: customGlobalViews2GlobalSlug,
@@ -17,7 +17,7 @@ export const CustomGlobalViews2: GlobalConfig = {
           Versions: CustomVersionsView,
           MyCustomView: {
             path: '/custom-tab-view',
-            Component: CustomView,
+            Component: CustomTabView,
             Tab: {
               label: 'Custom',
               href: '/custom-tab-view',
@@ -25,7 +25,7 @@ export const CustomGlobalViews2: GlobalConfig = {
           },
           MyCustomViewWithCustomTab: {
             path: '/custom-tab-component',
-            Component: CustomView,
+            Component: CustomTabView,
             Tab: CustomTabComponent,
           },
         },

test/admin/globals/Global.ts

@@ -1,8 +1,8 @@
-import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types'
+import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types.js'
 
-import GlobalAPIButton from '../components/GlobalAPIButton'
-import GlobalEditButton from '../components/GlobalEditButton'
-import { globalSlug } from '../slugs'
+import { GlobalAPIButton } from '../components/GlobalAPIButton/index.js'
+import { GlobalEditButton } from '../components/GlobalEditButton/index.js'
+import { globalSlug } from '../slugs.js'
 
 export const Global: GlobalConfig = {
   slug: globalSlug,

test/admin/globals/Group1A.ts

@@ -1,6 +1,6 @@
-import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types'
+import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types.js'
 
-import { group1GlobalSlug } from '../slugs'
+import { group1GlobalSlug } from '../slugs.js'
 
 export const GlobalGroup1A: GlobalConfig = {
   slug: group1GlobalSlug,

test/admin/globals/Group1B.ts

@@ -1,6 +1,6 @@
-import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types'
+import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types.js'
 
-import { group2GlobalSlug } from '../slugs'
+import { group2GlobalSlug } from '../slugs.js'
 
 export const GlobalGroup1B: GlobalConfig = {
   slug: group2GlobalSlug,

test/admin/globals/Hidden.ts

@@ -1,6 +1,6 @@
-import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types'
+import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types.js'
 
-import { hiddenGlobalSlug } from '../slugs'
+import { hiddenGlobalSlug } from '../slugs.js'
 
 export const GlobalHidden: GlobalConfig = {
   slug: hiddenGlobalSlug,

test/admin/globals/NoApiView.ts

@@ -1,6 +1,6 @@
-import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types'
+import type { GlobalConfig } from '../../../packages/payload/src/globals/config/types.js'
 
-import { noApiViewGlobalSlug } from '../slugs'
+import { noApiViewGlobalSlug } from '../slugs.js'
 
 export const GlobalNoApiView: GlobalConfig = {
   slug: noApiViewGlobalSlug,

test/admin/seed.ts

@@ -1,18 +1,18 @@
-import type { Payload } from '../../packages/payload/src'
+import type { Payload } from '../../packages/payload/src/index.js'
 
-import { devUser } from '../credentials'
-import { seedDB } from '../helpers/seed'
+import { devUser } from '../credentials.js'
+import { seedDB } from '../helpers/seed.js'
 import {
   collectionSlugs,
+  customIdCollectionId,
+  customIdCollectionSlug,
   customViews1CollectionSlug,
   customViews2CollectionSlug,
   geoCollectionSlug,
   noApiViewCollectionSlug,
   postsCollectionSlug,
   usersCollectionSlug,
-  customIdCollectionSlug,
-  customIdCollectionId,
-} from './slugs'
+} from './slugs.js'
 
 export async function clearAndSeedEverything(_payload: Payload) {
   return await seedDB({