0.5.0-beta.0

.editorconfig

@@ -1,29 +0,0 @@
-[*]
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.{js,ts,tsx}]
-indent_style = space
-indent_size = 2
-
-[*.html]
-indent_style = space
-indent_size = 2
-
-[*.scss]
-indent_style = space
-indent_size = 2
-
-[*.mdx]
-indent_style = space
-indent_size = 2
-
-[*.json]
-indent_style = space
-indent_size = 2
-
-[*.md]
-indent_style = space
-indent_size = 2

.eslintignore

@@ -1,13 +0,0 @@
-.tmp
-**/.git
-**/.hg
-**/.pnp.*
-**/.svn
-**/.yarn/**
-**/build
-**/dist/**
-**/node_modules
-**/temp
-playwright.config.ts
-jest.config.js
-test/live-preview/next-app

.eslintrc.cjs

@@ -1,64 +0,0 @@
-/** @type {import('eslint').Linter.Config} */
-module.exports = {
-  extends: ['@payloadcms'],
-  ignorePatterns: ['README.md', 'packages/**/*.spec.ts'],
-  overrides: [
-    {
-      files: ['packages/**'],
-      plugins: ['payload'],
-      rules: {
-        'payload/no-jsx-import-statements': 'warn',
-      },
-    },
-    {
-      files: ['scripts/**'],
-      rules: {
-        '@typescript-eslint/no-unused-vars': 'off',
-        'no-console': 'off',
-        'perfectionist/sort-object-types': 'off',
-        'perfectionist/sort-objects': 'off',
-      },
-    },
-    {
-      extends: ['plugin:@typescript-eslint/disable-type-checked'],
-      files: ['*.js', '*.cjs', '*.json', '*.md', '*.yml', '*.yaml'],
-    },
-    {
-      files: ['packages/eslint-config-payload/**'],
-      rules: {
-        'perfectionist/sort-objects': 'off',
-      },
-    },
-    {
-      files: ['package.json', 'tsconfig.json'],
-      rules: {
-        'perfectionist/sort-array-includes': 'off',
-        'perfectionist/sort-astro-attributes': 'off',
-        'perfectionist/sort-classes': 'off',
-        'perfectionist/sort-enums': 'off',
-        'perfectionist/sort-exports': 'off',
-        'perfectionist/sort-imports': 'off',
-        'perfectionist/sort-interfaces': 'off',
-        'perfectionist/sort-jsx-props': 'off',
-        'perfectionist/sort-keys': 'off',
-        'perfectionist/sort-maps': 'off',
-        'perfectionist/sort-named-exports': 'off',
-        'perfectionist/sort-named-imports': 'off',
-        'perfectionist/sort-object-types': 'off',
-        'perfectionist/sort-objects': 'off',
-        'perfectionist/sort-svelte-attributes': 'off',
-        'perfectionist/sort-union-types': 'off',
-        'perfectionist/sort-vue-attributes': 'off',
-      },
-    },
-  ],
-  parserOptions: {
-    project: ['./tsconfig.json'],
-    tsconfigRootDir: __dirname,
-    EXPERIMENTAL_useSourceOfProjectReferenceRedirect: true,
-    EXPERIMENTAL_useProjectService: true,
-    sourceType: 'module',
-    ecmaVersion: 'latest',
-  },
-  root: true,
-}

.eslintrc.js

@@ -0,0 +1,30 @@
+module.exports = {
+  plugins: ['@typescript-eslint', 'prettier'],
+  parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+  parserOptions: {
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      jsx: true, // Allows for the parsing of JSX
+    },
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    'prettier',
+  ],
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+  ignorePatterns: ['node_modules', 'src/templates', 'dist'],
+  rules: {
+    'prettier/prettier': 'error',
+    'import/prefer-default-export': 'off',
+    'no-underscore-dangle': 'off',
+    '@typescript-eslint/consistent-type-imports': 'warn',
+  },
+};

.git-blame-ignore-revs

@@ -1,21 +0,0 @@
-# lint and format
-ae7d6f97d205491390f15850e5104c7abded1550
-1fbda85cd04a774cb978778b0f813001664c53dd
-
-# prettier all templates
-75a428ddc4672903455998eaba7ae9f9d710bf85
-
-# re-run prettier and eslint everywhere again
-cdaa0acd61d3001407609915bd573b78565d5571
-
-# prettier write again
-dfac7395fed95fc5d8ebca21b786ce70821942bb
-
-# lint and format plugin-cloud
-fb7d1be2f3325d076b7c967b1730afcef37922c2
-
-# lint and format create-payload-app
-5fd3d430001efe86515262ded5e26f00c1451181
-
-# 3.0 prettier & lint everywhere
-6789e61488a1d3de56f472ac3214faf344030005

.gitattributes

@@ -1,2 +0,0 @@
-# Auto detect text files and perform LF normalization
-* text=auto eol=lf

.github/CODEOWNERS

@@ -1,41 +0,0 @@
-# Order matters. The last matching pattern takes precedence.
-
-### Core ###
-/packages/payload/src/uploads/ @denolfe
-/packages/payload/src/admin/ @jmikrut @jacobsfletch @JarrodMFlesch
-
-### Adapters ###
-/packages/db-*/ @denolfe @jmikrut @DanRibbens
-/packages/richtext-*/ @denolfe @jmikrut @DanRibbens @AlessioGr
-
-### Plugins ###
-/packages/plugin-*/ @denolfe @jmikrut @DanRibbens
-/packages/plugin-cloud*/ @denolfe
-/packages/plugin-form-builder/ @jacobsfletch
-/packages/plugin-live-preview*/ @jacobsfletch
-/packages/plugin-nested-docs/ @jacobsfletch
-/packages/plugin-redirects/ @jacobsfletch
-/packages/plugin-search/ @jacobsfletch
-/packages/plugin-sentry/ @JessChowdhury
-/packages/plugin-seo/ @jacobsfletch
-/packages/plugin-stripe/ @jacobsfletch
-
-### Examples ###
-/examples/ @jacobsfletch
-/examples/testing/ @JarrodMFlesch
-/examples/email/ @JessChowdhury
-/examples/whitelabel/ @JessChowdhury
-
-### Templates ###
-/templates/ @jacobsfletch @denolfe
-
-### Misc ###
-/packages/create-payload-app/ @denolfe
-/packages/eslint-config-payload/ @denolfe
-/packages/payload-admin-bar/ @jacobsfletch
-
-### Root ###
-/package.json @denolfe
-/scripts/ @denolfe
-/.github/ @denolfe
-/.github/CODEOWNERS @denolfe

.github/ISSUE_TEMPLATE/1.bug_report.yml

@@ -1,47 +0,0 @@
-name: Bug Report
-description: Create a bug report for Payload
-labels: ['[possible-bug]']
-body:
-  - type: markdown
-    attributes:
-      value: |
-        *Note:* Feature requests should be opened as [discussions](https://github.com/payloadcms/payload/discussions/new?category=feature-requests-ideas).
-  - type: input
-    id: reproduction-link
-    attributes:
-      label: Link to reproduction
-      description: Want us to look into your issue faster? Follow the [reproduction-guide](https://github.com/payloadcms/payload/blob/main/.github/reproduction-guide.md) for more information.
-    validations:
-      required: false
-  - type: textarea
-    attributes:
-      label: Describe the Bug
-    validations:
-      required: true
-  - type: textarea
-    attributes:
-      label: To Reproduce
-      description: Steps to reproduce the behavior, please provide a clear description of how to reproduce the issue, based on the linked minimal reproduction. Screenshots can be provided in the issue body below. If using code blocks, make sure that [syntax highlighting is correct](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting) and double check that the rendered preview is not broken.
-    validations:
-      required: true
-  - type: input
-    id: version
-    attributes:
-      label: Payload Version
-      description: What version of Payload are you running?
-    validations:
-      required: true
-  - type: input
-    id: adapters-plugins
-    attributes:
-      label: Adapters and Plugins
-      description: What adapters and plugins are you using? ie. db-mongodb, db-postgres, bundler-webpack, etc.
-  - type: markdown
-    attributes:
-      value: Before submitting the issue, go through the steps you've written down to make sure the steps provided are detailed and clear.
-  - type: markdown
-    attributes:
-      value: Contributors should be able to follow the steps provided in order to reproduce the bug.
-  - type: markdown
-    attributes:
-      value: These steps are used to add integration tests to ensure the same issue does not happen again. Thanks in advance!

.github/ISSUE_TEMPLATE/DOCUMENTATION_ISSUE.md

@@ -1,13 +0,0 @@
----
-name: Documentation Issue
-about: Suggest fix to Payload documentation
-labels: 'documentation'
----
-
-# Documentation Issue
-
-<!--- Please provide a summary of the documentation issue -->
-
-## Additional Details
-
-<!--- Provide any other additional details -->

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +0,0 @@
-blank_issues_enabled: false
-contact_links:
-  - name: Feature Request
-    url: https://github.com/payloadcms/payload/discussions
-    about: Suggest an idea to improve Payload in our GitHub Discussions
-  - name: Question about Payload
-    url: https://github.com/payloadcms/payload/discussions
-    about: Please ask Payload-related questions in our GitHub Discussions

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,23 +0,0 @@
-## Description
-
-<!-- Please include a summary of the pull request and any related issues it fixes. Please also include relevant motivation and context. -->
-
-- [ ] I have read and understand the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository.
-
-## Type of change
-
-<!-- Please delete options that are not relevant. -->
-
-- [ ] Chore (non-breaking change which does not add functionality)
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] Change to the [templates](https://github.com/payloadcms/payload/tree/main/templates) directory (does not affect core functionality)
-- [ ] Change to the [examples](https://github.com/payloadcms/payload/tree/main/examples) directory (does not affect core functionality)
-- [ ] This change requires a documentation update
-
-## Checklist:
-
-- [ ] I have added tests that prove my fix is effective or that my feature works
-- [ ] Existing test suite passes locally with my changes
-- [ ] I have made corresponding changes to the documentation

.github/reproduction-guide.md

@@ -1,64 +0,0 @@
-# Reproduction Guide
-
-1. [Fork](https://github.com/payloadcms/payload/fork) this repo
-2. Optionally, create a new branch for your reproduction
-3. Run `pnpm install` to install dependencies
-4. Open up the `test/_community` directory
-5. Add any necessary `collections/globals/fields` in this directory to recreate the issue you are experiencing
-6. Run `pnpm dev _community` to start the admin panel
-
-**NOTE:** The goal is to isolate the problem by reducing the number of `collections/globals/fields` you add to the `test/_community` folder. This folder is _not_ meant for you to copy your project into, but rather recreate the issue you are experiencing with minimal config.
-
-## Example test directory file tree
-
-```text
-.
-├── config.ts
-├── int.spec.ts
-├── e2e.spec.ts
-└── payload-types.ts
-```
-
-- `config.ts` - This is the _granular_ Payload config for testing. It should be as lightweight as possible. Reference existing configs for an example
-- `int.spec.ts` [Optional] - This is the test file run by jest. Any test file must have a `*int.spec.ts` suffix.
-- `e2e.spec.ts` [Optional] - This is the end-to-end test file that will load up the admin UI using the above config and run Playwright tests.
-- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `pnpm dev:generate-types _community`.
-
-The directory split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config. You should modify the files in `test/_community` to get started.
-
-<br />
-
-## Testing is optional but encouraged
-
-An issue does not need to have failing tests — reproduction steps with your forked repo are enough at this point. Some people like to dive deeper and we want to give you the guidance/tools to do so. Read more below:
-
-### Running integration tests (Payload API tests)
-
-First install [Jest Runner for VSVode](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner).
-
-There are a couple ways run integration tests:
-
-- **Granularly** - you can run individual tests in vscode by installing the Jest Runner plugin and using that to run individual tests. Clicking the `debug` button will run the test in debug mode allowing you to set break points.
-
-  <img src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/github/int-debug.png" />
-
-- **Manually** - you can run all int tests in the `/test/_community/int.spec.ts` file by running the following command:
-
-  ```bash
-  pnpm test:int _community
-  ```
-
-### Running E2E tests (Admin Panel UI tests)
-
-The easiest way to run E2E tests is to install
-
-- [Playwright Test for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright)
-- [Playwright Runner](https://marketplace.visualstudio.com/items?itemName=ortoni.ortoni)
-
-Once they are installed you can open the `testing` tab in vscode sidebar and drill down to the test you want to run, i.e. `/test/_community/e2e.spec.ts`
-
-<img src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/github/e2e-debug.png" />
-
-#### Notes
-
-The default credentials are `dev@payloadcms.com` as email and `test` as password. They can be found in `test/credentials.ts`. By default, these will be autofilled, so no log-in is required.

.github/workflows/main.yml

@@ -1,358 +0,0 @@
-name: build
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-  push:
-    branches: ['main', 'alpha']
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  changes:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: read
-    outputs:
-      needs_build: ${{ steps.filter.outputs.needs_build }}
-      templates: ${{ steps.filter.outputs.templates }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 25
-      - uses: dorny/paths-filter@v3
-        id: filter
-        with:
-          filters: |
-            needs_build:
-              - '.github/workflows/**'
-              - 'packages/**'
-              - 'test/**'
-              - 'pnpm-lock.yaml'
-              - 'package.json'
-            templates:
-              - 'templates/**'
-      - name: Log all filter results
-        run: |
-          echo "needs_build: ${{ steps.filter.outputs.needs_build }}"
-          echo "templates: ${{ steps.filter.outputs.templates }}"
-
-  core-build:
-    needs: changes
-    if: ${{ needs.changes.outputs.needs_build == 'true' }}
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 25
-
-      - name: Use Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v4
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-            ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      - run: pnpm install
-      - run: pnpm run build:core
-
-      - name: Cache build
-        uses: actions/cache@v4
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-  plugins-build:
-    needs: changes
-    if: ${{ needs.changes.outputs.needs_build == 'true' }}
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 25
-
-      - name: Use Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
-          run_install: false
-
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - uses: actions/cache@v4
-        name: Setup pnpm cache
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-            ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-
-      - run: pnpm install
-      - run: pnpm run build:plugins
-
-  tests-unit:
-    runs-on: ubuntu-latest
-    needs: core-build
-    if: false # Disable until tests are updated for 3.0
-
-    steps:
-      - name: Use Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Unit Tests
-        run: pnpm test:unit
-        env:
-          NODE_OPTIONS: --max-old-space-size=8096
-
-  tests-int:
-    runs-on: ubuntu-latest
-    needs: core-build
-    strategy:
-      fail-fast: false
-      matrix:
-        database:
-          - mongodb
-          - postgres
-        #  - postgres-custom-schema
-        #  - postgres-uuid
-        #  - supabase
-    env:
-      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: postgres
-      POSTGRES_DB: payloadtests
-      AWS_ENDPOINT_URL: http://127.0.0.1:4566
-      AWS_ACCESS_KEY_ID: localstack
-      AWS_SECRET_ACCESS_KEY: localstack
-      AWS_REGION: us-east-1
-
-    steps:
-      - name: Use Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Start LocalStack
-        run: pnpm docker:start
-
-      - name: Start PostgreSQL
-        uses: CasperWA/postgresql-action@v1.2
-        with:
-          postgresql version: '14' # See https://hub.docker.com/_/postgres for available versions
-          postgresql db: ${{ env.POSTGRES_DB }}
-          postgresql user: ${{ env.POSTGRES_USER }}
-          postgresql password: ${{ env.POSTGRES_PASSWORD }}
-        if: startsWith(matrix.database, 'postgres')
-
-      - name: Install Supabase CLI
-        uses: supabase/setup-cli@v1
-        with:
-          version: latest
-        if: matrix.database == 'supabase'
-
-      - name: Initialize Supabase
-        run: |
-          supabase init
-          supabase start
-        if: matrix.database == 'supabase'
-
-      - name: Wait for PostgreSQL
-        run: sleep 30
-        if: startsWith(matrix.database, 'postgres')
-
-      - name: Configure PostgreSQL
-        run: |
-          psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "CREATE ROLE runner SUPERUSER LOGIN;"
-          psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "SELECT version();"
-          echo "POSTGRES_URL=postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" >> $GITHUB_ENV
-        if: startsWith(matrix.database, 'postgres')
-
-      - name: Configure PostgreSQL with custom schema
-        run: |
-          psql "postgresql://$POSTGRES_USER:$POSTGRES_PASSWORD@localhost:5432/$POSTGRES_DB" -c "CREATE SCHEMA custom;"
-        if: matrix.database == 'postgres-custom-schema'
-
-      - name: Configure Supabase
-        run: |
-          echo "POSTGRES_URL=postgresql://postgres:postgres@127.0.0.1:54322/postgres" >> $GITHUB_ENV
-        if: matrix.database == 'supabase'
-
-      - name: Integration Tests
-        run: pnpm test:int
-        env:
-          NODE_OPTIONS: --max-old-space-size=8096
-          PAYLOAD_DATABASE: ${{ matrix.database }}
-          POSTGRES_URL: ${{ env.POSTGRES_URL }}
-
-  tests-e2e:
-    runs-on: ubuntu-latest
-    needs: core-build
-    strategy:
-      fail-fast: false
-      matrix:
-        # find test -type f -name 'e2e.spec.ts' | sort | xargs dirname | xargs -I {} basename {}
-        suite:
-          - _community
-          - access-control
-          # - admin
-          - auth
-          - email
-          - field-error-states
-          - fields-relationship
-          # - fields
-          - fields/lexical
-          - live-preview
-          - localization
-          - plugin-form-builder
-          - plugin-nested-docs
-          - plugin-seo
-          - versions
-          - uploads
-
-    steps:
-      - name: Use Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Install Playwright
-        run: pnpm exec playwright install --with-deps
-
-      - name: E2E Tests
-        run: pnpm test:e2e ${{ matrix.suite }}
-
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: test-results-${{ matrix.suite }}
-          path: test/test-results/
-          retention-days: 1
-
-  tests-type-generation:
-    if: false # This should be replaced with gen on a real Payload project
-    runs-on: ubuntu-latest
-    needs: core-build
-
-    steps:
-      - name: Use Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v3
-        with:
-          version: 8
-          run_install: false
-
-      - name: Restore build
-        uses: actions/cache@v4
-        with:
-          path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}
-
-      - name: Generate Payload Types
-        run: pnpm dev:generate-types fields
-
-      - name: Generate GraphQL schema file
-        run: pnpm dev:generate-graphql-schema graphql-schema-gen
-
-  templates:
-    needs: changes
-    if: false # Disable until templates are updated for 3.0
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        template: [blank, website, ecommerce]
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 25
-
-      - name: Use Node.js 18
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-
-      - name: Start MongoDB
-        uses: supercharge/mongodb-github-action@1.10.0
-        with:
-          mongodb-version: 6.0
-
-      - name: Build Template
-        run: |
-          cd templates/${{ matrix.template }}
-          cp .env.example .env
-          yarn install
-          yarn build
-          yarn generate:types

.gitignore

@@ -1,26 +1,6 @@
-coverage
-package-lock.json
-dist
-/.idea/*
-!/.idea/runConfigurations
-!/.idea/payload.iml
 
-test-results
-.devcontainer
-.localstack
-/migrations
-.localstack
-.turbo
-
-.turbo
-
-# Ignore test directory media folder/files
-/media
-test/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
+# Created by https://www.toptal.com/developers/gitignore/api/node,macos,vscode,windows
+# Edit at https://www.toptal.com/developers/gitignore?templates=node,macos,vscode,windows
 
 ### macOS ###
 # General
@@ -28,6 +8,9 @@ test/media
 .AppleDouble
 .LSOverride
 
+# Icon must end with two \r
+Icon
+
 
 # Thumbnails
 ._*
@@ -47,10 +30,6 @@ Network Trash Folder
 Network Trash Folder
 Temporary Items
 .apdisk
-### macOS Patch ###
-# iCloud generated files
-*.icloud
-
 
 ### Node ###
 # Logs
@@ -59,7 +38,6 @@ npm-debug.log*
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 lerna-debug.log*
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
@@ -96,8 +74,8 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
+
+# TypeScript v1 declaration files
 typings/
 
 # TypeScript cache
@@ -108,9 +86,6 @@ web_modules/
 
 # Optional eslint cache
 .eslintcache
-# Optional stylelint cache
-.stylelintcache
-
 
 # Microbundle cache
 .rpt2_cache/
@@ -126,12 +101,10 @@ web_modules/
 
 # Yarn Integrity file
 .yarn-integrity
-# dotenv environment variable files
+
 # dotenv environment variables file
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
+.env
+.env.test
 .env*.local
 
 # parcel-bundler cache (https://parceljs.org/)
@@ -139,7 +112,6 @@ web_modules/
 .parcel-cache
 
 # Next.js build output
-out
 .next
 
 # Nuxt.js build / generate output
@@ -154,12 +126,6 @@ dist
 
 # vuepress build output
 .vuepress/dist
-# vuepress v2.x temp and cache directory
-.temp
-
-# Docusaurus cache and generated files
-.docusaurus
-
 
 # Serverless directories
 .serverless/
@@ -175,91 +141,13 @@ dist
 
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-### Node Patch ###
-# Serverless Webpack directories
-.webpack/
-
-# Optional stylelint cache
-
-# SvelteKit build / generate output
-.svelte-kit
-
-### SublimeText ###
-# Cache files for Sublime Text
-*.tmlanguage.cache
-*.tmPreferences.cache
-*.stTheme.cache
-
-# Workspace files are user-specific
-*.sublime-workspace
-
-# Project files should be checked into the repository, unless a significant
-# proportion of contributors will probably not be using Sublime Text
-# *.sublime-project
-
-# SFTP configuration file
-sftp-config.json
-sftp-config-alt*.json
-
-# Package control specific files
-Package Control.last-run
-Package Control.ca-list
-Package Control.ca-bundle
-Package Control.system-ca-bundle
-Package Control.cache/
-Package Control.ca-certs/
-Package Control.merged-ca-bundle
-Package Control.user-ca-bundle
-oscrypto-ca-bundle.crt
-bh_unicode_properties.cache
-
-# Sublime-github package stores a github token in this file
-# https://packagecontrol.io/packages/sublime-github
-GitHub.sublime-settings
-
-### VisualStudioCode ###
+
 ### vscode ###
 .vscode/*
 !.vscode/settings.json
 !.vscode/tasks.json
 !.vscode/launch.json
-!.vscode/*.code-snippets
-
-# Local History for Visual Studio Code
-.history/
-
-# Built Visual Studio Code Extensions
-*.vsix
-
-### VisualStudioCode Patch ###
-# Ignore all local history of files
-.history
-.ionide
-
-# CMake
-cmake-build-*/
-
-# File-based project format
-*.iws
-
-# IntelliJ
-out/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
+!.vscode/extensions.json
 *.code-workspace
 
 ### Windows ###
@@ -287,7 +175,4 @@ $RECYCLE.BIN/
 
 # Windows shortcuts
 *.lnk
-# End of https://www.toptal.com/developers/gitignore/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
-
-/build
-.swc
+

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-pnpm run lint-staged --quiet

.idea/payload.iml

@@ -1,54 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/payload/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/payload/components" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/payload/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/.swc" />
-      <excludeFolder url="file://$MODULE_DIR$/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/examples" />
-      <excludeFolder url="file://$MODULE_DIR$/media" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/create-payload-app/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/create-payload-app/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-mongodb/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-mongodb/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-postgres/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/db-postgres/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/graphql/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/graphql/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-react/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview-react/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/live-preview/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/next/.swc" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/next/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/payload/fields" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud-storage/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud-storage/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-cloud/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-form-builder/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-nested-docs/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-nested-docs/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-redirects/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-redirects/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-search/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-search/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-sentry/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-seo/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-seo/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/plugin-stripe/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-lexical/.turbo" />
-      <excludeFolder url="file://$MODULE_DIR$/packages/richtext-lexical/dist" />
-      <excludeFolder url="file://$MODULE_DIR$/templates" />
-      <excludeFolder url="file://$MODULE_DIR$/test/.swc" />
-      <excludeFolder url="file://$MODULE_DIR$/versions" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/runConfigurations/Run_Dev_Fields.xml

@@ -1,8 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Run Dev Fields" type="NodeJSConfigurationType" application-parameters="--no-deprecation fields" path-to-js-file="test/dev.js" working-dir="$PROJECT_DIR$">
-    <envs>
-      <env name="NODE_OPTIONS" value="--no-deprecation" />
-    </envs>
-    <method v="2" />
-  </configuration>
-</component>

.idea/runConfigurations/Run_Dev__community.xml

@@ -1,8 +0,0 @@
-<component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Run Dev _community" type="NodeJSConfigurationType" application-parameters="--no-deprecation _community" path-to-js-file="test/dev.js" working-dir="$PROJECT_DIR$">
-    <envs>
-      <env name="NODE_OPTIONS" value="--no-deprecation" />
-    </envs>
-    <method v="2" />
-  </configuration>
-</component>

.node-version

@@ -1 +0,0 @@
-v18.19.1

.npmrc

@@ -1,2 +0,0 @@
-symlink=true
-node-linker=isolated # due to a typescript bug, isolated mode requires @types/express-serve-static-core, terser and monaco-editor to be installed https://github.com/microsoft/TypeScript/issues/47663#issuecomment-1519138189 along with two other changes in the code which I've marked with (tsbugisolatedmode) in the code

.nvmrc

@@ -1 +0,0 @@
-v18.19.1

.prettierignore

@@ -1,12 +0,0 @@
-.tmp
-**/.git
-**/.hg
-**/.pnp.*
-**/.svn
-**/.yarn/**
-**/build
-**/dist/**
-**/node_modules
-**/temp
-**/docs/**
-tsconfig.json

.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 100,
+  printWidth: 85,
   parser: 'typescript',
   semi: false,
   singleQuote: true,

.prettierrc.json

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

.swcrc

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

.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "firsttris.vscode-jest-runner",
-    "ms-playwright.playwright"
-  ]
-}

.vscode/launch.json

@@ -3,195 +3,11 @@
   // Hover to view descriptions of existing attributes.
   "configurations": [
     {
-      "command": "pnpm generate:types",
-      "name": "Generate Types CLI",
-      "request": "launch",
-      "type": "node-terminal",
-      "cwd": "${workspaceFolder}"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js _community",
+      "command": "ts-node -T ./src/index.ts -n asdf -t blank --db mongodb --no-deps",
       "cwd": "${workspaceFolder}",
-      "name": "Run Dev Community",
+      "name": "Debug",
       "request": "launch",
       "type": "node-terminal"
     },
-    {
-      "command": "node --no-deprecation test/dev.js live-preview",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Live Preview",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js admin",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Admin",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "pnpm run dev plugin-cloud-storage",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev - plugin-cloud-storage",
-      "request": "launch",
-      "type": "node-terminal",
-      "env": {
-        "PAYLOAD_PUBLIC_CLOUD_STORAGE_ADAPTER": "s3"
-      }
-    },
-    {
-      "command": "node --no-deprecation test/dev.js fields",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Fields",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "node --no-deprecation test/dev.js versions",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Postgres",
-      "request": "launch",
-      "type": "node-terminal",
-      "env": {
-        "PAYLOAD_DATABASE": "postgres"
-      }
-    },
-    {
-      "command": "pnpm run dev versions",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Versions",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "pnpm run dev localization",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Localization",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "pnpm run dev uploads",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Uploads",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "PAYLOAD_BUNDLER=vite pnpm run dev fields",
-      "cwd": "${workspaceFolder}",
-      "name": "Run Dev Fields (Vite)",
-      "request": "launch",
-      "type": "node-terminal",
-      "env": {
-        "NODE_ENV": "production"
-      }
-    },
-    {
-      "command": "pnpm run test:int live-preview",
-      "cwd": "${workspaceFolder}",
-      "name": "Live Preview Int Tests",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "pnpm run test:int plugin-search",
-      "cwd": "${workspaceFolder}",
-      "name": "Search Plugin Int Tests",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts build",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/fields/config.ts",
-        "PAYLOAD_BUNDLER": "vite",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-      },
-      "name": "Build CLI - Vite",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts build",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/fields/config.ts",
-        "PAYLOAD_ANALYZE_BUNDLE": "true",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-      },
-      "name": "Build CLI - Webpack",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:status",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "postgres",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - status",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:create yass",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "postgres",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - create",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:down",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "mongoose",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - down",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:reset",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "mongoose",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - reset",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    },
-    {
-      "command": "ts-node ./packages/payload/src/bin/index.ts migrate:refresh",
-      "env": {
-        "PAYLOAD_CONFIG_PATH": "test/migrations-cli/config.ts",
-        "PAYLOAD_DATABASE": "mongoose",
-        "DISABLE_SWC": "true" // SWC messes up debugging the bin scripts
-        // "PAYLOAD_DROP_DATABASE": "true",
-      },
-      "name": "Migrate CLI - refresh",
-      "outputCapture": "std",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ],
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0"
+  ]
 }

.vscode/settings.json

@@ -1,44 +0,0 @@
-{
-  "npm.packageManager": "pnpm",
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  },
-  "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "editor.formatOnSave": true
-  },
-  "editor.formatOnSaveMode": "file",
-  // All ESLint rules to 'warn' to differentate from TypeScript's 'error' level
-  "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
-  "typescript.tsdk": "node_modules/typescript/lib",
-  // Load .git-blame-ignore-revs file
-  "gitlens.advanced.blame.customArguments": ["--ignore-revs-file", ".git-blame-ignore-revs"],
-  "[javascript][typescript][typescriptreact]": {
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": "explicit"
-    }
-  }
-}

CONTRIBUTING.md

@@ -1,124 +0,0 @@
-# Contributing to Payload
-
-Below you'll find a set of guidelines for how to contribute to Payload.
-
-## Opening issues
-
-Before you submit an issue, please check all existing [open and closed issues](https://github.com/payloadcms/payload/issues) to see if your issue has previously been resolved or is already known. If there is already an issue logged, feel free to upvote it by adding a :thumbsup: [reaction](https://github.com/blog/2119-add-reactions-to-pull-requests-issues-and-comments). If you would like to submit a new issue, please fill out our Issue Template to the best of your ability so we can accurately understand your report.
-
-## Security issues & vulnerabilities
-
-If you come across an issue related to security, or a potential attack vector within Payload or one of its dependencies, please DO NOT create a publicly viewable issue. Instead, please contact us directly at [`dev@payloadcms.com`](mailto:dev@payloadcms.com). We will do everything we can to respond to the issue as soon as possible.
-
-If you find a vulnerability within the core Payload repository, and we determine that it is remediable and of significant nature, we will be happy to pay you a reward for your findings and diligence. [`Contact us`](mailto:dev@payloadcms.com) to find out more.
-
-## Documentation edits
-
-Payload documentation can be found directly within its codebase, and you can feel free to make changes / improvements to any of it through opening a PR. We utilize these files directly in our website and will periodically deploy documentation updates as necessary.
-
-## Building additional features
-
-If you're an incredibly awesome person and want to help us make Payload even better through new features or additions, we would be thrilled to work with you.
-
-## Design Contributions
-
-When it comes to design-related changes or additions, it's crucial for us to ensure a cohesive user experience and alignment with our broader design vision. Before embarking on any implementation that would affect the design or UI/UX, we ask that you **first share your design proposal** with us for review and approval.
-
-Our design review ensures that proposed changes fit seamlessly with other components, both existing and planned. This step is meant to prevent unintentional design inconsistencies and to save you from investing time in implementing features that might need significant design alterations later.
-
-### Before Starting
-
-To help us work on new features, you can create a new feature request post in [GitHub Discussion](https://github.com/payloadcms/payload/discussions) or discuss it in our [Discord](https://discord.com/invite/payload). New functionality often has large implications across the entire Payload repo, so it is best to discuss the architecture and approach before starting work on a pull request.
-
-### Installation & Requirements
-
-Payload is structured as a Monorepo, encompassing not only the core Payload platform but also various plugins and packages. To install all required dependencies, you have to run `pnpm install` once in the root directory. **PNPM IS REQUIRED!** Yarn or npm will not work - you will have to use pnpm to develop in the core repository. In most systems, the easiest way to install pnpm is to run `corepack enable` in your terminal.
-
-If you're coming from a very outdated version of payload, it is recommended to nuke the node_modules folder before running pnpm install. On UNIX systems, you can easily do that using the `pnpm clean:unix` command, which will delete all node_modules folders and build artefacts.
-
-It is also recommended to use at least Node v18 or higher. You can check your current node version by typing `node --version` in your terminal. The easiest way to switch between different node versions is to use [nvm](https://github.com/nvm-sh/nvm#intro).
-
-### Code
-
-Most new functionality should keep testing in mind. All top-level directories within the `test/` directory are for testing a specific category: `fields`, `collections`, etc.
-
-If it makes sense to add your feature to an existing test directory, please do so.
-
-A typical directory with `test/` will be structured like this:
-
-```text
-.
-├── config.ts
-├── int.spec.ts
-├── e2e.spec.ts
-└── payload-types.ts
-```
-
-- `config.ts` - This is the _granular_ Payload config for testing. It should be as lightweight as possible. Reference existing configs for an example
-- `int.spec.ts` - This is the test file run by jest. Any test file must have a `*int.spec.ts` suffix.
-- `e2e.spec.ts` - This is the end-to-end test file that will load up the admin UI using the above config and run Playwright tests. These tests are typically only needed if a large change is being made to the Admin UI.
-- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `pnpm dev:generate-types my-test-dir`. Replace `my-test-dir` with the name of your testing directory.
-
-Each test directory is split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config.
-
-The following command will start Payload with your config: `pnpm dev my-test-dir`. Example: `pnpm dev fields` for the test/`fields` test suite. This command will start up Payload using your config and refresh a test database on every restart. If you're using VS Code, the most common run configs are automatically added to your editor - you should be able to find them in your VS Code launch tab.
-
-By default, payload will [automatically log you in](https://payloadcms.com/docs/authentication/config#admin-autologin) with the default credentials. To disable that, you can either pass in the --no-auto-login flag (example: `pnpm dev my-test-dir --no-auto-login`) or set the `PAYLOAD_PUBLIC_DISABLE_AUTO_LOGIN` environment variable to `false`.
-
-The default credentials are `dev@payloadcms.com` as E-Mail and `test` as password. These are used in the auto-login.
-
-### Testing with your own MongoDB database
-
-If you wish to use your own MongoDB database for the `test` directory instead of using the in memory database, all you need to do is add the following env vars to the `test/dev.ts` file:
-
-- `process.env.NODE_ENV`
-- `process.env.PAYLOAD_TEST_MONGO_URL`
-- Simply set `process.env.NODE_ENV` to `test` and set `process.env.PAYLOAD_TEST_MONGO_URL` to your MongoDB URL e.g. `mongodb://127.0.0.1/your-test-db`.
-
-### Using Postgres
-
-If you have postgres installed on your system, you can also run the test suites using postgres. By default, mongodb is used.
-
-To do that, simply set the `PAYLOAD_DATABASE` environment variable to `postgres`.
-
-### Running the e2e and int tests
-
-You can run the entire test suite using `pnpm test`. If you wish to only run e2e tests, you can use `pnpm test:e2e`. If you wish to only run int tests, you can use `pnpm test:int`.
-
-By default, `pnpm test:int` will only run int test against MongoDB. To run int tests against postgres, you can use `pnpm test:int:postgres`. You will have to have postgres installed on your system for this to work.
-
-### Commits
-
-We use [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for our commit messages. Please follow this format when creating commits. Here are some examples:
-
-- `feat: adds new feature`
-- `fix: fixes bug`
-- `docs: adds documentation`
-- `chore: does chore`
-
-Here's a breakdown of the format. At the top-level, we use the following types to categorize our commits:
-
-- `feat`: new feature that adds functionality. These are automatically added to the changelog when creating new releases.
-- `fix`: a fix to an existing feature. These are automatically added to the changelog when creating new releases.
-- `docs`: changes to [docs](./docs) only. These do not appear in the changelog.
-- `chore`: changes to code that is neither a fix nor a feature (e.g. refactoring, adding tests, etc.). These do not appear in the changelog.
-
-If you are committing to [templates](./templates) or [examples](./examples), use the `chore` type with the proper scope, like this:
-
-- `chore(templates): adds feature to template`
-- `chore(examples): fixes bug in example`
-
-## Pull Requests
-
-For all Pull Requests, you should be extremely descriptive about both your problem and proposed solution. If there are any affected open or closed issues, please leave the issue number in your PR message.
-
-## Previewing docs
-
-This is how you can preview changes you made locally to the docs:
-
-1. Clone our [website repository](https://github.com/payloadcms/website)
-2. Run `yarn install`
-3. Duplicate the `.env.example` file and rename it to `.env`
-4. Add a `DOCS_DIR` environment variable to the `.env` file which points to the absolute path of your modified docs folder. For example `DOCS_DIR=/Users/yourname/Documents/GitHub/payload/docs`
-5. Run `yarn run fetchDocs:local`. If this was successful, you should see no error messages and the following output: *Docs successfully written to /.../website/src/app/docs.json*. There could be error messages if you have incorrect markdown in your local docs folder. In this case, it will tell you how you can fix it
-6. You're done! Now you can start the website locally using `yarn run dev` and preview the docs under [http://localhost:3000/docs/](http://localhost:3000/docs/)

ISSUE_GUIDE.md

@@ -1,69 +0,0 @@
-# Reporting an issue
-
-To report an issue, please follow the steps below:
-
-1. Fork this repository
-2. Add necessary collections/globals/fields to the `test/_community` directory to recreate the issue you are experiencing
-3. Create an issue and add a link to your forked repo
-
-**The goal is to isolate the problem by reducing the number of fields/collections you add to the test/\_community folder. This folder is not meant for you to copy your project into, but to recreate the issue you are experiencing with minimal config.**
-
-## Test directory file tree explanation
-
-```text
-.
-├── config.ts
-├── int.spec.ts
-├── e2e.spec.ts
-└── payload-types.ts
-```
-
-- `config.ts` - This is the _granular_ Payload config for testing. It should be as lightweight as possible. Reference existing configs for an example
-- `int.spec.ts` [Optional] - This is the test file run by jest. Any test file must have a `*int.spec.ts` suffix.
-- `e2e.spec.ts` [Optional] - This is the end-to-end test file that will load up the admin UI using the above config and run Playwright tests.
-- `payload-types.ts` - Generated types from `config.ts`. Generate this file by running `pnpm dev:generate-types _community`.
-
-The directory split up in this way specifically to reduce friction when creating tests and to add the ability to boot up Payload with that specific config. You should modify the files in `test/_community` to get started.
-
-## How to start test collection admin UI
-
-To start the admin panel so you can manually recreate your issue, you can run the following command:
-
-```bash
-# This command will start up Payload using your config
-# NOTE: it will wipe the test database on restart
-pnpm dev _community
-```
-
-## Testing is optional but encouraged
-
-An issue does not need to have failing tests — reproduction steps with your forked repo are enough at this point. Some people like to dive deeper and we want to give you the guidance/tools to do so. Read more below.
-
-### How to run integration tests (Payload API tests)
-
-There are a couple ways to do this:
-
-- **Granularly** - you can run individual tests in vscode by installing the Jest Runner plugin and using that to run individual tests. Clicking the `debug` button will run the test in debug mode allowing you to set break points.
-
-  <img src="https://raw.githubusercontent.com/payloadcms/payload/main/src/admin/assets/images/github/int-debug.png" />
-
-- **Manually** - you can run all int tests in the `/test/_community/int.spec.ts` file by running the following command:
-
-  ```bash
-  pnpm test:int _community
-  ```
-
-### How to run E2E tests (Admin Panel UI tests)
-
-The easiest way to run E2E tests is to install
-
-- [Playwright Test for VSCode](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright)
-- [Playwright Runner](https://marketplace.visualstudio.com/items?itemName=ortoni.ortoni)
-
-Once they are installed you can open the `testing` tab in vscode sidebar and drill down to the test you want to run, i.e. `/test/_community/e2e.spec.ts`
-
-<img src="https://raw.githubusercontent.com/payloadcms/payload/main/src/admin/assets/images/github/e2e-debug.png" />
-
-#### Notes
-
-- It is recommended to add the test credentials (located in `test/credentials.ts`) to your autofill for `localhost:3000/admin` as this will be required on every nodemon restart. The default credentials are `dev@payloadcms.com` as email and `test` as password.

README.md

@@ -1,128 +1,34 @@
-<a href="https://payloadcms.com"><img width="100%" src="https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/assets/images/github-banner-alt.jpg?raw=true" alt="Payload headless CMS Admin panel built with React" /></a>
-<br />
-<br />
-<p align="left">
-  <a href="https://github.com/payloadcms/payload/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/payloadcms/payload/main.yml?style=flat-square"></a>
-  &nbsp;
-  <a href="https://discord.gg/payload"><img alt="Discord" src="https://img.shields.io/discord/967097582721572934?label=Discord&color=7289da&style=flat-square" /></a>
-  &nbsp;
-  <a href="https://www.npmjs.com/package/payload"><img alt="npm" src="https://img.shields.io/npm/v/payload?style=flat-square" /></a>
-  &nbsp;
-  <a href="https://twitter.com/payloadcms"><img src="https://img.shields.io/badge/follow-payloadcms-1DA1F2?logo=twitter&style=flat-square" alt="Payload Twitter" /></a>
-</p>
-<hr/>
-<h4>
-<a target="_blank" href="https://payloadcms.com/docs/getting-started/what-is-payload" rel="dofollow"><strong>Explore the Docs</strong></a>&nbsp;·&nbsp;<a target="_blank" href="https://payloadcms.com/community-help" rel="dofollow"><strong>Community Help</strong></a>&nbsp;·&nbsp;<a target="_blank" href="https://demo.payloadcms.com/" rel="dofollow"><strong>Try Live Demo</strong></a>&nbsp;·&nbsp;<a target="_blank" href="https://github.com/payloadcms/payload/discussions/1539" rel="dofollow"><strong>Roadmap</strong></a>&nbsp;·&nbsp;<a target="_blank" href="https://www.g2.com/products/payload-cms/reviews#reviews" rel="dofollow"><strong>View G2 Reviews</strong></a>
-</h4>
-<hr/>
+# Create Payload App
 
-> [!IMPORTANT]
-> 🎉 <strong>Payload 2.0 is now available!</strong> Read more in the <a target="_blank" href="https://payloadcms.com/blog/payload-2-0" rel="dofollow"><strong>announcement post</strong></a>.
+CLI for easily starting new Payload project
 
-<h3>Benefits over a regular CMS</h3>
-<ul>
-  <li>Don’t hit some third-party SaaS API, hit your own API</li>
-  <li>Use your own database and own your data</li>
-  <li>It's just Express - do what you want outside of Payload</li>
-  <li>No need to learn how Payload works - if you know JS, you know Payload</li>
-  <li>No vendor lock-in</li>
-  <li>Avoid microservices hell - get everything (even auth) in one place</li>
-  <li>Never touch ancient WP code again</li>
-  <li>Build faster, never hit a roadblock</li>
-  <li>Both admin and backend are 100% extensible</li>
-</ul>
-
-## ☁️ Deploy instantly with Payload Cloud.
-
-Create a cloud account, connect your GitHub, and [deploy in minutes](https://payloadcms.com/new).
-
-## 🚀 Get started by self-hosting completely free, forever.
-
-Before beginning to work with Payload, make sure you have all of the [required software](https://payloadcms.com/docs/getting-started/installation).
+## Usage
 
 ```text
-npx create-payload-app@latest
+
+  USAGE
+
+      $ npx create-payload-app
+      $ npx create-payload-app my-project
+      $ npx create-payload-app -n my-project -t blog
+
+  OPTIONS
+
+      -n     my-payload-app         Set project name
+      -t     template_name          Choose specific template
+
+        Available templates:
+
+        blank                       Blank Template
+        website                     Website Template
+        ecommerce                   E-commerce Template
+        plugin                      Template for creating a Payload plugin
+        payload-demo                Payload demo site at https://demo.payloadcms.com
+        payload-website             Payload website CMS at https://payloadcms.com
+
+      --use-npm                     Use npm to install dependencies
+      --use-yarn                    Use yarn to install dependencies
+      --use-pnpm                    Use pnpm to install dependencies
+      --no-deps                     Do not install any dependencies
+      -h                            Show help
 ```
-
-Alternatively, it only takes about five minutes to [create an app from scratch](https://payloadcms.com/docs/getting-started/installation#from-scratch).
-
-## 🖱️ One-click templates
-
-Jumpstart your next project by starting with a pre-made template. These are production-ready, end-to-end solutions designed to get you to market as fast as possible.
-
-### [🛒 E-Commerce](https://github.com/payloadcms/payload/tree/main/templates/ecommerce)
-
-Eliminate the need to combine Shopify and a CMS, and instead do it all with Payload + Stripe. Comes with a beautiful, fully functional front-end complete with shopping cart, checkout, orders, and much more.
-
-### [🌐 Website](https://github.com/payloadcms/payload/tree/main/templates/website)
-
-Build any kind of website, blog, or portfolio from small to enterprise. Comes with a beautiful, fully functional front-end complete with posts, projects, comments, and much more.
-
-We're constantly adding more templates to our [Templates Directory](https://github.com/payloadcms/payload/tree/main/templates). If you maintain your own template, consider adding the `payload-template` topic to your GitHub repository for others to find.
-
-- [Official Templates](https://github.com/payloadcms/payload/tree/main/templates)
-- [Community Templates](https://github.com/topics/payload-template)
-
-## ✨ Features
-
-- Completely free and open-source
-- [GraphQL](https://payloadcms.com/docs/graphql/overview), [REST](https://payloadcms.com/docs/rest-api/overview), and [Local](https://payloadcms.com/docs/local-api/overview) APIs
-- [Easily customizable ReactJS Admin](https://payloadcms.com/docs/admin/overview)
-- [Fully self-hosted](https://payloadcms.com/docs/production/deployment)
-- [Extensible Authentication](https://payloadcms.com/docs/authentication/overview)
-- [Local file storage & upload](https://payloadcms.com/docs/upload/overview)
-- [Version History and Drafts](https://payloadcms.com/docs/versions/overview)
-- [Field-based Localization](https://payloadcms.com/docs/configuration/localization)
-- [Block-based Layout Builder](https://payloadcms.com/docs/fields/blocks)
-- [Extensible SlateJS rich text editor](https://payloadcms.com/docs/fields/rich-text)
-- [Array field type](https://payloadcms.com/docs/fields/array)
-- [Field conditional logic](https://payloadcms.com/docs/fields/overview#conditional-logic)
-- Extremely granular [Access Control](https://payloadcms.com/docs/access-control/overview)
-- [Document and field-level hooks](https://payloadcms.com/docs/hooks/overview) for every action Payload provides
-- Built with Typescript & very Typescript-friendly
-- Intensely fast API
-- Highly secure thanks to HTTP-only cookies, CSRF protection, and more
-
-<a target="_blank" href="https://github.com/payloadcms/payload/discussions"><strong>Request Feature</strong></a>
-
-## 🗒️ Documentation
-
-Check out the [Payload website](https://payloadcms.com/docs/getting-started/what-is-payload) to find in-depth documentation for everything that Payload offers.
-
-Migrating from v1 to v2? Check out the [2.0 Release Notes](https://github.com/payloadcms/payload/releases/tag/v2.0.0) on how to do it.
-
-## 🙋 Contributing
-
-If you want to add contributions to this repository, please follow the instructions in [contributing.md](./CONTRIBUTING.md).
-
-## 📚 Examples
-
-The [Examples Directory](./examples) is a great resource for learning how to setup Payload in a variety of different ways, but you can also find great examples in our blog and throughout our social media.
-
-- [Examples Directory](./examples)
-- [Payload Blog](https://payloadcms.com/blog)
-- [Payload YouTube](https://www.youtube.com/@payloadcms)
-
-## 🔌 Plugins
-
-Payload is highly extensible and allows you to install or distribute plugins that add or remove functionality. There are both officially-supported and community-supported plugins available. If you maintain your own plugin, consider adding the `payload-plugin` topic to your GitHub repository for others to find.
-
-- [Official Plugins](https://github.com/orgs/payloadcms/repositories?q=topic%3Apayload-plugin)
-- [Community Plugins](https://github.com/topics/payload-plugin)
-
-## 🚨 Need help?
-
-There are lots of good conversations and resources in our Github Discussions board and our Discord Server. If you're struggling with something, chances are, someone's already solved what you're up against. :point_down:
-
-- [GitHub Discussions](https://github.com/payloadcms/payload/discussions)
-- [GitHub Issues](https://github.com/payloadcms/payload/issues)
-- [Discord](https://t.co/30APlsQUPB)
-- [Community Help](https://payloadcms.com/community-help)
-
-## ⭐ Like what we're doing? Give us a star
-
-![payload-github-star](https://cms.payloadcms.com/media/payload-github-star.gif)
-
-## 👏 Thanks to all our contributors
-
-<img align="left" src="https://contributors-img.web.app/image?repo=payloadcms/payload"/>

SECURITY.md

@@ -1,5 +0,0 @@
-# Security Policy
-
-## Reporting a Vulnerability
-
-Please report any security issues or concerns to [info@payloadcms.com](mailto:info@payloadcms.com).

app/(payload)/admin/[[...segments]]/not-found.tsx

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

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

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

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

@@ -1,9 +0,0 @@
-/* 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/index.js'
-
-export const GET = REST_GET(config)
-export const POST = REST_POST(config)
-export const DELETE = REST_DELETE(config)
-export const PATCH = REST_PATCH(config)

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

@@ -1,6 +0,0 @@
-/* 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/index.js'
-
-export const GET = GRAPHQL_PLAYGROUND_GET(config)

app/(payload)/api/graphql/route.ts

@@ -1,6 +0,0 @@
-/* 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/index.js'
-
-export const POST = GRAPHQL_POST(config)

app/(payload)/custom.scss

@@ -1,8 +0,0 @@
-#custom-css {
-  font-family: monospace;
-  background-image: url('/placeholder.png');
-}
-
-#custom-css::after {
-  content: 'custom-css';
-}

app/(payload)/layout.tsx

@@ -1,15 +0,0 @@
-/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
-import configPromise from '@payload-config'
-import { RootLayout } from '@payloadcms/next/layouts/Root/index.js'
-/* 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

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

@@ -1,43 +0,0 @@
-'use client'
-
-import { useLivePreview } from '@payloadcms/live-preview-react'
-import React from 'react'
-
-import type { Page as PageType } from '../../../../test/live-preview/payload-types.js'
-
-import { PAYLOAD_SERVER_URL } from '../../_api/serverURL.js'
-import { Blocks } from '../../_components/Blocks/index.js'
-import { Gutter } from '../../_components/Gutter/index.js'
-import { Hero } from '../../_components/Hero/index.js'
-
-export const PageClient: React.FC<{
-  page: PageType
-}> = ({ page: initialPage }) => {
-  const { data } = useLivePreview<PageType>({
-    depth: 2,
-    initialData: initialPage,
-    serverURL: PAYLOAD_SERVER_URL,
-  })
-
-  return (
-    <React.Fragment>
-      <Gutter>
-        <h1 id="page-title">{data.title}</h1>
-      </Gutter>
-      <Hero {...data?.hero} />
-      <Blocks
-        blocks={[
-          ...(data?.layout ?? []),
-          {
-            blockName: 'Relationships',
-            blockType: 'relationships',
-            data,
-          },
-        ]}
-        disableTopPadding={
-          !data?.hero || data?.hero?.type === 'none' || data?.hero?.type === 'lowImpact'
-        }
-      />
-    </React.Fragment>
-  )
-}

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

@@ -1,37 +0,0 @@
-import { notFound } from 'next/navigation.js'
-import React from 'react'
-
-import type { Page } from '../../../../test/live-preview/payload-types.js'
-
-import { fetchDoc } from '../../_api/fetchDoc.js'
-import { fetchDocs } from '../../_api/fetchDocs.js'
-import { PageClient } from './page.client.js'
-
-// eslint-disable-next-line no-restricted-exports
-export default async function Page({ params: { slug = 'home' } }) {
-  let page: Page | null = null
-
-  try {
-    page = await fetchDoc<Page>({
-      slug,
-      collection: 'pages',
-    })
-  } catch (error) {
-    console.error(error)
-  }
-
-  if (!page) {
-    return notFound()
-  }
-
-  return <PageClient page={page} />
-}
-
-export async function generateStaticParams() {
-  try {
-    const pages = await fetchDocs<Page>('pages')
-    return pages?.map(({ slug }) => slug)
-  } catch (error) {
-    return []
-  }
-}

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

@@ -1,68 +0,0 @@
-'use client'
-
-import { useLivePreview } from '@payloadcms/live-preview-react'
-import React from 'react'
-
-import type { Post as PostType } from '../../../../../test/live-preview/payload-types.js'
-
-import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
-import { Blocks } from '../../../_components/Blocks/index.js'
-import { PostHero } from '../../../_heros/PostHero/index.js'
-
-export const PostClient: React.FC<{
-  post: PostType
-}> = ({ post: initialPost }) => {
-  const { data } = useLivePreview<PostType>({
-    depth: 2,
-    initialData: initialPost,
-    serverURL: PAYLOAD_SERVER_URL,
-  })
-
-  return (
-    <React.Fragment>
-      <PostHero post={data} />
-      <Blocks blocks={data?.layout} />
-      <Blocks
-        blocks={[
-          {
-            blockName: 'Related Posts',
-            blockType: 'relatedPosts',
-            docs: data?.relatedPosts,
-            introContent: [
-              {
-                type: 'h4',
-                children: [
-                  {
-                    text: 'Related posts',
-                  },
-                ],
-              },
-              {
-                type: 'p',
-                children: [
-                  {
-                    text: 'The posts displayed here are individually selected for this page. Admins can select any number of related posts to display here and the layout will adjust accordingly. Alternatively, you could swap this out for the "Archive" block to automatically populate posts by category complete with pagination. To manage related posts, ',
-                  },
-                  {
-                    type: 'link',
-                    children: [
-                      {
-                        text: 'navigate to the admin dashboard',
-                      },
-                    ],
-                    url: `/admin/collections/posts/${data?.id}`,
-                  },
-                  {
-                    text: '.',
-                  },
-                ],
-              },
-            ],
-            relationTo: 'posts',
-          },
-        ]}
-        disableTopPadding
-      />
-    </React.Fragment>
-  )
-}

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

@@ -1,36 +0,0 @@
-import { notFound } from 'next/navigation.js'
-import React from 'react'
-
-import type { Post } from '../../../../../test/live-preview/payload-types.js'
-
-import { fetchDoc } from '../../../_api/fetchDoc.js'
-import { fetchDocs } from '../../../_api/fetchDocs.js'
-import { PostClient } from './page.client.js'
-
-export default async function Post({ params: { slug = '' } }) {
-  let post: Post | null = null
-
-  try {
-    post = await fetchDoc<Post>({
-      slug,
-      collection: 'posts',
-    })
-  } catch (error) {
-    console.error(error) // eslint-disable-line no-console
-  }
-
-  if (!post) {
-    notFound()
-  }
-
-  return <PostClient post={post} />
-}
-
-export async function generateStaticParams() {
-  try {
-    const posts = await fetchDocs<Post>('posts')
-    return posts?.map(({ slug }) => slug)
-  } catch (error) {
-    return []
-  }
-}

app/live-preview/_api/fetchDoc.ts

@@ -1,35 +0,0 @@
-import QueryString from 'qs'
-
-import { PAYLOAD_SERVER_URL } from './serverURL.js'
-
-export const fetchDoc = async <T>(args: {
-  collection: string
-  depth?: number
-  id?: string
-  slug?: string
-}): Promise<T> => {
-  const { id, slug, collection, depth = 2 } = args || {}
-
-  const queryString = QueryString.stringify(
-    {
-      ...(slug ? { 'where[slug][equals]': slug } : {}),
-      ...(depth ? { depth } : {}),
-    },
-    { addQueryPrefix: true },
-  )
-
-  const doc: T = await fetch(`${PAYLOAD_SERVER_URL}/api/${collection}${queryString}`, {
-    cache: 'no-store',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    method: 'GET',
-  })
-    ?.then((res) => res.json())
-    ?.then((res) => {
-      if (res.errors) throw new Error(res?.errors?.[0]?.message ?? 'Error fetching doc')
-      return res?.docs?.[0]
-    })
-
-  return doc
-}

app/live-preview/_api/fetchDocs.ts

@@ -1,19 +0,0 @@
-import { PAYLOAD_SERVER_URL } from './serverURL.js'
-
-export const fetchDocs = async <T>(collection: string): Promise<T[]> => {
-  const docs: T[] = await fetch(`${PAYLOAD_SERVER_URL}/api/${collection}?depth=0&limit=100`, {
-    cache: 'no-store',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    method: 'GET',
-  })
-    ?.then((res) => res.json())
-    ?.then((res) => {
-      if (res.errors) throw new Error(res?.errors?.[0]?.message ?? 'Error fetching docs')
-
-      return res?.docs
-    })
-
-  return docs
-}

app/live-preview/_api/fetchFooter.ts

@@ -1,25 +0,0 @@
-import type { Footer } from '../../../test/live-preview/payload-types.js'
-
-import { PAYLOAD_SERVER_URL } from './serverURL.js'
-
-export async function fetchFooter(): Promise<Footer> {
-  if (!PAYLOAD_SERVER_URL) throw new Error('PAYLOAD_SERVER_URL not found')
-
-  const footer = await fetch(`${PAYLOAD_SERVER_URL}/api/globals/footer`, {
-    cache: 'no-store',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    method: 'GET',
-  })
-    .then((res) => {
-      if (!res.ok) throw new Error('Error fetching doc')
-      return res.json()
-    })
-    ?.then((res) => {
-      if (res?.errors) throw new Error(res?.errors[0]?.message || 'Error fetching footer')
-      return res
-    })
-
-  return footer
-}

app/live-preview/_api/fetchHeader.ts

@@ -1,25 +0,0 @@
-import type { Header } from '../../../test/live-preview/payload-types.js'
-
-import { PAYLOAD_SERVER_URL } from './serverURL.js'
-
-export async function fetchHeader(): Promise<Header> {
-  if (!PAYLOAD_SERVER_URL) throw new Error('PAYLOAD_SERVER_URL not found')
-
-  const header = await fetch(`${PAYLOAD_SERVER_URL}/api/globals/header`, {
-    cache: 'no-store',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    method: 'GET',
-  })
-    ?.then((res) => {
-      if (!res.ok) throw new Error('Error fetching doc')
-      return res.json()
-    })
-    ?.then((res) => {
-      if (res?.errors) throw new Error(res?.errors[0]?.message || 'Error fetching header')
-      return res
-    })
-
-  return header
-}

app/live-preview/_api/serverURL.ts

@@ -1 +0,0 @@
-export const PAYLOAD_SERVER_URL = 'http://localhost:3000'

app/live-preview/_blocks/ArchiveBlock/index.module.scss

@@ -1,13 +0,0 @@
-@import '../../_css/common';
-
-.archiveBlock {
-  position: relative;
-}
-
-.introContent {
-  margin-bottom: calc(var(--base) * 2);
-
-  @include mid-break {
-    margin-bottom: calc(var(--base) * 2);
-  }
-}

app/live-preview/_blocks/ArchiveBlock/index.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-
-import type { ArchiveBlockProps } from './types.js'
-
-import { CollectionArchive } from '../../_components/CollectionArchive/index.js'
-import { Gutter } from '../../_components/Gutter/index.js'
-import RichText from '../../_components/RichText/index.js'
-import classes from './index.module.scss'
-
-export const ArchiveBlock: React.FC<
-  ArchiveBlockProps & {
-    id?: string
-  }
-> = (props) => {
-  const {
-    id,
-    categories,
-    introContent,
-    limit,
-    populateBy,
-    populatedDocs,
-    populatedDocsTotal,
-    relationTo,
-    selectedDocs,
-  } = props
-
-  return (
-    <div className={classes.archiveBlock} id={`block-${id}`}>
-      {introContent && (
-        <Gutter className={classes.introContent}>
-          <RichText content={introContent} />
-        </Gutter>
-      )}
-      <CollectionArchive
-        categories={categories}
-        limit={limit}
-        populateBy={populateBy}
-        populatedDocs={populatedDocs}
-        populatedDocsTotal={populatedDocsTotal}
-        relationTo={relationTo}
-        selectedDocs={selectedDocs}
-        sort="-publishedDate"
-      />
-    </div>
-  )
-}

app/live-preview/_blocks/ArchiveBlock/types.ts

@@ -1,6 +0,0 @@
-import type { Page } from '../../../../test/live-preview/payload-types.js'
-
-export type ArchiveBlockProps = Extract<
-  Exclude<Page['layout'], undefined>[0],
-  { blockType: 'archive' }
->

app/live-preview/_blocks/CallToAction/index.module.scss

@@ -1,47 +0,0 @@
-@use '../../_css/queries.scss' as *;
-
-$spacer-h: calc(var(--block-padding) / 2);
-
-.callToAction {
-  padding-left: $spacer-h;
-  padding-right: $spacer-h;
-  position: relative;
-  background-color: var(--color-base-100);
-  color: var(--color-base-1000);
-}
-
-.invert {
-  background-color: var(--color-base-1000);
-  color: var(--color-base-0);
-}
-
-.wrap {
-  display: flex;
-  gap: $spacer-h;
-  align-items: center;
-
-  @include mid-break {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
-.content {
-  flex-grow: 1;
-}
-
-.linkGroup {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-  flex-shrink: 0;
-
-  > * {
-    margin-bottom: calc(var(--base) / 2);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}

app/live-preview/_blocks/CallToAction/index.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-
-import type { Page } from '../../../../test/live-preview/payload-types.js'
-
-import { Gutter } from '../../_components/Gutter/index.js'
-import { CMSLink } from '../../_components/Link/index.js'
-import RichText from '../../_components/RichText/index.js'
-import { VerticalPadding } from '../../_components/VerticalPadding/index.js'
-import classes from './index.module.scss'
-
-type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'cta' }>
-
-export const CallToActionBlock: React.FC<
-  Props & {
-    id?: string
-  }
-> = ({ invertBackground, links, richText }) => {
-  return (
-    <Gutter>
-      <VerticalPadding
-        className={[classes.callToAction, invertBackground && classes.invert]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <div className={classes.wrap}>
-          <div className={classes.content}>
-            <RichText className={classes.richText} content={richText} />
-          </div>
-          <div className={classes.linkGroup}>
-            {(links || []).map(({ link }, i) => {
-              return <CMSLink key={i} {...link} invert={invertBackground} />
-            })}
-          </div>
-        </div>
-      </VerticalPadding>
-    </Gutter>
-  )
-}

app/live-preview/_blocks/Content/index.module.scss

@@ -1,42 +0,0 @@
-@import '../../_css/common';
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: var(--base) calc(var(--base) * 2);
-
-  @include mid-break {
-    grid-template-columns: repeat(6, 1fr);
-    gap: var(--base) var(--base);
-  }
-}
-
-.column--oneThird {
-  grid-column-end: span 4;
-}
-
-.column--half {
-  grid-column-end: span 6;
-}
-
-.column--twoThirds {
-  grid-column-end: span 8;
-}
-
-.column--full {
-  grid-column-end: span 12;
-}
-
-.column {
-  @include mid-break {
-    grid-column-end: span 6;
-  }
-
-  @include small-break {
-    grid-column-end: span 6;
-  }
-}
-
-.link {
-  margin-top: var(--base);
-}

app/live-preview/_blocks/Content/index.tsx

@@ -1,39 +0,0 @@
-import React, { Fragment } from 'react'
-
-import type { Page } from '../../../../test/live-preview/payload-types.js'
-
-import { Gutter } from '../../_components/Gutter/index.js'
-import { CMSLink } from '../../_components/Link/index.js'
-import RichText from '../../_components/RichText/index.js'
-import classes from './index.module.scss'
-
-type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'content' }>
-
-export const ContentBlock: React.FC<
-  Props & {
-    id?: string
-  }
-> = (props) => {
-  const { columns } = props
-
-  return (
-    <Gutter className={classes.content}>
-      <div className={classes.grid}>
-        {columns && columns.length > 0 ? (
-          <Fragment>
-            {columns.map((col, index) => {
-              const { enableLink, link, richText, size } = col
-
-              return (
-                <div className={[classes.column, classes[`column--${size}`]].join(' ')} key={index}>
-                  <RichText content={richText} />
-                  {enableLink && <CMSLink className={classes.link} {...link} />}
-                </div>
-              )
-            })}
-          </Fragment>
-        ) : null}
-      </div>
-    </Gutter>
-  )
-}

app/live-preview/_blocks/MediaBlock/index.module.scss

@@ -1,8 +0,0 @@
-.mediaBlock {
-  position: relative;
-}
-
-.caption {
-  color: var(--color-base-500);
-  margin-top: var(--base);
-}

app/live-preview/_blocks/MediaBlock/index.tsx

@@ -1,42 +0,0 @@
-import type { StaticImageData } from 'next/image.js'
-
-import React from 'react'
-
-import type { Page } from '../../../../test/live-preview/payload-types.js'
-
-import { Gutter } from '../../_components/Gutter/index.js'
-import { Media } from '../../_components/Media/index.js'
-import RichText from '../../_components/RichText/index.js'
-import classes from './index.module.scss'
-
-type Props = Extract<Exclude<Page['layout'], undefined>[0], { blockType: 'mediaBlock' }> & {
-  id?: string
-  staticImage?: StaticImageData
-}
-
-export const MediaBlock: React.FC<Props> = (props) => {
-  const { media, position = 'default', staticImage } = props
-
-  let caption
-  if (media && typeof media === 'object') caption = media.caption
-
-  return (
-    <div className={classes.mediaBlock}>
-      {position === 'fullscreen' && (
-        <div className={classes.fullscreen}>
-          <Media resource={media} src={staticImage} />
-        </div>
-      )}
-      {position === 'default' && (
-        <Gutter>
-          <Media resource={media} src={staticImage} />
-        </Gutter>
-      )}
-      {caption && (
-        <Gutter className={classes.caption}>
-          <RichText content={caption} />
-        </Gutter>
-      )}
-    </div>
-  )
-}

app/live-preview/_blocks/RelatedPosts/index.module.scss

@@ -1,58 +0,0 @@
-@import '../../_css/common';
-
-.introContent {
-  position: relative;
-  margin-bottom: calc(var(--base) * 2);
-
-  @include mid-break {
-    margin-bottom: var(--base);
-  }
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  width: 100%;
-  gap: var(--base) 40px;
-
-  @include mid-break {
-    grid-template-columns: repeat(6, 1fr);
-    gap: calc(var(--base) / 2) var(--base);
-  }
-}
-
-.column {
-  grid-column-end: span 12;
-
-  @include mid-break {
-    grid-column-end: span 6;
-  }
-
-  @include small-break {
-    grid-column-end: span 6;
-  }
-}
-
-.cols-half {
-  grid-column-end: span 6;
-
-  @include mid-break {
-    grid-column-end: span 6;
-  }
-
-  @include small-break {
-    grid-column-end: span 6;
-  }
-}
-
-.cols-thirds {
-  grid-column-end: span 3;
-
-  @include mid-break {
-    grid-column-end: span 6;
-  }
-
-  @include small-break {
-    grid-column-end: span 6;
-  }
-}

app/live-preview/_blocks/RelatedPosts/index.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-import type { Post } from '../../../../test/live-preview/payload-types.js'
-
-import { Card } from '../../_components/Card/index.js'
-import { Gutter } from '../../_components/Gutter/index.js'
-import RichText from '../../_components/RichText/index.js'
-import classes from './index.module.scss'
-
-export type RelatedPostsProps = {
-  blockName: string
-  blockType: 'relatedPosts'
-  docs?: (Post | string)[] | null
-  introContent?: any
-  relationTo: 'posts'
-}
-
-export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {
-  const { docs, introContent, relationTo } = props
-
-  return (
-    <div className={classes.relatedPosts}>
-      {introContent && (
-        <Gutter className={classes.introContent}>
-          <RichText content={introContent} />
-        </Gutter>
-      )}
-      <Gutter>
-        <div className={classes.grid}>
-          {docs?.map((doc, index) => {
-            if (typeof doc === 'string') return null
-
-            return (
-              <div
-                className={[
-                  classes.column,
-                  docs.length === 2 && classes['cols-half'],
-                  docs.length >= 3 && classes['cols-thirds'],
-                ]
-                  .filter(Boolean)
-                  .join(' ')}
-                key={index}
-              >
-                <Card doc={doc} relationTo={relationTo} showCategories />
-              </div>
-            )
-          })}
-        </div>
-      </Gutter>
-    </div>
-  )
-}

app/live-preview/_blocks/Relationships/index.module.scss

@@ -1,17 +0,0 @@
-@import '../../_css/common';
-
-.relationshipsBlock {
-}
-
-.array {
-  border: 1px solid var(--color-base-100);
-  padding: var(--base);
-
-  & > *:first-child {
-    margin-top: 0;
-  }
-
-  & > *:last-child {
-    margin-bottom: 0;
-  }
-}

app/live-preview/_blocks/Relationships/index.tsx

@@ -1,196 +0,0 @@
-import React, { Fragment } from 'react'
-
-import type { Page } from '../../../../test/live-preview/payload-types.js'
-
-import { Gutter } from '../../_components/Gutter/index.js'
-import RichText from '../../_components/RichText/index.js'
-import classes from './index.module.scss'
-
-export type RelationshipsBlockProps = {
-  blockName: string
-  blockType: 'relationships'
-  data: Page
-}
-
-export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) => {
-  const { data } = props
-
-  return (
-    <div className={classes.relationshipsBlock}>
-      <Gutter>
-        <p>
-          This block is for testing purposes only. It renders every possible type of relationship.
-        </p>
-        <p>
-          <b>Rich Text — Slate:</b>
-        </p>
-        {data?.richTextSlate && <RichText content={data.richTextSlate} renderUploadFilenameOnly />}
-        <p>
-          <b>Rich Text — Lexical:</b>
-        </p>
-        {data?.richTextLexical && (
-          <RichText content={data.richTextLexical} renderUploadFilenameOnly serializer="lexical" />
-        )}
-        <p>
-          <b>Upload:</b>
-        </p>
-        {data?.relationshipAsUpload ? (
-          <div>
-            {typeof data?.relationshipAsUpload === 'string'
-              ? data?.relationshipAsUpload
-              : data?.relationshipAsUpload.filename}
-          </div>
-        ) : (
-          <div>None</div>
-        )}
-        <p>
-          <b>Monomorphic Has One:</b>
-        </p>
-        {data?.relationshipMonoHasOne ? (
-          <div>
-            {typeof data?.relationshipMonoHasOne === 'string'
-              ? data?.relationshipMonoHasOne
-              : data?.relationshipMonoHasOne.title}
-          </div>
-        ) : (
-          <div>None</div>
-        )}
-        <p>
-          <b>Monomorphic Has Many:</b>
-        </p>
-        {data?.relationshipMonoHasMany ? (
-          <Fragment>
-            {data?.relationshipMonoHasMany.length
-              ? data?.relationshipMonoHasMany?.map((item, index) =>
-                  item ? (
-                    <div key={index}>{typeof item === 'string' ? item : item.title}</div>
-                  ) : (
-                    'null'
-                  ),
-                )
-              : 'None'}
-          </Fragment>
-        ) : (
-          <div>None</div>
-        )}
-        <p>
-          <b>Polymorphic Has One:</b>
-        </p>
-        {data?.relationshipPolyHasOne ? (
-          <div>
-            {typeof data?.relationshipPolyHasOne.value === 'string'
-              ? data?.relationshipPolyHasOne.value
-              : data?.relationshipPolyHasOne.value.title}
-          </div>
-        ) : (
-          <div>None</div>
-        )}
-        <p>
-          <b>Polymorphic Has Many:</b>
-        </p>
-        {data?.relationshipPolyHasMany ? (
-          <Fragment>
-            {data?.relationshipPolyHasMany.length
-              ? data?.relationshipPolyHasMany?.map((item, index) =>
-                  item.value ? (
-                    <div key={index}>
-                      {typeof item.value === 'string' ? item.value : item.value.title}
-                    </div>
-                  ) : (
-                    'null'
-                  ),
-                )
-              : 'None'}
-          </Fragment>
-        ) : (
-          <div>None</div>
-        )}
-        <p>
-          <b>Array of Relationships:</b>
-        </p>
-        {data?.arrayOfRelationships?.map((item, index) => (
-          <div className={classes.array} key={index}>
-            <p>
-              <b>Rich Text:</b>
-            </p>
-            {item?.richTextInArray && <RichText content={item.richTextInArray} />}
-            <p>
-              <b>Upload:</b>
-            </p>
-            {item?.uploadInArray ? (
-              <div>
-                {typeof item?.uploadInArray === 'string'
-                  ? item?.uploadInArray
-                  : item?.uploadInArray.filename}
-              </div>
-            ) : (
-              <div>None</div>
-            )}
-            <p>
-              <b>Monomorphic Has One:</b>
-            </p>
-            {item?.relationshipInArrayMonoHasOne ? (
-              <div>
-                {typeof item?.relationshipInArrayMonoHasOne === 'string'
-                  ? item?.relationshipInArrayMonoHasOne
-                  : item?.relationshipInArrayMonoHasOne.title}
-              </div>
-            ) : (
-              <div>None</div>
-            )}
-            <p>
-              <b>Monomorphic Has Many:</b>
-            </p>
-            {item?.relationshipInArrayMonoHasMany ? (
-              <Fragment>
-                {item?.relationshipInArrayMonoHasMany.length
-                  ? item?.relationshipInArrayMonoHasMany?.map((rel, relIndex) =>
-                      rel ? (
-                        <div key={relIndex}>{typeof rel === 'string' ? rel : rel.title}</div>
-                      ) : (
-                        'null'
-                      ),
-                    )
-                  : 'None'}
-              </Fragment>
-            ) : (
-              <div>None</div>
-            )}
-            <p>
-              <b>Polymorphic Has One:</b>
-            </p>
-            {item?.relationshipInArrayPolyHasOne ? (
-              <div>
-                {typeof item?.relationshipInArrayPolyHasOne.value === 'string'
-                  ? item?.relationshipInArrayPolyHasOne.value
-                  : item?.relationshipInArrayPolyHasOne.value.title}
-              </div>
-            ) : (
-              <div>None</div>
-            )}
-            <p>
-              <b>Polymorphic Has Many:</b>
-            </p>
-            {item?.relationshipInArrayPolyHasMany ? (
-              <Fragment>
-                {item?.relationshipInArrayPolyHasMany.length
-                  ? item?.relationshipInArrayPolyHasMany?.map((rel, relIndex) =>
-                      rel.value ? (
-                        <div key={relIndex}>
-                          {typeof rel.value === 'string' ? rel.value : rel.value.title}
-                        </div>
-                      ) : (
-                        'null'
-                      ),
-                    )
-                  : 'None'}
-              </Fragment>
-            ) : (
-              <div>None</div>
-            )}
-          </div>
-        ))}
-      </Gutter>
-    </div>
-  )
-}

app/live-preview/_components/BackgroundColor/index.module.scss

@@ -1,3 +0,0 @@
-.invert {
-  background-color: var(--color-base-750);
-}

app/live-preview/_components/BackgroundColor/index.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-import classes from './index.module.scss'
-
-type Props = {
-  children?: React.ReactNode
-  className?: string
-  id?: string
-  invert?: boolean | null
-}
-
-export const BackgroundColor: React.FC<Props> = (props) => {
-  const { id, children, className, invert } = props
-
-  return (
-    <div className={[invert && classes.invert, className].filter(Boolean).join(' ')} id={id}>
-      {children}
-    </div>
-  )
-}

app/live-preview/_components/Blocks/index.tsx

@@ -1,88 +0,0 @@
-import React, { Fragment } from 'react'
-
-import type { Page } from '../../../../test/live-preview/payload-types.js'
-import type { RelationshipsBlockProps } from '../../_blocks/Relationships/index.js'
-import type { VerticalPaddingOptions } from '../VerticalPadding/index.js'
-
-import { ArchiveBlock } from '../../_blocks/ArchiveBlock/index.js'
-import { CallToActionBlock } from '../../_blocks/CallToAction/index.js'
-import { ContentBlock } from '../../_blocks/Content/index.js'
-import { MediaBlock } from '../../_blocks/MediaBlock/index.js'
-import { RelatedPosts, type RelatedPostsProps } from '../../_blocks/RelatedPosts/index.js'
-import { RelationshipsBlock } from '../../_blocks/Relationships/index.js'
-import { toKebabCase } from '../../_utilities/toKebabCase.js'
-import { BackgroundColor } from '../BackgroundColor/index.js'
-import { VerticalPadding } from '../VerticalPadding/index.js'
-
-const blockComponents = {
-  archive: ArchiveBlock,
-  content: ContentBlock,
-  cta: CallToActionBlock,
-  mediaBlock: MediaBlock,
-  relatedPosts: RelatedPosts,
-  relationships: RelationshipsBlock,
-}
-
-type Block = NonNullable<Page['layout']>[number]
-
-export const Blocks: React.FC<{
-  blocks?: (Block | RelatedPostsProps | RelationshipsBlockProps)[] | null
-  disableTopPadding?: boolean
-}> = (props) => {
-  const { blocks, disableTopPadding } = props
-
-  const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0
-
-  if (hasBlocks) {
-    return (
-      <Fragment>
-        {blocks.map((block, index) => {
-          const { blockName, blockType } = block
-
-          if (blockType && blockType in blockComponents) {
-            const Block = blockComponents[blockType]
-
-            // the cta block is containerized, so we don't consider it to be inverted at the block-level
-            const blockIsInverted =
-              'invertBackground' in block && blockType !== 'cta' ? block.invertBackground : false
-            const prevBlock = blocks[index - 1]
-
-            const prevBlockInverted =
-              prevBlock && 'invertBackground' in prevBlock && prevBlock?.invertBackground
-
-            const isPrevSame = Boolean(blockIsInverted) === Boolean(prevBlockInverted)
-
-            let paddingTop: VerticalPaddingOptions = 'large'
-            let paddingBottom: VerticalPaddingOptions = 'large'
-
-            if (prevBlock && isPrevSame) {
-              paddingTop = 'none'
-            }
-
-            if (index === blocks.length - 1) {
-              paddingBottom = 'large'
-            }
-
-            if (disableTopPadding && index === 0) {
-              paddingTop = 'none'
-            }
-
-            if (Block) {
-              return (
-                <BackgroundColor invert={blockIsInverted} key={index}>
-                  <VerticalPadding bottom={paddingBottom} top={paddingTop}>
-                    {/* @ts-expect-error */}
-                    <Block id={toKebabCase(blockName)} {...block} />
-                  </VerticalPadding>
-                </BackgroundColor>
-              )
-            }
-          }
-          return null
-        })}
-      </Fragment>
-    )
-  }
-
-  return null
-}

app/live-preview/_components/Button/index.module.scss

@@ -1,72 +0,0 @@
-@import '../../_css/type.scss';
-
-.button {
-  border: none;
-  cursor: pointer;
-  display: inline-flex;
-  justify-content: center;
-  background-color: transparent;
-  text-decoration: none;
-  display: inline-flex;
-  padding: 12px 24px;
-  font-family: inherit;
-  line-height: inherit;
-  font-size: inherit;
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-
-  svg {
-    margin-right: calc(var(--base) / 2);
-    width: var(--base);
-    height: var(--base);
-  }
-}
-
-.label {
-  @extend %label;
-  text-align: center;
-  display: flex;
-  align-items: center;
-}
-
-.appearance--primary {
-  background-color: var(--color-base-1000);
-  color: var(--color-base-0);
-}
-
-.appearance--secondary {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px var(--color-base-1000);
-}
-
-.primary--invert {
-  background-color: var(--color-base-0);
-  color: var(--color-base-1000);
-}
-
-.secondary--invert {
-  background-color: var(--color-base-1000);
-  box-shadow: inset 0 0 0 1px var(--color-base-0);
-}
-
-.appearance--default {
-  padding: 0;
-  color: var(--theme-text);
-}
-
-.appearance--none {
-  padding: 0;
-  color: var(--theme-text);
-
-  &:local() {
-    .label {
-      text-transform: none;
-      line-height: inherit;
-      font-size: inherit;
-    }
-  }
-}

app/live-preview/_components/Button/index.tsx

@@ -1,80 +0,0 @@
-'use client'
-
-import type { ElementType } from 'react'
-
-import LinkWithDefault from 'next/link.js'
-import React from 'react'
-
-import classes from './index.module.scss'
-
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
-
-export type Props = {
-  appearance?: 'default' | 'none' | 'primary' | 'secondary'
-  className?: string
-  disabled?: boolean
-  el?: 'a' | 'button' | 'link'
-  href?: string
-  invert?: boolean
-  label?: string
-  newTab?: boolean
-  onClick?: () => void
-  type?: 'button' | 'submit'
-}
-
-export const Button: React.FC<Props> = ({
-  type = 'button',
-  appearance,
-  className: classNameFromProps,
-  disabled,
-  el: elFromProps = 'link',
-  href,
-  invert,
-  label,
-  newTab,
-  onClick,
-}) => {
-  let el = elFromProps
-
-  const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
-
-  const className = [
-    classes.button,
-    classNameFromProps,
-    classes[`appearance--${appearance}`],
-    invert && classes[`${appearance}--invert`],
-  ]
-    .filter(Boolean)
-    .join(' ')
-
-  const content = (
-    <div className={classes.content}>
-      <span className={classes.label}>{label}</span>
-    </div>
-  )
-
-  if (onClick || type === 'submit') el = 'button'
-
-  if (el === 'link') {
-    return (
-      <Link className={className} href={href || ''} {...newTabProps} onClick={onClick}>
-        {content}
-      </Link>
-    )
-  }
-
-  const Element: ElementType = el
-
-  return (
-    <Element
-      className={className}
-      href={href}
-      type={type}
-      {...newTabProps}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {content}
-    </Element>
-  )
-}

app/live-preview/_components/Card/index.module.scss

@@ -1,106 +0,0 @@
-@import '../../_css/common';
-
-.card {
-  border: 1px var(--color-base-200) solid;
-  border-radius: 4px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.vertical {
-  flex-direction: column;
-}
-
-.horizontal {
-  flex-direction: row;
-
-  &:local() {
-    .mediaWrapper {
-      width: 150px;
-
-      @include mid-break {
-        width: 100%;
-      }
-    }
-  }
-
-  @include mid-break {
-    flex-direction: column;
-  }
-}
-
-.content {
-  padding: var(--base);
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--base) / 2);
-
-  @include small-break {
-    padding: calc(var(--base) / 2);
-    gap: calc(var(--base) / 4);
-  }
-}
-
-.title {
-  margin: 0;
-}
-
-.titleLink {
-  text-decoration: none;
-}
-
-.centerAlign {
-  align-items: center;
-}
-
-.body {
-  flex-grow: 1;
-}
-
-.leader {
-  @extend %label;
-  display: flex;
-  gap: var(--base);
-}
-
-.description {
-  margin: 0;
-}
-
-.hideImageOnMobile {
-  @include mid-break {
-    display: none;
-  }
-}
-
-.mediaWrapper {
-  text-decoration: none;
-  display: block;
-  position: relative;
-  aspect-ratio: 16 / 9;
-}
-
-.image {
-  object-fit: cover;
-}
-
-.placeholder {
-  background-color: var(--color-base-50);
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-
-  @include mid-break {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}

app/live-preview/_components/Card/index.tsx

@@ -1,88 +0,0 @@
-import LinkWithDefault from 'next/link.js'
-import React, { Fragment } from 'react'
-
-import type { Post } from '../../../../test/live-preview/payload-types.js'
-
-import { Media } from '../Media/index.js'
-import classes from './index.module.scss'
-
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
-
-export const Card: React.FC<{
-  alignItems?: 'center'
-  className?: string
-  doc?: Post
-  hideImagesOnMobile?: boolean
-  orientation?: 'horizontal' | 'vertical'
-  relationTo?: 'posts'
-  showCategories?: boolean
-  title?: string
-}> = (props) => {
-  const {
-    className,
-    doc,
-    orientation = 'vertical',
-    relationTo,
-    showCategories,
-    title: titleFromProps,
-  } = props
-
-  const { slug, categories, meta, title } = doc || {}
-  const { description, image: metaImage } = meta || {}
-
-  const hasCategories = categories && Array.isArray(categories) && categories.length > 0
-  const titleToUse = titleFromProps || title
-  const sanitizedDescription = description?.replace(/\s/g, ' ') // replace non-breaking space with white space
-  const href = `/live-preview/${relationTo}/${slug}`
-
-  return (
-    <div
-      className={[classes.card, className, orientation && classes[orientation]]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <Link className={classes.mediaWrapper} href={href}>
-        {!metaImage && <div className={classes.placeholder}>No image</div>}
-        {metaImage && typeof metaImage !== 'string' && (
-          <Media fill imgClassName={classes.image} resource={metaImage} />
-        )}
-      </Link>
-      <div className={classes.content}>
-        {showCategories && hasCategories && (
-          <div className={classes.leader}>
-            {showCategories && hasCategories && (
-              <div>
-                {categories?.map((category, index) => {
-                  const titleFromCategory = typeof category === 'string' ? category : category.title
-
-                  const categoryTitle = titleFromCategory || 'Untitled category'
-
-                  const isLast = index === categories.length - 1
-
-                  return (
-                    <Fragment key={index}>
-                      {categoryTitle}
-                      {!isLast && <Fragment>, &nbsp;</Fragment>}
-                    </Fragment>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        )}
-        {titleToUse && (
-          <h4 className={classes.title}>
-            <Link className={classes.titleLink} href={href}>
-              {titleToUse}
-            </Link>
-          </h4>
-        )}
-        {description && (
-          <div className={classes.body}>
-            {description && <p className={classes.description}>{sanitizedDescription}</p>}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}

app/live-preview/_components/Chevron/index.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-export const Chevron: React.FC<{
-  className?: string
-  rotate?: number
-}> = ({ className, rotate }) => {
-  return (
-    <svg
-      className={className}
-      height="100%"
-      style={{
-        transform: typeof rotate === 'number' ? `rotate(${rotate || 0}deg)` : undefined,
-      }}
-      viewBox="0 0 24 24"
-      width="100%"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M23.245 4l-11.245 14.374-11.219-14.374-.781.619 12 15.381 12-15.391-.755-.609z"
-        fill="none"
-        stroke="currentColor"
-        vectorEffect="non-scaling-stroke"
-      />
-    </svg>
-  )
-}

app/live-preview/_components/CollectionArchive/PopulateByCollection/index.module.scss

@@ -1,73 +0,0 @@
-@import '../../../_css/common';
-
-// this is to make up for the space taken by the fixed header, since the scroll method does not accept an offset parameter
-.scrollRef {
-  position: absolute;
-  left: 0;
-  top: calc(var(--base) * -5);
-  @include mid-break {
-    top: calc(var(--base) * -2);
-  }
-}
-
-.introContent {
-  position: relative;
-  margin-bottom: calc(var(--base) * 2);
-
-  @include mid-break {
-    margin-bottom: var(--base);
-  }
-}
-
-.resultCountWrapper {
-  display: flex;
-  margin-bottom: calc(var(--base) * 2);
-
-  @include mid-break {
-    margin-bottom: var(--base);
-  }
-}
-
-.pageRange {
-  margin-bottom: var(--base);
-
-  @include mid-break {
-    margin-bottom: var(--base);
-  }
-}
-
-.list {
-  position: relative;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  width: 100%;
-  gap: var(--base) 40px;
-
-  @include mid-break {
-    grid-template-columns: repeat(6, 1fr);
-    gap: calc(var(--base) / 2) var(--base);
-  }
-}
-
-.column {
-  grid-column-end: span 4;
-
-  @include mid-break {
-    grid-column-end: span 6;
-  }
-
-  @include small-break {
-    grid-column-end: span 6;
-  }
-}
-
-.pagination {
-  margin-top: calc(var(--base) * 2);
-
-  @include mid-break {
-    margin-top: var(--base);
-  }
-}

app/live-preview/_components/CollectionArchive/PopulateByCollection/index.tsx

@@ -1,186 +0,0 @@
-'use client'
-
-import qs from 'qs'
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
-
-import type { Post } from '../../../../../test/live-preview/payload-types.js'
-import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types.js'
-
-import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
-import { Card } from '../../Card/index.js'
-import { Gutter } from '../../Gutter/index.js'
-import { PageRange } from '../../PageRange/index.js'
-import { Pagination } from '../../Pagination/index.js'
-import classes from './index.module.scss'
-
-type Result = {
-  docs: (Post | string)[]
-  hasNextPage: boolean
-  hasPrevPage: boolean
-  nextPage: number
-  page: number
-  prevPage: number
-  totalDocs: number
-  totalPages: number
-}
-
-export type Props = Omit<ArchiveBlockProps, 'blockType'> & {
-  className?: string
-  onResultChange?: (result: Result) => void // eslint-disable-line no-unused-vars
-  showPageRange?: boolean
-  sort?: string
-}
-
-export const CollectionArchiveByCollection: React.FC<Props> = (props) => {
-  const {
-    categories: catsFromProps,
-    className,
-    limit = 10,
-    onResultChange,
-    populatedDocs,
-    populatedDocsTotal,
-    relationTo,
-    showPageRange,
-    sort = '-createdAt',
-  } = props
-
-  const [results, setResults] = useState<Result>({
-    docs: populatedDocs?.map((doc) => doc.value) || [],
-    hasNextPage: false,
-    hasPrevPage: false,
-    nextPage: 1,
-    page: 1,
-    prevPage: 1,
-    totalDocs: typeof populatedDocsTotal === 'number' ? populatedDocsTotal : 0,
-    totalPages: 1,
-  })
-
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | undefined>(undefined)
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const hasHydrated = useRef(false)
-  const [page, setPage] = useState(1)
-
-  const scrollToRef = useCallback(() => {
-    const { current } = scrollRef
-    if (current) {
-      // current.scrollIntoView({
-      //   behavior: 'smooth',
-      // })
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!isLoading && typeof results.page !== 'undefined') {
-      // scrollToRef()
-    }
-  }, [isLoading, scrollToRef, results])
-
-  useEffect(() => {
-    // hydrate the block with fresh content after first render
-    // don't show loader unless the request takes longer than x ms
-    // and don't show it during initial hydration
-    const timer = setTimeout(() => {
-      if (hasHydrated) {
-        setIsLoading(true)
-      }
-    }, 500)
-
-    const searchQuery = qs.stringify(
-      {
-        depth: 1,
-        limit,
-        page,
-        sort,
-        where: {
-          ...(catsFromProps && catsFromProps?.length > 0
-            ? {
-                categories: {
-                  in:
-                    typeof catsFromProps === 'string'
-                      ? [catsFromProps]
-                      : catsFromProps
-                          .map((cat) => (typeof cat === 'object' && cat !== null ? cat.id : cat))
-                          .join(','),
-                },
-              }
-            : {}),
-        },
-      },
-      { encode: false },
-    )
-
-    const makeRequest = async () => {
-      try {
-        const req = await fetch(`${PAYLOAD_SERVER_URL}/api/${relationTo}?${searchQuery}`)
-        const json = await req.json()
-        clearTimeout(timer)
-        hasHydrated.current = true
-
-        const { docs } = json as { docs: Post[] }
-
-        if (docs && Array.isArray(docs)) {
-          setResults(json)
-          setIsLoading(false)
-          if (typeof onResultChange === 'function') {
-            onResultChange(json)
-          }
-        }
-      } catch (err) {
-        console.warn(err) // eslint-disable-line no-console
-        setIsLoading(false)
-        setError(`Unable to load "${relationTo} archive" data at this time.`)
-      }
-    }
-
-    void makeRequest()
-
-    return () => {
-      if (timer) clearTimeout(timer)
-    }
-  }, [page, catsFromProps, relationTo, onResultChange, sort, limit])
-
-  return (
-    <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
-      <div className={classes.scrollRef} ref={scrollRef} />
-      {!isLoading && error && <Gutter>{error}</Gutter>}
-      <Fragment>
-        {showPageRange !== false && (
-          <Gutter>
-            <div className={classes.pageRange}>
-              <PageRange
-                collection={relationTo}
-                currentPage={results.page}
-                limit={limit}
-                totalDocs={results.totalDocs}
-              />
-            </div>
-          </Gutter>
-        )}
-        <Gutter>
-          <div className={classes.grid}>
-            {results.docs?.map((result, index) => {
-              if (typeof result === 'string') {
-                return null
-              }
-
-              return (
-                <div className={classes.column} key={index}>
-                  <Card doc={result} relationTo="posts" showCategories />
-                </div>
-              )
-            })}
-          </div>
-          {results.totalPages > 1 && (
-            <Pagination
-              className={classes.pagination}
-              onClick={setPage}
-              page={results.page}
-              totalPages={results.totalPages}
-            />
-          )}
-        </Gutter>
-      </Fragment>
-    </div>
-  )
-}

app/live-preview/_components/CollectionArchive/PopulateBySelection/index.module.scss

@@ -1,25 +0,0 @@
-@import '../../../_css/common';
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  width: 100%;
-  gap: var(--base) 40px;
-
-  @include mid-break {
-    grid-template-columns: repeat(6, 1fr);
-    gap: calc(var(--base) / 2) var(--base);
-  }
-}
-
-.column {
-  grid-column-end: span 4;
-
-  @include mid-break {
-    grid-column-end: span 6;
-  }
-
-  @include small-break {
-    grid-column-end: span 6;
-  }
-}

app/live-preview/_components/CollectionArchive/PopulateBySelection/index.tsx

@@ -1,42 +0,0 @@
-'use client'
-
-import React, { Fragment } from 'react'
-
-import type { ArchiveBlockProps } from '../../../_blocks/ArchiveBlock/types.js'
-
-import { Card } from '../../Card/index.js'
-import { Gutter } from '../../Gutter/index.js'
-import classes from './index.module.scss'
-
-export type Props = {
-  className?: string
-  selectedDocs?: ArchiveBlockProps['selectedDocs']
-}
-
-export const CollectionArchiveBySelection: React.FC<Props> = (props) => {
-  const { className, selectedDocs } = props
-
-  const result = selectedDocs?.map((doc) => doc.value)
-
-  return (
-    <div className={[classes.collectionArchive, className].filter(Boolean).join(' ')}>
-      <Fragment>
-        <Gutter>
-          <div className={classes.grid}>
-            {result?.map((result, index) => {
-              if (typeof result === 'string') {
-                return null
-              }
-
-              return (
-                <div className={classes.column} key={index}>
-                  <Card doc={result} relationTo="posts" showCategories />
-                </div>
-              )
-            })}
-          </div>
-        </Gutter>
-      </Fragment>
-    </div>
-  )
-}

app/live-preview/_components/CollectionArchive/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-import type { ArchiveBlockProps } from '../../_blocks/ArchiveBlock/types.js'
-
-import { CollectionArchiveByCollection } from './PopulateByCollection/index.js'
-import { CollectionArchiveBySelection } from './PopulateBySelection/index.js'
-
-export type Props = Omit<ArchiveBlockProps, 'blockType'> & {
-  className?: string
-  sort?: string
-}
-
-export const CollectionArchive: React.FC<Props> = (props) => {
-  const { className, populateBy, selectedDocs } = props
-
-  if (populateBy === 'selection') {
-    return <CollectionArchiveBySelection className={className} selectedDocs={selectedDocs} />
-  }
-
-  if (populateBy === 'collection') {
-    return <CollectionArchiveByCollection {...props} className={className} />
-  }
-
-  return null
-}

app/live-preview/_components/Footer/index.module.scss

@@ -1,36 +0,0 @@
-@use '../../_css/queries.scss' as *;
-
-.footer {
-  padding: calc(var(--base) * 4) 0;
-  background-color: var(--color-base-1000);
-  color: var(--color-base-0);
-
-  @include small-break {
-    padding: calc(var(--base) * 2) 0;
-  }
-}
-
-.wrap {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: calc(var(--base) / 2) var(--base);
-}
-
-.logo {
-  width: 150px;
-}
-
-.nav {
-  display: flex;
-  gap: calc(var(--base) / 4) var(--base);
-  align-items: center;
-  flex-wrap: wrap;
-  opacity: 1;
-  transition: opacity 100ms linear;
-  visibility: visible;
-
-  > * {
-    text-decoration: none;
-  }
-}

app/live-preview/_components/Footer/index.tsx

@@ -1,41 +0,0 @@
-import LinkWithDefault from 'next/link.js'
-import React from 'react'
-
-import { fetchFooter } from '../../_api/fetchFooter.js'
-import { Gutter } from '../Gutter/index.js'
-import { CMSLink } from '../Link/index.js'
-import classes from './index.module.scss'
-
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
-
-export async function Footer() {
-  const footer = await fetchFooter()
-
-  const navItems = footer?.navItems || []
-
-  return (
-    <footer className={classes.footer}>
-      <Gutter className={classes.wrap}>
-        <Link href="/">
-          <picture>
-            <img
-              alt="Payload Logo"
-              className={classes.logo}
-              src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
-            />
-          </picture>
-        </Link>
-        <nav className={classes.nav}>
-          {navItems.map(({ link }, i) => {
-            return <CMSLink key={i} {...link} />
-          })}
-          <Link href="/admin">Admin</Link>
-          <Link href="https://github.com/payloadcms/payload/tree/main/templates/ecommerce">
-            Source Code
-          </Link>
-          <Link href="https://github.com/payloadcms/payload">Payload</Link>
-        </nav>
-      </Gutter>
-    </footer>
-  )
-}

app/live-preview/_components/Gutter/index.module.scss

@@ -1,13 +0,0 @@
-.gutter {
-  max-width: 1920px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.gutterLeft {
-  padding-left: var(--gutter-h);
-}
-
-.gutterRight {
-  padding-right: var(--gutter-h);
-}

app/live-preview/_components/Gutter/index.tsx

@@ -1,35 +0,0 @@
-import type { Ref } from 'react'
-
-import React, { forwardRef } from 'react'
-
-import classes from './index.module.scss'
-
-type Props = {
-  children: React.ReactNode
-  className?: string
-  left?: boolean
-  ref?: Ref<HTMLDivElement>
-  right?: boolean
-}
-
-export const Gutter: React.FC<Props> = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { children, className, left = true, right = true } = props
-
-  return (
-    <div
-      className={[
-        classes.gutter,
-        left && classes.gutterLeft,
-        right && classes.gutterRight,
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      ref={ref}
-    >
-      {children}
-    </div>
-  )
-})
-
-Gutter.displayName = 'Gutter'

app/live-preview/_components/Header/Nav/index.module.scss

@@ -1,12 +0,0 @@
-@use '../../../_css/queries.scss' as *;
-
-.nav {
-  display: flex;
-  gap: calc(var(--base) / 4) var(--base);
-  align-items: center;
-  flex-wrap: wrap;
-
-  > * {
-    text-decoration: none;
-  }
-}

app/live-preview/_components/Header/Nav/index.tsx

@@ -1,20 +0,0 @@
-'use client'
-
-import React from 'react'
-
-import type { Header as HeaderType } from '../../../../../test/live-preview/payload-types.js'
-
-import { CMSLink } from '../../Link/index.js'
-import classes from './index.module.scss'
-
-export const HeaderNav: React.FC<{ header: HeaderType }> = ({ header }) => {
-  const navItems = header?.navItems || []
-
-  return (
-    <nav className={classes.nav}>
-      {navItems.map(({ link }, i) => {
-        return <CMSLink key={i} {...link} />
-      })}
-    </nav>
-  )
-}

app/live-preview/_components/Header/index.module.scss

@@ -1,16 +0,0 @@
-@use '../../_css/queries.scss' as *;
-
-.header {
-  padding: var(--base) 0;
-}
-
-.wrap {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: calc(var(--base) / 2) var(--base);
-}
-
-.logo {
-  width: 150px;
-}

app/live-preview/_components/Header/index.tsx

@@ -1,28 +0,0 @@
-import LinkWithDefault from 'next/link.js'
-import React from 'react'
-
-import { fetchHeader } from '../../_api/fetchHeader.js'
-import { Gutter } from '../Gutter/index.js'
-import { HeaderNav } from './Nav/index.js'
-import classes from './index.module.scss'
-
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
-
-export async function Header() {
-  const header = await fetchHeader()
-
-  return (
-    <header className={classes.header}>
-      <Gutter className={classes.wrap}>
-        <Link href="/live-preview">
-          <img
-            alt="Payload Logo"
-            className={classes.logo}
-            src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-dark.svg"
-          />
-        </Link>
-        <HeaderNav header={header} />
-      </Gutter>
-    </header>
-  )
-}

app/live-preview/_components/Hero/index.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import type { Page } from '../../../../test/live-preview/payload-types.js'
-
-import { HighImpactHero } from '../../_heros/HighImpact/index.js'
-import { LowImpactHero } from '../../_heros/LowImpact/index.js'
-
-const heroes = {
-  highImpact: HighImpactHero,
-  lowImpact: LowImpactHero,
-}
-
-export const Hero: React.FC<Page['hero']> = (props) => {
-  const { type } = props || {}
-
-  if (!type || type === 'none') return null
-
-  const HeroToRender = heroes[type]
-
-  if (!HeroToRender) return null
-
-  return <HeroToRender {...props} />
-}

app/live-preview/_components/Link/index.tsx

@@ -1,67 +0,0 @@
-import LinkWithDefault from 'next/link.js'
-import React from 'react'
-
-import type { Page, Post } from '../../../../test/live-preview/payload-types.js'
-import type { Props as ButtonProps } from '../Button/index.js'
-
-import { Button } from '../Button/index.js'
-
-const Link = (LinkWithDefault.default || LinkWithDefault) as typeof LinkWithDefault.default
-
-type CMSLinkType = {
-  appearance?: ButtonProps['appearance']
-  children?: React.ReactNode
-  className?: string
-  invert?: ButtonProps['invert']
-  label?: string
-  newTab?: boolean
-  reference?: {
-    relationTo: 'pages' | 'posts'
-    value: Page | Post | string
-  }
-  type?: 'custom' | 'reference'
-  url?: string
-}
-
-export const CMSLink: React.FC<CMSLinkType> = ({
-  type,
-  appearance,
-  children,
-  className,
-  invert,
-  label,
-  newTab,
-  reference,
-  url,
-}) => {
-  const href =
-    type === 'reference' && typeof reference?.value === 'object' && reference.value.slug
-      ? `/${reference.value.slug}`
-      : url
-
-  if (!href) return null
-
-  if (!appearance) {
-    const newTabProps = newTab ? { rel: 'noopener noreferrer', target: '_blank' } : {}
-
-    if (href || url) {
-      return (
-        <Link {...newTabProps} className={className} href={href || url || ''}>
-          {label && label}
-          {children && children}
-        </Link>
-      )
-    }
-  }
-
-  return (
-    <Button
-      appearance={appearance}
-      className={className}
-      href={href}
-      invert={invert}
-      label={label}
-      newTab={newTab}
-    />
-  )
-}

app/live-preview/_components/Media/Image/index.module.scss

@@ -1,7 +0,0 @@
-.placeholder-color-light {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.placeholder {
-  background-color: var(--color-base-50);
-}

app/live-preview/_components/Media/Image/index.tsx

@@ -1,81 +0,0 @@
-'use client'
-
-import type { StaticImageData } from 'next/image.js'
-
-import NextImageWithDefault from 'next/image.js'
-import React from 'react'
-
-import type { Props as MediaProps } from '../types.js'
-
-import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
-import cssVariables from '../../../cssVariables.js'
-import classes from './index.module.scss'
-
-const { breakpoints } = cssVariables
-
-const NextImage = (NextImageWithDefault.default ||
-  NextImageWithDefault) as typeof NextImageWithDefault.default
-
-export const Image: React.FC<MediaProps> = (props) => {
-  const {
-    alt: altFromProps,
-    fill,
-    imgClassName,
-    onClick,
-    onLoad: onLoadFromProps,
-    priority,
-    resource,
-    src: srcFromProps,
-  } = props
-
-  const [isLoading, setIsLoading] = React.useState(true)
-
-  let width: number | undefined
-  let height: number | undefined
-  let alt = altFromProps
-  let src: StaticImageData | string = srcFromProps || ''
-
-  if (!src && resource && typeof resource !== 'string') {
-    const {
-      alt: altFromResource,
-      filename: fullFilename,
-      height: fullHeight,
-      width: fullWidth,
-    } = resource
-
-    width = fullWidth || undefined
-    height = fullHeight || undefined
-    alt = altFromResource
-
-    const filename = fullFilename
-
-    src = `${PAYLOAD_SERVER_URL}/api/media/file/${filename}`
-  }
-
-  // NOTE: this is used by the browser to determine which image to download at different screen sizes
-  const sizes = Object.entries(breakpoints)
-    .map(([, value]) => `(max-width: ${value}px) ${value}px`)
-    .join(', ')
-
-  return (
-    <NextImage
-      alt={alt || ''}
-      className={[isLoading && classes.placeholder, classes.image, imgClassName]
-        .filter(Boolean)
-        .join(' ')}
-      fill={fill}
-      height={!fill ? height : undefined}
-      onClick={onClick}
-      onLoad={() => {
-        setIsLoading(false)
-        if (typeof onLoadFromProps === 'function') {
-          onLoadFromProps()
-        }
-      }}
-      priority={priority}
-      sizes={sizes}
-      src={src}
-      width={!fill ? width : undefined}
-    />
-  )
-}

app/live-preview/_components/Media/Video/index.module.scss

@@ -1,11 +0,0 @@
-.video {
-  max-width: 100%;
-  width: 100%;
-  background-color: var(--color-base-50);
-}
-
-.cover {
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-}

app/live-preview/_components/Media/Video/index.tsx

@@ -1,46 +0,0 @@
-'use client'
-
-import React, { useEffect, useRef } from 'react'
-
-import type { Props as MediaProps } from '../types.js'
-
-import { PAYLOAD_SERVER_URL } from '../../../_api/serverURL.js'
-import classes from './index.module.scss'
-
-export const Video: React.FC<MediaProps> = (props) => {
-  const { onClick, resource, videoClassName } = props
-
-  const videoRef = useRef<HTMLVideoElement>(null)
-  // const [showFallback] = useState<boolean>()
-
-  useEffect(() => {
-    const { current: video } = videoRef
-    if (video) {
-      video.addEventListener('suspend', () => {
-        // setShowFallback(true);
-        // console.warn('Video was suspended, rendering fallback image.')
-      })
-    }
-  }, [])
-
-  if (resource && typeof resource !== 'string') {
-    const { filename } = resource
-
-    return (
-      <video
-        autoPlay
-        className={[classes.video, videoClassName].filter(Boolean).join(' ')}
-        controls={false}
-        loop
-        muted
-        onClick={onClick}
-        playsInline
-        ref={videoRef}
-      >
-        <source src={`${PAYLOAD_SERVER_URL}/media/${filename}`} />
-      </video>
-    )
-  }
-
-  return null
-}

app/live-preview/_components/Media/index.tsx

@@ -1,31 +0,0 @@
-import type { ElementType } from 'react'
-
-import React, { Fragment } from 'react'
-
-import type { Props } from './types.js'
-
-import { Image } from './Image/index.js'
-import { Video } from './Video/index.js'
-
-export const Media: React.FC<Props> = (props) => {
-  const { className, htmlElement = 'div', resource } = props
-
-  const isVideo = typeof resource !== 'string' && resource?.mimeType?.includes('video')
-  const Tag = (htmlElement as ElementType) || Fragment
-
-  return (
-    <Tag
-      {...(htmlElement !== null
-        ? {
-            className,
-          }
-        : {})}
-    >
-      {isVideo ? (
-        <Video {...props} />
-      ) : (
-        <Image {...props} /> // eslint-disable-line
-      )}
-    </Tag>
-  )
-}

app/live-preview/_components/Media/types.ts

@@ -1,20 +0,0 @@
-import type { StaticImageData } from 'next/image'
-import type { ElementType, Ref } from 'react'
-
-import type { Media as MediaType } from '../../../payload-types'
-
-export interface Props {
-  alt?: string
-  className?: string
-  fill?: boolean // for NextImage only
-  htmlElement?: ElementType | null
-  imgClassName?: string
-  onClick?: () => void
-  onLoad?: () => void
-  priority?: boolean // for NextImage only
-  ref?: Ref<HTMLImageElement | HTMLVideoElement | null>
-  resource?: MediaType | string // for Payload media
-  size?: string // for NextImage only
-  src?: StaticImageData // for static media
-  videoClassName?: string
-}

app/live-preview/_components/PageRange/index.module.scss

@@ -1,21 +0,0 @@
-@import '../../_css/common';
-
-.pageRange {
-  display: flex;
-  align-items: center;
-  font-weight: 600;
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  margin: 0 var(--base(0.5));
-}
-
-.divider {
-  margin: 0 2px;
-}
-
-.hyperlink {
-  display: flex;
-}

app/live-preview/_components/PageRange/index.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-
-import classes from './index.module.scss'
-
-const defaultLabels = {
-  plural: 'Docs',
-  singular: 'Doc',
-}
-
-const defaultCollectionLabels = {
-  products: {
-    plural: 'Products',
-    singular: 'Product',
-  },
-}
-
-export const PageRange: React.FC<{
-  className?: string
-  collection?: string
-  collectionLabels?: {
-    plural?: string
-    singular?: string
-  }
-  currentPage?: number
-  limit?: number
-  totalDocs?: number
-}> = (props) => {
-  const {
-    className,
-    collection,
-    collectionLabels: collectionLabelsFromProps,
-    currentPage,
-    limit,
-    totalDocs,
-  } = props
-
-  const indexStart = (currentPage ? currentPage - 1 : 1) * (limit || 1) + 1
-  let indexEnd = (currentPage || 1) * (limit || 1)
-  if (totalDocs && indexEnd > totalDocs) indexEnd = totalDocs
-
-  const { plural, singular } =
-    collectionLabelsFromProps || defaultCollectionLabels[collection || ''] || defaultLabels || {}
-
-  return (
-    <div className={[className, classes.pageRange].filter(Boolean).join(' ')}>
-      {(typeof totalDocs === 'undefined' || totalDocs === 0) && 'Search produced no results.'}
-      {typeof totalDocs !== 'undefined' &&
-        totalDocs > 0 &&
-        `Showing ${indexStart} - ${indexEnd} of ${totalDocs} ${totalDocs > 1 ? plural : singular}`}
-    </div>
-  )
-}

app/live-preview/_components/Pagination/index.module.scss

@@ -1,29 +0,0 @@
-@import '../../_css/type.scss';
-
-.pagination {
-  @extend %label;
-  display: flex;
-  align-items: center;
-  gap: calc(var(--base) / 2);
-}
-
-.button {
-  all: unset;
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  padding: calc(var(--base) / 2);
-  color: var(--color-base-500);
-  border: 1px solid var(--color-base-200);
-
-  &:disabled {
-    cursor: not-allowed;
-    color: var(--color-base-200);
-    border-color: var(--color-base-150);
-  }
-}
-
-.icon {
-  width: calc(var(--base) / 2);
-  height: calc(var(--base) / 2);
-}

app/live-preview/_components/Pagination/index.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-
-import { Chevron } from '../Chevron/index.js'
-import classes from './index.module.scss'
-
-export const Pagination: React.FC<{
-  className?: string
-  onClick: (page: number) => void
-  page: number
-  totalPages: number
-}> = (props) => {
-  const { className, onClick, page, totalPages } = props
-  const hasNextPage = page < totalPages
-  const hasPrevPage = page > 1
-
-  return (
-    <div className={[classes.pagination, className].filter(Boolean).join(' ')}>
-      <button
-        className={classes.button}
-        disabled={!hasPrevPage}
-        onClick={() => {
-          onClick(page - 1)
-        }}
-        type="button"
-      >
-        <Chevron className={classes.icon} rotate={90} />
-      </button>
-      <div className={classes.pageRange}>
-        <span className={classes.pageRangeLabel}>
-          Page {page} of {totalPages}
-        </span>
-      </div>
-      <button
-        className={classes.button}
-        disabled={!hasNextPage}
-        onClick={() => {
-          onClick(page + 1)
-        }}
-        type="button"
-      >
-        <Chevron className={classes.icon} rotate={-90} />
-      </button>
-    </div>
-  )
-}

app/live-preview/_components/RichText/index.module.scss

@@ -1,9 +0,0 @@
-.richText {
-  > *:first-child {
-    margin-top: 0;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}

app/live-preview/_components/RichText/index.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-
-import classes from './index.module.scss'
-import serializeLexical from './serializeLexical.js'
-import serializeSlate from './serializeSlate.js'
-
-const RichText: React.FC<{
-  className?: string
-  content: any
-  renderUploadFilenameOnly?: boolean
-  serializer?: 'lexical' | 'slate'
-}> = ({ className, content, renderUploadFilenameOnly, serializer = 'slate' }) => {
-  if (!content) {
-    return null
-  }
-
-  return (
-    <div className={[classes.richText, className].filter(Boolean).join(' ')}>
-      {serializer === 'slate'
-        ? serializeSlate(content, renderUploadFilenameOnly)
-        : serializeLexical(content, renderUploadFilenameOnly)}
-    </div>
-  )
-}
-
-export default RichText

app/live-preview/_components/RichText/serializeLexical.tsx

@@ -1,92 +0,0 @@
-import type { SerializedEditorState } from 'lexical'
-
-import React from 'react'
-
-import { CMSLink } from '../Link/index.js'
-import { Media } from '../Media/index.js'
-
-const serializer = (
-  content?: SerializedEditorState['root']['children'],
-  renderUploadFilenameOnly?: boolean,
-): React.ReactNode | React.ReactNode[] =>
-  content?.map((node, i) => {
-    switch (node.type) {
-      case 'h1':
-        return <h1 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h1>
-
-      case 'h2':
-        return <h2 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h2>
-
-      case 'h3':
-        return <h3 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h3>
-
-      case 'h4':
-        return <h4 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h4>
-
-      case 'h5':
-        return <h5 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h5>
-
-      case 'h6':
-        return <h6 key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</h6>
-
-      case 'quote':
-        return (
-          <blockquote key={i}>
-            {serializeLexical(node?.children, renderUploadFilenameOnly)}
-          </blockquote>
-        )
-
-      case 'ul':
-        return <ul key={i}>{serializeLexical(node?.children, renderUploadFilenameOnly)}</ul>
-
-      case 'ol':
-        return <ol key={i}>{serializeLexical(node.children, renderUploadFilenameOnly)}</ol>
-
-      case 'li':
-        return <li key={i}>{serializeLexical(node.children, renderUploadFilenameOnly)}</li>
-
-      case 'relationship':
-        return (
-          <span key={i}>
-            {node.value && typeof node.value === 'object'
-              ? node.value.title || node.value.id
-              : node.value}
-          </span>
-        )
-
-      case 'link':
-        return (
-          <CMSLink
-            key={i}
-            newTab={Boolean(node?.newTab)}
-            reference={node.doc as any}
-            type={node.linkType === 'internal' ? 'reference' : 'custom'}
-            url={node.url}
-          >
-            {serializer(node?.children, renderUploadFilenameOnly)}
-          </CMSLink>
-        )
-
-      case 'upload':
-        if (renderUploadFilenameOnly) {
-          return <span key={i}>{node.value.filename}</span>
-        }
-
-        return <Media key={i} resource={node?.value} />
-
-      case 'paragraph':
-        return <p key={i}>{serializer(node?.children, renderUploadFilenameOnly)}</p>
-
-      case 'text':
-        return <span key={i}>{node.text}</span>
-    }
-  })
-
-const serializeLexical = (
-  content?: SerializedEditorState,
-  renderUploadFilenameOnly?: boolean,
-): React.ReactNode | React.ReactNode[] => {
-  return serializer(content?.root?.children, renderUploadFilenameOnly)
-}
-
-export default serializeLexical

app/live-preview/_components/RichText/serializeSlate.tsx

@@ -1,131 +0,0 @@
-import escapeHTML from 'escape-html'
-import React, { Fragment } from 'react'
-import { Text } from 'slate'
-
-import { CMSLink } from '../Link/index.js'
-import { Media } from '../Media/index.js'
-
-// eslint-disable-next-line no-use-before-define
-type Children = Leaf[]
-
-type Leaf = {
-  [key: string]: unknown
-  children?: Children
-  type: string
-  url?: string
-  value?: any
-}
-
-const serializeSlate = (
-  children?: Children,
-  renderUploadFilenameOnly?: boolean,
-): React.ReactNode[] =>
-  children?.map((node, i) => {
-    if (Text.isText(node)) {
-      let text = <span dangerouslySetInnerHTML={{ __html: escapeHTML(node.text) }} />
-
-      if (node.bold) {
-        text = <strong key={i}>{text}</strong>
-      }
-
-      if (node.code) {
-        text = <code key={i}>{text}</code>
-      }
-
-      if (node.italic) {
-        text = <em key={i}>{text}</em>
-      }
-
-      if (node.underline) {
-        text = (
-          <span key={i} style={{ textDecoration: 'underline' }}>
-            {text}
-          </span>
-        )
-      }
-
-      if (node.strikethrough) {
-        text = (
-          <span key={i} style={{ textDecoration: 'line-through' }}>
-            {text}
-          </span>
-        )
-      }
-
-      return <Fragment key={i}>{text}</Fragment>
-    }
-
-    if (!node) {
-      return null
-    }
-
-    switch (node.type) {
-      case 'h1':
-        return <h1 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h1>
-
-      case 'h2':
-        return <h2 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h2>
-
-      case 'h3':
-        return <h3 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h3>
-
-      case 'h4':
-        return <h4 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h4>
-
-      case 'h5':
-        return <h5 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h5>
-
-      case 'h6':
-        return <h6 key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</h6>
-
-      case 'quote':
-        return (
-          <blockquote key={i}>
-            {serializeSlate(node?.children, renderUploadFilenameOnly)}
-          </blockquote>
-        )
-
-      case 'ul':
-        return <ul key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</ul>
-
-      case 'ol':
-        return <ol key={i}>{serializeSlate(node.children, renderUploadFilenameOnly)}</ol>
-
-      case 'li':
-        return <li key={i}>{serializeSlate(node.children, renderUploadFilenameOnly)}</li>
-
-      case 'relationship':
-        return (
-          <span key={i}>
-            {node.value && typeof node.value === 'object'
-              ? node.value.title || node.value.id
-              : node.value}
-          </span>
-        )
-
-      case 'link':
-        return (
-          <CMSLink
-            key={i}
-            newTab={Boolean(node?.newTab)}
-            reference={node.doc as any}
-            type={node.linkType === 'internal' ? 'reference' : 'custom'}
-            url={node.url}
-          >
-            {serializeSlate(node?.children, renderUploadFilenameOnly)}
-          </CMSLink>
-        )
-
-      case 'upload':
-        if (renderUploadFilenameOnly) {
-          return <span key={i}>{node.value.filename}</span>
-        }
-
-        return <Media key={i} resource={node?.value} />
-
-      default:
-        return <p key={i}>{serializeSlate(node?.children, renderUploadFilenameOnly)}</p>
-    }
-  }) || []
-
-export default serializeSlate

app/live-preview/_components/VerticalPadding/index.module.scss

@@ -1,15 +0,0 @@
-.top-large {
-  padding-top: var(--block-padding);
-}
-
-.top-medium {
-  padding-top: calc(var(--block-padding) / 2);
-}
-
-.bottom-large {
-  padding-bottom: var(--block-padding);
-}
-
-.bottom-medium {
-  padding-bottom: calc(var(--block-padding) / 2);
-}