fix: fix all ui imports in our plugins, and get rid of ui subpath exports within monorepo (#6854)

test/access-control/TestButton.tsx

@@ -1,7 +1,6 @@
 'use client'
-import { useForm } from '@payloadcms/ui/forms/Form'
-import { useAuth } from '@payloadcms/ui/providers/Auth'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+
+import { useAuth, useForm, useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 export const TestButton: React.FC = () => {

test/admin/components/AfterNavLinks/index.tsx

@@ -2,10 +2,10 @@
 
 import type { SanitizedConfig } from 'payload'
 
-import { useConfig } from '@payloadcms/ui/providers/Config'
 import LinkImport from 'next/link.js'
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
+import { useConfig } from '@payloadcms/ui'
 import React from 'react'
 
 const baseClass = 'after-nav-links'

test/admin/components/BeforeLogin/index.tsx

@@ -2,7 +2,7 @@
 
 import type { SanitizedConfig } from 'payload'
 
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 export const BeforeLogin: SanitizedConfig['admin']['components']['beforeLogin'][0] = () => {

test/admin/components/CustomCell/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { CellComponentProps } from 'payload'
 
-import { useTableCell } from '@payloadcms/ui/elements/Table'
+import { useTableCell } from '@payloadcms/ui'
 import React from 'react'
 
 export const CustomCell: React.FC<CellComponentProps> = (props) => {

test/admin/components/CustomTabComponent/client.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useConfig } from '@payloadcms/ui/providers/Config'
+import { useConfig } from '@payloadcms/ui'
 import LinkImport from 'next/link.js'
 import { useParams } from 'next/navigation.js'
 import React from 'react'

test/admin/components/FieldDescription/index.tsx

@@ -1,8 +1,7 @@
 'use client'
 import type { DescriptionComponent } from 'payload'
 
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
-import { useFormFields } from '@payloadcms/ui/forms/Form'
+import { useFieldProps, useFormFields } from '@payloadcms/ui'
 import React from 'react'
 
 export const FieldDescriptionComponent: DescriptionComponent = () => {

test/admin/components/Logout/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { LogOutIcon } from '@payloadcms/ui/icons/LogOut'
-import { useConfig } from '@payloadcms/ui/providers/Config'
+import { LogOutIcon, useConfig } from '@payloadcms/ui'
 import React from 'react'
 
 export const Logout: React.FC = () => {

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

@@ -7,8 +7,7 @@ const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.
 
 import type { AdminViewProps } from 'payload'
 
-import { Button } from '@payloadcms/ui/elements/Button'
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { Button, SetStepNav } from '@payloadcms/ui'
 
 import { customViewPath } from '../../../shared.js'
 import './index.scss'

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

@@ -1,6 +1,6 @@
 import type { EditViewComponent } from 'payload'
 
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound, redirect } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

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

@@ -1,9 +1,9 @@
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import type { EditViewComponent } from 'payload'
+
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound, redirect } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 
-import type { EditViewComponent } from '../../../../../packages/payload/types.js'
-
 export const CustomDefaultEditView: EditViewComponent = ({ initPageResult }) => {
   if (!initPageResult) {
     notFound()

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

@@ -13,7 +13,7 @@ const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.
 import type { AdminViewProps } from 'payload'
 
 import { MinimalTemplate } from '@payloadcms/next/templates'
-import { Button } from '@payloadcms/ui/elements/Button'
+import { Button } from '@payloadcms/ui'
 
 import { customViewPath } from '../../../shared.js'
 import './index.scss'

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

@@ -1,9 +1,9 @@
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import type { ServerSideEditViewProps } from 'payload'
+
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 
-import type { ServerSideEditViewProps } from '../../../../../packages/payload/types.js'
-
 import { customTabViewComponentTitle } from '../../../shared.js'
 
 export const CustomTabComponentView: React.FC<ServerSideEditViewProps> = ({ initPageResult }) => {

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

@@ -1,6 +1,6 @@
 import type { EditViewComponent } from 'payload'
 
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

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

@@ -1,6 +1,6 @@
 import type { EditViewComponent } from 'payload'
 
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

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

@@ -1,6 +1,6 @@
 import type { EditViewComponent } from 'payload'
 
-import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
+import { SetStepNav } from '@payloadcms/ui'
 import { notFound, redirect } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

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

@@ -1,8 +1,12 @@
 'use client'
-import { ConfirmPassword } from '@payloadcms/ui/fields/ConfirmPassword'
-import { Password } from '@payloadcms/ui/fields/Password'
-import { Form, useFormFields } from '@payloadcms/ui/forms/Form'
-import { FormSubmit } from '@payloadcms/ui/forms/Submit'
+
+import {
+  ConfirmPasswordField,
+  Form,
+  FormSubmit,
+  PasswordField,
+  useFormFields,
+} from '@payloadcms/ui'
 import React from 'react'
 
 export const ClientForm: React.FC = () => {
@@ -22,7 +26,7 @@ export const ClientForm: React.FC = () => {
       }}
     >
       <CustomPassword />
-      <ConfirmPassword />
+      <ConfirmPasswordField />
       <FormSubmit>Submit</FormSubmit>
     </Form>
   )
@@ -36,7 +40,7 @@ const CustomPassword: React.FC = () => {
   const confirmValue = confirmPassword.value
 
   return (
-    <Password
+    <PasswordField
       autoComplete="off"
       label="Password"
       name="password"

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

@@ -5,7 +5,7 @@ import React from 'react'
 
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
-import { Button } from '@payloadcms/ui/elements/Button'
+import { Button } from '@payloadcms/ui'
 
 import { customNestedViewPath, customViewTitle } from '../../../shared.js'
 import { ClientForm } from './index.client.js'

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

@@ -1,9 +1,9 @@
-import { Button } from '@payloadcms/ui/elements/Button'
+import type { AdminViewProps } from 'payload'
+
+import { Button } from '@payloadcms/ui'
 import LinkImport from 'next/link.js'
 import React from 'react'
 
-import type { AdminViewProps } from '../../../../../packages/payload/types.js'
-
 import { customNestedViewTitle, customViewPath } from '../../../shared.js'
 
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default

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

@@ -1,11 +1,11 @@
-import { Button } from '@payloadcms/ui/elements/Button'
+import { Button } from '@payloadcms/ui'
 import LinkImport from 'next/link.js'
 import React from 'react'
 
-import type { AdminViewProps } from '../../../../../packages/payload/types.js'
-
 const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
 
+import type { AdminViewProps } from 'payload'
+
 import {
   customParamViewPath,
   customParamViewPathBase,

test/auth/AuthDebug.tsx

@@ -2,7 +2,7 @@
 
 import type { UIField, User } from 'payload'
 
-import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useAuth } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
 export const AuthDebug: React.FC<UIField> = () => {

test/auth/ui/AuthDebug.tsx

@@ -1,6 +1,6 @@
 import type { UIField, User } from 'payload'
 
-import { useAuth } from '@payloadcms/ui/providers/Auth'
+import { useAuth } from '@payloadcms/ui'
 import React, { useEffect, useState } from 'react'
 
 export const AuthDebug: React.FC<UIField> = () => {

test/fields-relationship/PrePopulateFieldUI/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useField } from '@payloadcms/ui/forms/useField'
+import { useField } from '@payloadcms/ui'
 import * as React from 'react'
 
 import { collection1Slug } from '../collectionSlugs.js'

test/fields-relationship/config.ts

@@ -4,7 +4,7 @@ const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
 import type { CollectionConfig, FilterOptionsProps } from 'payload'
 
-import { withMergedProps } from '@payloadcms/ui/elements/withMergedProps'
+import { withMergedProps } from '@payloadcms/ui/shared'
 
 import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
 import { devUser } from '../credentials.js'

test/fields/collections/Array/LabelComponent.tsx

@@ -2,7 +2,7 @@
 
 import type { RowLabelComponent } from 'payload'
 
-import { useRowLabel } from '@payloadcms/ui/forms/RowLabel/Context'
+import { useRowLabel } from '@payloadcms/ui'
 import React from 'react'
 
 export const ArrayRowLabel: RowLabelComponent = () => {

test/fields/collections/Blocks/components/AddCustomBlocks/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useForm } from '@payloadcms/ui/forms/Form'
-import { useField } from '@payloadcms/ui/forms/useField'
+import { useField, useForm } from '@payloadcms/ui'
 import * as React from 'react'
 
 import { blockFieldsSlug } from '../../../../slugs.js'

test/fields/collections/Collapsible/CustomLabel/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRowLabel } from '@payloadcms/ui/forms/RowLabel/Context'
+import { useRowLabel } from '@payloadcms/ui'
 import React from 'react'
 
 export const CustomLabelComponent: React.FC<{

test/fields/collections/Collapsible/NestedCustomLabel/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRowLabel } from '@payloadcms/ui/forms/RowLabel/Context'
+import { useRowLabel } from '@payloadcms/ui'
 import React from 'react'
 
 export const NestedCustomLabel: React.FC = () => {

test/fields/collections/Text/CustomError.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useFormFields, useFormSubmitted } from '@payloadcms/ui/forms/Form'
-import { useField } from '@payloadcms/ui/forms/useField'
+import { useField, useFormFields, useFormSubmitted } from '@payloadcms/ui'
 import React from 'react'
 
 const CustomError: React.FC<any> = (props) => {

test/fields/collections/Text/CustomLabel.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useFieldProps } from '@payloadcms/ui'
 import React from 'react'
 
 const CustomLabel = ({ schemaPath }) => {

test/fields/collections/UI/UICustomClient.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useFieldProps } from '@payloadcms/ui/forms/FieldPropsProvider'
+import { useFieldProps } from '@payloadcms/ui'
 import React from 'react'
 
 export const UICustomClient: React.FC = () => {

test/i18n/ComponentWithCustomI18n.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 import type { CustomTranslationsKeys, CustomTranslationsObject } from './config.js'

test/i18n/ComponentWithDefaultI18n.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useTranslation } from '@payloadcms/ui/providers/Translation'
+import { useTranslation } from '@payloadcms/ui'
 import React from 'react'
 
 export const ComponentWithDefaultI18n = () => {

test/live-preview/app/live-preview/(pages)/posts/[slug]/page.client.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useLivePreview } from '@payloadcms/live-preview-react'
-import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { Gutter } from '@payloadcms/ui'
 import React from 'react'
 
 import type { Post as PostType } from '../../../../../payload-types.js'

test/live-preview/app/live-preview/(pages)/ssr-autosave/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { Gutter } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

test/live-preview/app/live-preview/(pages)/ssr/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { Gutter } from '@payloadcms/ui/elements/Gutter'
+import { Gutter } from '@payloadcms/ui'
 import { notFound } from 'next/navigation.js'
 import React, { Fragment } from 'react'
 

test/plugin-seo/payload-types.ts

@@ -8,124 +8,123 @@
 
 export interface Config {
   collections: {
-    users: User
-    pages: Page
-    media: Media
-    'payload-preferences': PayloadPreference
-    'payload-migrations': PayloadMigration
-  }
-  globals: {}
-  locale: 'en' | 'es' | 'de'
+    users: User;
+    pages: Page;
+    media: Media;
+    'payload-preferences': PayloadPreference;
+    'payload-migrations': PayloadMigration;
+  };
+  globals: {};
+  locale: 'en' | 'es' | 'de';
   user: User & {
-    collection: 'users'
-  }
+    collection: 'users';
+  };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "users".
  */
 export interface User {
-  id: string
-  updatedAt: string
-  createdAt: string
-  email: string
-  resetPasswordToken?: string | null
-  resetPasswordExpiration?: string | null
-  salt?: string | null
-  hash?: string | null
-  loginAttempts?: number | null
-  lockUntil?: string | null
-  password?: string | null
+  id: string;
+  updatedAt: string;
+  createdAt: string;
+  email: string;
+  resetPasswordToken?: string | null;
+  resetPasswordExpiration?: string | null;
+  salt?: string | null;
+  hash?: string | null;
+  loginAttempts?: number | null;
+  lockUntil?: string | null;
+  password?: string | null;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "pages".
  */
 export interface Page {
-  id: string
-  title: string
-  excerpt?: string | null
-  slug: string
-  meta: {
-    title: string
-    description?: string | null
-    image?: string | Media | null
-    ogTitle?: string | null
-  }
-  updatedAt: string
-  createdAt: string
-  _status?: ('draft' | 'published') | null
+  id: string;
+  title: string;
+  excerpt?: string | null;
+  slug: string;
+  meta?: {
+    title?: string | null;
+    description?: string | null;
+  };
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "media".
  */
 export interface Media {
-  id: string
-  media?: string | Media | null
+  id: string;
+  media?: string | Media | null;
   richText?: {
     root: {
-      type: string
+      type: string;
       children: {
-        type: string
-        version: number
-        [k: string]: unknown
-      }[]
-      direction: ('ltr' | 'rtl') | null
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | ''
-      indent: number
-      version: number
-    }
-    [k: string]: unknown
-  } | null
-  updatedAt: string
-  createdAt: string
-  url?: string | null
-  thumbnailURL?: string | null
-  filename?: string | null
-  mimeType?: string | null
-  filesize?: number | null
-  width?: number | null
-  height?: number | null
-  focalX?: number | null
-  focalY?: number | null
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  } | null;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-preferences".
  */
 export interface PayloadPreference {
-  id: string
+  id: string;
   user: {
-    relationTo: 'users'
-    value: string | User
-  }
-  key?: string | null
+    relationTo: 'users';
+    value: string | User;
+  };
+  key?: string | null;
   value?:
     | {
-        [k: string]: unknown
+        [k: string]: unknown;
       }
     | unknown[]
     | string
     | number
     | boolean
-    | null
-  updatedAt: string
-  createdAt: string
+    | null;
+  updatedAt: string;
+  createdAt: string;
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "payload-migrations".
  */
 export interface PayloadMigration {
-  id: string
-  name?: string | null
-  batch?: number | null
-  updatedAt: string
-  createdAt: string
+  id: string;
+  name?: string | null;
+  batch?: number | null;
+  updatedAt: string;
+  createdAt: string;
 }
 
+
 declare module 'payload' {
-  // @ts-ignore
+  // @ts-ignore 
   export interface GeneratedTypes extends Config {}
-}
+}

test/tsconfig.json

@@ -27,20 +27,18 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@payloadcms/ui/assets": ["../packages/ui/src/assets/index.ts"],
-      "@payloadcms/ui/elements/*": ["../packages/ui/src/elements/*/index.tsx"],
-      "@payloadcms/ui/fields/*": ["../packages/ui/src/fields/*/index.tsx"],
-      "@payloadcms/ui/forms/*": ["../packages/ui/src/forms/*/index.tsx"],
-      "@payloadcms/ui/graphics/*": ["../packages/ui/src/graphics/*/index.tsx"],
-      "@payloadcms/ui/hooks/*": ["../packages/ui/src/hooks/*.ts"],
-      "@payloadcms/ui/icons/*": ["../packages/ui/src/icons/*/index.tsx"],
-      "@payloadcms/ui/providers/*": ["../packages/ui/src/providers/*/index.tsx"],
-      "@payloadcms/ui/templates/*": ["../packages/ui/src/templates/*/index.tsx"],
-      "@payloadcms/ui/utilities/*": ["../packages/ui/src/utilities/*.ts"],
-      "@payloadcms/ui/scss": ["../packages/ui/src/scss.scss"],
-      "@payloadcms/ui": ["../packages/ui/src/exports/client/index.ts"],
-      "@payloadcms/ui/server": ["../packages/ui/src/exports/shared/index.ts"],
-      "@payloadcms/ui/scss/app.scss": ["../packages/ui/src/scss/app.scss"],
+      "@payloadcms/ui": [
+        "../packages/ui/src/exports/client/index.ts"
+      ],
+      "@payloadcms/ui/shared": [
+        "../packages/ui/src/exports/shared/index.ts"
+      ],
+      "@payloadcms/ui/scss": [
+        "../packages/ui/src/scss.scss"
+      ],
+      "@payloadcms/ui/scss/app.scss": [
+        "../packages/ui/src/scss/app.scss"
+      ],
       "@payloadcms/next/*": ["./packages/next/src/exports/*.ts"],
       "@payload-config": ["./_community/config.ts"]
     }

test/versions/elements/CustomSaveButton/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { CustomPublishButton as CustomPublishButtonType } from 'payload'
 
-import { DefaultPublishButton } from '@payloadcms/ui/elements/PublishButton'
+import { DefaultPublishButton } from '@payloadcms/ui'
 import * as React from 'react'
 
 import classes from './index.module.scss'