chore(release): v3.0.0-alpha.45 [skip ci]

fix (alpha): `auth.strategies` schema and removal of auth functions from client config

.github/workflows/main.yml

@@ -4,7 +4,7 @@ on:
   pull_request:
     types: [ opened, reopened, synchronize ]
   push:
-    branches: ['main', 'feat/next-poc']
+    branches: ['main', 'alpha']
 
 jobs:
   changes:
@@ -196,9 +196,6 @@ jobs:
           echo "POSTGRES_URL=postgresql://postgres:postgres@127.0.0.1:54322/postgres" >> $GITHUB_ENV
         if: matrix.database == 'supabase'
 
-      - name: Component Tests
-        run: pnpm test:components
-
       - name: Integration Tests
         run: pnpm test:int
         env:

.gitignore

@@ -8,12 +8,15 @@ test-results
 .devcontainer
 .localstack
 /migrations
-/media
 .localstack
 .turbo
 
 .turbo
 
+# Ignore test directory media folder/files
+/media
+/versions
+
 # Created by https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 # Edit at https://www.toptal.com/developers/gitignore?templates=node,macos,windows,webstorm,sublimetext,visualstudiocode
 
@@ -285,3 +288,4 @@ $RECYCLE.BIN/
 # End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
 /build
+.swc

.swcrc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "sourceMaps": "inline",
+  "jsc": {
+    "target": "esnext",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dts": true
+    }
+  },
+  "module": {
+    "type": "es6"
+  }
+}

docs/hooks/collections.mdx

@@ -292,13 +292,11 @@ For auth-enabled Collections, this hook runs after successful `forgotPassword` o
 ```ts
 import { CollectionAfterForgotPasswordHook } from 'payload/types'
 
-const afterLoginHook: CollectionAfterForgotPasswordHook = async ({
-  req, // full express request
-  user, // user being logged in
-  token, // user token
-}) => {
-  return user
-}
+const afterForgotPasswordHook: CollectionAfterForgotPasswordHook = async ({
+  args, // arguments passed into the operation
+  context, 
+  collection, // The collection which this hook is being run on
+}) => {...}
 ```
 
 ## TypeScript

docs/plugins/build-your-own.mdx

@@ -290,5 +290,5 @@ If you've configured tests for your package, integrate them into your workf
 The best way to share and allow others to use your plugin once it is complete is to publish an NPM package. This process is straightforward and well documented, find out more about [creating and publishing a NPM package here](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/).
 ##### Add payload-plugin topic tag:
 Apply the tag **payload-plugin** to your GitHub repository. This will boost the visibility of your plugin and ensure it gets listed with [existing payload plugins](https://github.com/topics/payload-plugin).
-##### Use [Semantic Versioning](https://semver.org/) (SemVar):
-With the SemVar system you release version numbers that reflect the nature of changes (major, minor, patch). Ensure all major versions reference their Payload compatibility.
+##### Use [Semantic Versioning](https://semver.org/) (SemVer):
+With the SemVer system you release version numbers that reflect the nature of changes (major, minor, patch). Ensure all major versions reference their Payload compatibility.

emptyModule.js

@@ -0,0 +1 @@
+export default {}

jest.components.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-  moduleNameMapper: {
-    '\\.(css|scss)$': '<rootDir>/packages/payload/src/bundlers/mocks/emptyModule.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      '<rootDir>/packages/payload/src/bundlers/mocks/fileMock.js',
-  },
-  setupFilesAfterEnv: ['./test/componentsSetup.js'],
-  testEnvironment: 'jsdom',
-  testPathIgnorePatterns: ['node_modules', 'dist'],
-  testRegex: '(/src/admin/.*\\.(test|spec))\\.[jt]sx?$',
-  testTimeout: 15000,
-  transform: {
-    '^.+\\.(t|j)sx?$': ['@swc/jest'],
-  },
-  verbose: true,
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-monorepo",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "private": true,
   "type": "module",
   "workspaces:": [
@@ -8,9 +8,10 @@
   ],
   "scripts": {
     "build": "pnpm run build:core",
+    "obliterate-playwright-cache": "rm -rf ~/Library/Caches/ms-playwright && find /System/Volumes/Data/private/var/folders -type d -name 'playwright*' -exec rm -rf {} ++ && npx playwright install",
     "build:all": "turbo build",
     "build:core": "turbo build --filter \"!@payloadcms/plugin-*\"",
-    "build:plugins": "turbo build --filter \"@payloadcms/plugin-*\" --filter \"!@payloadcms/plugin-search\" --filter \"!@payloadcms/plugin-redirects\" --filter \"!@payloadcms/plugin-nested-docs\"",
+    "build:plugins": "turbo build --filter \"@payloadcms/plugin-*\"",
     "build:app": "next build",
     "build:app:analyze": "cross-env ANALYZE=true next build",
     "build:create-payload-app": "turbo build --filter create-payload-app",
@@ -40,6 +41,7 @@
     "clean:build": "find . \\( -type d \\( -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -not -path '*/node_modules/*' -exec rm -rf {} +",
     "clean:all": "find . \\( -type d \\( -name node_modules -o -name dist -o -name .cache -o -name .next -o -name .turbo \\) -o -type f -name tsconfig.tsbuildinfo \\) -exec rm -rf {} +",
     "dev": "cross-env node --no-deprecation ./test/dev.js",
+    "devsafe": "rm -rf .next && cross-env node --no-deprecation ./test/dev.js",
     "dev:generate-graphql-schema": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateGraphQLSchema.ts",
     "dev:generate-types": "cross-env NODE_OPTIONS=--no-deprecation tsx ./test/generateTypes.ts",
     "dev:postgres": "pnpm --filter payload run dev:postgres",
@@ -70,7 +72,7 @@
     "@next/bundle-analyzer": "^14.1.0",
     "@octokit/core": "^5.1.0",
     "@payloadcms/eslint-config": "workspace:*",
-    "@playwright/test": "1.42.1",
+    "@playwright/test": "^1.42.1",
     "@swc/cli": "^0.1.62",
     "@swc/jest": "0.2.36",
     "@testing-library/jest-dom": "6.4.2",
@@ -122,8 +124,8 @@
     "nodemon": "3.0.3",
     "pino": "8.15.0",
     "pino-pretty": "10.2.0",
-    "playwright": "file:playwright-1.43.0-next.tgz",
-    "playwright-core": "file:playwright-core-1.43.0-next.tgz",
+    "playwright": "^1.42.1",
+    "playwright-core": "^1.42.1",
     "prettier": "^3.0.3",
     "prompts": "2.4.2",
     "qs": "6.11.2",
@@ -155,7 +157,8 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "prettier --write"
+      "prettier --write",
+      "eslint --cache --fix"
     ]
   },
   "dependencies": {
@@ -171,9 +174,7 @@
       "graphql": "^16.8.1",
       "react": "$react",
       "react-dom": "$react-dom",
-      "typescript": "$typescript",
-      "playwright": "file:playwright-1.43.0-next.tgz",
-      "playwright-core": "file:playwright-core-1.43.0-next.tgz"
+      "typescript": "$typescript"
     },
     "allowedDeprecatedVersions": {
       "uuid": "3.4.0",

packages/create-payload-app/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/db-mongodb/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/db-mongodb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-mongodb",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "description": "The officially supported MongoDB database adapter for Payload - Update 2",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/db-postgres/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/db-postgres/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/db-postgres",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "description": "The officially supported Postgres database adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/db-postgres/src/connect.ts

@@ -1,14 +1,14 @@
 import type { Payload } from 'payload'
 import type { Connect } from 'payload/database'
 
-import { eq, sql } from 'drizzle-orm'
+import { sql } from 'drizzle-orm'
 import { drizzle } from 'drizzle-orm/node-postgres'
-import { numeric, timestamp, varchar } from 'drizzle-orm/pg-core'
 import pg from 'pg'
-import prompts from 'prompts'
 
 import type { PostgresAdapter } from './types.js'
 
+import { pushDevSchema } from './utilities/pushDevSchema.js'
+
 const connectWithReconnect = async function ({
   adapter,
   payload,
@@ -93,70 +93,5 @@ export const connect: Connect = async function connect(
   )
     return
 
-  const { pushSchema } = await import('drizzle-kit/payload')
-
-  // This will prompt if clarifications are needed for Drizzle to push new schema
-  const { apply, hasDataLoss, statementsToExecute, warnings } = await pushSchema(
-    this.schema,
-    this.drizzle,
-  )
-
-  if (warnings.length) {
-    let message = `Warnings detected during schema push: \n\n${warnings.join('\n')}\n\n`
-
-    if (hasDataLoss) {
-      message += `DATA LOSS WARNING: Possible data loss detected if schema is pushed.\n\n`
-    }
-
-    message += `Accept warnings and push schema to database?`
-
-    const { confirm: acceptWarnings } = await prompts(
-      {
-        name: 'confirm',
-        type: 'confirm',
-        initial: false,
-        message,
-      },
-      {
-        onCancel: () => {
-          process.exit(0)
-        },
-      },
-    )
-
-    // Exit if user does not accept warnings.
-    // Q: Is this the right type of exit for this interaction?
-    if (!acceptWarnings) {
-      process.exit(0)
-    }
-  }
-
-  await apply()
-
-  // Migration table def in order to use query using drizzle
-  const migrationsSchema = this.pgSchema.table('payload_migrations', {
-    name: varchar('name'),
-    batch: numeric('batch'),
-    created_at: timestamp('created_at'),
-    updated_at: timestamp('updated_at'),
-  })
-
-  const devPush = await this.drizzle
-    .select()
-    .from(migrationsSchema)
-    .where(eq(migrationsSchema.batch, '-1'))
-
-  if (!devPush.length) {
-    await this.drizzle.insert(migrationsSchema).values({
-      name: 'dev',
-      batch: '-1',
-    })
-  } else {
-    await this.drizzle
-      .update(migrationsSchema)
-      .set({
-        updated_at: new Date(),
-      })
-      .where(eq(migrationsSchema.batch, '-1'))
-  }
+  await pushDevSchema(this)
 }

packages/db-postgres/src/createMigration.ts

@@ -3,10 +3,13 @@ import type { DrizzleSnapshotJSON } from 'drizzle-kit/payload'
 import type { CreateMigration } from 'payload/database'
 
 import fs from 'fs'
+import { createRequire } from 'module'
 import prompts from 'prompts'
 
 import type { PostgresAdapter } from './types.js'
 
+const require = createRequire(import.meta.url)
+
 const migrationTemplate = (
   upSQL?: string,
   downSQL?: string,
@@ -60,7 +63,7 @@ export const createMigration: CreateMigration = async function createMigration(
     fs.mkdirSync(dir)
   }
 
-  const { generateDrizzleJson, generateMigration } = await import('drizzle-kit/payload')
+  const { generateDrizzleJson, generateMigration } = require('drizzle-kit/payload')
 
   const [yyymmdd, hhmmss] = new Date().toISOString().split('T')
   const formattedDate = yyymmdd.replace(/\D/g, '')

packages/db-postgres/src/destroy.ts

@@ -2,7 +2,13 @@ import type { Destroy } from 'payload/database'
 
 import type { PostgresAdapter } from './types.js'
 
+import { pushDevSchema } from './utilities/pushDevSchema.js'
+
 export const destroy: Destroy = async function destroy(this: PostgresAdapter) {
-  // TODO: this hangs test suite for some reason
-  // await this.pool.end()
+  if (process.env.NODE_ENV !== 'production') {
+    await pushDevSchema(this)
+  } else {
+    // TODO: this hangs test suite for some reason
+    // await this.pool.end()
+  }
 }

packages/db-postgres/src/migrate.ts

@@ -3,6 +3,7 @@ import type { Payload } from 'payload'
 import type { Migration } from 'payload/database'
 import type { PayloadRequest } from 'payload/types'
 
+import { createRequire } from 'module'
 import {
   commitTransaction,
   initTransaction,
@@ -17,6 +18,8 @@ import { createMigrationTable } from './utilities/createMigrationTable.js'
 import { migrationTableExists } from './utilities/migrationTableExists.js'
 import { parseError } from './utilities/parseError.js'
 
+const require = createRequire(import.meta.url)
+
 export async function migrate(this: PostgresAdapter): Promise<void> {
   const { payload } = this
   const migrationFiles = await readMigrationFiles({ payload })
@@ -82,7 +85,7 @@ export async function migrate(this: PostgresAdapter): Promise<void> {
 }
 
 async function runMigrationFile(payload: Payload, migration: Migration, batch: number) {
-  const { generateDrizzleJson } = await import('drizzle-kit/payload')
+  const { generateDrizzleJson } = require('drizzle-kit/payload')
 
   const start = Date.now()
   const req = { payload } as PayloadRequest

packages/db-postgres/src/utilities/pushDevSchema.ts

@@ -0,0 +1,83 @@
+import { eq } from 'drizzle-orm'
+import { numeric, timestamp, varchar } from 'drizzle-orm/pg-core'
+import { createRequire } from 'module'
+import prompts from 'prompts'
+
+import type { PostgresAdapter } from '../types.js'
+
+const require = createRequire(import.meta.url)
+
+/**
+ * Pushes the development schema to the database using Drizzle.
+ *
+ * @param {PostgresAdapter} db - The PostgresAdapter instance connected to the database.
+ * @returns {Promise<void>} - A promise that resolves once the schema push is complete.
+ */
+export const pushDevSchema = async (db: PostgresAdapter) => {
+  const { pushSchema } = require('drizzle-kit/payload')
+
+  // This will prompt if clarifications are needed for Drizzle to push new schema
+  const { apply, hasDataLoss, statementsToExecute, warnings } = await pushSchema(
+    db.schema,
+    db.drizzle,
+  )
+
+  if (warnings.length) {
+    let message = `Warnings detected during schema push: \n\n${warnings.join('\n')}\n\n`
+
+    if (hasDataLoss) {
+      message += `DATA LOSS WARNING: Possible data loss detected if schema is pushed.\n\n`
+    }
+
+    message += `Accept warnings and push schema to database?`
+
+    const { confirm: acceptWarnings } = await prompts(
+      {
+        name: 'confirm',
+        type: 'confirm',
+        initial: false,
+        message,
+      },
+      {
+        onCancel: () => {
+          process.exit(0)
+        },
+      },
+    )
+
+    // Exit if user does not accept warnings.
+    // Q: Is this the right type of exit for this interaction?
+    if (!acceptWarnings) {
+      process.exit(0)
+    }
+  }
+
+  await apply()
+
+  // Migration table def in order to use query using drizzle
+  const migrationsSchema = db.pgSchema.table('payload_migrations', {
+    name: varchar('name'),
+    batch: numeric('batch'),
+    created_at: timestamp('created_at'),
+    updated_at: timestamp('updated_at'),
+  })
+
+  const devPush = await db.drizzle
+    .select()
+    .from(migrationsSchema)
+    .where(eq(migrationsSchema.batch, '-1'))
+
+  if (!devPush.length) {
+    await db.drizzle.insert(migrationsSchema).values({
+      name: 'dev',
+      batch: '-1',
+    })
+  } else {
+    await db.drizzle
+      .update(migrationsSchema)
+      .set({
+        updated_at: new Date(),
+      })
+      .where(eq(migrationsSchema.batch, '-1'))
+  }
+}

packages/graphql/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/graphql",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",
   "type": "module",

packages/live-preview-react/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/live-preview/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/next/.swcrc

@@ -1,12 +1,22 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {
       "syntax": "typescript",
       "tsx": true,
       "dts": true
+    },
+    "experimental": {
+      "plugins": [
+        [
+          "swc-plugin-transform-remove-imports",
+          {
+            "test": "\\.(scss|css)$"
+          }
+        ]
+      ]
     }
   },
   "module": {

packages/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/next",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "main": "./src/index.ts",
   "types": "./src/index.d.ts",
   "type": "module",
@@ -8,9 +8,10 @@
     "@payloadcms/next": "./dist/bin/index.js"
   },
   "scripts": {
-    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:webpack && rm dist/prod/index.js",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build:webpack": "webpack --config webpack.config.js",
     "clean": "rimraf {dist,*.tsbuildinfo}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" \"src/app/api/**\" dist/ && pnpm copyfiles:api",
     "copyfiles:api": "copyfiles -u 1 \"src/app/(payload)/**\" dist/template",
@@ -50,7 +51,18 @@
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
     "@types/ws": "^8.5.10",
-    "payload": "workspace:*"
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "mini-css-extract-plugin": "1.6.2",
+    "payload": "workspace:*",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.0",
+    "sass-loader": "^14.1.1",
+    "swc-loader": "^0.2.6",
+    "swc-plugin-transform-remove-imports": "^1.12.1",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -79,6 +91,11 @@
     "main": "./dist/exports/index.js",
     "types": "./dist/exports/index.d.ts",
     "exports": {
+      "./css": {
+        "import": "./dist/prod/styles.css",
+        "require": "./dist/prod/styles.css",
+        "default": "./dist/prod/styles.css"
+      },
       "./withPayload": {
         "import": "./dist/withPayload.js",
         "require": "./dist/withPayload.js",

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

@@ -1,6 +1,5 @@
 import type { SanitizedConfig } from 'payload/types'
 
-import { auth } from '@payloadcms/next/utilities/auth'
 import { translations } from '@payloadcms/translations/client'
 import { RootProvider, buildComponentMap } from '@payloadcms/ui'
 import '@payloadcms/ui/scss/app.scss'
@@ -11,6 +10,7 @@ import React from 'react'
 import 'react-toastify/dist/ReactToastify.css'
 
 import { ClearRouteCache } from '../../elements/ClearRouteCache/index.js'
+import { auth } from '../../utilities/auth.js'
 import { getPayload } from '../../utilities/getPayload.js'
 import { getRequestLanguage } from '../../utilities/getRequestLanguage.js'
 import { DefaultEditView } from '../../views/Edit/Default/index.js'
@@ -38,7 +38,7 @@ export const RootLayout = async ({
 
   const payload = await getPayload({ config: configPromise })
 
-  const { cookies, permissions, user } = await auth({
+  const { cookies, permissions } = await auth({
     headers,
     payload,
   })

packages/next/src/scss/app.scss

@@ -1,5 +1,5 @@
-@import 'fonts';
-@import 'styles';
+@import './fonts.scss';
+@import './styles.scss';
 @import './toastify.scss';
 @import './colors.scss';
 

packages/next/src/utilities/auth.ts

@@ -1,34 +1,36 @@
 import type { Payload, PayloadRequest } from 'payload/types'
 
 import { getAccessResults, getAuthenticatedUser, parseCookies } from 'payload/auth'
-import { cache } from 'react'
 
-export const auth = cache(
-  async ({ headers, payload }: { headers: Request['headers']; payload: Payload }) => {
-    const cookies = parseCookies(headers)
+type Args = {
+  headers: Request['headers']
+  payload: Payload
+}
 
-    const user = await getAuthenticatedUser({
-      cookies,
+export const auth = async ({ headers, payload }: Args) => {
+  const cookies = parseCookies(headers)
+
+  const user = await getAuthenticatedUser({
+    cookies,
+    headers,
+    payload,
+  })
+
+  const permissions = await getAccessResults({
+    req: {
+      context: {},
       headers,
+      i18n: undefined,
       payload,
-    })
-
-    const permissions = await getAccessResults({
-      req: {
-        context: {},
-        headers,
-        i18n: undefined,
-        payload,
-        payloadAPI: 'REST',
-        t: undefined,
-        user,
-      } as PayloadRequest,
-    })
-
-    return {
-      cookies,
-      permissions,
+      payloadAPI: 'REST',
+      t: undefined,
       user,
-    }
-  },
-)
+    } as PayloadRequest,
+  })
+
+  return {
+    cookies,
+    permissions,
+    user,
+  }
+}

packages/next/src/utilities/getPayload.ts

@@ -8,15 +8,22 @@ let cached = global._payload
 
 if (!cached) {
   // eslint-disable-next-line no-multi-assign
-  cached = global._payload = { payload: null, promise: null }
+  cached = global._payload = { payload: null, promise: null, reload: false }
 }
 
 export const getPayload = async (options: InitOptions): Promise<Payload> => {
+  if (!options?.config) {
+    throw new Error('Error: the payload config is required for getPayload to work.')
+  }
+
   if (cached.payload) {
     const config = await options.config
 
-    if (cached.reload) {
-      cached.reload = false
+    if (cached.reload === true) {
+      let resolve
+
+      cached.reload = new Promise((res) => (resolve = res))
+
       if (typeof cached.payload.db.destroy === 'function') {
         await cached.payload.db.destroy()
       }
@@ -33,6 +40,11 @@ export const getPayload = async (options: InitOptions): Promise<Payload> => {
 
       await cached.payload.db.init()
       await cached.payload.db.connect({ hotReload: true })
+      resolve()
+    }
+
+    if (cached.reload instanceof Promise) {
+      await cached.reload
     }
 
     return cached.payload
@@ -47,7 +59,8 @@ export const getPayload = async (options: InitOptions): Promise<Payload> => {
 
     if (process.env.NODE_ENV !== 'production') {
       try {
-        const ws = new WebSocket('ws://localhost:3000/_next/webpack-hmr')
+        const port = process.env.PORT || '3000'
+        const ws = new WebSocket(`ws://localhost:${port}/_next/webpack-hmr`)
 
         ws.onmessage = (event) => {
           if (typeof event.data === 'string') {

packages/next/src/views/Account/index.tsx

@@ -22,8 +22,8 @@ export { generateAccountMetadata } from './meta.js'
 
 export const Account: React.FC<AdminViewProps> = async ({ initPageResult, searchParams }) => {
   const {
-    permissions,
     locale,
+    permissions,
     req: {
       i18n,
       payload,
@@ -53,6 +53,7 @@ export const Account: React.FC<AdminViewProps> = async ({ initPageResult, search
         id: user.id,
         collection: userSlug,
         depth: 0,
+        overrideAccess: false,
         user,
       })
     } catch (error) {

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

@@ -106,6 +106,7 @@ export const Document: React.FC<AdminViewProps> = async ({
           collection: collectionSlug,
           depth: 0,
           locale: locale.code,
+          overrideAccess: false,
           user,
         })
       } catch (error) {} // eslint-disable-line no-empty
@@ -148,6 +149,7 @@ export const Document: React.FC<AdminViewProps> = async ({
         slug: globalSlug,
         depth: 0,
         locale: locale.code,
+        overrideAccess: false,
         user,
       })
     } catch (error) {} // eslint-disable-line no-empty

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

@@ -1,172 +0,0 @@
-import { render } from '@testing-library/react'
-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'
-
-jest.mock('../../../../utilities/Config', () => ({
-  useConfig: () => ({ admin: { dateFormat: 'MMMM do yyyy, h:mm a' } }),
-}))
-
-jest.mock('../../../../providers/Translation', () => ({
-  useTranslation: () => ({ t: (string) => string }),
-}))
-
-describe('Cell Types', () => {
-  describe('Blocks', () => {
-    const field: BlockField = {
-      blocks: [
-        {
-          fields: [],
-          labels: {
-            plural: 'Numbers',
-            singular: 'Number',
-          },
-          slug: 'number',
-        },
-      ],
-      label: 'Blocks Content',
-      labels: {
-        plural: 'Blocks Content',
-        singular: 'Block',
-      },
-      name: 'blocks',
-      type: 'blocks',
-    }
-
-    it('renders multiple', () => {
-      const data = [{ blockType: 'number' }, { blockType: 'number' }]
-      const { container } = render(<BlocksCell data={data} field={field} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('2 Blocks Content - Number, Number')
-    })
-
-    it('renders zero', () => {
-      const data = []
-      const { container } = render(<BlocksCell data={data} field={field} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('0 Blocks Content')
-    })
-
-    it('renders "and X more" if over maximum of 5', () => {
-      const data = [
-        { blockType: 'number' },
-        { blockType: 'number' },
-        { blockType: 'number' },
-        { blockType: 'number' },
-        { blockType: 'number' },
-        { blockType: 'number' },
-      ]
-
-      const { container } = render(<BlocksCell data={data} field={field} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('fields:itemsAndMore')
-    })
-  })
-
-  describe('Date', () => {
-    const field: DateField = {
-      admin: {
-        date: {
-          pickerAppearance: 'dayOnly',
-        },
-      },
-      name: 'dayOnly',
-      type: 'date',
-    }
-
-    it('renders date', () => {
-      const timeStamp = '2020-10-06T14:07:39.033Z'
-      const { container } = render(<DateCell data={timeStamp} field={field} />)
-      const dateMatch = /October\s6th\s2020,\s\d{1,2}:07\s[A|P]M/ // Had to account for timezones in CI
-      const el = container.querySelector('span')
-      expect(el.textContent).toMatch(dateMatch)
-    })
-
-    it('handles undefined', () => {
-      const timeStamp = undefined
-      const { container } = render(<DateCell data={timeStamp} field={field} />)
-      const el = container.querySelector('span')
-      expect(el.textContent).toBe('')
-    })
-  })
-
-  describe('Checkbox', () => {
-    it('renders true', () => {
-      const { container } = render(<Checkbox data />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('true')
-    })
-    it('renders false', () => {
-      const { container } = render(<Checkbox data={false} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('false')
-    })
-  })
-
-  describe('Textarea', () => {
-    it('renders data', () => {
-      const { container } = render(<Textarea data="data" />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('data')
-    })
-    it('handle undefined - bug/13', () => {
-      const { container } = render(<Textarea data={undefined} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('')
-    })
-  })
-  describe('Select', () => {
-    const fieldWithOptionsObject: SelectField = {
-      name: 'selectObject',
-      options: [
-        {
-          label: 'One',
-          value: 'one',
-        },
-        {
-          label: 'Two',
-          value: 'two',
-        },
-      ],
-      type: 'select',
-    }
-    const fieldWithStringsOptions: SelectField = {
-      name: 'selectString',
-      options: ['blue', 'green', 'yellow'],
-      type: 'select',
-    }
-    it('renders options objects', () => {
-      const { container } = render(<Select data="one" field={fieldWithOptionsObject} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('One')
-    })
-    it('renders option strings', () => {
-      const { container } = render(<Select data="blue" field={fieldWithStringsOptions} />)
-      const el = container.querySelector('span')
-      expect(el).toHaveTextContent('blue')
-    })
-
-    describe('HasMany', () => {
-      it('renders options objects', () => {
-        const { container } = render(
-          <Select data={['one', 'two']} field={fieldWithOptionsObject} />,
-        )
-        const el = container.querySelector('span')
-        expect(el).toHaveTextContent('One, Two')
-      })
-      it('renders option strings', () => {
-        const { container } = render(
-          <Select data={['blue', 'green']} field={fieldWithStringsOptions} />,
-        )
-        const el = container.querySelector('span')
-        expect(el).toHaveTextContent('blue, green')
-      })
-    })
-  })
-})

packages/next/src/views/List/index.tsx

@@ -72,6 +72,7 @@ export const ListView: React.FC<AdminViewProps> = async ({ initPageResult, searc
       collection: collectionSlug,
       depth: 0,
       limit,
+      overrideAccess: false,
       user,
     })
 

packages/next/src/views/Version/index.tsx

@@ -15,7 +15,7 @@ export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
     docID: id,
     globalConfig,
     permissions,
-    req: { payload, payload: { config } = {} } = {},
+    req: { payload, payload: { config } = {}, user } = {},
   } = initPageResult
 
   // /entityType/:entitySlug/:id/versions/:versionID
@@ -43,6 +43,8 @@ export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
         collection: slug,
         depth: 1,
         locale: '*',
+        overrideAccess: false,
+        user,
       })
 
       publishedDoc = await payload.findByID({
@@ -51,6 +53,8 @@ export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
         depth: 1,
         draft: false,
         locale: '*',
+        overrideAccess: false,
+        user,
       })
 
       mostRecentDoc = await payload.findByID({
@@ -59,6 +63,8 @@ export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
         depth: 1,
         draft: true,
         locale: '*',
+        overrideAccess: false,
+        user,
       })
     } catch (error) {
       return notFound()
@@ -75,6 +81,8 @@ export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
         slug,
         depth: 1,
         locale: '*',
+        overrideAccess: false,
+        user,
       })
 
       publishedDoc = payload.findGlobal({
@@ -82,6 +90,8 @@ export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
         depth: 1,
         draft: false,
         locale: '*',
+        overrideAccess: false,
+        user,
       })
 
       mostRecentDoc = payload.findGlobal({
@@ -89,6 +99,8 @@ export const VersionView: React.FC = async (props: ServerSideEditViewProps) => {
         depth: 1,
         draft: true,
         locale: '*',
+        overrideAccess: false,
+        user,
       })
     } catch (error) {
       return notFound()

packages/next/src/views/Versions/index.tsx

@@ -43,6 +43,7 @@ export const VersionsView: React.FC<ServerSideEditViewProps> = async (props) =>
         collection: collectionSlug,
         depth: 0,
         limit: limit ? parseInt(limit?.toString(), 10) : undefined,
+        overrideAccess: false,
         page: page ? parseInt(page.toString(), 10) : undefined,
         sort: sort as string,
         user,
@@ -62,6 +63,7 @@ export const VersionsView: React.FC<ServerSideEditViewProps> = async (props) =>
       versionsData = await payload.findGlobalVersions({
         slug: globalSlug,
         depth: 0,
+        overrideAccess: false,
         page: page ? parseInt(page as string, 10) : undefined,
         sort: sort as string,
         user,

packages/next/src/withPayload.js

@@ -33,8 +33,6 @@ const withPayload = (nextConfig = {}) => {
           ...(incomingWebpackConfig?.externals || []),
           'drizzle-kit',
           'drizzle-kit/payload',
-          'pino',
-          'pino-pretty',
           'sharp',
           'libsql',
         ],

packages/next/webpack.config.js

@@ -0,0 +1,107 @@
+import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TerserJSPlugin from 'terser-webpack-plugin'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const componentWebpackConfig = {
+  entry: path.resolve(dirname, './src/index.ts'),
+  externals: ['react', 'react-dom', 'payload', 'payload/config', 'react-image-crop'],
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            // exclude: /node_modules/,
+            test: /\.(t|j)sx?$/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  jsc: {
+                    experimental: {
+                      plugins: [
+                        // clear the plugins used in .swcrc
+                      ],
+                    },
+                    parser: {
+                      syntax: 'typescript',
+                      tsx: true,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            sideEffects: true,
+            test: /\.(scss|css)$/,
+            use: [
+              MiniCSSExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env'],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+          {
+            type: 'asset/resource',
+            generator: {
+              filename: 'payload/[name][ext]',
+            },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  output: {
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+    path: path.resolve(dirname, './dist/prod'),
+    publicPath: '/',
+  },
+  plugins: [
+    new MiniCSSExtractPlugin({
+      filename: 'styles.css',
+      ignoreOrder: true,
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+  resolve: {
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.scss', '.css'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+    extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
+    modules: [
+      'node_modules',
+      path.resolve(dirname, '../../node_modules'),
+      path.resolve(dirname, './node_modules'),
+    ],
+  },
+  stats: 'errors-only',
+}
+
+export default componentWebpackConfig

packages/payload/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "description": "Node, React and MongoDB Headless CMS and Application Framework",
   "license": "MIT",
   "main": "./src/index.js",

packages/payload/src/collections/config/schema.ts

@@ -94,16 +94,10 @@ const collectionSchema = joi.object().keys({
       maxLoginAttempts: joi.number(),
       removeTokenFromResponses: joi.boolean().valid(true),
       strategies: joi.array().items(
-        joi.alternatives().try(
-          strategyBaseSchema.keys({
-            name: joi.string().required(),
-            strategy: joi.func().maxArity(1).required(),
-          }),
-          strategyBaseSchema.keys({
-            name: joi.string(),
-            strategy: joi.object().required(),
-          }),
-        ),
+        joi.object().keys({
+          name: joi.string().required(),
+          authenticate: joi.func().required(),
+        }),
       ),
       tokenExpiration: joi.number(),
       useAPIKey: joi.boolean(),

packages/payload/src/config/createClientConfig.ts

@@ -85,6 +85,13 @@ const sanitizeCollections = (
       delete sanitized.upload.handlers
     }
 
+    if ('auth' in sanitized && typeof sanitized.auth === 'object') {
+      sanitized.auth = { ...sanitized.auth }
+      delete sanitized.auth.strategies
+      delete sanitized.auth.forgotPassword
+      delete sanitized.auth.verify
+    }
+
     if ('admin' in sanitized) {
       sanitized.admin = { ...sanitized.admin }
 

packages/payload/src/index.ts

@@ -273,13 +273,6 @@ export class BasePayload<TGeneratedTypes extends GeneratedTypes> {
     [slug: string]: any // TODO: Type this
   } = {}
 
-  delete<T extends keyof TGeneratedTypes['collections']>(
-    options: DeleteOptions<T>,
-  ): Promise<BulkOperationResult<T> | TGeneratedTypes['collections'][T]> {
-    const { deleteLocal } = localOperations
-    return deleteLocal<T>(this, options)
-  }
-
   /**
    * @description delete one or more documents
    * @param options
@@ -293,12 +286,22 @@ export class BasePayload<TGeneratedTypes extends GeneratedTypes> {
     options: DeleteManyOptions<T>,
   ): Promise<BulkOperationResult<T>>
 
+  delete<T extends keyof TGeneratedTypes['collections']>(
+    options: DeleteOptions<T>,
+  ): Promise<BulkOperationResult<T> | TGeneratedTypes['collections'][T]> {
+    const { deleteLocal } = localOperations
+    return deleteLocal<T>(this, options)
+  }
+
   /**
    * @description Initializes Payload
    * @param options
    */
-  // @ts-expect-error // TODO: TypeScript hallucinating again. fix later
   async init(options: InitOptions): Promise<Payload> {
+    if (!options?.config) {
+      throw new Error('Error: the payload config is required to initialize payload.')
+    }
+
     this.logger = Logger('payload', options.loggerOptions, options.loggerDestination)
 
     this.config = await options.config
@@ -421,7 +424,11 @@ if (!cached) {
   cached = global._payload = { payload: null, promise: null }
 }
 
-export const getPayload = async (options?: InitOptions): Promise<BasePayload<GeneratedTypes>> => {
+export const getPayload = async (options: InitOptions): Promise<BasePayload<GeneratedTypes>> => {
+  if (!options?.config) {
+    throw new Error('Error: the payload config is required for getPayload to work.')
+  }
+
   if (cached.payload) {
     return cached.payload
   }

packages/payload/src/preferences/operations/delete.ts

@@ -38,7 +38,6 @@ async function deleteOperation(args: PreferenceRequest): Promise<Document> {
     where,
   })
 
-  // @ts-expect-error // TODO: fix later
   if (result.docs.length === 1) {
     return result.docs[0]
   }

packages/payload/src/uploads/isImage.ts

@@ -1,5 +1,7 @@
 export default function isImage(mimeType: string): boolean {
   return (
-    ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp'].indexOf(mimeType) > -1
+    ['image/jpeg', 'image/png', 'image/gif', 'image/svg+xml', 'image/webp', 'image/avif'].indexOf(
+      mimeType,
+    ) > -1
   )
 }

packages/plugin-cloud-storage/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-cloud-storage/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@payloadcms/plugin-cloud-storage",
   "description": "The official cloud storage plugin for Payload CMS",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",

packages/plugin-cloud/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "exclude": ["/**/*.spec.ts", "/**/mocks"],
   "jsc": {
     "target": "esnext",

packages/plugin-cloud/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@payloadcms/plugin-cloud",
   "description": "The official Payload Cloud plugin",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",

packages/plugin-form-builder/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "exclude": ["/**/mocks"],
   "jsc": {
     "target": "esnext",

packages/plugin-form-builder/package.json

@@ -18,7 +18,7 @@
     "test": "echo \"No tests available.\""
   },
   "peerDependencies": {
-    "payload": "^0.18.5 || ^1.0.0 || ^2.0.0",
+    "payload": "workspace:*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {

packages/plugin-form-builder/src/collections/FormSubmissions/hooks/createCharge.ts

@@ -1,4 +1,4 @@
-import type { PluginConfig } from '../../../types'
+import type { PluginConfig } from '../../../types.js'
 
 const createCharge = async (beforeChangeData: any, formConfig: PluginConfig): Promise<any> => {
   const { data, operation } = beforeChangeData

packages/plugin-form-builder/src/collections/FormSubmissions/hooks/sendEmail.ts

@@ -1,8 +1,8 @@
-import type { Email, FormattedEmail, PluginConfig } from '../../../types'
+import type { Email, FormattedEmail, PluginConfig } from '../../../types.js'
 
-import { serializeLexical } from '../../../utilities/lexical/serializeLexical'
-import { replaceDoubleCurlys } from '../../../utilities/replaceDoubleCurlys'
-import { serializeSlate } from '../../../utilities/slate/serializeSlate'
+import { serializeLexical } from '../../../utilities/lexical/serializeLexical.js'
+import { replaceDoubleCurlys } from '../../../utilities/replaceDoubleCurlys.js'
+import { serializeSlate } from '../../../utilities/slate/serializeSlate.js'
 
 const sendEmail = async (beforeChangeData: any, formConfig: PluginConfig): Promise<any> => {
   const { data, operation, req } = beforeChangeData

packages/plugin-form-builder/src/collections/FormSubmissions/index.ts

@@ -1,9 +1,9 @@
 import type { CollectionConfig } from 'payload/types'
 
-import type { PluginConfig } from '../../types'
+import type { PluginConfig } from '../../types.js'
 
-import createCharge from './hooks/createCharge'
-import sendEmail from './hooks/sendEmail'
+import createCharge from './hooks/createCharge.js'
+import sendEmail from './hooks/sendEmail.js'
 
 // all settings can be overridden by the config
 export const generateSubmissionCollection = (formConfig: PluginConfig): CollectionConfig => {
@@ -31,7 +31,7 @@ export const generateSubmissionCollection = (formConfig: PluginConfig): Collecti
         },
         relationTo: formSlug,
         required: true,
-        validate: async (value, { payload, req }) => {
+        validate: async (value, { req: { payload }, req }) => {
           /* Don't run in the client side */
           if (!payload) return true
 

packages/plugin-form-builder/src/collections/Forms/DynamicFieldSelector.tsx

@@ -34,5 +34,7 @@ export const DynamicFieldSelector: React.FC<TextField> = (props) => {
     }
   }, [fields, getDataByPath])
 
+  // TODO: label from config is Record<string, string> | false | string
+  //  but the FormFieldBase type has only label?: string, changing FormFieldBase breaks other ui components
   return <Select {...props} options={options} />
 }

packages/plugin-form-builder/src/collections/Forms/fields.ts

@@ -1,39 +1,41 @@
 import type { Block, Field } from 'payload/types'
 
-import type { FieldConfig, PaymentFieldConfig } from '../../types'
+import type { FieldConfig, PaymentFieldConfig } from '../../types.js'
 
-import { DynamicFieldSelector } from './DynamicFieldSelector'
-import { DynamicPriceSelector } from './DynamicPriceSelector'
+import { DynamicFieldSelector } from './DynamicFieldSelector.js'
+import { DynamicPriceSelector } from './DynamicPriceSelector.js'
 
 const name: Field = {
   name: 'name',
+  type: 'text',
   label: 'Name (lowercase, no special characters)',
   required: true,
-  type: 'text',
 }
 
 const label: Field = {
   name: 'label',
+  type: 'text',
   label: 'Label',
   localized: true,
-  type: 'text',
 }
 
 const required: Field = {
   name: 'required',
-  label: 'Required',
   type: 'checkbox',
+  label: 'Required',
 }
 
 const width: Field = {
   name: 'width',
-  label: 'Field Width (percentage)',
   type: 'number',
+  label: 'Field Width (percentage)',
 }
 
 const Select: Block = {
+  slug: 'select',
   fields: [
     {
+      type: 'row',
       fields: [
         {
           ...name,
@@ -48,9 +50,9 @@ const Select: Block = {
           },
         },
       ],
-      type: 'row',
     },
     {
+      type: 'row',
       fields: [
         {
           ...width,
@@ -60,42 +62,42 @@ const Select: Block = {
         },
         {
           name: 'defaultValue',
+          type: 'text',
           admin: {
             width: '50%',
           },
           label: 'Default Value',
           localized: true,
-          type: 'text',
         },
       ],
-      type: 'row',
     },
     {
       name: 'options',
+      type: 'array',
       fields: [
         {
+          type: 'row',
           fields: [
             {
               name: 'label',
+              type: 'text',
               admin: {
                 width: '50%',
               },
               label: 'Label',
               localized: true,
               required: true,
-              type: 'text',
             },
             {
               name: 'value',
+              type: 'text',
               admin: {
                 width: '50%',
               },
               label: 'Value',
               required: true,
-              type: 'text',
             },
           ],
-          type: 'row',
         },
       ],
       label: 'Select Attribute Options',
@@ -103,7 +105,6 @@ const Select: Block = {
         plural: 'Options',
         singular: 'Option',
       },
-      type: 'array',
     },
     required,
   ],
@@ -111,12 +112,13 @@ const Select: Block = {
     plural: 'Select Fields',
     singular: 'Select',
   },
-  slug: 'select',
 }
 
 const Text: Block = {
+  slug: 'text',
   fields: [
     {
+      type: 'row',
       fields: [
         {
           ...name,
@@ -131,9 +133,9 @@ const Text: Block = {
           },
         },
       ],
-      type: 'row',
     },
     {
+      type: 'row',
       fields: [
         {
           ...width,
@@ -143,15 +145,14 @@ const Text: Block = {
         },
         {
           name: 'defaultValue',
+          type: 'text',
           admin: {
             width: '50%',
           },
           label: 'Default Value',
           localized: true,
-          type: 'text',
         },
       ],
-      type: 'row',
     },
     required,
   ],
@@ -159,12 +160,13 @@ const Text: Block = {
     plural: 'Text Fields',
     singular: 'Text',
   },
-  slug: 'text',
 }
 
 const TextArea: Block = {
+  slug: 'textarea',
   fields: [
     {
+      type: 'row',
       fields: [
         {
           ...name,
@@ -179,9 +181,9 @@ const TextArea: Block = {
           },
         },
       ],
-      type: 'row',
     },
     {
+      type: 'row',
       fields: [
         {
           ...width,
@@ -191,15 +193,14 @@ const TextArea: Block = {
         },
         {
           name: 'defaultValue',
+          type: 'text',
           admin: {
             width: '50%',
           },
           label: 'Default Value',
           localized: true,
-          type: 'text',
         },
       ],
-      type: 'row',
     },
     required,
   ],
@@ -207,12 +208,13 @@ const TextArea: Block = {
     plural: 'Text Area Fields',
     singular: 'Text Area',
   },
-  slug: 'textarea',
 }
 
 const Number: Block = {
+  slug: 'number',
   fields: [
     {
+      type: 'row',
       fields: [
         {
           ...name,
@@ -227,9 +229,9 @@ const Number: Block = {
           },
         },
       ],
-      type: 'row',
     },
     {
+      type: 'row',
       fields: [
         {
           ...width,
@@ -239,14 +241,13 @@ const Number: Block = {
         },
         {
           name: 'defaultValue',
+          type: 'number',
           admin: {
             width: '50%',
           },
           label: 'Default Value',
-          type: 'number',
         },
       ],
-      type: 'row',
     },
     required,
   ],
@@ -254,12 +255,13 @@ const Number: Block = {
     plural: 'Number Fields',
     singular: 'Number',
   },
-  slug: 'number',
 }
 
 const Email: Block = {
+  slug: 'email',
   fields: [
     {
+      type: 'row',
       fields: [
         {
           ...name,
@@ -274,7 +276,6 @@ const Email: Block = {
           },
         },
       ],
-      type: 'row',
     },
     width,
     required,
@@ -283,12 +284,13 @@ const Email: Block = {
     plural: 'Email Fields',
     singular: 'Email',
   },
-  slug: 'email',
 }
 
 const State: Block = {
+  slug: 'state',
   fields: [
     {
+      type: 'row',
       fields: [
         {
           ...name,
@@ -303,7 +305,6 @@ const State: Block = {
           },
         },
       ],
-      type: 'row',
     },
     width,
     required,
@@ -312,12 +313,13 @@ const State: Block = {
     plural: 'State Fields',
     singular: 'State',
   },
-  slug: 'state',
 }
 
 const Country: Block = {
+  slug: 'country',
   fields: [
     {
+      type: 'row',
       fields: [
         {
           ...name,
@@ -332,7 +334,6 @@ const Country: Block = {
           },
         },
       ],
-      type: 'row',
     },
     width,
     required,
@@ -341,12 +342,13 @@ const Country: Block = {
     plural: 'Country Fields',
     singular: 'Country',
   },
-  slug: 'country',
 }
 
 const Checkbox: Block = {
+  slug: 'checkbox',
   fields: [
     {
+      type: 'row',
       fields: [
         {
           ...name,
@@ -361,9 +363,9 @@ const Checkbox: Block = {
           },
         },
       ],
-      type: 'row',
     },
     {
+      type: 'row',
       fields: [
         {
           ...width,
@@ -378,19 +380,17 @@ const Checkbox: Block = {
           },
         },
       ],
-      type: 'row',
     },
     {
       name: 'defaultValue',
-      label: 'Default Value',
       type: 'checkbox',
+      label: 'Default Value',
     },
   ],
   labels: {
     plural: 'Checkbox Fields',
     singular: 'Checkbox',
   },
-  slug: 'checkbox',
 }
 
 const Payment = (fieldConfig: PaymentFieldConfig): Block => {
@@ -398,16 +398,18 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
   if (fieldConfig?.paymentProcessor) {
     paymentProcessorField = {
       name: 'paymentProcessor',
+      type: 'select',
       label: 'Payment Processor',
       options: [],
-      type: 'select',
       ...fieldConfig.paymentProcessor,
     }
   }
 
   const fields = {
+    slug: 'payment',
     fields: [
       {
+        type: 'row',
         fields: [
           {
             ...name,
@@ -422,9 +424,9 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
             },
           },
         ],
-        type: 'row',
       },
       {
+        type: 'row',
         fields: [
           {
             ...width,
@@ -434,30 +436,31 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
           },
           {
             name: 'basePrice',
+            type: 'number',
             admin: {
               width: '50%',
             },
             label: 'Base Price',
-            type: 'number',
           },
         ],
-        type: 'row',
       },
       paymentProcessorField,
       {
         name: 'priceConditions',
+        type: 'array',
         fields: [
           {
             name: 'fieldToUse',
+            type: 'text',
             admin: {
               components: {
                 Field: DynamicFieldSelector,
               },
             },
-            type: 'text',
           },
           {
             name: 'condition',
+            type: 'select',
             defaultValue: 'hasValue',
             label: 'Condition',
             options: [
@@ -474,19 +477,19 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
                 value: 'notEquals',
               },
             ],
-            type: 'select',
           },
           {
             name: 'valueForCondition',
+            type: 'text',
             admin: {
               condition: (_: any, { condition }: any) =>
                 condition === 'equals' || condition === 'notEquals',
             },
             label: 'Value',
-            type: 'text',
           },
           {
             name: 'operator',
+            type: 'select',
             defaultValue: 'add',
             options: [
               {
@@ -506,10 +509,10 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
                 value: 'divide',
               },
             ],
-            type: 'select',
           },
           {
             name: 'valueType',
+            type: 'radio',
             admin: {
               width: '100%',
             },
@@ -525,17 +528,16 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
                 value: 'valueOfField',
               },
             ],
-            type: 'radio',
           },
           {
             name: 'valueForOperator',
+            type: 'text',
             admin: {
               components: {
                 Field: DynamicPriceSelector,
               },
             },
             label: 'Value',
-            type: 'text',
           },
         ],
         label: 'Price Conditions',
@@ -543,7 +545,6 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
           plural: 'Price Conditions',
           singular: 'Price Condition',
         },
-        type: 'array',
       },
       required,
     ].filter(Boolean) as Field[],
@@ -551,25 +552,24 @@ const Payment = (fieldConfig: PaymentFieldConfig): Block => {
       plural: 'Payment Fields',
       singular: 'Payment',
     },
-    slug: 'payment',
   }
 
   return fields
 }
 
 const Message: Block = {
+  slug: 'message',
   fields: [
     {
       name: 'message',
-      localized: true,
       type: 'richText',
+      localized: true,
     },
   ],
   labels: {
     plural: 'Message Blocks',
     singular: 'Message',
   },
-  slug: 'message',
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions

packages/plugin-form-builder/src/collections/Forms/index.ts

@@ -2,14 +2,15 @@ import type { Block, CollectionConfig, Field } from 'payload/types'
 
 import merge from 'deepmerge'
 
-import type { FieldConfig, PluginConfig } from '../../types'
+import type { FieldConfig, PluginConfig } from '../../types.js'
 
-import { fields } from './fields'
+import { fields } from './fields.js'
 
 // all settings can be overridden by the config
 export const generateFormCollection = (formConfig: PluginConfig): CollectionConfig => {
   const redirect: Field = {
     name: 'redirect',
+    type: 'group',
     admin: {
       condition: (_, siblingData) => siblingData?.confirmationType === 'redirect',
       hideGutter: true,
@@ -17,17 +18,17 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
     fields: [
       {
         name: 'url',
+        type: 'text',
         label: 'URL to redirect to',
         required: true,
-        type: 'text',
       },
     ],
-    type: 'group',
   }
 
   if (formConfig.redirectRelationships) {
     redirect.fields.unshift({
       name: 'reference',
+      type: 'relationship',
       admin: {
         condition: (_, siblingData) => siblingData?.type === 'reference',
       },
@@ -35,11 +36,11 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
       maxDepth: 2,
       relationTo: formConfig.redirectRelationships,
       required: true,
-      type: 'relationship',
     })
 
     redirect.fields.unshift({
       name: 'type',
+      type: 'radio',
       admin: {
         layout: 'horizontal',
       },
@@ -54,7 +55,6 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
           value: 'custom',
         },
       ],
-      type: 'radio',
     })
 
     if (redirect.fields[2].type !== 'row') redirect.fields[2].label = 'Custom URL'
@@ -66,6 +66,7 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
 
   const config: CollectionConfig = {
     ...(formConfig?.formOverrides || {}),
+    slug: formConfig?.formOverrides?.slug || 'forms',
     access: {
       read: () => true,
       ...(formConfig?.formOverrides?.access || {}),
@@ -78,11 +79,12 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
     fields: [
       {
         name: 'title',
-        required: true,
         type: 'text',
+        required: true,
       },
       {
         name: 'fields',
+        type: 'blocks',
         blocks: Object.entries(formConfig?.fields || {})
           .map(([fieldKey, fieldConfig]) => {
             // let the config enable/disable fields with either boolean values or objects
@@ -109,15 +111,15 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
             return null
           })
           .filter(Boolean) as Block[],
-        type: 'blocks',
       },
       {
         name: 'submitButtonLabel',
-        localized: true,
         type: 'text',
+        localized: true,
       },
       {
         name: 'confirmationType',
+        type: 'radio',
         admin: {
           description:
             'Choose whether to display an on-page message or redirect to a different page after they submit the form.',
@@ -134,101 +136,99 @@ export const generateFormCollection = (formConfig: PluginConfig): CollectionConf
             value: 'redirect',
           },
         ],
-        type: 'radio',
       },
       {
         name: 'confirmationMessage',
+        type: 'richText',
         admin: {
           condition: (_, siblingData) => siblingData?.confirmationType === 'message',
         },
         localized: true,
         required: true,
-        type: 'richText',
       },
       redirect,
       {
         name: 'emails',
+        type: 'array',
         admin: {
           description:
             "Send custom emails when the form submits. Use comma separated lists to send the same email to multiple recipients. To reference a value from this form, wrap that field's name with double curly brackets, i.e. {{firstName}}.",
         },
         fields: [
           {
+            type: 'row',
             fields: [
               {
                 name: 'emailTo',
+                type: 'text',
                 admin: {
                   placeholder: '"Email Sender" <sender@email.com>',
                   width: '100%',
                 },
                 label: 'Email To',
-                type: 'text',
               },
               {
                 name: 'cc',
+                type: 'text',
                 admin: {
                   width: '50%',
                 },
                 label: 'CC',
-                type: 'text',
               },
               {
                 name: 'bcc',
+                type: 'text',
                 admin: {
                   width: '50%',
                 },
                 label: 'BCC',
-                type: 'text',
               },
             ],
-            type: 'row',
           },
           {
+            type: 'row',
             fields: [
               {
                 name: 'replyTo',
+                type: 'text',
                 admin: {
                   placeholder: '"Reply To" <reply-to@email.com>',
                   width: '50%',
                 },
                 label: 'Reply To',
-                type: 'text',
               },
               {
                 name: 'emailFrom',
+                type: 'text',
                 admin: {
                   placeholder: '"Email From" <email-from@email.com>',
                   width: '50%',
                 },
                 label: 'Email From',
-                type: 'text',
               },
             ],
-            type: 'row',
           },
           {
             name: 'subject',
+            type: 'text',
             defaultValue: "You've received a new message.",
             label: 'Subject',
             localized: true,
             required: true,
-            type: 'text',
           },
           {
             name: 'message',
+            type: 'richText',
             admin: {
               description: 'Enter the message that should be sent in this email.',
             },
             label: 'Message',
             localized: true,
-            type: 'richText',
           },
         ],
-        type: 'array',
       },
       ...(formConfig?.formOverrides?.fields || []),
     ],
-    slug: formConfig?.formOverrides?.slug || 'forms',
   }
 
   return config

packages/plugin-nested-docs/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-nested-docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/plugin-nested-docs",
-  "version": "1.0.12",
+  "version": "3.0.0-alpha.45",
   "description": "The official Nested Docs plugin for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "payload": "^0.18.5 || ^1.0.0 || ^2.0.0"
+    "payload": "workspace:*"
   },
   "exports": {
     ".": {

packages/plugin-nested-docs/src/hooks/resaveChildren.ts

@@ -1,8 +1,8 @@
 import type { CollectionAfterChangeHook, CollectionConfig, PayloadRequest } from 'payload/types'
 
-import type { PluginConfig } from '../types'
+import type { PluginConfig } from '../types.js'
 
-import populateBreadcrumbs from '../utilities/populateBreadcrumbs'
+import populateBreadcrumbs from '../utilities/populateBreadcrumbs.js'
 
 type ResaveArgs = {
   collection: CollectionConfig

packages/plugin-nested-docs/src/hooks/resaveSelfAfterCreate.ts

@@ -1,6 +1,6 @@
 import type { CollectionAfterChangeHook, CollectionConfig } from 'payload/types'
 
-import type { PluginConfig } from '../types'
+import type { PluginConfig } from '../types.js'
 
 // This hook automatically re-saves a document after it is created
 // so that we can build its breadcrumbs with the newly created document's ID.

packages/plugin-nested-docs/src/index.ts

@@ -1,14 +1,14 @@
 import type { Plugin } from 'payload/config'
 import type { SingleRelationshipField } from 'payload/types'
 
-import type { PluginConfig } from './types'
+import type { PluginConfig } from './types.js'
 
-import createBreadcrumbsField from './fields/breadcrumbs'
-import createParentField from './fields/parent'
-import parentFilterOptions from './fields/parentFilterOptions'
-import resaveChildren from './hooks/resaveChildren'
-import resaveSelfAfterCreate from './hooks/resaveSelfAfterCreate'
-import populateBreadcrumbs from './utilities/populateBreadcrumbs'
+import createBreadcrumbsField from './fields/breadcrumbs.js'
+import createParentField from './fields/parent.js'
+import parentFilterOptions from './fields/parentFilterOptions.js'
+import resaveChildren from './hooks/resaveChildren.js'
+import resaveSelfAfterCreate from './hooks/resaveSelfAfterCreate.js'
+import populateBreadcrumbs from './utilities/populateBreadcrumbs.js'
 
 const nestedDocs =
   (pluginConfig: PluginConfig): Plugin =>

packages/plugin-nested-docs/src/utilities/formatBreadcrumb.ts

@@ -1,6 +1,6 @@
 import type { CollectionConfig } from 'payload/types'
 
-import type { Breadcrumb, PluginConfig } from '../types'
+import type { Breadcrumb, PluginConfig } from '../types.js'
 
 const formatBreadcrumb = (
   pluginConfig: PluginConfig,
@@ -24,9 +24,9 @@ const formatBreadcrumb = (
   }
 
   return {
+    doc: lastDoc.id as string,
     label,
     url,
-    doc: lastDoc.id as string,
   }
 }
 

packages/plugin-nested-docs/src/utilities/getParents.ts

@@ -1,6 +1,6 @@
 import type { CollectionConfig } from 'payload/types'
 
-import type { PluginConfig } from '../types'
+import type { PluginConfig } from '../types.js'
 
 const getParents = async (
   req: any,

packages/plugin-nested-docs/src/utilities/populateBreadcrumbs.ts

@@ -1,9 +1,9 @@
 import type { CollectionConfig } from 'payload/types'
 
-import type { PluginConfig } from '../types'
+import type { PluginConfig } from '../types.js'
 
-import formatBreadcrumb from './formatBreadcrumb'
-import getParents from './getParents'
+import formatBreadcrumb from './formatBreadcrumb.js'
+import getParents from './getParents.js'
 
 const populateBreadcrumbs = async (
   req: any,

packages/plugin-redirects/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-redirects/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/plugin-redirects",
-  "version": "1.0.1",
+  "version": "3.0.0-alpha.45",
   "homepage:": "https://payloadcms.com",
   "repository": "git@github.com:payloadcms/plugin-redirects.git",
   "description": "Redirects plugin for Payload",
@@ -27,7 +27,7 @@
   "author": "dev@payloadcms.com",
   "license": "MIT",
   "peerDependencies": {
-    "payload": "^0.18.5 || ^1.0.0 || ^2.0.0"
+    "payload": "workspace:*"
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",

packages/plugin-redirects/src/index.ts

@@ -1,8 +1,8 @@
 import type { Config } from 'payload/config'
 
-import type { PluginConfig } from './types'
+import type { PluginConfig } from './types.js'
 
-import deepMerge from './deepMerge'
+import deepMerge from './deepMerge.js'
 
 const redirects =
   (pluginConfig: PluginConfig) =>
@@ -12,6 +12,7 @@ const redirects =
       ...(incomingConfig?.collections || []),
       deepMerge(
         {
+          slug: 'redirects',
           access: {
             read: (): boolean => true,
           },
@@ -21,16 +22,18 @@ const redirects =
           fields: [
             {
               name: 'from',
+              type: 'text',
               index: true,
               label: 'From URL',
               required: true,
-              type: 'text',
             },
             {
               name: 'to',
+              type: 'group',
               fields: [
                 {
                   name: 'type',
+                  type: 'radio',
                   admin: {
                     layout: 'horizontal',
                   },
@@ -46,33 +49,30 @@ const redirects =
                       value: 'custom',
                     },
                   ],
-                  type: 'radio',
                 },
                 {
                   name: 'reference',
+                  type: 'relationship',
                   admin: {
                     condition: (_, siblingData) => siblingData?.type === 'reference',
                   },
                   label: 'Document to redirect to',
                   relationTo: pluginConfig?.collections || [],
                   required: true,
-                  type: 'relationship',
                 },
                 {
                   name: 'url',
+                  type: 'text',
                   admin: {
                     condition: (_, siblingData) => siblingData?.type === 'custom',
                   },
                   label: 'Custom URL',
                   required: true,
-                  type: 'text',
                 },
               ],
               label: false,
-              type: 'group',
             },
           ],
-          slug: 'redirects',
         },
         pluginConfig?.overrides || {},
       ),

packages/plugin-search/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/plugin-search",
-  "version": "1.1.0",
+  "version": "3.0.0-alpha.45",
   "homepage:": "https://payloadcms.com",
   "repository": "git@github.com:payloadcms/plugin-search.git",
   "description": "Search plugin for Payload",
@@ -27,12 +27,12 @@
   "author": "dev@trbl.design",
   "license": "MIT",
   "peerDependencies": {
-    "payload": "^0.18.5 || ^1.0.0 || ^2.0.0",
+    "payload": "workspace:*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
     "@payloadcms/ui": "workspace:*",
-    "ts-deepmerge": "^2.0.1"
+    "deepmerge": "4.3.1"
   },
   "devDependencies": {
     "@payloadcms/eslint-config": "workspace:*",

packages/plugin-search/src/Search/hooks/syncWithSearch.ts

@@ -1,4 +1,4 @@
-import type { DocToSync, SearchConfig, SyncWithSearch } from '../../types'
+import type { DocToSync, SearchConfig, SyncWithSearch } from '../../types.js'
 
 const syncWithSearch: SyncWithSearch = async (args) => {
   const {

packages/plugin-search/src/Search/index.ts

@@ -1,15 +1,16 @@
 import type { CollectionConfig } from 'payload/types'
 
-import deepMerge from 'ts-deepmerge'
+import deepMerge from 'deepmerge'
 
-import type { SearchConfig } from '../types'
+import type { SearchConfig } from '../types.js'
 
-import { LinkToDoc } from './ui'
+import { LinkToDoc } from './ui/index.js'
 
 // all settings can be overridden by the config
 export const generateSearchCollection = (searchConfig: SearchConfig): CollectionConfig =>
   deepMerge(
     {
+      slug: 'search',
       access: {
         create: (): boolean => false,
         read: (): boolean => true,
@@ -24,20 +25,21 @@ export const generateSearchCollection = (searchConfig: SearchConfig): Collection
       fields: [
         {
           name: 'title',
+          type: 'text',
           admin: {
             readOnly: true,
           },
-          type: 'text',
         },
         {
           name: 'priority',
+          type: 'number',
           admin: {
             position: 'sidebar',
           },
-          type: 'number',
         },
         {
           name: 'doc',
+          type: 'relationship',
           admin: {
             position: 'sidebar',
             readOnly: true,
@@ -46,24 +48,22 @@ export const generateSearchCollection = (searchConfig: SearchConfig): Collection
           maxDepth: 0,
           relationTo: searchConfig?.collections || [],
           required: true,
-          type: 'relationship',
         },
         {
           name: 'docUrl',
+          type: 'ui',
           admin: {
             components: {
               Field: LinkToDoc,
             },
             position: 'sidebar',
           },
-          type: 'ui',
         },
       ],
       labels: {
         plural: 'Search Results',
         singular: 'Search Result',
       },
-      slug: 'search',
     },
     searchConfig?.searchOverrides || {},
   )

packages/plugin-search/src/Search/ui/index.tsx

@@ -1,5 +1,4 @@
-import type { FormState } from '@payloadcms/ui'
-import type { UIField } from 'payload/types'
+import type { FormState, UIField } from 'payload/types'
 
 import { useConfig, useWatchForm } from '@payloadcms/ui'
 import React from 'react'

packages/plugin-search/src/index.ts

@@ -1,10 +1,10 @@
 import type { Config } from 'payload/config'
 
-import type { SearchConfig } from './types'
+import type { SearchConfig } from './types.js'
 
-import { generateSearchCollection } from './Search'
-import deleteFromSearch from './Search/hooks/deleteFromSearch'
-import syncWithSearch from './Search/hooks/syncWithSearch'
+import deleteFromSearch from './Search/hooks/deleteFromSearch.js'
+import syncWithSearch from './Search/hooks/syncWithSearch.js'
+import { generateSearchCollection } from './Search/index.js'
 
 const Search =
   (incomingSearchConfig: SearchConfig) =>

packages/plugin-sentry/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "exclude": ["/**/*.spec.ts"],
   "jsc": {
     "target": "esnext",

packages/plugin-sentry/package.json

@@ -28,7 +28,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "payload": "^1.10.1 || ^2.0.0",
+    "payload": "workspace:*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {

packages/plugin-seo/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-seo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/plugin-seo",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "homepage:": "https://payloadcms.com",
   "repository": "git@github.com:payloadcms/plugin-seo.git",
   "description": "SEO plugin for Payload",

packages/plugin-stripe/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/plugin-stripe/package.json

@@ -29,7 +29,7 @@
   "author": "dev@payloadcms.com",
   "license": "MIT",
   "peerDependencies": {
-    "payload": "^1.1.8 || ^2.0.0"
+    "payload": "workspace:*"
   },
   "dependencies": {
     "@payloadcms/ui": "workspace:*",

packages/richtext-lexical/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/richtext-lexical/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/richtext-lexical",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "description": "The officially supported Lexical richtext adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/richtext-slate/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/richtext-slate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/richtext-slate",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "description": "The officially supported Slate richtext adapter for Payload",
   "repository": "https://github.com/payloadcms/payload",
   "license": "MIT",

packages/translations/.swcrc

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {

packages/translations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payloadcms/translations",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "main": "./dist/exports/index.ts",
   "types": "./dist/types.d.ts",
   "type": "module",

packages/ui/.swcrc

@@ -1,12 +1,22 @@
 {
   "$schema": "https://json.schemastore.org/swcrc",
-  "sourceMaps": "inline",
+  "sourceMaps": true,
   "jsc": {
     "target": "esnext",
     "parser": {
       "syntax": "typescript",
       "tsx": true,
       "dts": true
+    },
+    "experimental": {
+      "plugins": [
+        [
+          "swc-plugin-transform-remove-imports",
+          {
+            "test": "\\.(scss|css)$"
+          }
+        ]
+      ]
     }
   },
   "module": {

packages/ui/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@payloadcms/ui",
-  "version": "3.0.0-alpha.40",
+  "version": "3.0.0-alpha.45",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "type": "module",
   "scripts": {
-    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types",
+    "build": "pnpm copyfiles && pnpm build:swc && pnpm build:types && pnpm build:webpack && rm dist/prod/index.js",
     "build:swc": "swc ./src -d ./dist --config-file .swcrc",
     "build:types": "tsc --emitDeclarationOnly --outDir dist",
+    "build:webpack": "webpack --config webpack.config.js",
     "clean": "rimraf {dist,*.tsbuildinfo}",
     "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
     "fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
@@ -37,6 +38,11 @@
         "require": "./dist/exports/*.js",
         "types": "./dist/exports/*.d.ts"
       },
+      "./css": {
+        "import": "./dist/prod/styles.css",
+        "require": "./dist/prod/styles.css",
+        "default": "./dist/prod/styles.css"
+      },
       "./scss": {
         "import": "./dist/scss.scss",
         "require": "./dist/scss.scss",
@@ -51,9 +57,21 @@
     "@types/body-scroll-lock": "^3.1.0",
     "@types/qs": "6.9.7",
     "@types/react": "18.2.15",
+    "@types/react-datepicker": "4.11.2",
     "@types/react-dom": "18.2.7",
     "@types/uuid": "8.3.4",
-    "payload": "workspace:*"
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.0",
+    "sass-loader": "^14.1.1",
+    "swc-loader": "^0.2.6",
+    "swc-plugin-transform-remove-imports": "^1.12.1",
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "mini-css-extract-plugin": "1.6.2",
+    "payload": "workspace:*",
+    "terser-webpack-plugin": "^5.3.10",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -65,14 +83,14 @@
     "@payloadcms/translations": "workspace:*",
     "body-scroll-lock": "4.0.0-beta.0",
     "bson-objectid": "2.0.4",
-    "date-fns": "2.30.0",
+    "date-fns": "3.3.1",
     "deep-equal": "2.2.2",
     "flatley": "5.2.0",
     "md5": "2.3.0",
     "object-to-formdata": "4.5.1",
     "qs": "6.11.2",
     "react-animate-height": "2.1.2",
-    "react-datepicker": "4.16.0",
+    "react-datepicker": "6.2.0",
     "react-image-crop": "10.1.8",
     "react-select": "5.7.4",
     "react-toastify": "10.0.4",

packages/ui/src/elements/DatePicker/DatePicker.tsx

@@ -1,6 +1,10 @@
+import type { ReactDatePickerProps } from 'react-datepicker'
+
 import * as Locales from 'date-fns/locale'
 import React from 'react'
-import DatePicker, { registerLocale } from 'react-datepicker'
+import ReactDatePickerDefaultImport, { registerLocale } from 'react-datepicker'
+const ReactDatePicker = (ReactDatePickerDefaultImport.default ||
+  ReactDatePickerDefaultImport) as unknown as typeof ReactDatePickerDefaultImport.default
 import 'react-datepicker/dist/react-datepicker.css'
 
 import type { Props } from './types.js'
@@ -61,7 +65,7 @@ const DateTime: React.FC<Props> = (props) => {
     if (typeof onChangeFromProps === 'function') onChangeFromProps(newDate)
   }
 
-  const dateTimePickerProps = {
+  const dateTimePickerProps: ReactDatePickerProps = {
     customInputRef: 'ref',
     dateFormat,
     disabled: readOnly,
@@ -72,6 +76,7 @@ const DateTime: React.FC<Props> = (props) => {
     monthsShown: Math.min(2, monthsToShow),
     onChange,
     placeholderText,
+    popperPlacement: 'bottom-start',
     selected: value && new Date(value),
     showMonthYearPicker: pickerAppearance === 'monthOnly',
     showPopperArrow: false,
@@ -100,16 +105,10 @@ const DateTime: React.FC<Props> = (props) => {
         <CalendarIcon />
       </div>
       <div className={`${baseClass}__input-wrapper`}>
-        <DatePicker
+        <ReactDatePicker
           {...dateTimePickerProps}
           dropdownMode="select"
           locale={locale}
-          popperModifiers={[
-            {
-              name: 'preventOverflow',
-              enabled: true,
-            },
-          ]}
           showMonthDropdown
           showYearDropdown
         />

packages/ui/src/elements/DatePicker/index.scss

@@ -198,6 +198,9 @@ $cal-icon-width: 18px;
     }
 
     &__month-text {
+      padding: base(0.3);
+      margin: base(0.15);
+      font-size: base(0.55);
       &:hover {
         background: var(--theme-elevation-100);
       }

packages/ui/src/elements/DatePicker/index.tsx

@@ -6,10 +6,8 @@ import { ShimmerEffect } from '../ShimmerEffect/index.js'
 
 const DatePicker = lazy(() => import('./DatePicker.js'))
 
-const DatePickerField: React.FC<Props> = (props) => (
+export const DatePickerField: React.FC<Props> = (props) => (
   <Suspense fallback={<ShimmerEffect height={50} />}>
     <DatePicker {...props} />
   </Suspense>
 )
-
-export default DatePickerField

packages/ui/src/elements/WhereBuilder/Condition/Date/index.tsx

@@ -2,18 +2,16 @@ import React from 'react'
 
 import type { Props } from './types.js'
 
-import DatePicker from '../../../DatePicker/index.js'
+import { DatePickerField } from '../../../DatePicker/index.js'
 
 const baseClass = 'condition-value-date'
 
-const DateField: React.FC<Props> = ({ admin, disabled, onChange, value }) => {
+export const DateField: React.FC<Props> = ({ admin, disabled, onChange, value }) => {
   const { date } = admin || {}
 
   return (
     <div className={baseClass}>
-      <DatePicker {...date} onChange={onChange} readOnly={disabled} value={value} />
+      <DatePickerField {...date} onChange={onChange} readOnly={disabled} value={value} />
     </div>
   )
 }
-
-export default DateField

packages/ui/src/elements/WhereBuilder/Condition/index.tsx

@@ -7,7 +7,7 @@ import { RenderCustomComponent } from '../../../elements/RenderCustomComponent/i
 import useDebounce from '../../../hooks/useDebounce.js'
 import { Button } from '../../Button/index.js'
 import ReactSelect from '../../ReactSelect/index.js'
-import Date from './Date/index.js'
+import { DateField } from './Date/index.js'
 import Number from './Number/index.js'
 import Relationship from './Relationship/index.js'
 import { Select } from './Select/index.js'
@@ -15,7 +15,7 @@ import Text from './Text/index.js'
 import './index.scss'
 
 const valueFields = {
-  Date,
+  DateField,
   Number,
   Relationship,
   Select,

packages/ui/src/forms/fields/DateTime/index.tsx

@@ -6,7 +6,7 @@ import React, { useCallback } from 'react'
 
 import type { Props } from './types.js'
 
-import DatePickerField from '../../../elements/DatePicker/index.js'
+import { DatePickerField } from '../../../elements/DatePicker/index.js'
 import { useTranslation } from '../../../providers/Translation/index.js'
 import useField from '../../useField/index.js'
 import { fieldBaseClass } from '../shared.js'

packages/ui/src/providers/Auth/index.tsx

@@ -51,9 +51,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
   const redirectToInactivityRoute = useCallback(() => {
     if (window.location.pathname.startsWith(admin)) {
-      const redirectParam = `?redirect=${encodeURIComponent(
-        window.location.pathname.replace(admin, ''),
-      )}`
+      const redirectParam = `?redirect=${encodeURIComponent(window.location.pathname)}`
       router.replace(`${admin}${logoutInactivityRoute}${redirectParam}`)
     } else {
       router.replace(`${admin}${logoutInactivityRoute}`)

packages/ui/src/templates/Default/index.scss

@@ -1,8 +1,10 @@
 @import '../../scss/styles.scss';
 
 .template-default {
-  [dir='rtl']
-  &__nav-toggler-wrapper {
+  background-color: var(--theme-bg);
+  color: var(--theme-text);
+
+  [dir='rtl'] &__nav-toggler-wrapper {
     left: unset;
     right: 0;
   }

packages/ui/src/templates/Minimal/index.scss

@@ -9,6 +9,8 @@
   margin-left: auto;
   margin-right: auto;
   min-height: 100%;
+  background-color: var(--theme-bg-color);
+  color: var(--theme-text);
 
   &--width-normal {
     .template-minimal__wrap {

packages/ui/src/utilities/buildComponentMap/mapFields.tsx

@@ -205,6 +205,7 @@ export const mapFields = (args: {
           // TODO: fix types
           // label: 'label' in field ? field.label : undefined,
           blocks,
+          date: 'admin' in field && 'date' in field.admin ? field.admin.date : undefined,
           fieldPermissions,
           hasMany: 'hasMany' in field ? field.hasMany : undefined,
           max: 'max' in field ? field.max : undefined,

packages/ui/src/utilities/formatDate/index.ts

@@ -1,5 +1,5 @@
 import { format, formatDistanceToNow } from 'date-fns'
-import * as Locale from 'date-fns/locale/index.js'
+import * as Locale from 'date-fns/locale'
 
 import { getSupportedDateLocale } from './getSupportedDateLocale.js'
 

packages/ui/webpack.config.js

@@ -0,0 +1,107 @@
+import OptimizeCSSAssetsPlugin from 'css-minimizer-webpack-plugin'
+import MiniCSSExtractPlugin from 'mini-css-extract-plugin'
+import path from 'path'
+import TerserJSPlugin from 'terser-webpack-plugin'
+import { fileURLToPath } from 'url'
+import webpack from 'webpack'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+const componentWebpackConfig = {
+  entry: path.resolve(dirname, './src/index.ts'),
+  externals: ['react', 'react-dom', 'payload', 'payload/config', 'react-image-crop'],
+  mode: 'production',
+  module: {
+    rules: [
+      {
+        oneOf: [
+          {
+            // exclude: /node_modules/,
+            test: /\.(t|j)sx?$/,
+            use: [
+              {
+                loader: 'swc-loader',
+                options: {
+                  jsc: {
+                    experimental: {
+                      plugins: [
+                        // clear the plugins used in .swcrc
+                      ],
+                    },
+                    parser: {
+                      syntax: 'typescript',
+                      tsx: true,
+                    },
+                  },
+                },
+              },
+            ],
+          },
+          {
+            sideEffects: true,
+            test: /\.(scss|css)$/,
+            use: [
+              MiniCSSExtractPlugin.loader,
+              'css-loader',
+              {
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['postcss-preset-env'],
+                  },
+                },
+              },
+              'sass-loader',
+            ],
+          },
+          {
+            type: 'asset/resource',
+            generator: {
+              filename: 'payload/[name][ext]',
+            },
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/, /\.woff$/, /\.woff2$/],
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new TerserJSPlugin({
+        extractComments: false,
+      }),
+      new OptimizeCSSAssetsPlugin({}),
+    ],
+  },
+  output: {
+    filename: 'index.js',
+    libraryTarget: 'commonjs2',
+    path: path.resolve(dirname, './dist/prod'),
+    publicPath: '/',
+  },
+  plugins: [
+    new MiniCSSExtractPlugin({
+      filename: 'styles.css',
+      ignoreOrder: true,
+    }),
+    new webpack.optimize.LimitChunkCountPlugin({
+      maxChunks: 1,
+    }),
+  ],
+  resolve: {
+    extensionAlias: {
+      '.js': ['.ts', '.tsx', '.js', '.scss', '.css'],
+      '.mjs': ['.mts', '.mjs'],
+    },
+    extensions: ['.js', '.ts', '.tsx', '.scss', '.css'],
+    modules: [
+      'node_modules',
+      path.resolve(dirname, '../../node_modules'),
+      path.resolve(dirname, './node_modules'),
+    ],
+  },
+  stats: 'errors-only',
+}
+
+export default componentWebpackConfig