chore(release): v0.16.3

* wip: beforeChange field op pattern

* feat: optimizes field-level beforeChange

* feat: optimizes beforeValidate

* feat: optimizes afterChange

* feat: optimizes afterRead

* chore: comment accuracy

.eslintrc.js

@@ -28,8 +28,8 @@ module.exports = {
         'plugin:@typescript-eslint/recommended',
       ],
       rules: {
-        "no-shadow": "off",
-        "@typescript-eslint/no-shadow": ["error"],
+        'no-shadow': 'off',
+        '@typescript-eslint/no-shadow': ['error'],
         'import/no-unresolved': [
           2,
           {
@@ -38,17 +38,35 @@ module.exports = {
             ],
           },
         ],
-      }
+      },
+    },
+    {
+      files: ['*.spec.ts'],
+      rules: {
+        '@typescript-eslint/no-use-before-define': 'off',
+      },
+    },
+    {
+      files: ['*.e2e.ts'],
+      rules: {
+        '@typescript-eslint/no-use-before-define': 'off',
+        'jest/expect-expect': 'off',
+      },
     },
   ],
   rules: {
-    "import/no-extraneous-dependencies": ["error", { "packageDir": "./" }],
+    'import/no-extraneous-dependencies': ['error', { packageDir: './' }],
     'react/jsx-filename-extension': [2, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
     'import/prefer-default-export': 'off',
     'react/prop-types': 'off',
     'react/require-default-props': 'off',
     'react/no-unused-prop-types': 'off',
+    'no-console': 'warn',
+    'no-sparse-arrays': 'off',
     'no-underscore-dangle': 'off',
+    'no-use-before-define': 'off',
+    'arrow-body-style': 0,
+    '@typescript-eslint/no-use-before-define': ['error'],
     'import/extensions': [
       'error',
       'ignorePackages',

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,8 @@
 blank_issues_enabled: false
 contact_links:
+  - name: Security Vulnerability
+    url: https://github.com/payloadcms/payload/blob/master/SECURITY.md
+    about: See instructions to privately disclose any security concerns
   - name: Feature Request
     url: https://github.com/payloadcms/payload/discussions
     about: Suggest an idea to improve Payload in our GitHub Discussions

.github/workflows/tests.yml

@@ -3,11 +3,11 @@ name: build
 on: [push]
 
 jobs:
-  build:
+  build_yarn:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x, 12.x, 14.x, 15.x]
+        node-version: [12.x, 14.x, 16.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -33,5 +33,33 @@ jobs:
     - run: yarn build
     - run: yarn test:client
     - run: yarn test:int # In-memory db + api tests
+    - run: yarn demo:generate:types
       env:
         CI: true
+  install_npm:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+        registry-url: https://registry.npmjs.org
+        scope: '@payloadcms'
+        always-auth: true
+    - name: Cache node modules
+      uses: actions/cache@v1
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-npm-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-npm-${{ env.cache-name }}-
+          ${{ runner.os }}-npm-
+          ${{ runner.os }}-
+    - run: npm install --legacy-peer-deps
+      env:
+        NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -2,6 +2,8 @@ coverage
 package-lock.json
 dist
 .idea
+cypress/videos
+cypress/screenshots
 
 # Created by https://www.gitignore.io/api/node,macos,windows,webstorm,sublimetext,visualstudiocode
 
@@ -228,3 +230,6 @@ build
 # Ignore built components
 components/index.js
 components/styles.css
+
+# Ignore generated
+demo/generated-types.ts

.release-it.beta.json

@@ -0,0 +1,25 @@
+{
+  "preReleaseId": "beta",
+  "git": {
+    "requireCleanWorkingDir": false,
+    "commit": false,
+    "push": false,
+    "tag": false
+  },
+  "github": {
+    "release": false
+  },
+  "npm": {
+    "skipChecks": true,
+    "tag": "beta"
+  },
+  "hooks": {
+    "before:init": ["yarn", "yarn clean", "yarn test"]
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular",
+      "infile": "CHANGELOG.md"
+    }
+  }
+}

.vscode/launch.json

@@ -18,6 +18,7 @@
       },
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
       "port": 9229,
       "skipFiles": [
         "<node_internals>/**"
@@ -54,6 +55,7 @@
         "<node_internals>/**"
       ],
       "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/babel-node",
+      "outputCapture": "std",
       "runtimeArgs": [
         "--nolazy"
       ],
@@ -64,6 +66,19 @@
       "name": "Launch Chrome against Localhost",
       "url": "http://localhost:3000/admin",
       "webRoot": "${workspaceFolder}"
-    }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Payload Generate Types",
+      "program": "${workspaceFolder}/src/bin/generateTypes.ts",
+      "env": {
+        "PAYLOAD_CONFIG_PATH": "demo/payload.config.ts",
+      },
+      "outFiles": [
+        "${workspaceFolder}/dist/**/*.js",
+        "!**/node_modules/**"
+      ]
+    },
   ]
 }

README.md

@@ -1,15 +1,19 @@
 <h1 align="center">Payload</h1>
-<p align="center">A self-hosted, JavaScript headless CMS & application framework built with Express, MongoDB and React.</p>
+<p align="center">A self-hosted, TypeScript / JavaScript headless CMS & application framework built with Express, MongoDB and React.</p>
 <p align="center">
   <a href="https://github.com/payloadcms/payload/actions">
-    <img src="https://github.com/payloadcms/payload/workflows/build/badge.svg">
+    <img src="https://github.com/payloadcms/payload/workflows/build/badge.svg" />
   </a>
   <a href="https://www.npmjs.com/package/payload">
-    <img alt="npm" src="https://img.shields.io/npm/v/payload">
+    <img alt="npm" src="https://img.shields.io/npm/v/payload" />
   </a>
 
   <a href="https://twitter.com/intent/tweet?text=Payload%20-%20A%20self-hosted%2C%20headless%20JavaScript%20CMS%20%26%20application%20framework&url=https%3A%2F%2Fgithub.com%2Fpayloadcms%2Fpayload">
-  <img alt="Tweet Payload" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social">
+  <img alt="Tweet Payload" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" />
+  </a>
+
+  <a href="https://discord.com/invite/r6sCXqVk3v">
+    <img alt="Discord" src="https://img.shields.io/discord/967097582721572934?label=Discord" />
   </a>
 </p>
 

SECURITY.md

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

babel.js

@@ -0,0 +1,3 @@
+const babelConfig = require('./dist/babel.config');
+
+exports.config = babelConfig;

components/elements.ts

@@ -0,0 +1,4 @@
+export { default as Button } from '../dist/admin/components/elements/Button';
+export { default as Card } from '../dist/admin/components/elements/Card';
+export { default as Eyebrow } from '../dist/admin/components/elements/Eyebrow';
+export { default as Nav } from '../dist/admin/components/elements/Nav';

components/fields/Array.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props, RenderArrayProps } from '../../dist/admin/components/forms/field-types/Array/types';

components/fields/Blocks.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props, RenderBlockProps } from '../../dist/admin/components/forms/field-types/Blocks/types';

components/fields/Cell.ts

@@ -0,0 +1 @@
+export { Props } from '../../dist/admin/components/views/collections/List/Cell/types';

components/fields/Checkbox.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Checkbox/types';

components/fields/Code.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Code/types';

components/fields/DateTime.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/DateTime/types';

components/fields/Email.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Email/types';

components/fields/Group.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Group/types';

components/fields/Number.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Number/types';

components/fields/Password.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Password/types';

components/fields/RadioGroup/RadioInput.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../../dist/admin/components/forms/field-types/RadioGroup/RadioInput/types';

components/fields/RadioGroup/index.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../../dist/admin/components/forms/field-types/RadioGroup/types';

components/fields/Relationship.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props, Option, ValueWithRelation } from '../../dist/admin/components/forms/field-types/Relationship/types';

components/fields/RichText.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/RichText/types';

components/fields/Row.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Row/types';

components/fields/Select.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props, Option } from '../../dist/admin/components/forms/field-types/Select/types';

components/fields/Text.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Text/types';

components/fields/Textarea.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Textarea/types';

components/fields/Upload.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/forms/field-types/Upload/types';

components/forms.ts

@@ -6,14 +6,23 @@ export {
   useFormModified,
 } from '../dist/admin/components/forms/Form/context';
 
-export { default as useFieldType } from '../dist/admin/components/forms/useFieldType';
+export { default as useField } from '../dist/admin/components/forms/useField';
+export { default as useFieldType } from '../dist/admin/components/forms/useField';
 
 export { default as Form } from '../dist/admin/components/forms/Form';
 
 export { default as Text } from '../dist/admin/components/forms/field-types/Text';
+export { default as TextInput } from '../dist/admin/components/forms/field-types/Text/Input';
+
 export { default as Group } from '../dist/admin/components/forms/field-types/Group';
+
 export { default as Select } from '../dist/admin/components/forms/field-types/Select';
+export { default as SelectInput } from '../dist/admin/components/forms/field-types/Select/Input';
+
 export { default as Checkbox } from '../dist/admin/components/forms/field-types/Checkbox';
 export { default as Submit } from '../dist/admin/components/forms/Submit';
+export { default as Label } from '../dist/admin/components/forms/Label';
 
 export { default as reduceFieldsToValues } from '../dist/admin/components/forms/Form/reduceFieldsToValues';
+
+export { default as withCondition } from '../dist/admin/components/forms/withCondition';

components/hooks.ts

@@ -0,0 +1 @@
+export { useStepNav } from '../dist/admin/components/elements/StepNav';

components/icons.ts

@@ -0,0 +1,2 @@
+export { default as Chevron } from '../src/admin/components/icons/Chevron';
+export { default as X } from '../src/admin/components/icons/X';

components/index.d.ts

@@ -0,0 +1 @@
+export * from '../dist/admin/components';

components/preferences.ts

@@ -0,0 +1 @@
+export { usePreferences } from '../dist/admin/components/utilities/Preferences';

components/templates.ts

@@ -0,0 +1,2 @@
+export { default as DefaultTemplate } from '../dist/admin/components/templates/Default';
+export { default as MinimalTemplate } from '../dist/admin/components/templates/Minimal';

components/utilities.ts

@@ -0,0 +1,2 @@
+export { default as Meta } from '../dist/admin/components/utilities/Meta';
+export { useLocale } from '../dist/admin/components/utilities/Locale';

components/views.js

@@ -1,2 +0,0 @@
-export { default as Edit } from '../dist/admin/components/views/collections/Edit/Default';
-export { default as List } from '../dist/admin/components/views/collections/List/Default';

components/views/Cell.ts

@@ -0,0 +1,3 @@
+export { default as Cell } from '../../dist/admin/components/views/collections/List/Cell';
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/views/collections/List/Cell/types';

components/views/Dashboard.ts

@@ -0,0 +1,3 @@
+export { default as Dashboard } from '../../dist/admin/components/views/Dashboard/Default';
+
+export type { Props } from '../../dist/admin/components/views/Dashboard/types';

components/views/Edit.ts

@@ -0,0 +1,3 @@
+export { default as Edit } from '../../dist/admin/components/views/collections/Edit/Default';
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/views/collections/Edit/types';

components/views/List.ts

@@ -0,0 +1,3 @@
+export { default as List } from '../../dist/admin/components/views/collections/List/Default';
+// eslint-disable-next-line import/named
+export { Props } from '../../dist/admin/components/views/collections/Edit/types';

cypress.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://on.cypress.io/cypress.schema.json",
+  "testFiles": "**/*e2e.ts",
+  "ignoreTestFiles": "**/examples/*spec.js",
+  "viewportWidth": 1440,
+  "viewportHeight": 900,
+  "baseUrl": "http://localhost:3000"
+}

cypress/cypress.d.ts

@@ -0,0 +1,16 @@
+export { };
+
+declare global {
+  namespace Cypress {
+    interface Chainable<Subject> {
+      visitAdmin(): Chainable<any>
+      /**
+       * Login
+       *
+       * Creates user if not exists
+       */
+      login(): Chainable<any>
+      apiLogin(): Chainable<any>
+    }
+  }
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/collections.e2e.ts

@@ -0,0 +1,43 @@
+import { adminURL } from './common/constants';
+import { credentials } from './common/credentials';
+
+describe('Collections', () => {
+  const collectionName = 'Admins';
+
+  before(() => {
+    cy.apiLogin();
+  });
+
+  beforeEach(() => {
+    cy.visitAdmin();
+  });
+
+  it('can view collection', () => {
+    cy.contains(collectionName).click();
+
+    cy.get('.collection-list__wrap')
+      .should('be.visible');
+    cy.get('.collection-list__header')
+      .contains(collectionName)
+      .should('be.visible');
+
+    cy.get('.table')
+      .contains(credentials.email)
+      .should('be.visible');
+  });
+
+  it('can create new', () => {
+    cy.contains(collectionName).click();
+
+    cy.contains('Create New').click();
+    cy.url().should('eq', `${adminURL}/collections/${collectionName.toLowerCase()}/create`);
+  });
+  it('can create new - plus button', () => {
+    cy.contains(collectionName)
+      .get('.card__actions')
+      .first()
+      .click();
+
+    cy.url().should('eq', `${adminURL}/collections/${collectionName.toLowerCase()}/create`);
+  });
+});

cypress/integration/common/constants.ts

@@ -0,0 +1 @@
+export const adminURL = 'http://localhost:3000/admin';

cypress/integration/common/credentials.ts

@@ -0,0 +1,4 @@
+export const credentials = {
+  email: 'test@test.com',
+  password: 'test123',
+};

cypress/integration/login.e2e.ts

@@ -0,0 +1,89 @@
+/* eslint-disable jest/expect-expect */
+import { adminURL } from './common/constants';
+import { credentials } from './common/credentials';
+
+const viewportSizes: Cypress.ViewportPreset[] = ['macbook-15', 'iphone-x', 'ipad-2'];
+
+describe.skip('Payload Login', () => {
+  beforeEach(() => {
+    cy.clearCookies();
+  });
+
+  after(() => {
+    cy.apiLogin();
+  });
+
+  viewportSizes.forEach((viewportSize) => {
+    describe(`Login (${viewportSize})`, () => {
+      beforeEach(() => {
+        cy.visit(adminURL);
+      });
+
+      it('success', () => {
+        cy.viewport(viewportSize);
+
+        cy.get('#email').type(credentials.email);
+        cy.get('#password').type(credentials.password);
+        cy.get('form')
+          .contains('form', 'Login')
+          .should('be.visible')
+          .submit();
+        cy.get('.template-default')
+          .find('h3.dashboard__label')
+          .should('have.length', 2); // TODO: Should assert label content
+        cy.url().should('eq', adminURL);
+      });
+
+      it('bad Password', () => {
+        cy.viewport(viewportSize);
+
+        cy.visit(adminURL);
+        cy.get('#email').type(credentials.email);
+        cy.get('#password').type('badpassword');
+        cy.get('form')
+          .contains('form', 'Login')
+          .should('be.visible')
+          .submit();
+
+        cy.get('.Toastify')
+          .contains('The email or password provided is incorrect.')
+          .should('be.visible');
+      });
+
+      it('bad Password - Retry Success', () => {
+        cy.viewport(viewportSize);
+
+        cy.visit(adminURL);
+        cy.get('#email').type(credentials.email);
+        cy.get('#password').type('badpassword');
+        cy.get('form')
+          .contains('form', 'Login')
+          .should('be.visible')
+          .submit();
+
+        cy.get('.Toastify')
+          .contains('The email or password provided is incorrect.')
+          .should('be.visible');
+
+        // Dismiss notification
+        cy.wait(500);
+        cy.get('.Toastify__toast-body').click();
+        cy.wait(200);
+        cy.get('.Toastify__toast-body').should('not.be.visible');
+        cy.url().should('eq', `${adminURL}/login`);
+
+        cy.get('#password').clear().type(credentials.password);
+        cy.get('form')
+          .contains('form', 'Login')
+          .should('be.visible')
+          .submit();
+
+        cy.get('.template-default')
+          .find('h3.dashboard__label')
+          .should('have.length', 2); // TODO: Should assert label content
+
+        cy.url().should('eq', adminURL);
+      });
+    });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.ts

@@ -0,0 +1,54 @@
+import { adminURL } from '../integration/common/constants';
+import { credentials } from '../integration/common/credentials';
+
+Cypress.Commands.add('visitAdmin', () => {
+  cy.visit(adminURL);
+});
+
+Cypress.Commands.add('login', () => {
+  cy.clearCookies();
+  cy.visit(adminURL);
+  cy.get('#email').type(credentials.email);
+  cy.get('#password').type(credentials.password);
+
+  cy.get('body')
+    .then((body) => {
+      if (body.find('.dashboard__card-list').length) {
+        cy.get('.dashboard__card-list')
+          .should('be.visible');
+      }
+
+      if (body.find('#confirm-password').length) {
+        cy.get('#confirm-password').type(credentials.password);
+        cy.get('.rs__indicators').first()
+          .click();
+        cy.get('.rs__menu').first().contains('admin')
+          .click();
+
+        cy.get('form')
+          .contains('form', 'Create')
+          .should('be.visible')
+          .submit();
+      }
+
+      if (body.find('form').length) {
+        cy.get('form')
+          .contains('form', 'Login')
+          .should('be.visible')
+          .submit();
+      }
+      cy.get('.dashboard__card-list')
+        .should('be.visible');
+    });
+});
+
+Cypress.Commands.add('apiLogin', () => {
+  cy.api({
+    url: '/api/admins/login',
+    method: 'POST',
+    body: credentials,
+    failOnStatusCode: true,
+  }).should(({ status }) => {
+    cy.wrap(status).should('equal', 200);
+  });
+});

cypress/support/index.ts

@@ -0,0 +1,25 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import '@bahmutov/cy-api';
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+Cypress.Cookies.defaults({
+  preserve: 'payload-token',
+});

cypress/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "es5",
+      "dom"
+    ],
+    "types": [
+      "cypress"
+    ]
+  },
+  "include": [
+    "**/*.ts"
+  ]
+}

demo/blocks/Quote.ts

@@ -8,13 +8,6 @@ const Quote: Block = {
     plural: 'Quotes',
   },
   fields: [
-    {
-      name: 'author',
-      label: 'Author',
-      type: 'relationship',
-      relationTo: 'public-users',
-      required: true,
-    },
     {
       name: 'quote',
       label: 'Quote',

demo/client/components/AfterDashboard/index.scss

@@ -0,0 +1,16 @@
+
+// As this is the demo folder, we import Payload SCSS functions relatively.
+@import '../../../../scss';
+
+// In your own projects, you'd import as follows:
+// @import '~payload/scss';
+
+.after-dashboard {
+  margin-top: base(2);
+
+  &__cards {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}

demo/client/components/AfterDashboard/index.tsx

@@ -0,0 +1,41 @@
+import { useConfig } from '@payloadcms/config-provider';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+// As this is the demo project, we import our dependencies from the `src` directory.
+import Card from '../../../../src/admin/components/elements/Card';
+
+// In your projects, you can import as follows:
+// import { Card } from 'payload/components/elements';
+
+import './index.scss';
+
+const baseClass = 'after-dashboard';
+
+const AfterDashboard: React.FC = () => {
+  const history = useHistory();
+  const { routes: { admin: adminRoute } } = useConfig();
+
+  return (
+    <div className={baseClass}>
+      <h3>Custom Routes &amp; Dashboard Components</h3>
+      <p>This is a custom component that is rendered within the built-in dashboard component after its contents are rendered. Below, there are two cards that link to custom routes.</p>
+      <ul className="dashboard__card-list">
+        <li>
+          <Card
+            title="Default Template"
+            onClick={() => history.push(`${adminRoute}/custom-default-route`)}
+          />
+        </li>
+        <li>
+          <Card
+            title="Minimal Template"
+            onClick={() => history.push(`${adminRoute}/custom-minimal-route`)}
+          />
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default AfterDashboard;

demo/client/components/AfterNavLinks/index.tsx

@@ -0,0 +1,40 @@
+import { useConfig } from '@payloadcms/config-provider';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+// As this is the demo project, we import our dependencies from the `src` directory.
+import Chevron from '../../../../src/admin/components/icons/Chevron';
+
+// In your projects, you can import as follows:
+// import { Chevron } from 'payload/components/icons';
+
+
+const baseClass = 'after-nav-links';
+
+const AfterNavLinks: React.FC = () => {
+  const { routes: { admin: adminRoute } } = useConfig();
+
+  return (
+    <div className={baseClass}>
+      <span className="nav__label">Custom Routes</span>
+      <nav>
+        <NavLink
+          activeClassName="active"
+          to={`${adminRoute}/custom-default-route`}
+        >
+          <Chevron />
+          Default Template
+        </NavLink>
+        <NavLink
+          activeClassName="active"
+          to={`${adminRoute}/custom-minimal-route`}
+        >
+          <Chevron />
+          Minimal Template
+        </NavLink>
+      </nav>
+    </div>
+  );
+};
+
+export default AfterNavLinks;

demo/client/components/BeforeLogin/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const BeforeLogin: React.FC = () => {
+  return (
+    <div>
+      <h3>Welcome</h3>
+      <p>
+        This demo is a set up to configure Payload for the develop and testing of features. To see a product demo of a Payload project
+        please visit:
+        {' '}
+        <a
+          href="https://demo.payloadcms.com"
+          target="_blank"
+          rel="noreferrer"
+        >
+          demo.payloadcms.com
+        </a>
+        .
+      </p>
+    </div>
+  );
+};
+
+export default BeforeLogin;

demo/client/components/CustomProvider/index.tsx

@@ -0,0 +1,29 @@
+import React, { createContext, useState, useContext } from 'react';
+
+type CustomContext = {
+  getCustom
+  setCustom
+}
+
+const Context = createContext({} as CustomContext);
+
+const CustomProvider: React.FC = ({ children }) => {
+  const [getCustom, setCustom] = useState({});
+
+  const value = {
+    getCustom,
+    setCustom,
+  };
+
+  console.log('custom provider called');
+
+  return (
+    <Context.Provider value={value}>
+      {children}
+    </Context.Provider>
+  );
+};
+
+export default CustomProvider;
+
+export const useCustom = () => useContext(Context);

demo/client/components/DemoUIField/Cell.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DemoUIFieldCell: React.FC = () => (
+  <p>Demo UI Field Cell</p>
+);
+
+export default DemoUIFieldCell;

demo/client/components/DemoUIField/Field.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const DemoUIField: React.FC = () => (
+  <p>Demo UI Field</p>
+);
+
+export default DemoUIField;

demo/client/components/richText/elements/Button/Button/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../scss/vars.scss';
+@import '../../../../../../../src/admin/scss/styles.scss';
 
 .button-rich-text-button {
   .btn {

demo/client/components/richText/elements/Button/Button/index.tsx

@@ -3,10 +3,15 @@ import { Modal, useModal } from '@faceless-ui/modal';
 import { Transforms } from 'slate';
 import { useSlate, ReactEditor } from 'slate-react';
 import MinimalTemplate from '../../../../../../../src/admin/components/templates/Minimal';
-import { ElementButton } from '../../../../../../../components/rich-text';
+import ElementButton from '../../../../../../../src/admin/components/forms/field-types/RichText/elements/Button';
 import X from '../../../../../../../src/admin/components/icons/X';
 import Button from '../../../../../../../src/admin/components/elements/Button';
-import { Form, Text, Checkbox, Select, Submit, reduceFieldsToValues } from '../../../../../../../components/forms';
+import Form from '../../../../../../../src/admin/components/forms/Form';
+import Submit from '../../../../../../../src/admin/components/forms/Submit';
+import reduceFieldsToValues from '../../../../../../../src/admin/components/forms/Form/reduceFieldsToValues';
+import Text from '../../../../../../../src/admin/components/forms/field-types/Text';
+import Checkbox from '../../../../../../../src/admin/components/forms/field-types/Checkbox';
+import Select from '../../../../../../../src/admin/components/forms/field-types/Select';
 
 import './index.scss';
 

demo/client/components/richText/elements/Button/Element/index.scss

@@ -1,4 +1,4 @@
-@import '../../../../../../../scss/vars.scss';
+@import '../../../../../../../src/admin/scss/styles.scss';
 
 .rich-text-button {
   margin: $baseline 0;

demo/client/components/richText/elements/Button/Element/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import './index.scss';
 
@@ -27,18 +26,4 @@ const ButtonElement: React.FC = ({ attributes, children, element }) => {
   );
 };
 
-ButtonElement.defaultProps = {
-  attributes: {},
-  children: null,
-};
-
-ButtonElement.propTypes = {
-  attributes: PropTypes.shape({}),
-  children: PropTypes.node,
-  element: PropTypes.shape({
-    style: PropTypes.oneOf(['primary', 'secondary']),
-    label: PropTypes.string,
-  }).isRequired,
-};
-
 export default ButtonElement;

demo/client/components/richText/elements/Button/index.ts

@@ -1,8 +1,9 @@
+import { RichTextCustomElement } from '../../../../../../src/fields/config/types';
 import Button from './Button';
 import Element from './Element';
 import plugin from './plugin';
 
-export default {
+const button: RichTextCustomElement = {
   name: 'button',
   Button,
   Element,
@@ -10,3 +11,5 @@ export default {
     plugin,
   ],
 };
+
+export default button;

demo/client/components/richText/leaves/PurpleBackground/Button/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LeafButton } from '../../../../../../../components/rich-text';
+import LeafButton from '../../../../../../../src/admin/components/forms/field-types/RichText/leaves/Button';
 
 const Button = () => (
   <LeafButton format="purple-background">

demo/client/components/richText/leaves/PurpleBackground/Leaf/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 const PurpleBackground: React.FC<any> = ({ attributes, children }) => (
   <span
@@ -10,14 +9,4 @@ const PurpleBackground: React.FC<any> = ({ attributes, children }) => (
   </span>
 );
 
-PurpleBackground.defaultProps = {
-  attributes: {},
-  children: null,
-};
-
-PurpleBackground.propTypes = {
-  attributes: PropTypes.shape({}),
-  children: PropTypes.node,
-};
-
 export default PurpleBackground;

demo/client/components/views/CustomDefault/index.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { Redirect } from 'react-router-dom';
+import { useConfig } from '@payloadcms/config-provider';
+
+// As this is the demo project, we import our dependencies from the `src` directory.
+import DefaultTemplate from '../../../../../src/admin/components/templates/Default';
+import Button from '../../../../../src/admin/components/elements/Button';
+import Eyebrow from '../../../../../src/admin/components/elements/Eyebrow';
+import { AdminView } from '../../../../../src/config/types';
+import { useStepNav } from '../../../../../src/admin/components/elements/StepNav';
+import Meta from '../../../../../src/admin/components/utilities/Meta';
+
+// In your projects, you can import as follows:
+// import { DefaultTemplate } from 'payload/components/templates';
+// import { Button, Eyebrow } from 'payload/components/elements';
+// import { AdminView } from 'payload/config';
+// import { useStepNav } from 'payload/components/hooks';
+// import { Meta } from 'payload/components/utilities';
+
+const CustomDefaultRoute: AdminView = ({ user, canAccessAdmin }) => {
+  const { routes: { admin: adminRoute } } = useConfig();
+  const { setStepNav } = useStepNav();
+
+  // This effect will only run one time and will allow us
+  // to set the step nav to display our custom route name
+
+  useEffect(() => {
+    setStepNav([
+      {
+        label: 'Custom Route with Default Template',
+      },
+    ]);
+  }, [setStepNav]);
+
+  // If an unauthorized user tries to navigate straight to this page,
+  // Boot 'em out
+  if (!user || (user && !canAccessAdmin)) {
+    return (
+      <Redirect to={`${adminRoute}/unauthorized`} />
+    );
+  }
+
+  return (
+    <DefaultTemplate>
+      <Meta
+        title="Custom Route with Default Template"
+        description="Building custom routes into Payload is easy."
+        keywords="Custom React Components, Payload, CMS"
+      />
+      <Eyebrow />
+      <h1>Custom Route</h1>
+      <p>Here is a custom route that was added in the Payload config. It uses the Default Template, so the sidebar is rendered.</p>
+      <Button
+        el="link"
+        to={`${adminRoute}`}
+        buttonStyle="secondary"
+      >
+        Go to Dashboard
+      </Button>
+    </DefaultTemplate>
+  );
+};
+
+export default CustomDefaultRoute;

demo/client/components/views/CustomMinimal/index.scss

@@ -0,0 +1,12 @@
+
+// As this is the demo folder, we import Payload SCSS functions relatively.
+@import '../../../../../scss';
+
+// In your own projects, you'd import as follows:
+// @import '~payload/scss';
+
+.custom-minimal-route {
+  &__login-btn {
+    margin-right: base(.5);
+  }
+}

demo/client/components/views/CustomMinimal/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useConfig } from '@payloadcms/config-provider';
+
+// As this is the demo project, we import our dependencies from the `src` directory.
+import MinimalTemplate from '../../../../../src/admin/components/templates/Minimal';
+import Button from '../../../../../src/admin/components/elements/Button';
+
+// In your projects, you can import as follows:
+// import { MinimalTemplate } from 'payload/components/templates';
+// import { Button } from 'payload/components/elements';
+
+import './index.scss';
+
+const baseClass = 'custom-minimal-route';
+
+const CustomMinimalRoute: React.FC = () => {
+  const { routes: { admin: adminRoute } } = useConfig();
+
+  return (
+    <MinimalTemplate className={baseClass}>
+      <h1>Custom Route</h1>
+      <p>Here is a custom route that was added in the Payload config.</p>
+      <Button
+        className={`${baseClass}__login-btn`}
+        el="link"
+        to={`${adminRoute}/login`}
+      >
+        Go to Login
+      </Button>
+      <Button
+        el="link"
+        to={`${adminRoute}`}
+        buttonStyle="secondary"
+      >
+        Go to Dashboard
+      </Button>
+    </MinimalTemplate>
+  );
+};
+
+export default CustomMinimalRoute;

demo/collections/Admin.ts

@@ -1,4 +1,4 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import roles from '../access/roles';
 import checkRole from '../access/checkRole';
 
@@ -7,7 +7,7 @@ const access = ({ req: { user } }) => {
   return result;
 };
 
-const Admin: PayloadCollectionConfig = {
+const Admin: CollectionConfig = {
   slug: 'admins',
   labels: {
     singular: 'Admin',
@@ -44,23 +44,17 @@ const Admin: PayloadCollectionConfig = {
       saveToJWT: true,
       hasMany: true,
     },
+    {
+      name: 'publicUser',
+      type: 'relationship',
+      hasMany: true,
+      relationTo: 'public-users',
+    },
     {
       name: 'apiKey',
       type: 'text',
       access: {
-        read: ({ req: { user } }) => {
-          if (checkRole(['admin'], user)) {
-            return true;
-          }
-
-          if (user) {
-            return {
-              email: user.email,
-            };
-          }
-
-          return false;
-        },
+        read: ({ req: { user } }) => checkRole(['admin'], user),
       },
     },
   ],

demo/collections/AllFields.ts

@@ -1,25 +1,37 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import checkRole from '../access/checkRole';
 import Email from '../blocks/Email';
 import Quote from '../blocks/Quote';
 import NumberBlock from '../blocks/Number';
 import CallToAction from '../blocks/CallToAction';
+import CollectionDescription from '../customComponents/CollectionDescription';
+import DemoUIField from '../client/components/DemoUIField/Field';
+import DemoUIFieldCell from '../client/components/DemoUIField/Cell';
 
-const AllFields: PayloadCollectionConfig = {
+const AllFields: CollectionConfig = {
   slug: 'all-fields',
   labels: {
     singular: 'All Fields',
     plural: 'All Fields',
   },
   admin: {
+    defaultColumns: ['text', 'demo', 'createdAt'],
     useAsTitle: 'text',
-    preview: (doc, token) => {
-      if (doc && doc.text) {
-        return `http://localhost:3000/previewable-posts/${doc.text}?preview=true&token=${token}`;
+    preview: (doc, { token }) => {
+      const { text } = doc;
+
+      if (doc && text) {
+        return `http://localhost:3000/previewable-posts/${text}?preview=true&token=${token}`;
       }
 
       return null;
     },
+    description: CollectionDescription,
+  },
+  versions: {
+    maxPerDoc: 20,
+    retainDeleted: true,
+    drafts: false,
   },
   access: {
     read: () => true,
@@ -38,11 +50,33 @@ const AllFields: PayloadCollectionConfig = {
         read: ({ req: { user } }) => Boolean(user),
       },
     },
+    {
+      name: 'descriptionText',
+      type: 'text',
+      label: 'Text with text description',
+      defaultValue: 'Default Value',
+      admin: {
+        description: 'This text describes the field',
+      },
+    },
+    {
+      name: 'descriptionFunction',
+      type: 'text',
+      label: 'Text with function description',
+      defaultValue: 'Default Value',
+      maxLength: 20,
+      admin: {
+        description: ({ value }) => (typeof value === 'string' ? `${20 - value.length} characters left` : ''),
+      },
+    },
     {
       name: 'image',
       type: 'upload',
       label: 'Image',
       relationTo: 'media',
+      admin: {
+        description: 'No selfies',
+      },
     },
     {
       name: 'select',
@@ -85,20 +119,11 @@ const AllFields: PayloadCollectionConfig = {
       required: true,
       hasMany: true,
     },
-    {
-      name: 'dateFieldExample',
-      label: 'Day and Time',
-      type: 'date',
-      admin: {
-        date: {
-          timeIntervals: 30,
-        },
-      },
-    },
     {
       name: 'dayOnlyDateFieldExample',
       label: 'Day Only',
       type: 'date',
+      required: true,
       admin: {
         date: {
           pickerAppearance: 'dayOnly',
@@ -116,6 +141,11 @@ const AllFields: PayloadCollectionConfig = {
         },
       },
     },
+    {
+      name: 'point',
+      label: 'Point Field (GeoJSON)',
+      type: 'point',
+    },
     {
       name: 'radioGroupExample',
       label: 'Radio Group Example',
@@ -234,6 +264,9 @@ const AllFields: PayloadCollectionConfig = {
       label: 'Relationship to One Collection',
       name: 'relationship',
       relationTo: 'conditions',
+      admin: {
+        description: 'Relates to description',
+      },
     },
     {
       type: 'relationship',
@@ -252,6 +285,26 @@ const AllFields: PayloadCollectionConfig = {
       type: 'textarea',
       label: 'Textarea',
       name: 'textarea',
+      admin: {
+        description: 'Hello textarea description',
+      },
+    },
+    {
+      name: 'richText',
+      type: 'richText',
+      label: 'Rich Text',
+      required: true,
+    },
+    {
+      type: 'ui',
+      name: 'demo',
+      admin: {
+        position: 'sidebar',
+        components: {
+          Field: DemoUIField,
+          Cell: DemoUIFieldCell,
+        },
+      },
     },
     {
       name: 'slug',
@@ -273,29 +326,14 @@ const AllFields: PayloadCollectionConfig = {
       },
     },
     {
-      name: 'richText',
-      type: 'richText',
-      label: 'Rich Text',
-      required: true,
+      name: 'dateFieldExample',
+      label: 'Day and Time',
+      type: 'date',
       admin: {
-        elements: [
-          'h1',
-          'h2',
-          'h3',
-          'h4',
-          'h5',
-          'h6',
-          'blockquote',
-          'ul',
-          'ol',
-          'link',
-        ],
-        leaves: [
-          'bold',
-          'italic',
-          'underline',
-          'strikethrough',
-        ],
+        position: 'sidebar',
+        date: {
+          timeIntervals: 30,
+        },
       },
     },
   ],

demo/collections/AutoLabel.ts

@@ -1,12 +1,102 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const AutoLabel: PayloadCollectionConfig = {
+const AutoLabel: CollectionConfig = {
   slug: 'auto-label',
-  fields: [{
-    name: 'text',
-    type: 'text',
-    label: 'Text',
-  }],
+  admin: {
+    useAsTitle: 'autoLabelField',
+    enableRichTextRelationship: true,
+  },
+  fields: [
+    {
+      name: 'autoLabelField',
+      type: 'text',
+    },
+    {
+      name: 'noLabel',
+      type: 'text',
+      label: false,
+    },
+    {
+      name: 'labelOverride',
+      type: 'text',
+      label: 'Custom Label',
+    },
+    {
+      name: 'testRelationship',
+      type: 'relationship',
+      relationTo: 'all-fields',
+    },
+    {
+      name: 'specialBlock',
+      type: 'blocks',
+      minRows: 1,
+      maxRows: 20,
+      // Will auto-label
+      // labels: {
+      //   singular: 'Special Block',
+      //   plural: 'Special Blocks',
+      // },
+      blocks: [
+        {
+          slug: 'number',
+          // Will auto-label
+          // labels: {
+          //   singular: 'Number',
+          //   plural: 'Numbers',
+          // },
+          fields: [
+            {
+              name: 'testNumber',
+              type: 'number',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'noLabelBlock',
+      type: 'blocks',
+      label: false,
+      minRows: 1,
+      maxRows: 20,
+      blocks: [
+        {
+          slug: 'number',
+          // labels: {
+          //   singular: 'Number',
+          //   plural: 'Numbers',
+          // },
+          fields: [
+            {
+              name: 'testNumber',
+              type: 'number',
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'items',
+      type: 'array',
+      fields: [
+        {
+          name: 'itemName',
+          type: 'text',
+        },
+      ],
+    },
+    {
+      name: 'noLabelArray',
+      type: 'array',
+      label: false,
+      fields: [
+        {
+          type: 'text',
+          name: 'textField',
+        },
+      ],
+    },
+  ],
 };
 
 export default AutoLabel;

demo/collections/Autosave.ts

@@ -0,0 +1,69 @@
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const Autosave: CollectionConfig = {
+  slug: 'autosave-posts',
+  labels: {
+    singular: 'Autosave Post',
+    plural: 'Autosave Posts',
+  },
+  admin: {
+    useAsTitle: 'title',
+    defaultColumns: [
+      'title',
+      'description',
+      'createdAt',
+    ],
+    preview: () => 'https://payloadcms.com',
+  },
+  versions: {
+    maxPerDoc: 35,
+    retainDeleted: false,
+    drafts: {
+      autosave: {
+        interval: 2000,
+      },
+    },
+  },
+  access: {
+    read: ({ req: { user } }) => {
+      if (user) {
+        return true;
+      }
+
+      return {
+        or: [
+          {
+            _status: {
+              equals: 'published',
+            },
+          },
+          {
+            _status: {
+              exists: false,
+            },
+          },
+        ],
+      };
+    },
+    readVersions: ({ req: { user } }) => Boolean(user),
+  },
+  fields: [
+    {
+      name: 'title',
+      label: 'Title',
+      type: 'text',
+      required: true,
+      unique: true,
+      localized: true,
+    },
+    {
+      name: 'description',
+      label: 'Description',
+      type: 'textarea',
+      required: true,
+    },
+  ],
+  timestamps: true,
+};
+
+export default Autosave;

demo/collections/Blocks.ts

@@ -1,10 +1,10 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import Email from '../blocks/Email';
 import Quote from '../blocks/Quote';
 import NumberBlock from '../blocks/Number';
 import CallToAction from '../blocks/CallToAction';
 
-const Blocks: PayloadCollectionConfig = {
+const Blocks: CollectionConfig = {
   slug: 'blocks',
   labels: {
     singular: 'Blocks',
@@ -13,6 +13,9 @@ const Blocks: PayloadCollectionConfig = {
   access: {
     read: () => true,
   },
+  versions: {
+    drafts: true,
+  },
   fields: [
     {
       name: 'layout',

demo/collections/Code.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Code: PayloadCollectionConfig = {
+const Code: CollectionConfig = {
   slug: 'code',
   labels: {
     singular: 'Code',
@@ -14,6 +14,7 @@ const Code: PayloadCollectionConfig = {
       required: true,
       admin: {
         language: 'js',
+        description: 'javascript example',
       },
     },
   ],

demo/collections/Conditions.ts

@@ -1,6 +1,10 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
+import Email from '../blocks/Email';
+import Quote from '../blocks/Quote';
+import NumberBlock from '../blocks/Number';
+import CallToAction from '../blocks/CallToAction';
 
-const Conditions: PayloadCollectionConfig = {
+const Conditions: CollectionConfig = {
   slug: 'conditions',
   labels: {
     singular: 'Conditions',
@@ -49,6 +53,20 @@ const Conditions: PayloadCollectionConfig = {
         condition: (_, siblings) => (siblings.number > 20 && siblings.enableTest === true) || (siblings.number < 20 && siblings.enableTest === false),
       },
     },
+    {
+      name: 'blocks',
+      label: 'Blocks',
+      labels: {
+        singular: 'Block',
+        plural: 'Blocks',
+      },
+      type: 'blocks',
+      blocks: [Email, NumberBlock, Quote, CallToAction],
+      required: true,
+      admin: {
+        condition: (_, siblings) => siblings?.enableTest === true,
+      },
+    },
   ],
 };
 

demo/collections/CustomComponents/components/fields/Select/Field/index.tsx

@@ -0,0 +1,61 @@
+import React, { useCallback } from 'react';
+import SelectInput from '../../../../../../../src/admin/components/forms/field-types/Select/Input';
+import { Props as SelectFieldType } from '../../../../../../../src/admin/components/forms/field-types/Select/types';
+import useField from '../../../../../../../src/admin/components/forms/useField';
+
+const Select: React.FC<SelectFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label,
+    options,
+  } = props;
+
+  const {
+    showError,
+    value,
+    setValue,
+  } = useField({
+    path,
+  });
+
+  const onChange = useCallback((incomingOption) => {
+    const { value: incomingValue } = incomingOption;
+
+    const sendToCRM = async () => {
+      try {
+        const req = await fetch('https://fake-crm.com', {
+          method: 'post',
+          body: JSON.stringify({
+            someKey: incomingValue,
+          }),
+        });
+
+        const res = await req.json();
+        if (res.ok) {
+          console.log('Successfully synced to CRM.'); // eslint-disable-line no-console
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    };
+
+    sendToCRM();
+    setValue(incomingValue);
+  }, [
+    setValue,
+  ]);
+
+  return (
+    <SelectInput
+      name={name}
+      label={label}
+      options={options}
+      value={value as string}
+      onChange={onChange}
+      showError={showError}
+    />
+  );
+};
+
+export default Select;

demo/collections/CustomComponents/components/fields/Text/Field/index.tsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text/Input';
+import { Props as TextFieldType } from '../../../../../../../src/admin/components/forms/field-types/Text/types';
+import useField from '../../../../../../../src/admin/components/forms/useField';
+
+const Text: React.FC<TextFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label,
+  } = props;
+
+  const field = useField({
+    path,
+    enableDebouncedValue: true,
+  });
+
+  const {
+    showError,
+    value,
+    setValue,
+  } = field;
+
+  const onChange = useCallback((e) => {
+    const { value: incomingValue } = e.target;
+    const valueWithoutSpaces = incomingValue.replace(/\s/g, '');
+    setValue(valueWithoutSpaces);
+  }, [
+    setValue,
+  ]);
+
+  return (
+    <TextInput
+      path={path}
+      name={name}
+      value={value as string || ''}
+      label={label}
+      onChange={onChange}
+      showError={showError}
+    />
+  );
+};
+
+export default Text;

demo/collections/CustomComponents/components/fields/TextArea/Field/index.tsx

@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+import TextAreaInput from '../../../../../../../src/admin/components/forms/field-types/Textarea/Input';
+import { Props as TextFieldType } from '../../../../../../../src/admin/components/forms/field-types/Text/types';
+import useField from '../../../../../../../src/admin/components/forms/useField';
+
+const TextArea: React.FC<TextFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label,
+  } = props;
+
+  const field = useField({
+    path,
+  });
+
+  const {
+    showError,
+    value,
+    setValue,
+  } = field;
+
+  const onChange = useCallback((e) => {
+    const { value: incomingValue } = e.target;
+    setValue(incomingValue);
+  }, [
+    setValue,
+  ]);
+
+  return (
+    <TextAreaInput
+      name={name}
+      value={value as string || ''}
+      label={label}
+      onChange={onChange}
+      showError={showError}
+    />
+  );
+};
+
+export default TextArea;

demo/collections/CustomComponents/components/fields/UI/Field/index.tsx

@@ -0,0 +1,50 @@
+import React, { useCallback } from 'react';
+import TextInput from '../../../../../../../src/admin/components/forms/field-types/Text';
+import { UIField as UIFieldType } from '../../../../../../../src/fields/config/types';
+import SelectInput from '../../../../../../../src/admin/components/forms/field-types/Select';
+
+const UIField: React.FC<UIFieldType> = () => {
+  const [textValue, setTextValue] = React.useState('');
+  const [selectValue, setSelectValue] = React.useState('');
+
+  const onTextChange = useCallback((incomingValue) => {
+    setTextValue(incomingValue);
+  }, [])
+
+  const onSelectChange = useCallback((incomingValue) => {
+    setSelectValue(incomingValue);
+  }, [])
+
+  return (
+    <div>
+      <TextInput
+        name="ui-text"
+        label="Presentation-only text field (does not submit)"
+        value={textValue as string}
+        onChange={onTextChange}
+      />
+      <SelectInput
+        name="ui-select"
+        label="Presentation-only select field (does not submit)"
+        options={[
+          {
+            label: 'Option 1',
+            value: 'option-1'
+          },
+          {
+            label: 'Option 2',
+            value: 'option-2'
+          },
+          {
+            label: 'Option 3',
+            value: 'option-4'
+          }
+        ]}
+        value={selectValue as string}
+        onChange={onSelectChange}
+      />
+    </div>
+  )
+};
+
+export default UIField;

demo/collections/CustomComponents/components/fields/Upload/Field/index.tsx

@@ -0,0 +1,57 @@
+import { useConfig } from '@payloadcms/config-provider';
+import React, { useCallback } from 'react';
+import UploadInput from '../../../../../../../src/admin/components/forms/field-types/Upload/Input';
+import { Props as UploadFieldType } from '../../../../../../../src/admin/components/forms/field-types/Upload/types';
+import useField from '../../../../../../../src/admin/components/forms/useField';
+import { SanitizedCollectionConfig } from '../../../../../../../src/collections/config/types';
+
+const Text: React.FC<UploadFieldType> = (props) => {
+  const {
+    path,
+    name,
+    label,
+    relationTo,
+    fieldTypes,
+  } = props;
+
+  const {
+    value,
+    setValue,
+    showError,
+  } = useField({
+    path,
+  });
+
+  const onChange = useCallback((incomingValue) => {
+    const incomingID = incomingValue?.id || incomingValue;
+    setValue(incomingID);
+  }, [setValue]);
+
+  const {
+    collections,
+    serverURL,
+    routes: {
+      api,
+    },
+  } = useConfig();
+
+  const collection = collections.find((coll) => coll.slug === relationTo) || undefined;
+
+  return (
+    <UploadInput
+      path={path}
+      relationTo={relationTo}
+      fieldTypes={fieldTypes}
+      name={name}
+      label={label}
+      value={value as string}
+      onChange={onChange}
+      showError={showError}
+      collection={collection as SanitizedCollectionConfig}
+      serverURL={serverURL}
+      api={api}
+    />
+  );
+};
+
+export default Text;

demo/collections/CustomComponents/index.ts

@@ -1,14 +1,20 @@
-import { PayloadCollectionConfig } from '../../../src/collections/config/types';
+import { CollectionConfig } from '../../../src/collections/config/types';
 import DescriptionField from './components/fields/Description/Field';
+import TextField from './components/fields/Text/Field';
+import SelectField from './components/fields/Select/Field';
+import TextAreaField from './components/fields/TextArea/Field';
+import UploadField from './components/fields/Upload/Field';
 import DescriptionCell from './components/fields/Description/Cell';
 import DescriptionFilter from './components/fields/Description/Filter';
 import NestedArrayField from './components/fields/NestedArrayCustomField/Field';
 import GroupField from './components/fields/Group/Field';
 import NestedGroupField from './components/fields/NestedGroupCustomField/Field';
 import NestedText1Field from './components/fields/NestedText1/Field';
+import UIField from './components/fields/UI/Field';
 import ListView from './components/views/List';
+import CustomDescriptionComponent from '../../customComponents/Description';
 
-const CustomComponents: PayloadCollectionConfig = {
+const CustomComponents: CollectionConfig = {
   slug: 'custom-components',
   labels: {
     singular: 'Custom Component',
@@ -22,14 +28,113 @@ const CustomComponents: PayloadCollectionConfig = {
       maxLength: 100,
       required: true,
       unique: true,
-      localized: true,
+    },
+    {
+      name: 'normalText',
+      label: 'Normal text field',
+      type: 'text',
+      // required: true,
+    },
+    {
+      name: 'customText',
+      label: 'Custom text field (removes whitespace)',
+      type: 'text',
+      // required: true,
+      admin: {
+        components: {
+          Field: TextField,
+        },
+      },
+    },
+    {
+      name: 'normalSelect',
+      label: 'Normal select field',
+      type: 'select',
+      options: [
+        {
+          label: 'Option 1',
+          value: '1',
+        },
+        {
+          label: 'Option 2',
+          value: '2',
+        },
+        {
+          label: 'Option 3',
+          value: '3',
+        },
+      ],
+    },
+    {
+      name: 'customSelect',
+      label: 'Custom select field (syncs value with crm)',
+      type: 'select',
+      options: [
+        {
+          label: 'Option 1',
+          value: '1',
+        },
+        {
+          label: 'Option 2',
+          value: '2',
+        },
+        {
+          label: 'Option 3',
+          value: '3',
+        },
+      ],
+      admin: {
+        components: {
+          Field: SelectField,
+        },
+      },
+    },
+    {
+      name: 'normalTextarea',
+      label: 'Normal textarea field',
+      type: 'textarea',
+    },
+    {
+      name: 'customTextarea',
+      label: 'Custom textarea field',
+      type: 'textarea',
+      admin: {
+        components: {
+          Field: TextAreaField,
+        },
+      },
+    },
+    {
+      name: 'ui',
+      label: 'UI',
+      type: 'ui',
+      admin: {
+        components: {
+          Field: UIField,
+        },
+      },
+    },
+    {
+      name: 'normalUpload',
+      label: 'Normal upload field',
+      type: 'upload',
+      relationTo: 'media',
+    },
+    {
+      name: 'customUpload',
+      label: 'Custom upload field',
+      type: 'upload',
+      relationTo: 'media',
+      admin: {
+        components: {
+          Field: UploadField,
+        },
+      },
     },
     {
       name: 'description',
       label: 'Description',
       type: 'textarea',
-      required: true,
-      localized: true,
       admin: {
         components: {
           Field: DescriptionField,
@@ -38,6 +143,14 @@ const CustomComponents: PayloadCollectionConfig = {
         },
       },
     },
+    {
+      name: 'componentDescription',
+      label: 'Component ViewDescription',
+      type: 'text',
+      admin: {
+        description: CustomDescriptionComponent,
+      },
+    },
     {
       name: 'array',
       label: 'Array',

demo/collections/CustomID.ts

@@ -0,0 +1,22 @@
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const CustomID: CollectionConfig = {
+  slug: 'custom-id',
+  labels: {
+    singular: 'CustomID',
+    plural: 'CustomIDs',
+  },
+  fields: [
+    {
+      name: 'id',
+      type: 'number',
+    },
+    {
+      name: 'name',
+      type: 'text',
+      required: true,
+    },
+  ],
+};
+
+export default CustomID;

demo/collections/DefaultValues.ts

@@ -1,11 +1,11 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import checkRole from '../access/checkRole';
 import Email from '../blocks/Email';
 import Quote from '../blocks/Quote';
 import NumberBlock from '../blocks/Number';
 import CallToAction from '../blocks/CallToAction';
 
-const DefaultValues: PayloadCollectionConfig = {
+const DefaultValues: CollectionConfig = {
   slug: 'default-values',
   labels: {
     singular: 'Default Value Test',
@@ -112,7 +112,8 @@ const DefaultValues: PayloadCollectionConfig = {
       label: 'Group',
       name: 'group',
       defaultValue: {
-        nestedText1: 'neat',
+        nestedText2: 'nested default text 2',
+        nestedText3: 'neat',
       },
       fields: [
         {
@@ -122,12 +123,16 @@ const DefaultValues: PayloadCollectionConfig = {
               name: 'nestedText1',
               label: 'Nested Text 1',
               type: 'text',
-              defaultValue: 'nested default text 1',
-            }, {
+              defaultValue: 'this should take priority',
+            },
+            {
               name: 'nestedText2',
               label: 'Nested Text 2',
               type: 'text',
-              defaultValue: 'nested default text 2',
+            },
+            {
+              name: 'nestedText3',
+              type: 'text',
             },
           ],
         },
@@ -143,6 +148,7 @@ const DefaultValues: PayloadCollectionConfig = {
       defaultValue: [
         {
           arrayText1: 'Get out',
+          arrayText2: 'Get in',
         },
       ],
       fields: [
@@ -281,6 +287,42 @@ const DefaultValues: PayloadCollectionConfig = {
         children: [{ text: 'Cookin now' }],
       }],
     },
+    {
+      type: 'array',
+      name: 'asyncArray',
+      defaultValue: () => {
+        return [{ child: 'ok' }];
+      },
+      fields: [
+        {
+          name: 'child',
+          type: 'text',
+          defaultValue: () => {
+            return 'async child';
+          },
+        },
+      ],
+    },
+    {
+      name: 'asyncText',
+      type: 'text',
+      defaultValue: async (): Promise<string> => {
+        return new Promise((resolve) => setTimeout(() => {
+          resolve('asyncFunction');
+        }, 50));
+      },
+    },
+    {
+      name: 'function',
+      type: 'text',
+      defaultValue: (args): string => {
+        const { locale } = args;
+        if (locale === 'en') {
+          return 'function';
+        }
+        return '';
+      },
+    },
   ],
   timestamps: true,
 };

demo/collections/File.ts

@@ -1,4 +1,4 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import checkRole from '../access/checkRole';
 
 const access = ({ req: { user } }) => {
@@ -19,7 +19,7 @@ const access = ({ req: { user } }) => {
   return false;
 };
 
-const Files: PayloadCollectionConfig = {
+const Files: CollectionConfig = {
   slug: 'files',
   labels: {
     singular: 'File',

demo/collections/Geolocation.ts

@@ -0,0 +1,90 @@
+/* eslint-disable no-param-reassign */
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const validateFieldTransformAction = (hook: string, value) => {
+  if (value !== undefined && value !== null && !Array.isArray(value)) {
+    console.error(hook, value);
+    throw new Error('Field transformAction should convert value to array [x, y] and not { coordinates: [x, y] }');
+  }
+  return value;
+};
+
+const Geolocation: CollectionConfig = {
+  slug: 'geolocation',
+  labels: {
+    singular: 'Geolocation',
+    plural: 'Geolocations',
+  },
+  access: {
+    read: () => true,
+  },
+  hooks: {
+    beforeRead: [
+      (operation) => operation.doc,
+    ],
+    beforeChange: [
+      (operation) => {
+        operation.data.beforeChange = !operation.data.location?.coordinates;
+        return operation.data;
+      },
+    ],
+    afterRead: [
+      (operation) => {
+        const { doc } = operation;
+        doc.afterReadHook = !doc.location?.coordinates;
+        return doc;
+      },
+    ],
+    afterChange: [
+      (operation) => {
+        const { doc } = operation;
+        doc.afterChangeHook = !doc.location?.coordinates;
+        return doc;
+      },
+    ],
+    afterDelete: [
+      (operation) => {
+        const { doc } = operation;
+        operation.doc.afterDeleteHook = !doc.location?.coordinates;
+        return doc;
+      },
+    ],
+  },
+  fields: [
+    {
+      name: 'location',
+      type: 'point',
+      label: 'Location',
+      hooks: {
+        beforeValidate: [({ value }) => validateFieldTransformAction('beforeValidate', value)],
+        beforeChange: [({ value }) => validateFieldTransformAction('beforeChange', value)],
+        afterChange: [({ value }) => validateFieldTransformAction('afterChange', value)],
+        afterRead: [({ value }) => validateFieldTransformAction('afterRead', value)],
+      },
+    },
+    {
+      name: 'localizedPoint',
+      type: 'point',
+      label: 'Localized Point',
+      localized: true,
+      hooks: {
+        beforeValidate: [({ value }) => validateFieldTransformAction('beforeValidate', value)],
+        beforeChange: [({ value }) => validateFieldTransformAction('beforeChange', value)],
+        afterChange: [({ value }) => validateFieldTransformAction('afterChange', value)],
+        afterRead: [({ value }) => validateFieldTransformAction('afterRead', value)],
+      },
+    },
+    {
+      type: 'group',
+      name: 'group',
+      fields: [
+        {
+          name: 'point',
+          type: 'point',
+        },
+      ],
+    },
+  ],
+};
+
+export default Geolocation;

demo/collections/HiddenFields.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const HiddenFields: PayloadCollectionConfig = {
+const HiddenFields: CollectionConfig = {
   slug: 'hidden-fields',
   labels: {
     singular: 'Hidden Fields',
@@ -21,13 +21,21 @@ const HiddenFields: PayloadCollectionConfig = {
         hidden: true,
       },
       required: true,
+      defaultValue: 'should be hidden from admin, visible in API',
     },
     {
       name: 'hiddenAPI',
       type: 'text',
       label: 'Hidden on API',
       hidden: true,
-      required: true, // this should not matter
+      required: true,
+      hooks: {
+        beforeValidate: [
+          ({ value }) => {
+            return value || 'should be hidden from API';
+          },
+        ],
+      },
     },
   ],
 };

demo/collections/Hooks.ts

@@ -1,8 +1,10 @@
-/* eslint-disable no-param-reassign */
+/* eslint-disable no-param-reassign, no-console */
+// If importing outside of demo project, should import CollectionAfterReadHook, CollectionBeforeChangeHook, etc
+import { AfterChangeHook, AfterDeleteHook, AfterReadHook, BeforeChangeHook, BeforeDeleteHook, BeforeReadHook, CollectionConfig } from '../../src/collections/config/types';
+import { FieldHook } from '../../src/fields/config/types';
+import { Hook } from '../payload-types';
 
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
-
-const Hooks: PayloadCollectionConfig = {
+const Hooks: CollectionConfig = {
   slug: 'hooks',
   labels: {
     singular: 'Hook',
@@ -19,51 +21,52 @@ const Hooks: PayloadCollectionConfig = {
   },
   hooks: {
     beforeRead: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'beforeRead') {
           console.log('before reading Hooks document');
         }
-      },
+      }) as BeforeReadHook<Hook>,
     ],
     beforeChange: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'beforeChange') {
           operation.data.description += '-beforeChangeSuffix';
         }
         return operation.data;
-      },
+      }) as BeforeChangeHook<Hook>,
     ],
     beforeDelete: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'beforeDelete') {
           // TODO: Find a better hook operation to assert against in tests
           operation.req.headers.hook = 'afterDelete';
         }
-      },
+      }) as BeforeDeleteHook,
     ],
     afterRead: [
-      (operation) => {
-        const { doc } = operation;
+      ((operation) => {
+        const { doc, findMany } = operation;
         doc.afterReadHook = true;
+        doc.findMany = findMany;
 
         return doc;
-      },
+      }) as AfterReadHook<Hook & { afterReadHook: boolean, findMany: boolean }>,
     ],
     afterChange: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'afterChange') {
           operation.doc.afterChangeHook = true;
         }
         return operation.doc;
-      },
+      }) as AfterChangeHook<Hook & { afterChangeHook: boolean }>,
     ],
     afterDelete: [
-      (operation) => {
+      ((operation) => {
         if (operation.req.headers.hook === 'afterDelete') {
           operation.doc.afterDeleteHook = true;
         }
         return operation.doc;
-      },
+      }) as AfterDeleteHook,
     ],
   },
   fields: [
@@ -77,7 +80,7 @@ const Hooks: PayloadCollectionConfig = {
       localized: true,
       hooks: {
         afterRead: [
-          ({ value }) => (value ? value.toUpperCase() : null),
+          ({ value }) => (value ? value.toUpperCase() : null) as FieldHook<Hook, 'title'>,
         ],
       },
     },

demo/collections/Images.ts

@@ -0,0 +1,22 @@
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const Images: CollectionConfig = {
+  slug: 'images',
+  admin: {
+    description: 'Used to test upload relationship queries',
+  },
+  labels: {
+    singular: 'Image',
+    plural: 'Images',
+  },
+  fields: [
+    {
+      name: 'upload',
+      type: 'upload',
+      relationTo: 'media',
+    },
+  ],
+  timestamps: true,
+};
+
+export default Images;

demo/collections/LocalOperations.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const LocalOperations: PayloadCollectionConfig = {
+const LocalOperations: CollectionConfig = {
   slug: 'local-operations',
   labels: {
     singular: 'Local Operation',
@@ -15,7 +15,7 @@ const LocalOperations: PayloadCollectionConfig = {
         });
 
         const blocksGlobal = await req.payload.findGlobal({
-          global: 'blocks-global',
+          slug: 'blocks-global',
         });
 
         formattedData.localizedPosts = localizedPosts;

demo/collections/Localized.ts

@@ -1,6 +1,15 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
+import { PayloadRequest } from '../../src/express/types';
 import { Block } from '../../src/fields/config/types';
 
+const validateLocalizationTransform = (hook: string, value, req: PayloadRequest) => {
+  if (req.locale !== 'all' && value !== undefined && typeof value !== 'string' && value !== null) {
+    console.error(hook, value);
+    throw new Error('Locale transformation should happen before hook is called');
+  }
+  return value;
+};
+
 const RichTextBlock: Block = {
   slug: 'richTextBlock',
   labels: {
@@ -12,11 +21,14 @@ const RichTextBlock: Block = {
       name: 'content',
       localized: true,
       type: 'richText',
+      admin: {
+        hideGutter: true,
+      },
     },
   ],
 };
 
-const LocalizedPosts: PayloadCollectionConfig = {
+const LocalizedPosts: CollectionConfig = {
   slug: 'localized-posts',
   labels: {
     singular: 'Localized Post',
@@ -43,6 +55,12 @@ const LocalizedPosts: PayloadCollectionConfig = {
       required: true,
       unique: true,
       localized: true,
+      hooks: {
+        beforeValidate: [({ value, req }) => validateLocalizationTransform('beforeValidate', value, req)],
+        beforeChange: [({ value, req }) => validateLocalizationTransform('beforeChange', value, req)],
+        afterChange: [({ value, req }) => validateLocalizationTransform('afterChange', value, req)],
+        afterRead: [({ value, req }) => validateLocalizationTransform('afterRead', value, req)],
+      },
     },
     {
       name: 'summary',
@@ -66,7 +84,6 @@ const LocalizedPosts: PayloadCollectionConfig = {
       name: 'priority',
       label: 'Priority',
       type: 'number',
-      required: true,
       localized: true,
     },
     {
@@ -80,6 +97,11 @@ const LocalizedPosts: PayloadCollectionConfig = {
           name: 'text',
           label: 'Text',
         },
+        {
+          type: 'text',
+          name: 'demoHiddenField',
+          hidden: true,
+        },
       ],
     },
     {

demo/collections/LocalizedArray.ts

@@ -1,4 +1,4 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import { FieldAccess } from '../../src/fields/config/types';
 import checkRole from '../access/checkRole';
 
@@ -7,12 +7,12 @@ const PublicReadabilityAccess: FieldAccess = ({ req: { user }, siblingData }) =>
     return true;
   }
 
-  if (siblingData.allowPublicReadability) return true;
+  if (siblingData?.allowPublicReadability) return true;
 
   return false;
 };
 
-const LocalizedArrays: PayloadCollectionConfig = {
+const LocalizedArrays: CollectionConfig = {
   slug: 'localized-arrays',
   labels: {
     singular: 'Localized Array',
@@ -24,7 +24,7 @@ const LocalizedArrays: PayloadCollectionConfig = {
   fields: [
     {
       type: 'array',
-      label: 'Array',
+      label: false,
       name: 'array',
       localized: true,
       required: true,

demo/collections/Media.ts

@@ -1,6 +1,17 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig, BeforeChangeHook } from '../../src/collections/config/types';
 
-const Media: PayloadCollectionConfig = {
+const checkForUploadSizesHook: BeforeChangeHook = ({ req: { payloadUploadSizes }, data }) => {
+  if (typeof payloadUploadSizes === 'object') {
+    return {
+      ...data,
+      foundUploadSizes: true,
+    };
+  }
+
+  return data;
+};
+
+const Media: CollectionConfig = {
   slug: 'media',
   labels: {
     singular: 'Media',
@@ -11,12 +22,24 @@ const Media: PayloadCollectionConfig = {
   },
   admin: {
     enableRichTextRelationship: true,
+    description: 'No selfies please',
+  },
+  hooks: {
+    beforeChange: [
+      checkForUploadSizesHook,
+    ],
   },
   upload: {
     staticURL: '/media',
     staticDir: './media',
     adminThumbnail: ({ doc }) => `/media/${doc.filename}`,
     imageSizes: [
+      {
+        name: 'maintainedAspectRatio',
+        width: 1024,
+        height: null,
+        crop: 'center',
+      },
       {
         name: 'tablet',
         width: 640,
@@ -35,6 +58,9 @@ const Media: PayloadCollectionConfig = {
         height: 16,
       },
     ],
+    staticOptions: {
+      maxAge: 21600000, // 6 hours in milliseconds
+    },
   },
   fields: [
     {
@@ -44,6 +70,10 @@ const Media: PayloadCollectionConfig = {
       required: true,
       localized: true,
     },
+    {
+      name: 'foundUploadSizes',
+      type: 'checkbox',
+    },
   ],
   timestamps: true,
 };

demo/collections/NestedArrays.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const NestedArray: PayloadCollectionConfig = {
+const NestedArray: CollectionConfig = {
   slug: 'nested-arrays',
   labels: {
     singular: 'Nested Array',

demo/collections/Preview.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Preview: PayloadCollectionConfig = {
+const Preview: CollectionConfig = {
   slug: 'previewable-post',
   labels: {
     singular: 'Previewable Post',
@@ -8,9 +8,13 @@ const Preview: PayloadCollectionConfig = {
   },
   admin: {
     useAsTitle: 'title',
-    preview: (doc, token) => {
-      if (doc.title) {
-        return `http://localhost:3000/previewable-posts/${doc.title}?preview=true&token=${token}`;
+    preview: async (doc, { token }) => {
+      const { title } = doc;
+      if (title) {
+        const mockAsyncReq = await fetch(`http://localhost:3000/api/previewable-post?depth=0`)
+        const mockJSON = await mockAsyncReq.json();
+        const mockParam = mockJSON?.docs?.[0]?.title || '';
+        return `http://localhost:3000/previewable-posts/${title}?preview=true&token=${token}&mockParam=${mockParam}`;
       }
 
       return null;

demo/collections/PublicUsers.ts

@@ -1,9 +1,9 @@
 import checkRole from '../access/checkRole';
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
 const access = ({ req: { user } }) => checkRole(['admin'], user);
 
-const PublicUsers: PayloadCollectionConfig = {
+const PublicUsers: CollectionConfig = {
   slug: 'public-users',
   labels: {
     singular: 'Public User',

demo/collections/RelationshipA.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const RelationshipA: PayloadCollectionConfig = {
+const RelationshipA: CollectionConfig = {
   slug: 'relationship-a',
   access: {
     read: () => true,
@@ -15,7 +15,6 @@ const RelationshipA: PayloadCollectionConfig = {
       label: 'Post',
       type: 'relationship',
       relationTo: 'relationship-b',
-      localized: true,
     },
     {
       name: 'LocalizedPost',
@@ -29,7 +28,7 @@ const RelationshipA: PayloadCollectionConfig = {
       name: 'postLocalizedMultiple',
       label: 'Localized Post Multiple',
       type: 'relationship',
-      relationTo: ['localized-posts', 'all-fields'],
+      relationTo: ['localized-posts', 'all-fields', 'custom-id'],
       hasMany: true,
       localized: true,
     },
@@ -41,6 +40,45 @@ const RelationshipA: PayloadCollectionConfig = {
       localized: true,
       hasMany: false,
     },
+    {
+      name: 'postMaxDepth',
+      maxDepth: 0,
+      label: 'Post With MaxDepth',
+      type: 'relationship',
+      relationTo: 'relationship-b',
+      hasMany: false,
+    },
+    {
+      name: 'customID',
+      label: 'CustomID Relation',
+      type: 'relationship',
+      relationTo: 'custom-id',
+      hasMany: true,
+      localized: true,
+    },
+    {
+      name: 'filterRelationship',
+      type: 'relationship',
+      relationTo: 'relationship-b',
+      filterOptions: {
+        disableRelation: {
+          not_equals: true,
+        },
+      },
+    },
+    {
+      name: 'files',
+      type: 'upload',
+      relationTo: 'files',
+      filterOptions: {
+        type: { equals: 'Type 2' },
+      },
+    },
+    {
+      name: 'demoHiddenField',
+      type: 'text',
+      hidden: true,
+    },
   ],
   timestamps: true,
 };