chore(next): moves edit and list views (#5170)

app/(payload)/admin/(dashboard)/collections/[collection]/[...segments]/layout.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { DocumentLayout } from '@payloadcms/next/layouts/Document'
 import configPromise from 'payload-config'
 

app/(payload)/admin/(dashboard)/globals/[global]/layout.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { DocumentLayout } from '@payloadcms/next/layouts/Document'
 import configPromise from 'payload-config'
 

app/(payload)/admin/(dashboard)/layout.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { AdminLayout } from '@payloadcms/next/layouts/Admin'
 import configPromise from 'payload-config'
 

app/(payload)/admin/create-first-user/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import {
   CreateFirstUser,
   generateMetadata as generateMeta,

app/(payload)/admin/forgot/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import {
   ForgotPassword,
   generateMetadata as generateMeta,

app/(payload)/admin/login/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Login, generateMetadata as generateMeta } from '@payloadcms/next/pages/Login'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/admin/logout-inactivity/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Logout, generateMetadata as generateMeta } from '@payloadcms/next/pages/Logout'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/admin/logout/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Logout, generateMetadata as generateMeta } from '@payloadcms/next/pages/Logout'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/admin/reset/[token]/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import {
   ResetPassword,
   generateMetadata as generateMeta,

app/(payload)/admin/unauthorized/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Unauthorized, generateMetadata as generateMeta } from '@payloadcms/next/pages/Unauthorized'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/admin/verify/[token]/page.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { Verify, generateMetadata as generateMeta } from '@payloadcms/next/pages/Verify'
 import { Metadata } from 'next'
 import config from 'payload-config'

app/(payload)/layout.tsx

@@ -1,5 +1,6 @@
 /* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
 /* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
 import { RootLayout } from '@payloadcms/next/layouts/Root'
 import configPromise from 'payload-config'
 

packages/next/src/layouts/Root/index.tsx

@@ -7,6 +7,9 @@ import { cookies, headers } from 'next/headers'
 import { deepMerge } from 'payload/utilities'
 import React from 'react'
 
+import { DefaultEditView } from '../../pages/Edit/Default'
+import { DefaultListView } from '../../pages/List/Default'
+import { DefaultCell } from '../../pages/List/Default/Cell'
 import { createClientConfig } from '../../utilities/createClientConfig'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage'
 
@@ -42,7 +45,12 @@ export const RootLayout = async ({
     value: language,
   }))
 
-  const componentMap = buildComponentMap({ config })
+  const componentMap = buildComponentMap({
+    DefaultCell,
+    DefaultEditView,
+    DefaultListView,
+    config,
+  })
 
   return (
     <html dir={dir} lang={lang}>

packages/next/src/pages/API/index.client.tsx

@@ -9,7 +9,6 @@ import {
   MinimizeMaximize,
   Number as NumberInput,
   Select,
-  SetDocumentStepNav as SetStepNav,
   useActions,
   useConfig,
   useDocumentInfo,
@@ -21,6 +20,7 @@ import qs from 'qs'
 import * as React from 'react'
 import { toast } from 'react-toastify'
 
+import { SetStepNav } from '../Edit/Default/SetStepNav'
 import { RenderJSON } from './RenderJSON'
 import './index.scss'
 

packages/next/src/pages/API/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 
-import type { ServerSideEditViewProps } from '../../../../ui/src/views/types'
+import type { ServerSideEditViewProps } from '../Edit/types'
 
-import { sanitizedEditViewProps } from '../Edit/sanitizedEditViewProps'
+import { sanitizeEditViewProps } from '../Edit/sanitizeEditViewProps'
 import { APIViewClient } from './index.client'
 
 export const APIView: React.FC<ServerSideEditViewProps> = async (props) => {
-  const clientSideProps = sanitizedEditViewProps(props)
+  const clientSideProps = sanitizeEditViewProps(props)
   return <APIViewClient {...clientSideProps} />
 }

packages/next/src/pages/Document/index.tsx

@@ -21,7 +21,7 @@ import { notFound } from 'next/navigation'
 import queryString from 'qs'
 import React, { Fragment } from 'react'
 
-import type { ServerSideEditViewProps } from '../../../../ui/src/views/types'
+import type { ServerSideEditViewProps } from '../Edit/types'
 
 import { initPage } from '../../utilities/initPage'
 import { getViewsFromConfig } from './getViewsFromConfig'

packages/ui/src/views/Edit/Auth/APIKey.tsx → packages/next/src/pages/Edit/Default/Auth/APIKey.tsx

@@ -1,16 +1,17 @@
 'use client'
+import {
+  CopyToClipboard,
+  GenerateConfirmation,
+  Label,
+  fieldBaseClass,
+  useField,
+  useFormFields,
+  useTranslation,
+} from '@payloadcms/ui'
 import { text } from 'payload/fields/validations'
 import React, { useEffect, useMemo, useState } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 
-import CopyToClipboard from '../../../elements/CopyToClipboard'
-import GenerateConfirmation from '../../../elements/GenerateConfirmation'
-import { useFormFields } from '../../../forms/Form/context'
-import Label from '../../../forms/Label'
-import { fieldBaseClass } from '../../../forms/fields/shared'
-import useField from '../../../forms/useField'
-import { useTranslation } from '../../../providers/Translation'
-
 const path = 'apiKey'
 const baseClass = 'api-key'
 

packages/ui/src/views/Edit/Auth/index.scss → packages/next/src/pages/Edit/Default/Auth/index.scss

@@ -1,7 +1,7 @@
-@import '../../../scss/styles.scss';
+@import '../../../../../../ui/src/scss/styles.scss';
 
 .auth-fields {
-  padding: base(2);
+  padding: calc(var(--base) * 2);
   background: var(--theme-elevation-50);
   display: flex;
   flex-direction: column;
@@ -39,7 +39,7 @@
 }
 
 .field-type.api-key {
-  margin-bottom: $baseline;
+  margin-bottom: var(--base);
 
   input {
     @include formInput;

packages/ui/src/views/Edit/Auth/index.tsx → packages/next/src/pages/Edit/Default/Auth/index.tsx

@@ -1,17 +1,20 @@
 'use client'
+import {
+  Button,
+  Checkbox,
+  ConfirmPassword,
+  Email,
+  Password,
+  useConfig,
+  useFormFields,
+  useFormModified,
+  useTranslation,
+} from '@payloadcms/ui'
 import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 
 import type { Props } from './types'
 
-import { Button } from '../../../elements/Button'
-import { useFormFields, useFormModified } from '../../../forms/Form/context'
-import Checkbox from '../../../forms/fields/Checkbox'
-import ConfirmPassword from '../../../forms/fields/ConfirmPassword'
-import { Email } from '../../../forms/fields/Email'
-import { Password } from '../../../forms/fields/Password'
-import { useConfig } from '../../../providers/Config'
-import { useTranslation } from '../../../providers/Translation'
 import APIKey from './APIKey'
 import './index.scss'
 

packages/ui/src/views/Edit/SetDocumentTitle/index.tsx → packages/next/src/pages/Edit/Default/SetDocumentTitle/index.tsx

@@ -2,13 +2,9 @@
 import type { ClientConfig } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { formatDate, useDocumentInfo, useFormFields, useTranslation } from '@payloadcms/ui'
 import { useEffect } from 'react'
 
-import { formatDate } from '../../..'
-import { useFormFields } from '../../../forms/Form/context'
-import { useDocumentInfo } from '../../../providers/DocumentInfo'
-import { useTranslation } from '../../../providers/Translation'
-
 export const SetDocumentTitle: React.FC<{
   collectionConfig?: ClientConfig['collections'][0]
   config?: ClientConfig

packages/ui/src/views/Edit/SetStepNav/index.tsx → packages/next/src/pages/Edit/Default/SetStepNav/index.tsx

@@ -1,17 +1,17 @@
 'use client'
+import type { StepNavItem } from '@payloadcms/ui'
 import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import {
+  useConfig,
+  useDocumentInfo,
+  useEditDepth,
+  useStepNav,
+  useTranslation,
+} from '@payloadcms/ui'
 import { useEffect } from 'react'
 
-import type { StepNavItem } from '../../../elements/StepNav/types'
-
-import { useStepNav } from '../../../elements/StepNav'
-import { useConfig } from '../../../providers/Config'
-import { useDocumentInfo } from '../../../providers/DocumentInfo'
-import { useEditDepth } from '../../../providers/EditDepth'
-import { useTranslation } from '../../../providers/Translation'
-
 export const SetStepNav: React.FC<{
   collectionSlug?: SanitizedCollectionConfig['slug']
   globalLabel?: SanitizedGlobalConfig['label']

packages/ui/src/views/Edit/index.scss → packages/next/src/pages/Edit/Default/index.scss

@@ -1,4 +1,4 @@
-@import '../../scss/styles.scss';
+@import '../../../../../ui/src/scss/styles.scss';
 
 .collection-edit {
   width: 100%;

packages/ui/src/views/Edit/index.tsx → packages/next/src/pages/Edit/Default/index.tsx

@@ -1,24 +1,26 @@
 'use client'
+import type { FormProps } from '@payloadcms/ui'
+
+import {
+  DocumentControls,
+  DocumentFields,
+  FieldPathProvider,
+  Form,
+  FormLoadingOverlayToggle,
+  LeaveWithoutSaving,
+  OperationProvider,
+  getFormState,
+  useComponentMap,
+  useConfig,
+  useDocumentInfo,
+} from '@payloadcms/ui'
 import React, { Fragment, useCallback } from 'react'
 
-import type { Props as FormProps } from '../../forms/Form/types'
-
+import { Upload } from '../../../../../ui/src/elements/Upload'
 // import { getTranslation } from '@payloadcms/translations'
-import { DocumentControls } from '../../elements/DocumentControls'
-import { DocumentFields } from '../../elements/DocumentFields'
-import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving'
-import { FormLoadingOverlayToggle } from '../../elements/Loading'
-import { FieldPathProvider } from '../../forms/FieldPathProvider'
-import Form from '../../forms/Form'
-import { useComponentMap } from '../../providers/ComponentMapProvider'
-import { useConfig } from '../../providers/Config'
-import { useDocumentInfo } from '../../providers/DocumentInfo'
-import { OperationProvider } from '../../providers/OperationProvider'
-import { getFormState } from '../../utilities/getFormState'
 import Auth from './Auth'
 import { SetDocumentTitle } from './SetDocumentTitle'
 import { SetStepNav } from './SetStepNav'
-import { Upload } from './Upload'
 import './index.scss'
 
 const baseClass = 'collection-edit'

packages/next/src/pages/Edit/index.client.tsx

@@ -1,10 +1,8 @@
 'use client'
-import { useComponentMap, useDocumentInfo } from '@payloadcms/ui'
+import { LoadingOverlay, useComponentMap, useDocumentInfo } from '@payloadcms/ui'
 import React, { Fragment } from 'react'
 import { useCallback } from 'react'
 
-import { LoadingOverlay } from '../../../../ui/src/elements/Loading'
-
 export const DefaultEditViewClient: React.FC = () => {
   const { id, collectionSlug, getDocPermissions, getVersions, globalSlug } = useDocumentInfo()
 

packages/next/src/pages/Edit/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import type { ServerSideEditViewProps } from '../../../../ui/src/views/types'
+import type { ServerSideEditViewProps } from './types'
 
 import { DefaultEditViewClient } from './index.client'
 

packages/next/src/pages/Edit/sanitizedEditViewProps.ts → packages/next/src/pages/Edit/sanitizeEditViewProps.ts

@@ -1,7 +1,8 @@
-import type { ServerSideEditViewProps } from '@payloadcms/ui'
 import type { EditViewProps } from 'payload/config'
 
-export const sanitizedEditViewProps = (props: ServerSideEditViewProps) => {
+import type { ServerSideEditViewProps } from './types'
+
+export const sanitizeEditViewProps = (props: ServerSideEditViewProps) => {
   const clientSideProps = { ...props }
   delete clientSideProps.payload
   delete clientSideProps.config

packages/ui/src/views/types.ts → packages/next/src/pages/Edit/types.ts

@@ -1,4 +1,5 @@
 import type { I18n } from '@payloadcms/translations'
+import type { FormState } from '@payloadcms/ui'
 import type { Permissions, User } from 'payload/auth'
 import type { EditViewProps } from 'payload/config'
 import type {
@@ -9,8 +10,6 @@ import type {
   SanitizedConfig,
 } from 'payload/types'
 
-import type { FormState } from '../forms/Form/types'
-
 export type ServerSideEditViewProps = EditViewProps & {
   action?: string
   apiURL: string

packages/ui/src/views/List/Cell/cellTypes.spec.tsx → packages/next/src/pages/List/Default/Cell/cellTypes.spec.tsx

@@ -3,11 +3,11 @@ import React from 'react'
 
 import type { BlockField, DateField, SelectField } from 'payload/types'
 
-import BlocksCell from './fields/Blocks'
-import Checkbox from './fields/Checkbox'
-import DateCell from './fields/Date'
-import Select from './fields/Select'
-import Textarea from './fields/Textarea'
+import { BlocksCell } from './fields/Blocks'
+import { Checkbox } from './fields/Checkbox'
+import { DateCell } from './fields/Date'
+import { Select } from './fields/Select'
+import { Textarea } from './fields/Textarea'
 
 jest.mock('../../../../utilities/Config', () => ({
   useConfig: () => ({ admin: { dateFormat: 'MMMM do yyyy, h:mm a' } }),

packages/ui/src/views/List/Cell/fields/Array/index.tsx → packages/next/src/pages/List/Default/Cell/fields/Array/index.tsx

@@ -2,10 +2,9 @@
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
-import { useTranslation } from '../../../../../providers/Translation'
-
 export interface ArrayCellProps extends CellComponentProps<Record<string, unknown>[]> {
   labels: CellProps['labels']
 }

packages/ui/src/views/List/Cell/fields/Blocks/index.tsx → packages/next/src/pages/List/Default/Cell/fields/Blocks/index.tsx

@@ -2,10 +2,9 @@
 import type { CellComponentProps, CellProps } from 'payload/types'
 
 import { getTranslation } from '@payloadcms/translations'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
-import { useTranslation } from '../../../../../providers/Translation'
-
 export interface BlocksCellProps extends CellComponentProps<any> {
   blocks: CellProps['blocks']
   labels: CellProps['labels']