payload 1.0.25 → 1.0.28

package/docs/configuration/localization.mdx

@@ -14,21 +14,23 @@ Add the `localization` property to your Payload config to enable localization pr
 
 **Example Payload config set up for localization:**
 
-```js
-{
-	collections: [
-		... // collections go here
-	],
-	localization: {
-		locales: [
-			'en',
-			'es',
-			'de',
-		],
-		defaultLocale: 'en',
-		fallback: true,
-	},
-}
+```ts
+import { buildConfig } from 'payload/config'
+
+export default buildConfig({
+  collections: [
+    // collections go here
+  ],
+  localization: {
+    locales: [
+      'en',
+      'es',
+      'de',
+    ],
+    defaultLocale: 'en',
+    fallback: true,
+  },
+});
 ```
 
 **Here is a brief explanation of each of the options available within the `localization` property:**
@@ -53,11 +55,11 @@ Payload localization works on a **field** level—not a document level. In addit
 
 ```js
 {
-	name: 'title',
-	type: 'text',
-	// highlight-start
-	localized: true,
-	// highlight-end
+  name: 'title',
+  type: 'text',
+  // highlight-start
+  localized: true,
+  // highlight-end
 }
 ```
 
@@ -66,8 +68,8 @@ With the above configuration, the `title` field will now be saved in the databas
 All field types with a `name` property support the `localized` property—even the more complex field types like `array`s and `block`s.
 
 <Banner>
-	<strong>Note:</strong><br/>
-	Enabling localization for field types that support nested fields will automatically create localized "sets" of all fields contained within the field. For example, if you have a page layout using a blocks field type, you have the choice of either localizing the full layout, by enabling localization on the top-level blocks field, or only certain fields within the layout.
+  <strong>Note:</strong><br/>
+  Enabling localization for field types that support nested fields will automatically create localized "sets" of all fields contained within the field. For example, if you have a page layout using a blocks field type, you have the choice of either localizing the full layout, by enabling localization on the top-level blocks field, or only certain fields within the layout.
 </Banner>
 
 ### Retrieving localized docs
@@ -104,16 +106,16 @@ The `fallbackLocale` arg will accept valid locales as well as `none` to disable
 
 ```graphql
 query {
-	Posts(locale: de, fallbackLocale: none) {
-		docs {
-			title
-		}
-	}
+  Posts(locale: de, fallbackLocale: none) {
+    docs {
+      title
+    }
+  }
 }
 ```
 
 <Banner>
-	In GraphQL, specifying the locale at the top level of a query will automatically apply it throughout all nested relationship fields. You can override this behavior by re-specifying locale arguments in nested related document queries.
+  In GraphQL, specifying the locale at the top level of a query will automatically apply it throughout all nested relationship fields. You can override this behavior by re-specifying locale arguments in nested related document queries.
 </Banner>
 
 ##### Local API
@@ -124,9 +126,9 @@ You can specify `locale` as well as `fallbackLocale` within the Local API as wel
 
 ```js
 const posts = await payload.find({
-	collection: 'posts',
-	locale: 'es',
-	fallbackLocale: false,
+  collection: 'posts',
+  locale: 'es',
+  fallbackLocale: false,
 })
 ```
 

package/docs/configuration/overview.mdx

@@ -43,10 +43,10 @@ Payload is a *config-based*, code-first CMS and application framework. The Paylo
 
 #### Simple example
 
-```js
+```ts
 import { buildConfig } from 'payload/config';
 
-const config = buildConfig({
+export default buildConfig({
 	collections: [
 		{
 			slug: 'pages',
@@ -83,9 +83,6 @@ const config = buildConfig({
 		}
 	]
 });
-
-export default config;
-
 ```
 
 #### Full example config
@@ -174,14 +171,14 @@ Then, you could import this file into both your Payload config and your server,
 
 You can import config types as follows:
 
-```js
+```ts
 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
+```ts
 import { SanitizedConfig } from 'payload/config';
 
 // This is the type used after an incoming Payload config is fully sanitized.

package/docs/email/overview.mdx

@@ -40,7 +40,7 @@ The following options are configurable in the `email` property object as part of
 Simple Mail Transfer Protocol, also known as SMTP can be passed in using the `transportOptions` object on the `email` options.
 
 **Example email part using SMTP:**
-```js
+```ts
 payload.init({
   email: {
     transportOptions: {
@@ -60,6 +60,7 @@ payload.init({
     fromAddress: 'hello@example.com'
   }
   // ...
+})
 ```
 
 <Banner type="warning">
@@ -70,9 +71,9 @@ payload.init({
 
 Many third party mail providers are available and offer benefits beyond basic SMTP. As an example your payload init could look this if you wanted to use SendGrid.com though the same approach would work for any other [NodeMailer transports](https://nodemailer.com/transports/) shown here or provided by another third party.
 
-```js
-const nodemailerSendgrid = require('nodemailer-sendgrid');
-const payload = require('payload');
+```ts
+import payload from 'payload'
+import nodemailerSendgrid from 'nodemailer-sendgrid'
 
 const sendGridAPIKey = process.env.SENDGRID_API_KEY;
 
@@ -92,7 +93,10 @@ payload.init({
 ### Use a custom NodeMailer transport
 To take full control of the mail transport you may wish to use `nodemailer.createTransport()` on your server and provide it to Payload init.
 
-```js
+```ts
+import payload from 'payload'
+import nodemailer from 'nodemailer'
+
 const payload = require('payload');
 const nodemailer = require('nodemailer');
 
@@ -112,7 +116,7 @@ payload.init({
     transport
   },
   // ...
-}
+});
 ```
 
 ### Sending Mail
@@ -123,7 +127,7 @@ By default, Payload uses a mock implementation that only sends mail to the [ethe
 
 To see ethereal credentials, add `logMockCredentials: true` to the email options. This will cause them to be logged to console on startup.
 
-```js
+```ts
 payload.init({
   email: {
     fromName: 'Admin',

package/docs/fields/array.mdx

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

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

@@ -39,13 +39,27 @@ This field uses `prismjs` for syntax highlighting and `react-simple-code-editor`
 
 In addition to the default [field admin config](/docs/fields/overview#admin-config), the Code field type also allows for the customization of a `language` property.
 
-Currently, the `language` property only supports JavaScript syntax but more support will be added as requested.
+The following `prismjs` plugins are imported, enabling the `language` property to accept the following values:
+
+| Plugin                       | Language |
+| ---------------------------- | ----------- |
+| **`prism-css`**              | `css` |
+| **`prism-clike`**            | `clike` |
+| **`prism-markup`**           | `markup`, `html`, `xml`, `svg`, `mathml`, `ssml`, `atom`, `rss` |
+| **`prism-javascript`**       | `javascript`, `js` |
+| **`prism-json`**             | `json` |
+| **`prism-jsx`**              | `jsx` |
+| **`prism-typescript`**       | `typescript`, `ts` |
+| **`prism-tsx`**              | `tsx` |
+| **`prism-yaml`**             | `yaml`, `yml` |
 
 ### Example
 
-`collections/ExampleCollection.js`
-```js
-{
+`collections/ExampleCollection.ts
+```ts
+import { CollectionConfig } from 'payload/types';
+
+const ExampleCollection: CollectionConfig = {
   slug: 'example-collection',
   fields: [
     {
@@ -57,6 +71,5 @@ Currently, the `language` property only supports JavaScript syntax but more supp
       }
     }
   ]
-}
-
+};
 ```

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: [
     {