chore(release): v0.15.6

* feat: WIP extended validation function arguments

* chore: optimizes validation extended args

* chore: more consistently passes validation args

* chore: removes field from form state

* chore: passing tests

* fix: default point validation allows not required and some edge cases

* chore: ensures default validate functions receive field config

* chore: demo validation with sibling data

* chore: optimize getDatabByPath and getSiblingData

* chore: adds tests to validate extra arg options

* docs: add validation arguments

* chore: export default field validation

* chore: top level getSiblingData

* fix: #495, avoids appending version to id queries

* chore: revises when field validation is run

* chore: restore original admin field validation

Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>

.eslintrc.js

@@ -28,27 +28,37 @@ 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,
           {
             ignore: [
-              'payload/config',
+              'payload-config',
             ],
           },
         ],
-      }
+      },
+    },
+    {
+      files: ['*.spec.ts'],
+      rules: {
+        '@typescript-eslint/no-use-before-define': 'off',
+      },
     },
   ],
   rules: {
-    "import/no-extraneous-dependencies": ["error", { "packageDir": "./" }],
+    'no-sparse-arrays': 'off',
+    '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-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/BUG_REPORT.md

@@ -0,0 +1,33 @@
+---
+name: Bug Report
+about: Create a bug report for Payload
+labels: 'bug'
+---
+
+# Bug Report
+
+<!--- Provide a general summary of the issue in the Title above -->
+
+## Expected Behavior
+
+<!--- Tell us what should happen -->
+
+## Current Behavior
+
+<!--- Tell us what happens instead of the expected behavior -->
+
+## Possible Solution
+
+<!--- Not obligatory, but suggest a fix/reason for the bug, -->
+
+## Steps to Reproduce
+<!--- Steps to reproduce this bug. Include any code, if relevant -->
+1.
+2.
+3.
+4.
+
+## Detailed Description
+
+<!--- Provide any other additional details -->
+<!--- Payload version, browser, etc -->

.github/ISSUE_TEMPLATE/DOCUMENTATION_ISSUE.md

@@ -0,0 +1,13 @@
+---
+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

@@ -0,0 +1,11 @@
+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
+  - 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

@@ -0,0 +1,20 @@
+## 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 document in this repository
+
+## Type of change
+
+<!-- Please delete options that are not relevant. -->
+
+- [ ] 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)
+- [ ] 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/workflows/tests.yml

@@ -1,13 +1,13 @@
-name: Node.js CI
+name: build
 
 on: [push]
 
 jobs:
-  build:
+  build_yarn:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [12.x, 14.x, 16.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -30,7 +30,35 @@ jobs:
     - run: yarn
       env:
         NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+    - run: yarn build
     - run: yarn test:client
     - run: yarn test:int # In-memory db + api tests
       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

@@ -228,3 +228,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"
+    }
+  }
+}

.release-it.json

@@ -0,0 +1,21 @@
+{
+  "git": {
+    "commitMessage": "chore(release): v${version}",
+    "requireCleanWorkingDir": true
+  },
+  "github": {
+    "release": true
+  },
+  "npm": {
+    "skipChecks": true
+  },
+  "hooks": {
+    "before:init": ["yarn", "yarn clean", "yarn test"]
+  },
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular",
+      "infile": "CHANGELOG.md"
+    }
+  }
+}

.vscode/launch.json

@@ -14,10 +14,11 @@
         "--runInBand"
       ],
       "env": {
-        "PAYLOAD_CONFIG_PATH": "demo/payload.config.js"
+        "PAYLOAD_CONFIG_PATH": "demo/payload.config.ts"
       },
       "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,21 +1,77 @@
-# Payload
+<h1 align="center">Payload</h1>
+<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">
+  </a>
+  <a href="https://www.npmjs.com/package/payload">
+    <img alt="npm" src="https://img.shields.io/npm/v/payload">
+  </a>
 
-Headless CMS and application framework
+  <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">
+  </a>
+</p>
 
-*TODO: More on why to use it and some features*
+<a href="https://payloadcms.com">
+  <img src="https://payloadcms.com/images/og-image.jpg" alt="Payload headless CMS Admin panel built with React" />
+</a>
+
+### Quick Start
+
+```
+npx create-payload-app
+```
+
+Alternatively, it only takes about five minutes to [create an app from scratch](https://payloadcms.com/docs/getting-started/installation#from-scratch).
+
+### 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.
+
+### Features
+
+- [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)
+- [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
+
+### Code-first
+
+If you know JavaScript, you know Payload. Payload is a _code-first_ CMS, which allows us to do a lot of things right:
+
+- Payload gives you everything you need, but then steps back and lets you build what you want in JavaScript or TypeScript - with no unnecessary complexity brought by GUIs. You'll understand how your CMS works, because you will have written it exactly how you want it.
+- Bring your own Express server and do whatever you need on top of Payload. Payload doesn't impose anything on you or your app.
+- Completely control the Admin panel by using your own React components. Swap out fields or even entire views with ease.
+- Use your data however and wherever you need thanks to auto-generated, yet fully extensible REST, GraphQL and Local Node APIs.
+
+### Free forever for personal use and small projects
+
+Payload is 100% free for personal projects or small use cases where only one admin user is required. You can also get started without an account whatsoever while running on `localhost`.
 
 ## Installation
 
-`yarn add @payloadcms/payload` or `npm install @payloadcms/payload`
+Before beginning to work with Payload, make sure you have all of the [required software](https://payloadcms.com/docs/getting-started/installation).
 
-## Usage
+From there, the easiest way to get started with Payload is to use the `create-payload-app` package:
 
-*TODO: Show basic usage and link to docs*
+```
+npx create-payload-app
+```
 
-## Contributing
-
-*TODO: Create Contributing.md*
+Alternatively, it only takes about five minutes to [write out your own app from scratch](https://payloadcms.com/docs/getting-started/installation#from-scratch).
 
 ## License
 
-*TODO: Create License.md*
+Find the Payload license [here](https://github.com/payloadcms/payload/blob/master/license.md).

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.js

@@ -1,19 +0,0 @@
-export {
-  useForm,
-  useWatchForm,
-  useFormSubmitted,
-  useFormProcessing,
-  useFormModified,
-} from '../src/admin/components/forms/Form/context';
-
-export { default as useFieldType } from '../src/admin/components/forms/useFieldType';
-
-export { default as Form } from '../src/admin/components/forms/Form';
-
-export { default as Text } from '../src/admin/components/forms/field-types/Text';
-export { default as Group } from '../src/admin/components/forms/field-types/Group';
-export { default as Select } from '../src/admin/components/forms/field-types/Select';
-export { default as Checkbox } from '../src/admin/components/forms/field-types/Checkbox';
-export { default as Submit } from '../src/admin/components/forms/Submit';
-
-export { default as reduceFieldsToValues } from '../src/admin/components/forms/Form/reduceFieldsToValues';

components/forms.ts

@@ -0,0 +1,28 @@
+export {
+  useForm,
+  useWatchForm,
+  useFormSubmitted,
+  useFormProcessing,
+  useFormModified,
+} from '../dist/admin/components/forms/Form/context';
+
+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/rich-text.js

@@ -1,3 +0,0 @@
-export { default as LeafButton } from '../src/admin/components/forms/field-types/RichText/leaves/Button';
-export { default as ElementButton } from '../src/admin/components/forms/field-types/RichText/elements/Button';
-export { default as toggleElement } from '../src/admin/components/forms/field-types/RichText/elements/toggle';

components/rich-text.ts

@@ -0,0 +1,3 @@
+export { default as LeafButton } from '../dist/admin/components/forms/field-types/RichText/leaves/Button';
+export { default as ElementButton } from '../dist/admin/components/forms/field-types/RichText/elements/Button';
+export { default as toggleElement } from '../dist/admin/components/forms/field-types/RichText/elements/toggle';

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 '../src/admin/components/views/collections/Edit/Default';
-export { default as List } from '../src/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';

contributing.md

@@ -0,0 +1,33 @@
+# Contributing to Payload CMS
+
+Below you'll find a set of guidelines for how to contribute to Payload CMS.
+
+## Payload is proprietary software
+
+Even though you can read Payload's source code, it's technically not "open source". Payload requires an active license to be used in all production purposes. That said, we do not expect PRs from the public, but we still welcome pull requests of any kind.
+
+## 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. If your proposed feature is accepted by our team and is significant enough, pending our discretion, we'd be happy to hook you up with a pro-bono license.
+
+To help us work on new features, you can reach out to our Development team at [`dev@payloadcms.com`](mailto:dev@payloadcms.com). Be as complete and descriptive as possible regarding your vision and we'll go from there!
+
+## 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.
+
+By opening a Pull Request against Payload's codebase, you automatically give the entirety of the contribution within your PR to Payload CMS, LLC and retain no personal ownership whatsoever afterward. For more information, please read the full [Payload license](https://github.com/payloadcms/payload/blob/master/license.md).

demo/blocks/Quote.ts

@@ -1,20 +1,13 @@
 import { Block } from '../../src/fields/config/types';
 
 const Quote: Block = {
-  blockImage: '/static/assets/images/generic-block-image.svg',
+  imageURL: '/static/assets/images/generic-block-image.svg',
   slug: 'quote',
   labels: {
     singular: 'Quote',
     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

@@ -1,13 +1,17 @@
 import React, { Fragment, useCallback } from 'react';
-import PropTypes from 'prop-types';
 import { Modal, useModal } from '@faceless-ui/modal';
 import { Transforms } from 'slate';
-import { useSlate } from 'slate-react';
+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';
 
@@ -17,7 +21,7 @@ const initialFormData = {
   style: 'primary',
 };
 
-const insertButton = (editor, { href, label, style, newTab = false }) => {
+const insertButton = (editor, { href, label, style, newTab = false }: any) => {
   const text = { text: ' ' };
   const button = {
     type: 'button',
@@ -32,10 +36,20 @@ const insertButton = (editor, { href, label, style, newTab = false }) => {
 
   const nodes = [button, { children: [{ text: '' }] }];
 
+  if (editor.blurSelection) {
+    Transforms.select(editor, editor.blurSelection);
+  }
+
   Transforms.insertNodes(editor, nodes);
+
+  const currentPath = editor.selection.anchor.path[0];
+  const newSelection = { anchor: { path: [currentPath + 1, 0], offset: 0 }, focus: { path: [currentPath + 1, 0], offset: 0 } };
+
+  Transforms.select(editor, newSelection);
+  ReactEditor.focus(editor);
 };
 
-const ToolbarButton: React.FC = ({ path }) => {
+const ToolbarButton: React.FC<{path: string}> = ({ path }) => {
   const { open, closeAll } = useModal();
   const editor = useSlate();
 
@@ -112,8 +126,4 @@ const ToolbarButton: React.FC = ({ path }) => {
   );
 };
 
-ToolbarButton.propTypes = {
-  path: PropTypes.string.isRequired,
-};
-
 export default ToolbarButton;

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',
@@ -29,7 +29,7 @@ const Admin: PayloadCollectionConfig = {
     depth: 0,
     cookies: {
       secure: false,
-      sameSite: 'Lax',
+      sameSite: 'lax',
       domain: undefined,
     },
   },
@@ -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',
-  // },
+  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.value}?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',

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',

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,51 @@ 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.req.body.description += '-beforeChangeSuffix';
+          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) => {
+      ((operation) => {
         const { doc } = operation;
         doc.afterReadHook = true;
 
         return doc;
-      },
+      }) as AfterReadHook<Hook & { afterReadHook: 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 +79,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,34 @@
-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 LocalizedPosts: PayloadCollectionConfig = {
+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: {
+    singular: 'Rich Text Block',
+    plural: 'Rich Text Blocks',
+  },
+  fields: [
+    {
+      name: 'content',
+      localized: true,
+      type: 'richText',
+      admin: {
+        hideGutter: true,
+      },
+    },
+  ],
+};
+
+const LocalizedPosts: CollectionConfig = {
   slug: 'localized-posts',
   labels: {
     singular: 'Localized Post',
@@ -27,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',
@@ -41,13 +75,70 @@ const LocalizedPosts: PayloadCollectionConfig = {
       required: true,
       localized: true,
     },
+    {
+      type: 'richText',
+      name: 'richText',
+      label: 'Rich Text',
+    },
     {
       name: 'priority',
       label: 'Priority',
       type: 'number',
-      required: true,
       localized: true,
     },
+    {
+      name: 'localizedGroup',
+      label: 'Localized Group',
+      type: 'group',
+      localized: true,
+      fields: [
+        {
+          type: 'text',
+          name: 'text',
+          label: 'Text',
+        },
+        {
+          type: 'text',
+          name: 'demoHiddenField',
+          hidden: true,
+        },
+      ],
+    },
+    {
+      name: 'nonLocalizedGroup',
+      label: 'Non-Localized Group',
+      type: 'group',
+      fields: [
+        {
+          type: 'text',
+          name: 'text',
+          label: 'Text',
+          localized: true,
+        },
+      ],
+    },
+    {
+      type: 'array',
+      label: 'Non-Localized Array',
+      name: 'nonLocalizedArray',
+      maxRows: 3,
+      fields: [
+        {
+          type: 'text',
+          name: 'localizedEmbeddedText',
+          label: 'Localized Embedded Text',
+          localized: true,
+        },
+      ],
+    },
+    {
+      label: 'Blocks',
+      name: 'richTextBlocks',
+      type: 'blocks',
+      blocks: [
+        RichTextBlock,
+      ],
+    },
   ],
   timestamps: true,
 };

demo/collections/LocalizedArray.ts

@@ -1,6 +1,18 @@
-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';
 
-const LocalizedArrays: PayloadCollectionConfig = {
+const PublicReadabilityAccess: FieldAccess = ({ req: { user }, siblingData }) => {
+  if (checkRole(['admin'], user)) {
+    return true;
+  }
+
+  if (siblingData?.allowPublicReadability) return true;
+
+  return false;
+};
+
+const LocalizedArrays: CollectionConfig = {
   slug: 'localized-arrays',
   labels: {
     singular: 'Localized Array',
@@ -12,7 +24,7 @@ const LocalizedArrays: PayloadCollectionConfig = {
   fields: [
     {
       type: 'array',
-      label: 'Array',
+      label: false,
       name: 'array',
       localized: true,
       required: true,
@@ -22,16 +34,31 @@ const LocalizedArrays: PayloadCollectionConfig = {
         {
           type: 'row',
           fields: [
+            {
+              name: 'allowPublicReadability',
+              label: 'Allow Public Readability',
+              type: 'checkbox',
+            },
             {
               name: 'arrayText1',
               label: 'Array Text 1',
               type: 'text',
               required: true,
-            }, {
+              admin: {
+                width: '50%',
+              },
+              access: {
+                read: PublicReadabilityAccess,
+              },
+            },
+            {
               name: 'arrayText2',
               label: 'Array Text 2',
               type: 'text',
               required: true,
+              admin: {
+                width: '50%',
+              },
             },
           ],
         },

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: 'mobile',
+    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',
@@ -57,7 +57,6 @@ const NestedArray: PayloadCollectionConfig = {
                   name: 'grandchildIdentifier',
                   label: 'Grandchild Identifier',
                   type: 'text',
-                  required: true,
                 },
               ],
             },

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.value}?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',
@@ -38,7 +38,7 @@ const PublicUsers: PayloadCollectionConfig = {
     lockTime: 600 * 1000, // lock time in ms
     cookies: {
       secure: process.env.NODE_ENV === 'production',
-      sameSite: 'Lax',
+      sameSite: 'lax',
       domain: undefined,
     },
   },

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,24 +15,70 @@ const RelationshipA: PayloadCollectionConfig = {
       label: 'Post',
       type: 'relationship',
       relationTo: 'relationship-b',
+    },
+    {
+      name: 'LocalizedPost',
+      label: 'Localized Post',
+      type: 'relationship',
+      relationTo: 'localized-posts',
+      hasMany: true,
       localized: true,
     },
-    // {
-    //   name: 'LocalizedPost',
-    //   label: 'Localized Post',
-    //   type: 'relationship',
-    //   relationTo: 'localized-posts',
-    //   hasMany: true,
-    //   localized: true,
-    // },
     {
       name: 'postLocalizedMultiple',
       label: 'Localized Post Multiple',
       type: 'relationship',
-      relationTo: ['localized-posts', 'all-fields'],
+      relationTo: ['localized-posts', 'all-fields', 'custom-id'],
       hasMany: true,
       localized: true,
     },
+    {
+      name: 'postManyRelationships',
+      label: 'Post Many Relationships',
+      type: 'relationship',
+      relationTo: ['relationship-b'],
+      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,
 };

demo/collections/RelationshipB.ts

@@ -1,15 +1,29 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const RelationshipB: PayloadCollectionConfig = {
+const RelationshipB: CollectionConfig = {
   slug: 'relationship-b',
   access: {
     read: () => true,
   },
+  admin: {
+    useAsTitle: 'title',
+  },
   labels: {
     singular: 'Relationship B',
     plural: 'Relationship B',
   },
   fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
+    {
+      name: 'disableRelation', // used on RelationshipA.filterRelationship field
+      type: 'checkbox',
+      admin: {
+        position: 'sidebar',
+      },
+    },
     {
       name: 'post',
       label: 'Post',
@@ -18,6 +32,31 @@ const RelationshipB: PayloadCollectionConfig = {
       localized: false,
       hasMany: true,
     },
+    {
+      name: 'postManyRelationships',
+      label: 'Post Many Relationships',
+      type: 'relationship',
+      relationTo: ['relationship-a', 'media'],
+      localized: true,
+      hasMany: false,
+    },
+    {
+      name: 'localizedPosts',
+      label: 'Localized Posts',
+      type: 'relationship',
+      hasMany: true,
+      relationTo: ['localized-posts', 'previewable-post'],
+    },
+    {
+      name: 'nonLocalizedRelationToMany',
+      type: 'relationship',
+      relationTo: ['localized-posts', 'relationship-a'],
+    },
+    {
+      name: 'strictAccess',
+      type: 'relationship',
+      relationTo: 'strict-access',
+    },
   ],
   timestamps: true,
 };

demo/collections/RichText.ts

@@ -1,19 +1,93 @@
 import Button from '../client/components/richText/elements/Button';
 import PurpleBackground from '../client/components/richText/leaves/PurpleBackground';
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const RichText: PayloadCollectionConfig = {
+const RichText: CollectionConfig = {
   slug: 'rich-text',
   labels: {
     singular: 'Rich Text',
     plural: 'Rich Texts',
   },
+  access: {
+    read: ({ req }) => {
+      if (req.user) return true;
+
+      return {
+        _status: {
+          equals: 'published',
+        },
+      };
+    },
+  },
+  versions: {
+    drafts: {
+      autosave: false,
+    },
+  },
+  admin: {
+    preview: () => 'https://payloadcms.com',
+    useAsTitle: 'title',
+  },
   fields: [
+    {
+      name: 'title',
+      type: 'text',
+    },
     {
       name: 'defaultRichText',
       type: 'richText',
       label: 'Default Rich Text',
       required: true,
+      admin: {
+        upload: {
+          collections: {
+            media: {
+              fields: [
+                {
+                  type: 'richText',
+                  name: 'caption',
+                  label: 'Caption',
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      type: 'relationship',
+                      relationTo: 'admins',
+                      name: 'linkToAdmin',
+                      label: 'Link to Admin',
+                    },
+                    {
+                      type: 'select',
+                      name: 'imageAlignment',
+                      label: 'Image Alignment',
+                      options: [
+                        {
+                          label: 'Left',
+                          value: 'left',
+                        },
+                        {
+                          label: 'Center',
+                          value: 'center',
+                        },
+                        {
+                          label: 'Right',
+                          value: 'right',
+                        },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  type: 'checkbox',
+                  name: 'wrapText',
+                  label: 'Wrap Text',
+                },
+              ],
+            },
+          },
+        },
+      },
     },
     {
       name: 'customRichText',

demo/collections/Select.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Select: PayloadCollectionConfig = {
+const Select: CollectionConfig = {
   slug: 'select',
   labels: {
     singular: 'Select',
@@ -8,7 +8,7 @@ const Select: PayloadCollectionConfig = {
   },
   fields: [
     {
-      name: 'Select',
+      name: 'select',
       type: 'select',
       options: [{
         value: 'one',
@@ -24,7 +24,45 @@ const Select: PayloadCollectionConfig = {
       required: true,
     },
     {
-      name: 'Radio',
+      name: 'selectHasMany',
+      type: 'select',
+      options: [{
+        value: 'one',
+        label: 'One',
+      }, {
+        value: 'two',
+        label: 'Two',
+      }, {
+        value: 'three',
+        label: 'Three',
+      }],
+      label: 'Select HasMany',
+      required: true,
+      hasMany: true,
+    },
+    {
+      name: 'selectJustStrings',
+      type: 'select',
+      options: ['blue', 'green', 'yellow'],
+      label: 'Select Just Strings',
+      required: true,
+      hasMany: true,
+    },
+    {
+      name: 'selectWithEmptyString',
+      type: 'select',
+      defaultValue: '',
+      options: [{
+        value: '',
+        label: 'None',
+      }, {
+        value: 'option',
+        label: 'Option',
+      }],
+      required: true,
+    },
+    {
+      name: 'radio',
       type: 'radio',
       options: [{
         value: 'one',
@@ -39,6 +77,22 @@ const Select: PayloadCollectionConfig = {
       label: 'Choose From',
       required: true,
     },
+    {
+      name: 'radioWithEmptyString',
+      type: 'radio',
+      defaultValue: '',
+      options: [{
+        value: '',
+        label: 'None',
+      }, {
+        value: 'one',
+        label: 'One',
+      }, {
+        value: 'two',
+        label: 'Two',
+      }],
+      required: true,
+    },
   ],
 };
 

demo/collections/StrictAccess.ts

@@ -1,14 +1,14 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 import checkRole from '../access/checkRole';
 
-const StrictAccess: PayloadCollectionConfig = {
+const StrictAccess: CollectionConfig = {
   slug: 'strict-access',
   labels: {
     singular: 'Strict Access',
     plural: 'Strict Access',
   },
   admin: {
-    useAsTitle: 'email',
+    useAsTitle: 'address',
   },
   access: {
     create: () => true,