payload 1.0.27 → 1.0.28

package/docs/fields/blocks.mdx

@@ -72,8 +72,10 @@ The Admin panel provides each block with a `blockName` field which optionally al
 ### Example
 
 `collections/ExampleCollection.js`
-```js
-const QuoteBlock = {
+```ts
+import { Block, CollectionConfig } from 'payload/types';
+
+const QuoteBlock: Block = {
   slug: 'Quote', // required
   imageURL: 'https://google.com/path/to/image.jpg',
   imageAltText: 'A nice thumbnail image to show what this block looks like',
@@ -90,7 +92,7 @@ const QuoteBlock = {
   ]
 };
 
-const ExampleCollection = {
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -111,7 +113,7 @@ const ExampleCollection = {
 
 As you build your own Block configs, you might want to store them in separate files but retain typing accordingly. To do so, you can import and use Payload's `Block` type:
 
-```js
+```ts
 import type { Block } from 'payload/types';
 
 ```

package/docs/fields/checkbox.mdx

@@ -31,9 +31,11 @@ keywords: checkbox, fields, config, configuration, documentation, Content Manage
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -43,6 +45,5 @@ keywords: checkbox, fields, config, configuration, documentation, Content Manage
       defaultValue: false,
     }
   ]
-}
-
+};
 ```

package/docs/fields/code.mdx

@@ -55,9 +55,11 @@ The following `prismjs` plugins are imported, enabling the `language` property t
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -69,6 +71,5 @@ The following `prismjs` plugins are imported, enabling the `language` property t
       }
     }
   ]
-}
-
+};
 ```

package/docs/fields/collapsible.mdx

@@ -22,9 +22,11 @@ keywords: row, fields, config, configuration, documentation, Content Management
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -39,6 +41,5 @@ keywords: row, fields, config, configuration, documentation, Content Management
       ],
     }
   ]
-}
-
+};
 ```

package/docs/fields/date.mdx

@@ -55,10 +55,12 @@ Common use cases for customizing the `date` property are to restrict your field
 
 ### Example
 
-`collections/ExampleCollection.js`
+`collections/ExampleCollection.ts`
 
-```js
-{
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -74,6 +76,5 @@ Common use cases for customizing the `date` property are to restrict your field
       }
     }
   ]
-}
-
+};
 ```

package/docs/fields/email.mdx

@@ -44,9 +44,11 @@ Set this property to a string that will be used for browser autocomplete.
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -56,6 +58,5 @@ Set this property to a string that will be used for browser autocomplete.
       required: true,
     }
   ]
-}
-
+};
 ```

package/docs/fields/group.mdx

@@ -39,9 +39,11 @@ Set this property to `true` to hide this field's gutter within the admin panel.
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -65,6 +67,5 @@ Set this property to `true` to hide this field's gutter within the admin panel.
       ],
     }
   ]
-}
-
+};
 ```

package/docs/fields/number.mdx

@@ -50,9 +50,11 @@ Set this property to a string that will be used for browser autocomplete.
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -64,6 +66,5 @@ Set this property to a string that will be used for browser autocomplete.
       }
     }
   ]
-}
-
+};
 ```

package/docs/fields/overview.mdx

@@ -16,8 +16,10 @@ Fields are defined as an array on Collections and Globals via the `fields` key.
 The required `type` property on a field determines what values it can accept, how it is presented in the API, and how the field will be rendered in the admin interface.
 
 **Simple collection with two fields:**
-```js
-const Pages = {
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const Page: CollectionConfig = {
 	slug: 'pages',
 	fields: [
 		{
@@ -29,7 +31,7 @@ const Pages = {
 			type: 'checkbox', // highlight-line
 		},
 	],
-}
+};
 ```
 
 ### Field types
@@ -80,8 +82,10 @@ There are two arguments available to custom validation functions.
 | `payload`          | If the `validate` function is being executed on the server, Payload will be exposed for easily running local operations. |
 
 Example:
-```js
-{
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const Orders: CollectionConfig = {
   slug: 'orders',
   fields: [
     {
@@ -101,27 +105,27 @@ Example:
       },
     },
   ],
-}
+};
 ```
 
 When supplying a field `validate` function, Payload will use yours in place of the default. To make use of the default field validation in your custom logic you can import, call and return the result as needed.
 
 For example:
-```js
+```ts
 import { text } from 'payload/fields/validations';
-const field =
-  {
-    name: 'notBad',
-    type: 'text',
-    validate: (val, args) => {
-      if (value === 'bad') {
-        return 'This cannot be "bad"';
-      }
-      // highlight-start
-      return text(val, args);
-      // highlight-end
-    },
-}
+
+const field: Field = {
+  name: 'notBad',
+  type: 'text',
+  validate: (val, args) => {
+    if (val === 'bad') {
+      return 'This cannot be "bad"';
+    }
+    // highlight-start
+    return text(val, args);
+    // highlight-end
+  },
+};
 ```
 
 ### Customizable ID
@@ -131,7 +135,7 @@ Users are then required to provide a custom ID value when creating a record thro
 Valid ID types are `number` and `text`.
 
 Example:
-```js
+```ts
 {
   fields: [
     {
@@ -174,7 +178,7 @@ The `condition` function should return a boolean that will control if the field
 
 **Example:**
 
-```js
+```ts
 {
   fields: [
     {
@@ -212,21 +216,21 @@ Functions are called with an optional argument object containing:
 
 Here is an example of a defaultValue function that uses both:
 
-```js
+```ts
 const translation: {
-    en: 'Written by',
-    es: 'Escrito por',
+  en: 'Written by',
+  es: 'Escrito por',
 };
 
 const field = {
-    name: 'attribution',
-    type: 'text',
-    admin: {
-      // highlight-start
-      defaultValue: ({ user, locale }) => (`${translation[locale]} ${user.name}`)
-      // highlight-end
-    }
-  };
+  name: 'attribution',
+  type: 'text',
+  admin: {
+    // highlight-start
+    defaultValue: ({ user, locale }) => (`${translation[locale]} ${user.name}`)
+    // highlight-end
+  }
+};
 ```
 
 <Banner type="success">
@@ -244,7 +248,7 @@ As shown above, you can simply provide a string that will show by the field, but
 
 **Function Example:**
 
-```js
+```ts
 {
   fields: [
     {
@@ -262,7 +266,7 @@ As shown above, you can simply provide a string that will show by the field, but
 This example will display the number of characters allowed as the user types.
 
 **Component Example:**
-```js
+```ts
 {
   fields: [
     {
@@ -289,10 +293,8 @@ This component will count the number of characters entered.
 
 You can import the internal Payload `Field` type as well as other common field types as follows:
 
-```js
+```ts
 import type {
   Field,
-  Validate,
-  Condition,
 } from 'payload/types';
 ```

package/docs/fields/point.mdx

@@ -35,9 +35,11 @@ The data structure in the database matches the GeoJSON structure to represent po
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -46,7 +48,7 @@ The data structure in the database matches the GeoJSON structure to represent po
       label: 'Location',
     },
   ]
-}
+};
 ```
 
 ### Querying

package/docs/fields/radio.mdx

@@ -45,9 +45,11 @@ The `layout` property allows for the radio group to be styled as a horizonally o
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

package/docs/fields/relationship.mdx

@@ -69,26 +69,26 @@ The `filterOptions` property can either be a `Where` query directly, or a functi
 
 **Example:**
 
-```js
-  const relationshipField = {
-    name: 'purchase',
-    type: 'relationship',
-    relationTo: ['products', 'services'],
-    filterOptions: ({ relationTo, siblingData }) => {
-      // returns a Where query dynamically by the type of relationship
-      if (relationTo === 'products') {
-        return {
-          'stock': { is_greater_than: siblingData.quantity }
-        }
+```ts
+const relationshipField = {
+  name: 'purchase',
+  type: 'relationship',
+  relationTo: ['products', 'services'],
+  filterOptions: ({ relationTo, siblingData }) => {
+    // returns a Where query dynamically by the type of relationship
+    if (relationTo === 'products') {
+      return {
+        'stock': { is_greater_than: siblingData.quantity }
       }
+    }
 
-      if (relationTo === 'services') {
-        return {
-          'isAvailable': { equals: true }
-        }
+    if (relationTo === 'services') {
+      return {
+        'isAvailable': { equals: true }
       }
-    },
-  };
+    }
+  },
+};
 ```
 
 You can learn more about writing queries [here](/docs/queries/overview).
@@ -106,7 +106,7 @@ Given the variety of options possible within the `relationship` field type, the
 
 The most simple pattern of a relationship is to use `hasMany: false` with a `relationTo` that allows for only one type of collection.
 
-```js
+```ts
 {
   slug: 'example-collection',
   fields: [
@@ -137,7 +137,7 @@ When querying documents in this collection via REST API, you could query as foll
 
 Also known as **dynamic references**, in this configuration, the `relationTo` field is an array of Collection slugs that tells Payload which Collections are valid to reference.
 
-```js
+```ts
 {
   slug: 'example-collection',
   fields: [
@@ -176,7 +176,7 @@ This query would return only documents that have an owner relationship to organi
 
 The `hasMany` tells Payload that there may be more than one collection saved to the field.
 
-```js
+```ts
 {
   slug: 'example-collection',
   fields: [
@@ -204,7 +204,7 @@ When querying documents, the format does not change for arrays:
 
 #### Has Many - Polymorphic
 
-```js
+```ts
 {
   slug: 'example-collection',
   fields: [

package/docs/fields/rich-text.mdx

@@ -126,9 +126,11 @@ Custom `Leaf` objects follow a similar pattern but require you to define the `Le
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -178,7 +180,7 @@ Custom `Leaf` objects follow a similar pattern but require you to define the `Le
       }
     }
   ]
-}
+};
 ```
 
 For more examples regarding how to define your own elements and leaves, check out the example [`RichText` field](https://github.com/payloadcms/public-demo/blob/master/src/fields/hero.ts) within the Public Demo source code.
@@ -187,7 +189,7 @@ For more examples regarding how to define your own elements and leaves, check ou
 
 As the Rich Text field saves its content in a JSON format, you'll need to render it as HTML yourself. Here is an example for how to generate JSX / HTML from Rich Text content:
 
-```js
+```ts
 import React, { Fragment } from 'react';
 import escapeHTML from 'escape-html';
 import { Text } from 'slate';
@@ -308,7 +310,7 @@ If you want to utilize this functionality within your own custom elements, you c
 
 `customLargeBodyElement.js`:
 
-```js
+```ts
 import Button from './Button';
 import Element from './Element';
 import withLargeBody from './plugin';
@@ -338,7 +340,7 @@ The plugin itself extends Payload's built-in `shouldBreakOutOnEnter` Slate funct
 
 If you are building your own custom Rich Text elements or leaves, you may benefit from importing the following types:
 
-```js
+```ts
 import type {
   RichTextCustomElement,
   RichTextCustomLeaf,

package/docs/fields/row.mdx

@@ -21,9 +21,11 @@ keywords: row, fields, config, configuration, documentation, Content Management
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

package/docs/fields/select.mdx

@@ -57,10 +57,11 @@ Set to `true` if you'd like this field to be sortable within the Admin UI using
 
 ### Example
 
-`collections/ExampleCollection.js`
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
 
-```js
-{
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

package/docs/fields/tabs.mdx

@@ -34,9 +34,11 @@ Each tab has its own required `label` and `fields` array. You can also optionall
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

package/docs/fields/text.mdx

@@ -46,9 +46,11 @@ Set this property to a string that will be used for browser autocomplete.
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

package/docs/fields/textarea.mdx

@@ -46,9 +46,11 @@ Set this property to a string that will be used for browser autocomplete.
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

package/docs/fields/ui.mdx

@@ -34,9 +34,11 @@ With this field, you can also inject custom `Cell` components that appear as add
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

package/docs/fields/upload.mdx

@@ -46,9 +46,11 @@ keywords: upload, images media, fields, config, configuration, documentation, Co
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts`
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {

package/docs/getting-started/concepts.mdx

@@ -22,7 +22,7 @@ By default, the Payload config lives in the root folder of your code and is name
 	A Collection represents a type of content that Payload will store and can contain many documents.
 </Banner>
 
-Collections define the shape of your data as well as all functionalities attached to that data. They will contain or many "documents", all corresponding with the same fields and functionalities that you define.
+Collections define the shape of your data as well as all functionalities attached to that data. They will contain one or many "documents", all corresponding with the same fields and functionalities that you define.
 
 They can represent anything you can store in a database - for example - pages, posts, users, people, orders, categories, events, customers, transactions, and anything else your app needs.
 

package/docs/graphql/extending.mdx

@@ -33,7 +33,7 @@ Both `graphQL.queries` and `graphQL.mutations` functions should return an object
 
 `payload.config.js`:
 
-```js
+```ts
 import { buildConfig } from 'payload/config';
 import myCustomQueryResolver from './graphQL/resolvers/myCustomQueryResolver';