chore(release): v0.10.10

fix: allow debug in payload config

.eslintrc.js

@@ -42,7 +42,8 @@ module.exports = {
     },
   ],
   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',

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

.github/PULL_REQUEST_TEMPLATE.md

@@ -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

@@ -3,11 +3,11 @@ 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, 15.x, 16.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -35,3 +35,30 @@ jobs:
     - 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 }}

.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>/**"

README.md

@@ -14,10 +14,9 @@
 </p>
 
 <a href="https://payloadcms.com">
-  <img src="https://payloadcms.com/images/admin.jpg" alt="Payload headless CMS Admin panel built with React" />
+  <img src="https://payloadcms.com/images/og-image.jpg" alt="Payload headless CMS Admin panel built with React" />
 </a>
 
-
 ### Quick Start
 
 ```
@@ -52,14 +51,14 @@ Check out the [Payload website](https://payloadcms.com/docs/getting-started/what
 
 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 wrote it exactly how you want it.
+- 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 for development use
+### Free forever for personal use and small projects
 
-Payload is 100% free for use on local environments such as `localhost` and staging sites such as `staging.mycoolsite.com`. When it's time to go to production, Payload charges a low and flat fee that doesn't change whatsoever based on your usage.
+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
 

babel.js

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

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

@@ -15,5 +15,6 @@ export { default as Group } from '../dist/admin/components/forms/field-types/Gro
 export { default as Select } from '../dist/admin/components/forms/field-types/Select';
 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';

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/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/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/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,8 +1,7 @@
 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 X from '../../../../../../../src/admin/components/icons/X';
@@ -17,7 +16,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 +31,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 +121,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/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,11 +1,12 @@
-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';
 
-const AllFields: PayloadCollectionConfig = {
+const AllFields: CollectionConfig = {
   slug: 'all-fields',
   labels: {
     singular: 'All Fields',
@@ -13,13 +14,16 @@ const AllFields: PayloadCollectionConfig = {
   },
   admin: {
     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,
   },
   access: {
     read: () => true,
@@ -38,11 +42,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 +111,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',
@@ -234,6 +251,9 @@ const AllFields: PayloadCollectionConfig = {
       label: 'Relationship to One Collection',
       name: 'relationship',
       relationTo: 'conditions',
+      admin: {
+        description: 'Relates to description',
+      },
     },
     {
       type: 'relationship',
@@ -252,24 +272,8 @@ const AllFields: PayloadCollectionConfig = {
       type: 'textarea',
       label: 'Textarea',
       name: 'textarea',
-    },
-    {
-      name: 'slug',
-      type: 'text',
-      label: 'Slug',
       admin: {
-        position: 'sidebar',
-      },
-      localized: true,
-      unique: true,
-      required: true,
-    },
-    {
-      name: 'checkbox',
-      type: 'checkbox',
-      label: 'Checkbox',
-      admin: {
-        position: 'sidebar',
+        description: 'Hello textarea description',
       },
     },
     {
@@ -298,6 +302,36 @@ const AllFields: PayloadCollectionConfig = {
         ],
       },
     },
+    {
+      name: 'slug',
+      type: 'text',
+      label: 'Slug',
+      admin: {
+        position: 'sidebar',
+      },
+      localized: true,
+      unique: true,
+      required: true,
+    },
+    {
+      name: 'checkbox',
+      type: 'checkbox',
+      label: 'Checkbox',
+      admin: {
+        position: 'sidebar',
+      },
+    },
+    {
+      name: 'dateFieldExample',
+      label: 'Day and Time',
+      type: 'date',
+      admin: {
+        position: 'sidebar',
+        date: {
+          timeIntervals: 30,
+        },
+      },
+    },
   ],
   timestamps: true,
 };

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

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/index.ts

@@ -1,4 +1,4 @@
-import { PayloadCollectionConfig } from '../../../src/collections/config/types';
+import { CollectionConfig } from '../../../src/collections/config/types';
 import DescriptionField from './components/fields/Description/Field';
 import DescriptionCell from './components/fields/Description/Cell';
 import DescriptionFilter from './components/fields/Description/Filter';
@@ -7,8 +7,9 @@ import GroupField from './components/fields/Group/Field';
 import NestedGroupField from './components/fields/NestedGroupCustomField/Field';
 import NestedText1Field from './components/fields/NestedText1/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',
@@ -38,6 +39,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,81 @@
+/* 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) => {
+        // eslint-disable-next-line no-param-reassign,operator-assignment
+        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)],
+      },
+    },
+  ],
+};
+
+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,8 @@
 /* eslint-disable no-param-reassign */
 
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Hooks: PayloadCollectionConfig = {
+const Hooks: CollectionConfig = {
   slug: 'hooks',
   labels: {
     singular: 'Hook',
@@ -28,7 +28,7 @@ const Hooks: PayloadCollectionConfig = {
     beforeChange: [
       (operation) => {
         if (operation.req.headers.hook === 'beforeChange') {
-          operation.req.body.description += '-beforeChangeSuffix';
+          operation.data.description += '-beforeChangeSuffix';
         }
         return operation.data;
       },

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') {
+    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,6 +75,11 @@ const LocalizedPosts: PayloadCollectionConfig = {
       required: true,
       localized: true,
     },
+    {
+      type: 'richText',
+      name: 'richText',
+      label: 'Rich Text',
+    },
     {
       name: 'priority',
       label: 'Priority',
@@ -48,6 +87,54 @@ const LocalizedPosts: PayloadCollectionConfig = {
       required: true,
       localized: true,
     },
+    {
+      name: 'localizedGroup',
+      label: 'Localized Group',
+      type: 'group',
+      localized: true,
+      fields: [
+        {
+          type: 'text',
+          name: 'text',
+          label: 'Text',
+        },
+      ],
+    },
+    {
+      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,
@@ -44,6 +67,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,10 @@ 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: (doc, { token }) => {
+      const { title } = doc;
+      if (title) {
+        return `http://localhost:3000/previewable-posts/${title}?preview=true&token=${token}`;
       }
 
       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,
@@ -17,19 +17,43 @@ const RelationshipA: PayloadCollectionConfig = {
       relationTo: 'relationship-b',
       localized: true,
     },
-    // {
-    //   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,
     },

demo/collections/RelationshipB.ts

@@ -1,6 +1,6 @@
-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,
@@ -18,6 +18,26 @@ 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: 'strictAccess',
+      type: 'relationship',
+      relationTo: 'strict-access',
+    },
   ],
   timestamps: true,
 };

demo/collections/RichText.ts

@@ -1,13 +1,16 @@
 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: () => true,
+  },
   fields: [
     {
       name: 'defaultRichText',

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',
@@ -23,6 +23,31 @@ const Select: PayloadCollectionConfig = {
       label: 'Select From',
       required: true,
     },
+    {
+      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: 'Radio',
       type: 'radio',

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,

demo/collections/Uniques.ts

@@ -0,0 +1,25 @@
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const Uniques: CollectionConfig = {
+  slug: 'uniques',
+  labels: {
+    singular: 'Unique',
+    plural: 'Uniques',
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      label: 'Title',
+      required: true,
+      unique: true,
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+      label: 'Description',
+    },
+  ],
+};
+
+export default Uniques;

demo/collections/UnstoredMedia.ts

@@ -0,0 +1,35 @@
+import { CollectionConfig } from '../../src/collections/config/types';
+
+const UnstoredMedia: CollectionConfig = {
+  slug: 'unstored-media',
+  labels: {
+    singular: 'Unstored Media',
+    plural: 'Unstored Media',
+  },
+  access: {
+    read: () => true,
+  },
+  upload: {
+    staticURL: '/unstored-media',
+    disableLocalStorage: true,
+    imageSizes: [
+      {
+        name: 'tablet',
+        width: 640,
+        height: 480,
+        crop: 'left top',
+      },
+    ],
+  },
+  fields: [
+    {
+      name: 'alt',
+      label: 'Alt Text',
+      type: 'text',
+      required: true,
+      localized: true,
+    },
+  ],
+};
+
+export default UnstoredMedia;

demo/collections/Validations.ts

@@ -1,6 +1,6 @@
-import { PayloadCollectionConfig } from '../../src/collections/config/types';
+import { CollectionConfig } from '../../src/collections/config/types';
 
-const Validations: PayloadCollectionConfig = {
+const Validations: CollectionConfig = {
   slug: 'validations',
   labels: {
     singular: 'Validation',

demo/customComponents/CollectionDescription/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const CollectionDescription: React.FC = () => (
+  <div>
+    Collection description
+  </div>
+);
+
+export default CollectionDescription;

demo/customComponents/Description/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const CustomDescriptionComponent: React.FC = ({ value }) => (
+  <div>
+    Character count:
+    {' '}
+    { value?.length || 0 }
+  </div>
+);
+
+export default CustomDescriptionComponent;

demo/customComponents/views/Account/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const CustomAccountView: React.FC = () => <div>fake account view</div>;
+
+export default CustomAccountView;

demo/customComponents/views/Dashboard/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const CustomDashboardView: React.FC = () => <div>fake dashboard view</div>;
+
+export default CustomDashboardView;

demo/globals/BlocksGlobal.ts

@@ -1,7 +1,7 @@
 import checkRole from '../access/checkRole';
 import Quote from '../blocks/Quote';
 import CallToAction from '../blocks/CallToAction';
-import { PayloadGlobalConfig } from '../../src/globals/config/types';
+import { GlobalConfig } from '../../src/globals/config/types';
 
 export default {
   slug: 'blocks-global',
@@ -19,4 +19,4 @@ export default {
       localized: true,
     },
   ],
-} as PayloadGlobalConfig;
+} as GlobalConfig;

demo/globals/GlobalWithStrictAccess.ts

@@ -1,4 +1,4 @@
-import { PayloadGlobalConfig } from '../../src/globals/config/types';
+import { GlobalConfig } from '../../src/globals/config/types';
 import checkRole from '../access/checkRole';
 
 export default {
@@ -32,4 +32,4 @@ export default {
       required: true,
     },
   ],
-} as PayloadGlobalConfig;
+} as GlobalConfig;

demo/globals/NavigationArray.ts

@@ -1,13 +1,15 @@
-import { PayloadGlobalConfig } from '../../src/globals/config/types';
+import { GlobalConfig } from '../../src/globals/config/types';
 import checkRole from '../access/checkRole';
 
 export default {
   slug: 'navigation-array',
-  label: 'Navigation Array',
   access: {
     update: ({ req: { user } }) => checkRole(['admin', 'user'], user),
     read: () => true,
   },
+  admin: {
+    description: 'A description for the editor',
+  },
   fields: [
     {
       name: 'array',
@@ -25,4 +27,4 @@ export default {
       }],
     },
   ],
-} as PayloadGlobalConfig;
+} as GlobalConfig;

demo/payload.config.ts

@@ -9,6 +9,7 @@ import Conditions from './collections/Conditions';
 import CustomComponents from './collections/CustomComponents';
 import File from './collections/File';
 import Blocks from './collections/Blocks';
+import CustomID from './collections/CustomID';
 import DefaultValues from './collections/DefaultValues';
 import HiddenFields from './collections/HiddenFields';
 import Hooks from './collections/Hooks';
@@ -23,12 +24,15 @@ import RelationshipA from './collections/RelationshipA';
 import RelationshipB from './collections/RelationshipB';
 import RichText from './collections/RichText';
 import Select from './collections/Select';
-import StrictPolicies from './collections/StrictPolicies';
+import StrictAccess from './collections/StrictAccess';
 import Validations from './collections/Validations';
+import Uniques from './collections/Uniques';
+import Geolocation from './collections/Geolocation';
 
 import BlocksGlobal from './globals/BlocksGlobal';
 import NavigationArray from './globals/NavigationArray';
 import GlobalWithStrictAccess from './globals/GlobalWithStrictAccess';
+import UnstoredMedia from './collections/UnstoredMedia';
 
 export default buildConfig({
   cookiePrefix: 'payload',
@@ -47,6 +51,10 @@ export default buildConfig({
       // Nav: () => (
       //   <div>Hello</div>
       // ),
+      views: {
+        // Dashboard: CustomDashboardView,
+        // Account: CustomAccountView,
+      },
     },
     webpack: (config) => config,
   },
@@ -57,6 +65,7 @@ export default buildConfig({
     Code,
     Conditions,
     CustomComponents,
+    CustomID,
     File,
     DefaultValues,
     Blocks,
@@ -73,8 +82,11 @@ export default buildConfig({
     RelationshipB,
     RichText,
     Select,
-    StrictPolicies,
+    StrictAccess,
     Validations,
+    Uniques,
+    UnstoredMedia,
+    Geolocation,
   ],
   globals: [
     NavigationArray,
@@ -100,9 +112,7 @@ export default buildConfig({
   defaultDepth: 2,
   graphQL: {
     maxComplexity: 1000,
-    mutations: {},
-    queries: {},
-    disablePlaygroundInProduction: true,
+    disablePlaygroundInProduction: false,
     disable: false,
   },
   // rateLimit: {
@@ -120,6 +130,7 @@ export default buildConfig({
     defaultLocale: 'en',
     fallback: true,
   },
+  // indexSortableFields: true,
   hooks: {
     afterError: (err) => {
       console.error('global error config handler', err);

docs/access-control/collections.mdx

@@ -2,7 +2,7 @@
 title: Collection Access Control
 label: Collections
 order: 20
-desc: Payload is a headless CMS and application framework.
+desc: With Collection-level Access Control you can define which users can create, read, update or delete Collections.
 keywords: collections, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 

docs/access-control/fields.mdx

@@ -2,7 +2,7 @@
 title: Field-level Access Control
 label: Fields
 order: 30
-desc: Payload is a headless CMS and application framework.
+desc: Field-level Access Control is specified within a field's config, and allows you to define which users can create, read or update Fields.
 keywords: fields, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -23,8 +23,7 @@ export default {
   fields: [
     {
       name: 'title',
-      label: 'Title',
-      type: 'text'
+      type: 'text',
       // highlight-start
       access: {
         create: ({ req: { user } }) => { ... },
@@ -43,9 +42,11 @@ Returns a boolean which allows or denies the ability to set a field's value when
 
 **Available argument properties:**
 
-| Option    | Description |
-| --------- | ----------- |
-| **`req`** | The Express `request` object containing the currently authenticated `user` |
+| Option            | Description |
+| ----------------- | ----------- |
+| **`req`**         | The Express `request` object containing the currently authenticated `user` |
+| **`data`**        | The full data passed to create the document. |
+| **`siblingData`** | Immediately adjacent field data passed to create the document. |
 
 ### Read
 
@@ -53,10 +54,12 @@ Returns a boolean which allows or denies the ability to read a field's value. If
 
 **Available argument properties:**
 
-| Option    | Description |
-| --------- | ----------- |
-| **`req`** | The Express `request` object containing the currently authenticated `user` |
-| **`id`**  | `id` of the document being read |
+| Option            | Description |
+| ----------------- | ----------- |
+| **`req`**         | The Express `request` object containing the currently authenticated `user` |
+| **`id`**          | `id` of the document being read |
+| **`data`**        | The full data of the document being read. |
+| **`siblingData`** | Immediately adjacent field data of the document being read. |
 
 ### Update
 
@@ -64,7 +67,9 @@ Returns a boolean which allows or denies the ability to update a field's value.
 
 **Available argument properties:**
 
-| Option    | Description |
-| --------- | ----------- |
-| **`req`** | The Express `request` object containing the currently authenticated `user` |
-| **`id`**  | `id` of the document being updated |
+| Option            | Description |
+| ----------------- | ----------- |
+| **`req`**         | The Express `request` object containing the currently authenticated `user` |
+| **`id`**          | `id` of the document being updated |
+| **`data`**        | The full data passed to update the document. |
+| **`siblingData`** | Immediately adjacent field data passed to update the document with. |

docs/access-control/globals.mdx

@@ -2,7 +2,7 @@
 title: Globals Access Control
 label: Globals
 order: 40
-desc: Payload is a headless CMS and application framework.
+desc: Global-level Access Control is specified within each Global's `access` property and allows you to define which users can read or update Globals.
 keywords: globals, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 

docs/access-control/overview.mdx

@@ -2,7 +2,7 @@
 title: Access Control
 label: Overview
 order: 10
-desc: Payload is a headless CMS and application framework.
+desc: Payload makes it simple to define and manage access control. By declaring roles, you can set permissions and restrict what your users can interact with.
 keywords: overview, access control, permissions, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 

docs/admin/components.mdx

@@ -2,7 +2,7 @@
 title: Swap in your own React components
 label: Custom Components
 order: 20
-desc: Payload is a headless CMS and application framework.
+desc: Fully customize your Admin Panel by swapping in your own React components. Add fields, remove views, update routes and change functions to sculpt your perfect Dashboard.
 keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -106,3 +106,13 @@ const CustomTextField = ({ path }) => {
   )
 }
 ```
+
+### Styling Custom Components
+
+Payload exports its SCSS variables and mixins for reuse in your own custom components. This is helpful in cases where you might want to style a custom input similarly to Payload's built-ini styling so it blends more thoroughly into the existing admin UI.
+
+To make use of Payload SCSS variables / mixins to use directly in your own components, you can import them as follows:
+
+```
+@import '~payload/scss';
+```

docs/admin/customizing-css.mdx

@@ -2,7 +2,7 @@
 title: Customizing CSS & SCSS
 label: Customizing CSS
 order: 30
-desc: Payload is a headless CMS and application framework.
+desc: Customize your Payload admin panel further by adding your own CSS or SCSS style sheet to the configuration, powerful theme and design options are waiting for you.
 keywords: admin, css, scss, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 

docs/admin/overview.mdx

@@ -2,7 +2,7 @@
 title: The Admin Panel
 label: Overview
 order: 10
-desc: Payload is a headless CMS and application framework.
+desc: Manage your data and customize the Admin Panel by swapping in your own React components. Create, modify or remove views, fields, styles and much more.
 keywords: admin, components, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -30,6 +30,7 @@ All options for the Admin panel are defined in your base Payload config file.
 | `indexHTML`          | Optionally replace the entirety of the `index.html` file used by the Admin panel. Reference the [base index.html file](https://github.com/payloadcms/payload/blob/master/src/admin/index.html) to ensure your replacement has the appropriate HTML elements. |
 | `css`                | Absolute path to a stylesheet that you can use to override / customize the Admin panel styling. [More](/docs/admin/customizing-css). |
 | `scss`               | Absolute path to a Sass variables / mixins stylesheet meant to override Payload styles to make for an easy re-skinning of the Admin panel. [More](/docs/admin/customizing-css#overriding-scss-variables). |
+| `dateFormat`         | Global date format that will be used for all dates in the Admin panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used.
 | `components`         | Component overrides that affect the entirety of the Admin panel. [More](/docs/admin/components) |
 | `webpack`            | Customize the Webpack config that's used to generate the Admin panel. [More](/docs/admin/webpack) |
 
@@ -38,7 +39,7 @@ All options for the Admin panel are defined in your base Payload config file.
 
 <Banner type="warning">
   <strong>Important:</strong><br />
-  The Payload Admin panel can only be used by one Collection that supports <a href="/docs/authentication/">Authentication</a>.
+  The Payload Admin panel can only be used by one Collection that supports <a href="/docs/authentication/overview">Authentication</a>.
 </Banner>
 
 To specify which Collection to use to log in to the Admin panel, pass the `admin` options a `user` key equal to the slug of the Collection that you'd like to use.
@@ -70,6 +71,6 @@ This is totally possible. For the above scenario, by specifying `admin: { user:
 
 If you would like to restrict which users from a single Collection can access the Admin panel, you can use the `admin` access control function. [Click here](/docs/access-control/overview#admin) to learn more.
 
-### License enforcement
+## License enforcement
 
 Payload requires a valid license key to be used on production domains. You can use it as much as you'd like locally and on staging / UAT domains, but when you deploy to production, you'll need a license key to activate Payload's Admin panel. For more information, [click here](/docs/production/licensing).

docs/admin/preferences.mdx

@@ -0,0 +1,157 @@
+---
+title: Managing User Preferences
+label: Preferences
+order: 40
+desc: Store the preferences of your users as they interact with the Admin panel.
+keywords: admin, preferences, custom, customize, documentation, Content Management System, cms, headless, javascript, node, react, express
+---
+
+As your users interact with your Admin panel, you might want to store their preferences in a persistent manner, so that when they revisit the Admin panel, they can pick right back up where they left off.
+
+Out of the box, Payload handles the persistence of your users' preferences in a handful of ways, including:
+
+1. Collection `List` view active columns, and their order, that users define
+1. Their last active locale
+1. The "collapsed" state of blocks, on a document level, as users edit or interact with documents
+
+<Banner type="warning">
+	<strong>Important:</strong><br/>
+	All preferences are stored on an individual user basis. Payload automatically recognizes the user that is reading or setting a preference via all provided authentication methods.
+</Banner>
+
+### Use cases
+
+This API is used significantly for internal operations of the Admin panel, as mentioned above. But, if you're building your own React components for use in the Admin panel, you can allow users to set their own preferences in correspondence to their usage of your components. For example:
+
+- If you have built a "color picker", you could "remember" the last used colors that the user has set for easy access next time
+- If you've built a custom `Nav` component, and you've built in an "accordion-style" UI, you might want to store the `collapsed` state of each Nav collapsible item. This way, if an editor returns to the panel, their `Nav` state is persisted automatically
+- You might want to store `recentlyAccessed` documents to give admin editors an easy shortcut back to their recently accessed documents on the `Dashboard` or similar
+- Many other use cases exist. Invent your own! Give your editors an intelligent and persistent editing experience.
+
+### Database
+
+Payload automatically creates an internally used `_preferences` collection that stores user preferences. Each document in the `_preferences` collection contains the following shape:
+
+| Key                  | Value  |
+| -------------------- | -------------|
+| `id`                 | A unique ID for each preference stored. |
+| `key`                | A unique `key` that corresponds to the preference. |
+| `user`               | The ID of the `user` that is storing its preference. |
+| `userCollection`     | The `slug` of the collection that the `user` is logged in as. |
+| `value`              | The value of the preference. Can be any data shape that you need. |
+| `createdAt`          | A timestamp of when the preference was created. |
+| `updatedAt`          | A timestamp set to the last time the preference was updated.
+
+### APIs
+
+Preferences are available to both [GraphQL](/docs/graphql/overview#preferences) and [REST](/docs/rest-api/overview#) APIs.
+
+### Adding or reading Preferences in your own components
+
+The Payload admin panel offers a `usePreferences` hook. The hook is only meant for use within the admin panel itself. It provides you with two methods:
+
+##### `getPreference`
+
+This async method provides an easy way to retrieve a user's preferences by `key`. It will return a promise containing the resulting preference value.
+
+**Arguments**
+
+- `key`: the `key` of your preference to retrieve.
+
+##### `setPreference`
+
+Also async, this method provides you with an easy way to set a user preference. It returns `void`.
+
+**Arguments:**
+
+- `key`: the `key` of your preference to set.
+- `value`: the `value` of your preference that you're looking to set.
+
+## Example
+
+Here is an example for how you can utilize `usePreferences` within your custom Admin panel components. Note - this example is not fully useful and is more just a reference for how to utilize the Preferences API. In this case, we are demonstrating how to set and retrieve a user's last used colors history within a `ColorPicker` or similar type component.
+
+```
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import { usePreferences } from 'payload/components/preferences';
+
+const lastUsedColorsPreferenceKey = 'last-used-colors';
+
+const CustomComponent = (props) => {
+  const { getPreference, setPreference } = usePreferences();
+
+  // Store the last used colors in local state
+  const [lastUsedColors, setLastUsedColors] = useState([]);
+
+  // Callback to add a color to the last used colors
+  const updateLastUsedColors = useCallback((color) => {
+    // First, check if color already exists in last used colors.
+    // If it already exists, there is no need to update preferences
+    const colorAlreadyExists = lastUsedColors.indexOf(color) > -1;
+
+    if (!colorAlreadyExists) {
+      const newLastUsedColors = [
+        ...lastUsedColors,
+        color,
+      ];
+
+      setLastUsedColors(newLastUsedColors);
+      setPreference(lastUsedColorsPreferenceKey, newLastUsedColors);
+    }
+  }, [lastUsedColors, setPreference]);
+
+  // Retrieve preferences on component mount
+  // This will only be run one time, because the `getPreference` method never changes
+  useEffect(() => {
+    const asyncGetPreference = async () => {
+      const lastUsedColorsFromPreferences = await getPreference(lastUsedColorsPreferenceKey);
+      setLastUsedColors(lastUsedColorsFromPreferences);
+    };
+
+    asyncGetPreference();
+  }, [getPreference]);
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => updateLastUsedColors('red')}
+      >
+        Use red
+      </button>
+      <button
+        type="button"
+        onClick={() => updateLastUsedColors('blue')}
+      >
+        Use blue
+      </button>
+      <button
+        type="button"
+        onClick={() => updateLastUsedColors('purple')}
+      >
+        Use purple
+      </button>
+      <button
+        type="button"
+        onClick={() => updateLastUsedColors('yellow')}
+      >
+        Use yellow
+      </button>
+      {lastUsedColors && (
+        <Fragment>
+          <h5>Last used colors:</h5>
+          <ul>
+            {lastUsedColors?.map((color) => (
+              <li key={color}>
+                {color}
+              </li>
+            ))}
+          </ul>
+        </Fragment>
+      )}
+    </div>
+  );
+};
+
+export default CustomComponent;
+```

docs/admin/webpack.mdx

@@ -1,8 +1,8 @@
 ---
 title: Webpack
 label: Webpack
-order: 40
-desc: Payload is a headless CMS and application framework.
+order: 50
+desc: The Payload admin panel uses Webpack 5 and supports many common functionalities such as SCSS and Typescript out of the box to give you more freedom.
 keywords: admin, webpack, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 

docs/authentication/config.mdx

@@ -2,7 +2,7 @@
 title: Authentication Config
 label: Config
 order: 20
-desc: Payload is a headless CMS and application framework.
+desc: Enable and customize options in the Authentication config for features including Forgot Password, Login Attempts, API key usage and more.
 keywords: authentication, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 

docs/authentication/operations.mdx

@@ -2,7 +2,7 @@
 title: Authentication Operations
 label: Operations
 order: 30
-desc: Payload is a headless CMS and application framework.
+desc: Enabling Authentication automatically makes key operations available such as Login, Logout, Verify, Unlock, Reset Password and more.
 keywords: authentication, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -194,7 +194,7 @@ If successful, this operation will automatically renew the user's HTTP-only cook
 
 **Example REST API token refresh**:
 ```js
-const res = await fetch('http://localhost:3000/api/[collection-slug]/refresh', {
+const res = await fetch('http://localhost:3000/api/[collection-slug]/refresh-token', {
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',

docs/authentication/overview.mdx

@@ -2,7 +2,7 @@
 title: Authentication Overview
 label: Overview
 order: 10
-desc: Payload is a headless CMS and application framework.
+desc: Payload provides highly secure user Authentication out of the box, and you can fully customize, override, or remove the default Authentication support.
 keywords: authentication, config, configuration, overview, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -22,7 +22,7 @@ Authentication is used within the Payload Admin panel itself as well as througho
 - P2P app or social site where users need to log in and manage their profiles
 - Online game where players need to track their progress over time
 
-By default, Payload provides you with a `User` collection that supports Authentication, which is used to access the Admin panel. But, you can add support to one or many Collections of your own. For more information on how to customize, override, or remove the default `User` collection, [click here](/docs/admin#the-admin-user-collection).
+By default, Payload provides you with a `User` collection that supports Authentication, which is used to access the Admin panel. But, you can add support to one or many Collections of your own. For more information on how to customize, override, or remove the default `User` collection, [click here](/docs/admin/overview#the-admin-user-collection).
 
 ### Enabling Auth on a collection
 

docs/authentication/using-middleware.mdx

@@ -2,7 +2,7 @@
 title: Using the Payload Auth Middleware
 label: Using the Middleware
 order: 40
-desc: Payload is a headless CMS and application framework.
+desc: Make full use of Payload's built-in authentication with your own custom Express endpoints by adding Payload's authentication middleware.
 keywords: authentication, middleware, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 

docs/configuration/collections.mdx

@@ -2,7 +2,7 @@
 title: Collection Configs
 label: Collections
 order: 20
-desc: Payload is a headless CMS and application framework.
+desc: Structure your Collections for your needs by defining fields, adding slugs and labels, establishing access control, tying in hooks, setting timestamps and more.
 keywords: collections, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -16,12 +16,13 @@ It's often best practice to write your Collections in separate files and then im
 | ---------------- | -------------|
 | **`slug`** *     | Unique, URL-friendly string that will act as an identifier for this Collection. |
 | **`fields`** *   | Array of field types that will determine the structure and functionality of the data stored within this Collection. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. |
-| **`labels`**     | Singular and plural labels for use in identifying this Collection throughout Payload. |
-| **`admin`**      | Admin-specific configuration. See below for [more detail](/docs/collections#admin). |
+| **`labels`**     | Singular and plural labels for use in identifying this Collection throughout Payload. Auto-generated from slug if not defined. |
+| **`description`**| Text or React component to display below the Collection label in the List view to give editors more information. |
+| **`admin`**      | Admin-specific configuration. See below for [more detail](#admin-options). |
 | **`hooks`**      | Entry points to "tie in" to Collection actions at specific points. [More](/docs/hooks/overview#collection-hooks) |
 | **`access`**     | Provide access control functions to define exactly who should be able to do what with Documents in this Collection. [More](/docs/access-control/overview/#collections) |
 | **`auth`**       | Specify options if you would like this Collection to feature authentication. For more, consult the [Authentication](/docs/authentication/config) documentation. |
-| **`upload`**     | Specify options if you would like this Collection to support file uploads. For more, consult the [Uploads](/docs/uploads/overview) documentation. |
+| **`upload`**     | Specify options if you would like this Collection to support file uploads. For more, consult the [Uploads](/docs/upload/overview) documentation. |
 | **`timestamps`** | Set to false to disable documents' automatically generated `createdAt` and `updatedAt` timestamps. |
 
 *\* An asterisk denotes that a property is required.*
@@ -29,12 +30,8 @@ It's often best practice to write your Collections in separate files and then im
 #### Simple collection example
 
 ```js
-const Order = {
+const Orders = {
 	slug: 'orders',
-	labels: {
-		singular: 'Order',
-		plural: 'Orders',
-	},
 	fields: [
 		{
 			name: 'total',
@@ -64,8 +61,8 @@ You can customize the way that the Admin panel behaves on a collection-by-collec
 | `useAsTitle`                 | Specify a top-level field to use for a document title throughout the Admin panel. If no field is defined, the ID of the document is used as the title. |
 | `defaultColumns`             | Array of field names that correspond to which columns to show by default in this collection's List view. |
 | `disableDuplicate `          | Disables the "Duplicate" button while editing documents within this collection. |
-| `enableRichTextRelationship` | The [Rich Text](/docs/fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set this field to `true` to enable the collection to be selected within it. |
-| `preview`        | Function to generate preview URLS within the Admin panel that can point to your app. [More](/docs/collections#preview). |
+| `enableRichTextRelationship` | The [Rich Text](/docs/fields/rich-text) field features a `Relationship` element which allows for users to automatically reference related documents within their rich text. Set to `true` by default. |
+| `preview`                    | Function to generate preview URLS within the Admin panel that can point to your app. [More](#preview). |
 | `components`                 | Swap in your own React components to be used within this collection. [More](/docs/admin/components#collections) |
 
 ### Preview
@@ -74,7 +71,10 @@ Collection `admin` options can accept a `preview` function that will be used to
 
 If the function is specified, a Preview button will automatically appear in the corresponding collection's Edit view. Clicking the Preview button will link to the URL that is generated by the function.
 
-The preview function accepts the document being edited as an argument.
+**The preview function accepts two arguments:**
+
+1. The document being edited
+1. An `options` object, containing `locale` and `token` properties. The `token` is the currently logged in user's JWT.
 
 **Example collection with preview function:**
 
@@ -89,9 +89,9 @@ The preview function accepts the document being edited as an argument.
 		}
 	]
 	admin: {
-		preview: (doc) => {
+		preview: (doc, { locale }) => {
 			if (doc?.slug) {
-				return `https://bigbird.com/preview/posts/${doc.slug}`,
+				return `https://bigbird.com/preview/posts/${doc.slug}?locale=${locale}`,
 			}
 
 			return null;
@@ -110,4 +110,22 @@ Hooks are a powerful way to extend collection functionality and execute your own
 
 ### Field types
 
-Collections support all field types that Payload has to offer—including simple fields like text and checkboxes all the way to more complicated layout-building field groups like Blocks. [Click here](/docs/fields/config) to learn more about field types.
+Collections support all field types that Payload has to offer—including simple fields like text and checkboxes all the way to more complicated layout-building field groups like Blocks. [Click here](/docs/fields/overview) to learn more about field types.
+
+### TypeScript
+
+You can import collection types as follows:
+
+```js
+import { CollectionConfig } from 'payload/types';
+
+// This is the type used for incoming collection configs.
+// Only the bare minimum properties are marked as required.
+```
+
+```js
+import { SanitizedCollectionConfig } from 'payload/types';
+
+// This is the type used after an incoming collection config is fully sanitized.
+// Generally, this is only used internally by Payload.
+```

docs/configuration/express.mdx

@@ -2,7 +2,7 @@
 title: Express
 label: Express
 order: 60
-desc: Payload is a headless CMS and application framework.
+desc: Payload utilizes Express middleware packages, you can customize how they work by passing in configuration options.
 keywords: config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 

docs/configuration/globals.mdx

@@ -2,7 +2,7 @@
 title: Global Configs
 label: Globals
 order: 30
-desc: Payload is a headless CMS and application framework.
+desc: Set up your Global config for your needs by defining fields, adding slugs and labels, establishing access control, tying in hooks and more.
 keywords: globals, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -16,7 +16,8 @@ As with Collection configs, it's often best practice to write your Globals in se
 | ---------------- | -------------|
 | **`slug`** *     | Unique, URL-friendly string that will act as an identifier for this Global. |
 | **`fields`** *   | Array of field types that will determine the structure and functionality of the data stored within this Global. [Click here](/docs/fields/overview) for a full list of field types as well as how to configure them. |
-| **`label`**      | Singular label for use in identifying this Global throughout Payload. |
+| **`label`**      | Singular label for use in identifying this Global throughout Payload. Auto-generated from slug if not defined. |
+| **`description`**| Text or React component to display below the Global header to give editors more information.  |
 | **`admin`**      | Admin-specific configuration. See below for [more detail](/docs/configuration/globals#admin-options). |
 | **`hooks`**      | Entry points to "tie in" to collection actions at specific points. [More](/docs/hooks/overview#global-hooks) |
 | **`access`**     | Provide access control functions to define exactly who should be able to do what with this Global. [More](/docs/access-control/overview/#globals) |
@@ -28,7 +29,6 @@ As with Collection configs, it's often best practice to write your Globals in se
 ```js
 const Nav = {
 	slug: 'nav',
-	label: 'Nav',
 	fields: [
 		{
 			name: 'items',
@@ -38,7 +38,6 @@ const Nav = {
 			fields: [
 				{
 					name: 'page',
-					label: 'Page',
 					type: 'relationship',
 					relationTo: 'pages', // "pages" is the slug of an existing collection
 					required: true,
@@ -71,4 +70,22 @@ Globals also fully support a smaller subset of Hooks. To learn more, go to the [
 
 ### Field types
 
-Globals support all field types that Payload has to offer—including simple fields like text and checkboxes all the way to more complicated layout-building field groups like Blocks. [Click here](/docs/fields/config) to learn more about field types.
+Globals support all field types that Payload has to offer—including simple fields like text and checkboxes all the way to more complicated layout-building field groups like Blocks. [Click here](/docs/fields/overview) to learn more about field types.
+
+### TypeScript
+
+You can import global types as follows:
+
+```js
+import { GlobalConfig } from 'payload/types';
+
+// This is the type used for incoming global configs.
+// Only the bare minimum properties are marked as required.
+```
+
+```js
+import { SanitizedGlobalConfig } from 'payload/types';
+
+// This is the type used after an incoming global config is fully sanitized.
+// Generally, this is only used internally by Payload.
+```

docs/configuration/localization.mdx

@@ -2,7 +2,7 @@
 title: Localization
 label: Localization
 order: 50
-desc: Payload is a headless CMS and application framework.
+desc: Add and maintain as many locales as you need by adding Localization to your Payload config, set options for default locale, fallbacks, fields and more.
 keywords: localization, internationalization, i18n, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -55,7 +55,6 @@ Payload localization works on a **field** level—not a document level. In addit
 ```js
 {
 	name: 'title',
-	label: 'Page Title',
 	type: 'text',
 	// highlight-start
 	localized: true,
@@ -98,7 +97,7 @@ fetch('https://localhost:3000/api/pages?locale=es&fallback-locale=none');
 
 In the GraphQL API, you can specify `locale` and `fallbackLocale` args to all relevant queries and mutations.
 
-The `locale` arg will only accept valid locales, but locales will be formatted automatically as valid GraphQL enum values (dashes or special characters will be converted to underscores, spaces will be removed, etc.). If you are curious to see how locales are auto-formatted, you can use the [GraphQL playground](/docs/graphql/playground).
+The `locale` arg will only accept valid locales, but locales will be formatted automatically as valid GraphQL enum values (dashes or special characters will be converted to underscores, spaces will be removed, etc.). If you are curious to see how locales are auto-formatted, you can use the [GraphQL playground](/docs/graphql/overview#graphql-playground).
 
 The `fallbackLocale` arg will accept valid locales as well as `none` to disable falling back.
 
@@ -131,3 +130,7 @@ const posts = await payload.find({
 	fallbackLocale: false,
 })
 ```
+
+<Banner type="alert">
+  <strong>Tip:</strong><br/>The REST and Local APIs can return all localization data in one request by passing 'all' or '*' as the <strong>locale</strong> parameter. The response will be structured so that field values come back as the full objects keyed for each locale instead of the single, translated value.
+</Banner>

docs/configuration/overview.mdx

@@ -2,7 +2,7 @@
 title: The Payload Config
 label: Overview
 order: 10
-desc: Payload is a headless CMS and application framework.
+desc: The Payload config is central to everything that Payload does, from adding custom React components, to modifying collections, controlling localization and much more.
 keywords: overview, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -18,23 +18,26 @@ Payload is a *config-based*, code-first CMS and application framework. The Paylo
 
 | Option               | Description  |
 | -------------------- | -------------|
+| `serverURL`          | A _required_ string used to define the absolute URL of your app including the protocol, for example `https://'example.com`. No paths allowed, only protocol, domain and (optionally) port |
 | `collections`        | An array of all Collections that Payload will manage. To read more about how to define your collection configs, [click here](/docs/configuration/collections). |
 | `globals`            | An array of all Globals that Payload will manage. For more on Globals and their configs, [click here](/docs/configuration/globals). |
-| `admin`              | Base Payload admin configuration. Specify custom components, control metadata, set the Admin user collection, and [more](/docs/admin/overview#options). |
+| `admin`              | Base Payload admin configuration. Specify custom components, control metadata, set the Admin user collection, and [more](/docs/admin/overview#admin-options). |
 | `localization`       | Opt-in and control how Payload handles the translation of your content into multiple locales. [More](/docs/configuration/localization) |
-| `graphQL`            | Manage GraphQL-specific functionality here. Define your own queries and mutations, manage query complexity limits, and [more](/docs/graphql/overview#config). |
+| `graphQL`            | Manage GraphQL-specific functionality here. Define your own queries and mutations, manage query complexity limits, and [more](/docs/graphql/overview). |
 | `cookiePrefix`       | A string that will be prefixed to all cookies that Payload sets. |
 | `cors`               | Either a whitelist array of URLS to allow CORS requests from, or a wildcard string (`'*'`) to accept incoming requests from any domain. |
 | `csrf`               | A whitelist array of URLs to allow Payload cookies to be accepted from as a form of CSRF protection. [More](/docs/authentication/overview#csrf-protection) |
 | `defaultDepth`       | If a user does not specify `depth` while requesting a resource, this depth will be used. [More](/docs/getting-started/concepts#depth) |
 | `maxDepth`           | The maximum allowed depth to be permitted application-wide. This setting helps prevent against malicious queries. Defaults to `10`. |
-| `upload`             | Base Payload upload configuration. [More](/docs/admin/upload#global). |
+| `indexSortableFields`| Automatically index all sortable top-level fields in the database to improve sort performance and add database compatibility for Azure Cosmos and similar. |
+| `upload`             | Base Payload upload configuration. [More](/docs/upload/overview#payload-wide-upload-options). |
 | `routes`             | Control the routing structure that Payload binds itself to. Specify `admin`, `api`, `graphQL`, and `graphQLPlayground`. |
-| `email`              | Base email settings to allow Payload to generate email such as Forgot Password requests and other requirements. [More](/docs/email/overview#config) |
+| `email`              | Base email settings to allow Payload to generate email such as Forgot Password requests and other requirements. [More](/docs/email/overview#configuration) |
 | `express`            | Express-specific middleware options such as compression and JSON parsing. [More](/docs/configuration/express). |
 | `debug`              | Enable to expose more detailed error information. |
-| `rateLimit`          | Control IP-based rate limiting for all Payload resources. Used to prevent DDoS attacks and [more](/docs/production/preventing-abuse#rate-limiting). |
+| `rateLimit`          | Control IP-based rate limiting for all Payload resources. Used to prevent DDoS attacks and [more](/docs/production/preventing-abuse#rate-limiting-requests). |
 | `hooks`              | Tap into Payload-wide hooks. [More](/docs/hooks/overview) |
+| `plugins`            | An array of Payload plugins. [More](/docs/plugins/overview) |
 
 #### Simple example
 
@@ -49,13 +52,11 @@ const config = buildConfig({
 			fields: [
 				{
 					name: 'title',
-					label: 'Title',
 					type: 'text',
 					required: true,
 				},
 				{
 					name: 'content',
-					label: 'Content',
 					type: 'richText',
 					required: true,
 				}
@@ -65,16 +66,13 @@ const config = buildConfig({
 	globals: [
 		{
 			slug: 'header',
-			label: 'Header',
 			fields: [
 				{
 					name: 'nav',
-					label: 'Nav',
 					type: 'array',
 					fields: [
 						{
 							name: 'page',
-							label: 'Page',
 							type: 'relationship',
 							relationTo: 'pages',
 						},
@@ -140,3 +138,29 @@ But, you can specify where your Payload config is located as well as what it's n
 The Payload config itself, as well as all files that it requires or imports, are run through Babel. TypeScript and all common ES6 features are fully supported. To see the Babel config that is used to parse Payload configs, check out the Payload source code [here](https://github.com/payloadcms/payload/blob/master/src/babel.config.js).
 
 Payload comes with `isomorphic-fetch` installed which means that even in Node, you can use the `fetch` API just as you would within the browser. No need to import `axios` or similar, unless you want to!
+
+#### Re-using the Payload `babel.config.js`
+
+If for any reason you need to re-use the built-in Payload `babel.config.js`, you can do so by importing it as follows:
+
+```
+import { config } from 'payload/babel';
+```
+
+### TypeScript
+
+You can import config types as follows:
+
+```js
+import { Config } from 'payload/config';
+
+// This is the type used for an incoming Payload config.
+// Only the bare minimum properties are marked as required.
+```
+
+```js
+import { SanitizedConfig } from 'payload/config';
+
+// This is the type used after an incoming Payload config is fully sanitized.
+// Generally, this is only used internally by Payload.
+```

docs/email/overview.mdx

@@ -2,7 +2,7 @@
 title: Email Functionality
 label: Overview
 order: 10
-desc: Payload is a headless CMS and application framework.
+desc: Payload uses NodeMailer to allow you to send emails smoothly from your app. Set up email functions such as password resets, order confirmations and more.
 keywords: email, overview, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -19,7 +19,7 @@ in the `email` property object of your payload init call. Payload will make use
 
 **Three ways to set it up**
 
-1. **Default**: When email is not needed, a mock email handler will be created and used when nothing is provided. This is ideal for development environments and can be changed later when ready to [go to production](/docs/production).
+1. **Default**: When email is not needed, a mock email handler will be created and used when nothing is provided. This is ideal for development environments and can be changed later when ready to [go to production](/docs/production/deployment).
 1. **Recommended**: Set the `transportOptions` and Payload will do the set up for you.
 1. **Advanced**: The `transport` object can be assigned a nodemailer transport object set up in your server scripts and given for Payload to use.
 
@@ -139,4 +139,4 @@ The mock email handler is used when payload is started with neither `transport`
 
 ### Using multiple mail providers
 
-Payload supports the use of a single transporter of email, but there is nothing stopping you from having more. Consider a use case where sending bulk email is handled differently than transactional email and could be done using a [hook](/docs/hooks/config).
+Payload supports the use of a single transporter of email, but there is nothing stopping you from having more. Consider a use case where sending bulk email is handled differently than transactional email and could be done using a [hook](/docs/hooks/overview).

docs/fields/array.mdx

@@ -2,7 +2,7 @@
 title: Array Field
 label: Array
 order: 20
-desc: Payload is a headless CMS and application framework.
+desc: Array fields are intended for sets of repeating fields, that you define. Learn how to use array fields, see examples and options.
 keywords: array, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -24,7 +24,7 @@ keywords: array, fields, config, configuration, documentation, Content Managemen
 | Option           | Description |
 | ---------------- | ----------- |
 | **`name`** *         | To be used as the property name when stored and retrieved from the database.  |
-| **`label`**          | Used as a heading in the Admin panel and to name the generated GraphQL type. |
+| **`label`**          | Used as a heading in the Admin panel and to name the generated GraphQL type. Auto-generated from name if not defined. |
 | **`fields`** *       | Array of field types to correspond to each row of the Array. |
 | **`validate`**       | Provide a custom validation function that will be executed on both the Admin panel and the backend. [More](/docs/fields/overview#validation) |
 | **`saveToJWT`**      | If this field is top-level and nested in a config supporting [Authentication](/docs/authentication/config), include its data in the user JWT. |
@@ -59,14 +59,12 @@ keywords: array, fields, config, configuration, documentation, Content Managemen
       fields: [ // required
         {
           name: 'image',
-          label: 'Image',
           type: 'upload',
           relationTo: 'media',
           required: true,
         },
         {
           name: 'caption',
-          label: 'Caption',
           type: 'text',
         }
       ]

docs/fields/blocks.mdx

@@ -2,7 +2,7 @@
 title: Blocks Field
 label: Blocks
 order: 30
-desc: Payload is a headless CMS and application framework.
+desc: The Blocks field type is a great layout build and can be used to construct any flexible content model. Learn how to use Block fields, see examples and options.
 keywords: blocks, fields, config, configuration, documentation, Content Management System, cms, headless, javascript, node, react, express
 ---
 
@@ -53,7 +53,7 @@ Blocks are defined as separate configs of their own.
 | ---------------- | ----------- |
 | **`slug`** *         | Identifier for this block type. Will be saved on each block as the `blockType` property. |
 | **`fields`** *       | Array of fields to be stored in this block. |
-| **`labels`**         | Customize the block labels that appear in the Admin dashboard. Also used to name corresponding GraphQL schema types. |
+| **`labels`**         | Customize the block labels that appear in the Admin dashboard. Also used to name corresponding GraphQL schema types. Auto-generated from slug if not defined. |
 | **`imageURL`**       | Provide a custom image thumbnail to help editors identify this block in the Admin UI. |
 | **`imageAltText`**   | Customize this block's image thumbnail alt text. |
 
@@ -79,14 +79,12 @@ const QuoteBlock = {
   imageAltText: 'A nice thumbnail image to show what this block looks like',
   fields: [ // required
     {
-      name: 'text',
-      label: 'Quote Text',
+      name: 'quoteHeader',
       type: 'text',
       required: true,
     },
     {
-      name: 'text',
-      label: 'Quotee',
+      name: 'quoteText',
       type: 'text',
     },
   ]
@@ -98,13 +96,8 @@ const ExampleCollection = {
     {
       name: 'layout', // required
       type: 'blocks', // required
-      label: 'layout',
       minRows: 1,
       maxRows: 20,
-      labels: {
-        singular: 'Layout',
-        plural: 'Layouts',
-      },
       blocks: [ // required
        QuoteBlock
       ]