Merge remote-tracking branch 'origin/alpha' into temp11

2024-03-25 10:18:08 -04:00
parent 934ad96a98 ee4cd61696
commit aea28b28d0
16 changed files with 191 additions and 273 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -2,7 +2,7 @@ name: build

 on:
  pull_request:
-    types: [ opened, reopened, synchronize ]
+    types: [opened, reopened, synchronize]
  push:
    branches: ['main', 'alpha']

@@ -124,7 +124,7 @@ jobs:
      fail-fast: false
      matrix:
        database:
-         - mongodb
+          - mongodb
        #  - postgres
        #  - postgres-custom-schema
        #  - postgres-uuid
@@ -162,7 +162,7 @@ jobs:
      - name: Start PostgreSQL
        uses: CasperWA/postgresql-action@v1.2
        with:
-          postgresql version: '14'  # See https://hub.docker.com/_/postgres for available versions
+          postgresql version: '14' # See https://hub.docker.com/_/postgres for available versions
          postgresql db: ${{ env.POSTGRES_DB }}
          postgresql user: ${{ env.POSTGRES_USER }}
          postgresql password: ${{ env.POSTGRES_PASSWORD }}
@@ -223,7 +223,7 @@ jobs:
          # - field-error-states
          # - fields-relationship
          # - fields
-          # - live-preview
+          - live-preview
          # - localization
          # - plugin-nested-docs
          # - plugin-seo
@@ -344,7 +344,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        template: [ blank, website, ecommerce ]
+        template: [blank, website, ecommerce]

    steps:
      - uses: actions/checkout@v4
--- a/examples/email/package.json
+++ b/examples/email/package.json
@@ -32,4 +32,4 @@
    "ts-node": "^9.1.1",
    "typescript": "^4.8.4"
  }
-}
+}
--- a/examples/email/tsconfig.json
+++ b/examples/email/tsconfig.json
@@ -1,11 +1,7 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": false,
    "esModuleInterop": true,
@@ -16,22 +12,12 @@
    "sourceMap": true,
    "resolveJsonModule": true,
    "paths": {
-      "payload/generated-types": [
-        "./src/payload-types.ts"
-      ],
-      "node_modules/*": [
-        "./node_modules/*"
-      ]
-    },
+      "payload/generated-types": ["./src/payload-types.ts"],
+      "node_modules/*": ["./node_modules/*"]
+    }
  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "build",
-  ],
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "build"],
  "ts-node": {
    "transpileOnly": true
  }
--- a/examples/testing/tsconfig.json
+++ b/examples/testing/tsconfig.json
@@ -1,11 +1,7 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "outDir": "./dist",
    "skipLibCheck": true,
    "strict": false,
@@ -18,10 +14,8 @@
    "jsx": "preserve",
    "sourceMap": true
  },
-  "include": [
-    "src"
-  ],
+  "include": ["src"],
  "ts-node": {
    "transpileOnly": true
  }
-}
+}
--- a/examples/virtual-fields/package.json
+++ b/examples/virtual-fields/package.json
@@ -26,4 +26,4 @@
    "ts-node": "^9.1.1",
    "typescript": "^4.8.4"
  }
-}
+}
--- a/examples/virtual-fields/tsconfig.json
+++ b/examples/virtual-fields/tsconfig.json
@@ -1,11 +1,7 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": false,
    "esModuleInterop": true,
@@ -14,14 +10,8 @@
    "rootDir": "./src",
    "jsx": "react"
  },
-  "include": [
-    "src",
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "build",
-  ],
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "build"],
  "ts-node": {
    "transpileOnly": true
  }
--- a/examples/whitelabel/package.json
+++ b/examples/whitelabel/package.json
@@ -26,4 +26,4 @@
    "ts-node": "^9.1.1",
    "typescript": "^4.8.4"
  }
-}
+}
--- a/examples/whitelabel/tsconfig.json
+++ b/examples/whitelabel/tsconfig.json
@@ -1,11 +1,7 @@
 {
  "compilerOptions": {
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "strict": false,
    "esModuleInterop": true,
@@ -14,14 +10,8 @@
    "rootDir": "./src",
    "jsx": "react"
  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "build",
-  ],
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "build"],
  "ts-node": {
    "transpileOnly": true
  }
--- a/package.json
+++ b/package.json
@@ -109,8 +109,8 @@
    "dotenv": "8.6.0",
    "drizzle-kit": "0.20.14-1f2c838",
    "drizzle-orm": "0.29.4",
-    "eslint-plugin-payload": "workspace:*",
    "escape-html": "^1.0.3",
+    "eslint-plugin-payload": "workspace:*",
    "execa": "5.1.1",
    "form-data": "3.0.1",
    "fs-extra": "10.1.0",
@@ -153,7 +153,7 @@
    "tempy": "^1.0.1",
    "ts-node": "10.9.1",
    "tsx": "^4.7.1",
-    "turbo": "^1.12.5",
+    "turbo": "^1.13.0",
    "typescript": "5.4.2",
    "uuid": "^9.0.1",
    "yocto-queue": "^1.0.0"
@@ -167,6 +167,7 @@
    "pnpm": ">=8"
  },
  "lint-staged": {
+    "*.{md,mdx,yml,json}": "prettier --write",
    "*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --cache --fix"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -281,8 +281,8 @@ importers:
        specifier: ^4.7.1
        version: 4.7.1
      turbo:
-        specifier: ^1.12.5
-        version: 1.12.5
+        specifier: ^1.13.0
+        version: 1.13.0
      typescript:
        specifier: 5.4.2
        version: 5.4.2
@@ -16806,64 +16806,64 @@ packages:
    engines: {node: '>=0.6.11 <=0.7.0 || >=0.7.3'}
    dev: true

-  /turbo-darwin-64@1.12.5:
-    resolution: {integrity: sha512-0GZ8reftwNQgIQLHkHjHEXTc/Z1NJm+YjsrBP+qhM/7yIZ3TEy9gJhuogDt2U0xIWwFgisTyzbtU7xNaQydtoA==}
+  /turbo-darwin-64@1.13.0:
+    resolution: {integrity: sha512-ctHeJXtQgBcgxnCXwrJTGiq57HtwF7zWz5NTuSv//5yeU01BtQIt62ArKfjudOhRefWJbX3Z5srn88XTb9hfww==}
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
    dev: true
    optional: true

-  /turbo-darwin-arm64@1.12.5:
-    resolution: {integrity: sha512-8WpOLNNzvH6kohQOjihD+gaWL+ZFNfjvBwhOF0rjEzvW+YR3Pa7KjhulrjWyeN2yMFqAPubTbZIGOz1EVXLuQA==}
+  /turbo-darwin-arm64@1.13.0:
+    resolution: {integrity: sha512-/Q9/pNFkF9w83tNxwMpgapwLYdQ12p8mpty2YQRoUiS9ClWkcqe136jR0mtuMqzlNlpREOFZaoyIthjt6Sdo0g==}
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
    dev: true
    optional: true

-  /turbo-linux-64@1.12.5:
-    resolution: {integrity: sha512-INit73+bNUpwqGZCxgXCR3I+cQsdkQ3/LkfkgSOibkpg+oGqxJRzeXw3sp990d7SCoE8QOcs3iw+PtiFX/LDAA==}
+  /turbo-linux-64@1.13.0:
+    resolution: {integrity: sha512-hgbT7o020BGV4L7Sd8hhFTd5zVKPKxbsr0dPfel/9NkdTmptz2aGZ0Vb2MAa18SY3XaCQpDxmdYuOzvvRpo5ZA==}
    cpu: [x64]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /turbo-linux-arm64@1.12.5:
-    resolution: {integrity: sha512-6lkRBvxtI/GQdGtaAec9LvVQUoRw6nXFp0kM+Eu+5PbZqq7yn6cMkgDJLI08zdeui36yXhone8XGI8pHg8bpUQ==}
+  /turbo-linux-arm64@1.13.0:
+    resolution: {integrity: sha512-WK01i2wDZARrV+HEs495A3hNeGMwQR5suYk7G+ceqqW7b+dOTlQdvUjnI3sg7wAnZPgjafFs/hoBaZdJjVa/nw==}
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
    dev: true
    optional: true

-  /turbo-windows-64@1.12.5:
-    resolution: {integrity: sha512-gQYbOhZg5Ww0bQ/bC0w/4W6yQRwBumUUnkB+QPo15VznwxZe2a7bo6JM+9Xy9dKLa/kn+p7zTqme4OEp6M3/Yg==}
+  /turbo-windows-64@1.13.0:
+    resolution: {integrity: sha512-hJgSZJZwlWHNwLEthaqJqJWGm4NqF5X/I7vE0sPE4i/jeDl8f0n1hcOkgJkJiNXVxhj+qy/9+4dzbPLKT9imaQ==}
    cpu: [x64]
    os: [win32]
    requiresBuild: true
    dev: true
    optional: true

-  /turbo-windows-arm64@1.12.5:
-    resolution: {integrity: sha512-auvhZ9FrhnvQ4mgBlY9O68MT4dIfprYGvd2uPICba/mHUZZvVy5SGgbHJ0KbMwaJfnnFoPgLJO6M+3N2gDprKw==}
+  /turbo-windows-arm64@1.13.0:
+    resolution: {integrity: sha512-L/ErxYoXeq8tmjU/AIGicC9VyBN1zdYw8JlM4yPmMI0pJdY8E4GaYK1IiIazqq7M72lmQhU/WW7fV9FqEktwrw==}
    cpu: [arm64]
    os: [win32]
    requiresBuild: true
    dev: true
    optional: true

-  /turbo@1.12.5:
-    resolution: {integrity: sha512-FATU5EnhrYG8RvQJYFJnDd18DpccDjyvd53hggw9T9JEg9BhWtIEoeaKtBjYbpXwOVrJQMDdXcIB4f2nD3QPPg==}
+  /turbo@1.13.0:
+    resolution: {integrity: sha512-r02GtNmkOPcQvUzVE6lg474QVLyU02r3yh3lUGqrFHf5h5ZEjgDGWILsAUqplVqjri1Y/oOkTssks4CObTAaiw==}
    hasBin: true
    optionalDependencies:
-      turbo-darwin-64: 1.12.5
-      turbo-darwin-arm64: 1.12.5
-      turbo-linux-64: 1.12.5
-      turbo-linux-arm64: 1.12.5
-      turbo-windows-64: 1.12.5
-      turbo-windows-arm64: 1.12.5
+      turbo-darwin-64: 1.13.0
+      turbo-darwin-arm64: 1.13.0
+      turbo-linux-64: 1.13.0
+      turbo-linux-arm64: 1.13.0
+      turbo-windows-64: 1.13.0
+      turbo-windows-arm64: 1.13.0
    dev: true

  /type-check@0.4.0:
--- a/scripts/release.ts
+++ b/scripts/release.ts
@@ -200,6 +200,10 @@ async function main() {

  const otp = dryRun ? undefined : await question('Enter your 2FA code')

+  if (!dryRun && !otp) {
+    abort('2FA code is required')
+  }
+
  // Publish
  const results: { name: string; success: boolean; details?: string }[] = await Promise.all(
    packageDetails.map(async (pkg) => {
@@ -232,6 +236,9 @@ async function main() {
  )

  console.log(chalk.bold.green(`\n\nResults:\n\n`))
+  console.log(results.map(({ name, success }) => `  ${success ? '✅' : '❌'} ${name}`).join('\n'))
+
+  // New results format
  console.log(
    results
      .map(({ name, success, details }) => {
@@ -239,6 +246,7 @@ async function main() {
        if (details) {
          summary += `\n    ${details}\n`
        }
+        return summary
      })
      .join('\n'),
  )
--- a/templates/ecommerce/tsconfig.json
+++ b/templates/ecommerce/tsconfig.json
@@ -2,11 +2,7 @@
  "compilerOptions": {
    "esModuleInterop": true,
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
@@ -24,17 +20,11 @@
      }
    ],
    "paths": {
-      "react": ["./node_modules/@types/react"],
+      "react": ["./node_modules/@types/react"]
    }
  },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"],
  "ts-node": {
    "transpileOnly": true,
    "swc": true
--- a/templates/website/tsconfig.json
+++ b/templates/website/tsconfig.json
@@ -2,11 +2,7 @@
  "compilerOptions": {
    "esModuleInterop": true,
    "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
@@ -25,17 +21,11 @@
      }
    ],
    "paths": {
-      "react": ["./node_modules/@types/react"],
+      "react": ["./node_modules/@types/react"]
    }
  },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ],
+  "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"],
  "ts-node": {
    "transpileOnly": true,
    "swc": true
--- a/test/live-preview/e2e.spec.ts
+++ b/test/live-preview/e2e.spec.ts
@@ -3,7 +3,6 @@ import type { Payload } from 'payload'

 import { expect, test } from '@playwright/test'
 import path from 'path'
-import { wait } from 'payload/utilities'
 import { fileURLToPath } from 'url'

 import { exactText, initPageConsoleErrorCatch, saveDocAndAssert } from '../helpers.js'
@@ -14,8 +13,9 @@ import { mobileBreakpoint } from './shared.js'
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)

-const { beforeAll, describe, afterAll } = test
+const { beforeAll, describe } = test

+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 let payload: Payload

 describe('Live Preview', () => {
@@ -26,7 +26,9 @@ describe('Live Preview', () => {
  const goToDoc = async (page: Page) => {
    await page.goto(url.list)
    const linkToDoc = page.locator('tbody tr:first-child .cell-slug a').first()
-    expect(linkToDoc).toBeTruthy()
+
+    await expect(() => expect(linkToDoc).toBeTruthy()).toPass({ timeout: 45000 })
+
    await linkToDoc.click()
    const linkDocHref = await linkToDoc.getAttribute('href')

@@ -59,13 +61,14 @@ describe('Live Preview', () => {
    const livePreviewTab = page.locator('.doc-tab', {
      hasText: exactText('Live Preview'),
    })
-    expect(livePreviewTab).toBeTruthy()
+
+    await expect(() => expect(livePreviewTab).toBeTruthy()).toPass({ timeout: 45000 })

    const href = await livePreviewTab.locator('a').first().getAttribute('href')
    const docURL = page.url()
    const pathname = new URL(docURL).pathname

-    expect(href).toBe(`${pathname}/preview`)
+    await expect(() => expect(href).toBe(`${pathname}/preview`)).toPass({ timeout: 45000 })
  })

  test('collection - has route', async () => {
@@ -73,7 +76,7 @@ describe('Live Preview', () => {
    const url = page.url()
    await goToCollectionPreview(page)

-    expect(page.url()).toBe(`${url}/preview`)
+    await expect(() => expect(page.url()).toBe(`${url}/preview`)).toPass({ timeout: 45000 })
  })

  test('collection - renders iframe', async () => {
@@ -111,15 +114,17 @@ describe('Live Preview', () => {
      hasText: exactText('Live Preview'),
    })

-    expect(livePreviewTab).toBeTruthy()
+    await expect(() => expect(livePreviewTab).toBeTruthy()).toPass({ timeout: 45000 })
    const href = await livePreviewTab.locator('a').first().getAttribute('href')
-    expect(href).toBe(`${pathname}/preview`)
+
+    await expect(() => expect(href).toBe(`${pathname}/preview`)).toPass({ timeout: 45000 })
  })

  test('global - has route', async () => {
    const url = page.url()
    await goToGlobalPreview(page, 'header')
-    expect(page.url()).toBe(`${url}/preview`)
+
+    await expect(() => expect(page.url()).toBe(`${url}/preview`)).toPass({ timeout: 45000 })
  })

  test('global - renders iframe', async () => {
@@ -130,7 +135,7 @@ describe('Live Preview', () => {

  test('global - can edit fields', async () => {
    await goToGlobalPreview(page, 'header')
-    const field = page.locator('input#field-navItems__0__link__newTab')
+    const field = page.locator('input#field-navItems__0__link____newTab')
    await expect(field).toBeVisible()
    await expect(field).toBeEnabled()
    await field.check()
@@ -143,8 +148,10 @@ describe('Live Preview', () => {
    await page.locator('#field-slug').fill('slug-3')

    await saveDocAndAssert(page)
+
    await goToCollectionPreview(page)
-    expect(page.url()).toContain('/preview')
+
+    await expect(() => expect(page.url()).toContain('/preview')).toPass({ timeout: 45000 })

    const iframe = page.locator('iframe')

@@ -155,9 +162,11 @@ describe('Live Preview', () => {
    const iframeHeightInPx = iframeSize?.height

    const widthInput = page.locator('.live-preview-toolbar input[name="live-preview-width"]')
-    expect(widthInput).toBeTruthy()
+
+    await expect(() => expect(widthInput).toBeTruthy()).toPass({ timeout: 45000 })
    const heightInput = page.locator('.live-preview-toolbar input[name="live-preview-height"]')
-    expect(heightInput).toBeTruthy()
+
+    await expect(() => expect(heightInput).toBeTruthy()).toPass({ timeout: 45000 })

    const widthInputValue = await widthInput.getAttribute('value')
    const width = parseInt(widthInputValue)
@@ -166,10 +175,22 @@ describe('Live Preview', () => {

    // Allow a tolerance of a couple of pixels
    const tolerance = 2
-    expect(iframeWidthInPx).toBeLessThanOrEqual(width + tolerance)
-    expect(iframeWidthInPx).toBeGreaterThanOrEqual(width - tolerance)
-    expect(iframeHeightInPx).toBeLessThanOrEqual(height + tolerance)
-    expect(iframeHeightInPx).toBeGreaterThanOrEqual(height - tolerance)
+
+    await expect(() => expect(iframeWidthInPx).toBeLessThanOrEqual(width + tolerance)).toPass({
+      timeout: 45000,
+    })
+
+    await expect(() => expect(iframeWidthInPx).toBeGreaterThanOrEqual(width - tolerance)).toPass({
+      timeout: 45000,
+    })
+
+    await expect(() => expect(iframeHeightInPx).toBeLessThanOrEqual(height + tolerance)).toPass({
+      timeout: 45000,
+    })
+
+    await expect(() => expect(iframeHeightInPx).toBeGreaterThanOrEqual(height - tolerance)).toPass({
+      timeout: 45000,
+    })
  })

  test('resizes iframe to specified breakpoint', async () => {
@@ -179,13 +200,19 @@ describe('Live Preview', () => {

    await saveDocAndAssert(page)
    await goToCollectionPreview(page)
-    expect(page.url()).toContain('/preview')
+
+    await expect(() => expect(page.url()).toContain('/preview')).toPass({
+      timeout: 45000,
+    })

    // Check that the breakpoint select is present
    const breakpointSelector = page.locator(
      '.live-preview-toolbar-controls__breakpoint button.popup-button',
    )
-    expect(breakpointSelector).toBeTruthy()
+
+    await expect(() => expect(breakpointSelector).toBeTruthy()).toPass({
+      timeout: 45000,
+    })

    // Select the mobile breakpoint
    await breakpointSelector.first().click()
@@ -203,26 +230,61 @@ describe('Live Preview', () => {

    // Measure the size of the iframe against the specified breakpoint
    const iframe = page.locator('iframe')
-    expect(iframe).toBeTruthy()
+
+    await expect(() => expect(iframe).toBeTruthy()).toPass({
+      timeout: 45000,
+    })
    const iframeSize = await iframe.boundingBox()
    const iframeWidthInPx = iframeSize?.width
    const iframeHeightInPx = iframeSize?.height
    const tolerance = 2
-    expect(iframeWidthInPx).toBeLessThanOrEqual(mobileBreakpoint.width + tolerance)
-    expect(iframeWidthInPx).toBeGreaterThanOrEqual(mobileBreakpoint.width - tolerance)
-    expect(iframeHeightInPx).toBeLessThanOrEqual(mobileBreakpoint.height + tolerance)
-    expect(iframeHeightInPx).toBeGreaterThanOrEqual(mobileBreakpoint.height - tolerance)
+
+    await expect(() =>
+      expect(iframeWidthInPx).toBeLessThanOrEqual(mobileBreakpoint.width + tolerance),
+    ).toPass({
+      timeout: 45000,
+    })
+
+    await expect(() =>
+      expect(iframeWidthInPx).toBeGreaterThanOrEqual(mobileBreakpoint.width - tolerance),
+    ).toPass({
+      timeout: 45000,
+    })
+
+    await expect(() =>
+      expect(iframeHeightInPx).toBeLessThanOrEqual(mobileBreakpoint.height + tolerance),
+    ).toPass({
+      timeout: 45000,
+    })
+
+    await expect(() =>
+      expect(iframeHeightInPx).toBeGreaterThanOrEqual(mobileBreakpoint.height - tolerance),
+    ).toPass({
+      timeout: 45000,
+    })

    // Check that the inputs have been updated to reflect the new size
    const widthInput = page.locator('.live-preview-toolbar input[name="live-preview-width"]')
-    expect(widthInput).toBeTruthy()
+
+    await expect(() => expect(widthInput).toBeTruthy()).toPass({
+      timeout: 45000,
+    })
    const heightInput = page.locator('.live-preview-toolbar input[name="live-preview-height"]')
-    expect(heightInput).toBeTruthy()
+
+    await expect(() => expect(heightInput).toBeTruthy()).toPass({
+      timeout: 45000,
+    })
    const widthInputValue = await widthInput.getAttribute('value')
    const width = parseInt(widthInputValue)
-    expect(width).toBe(mobileBreakpoint.width)
+
+    await expect(() => expect(width).toBe(mobileBreakpoint.width)).toPass({
+      timeout: 45000,
+    })
    const heightInputValue = await heightInput.getAttribute('value')
    const height = parseInt(heightInputValue)
-    expect(height).toBe(mobileBreakpoint.height)
+
+    await expect(() => expect(height).toBe(mobileBreakpoint.height)).toPass({
+      timeout: 45000,
+    })
  })
 })
--- a/test/tsconfig.json
+++ b/test/tsconfig.json
@@ -12,20 +12,12 @@
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": false,
-    "types": [
-      "jest",
-      "node",
-      "@types/jest"
-    ],
+    "types": ["jest", "node", "@types/jest"],
    "incremental": true,
    "isolatedModules": true,
    "plugins": [
@@ -34,55 +26,21 @@
      }
    ],
    "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/scss/app.scss": [
-        "./packages/ui/src/scss/app.scss"
-      ]
+      "@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/scss/app.scss": ["./packages/ui/src/scss/app.scss"]
    }
  },
-  "exclude": [
-    "dist",
-    "build",
-    "node_modules",
-    ".eslintrc.js",
-    "dist/**/*.js",
-    "**/dist/**/*.js"
-  ],
-  "include": [
-    "./**/*.ts",
-    ".next/types/**/*.ts"
-  ],
+  "exclude": ["dist", "build", "node_modules", ".eslintrc.js", "dist/**/*.js", "**/dist/**/*.js"],
+  "include": ["./**/*.ts", ".next/types/**/*.ts"],
  "references": []
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,11 +11,7 @@
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
    "noEmit": true,
    "outDir": "./dist",
    "resolveJsonModule": true,
@@ -23,11 +19,7 @@
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": false,
-    "types": [
-      "jest",
-      "node",
-      "@types/jest"
-    ],
+    "types": ["jest", "node", "@types/jest"],
    "incremental": true,
    "isolatedModules": true,
    "plugins": [
@@ -36,65 +28,26 @@
      }
    ],
    "paths": {
-      "@payload-config": [
-        "./test/_community/config.ts"
-      ],
-      "@payloadcms/live-preview": [
-        "./packages/live-preview/src"
-      ],
-      "@payloadcms/live-preview-react": [
-        "./packages/live-preview-react/src/index.ts"
-      ],
-      "@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/scss/app.scss": [
-        "./packages/ui/src/scss/app.scss"
-      ],
-      "@payloadcms/next/*": [
-        "./packages/next/src/*"
-      ],
-      "@payloadcms/next": [
-        "./packages/next/src/exports/*"
-      ]
+      "@payload-config": ["./test/_community/config.ts"],
+      "@payloadcms/live-preview": ["./packages/live-preview/src"],
+      "@payloadcms/live-preview-react": ["./packages/live-preview-react/src/index.ts"],
+      "@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/scss/app.scss": ["./packages/ui/src/scss/app.scss"],
+      "@payloadcms/next/*": ["./packages/next/src/*"],
+      "@payloadcms/next": ["./packages/next/src/exports/*"]
    }
  },
-  "exclude": [
-    "dist",
-    "build",
-    "temp",
-    "node_modules"
-  ],
+  "exclude": ["dist", "build", "temp", "node_modules"],
  "composite": true,
  "references": [
    {
@@ -155,9 +108,5 @@
      "path": "./packages/ui"
    }
  ],
-  "include": [
-    "next-env.d.ts",
-    ".next/types/**/*.ts",
-    "scripts/**/*.ts"
-  ]
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "scripts/**/*.ts"]
 }