chore(release): v3.0.0-beta.21 [skip ci]

BREAKING: this will now display errors if you're previously had invalid link or upload fields data - for example if you have a required field added to an uploads node and did not provide a value to it every time you've added an upload node

.eslintrc.cjs

@@ -8,6 +8,7 @@ module.exports = {
       plugins: ['payload'],
       rules: {
         'payload/no-jsx-import-statements': 'warn',
+        'payload/no-relative-monorepo-imports': 'error',
       },
     },
     {

.github/workflows/main.yml

@@ -138,9 +138,9 @@ jobs:
         database:
           - mongodb
           - postgres
-        #  - postgres-custom-schema
-        #  - postgres-uuid
-        #  - supabase
+          - postgres-custom-schema
+          - postgres-uuid
+          - supabase
     env:
       POSTGRES_USER: postgres
       POSTGRES_PASSWORD: postgres
@@ -237,13 +237,13 @@ jobs:
           - access-control
           - admin
           - auth
-          - email
           - field-error-states
           - fields-relationship
           - fields
           - fields__collections__Blocks
           - fields__collections__Array
           - fields__collections__Relationship
+          - fields__collections__RichText
           - fields__collections__Lexical
           - live-preview
           - localization
@@ -295,6 +295,50 @@ jobs:
           if-no-files-found: ignore
           retention-days: 1
 
+  app-build-with-packed:
+    runs-on: ubuntu-latest
+    needs: build
+
+    steps:
+      # https://github.com/actions/virtual-environments/issues/1187
+      - name: tune linux network
+        run: sudo ethtool -K eth0 tx off rx off
+
+      - name: Setup Node@${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: ${{ env.PNPM_VERSION }}
+          run_install: false
+
+      - name: Restore build
+        uses: actions/cache@v4
+        timeout-minutes: 10
+        with:
+          path: ./*
+          key: ${{ github.sha }}-${{ github.run_number }}
+
+      - name: Start MongoDB
+        uses: supercharge/mongodb-github-action@1.10.0
+        with:
+          mongodb-version: 6.0
+
+      - name: Pack and build app
+        run: |
+          set -ex
+          pnpm run script:pack --dest templates/blank-3.0
+          cd templates/blank-3.0
+          cp .env.example .env
+          ls -la
+          pnpm add ./*.tgz
+          pnpm install --ignore-workspace
+          cat package.json
+          pnpm run build
+
   tests-type-generation:
     if: false # This should be replaced with gen on a real Payload project
     runs-on: ubuntu-latest

.github/workflows/pr-title.yml

@@ -0,0 +1,103 @@
+name: pr-title
+
+on:
+  pull_request:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: write
+
+jobs:
+  main:
+    name: lint-pr-title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          types: |
+            build
+            chore
+            ci
+            docs
+            feat
+            fix
+            perf
+            refactor
+            revert
+            style
+            test
+            types
+          scopes: |
+            cpa
+            db-\*
+            db-mongodb
+            db-postgres
+            email-nodemailer
+            eslint
+            graphql
+            live-preview
+            live-preview-react
+            next
+            payload
+            plugin-cloud
+            plugin-cloud-storage
+            plugin-form-builder
+            plugin-nested-docs
+            plugin-redirects
+            plugin-relationship-object-ids
+            plugin-search
+            plugin-sentry
+            plugin-seo
+            plugin-stripe
+            richtext-\*
+            richtext-lexical
+            richtext-slate
+            storage-\*
+            storage-azure
+            storage-gcs
+            storage-vercel-blob
+            storage-s3
+            translations
+            ui
+            templates
+            examples
+            deps
+
+          # Disallow uppercase letters at the beginning of the subject
+          subjectPattern: ^(?![A-Z]).+$
+          subjectPatternError: |
+            The subject "{subject}" found in the pull request title "{title}"
+            didn't match the configured pattern. Please ensure that the subject
+            doesn't start with an uppercase character.
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        # When the previous steps fails, the workflow would stop. By adding this
+        # condition you can continue the execution with the populated error message.
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          header: pr-title-lint-error
+          message: |
+            Pull Request titles must follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and have valid scopes.
+
+            ${{ steps.lint_pr_title.outputs.error_message }}
+
+            ```
+            feat(ui): add Button component
+            ^    ^    ^
+            |    |    |__ Subject
+            |    |_______ Scope
+            |____________ Type
+            ```
+
+      # Delete a previous comment when the issue has been resolved
+      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: pr-title-lint-error
+          delete: true

.vscode/settings.json

@@ -40,5 +40,6 @@
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     }
-  }
+  },
+  "files.insertFinalNewline": true
 }

changelog.config.js

@@ -1,39 +0,0 @@
-module.exports = {
-  // gitRawCommitsOpts: {
-  //   from: 'v2.0.9',
-  //   path: 'packages/payload',
-  // },
-  // infile: 'CHANGELOG.md',
-  options: {
-    preset: {
-      name: 'conventionalcommits',
-      types: [
-        { section: 'Features', type: 'feat' },
-        { section: 'Features', type: 'feature' },
-        { section: 'Bug Fixes', type: 'fix' },
-        { section: 'Documentation', type: 'docs' },
-      ],
-    },
-  },
-  // outfile: 'NEW.md',
-  writerOpts: {
-    commitGroupsSort: (a, b) => {
-      const groupOrder = ['Features', 'Bug Fixes', 'Documentation']
-      return groupOrder.indexOf(a.title) - groupOrder.indexOf(b.title)
-    },
-
-    // Scoped commits at the end, alphabetical sort
-    commitsSort: (a, b) => {
-      if (a.scope || b.scope) {
-        if (!a.scope) return -1
-        if (!b.scope) return 1
-        return a.scope === b.scope
-          ? a.subject.localeCompare(b.subject)
-          : a.scope.localeCompare(b.scope)
-      }
-
-      // Alphabetical sort
-      return a.subject.localeCompare(b.subject)
-    },
-  },
-}

examples/hierarchy/.env.example

@@ -1,2 +1,2 @@
-DATABASE_URI=mongodb://127.0.0.1/payload-template-blank
+DATABASE_URI=mongodb://127.0.0.1/payload-template-blank-3-0
 PAYLOAD_SECRET=YOUR_SECRET_HERE

examples/hierarchy/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

examples/hierarchy/.gitignore

@@ -1,6 +1,43 @@
-build
-dist
-/media
-node_modules
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+/.idea/*
+!/.idea/runConfigurations
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
 .DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
 .env
+
+/media

examples/hierarchy/.prettierrc.js

@@ -1,8 +0,0 @@
-module.exports = {
-  printWidth: 100,
-  parser: 'typescript',
-  semi: false,
-  singleQuote: true,
-  trailingComma: 'all',
-  arrowParens: 'avoid',
-}

examples/hierarchy/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "semi": false
+}

examples/hierarchy/README.md

@@ -1,8 +1,10 @@
-# Payload Hierarchy Example
+# Payload Blank Template
 
-This example demonstrates how to achieve a virtual hierarchy between documents in your [Payload](https://github.com/payloadcms/payload) application.
+A blank template for [Payload](https://github.com/payloadcms/payload) to help you get up and running quickly. This repo may have been created by running `npx create-payload-app@latest` and selecting the "blank" template or by cloning this template on [Payload Cloud](https://payloadcms.com/new/clone/blank).
 
-## Quick Start
+See the official [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples) for details on how to use Payload in a variety of different ways.
+
+## Development
 
 To spin up the project locally, follow these steps:
 
@@ -14,33 +16,15 @@ To spin up the project locally, follow these steps:
 
 That's it! Changes made in `./src` will be reflected in your app.
 
-## How it works
+### Docker
 
-This example achieves parent/child relationships between your documents through the use of virtual fields. When you query a document with the `?children=true` query param, an afterRead hook is used to populate the documents within its own tree.
+Alternatively, you can use [Docker](https://www.docker.com) to spin up this project locally. To do so, follow these steps:
 
-For more information on how virtual fields, see the [Official Virtual Fields Example](https://github.com/payloadcms/payload/tree/main/examples/virtual-fields).
+1. Follow [steps 1 and 2 from above](#development), the docker-compose file will automatically use the `.env` file in your project root
+1. Next run `docker-compose up`
+1. Follow [steps 4 and 5 from above](#development) to login and create your first admin user
 
-### Collections
-
-See the [Collections](https://payloadcms.com/docs/configuration/collections) docs for details on how to extend any of this functionality.
-
-- #### Users
-
-  The `users` collection is a default payload users collection.
-
-- #### Entities
-
-  The `entities` collection can define a parent as any other entity.  It has a virtual field that will also populate children when it is called via the API using a query `children=true`. See [Virtual Fields](https://github.com/payloadcms/payload/tree/main/examples/virtual-fields) for more details on how virtual fields work. 
-  
-  The virtual field retrieves __all__ children which includes other entities and people.
-
-- #### People
-
-  The `people` collection is a collection that can define an array of parent entities.  It also has an allocation field.  This is for demonstrating attaching data to a parent-child relationship.
-
-## Development
-
-To spin up this example locally, follow the [Quick Start](#quick-start).
+That's it! The Docker instance will help you get up and running quickly while also standardizing the development environment across your teams.
 
 ## Production
 

examples/hierarchy/next.config.mjs

@@ -0,0 +1,8 @@
+import { withPayload } from '@payloadcms/next/withPayload'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Your Next.js config here
+}
+
+export default withPayload(nextConfig)

examples/hierarchy/package.json

@@ -2,34 +2,38 @@
   "name": "hierarchy",
   "description": "A hierarchy example with Payload",
   "version": "1.0.0",
-  "main": "dist/server.js",
   "license": "MIT",
+  "type": "module",
   "scripts": {
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
-    "build:server": "tsc",
-    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema",
-    "payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload"
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "generate:types": "payload generate:types"
+  },
+  "engines": {
+    "node": ">=18.19.0"
   },
   "dependencies": {
-    "@payloadcms/bundler-webpack": "^1.0.0",
-    "@payloadcms/db-mongodb": "^1.0.0",
-    "@payloadcms/plugin-cloud": "^3.0.0",
-    "@payloadcms/richtext-slate": "^1.0.0",
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/plugin-cloud": "beta",
+    "@payloadcms/richtext-lexical": "beta",
     "cross-env": "^7.0.3",
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "^2.0.0"
+    "next": "14.3.0-canary.7",
+    "payload": "beta",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@types/express": "^4.17.9",
-    "copyfiles": "^2.4.1",
-    "nodemon": "^2.0.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "dotenv": "^16.4.5",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.2"
   }
 }

examples/hierarchy/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,17 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage } from '@payloadcms/next/views'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

examples/hierarchy/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

examples/hierarchy/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/hierarchy/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

examples/hierarchy/src/app/(payload)/layout.tsx

@@ -0,0 +1,16 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import '@payloadcms/next/css'
+import { RootLayout } from '@payloadcms/next/layouts'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

examples/hierarchy/src/collections/Entities.ts

@@ -1,4 +1,4 @@
-import { CollectionConfig } from 'payload/types'
+import type { CollectionConfig } from 'payload/types'
 
 export const Entities: CollectionConfig = {
   slug: 'entities',
@@ -18,7 +18,6 @@ export const Entities: CollectionConfig = {
     {
       name: 'children',
       type: 'relationship',
-      relationTo: ['entities', 'people'],
       access: {
         create: () => false,
         update: () => false,
@@ -26,40 +25,40 @@ export const Entities: CollectionConfig = {
       hooks: {
         afterRead: [
           async ({ data, req }) => {
+            if (!req.query.children || !data) return
+
             const { id } = data
 
-            if (!req.query.children) return
-
             const people = await req.payload.find({
-              req,
               collection: 'people',
+              depth: 0,
+              limit: 0,
+              pagination: false,
+              req,
               where: {
                 'parents.parent': { equals: id },
               },
-              limit: 0,
-              depth: 0,
-              pagination: false,
             })
 
             const entities = await req.payload.find({
-              req,
               collection: 'entities',
+              depth: 0,
+              limit: 0,
+              pagination: false,
+              req,
               where: {
                 parent: { equals: id },
               },
-              limit: 0,
-              depth: 0,
-              pagination: false,
             })
 
             return [
-              ...entities.docs.map(entity => {
+              ...entities.docs.map((entity) => {
                 return {
                   relationTo: 'entity',
                   value: entity,
                 }
               }),
-              ...people.docs.map(person => {
+              ...people.docs.map((person) => {
                 return {
                   relationTo: 'people',
                   value: person,
@@ -69,6 +68,7 @@ export const Entities: CollectionConfig = {
           },
         ],
       },
+      relationTo: ['entities', 'people'],
     },
     {
       name: 'parent',

examples/hierarchy/src/collections/People.ts

@@ -1,4 +1,4 @@
-import { CollectionConfig } from 'payload/types'
+import type { CollectionConfig } from 'payload/types'
 
 export const People: CollectionConfig = {
   slug: 'people',
@@ -23,8 +23,8 @@ export const People: CollectionConfig = {
         {
           name: 'allocation',
           type: 'number',
-          min: 0,
           max: 100,
+          min: 0,
         },
       ],
     },

examples/hierarchy/src/collections/Users.ts

@@ -1,15 +1,13 @@
-import { CollectionConfig } from 'payload/types'
+import type { CollectionConfig } from 'payload/types'
 
-const Users: CollectionConfig = {
+export const Users: CollectionConfig = {
   slug: 'users',
-  auth: true,
   admin: {
     useAsTitle: 'email',
   },
+  auth: true,
   fields: [
     // Email added by default
     // Add more fields as needed
   ],
 }
-
-export default Users

examples/hierarchy/src/payload.config.ts

@@ -1,30 +1,39 @@
-import path from 'path'
-
-import { payloadCloud } from '@payloadcms/plugin-cloud'
 import { mongooseAdapter } from '@payloadcms/db-mongodb'
-import { webpackBundler } from '@payloadcms/bundler-webpack'
-import { slateEditor } from '@payloadcms/richtext-slate'
+// import { payloadCloud } from '@payloadcms/plugin-cloud'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import path from 'path'
 import { buildConfig } from 'payload/config'
+// import sharp from 'sharp'
+import { fileURLToPath } from 'url'
 
-import Users from './collections/Users'
 import { Entities } from './collections/Entities'
 import { People } from './collections/People'
+import { Users } from './collections/Users'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 export default buildConfig({
   admin: {
     user: Users.slug,
-    bundler: webpackBundler(),
   },
-  editor: slateEditor({}),
-  collections: [Users, Entities, People],
-  typescript: {
-    outputFile: path.resolve(__dirname, 'payload-types.ts'),
-  },
-  graphQL: {
-    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
-  },
-  plugins: [payloadCloud()],
+  collections: [Entities, People, Users],
+  editor: lexicalEditor({}),
+  // plugins: [payloadCloud()], // TODO: Re-enable when cloud supports 3.0
   db: mongooseAdapter({
-    url: process.env.DATABASE_URI,
+    url: process.env.DATABASE_URI || '',
   }),
+  secret: process.env.PAYLOAD_SECRET || '',
+  typescript: {
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
+  },
+
+  // Sharp is now an optional dependency -
+  // if you want to resize images, crop, set focal point, etc.
+  // make sure to install it and pass it to the config.
+
+  // This is temporary - we may make an adapter pattern
+  // for this before reaching 3.0 stable
+
+  // sharp,
 })

examples/hierarchy/src/server.ts

@@ -1,27 +0,0 @@
-import express from 'express'
-import payload from 'payload'
-
-require('dotenv').config()
-const app = express()
-
-// Redirect root to Admin panel
-app.get('/', (_, res) => {
-  res.redirect('/admin')
-})
-
-const start = async () => {
-  // Initialize Payload
-  await payload.init({
-    secret: process.env.PAYLOAD_SECRET,
-    express: app,
-    onInit: async () => {
-      payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`)
-    },
-  })
-
-  // Add your own express routes here
-
-  app.listen(3000)
-}
-
-start()

examples/hierarchy/tsconfig.json

@@ -1,22 +1,28 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "baseUrl": ".",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
-    "strict": false,
-    "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
-      "payload/generated-types": ["./src/payload-types.ts"]
+      "@/*": ["./src/*"],
+      "@payload-config": ["./src/payload.config.ts"]
     }
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "build"],
-  "ts-node": {
-    "transpileOnly": true,
-    "swc": true
-  }
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }

examples/tailwind-shadcn-ui/.env.example

@@ -0,0 +1,2 @@
+DATABASE_URI=mongodb://127.0.0.1/payload-template-blank-3-0
+PAYLOAD_SECRET=YOUR_SECRET_HERE

examples/tailwind-shadcn-ui/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

examples/tailwind-shadcn-ui/.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+/.idea/*
+!/.idea/runConfigurations
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
+
+/media

examples/tailwind-shadcn-ui/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "semi": false
+}

examples/tailwind-shadcn-ui/README.md

@@ -0,0 +1,42 @@
+# Payload Blank Template
+
+A blank template for [Payload](https://github.com/payloadcms/payload) to help you get up and running quickly. This repo may have been created by running `npx create-payload-app@latest` and selecting the "blank" template or by cloning this template on [Payload Cloud](https://payloadcms.com/new/clone/blank).
+
+See the official [Examples Directory](https://github.com/payloadcms/payload/tree/main/examples) for details on how to use Payload in a variety of different ways.
+
+## Development
+
+To spin up the project locally, follow these steps:
+
+1. First clone the repo
+1. Then `cd YOUR_PROJECT_REPO && cp .env.example .env`
+1. Next `yarn && yarn dev` (or `docker-compose up`, see [Docker](#docker))
+1. Now `open http://localhost:3000/admin` to access the admin panel
+1. Create your first admin user using the form on the page
+
+That's it! Changes made in `./src` will be reflected in your app.
+
+### Docker
+
+Alternatively, you can use [Docker](https://www.docker.com) to spin up this project locally. To do so, follow these steps:
+
+1. Follow [steps 1 and 2 from above](#development), the docker-compose file will automatically use the `.env` file in your project root
+1. Next run `docker-compose up`
+1. Follow [steps 4 and 5 from above](#development) to login and create your first admin user
+
+That's it! The Docker instance will help you get up and running quickly while also standardizing the development environment across your teams.
+
+## Production
+
+To run Payload in production, you need to build and serve the Admin panel. To do so, follow these steps:
+
+1. First invoke the `payload build` script by running `yarn build` or `npm run build` in your project root. This creates a `./build` directory with a production-ready admin bundle.
+1. Then run `yarn serve` or `npm run serve` to run Node in production and serve Payload from the `./build` directory.
+
+### Deployment
+
+The easiest way to deploy your project is to use [Payload Cloud](https://payloadcms.com/new/import), a one-click hosting solution to deploy production-ready instances of your Payload apps directly from your GitHub repo. You can also deploy your app manually, check out the [deployment documentation](https://payloadcms.com/docs/production/deployment) for full details.
+
+## Questions
+
+If you have any issues or questions, reach out to us on [Discord](https://discord.com/invite/payload) or start a [GitHub discussion](https://github.com/payloadcms/payload/discussions).

examples/tailwind-shadcn-ui/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/(app)/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

examples/tailwind-shadcn-ui/next.config.mjs

@@ -0,0 +1,8 @@
+import { withPayload } from '@payloadcms/next/withPayload'
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Your Next.js config here
+}
+
+export default withPayload(nextConfig)

examples/tailwind-shadcn-ui/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "tailwind-shadcn",
+  "description": "A blank template to get started with Payload 3.0",
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "generate:types": "payload generate:types"
+  },
+  "engines": {
+    "node": ">=18.19.0"
+  },
+  "dependencies": {
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/richtext-lexical": "beta",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cross-env": "^7.0.3",
+    "lucide-react": "^0.376.0",
+    "next": "14.3.0-canary.7",
+    "payload": "beta",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "autoprefixer": "^10.4.19",
+    "dotenv": "^16.4.5",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.2"
+  }
+}

examples/tailwind-shadcn-ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

examples/tailwind-shadcn-ui/src/app/(app)/globals.css

@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

examples/tailwind-shadcn-ui/src/app/(app)/layout.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { Inter as FontSans } from 'next/font/google'
+
+type LayoutProps = {
+  children: ReactNode
+}
+
+import './globals.css'
+
+const fontSans = FontSans({
+  subsets: ['latin'],
+  variable: '--font-sans',
+})
+
+const Layout = ({ children }: LayoutProps) => {
+  return (
+    <html>
+      <body className={cn('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>
+        {children}
+      </body>
+    </html>
+  )
+}
+
+export default Layout

examples/tailwind-shadcn-ui/src/app/(app)/page.tsx

@@ -0,0 +1,11 @@
+import { NextPage } from 'next'
+
+const Page: NextPage = () => {
+  return (
+    <div className="container">
+      <h1 className="text-4xl font-bold">Hello, Next.js 14!</h1>
+    </div>
+  )
+}
+
+export default Page

examples/tailwind-shadcn-ui/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,17 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage } from '@payloadcms/next/views'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

examples/tailwind-shadcn-ui/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

examples/tailwind-shadcn-ui/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/tailwind-shadcn-ui/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

examples/tailwind-shadcn-ui/src/app/(payload)/custom.scss

@@ -0,0 +1,64 @@
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 222.2 84% 4.9%;
+
+  --radius: 0.5rem;
+}
+
+[data-theme='dark'] {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+
+  --primary: 210 40% 98%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 212.7 26.8% 83.9%;
+}

examples/tailwind-shadcn-ui/src/app/(payload)/layout.tsx

@@ -0,0 +1,16 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import '@payloadcms/next/css'
+import { RootLayout } from '@payloadcms/next/layouts'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

examples/tailwind-shadcn-ui/src/collections/Posts.ts

@@ -0,0 +1,24 @@
+import AlertBox from '@/components/AlertBox'
+import type { CollectionConfig } from 'payload/types'
+
+export const Posts: CollectionConfig = {
+  slug: 'posts',
+  admin: {
+    useAsTitle: 'title',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+    {
+      name: 'alertBox',
+      type: 'ui',
+      admin: {
+        components: {
+          Field: AlertBox,
+        },
+      },
+    },
+  ],
+}

examples/tailwind-shadcn-ui/src/collections/Users.ts

@@ -0,0 +1,13 @@
+import type { CollectionConfig } from 'payload/types'
+
+export const Users: CollectionConfig = {
+  slug: 'users',
+  admin: {
+    useAsTitle: 'email',
+  },
+  auth: true,
+  fields: [
+    // Email added by default
+    // Add more fields as needed
+  ],
+}

examples/tailwind-shadcn-ui/src/components/AlertBox.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+
+const AlertBox: React.FC = () => {
+  return (
+    <Alert>
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>Please add an appropriate title.</AlertDescription>
+    </Alert>
+  )
+}
+
+export default AlertBox

examples/tailwind-shadcn-ui/src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

examples/tailwind-shadcn-ui/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

examples/tailwind-shadcn-ui/src/payload.config.ts

@@ -0,0 +1,26 @@
+import { mongooseAdapter } from '@payloadcms/db-mongodb'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import path from 'path'
+import { buildConfig } from 'payload/config'
+import { fileURLToPath } from 'url'
+
+import { Posts } from './collections/Posts'
+import { Users } from './collections/Users'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+export default buildConfig({
+  admin: {
+    user: Users.slug,
+  },
+  collections: [Users, Posts],
+  editor: lexicalEditor({}),
+  secret: process.env.PAYLOAD_SECRET || '',
+  typescript: {
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
+  },
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI || '',
+  }),
+})

examples/tailwind-shadcn-ui/tailwind.config.js

@@ -0,0 +1,77 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['selector', '[data-mode="dark"]', '.dark'],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: '',
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+}

examples/tailwind-shadcn-ui/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@payload-config": [
+        "./src/payload.config.ts"
+      ]
+    },
+    "target": "ES2017"
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

examples/virtual-fields/.env.example

@@ -1,3 +1,3 @@
-MONGODB_URI=mongodb://127.0.0.1/payload-example-vitual-fields
-PAYLOAD_SECRET=ENTER-STRING-HERE
-PAYLOAD_PUBLIC_SERVER_URL=http://localhost:8000
+DATABASE_URI=mongodb://127.0.0.1/payload-template-blank-3-0
+PAYLOAD_SECRET=YOUR_SECRET_HERE
+PAYLOAD_PUBLIC_SEED=true

examples/virtual-fields/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

examples/virtual-fields/.gitignore

@@ -1,5 +1,43 @@
-build
-dist
-node_modules
-package-lock.json
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+/.idea/*
+!/.idea/runConfigurations
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
 .env
+
+/media

examples/virtual-fields/package.json

@@ -4,26 +4,31 @@
   "main": "dist/server.js",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env PAYLOAD_PUBLIC_SEED=true PAYLOAD_DROP_DATABASE=true PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
-    "build:server": "tsc",
-    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "generate:types": "payload generate:types"
   },
   "dependencies": {
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "latest"
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/richtext-lexical": "beta",
+    "cross-env": "^7.0.3",
+    "next": "^14.3.0-canary.7",
+    "payload": "beta",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@types/express": "^4.17.9",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "nodemon": "^2.0.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "dotenv": "^16.4.5",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.2"
   }
 }

examples/virtual-fields/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,17 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage } from '@payloadcms/next/views'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

examples/virtual-fields/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

examples/virtual-fields/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/virtual-fields/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

examples/virtual-fields/src/app/(payload)/layout.tsx

@@ -0,0 +1,16 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import '@payloadcms/next/css'
+import { RootLayout } from '@payloadcms/next/layouts'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

examples/virtual-fields/src/collections/Events.ts

@@ -1,14 +1,15 @@
-import payload from 'payload';
-import { CollectionConfig, FieldHook } from 'payload/types';
+import type { CollectionConfig, FieldHook } from 'payload/types'
 
-const getTotalPrice: FieldHook = async ({ data }) => {
-  const { price, salesTaxPercentage, fees } = data.tickets;
-  const totalPrice = Math.round(price * (1 + (salesTaxPercentage / 100))) + fees;
+const getTotalPrice: FieldHook = ({ data }) => {
+  if (!data) return 0
 
-  return totalPrice;
-};
+  const { fees, price, salesTaxPercentage } = data.tickets
+  const totalPrice = Math.round(price * (1 + salesTaxPercentage / 100)) + fees
 
-const Events: CollectionConfig = {
+  return totalPrice
+}
+
+export const Events: CollectionConfig = {
   slug: 'events',
   admin: {
     defaultColumns: ['title', 'date', 'location'],
@@ -31,9 +32,9 @@ const Events: CollectionConfig = {
         {
           name: 'location',
           type: 'relationship',
-          relationTo: 'locations',
-          maxDepth: 0,
           hasMany: false,
+          maxDepth: 0,
+          relationTo: 'locations',
         },
       ],
     },
@@ -82,12 +83,14 @@ const Events: CollectionConfig = {
                 readOnly: true,
               },
               hooks: {
-                beforeChange: [({ siblingData }) => {
-                  // Mutate the sibling data to prevent DB storage
-                  // eslint-disable-next-line no-param-reassign
-                  siblingData.totalPrice = undefined;
-                }],
                 afterRead: [getTotalPrice],
+                beforeChange: [
+                  ({ siblingData }) => {
+                    // Mutate the sibling data to prevent DB storage
+                    // eslint-disable-next-line no-param-reassign
+                    siblingData.totalPrice = undefined
+                  },
+                ],
               },
             },
           ],
@@ -95,6 +98,4 @@ const Events: CollectionConfig = {
       ],
     },
   ],
-};
-
-export default Events;
+}

examples/virtual-fields/src/collections/Location.ts

@@ -1,30 +1,33 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import payload from 'payload';
-import { CollectionConfig, FieldHook } from 'payload/types';
+import type { CollectionConfig, FieldHook } from 'payload/types'
 
-const formatLocation: FieldHook = async ({ data }) => {
-  return `${data.city}${data.state ? `, ${data.state},` : ','} ${data.country}`;
-};
+const formatLocation: FieldHook = ({ data }) => {
+  if (!data) return ''
+  return `${data.city}${data.state ? `, ${data.state},` : ','} ${data.country}`
+}
 
-const getLocationStaff: FieldHook = async ({ data }) => {
-  const staff = await payload.find({
+const getLocationStaff: FieldHook = async ({ data, req }) => {
+  if (!data) return null
+
+  const staff = await req.payload.find({
     collection: 'staff',
     where: {
       location: {
         equals: data.id,
       },
     },
-  });
+  })
 
   if (staff.docs) {
-    return staff.docs.map((doc) => doc.id);
+    return staff.docs.map((doc) => doc.id)
   }
 
-  return null;
-};
+  return null
+}
 
-const getNextEvent: FieldHook = async ({ data }) => {
-  const eventsByDate = await payload.find({
+const getNextEvent: FieldHook = async ({ data, req }) => {
+  if (!data) return null
+
+  const eventsByDate = await req.payload.find({
     collection: 'events',
     sort: 'date',
     where: {
@@ -32,30 +35,32 @@ const getNextEvent: FieldHook = async ({ data }) => {
         equals: data.id,
       },
     },
-  });
+  })
 
   if (eventsByDate?.docs) {
-    return eventsByDate.docs[0]?.id;
+    return eventsByDate.docs[0]?.id
   }
 
-  return null;
-};
+  return null
+}
 
-const getAllEvents: FieldHook = async ({ data }) => {
-  const allEvents = await payload.find({
+const getAllEvents: FieldHook = async ({ data, req }) => {
+  if (!data) return null
+
+  const allEvents = await req.payload.find({
     collection: 'events',
     where: {
       location: {
         equals: data.id,
       },
     },
-  });
-  if (allEvents.docs) return allEvents.docs.map((doc) => doc.id);
+  })
+  if (allEvents.docs) return allEvents.docs.map((doc) => doc.id)
 
-  return null;
-};
+  return null
+}
 
-const Locations: CollectionConfig = {
+export const Locations: CollectionConfig = {
   slug: 'locations',
   admin: {
     defaultColumns: ['location', 'nextEvent'],
@@ -64,18 +69,7 @@ const Locations: CollectionConfig = {
   fields: [
     {
       name: 'location',
-      label: false,
       type: 'text',
-      hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.location = undefined;
-        }],
-        afterRead: [
-          formatLocation,
-        ],
-      },
       access: {
         create: () => false,
         update: () => false,
@@ -83,6 +77,17 @@ const Locations: CollectionConfig = {
       admin: {
         hidden: true,
       },
+      hooks: {
+        afterRead: [formatLocation],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.location = undefined
+          },
+        ],
+      },
+      label: false,
     },
     {
       type: 'row',
@@ -105,10 +110,7 @@ const Locations: CollectionConfig = {
     },
     {
       name: 'events',
-      maxDepth: 0,
       type: 'relationship',
-      relationTo: 'events',
-      hasMany: true,
       access: {
         create: () => false,
         update: () => false,
@@ -116,21 +118,23 @@ const Locations: CollectionConfig = {
       admin: {
         readOnly: true,
       },
+      hasMany: true,
       hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.events = undefined;
-        }],
         afterRead: [getAllEvents],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.events = undefined
+          },
+        ],
       },
+      maxDepth: 0,
+      relationTo: 'events',
     },
     {
       name: 'staff',
       type: 'relationship',
-      relationTo: 'staff',
-      hasMany: true,
-      maxDepth: 0,
       access: {
         create: () => false,
         update: () => false,
@@ -138,37 +142,42 @@ const Locations: CollectionConfig = {
       admin: {
         readOnly: true,
       },
+      hasMany: true,
       hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.staff = undefined;
-        }],
         afterRead: [getLocationStaff],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.staff = undefined
+          },
+        ],
       },
+      maxDepth: 0,
+      relationTo: 'staff',
     },
     {
       name: 'nextEvent',
       type: 'relationship',
-      relationTo: 'events',
-      admin: {
-        position: 'sidebar',
-        readOnly: true,
-      },
       access: {
         create: () => false,
         update: () => false,
       },
-      hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.nextEvent = undefined;
-        }],
-        afterRead: [getNextEvent],
+      admin: {
+        position: 'sidebar',
+        readOnly: true,
       },
+      hooks: {
+        afterRead: [getNextEvent],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.nextEvent = undefined
+          },
+        ],
+      },
+      relationTo: 'events',
     },
   ],
-};
-
-export default Locations;
+}

examples/virtual-fields/src/collections/Staff.ts

@@ -1,10 +1,11 @@
-import { CollectionConfig, FieldHook } from 'payload/types';
+import type { CollectionConfig, FieldHook } from 'payload/types'
 
-const populateFullTitle: FieldHook = async ({ data }) => (
-  `${data.title} ${data.firstName} ${data.lastName}`
-);
+const populateFullTitle: FieldHook = ({ data }) => {
+  if (!data) return ''
+  return `${data.title} ${data.firstName} ${data.lastName}`
+}
 
-const Staff: CollectionConfig = {
+export const Staff: CollectionConfig = {
   slug: 'staff',
   admin: {
     defaultColumns: ['fullTitle', 'location'],
@@ -18,19 +19,19 @@ const Staff: CollectionConfig = {
         create: () => false,
         update: () => false,
       },
-      hooks: {
-        beforeChange: [({ siblingData }) => {
-          // Mutate the sibling data to prevent DB storage
-          // eslint-disable-next-line no-param-reassign
-          siblingData.fullTitle = undefined;
-        }],
-        afterRead: [
-          populateFullTitle,
-        ],
-      },
       admin: {
         hidden: true,
       },
+      hooks: {
+        afterRead: [populateFullTitle],
+        beforeChange: [
+          ({ siblingData }) => {
+            // Mutate the sibling data to prevent DB storage
+            // eslint-disable-next-line no-param-reassign
+            siblingData.fullTitle = undefined
+          },
+        ],
+      },
     },
     {
       name: 'title',
@@ -50,12 +51,10 @@ const Staff: CollectionConfig = {
     {
       name: 'location',
       type: 'relationship',
-      relationTo: 'locations',
-      maxDepth: 0,
       hasMany: true,
+      maxDepth: 0,
+      relationTo: 'locations',
       required: true,
     },
   ],
-};
-
-export default Staff;
+}

examples/virtual-fields/src/collections/Users.ts

@@ -1,18 +1,16 @@
-import { CollectionConfig } from 'payload/types';
+import type { CollectionConfig } from 'payload/types'
 
-const Users: CollectionConfig = {
+export const Users: CollectionConfig = {
   slug: 'users',
-  auth: true,
-  admin: {
-    useAsTitle: 'email',
-  },
   access: {
     read: () => true,
   },
+  admin: {
+    useAsTitle: 'email',
+  },
+  auth: true,
   fields: [
     // Email added by default
     // Add more fields as needed
   ],
-};
-
-export default Users;
+}

examples/virtual-fields/src/components/BeforeLogin/index.tsx

@@ -1,24 +1,16 @@
-import React from 'react';
+import React from 'react'
 
-const BeforeLogin: React.FC = () => {
+export const BeforeLogin: React.FC = () => {
   if (process.env.PAYLOAD_PUBLIC_SEED === 'true') {
     return (
       <div>
         <h3>Virtual Fields Demo</h3>
         <p>
-          Log in with the email
-          {' '}
-          <strong>dev@payloadcms.com</strong>
-          {' '}
-          and the password
-          {' '}
-          <strong>test</strong>
-          .
+          Log in with the email <strong>dev@payloadcms.com</strong> and the password{' '}
+          <strong>test</strong>.
         </p>
       </div>
-    );
+    )
   }
-  return null;
-};
-
-export default BeforeLogin;
+  return null
+}

examples/virtual-fields/src/payload.config.ts

@@ -1,29 +1,38 @@
-import { buildConfig } from 'payload/config';
-import path from 'path';
-import Events from './collections/Events';
-import Locations from './collections/Location';
-import Staff from './collections/Staff';
-import Users from './collections/Users';
-import BeforeLogin from './components/BeforeLogin';
+import { mongooseAdapter } from '@payloadcms/db-mongodb'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import path from 'path'
+import { buildConfig } from 'payload/config'
+import { fileURLToPath } from 'url'
+
+import { Events } from './collections/Events'
+import { Locations } from './collections/Location'
+import { Staff } from './collections/Staff'
+import { Users } from './collections/Users'
+import { BeforeLogin } from './components/BeforeLogin'
+import { seedData } from './seed'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 export default buildConfig({
-  serverURL: 'http://localhost:3000',
   admin: {
-    user: Users.slug,
     components: {
       beforeLogin: [BeforeLogin],
     },
+    user: Users.slug,
   },
-  collections: [
-    Events,
-    Locations,
-    Staff,
-    Users,
-  ],
+  collections: [Events, Locations, Staff, Users],
+  editor: lexicalEditor({}),
+  serverURL: 'http://localhost:3000',
+  // plugins: [payloadCloud()], // TODO: Re-enable when cloud supports 3.0
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI || '',
+  }),
+  onInit: async (payload) => {
+    await seedData(payload)
+  },
+  secret: process.env.PAYLOAD_SECRET || '',
   typescript: {
-    outputFile: path.resolve(__dirname, 'payload-types.ts'),
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
   },
-  graphQL: {
-    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
-  },
-});
+})

examples/virtual-fields/src/seed/events.ts

@@ -1,45 +1,45 @@
 export const eventsOne = [
   {
-    title: 'Event 1',
     date: '2023-02-01T00:00:00.000Z',
     pricing: {
-      price: 10,
       fees: 5,
+      price: 10,
     },
     tickets: {
+      fees: 3.5,
       price: 100,
       salesTaxPercentage: 10,
-      fees: 3.50,
     },
+    title: 'Event 1',
   },
   {
-    title: 'Event 2',
     date: '2023-03-01T00:00:00.000Z',
     tickets: {
+      fees: 5,
       price: 20,
       salesTaxPercentage: 20,
-      fees: 5,
     },
+    title: 'Event 2',
   },
-];
+]
 
 export const eventsTwo = [
   {
-    title: 'Event 3',
     date: '2023-03-31T23:00:00.000Z',
     tickets: {
+      fees: 2,
       price: 10,
       salesTaxPercentage: 10,
-      fees: 2,
     },
+    title: 'Event 3',
   },
   {
-    title: 'Event 4',
     date: '2023-04-30T23:00:00.000Z',
     tickets: {
+      fees: 5,
       price: 50,
       salesTaxPercentage: 10,
-      fees: 5,
     },
+    title: 'Event 4',
   },
-];
+]

examples/virtual-fields/src/seed/index.ts

@@ -1,28 +1,27 @@
-import payload from 'payload';
-import { MongoClient } from 'mongodb';
-import { eventsOne, eventsTwo } from './events';
-import { locationOne, locationTwo } from './locations';
-import { staffOne, staffTwo } from './staff';
+import type { Payload } from 'payload'
 
-export async function seedData() {
+import { eventsOne, eventsTwo } from './events'
+import { locationOne, locationTwo } from './locations'
+import { staffOne, staffTwo } from './staff'
+
+export async function seedData(payload: Payload) {
   await payload.create({
     collection: 'users',
     data: {
       email: 'dev@payloadcms.com',
       password: 'test',
     },
-  });
+  })
 
   const { id: locationOneID } = await payload.create({
     collection: 'locations',
     data: locationOne,
-  });
+  })
 
   const { id: locationTwoID } = await payload.create({
     collection: 'locations',
     data: locationTwo,
-  });
-
+  })
 
   await payload.create({
     collection: 'staff',
@@ -30,8 +29,7 @@ export async function seedData() {
       ...staffOne,
       location: [locationOneID],
     },
-  });
-
+  })
 
   await payload.create({
     collection: 'staff',
@@ -39,30 +37,31 @@ export async function seedData() {
       ...staffTwo,
       location: [locationTwoID],
     },
-  });
+  })
 
   eventsOne.map((event) => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     payload.create({
       collection: 'events',
       data: {
         ...event,
         location: locationOneID,
       },
-    });
-
-    return null;
-  });
+    })
 
+    return null
+  })
 
   eventsTwo.map((event) => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     payload.create({
       collection: 'events',
       data: {
         ...event,
         location: locationTwoID,
       },
-    });
+    })
 
-    return null;
-  });
+    return null
+  })
 }

examples/virtual-fields/src/seed/locations.ts

@@ -1,12 +1,12 @@
 export const locationOne = {
   city: 'Grand Rapids',
   country: 'USA',
-  state: 'MI',
   events: [],
-};
+  state: 'MI',
+}
 
 export const locationTwo = {
   city: 'London',
   country: 'UK',
   events: [],
-};
+}

examples/virtual-fields/src/seed/staff.ts

@@ -1,11 +1,11 @@
 export const staffOne = {
-  title: 'Mr',
   firstName: 'John',
   lastName: 'Doe',
-};
+  title: 'Mr',
+}
 
 export const staffTwo = {
-  title: 'Miss',
   firstName: 'Jane',
   lastName: 'Doe',
-};
+  title: 'Miss',
+}

examples/virtual-fields/src/server.ts

@@ -1,37 +0,0 @@
-import express from 'express';
-import payload from 'payload';
-import path from 'path';
-import { seedData } from './seed';
-
-require('dotenv').config({
-  path: path.resolve(__dirname, '../.env'),
-});
-
-const app = express();
-
-// Redirect all traffic at root to admin UI
-app.get('/', (_, res) => {
-  res.redirect('/admin');
-});
-
-const start = async () => {
-  // Initialize Payload
-  await payload.init({
-    secret: process.env.PAYLOAD_SECRET,
-    mongoURL: process.env.MONGODB_URI,
-    express: app,
-    onInit: async () => {
-      payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
-    },
-  });
-
-  if (process.env.PAYLOAD_PUBLIC_SEED === 'true') {
-    payload.logger.info('---- SEEDING DATABASE ----');
-    await seedData();
-    payload.logger.info('---- SEED COMPLETE ----');
-  }
-
-  app.listen(3000);
-};
-
-start();

examples/virtual-fields/tsconfig.json

@@ -1,18 +1,44 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
-    "strict": false,
-    "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react"
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@payload-config": [
+        "./src/payload.config.ts"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "build"],
-  "ts-node": {
-    "transpileOnly": true
-  }
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

examples/whitelabel/.env.example

@@ -1,3 +1,3 @@
-MONGODB_URI=mongodb://127.0.0.1/payload-example-whitelabel
+DATABASE_URI=mongodb://127.0.0.1/payload-example-whitelabel
 PAYLOAD_SECRET=ENTER-STRING-HERE
 PAYLOAD_PUBLIC_SERVER_URL=http://localhost:8000

examples/whitelabel/.eslintrc.cjs

@@ -0,0 +1,7 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  parserOptions: {
+    project: ['./tsconfig.json'],
+    tsconfigRootDir: __dirname,
+  },
+}

examples/whitelabel/.gitignore copy

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+/.idea/*
+!/.idea/runConfigurations
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env
+
+/media

examples/whitelabel/.npmrc copy

@@ -0,0 +1 @@
+legacy-peer-deps=true

examples/whitelabel/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/whitelabel/nodemon copy.json

@@ -1,5 +1,4 @@
 {
-  "$schema": "https://json.schemastore.org/nodemon.json",
   "ext": "ts",
   "exec": "ts-node src/server.ts -- -I",
   "stdin": false

examples/whitelabel/package.json

@@ -4,26 +4,31 @@
   "main": "dist/server.js",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts nodemon",
-    "build:payload": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload build",
-    "build:server": "tsc",
-    "build": "yarn copyfiles && yarn build:payload && yarn build:server",
-    "serve": "cross-env PAYLOAD_CONFIG_PATH=dist/payload.config.js NODE_ENV=production node dist/server.js",
-    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png}\" dist/",
-    "generate:types": "cross-env PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:types",
-    "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
+    "dev": "cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "devsafe": "rm -rf .next && cross-env NODE_OPTIONS=--no-deprecation next dev",
+    "build": "cross-env NODE_OPTIONS=--no-deprecation next build",
+    "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
+    "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
+    "lint": "cross-env NODE_OPTIONS=--no-deprecation next lint",
+    "generate:types": "payload generate:types"
   },
   "dependencies": {
-    "dotenv": "^8.2.0",
-    "express": "^4.17.1",
-    "payload": "latest"
+    "@payloadcms/db-mongodb": "beta",
+    "@payloadcms/next": "beta",
+    "@payloadcms/richtext-lexical": "beta",
+    "cross-env": "^7.0.3",
+    "next": "^14.3.0-canary.7",
+    "payload": "beta",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@types/express": "^4.17.9",
-    "copyfiles": "^2.4.1",
-    "cross-env": "^7.0.3",
-    "nodemon": "^2.0.6",
-    "ts-node": "^9.1.1",
-    "typescript": "^4.8.4"
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "dotenv": "^16.4.5",
+    "tsx": "^4.7.1",
+    "typescript": "^5.4.2"
   }
 }

examples/whitelabel/src/app/(payload)/admin/[[...segments]]/page.tsx

@@ -0,0 +1,17 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import config from '@payload-config'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage } from '@payloadcms/next/views'
+
+type Args = {
+  params: {
+    segments: string[]
+  }
+  searchParams: {
+    [key: string]: string | string[]
+  }
+}
+
+const Page = ({ params, searchParams }: Args) => RootPage({ config, params, searchParams })
+
+export default Page

examples/whitelabel/src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_DELETE, REST_GET, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

examples/whitelabel/src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

examples/whitelabel/src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

examples/whitelabel/src/app/(payload)/layout.tsx

@@ -0,0 +1,16 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+import configPromise from '@payload-config'
+import '@payloadcms/next/css'
+import { RootLayout } from '@payloadcms/next/layouts'
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+
+import './custom.scss'
+
+type Args = {
+  children: React.ReactNode
+}
+
+const Layout = ({ children }: Args) => <RootLayout config={configPromise}>{children}</RootLayout>
+
+export default Layout

examples/whitelabel/src/graphics/Icon/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 const css = `
   html[data-theme="dark"] .text {
@@ -13,27 +13,25 @@ const css = `
     width: 50px;
     height: 50px;
   }
-`;
+`
 
 export const Icon = () => {
   return (
     <svg
       className="graphic-icon"
-      width="430"
+      fill="none"
       height="435"
       viewBox="0 0 430 435"
-      fill="none"
+      width="430"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <style>
-        {css}
-      </style>
+      <style>{css}</style>
       <rect
         className="bg"
-        width="430"
+        fill="#0C0C0C"
         height="434"
         transform="translate(0 0.154785)"
-        fill="#0C0C0C"
+        width="430"
       />
       <path
         className="text"
@@ -41,5 +39,5 @@ export const Icon = () => {
         fill="white"
       />
     </svg>
-  );
-};
+  )
+}

examples/whitelabel/src/graphics/Logo/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 
 const css = `
   html[data-theme="dark"] path {
@@ -8,25 +8,20 @@ const css = `
   .graphic-logo {
     width: 150px;
     height: auto;
-  }`;
+  }`
 
 export const Logo = () => {
   return (
     <svg
       className="graphic-logo"
-      xmlns="http://www.w3.org/2000/svg"
       fill="#0F0F0F"
       viewBox="0 0 518 563"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <style type="text/css">
-        {css}
-      </style>
-      <g
-        transform="translate(0,563) scale(0.1,-0.1)"
-        fill="#000000"
-        stroke="none"
-      >
-        <path d="M440 3060 l0 -2170 2150 0 2150 0 0 2170 0 2170 -2150 0 -2150 0 0
+      <style type="text/css">{css}</style>
+      <g fill="#000000" stroke="none" transform="translate(0,563) scale(0.1,-0.1)">
+        <path
+          d="M440 3060 l0 -2170 2150 0 2150 0 0 2170 0 2170 -2150 0 -2150 0 0
           -2170z m1855 301 c52 -24 88 -63 117 -126 19 -42 23 -71 26 -182 4 -151 -8
           -213 -58 -281 -55 -77 -140 -107 -230 -83 -66 18 -105 53 -141 128 -31 61 -33
           74 -37 189 -5 145 16 233 69 298 60 72 169 97 254 57z m766 8 c74 -25 126 -85
@@ -39,15 +34,17 @@ export const Logo = () => {
           264 -19 144 13 296 79 366 60 63 167 84 247 47z m-2505 -296 l0 -305 165 0
           165 0 0 -35 0 -35 -210 0 -210 0 0 340 0 340 45 0 45 0 0 -305z"
         />
-        <path d="M2140 3286 c-80 -44 -114 -265 -64 -418 44 -135 193 -147 254 -22 22
+        <path
+          d="M2140 3286 c-80 -44 -114 -265 -64 -418 44 -135 193 -147 254 -22 22
           44 24 63 24 184 1 122 -2 140 -23 183 -13 26 -36 56 -51 67 -33 23 -102 26
           -140 6z"
         />
-        <path d="M3667 3280 c-14 -11 -36 -41 -49 -68 -20 -42 -23 -61 -23 -177 0
+        <path
+          d="M3667 3280 c-14 -11 -36 -41 -49 -68 -20 -42 -23 -61 -23 -177 0
           -120 2 -134 27 -187 30 -65 64 -88 129 -88 35 0 48 6 79 38 52 52 63 98 58
           257 -3 117 -6 134 -28 173 -14 24 -37 50 -52 58 -40 21 -110 18 -141 -6z"
         />
       </g>
     </svg>
-  );
-};
+  )
+}

examples/whitelabel/src/payload.config.ts

@@ -1,12 +1,16 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { buildConfig } from 'payload/config';
-import path from 'path';
+import { mongooseAdapter } from '@payloadcms/db-mongodb'
+import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import path from 'path'
+import { buildConfig } from 'payload/config'
+import { fileURLToPath } from 'url'
 
-import { Icon } from './graphics/Icon';
-import { Logo } from './graphics/Logo';
+import { Icon } from './graphics/Icon'
+import { Logo } from './graphics/Logo'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
 
 export default buildConfig({
-  serverURL: 'http://localhost:3000',
   admin: {
     // Add your own logo and icon here
     components: {
@@ -22,10 +26,13 @@ export default buildConfig({
       titleSuffix: '- Your App Name',
     },
   },
+  db: mongooseAdapter({
+    url: process.env.DATABASE_URI || '',
+  }),
+  editor: lexicalEditor({}),
+  secret: process.env.PAYLOAD_SECRET || '',
+  serverURL: 'http://localhost:3000',
   typescript: {
-    outputFile: path.resolve(__dirname, 'payload-types.ts'),
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
   },
-  graphQL: {
-    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
-  },
-});
+})

examples/whitelabel/src/server.ts

@@ -1,30 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable @typescript-eslint/no-var-requires */
-import express from 'express';
-import payload from 'payload';
-import path from 'path';
-
-require('dotenv').config();
-
-const app = express();
-
-// Redirect root to Admin panel
-app.get('/', (_, res) => {
-  res.redirect('/admin');
-});
-
-app.use('/assets', express.static(path.resolve(__dirname, '../assets')));
-
-// Initialize Payload
-payload.init({
-  secret: process.env.PAYLOAD_SECRET,
-  mongoURL: process.env.MONGODB_URI,
-  express: app,
-  onInit: () => {
-    payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
-  },
-});
-
-// Add your own express routes here
-
-app.listen(3000);

examples/whitelabel/tsconfig.json

@@ -1,18 +1,44 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
-    "strict": false,
-    "esModuleInterop": true,
     "skipLibCheck": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "jsx": "react"
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@payload-config": [
+        "./src/payload.config.ts"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "build"],
-  "ts-node": {
-    "transpileOnly": true
-  }
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

jest.config.js

@@ -1,3 +1,20 @@
+/**
+ * Ignores all ESM packages that make Jest mad.
+ *
+ * "Jest encountered an unexpected token"
+ *
+ * Direct packages:
+ * - file-type
+ */
+const esModules = [
+  // file-type and all dependencies: https://github.com/sindresorhus/file-type
+  'file-type',
+  'strtok3',
+  'readable-web-to-node-stream',
+  'token-types',
+  'peek-readable',
+].join('|')
+
 /** @type {import('jest').Config} */
 const baseJestConfig = {
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
@@ -14,6 +31,10 @@ const baseJestConfig = {
   transform: {
     '^.+\\.(t|j)sx?$': ['@swc/jest'],
   },
+  transformIgnorePatterns: [
+    `/node_modules/(?!.pnpm)(?!(${esModules})/)`,
+    `/node_modules/.pnpm/(?!(${esModules.replace(/\//g, '\\+')})@)`,
+  ],
   verbose: true,
 }