chore: update all plugin docs installation and import steps (#7094)

2024-07-10 10:23:04 -04:00
parent c1c12bc60d
commit 89ae5bbd22
7 changed files with 62 additions and 30 deletions
--- a/docs/plugins/form-builder.mdx
+++ b/docs/plugins/form-builder.mdx
@@ -36,7 +36,7 @@ Forms can be as simple or complex as you need, from a basic contact form, to a m
 Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):

 ```bash
-yarn add @payloadcms/plugin-form-builder
+pnpm add @payloadcms/plugin-form-builder
 ```

 ## Basic Usage
@@ -45,7 +45,7 @@ In the `plugins` array of your [Payload config](https://payloadcms.com/docs/conf

 ```ts
 import { buildConfig } from 'payload/config'
-import formBuilder from '@payloadcms/plugin-form-builder'
+import { formBuilderPlugin } from '@payloadcms/plugin-form-builder'

 const config = buildConfig({
  collections: [
@@ -55,7 +55,7 @@ const config = buildConfig({
    },
  ],
  plugins: [
-    formBuilder({
+    formBuilderPlugin({
      // see below for a list of available options
    }),
  ],
@@ -123,6 +123,8 @@ formBuilder({

 Override anything on the `forms` collection by sending a [Payload Collection Config](https://payloadcms.com/docs/configuration/collections) to the `formOverrides` property.

+Note that the `fields` property is a function that receives the default fields and returns an array of fields. This is because the `fields` property is a special case that is merged with the default fields, rather than replacing them. This allows you to map over default fields and modify them as needed.
+
 ```ts
 // payload.config.ts
 formBuilder({
@@ -133,12 +135,15 @@ formBuilder({
      read: () => true,
      update: () => false,
    },
-    fields: [
+    fields: ({ defaultFields }) => {
+      return [
+        ...defaultFields,
        {
-        name: 'custom-field',
+          name: 'custom',
          type: 'text',
        },
-    ],
+      ]
+    },
  },
 })
 ```
@@ -162,6 +167,15 @@ formBuilder({
  // ...
  formSubmissionOverrides: {
    slug: 'leads',
+    fields: ({ defaultFields }) => {
+      return [
+        ...defaultFields,
+        {
+          name: 'custom',
+          type: 'text',
+        },
+      ]
+    },
  },
 })
 ```
@@ -371,13 +385,12 @@ This plugin relies on the [email configuration](https://payloadcms.com/docs/emai

 All types can be directly imported:

-```js
-import {
+```ts
+import type {
  PluginConfig,
  Form,
  FormSubmission,
  FieldsConfig,
-  BeforePayment,
  BeforeEmail,
  HandlePayment,
  ...
--- a/docs/plugins/nested-docs.mdx
+++ b/docs/plugins/nested-docs.mdx
@@ -48,7 +48,7 @@ Install the plugin using any JavaScript package manager like [Yarn](https://yarn
 or [PNPM](https://pnpm.io):

 ```bash
-  yarn add @payloadcms/plugin-nested-docs
+  pnpm add @payloadcms/plugin-nested-docs
 ```

 ## Basic Usage
@@ -58,7 +58,7 @@ with [options](#options):

 ```ts
 import { buildConfig } from 'payload/config'
-import nestedDocs from '@payloadcms/plugin-nested-docs'
+import { nestedDocsPlugin } from '@payloadcms/plugin-nested-docs'

 const config = buildConfig({
  collections: [
@@ -77,7 +77,7 @@ const config = buildConfig({
    },
  ],
  plugins: [
-    nestedDocs({
+    nestedDocsPlugin({
      collections: ['pages'],
      generateLabel: (_, doc) => doc.title,
      generateURL: (docs) => docs.reduce((url, doc) => `${url}/${doc.slug}`, ''),
--- a/docs/plugins/redirects.mdx
+++ b/docs/plugins/redirects.mdx
@@ -32,7 +32,7 @@ For example, if you have a page at `/about` and you want to change it to `/about
 Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):

 ```bash
-  yarn add @payloadcms/plugin-redirects
+  pnpm add @payloadcms/plugin-redirects
 ```

 ## Basic Usage
@@ -41,7 +41,7 @@ In the `plugins` array of your [Payload config](https://payloadcms.com/docs/conf

 ```ts
 import { buildConfig } from 'payload/config'
-import redirects from '@payloadcms/plugin-redirects'
+import { redirectsPlugin } from '@payloadcms/plugin-redirects'

 const config = buildConfig({
  collections: [
@@ -51,7 +51,7 @@ const config = buildConfig({
    },
  ],
  plugins: [
-    redirects({
+    redirectsPlugin({
      collections: ['pages'],
    }),
  ],
@@ -67,6 +67,25 @@ export default config
 | `collections` | `string[]` | An array of collection slugs to populate in the `to` field of each redirect.                    |
 | `overrides`   | `object`   | A partial collection config that allows you to override anything on the `redirects` collection. |

+Note that the fields in overrides take a function that receives the default fields and returns an array of fields. This allows you to add fields to the collection.
+
+```ts
+redirectsPlugin({
+  collections: ['pages'],
+  overrides: {
+    fields: ({ defaultFields }) => {
+      return [
+        ...defaultFields,
+        {
+          type: 'text',
+          name: 'customField',
+        },
+      ]
+    },
+  },
+})
+```
+
 ## TypeScript

 All types can be directly imported:
--- a/docs/plugins/search.mdx
+++ b/docs/plugins/search.mdx
@@ -39,7 +39,7 @@ This plugin is a great way to implement a fast, immersive search experience such
 Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):

 ```bash
-  yarn add @payloadcms/plugin-search
+  pnpm add @payloadcms/plugin-search
 ```

 ## Basic Usage
@@ -48,7 +48,7 @@ In the `plugins` array of your [Payload config](https://payloadcms.com/docs/conf

 ```js
 import { buildConfig } from 'payload/config'
-import search from '@payloadcms/plugin-search'
+import { searchPlugin } from '@payloadcms/plugin-search'

 const config = buildConfig({
  collections: [
@@ -62,7 +62,7 @@ const config = buildConfig({
    },
  ],
  plugins: [
-    search({
+    searchPlugin({
      collections: ['pages', 'posts'],
      defaultPriorities: {
        pages: 10,
--- a/docs/plugins/sentry.mdx
+++ b/docs/plugins/sentry.mdx
@@ -39,7 +39,7 @@ This multi-faceted software offers a range of features that will help you manage
 Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):

 ```bash
-  yarn add @payloadcms/plugin-sentry
+  pnpm add @payloadcms/plugin-sentry
 ```

 ## Basic Usage
@@ -48,13 +48,13 @@ In the `plugins` array of your [Payload config](https://payloadcms.com/docs/conf

 ```ts
 import { buildConfig } from 'payload/config'
-import { sentry } from '@payloadcms/plugin-sentry'
+import { sentryPlugin } from '@payloadcms/plugin-sentry'
 import { Pages, Media } from './collections'

 const config = buildConfig({
  collections: [Pages, Media],
  plugins: [
-    sentry({
+    sentryPlugin({
      dsn: 'https://61edebas776889984d323d777@o4505289711681536.ingest.sentry.io/4505357433352176',
    }),
  ],
@@ -129,5 +129,5 @@ export default config
 All types can be directly imported:

 ```ts
-import { PluginOptions } from '@payloadcms/plugin-sentry/types'
+import { PluginOptions } from '@payloadcms/plugin-sentry'
 ```
--- a/docs/plugins/seo.mdx
+++ b/docs/plugins/seo.mdx
@@ -37,7 +37,7 @@ To help you visualize what your page might look like in a search engine, a previ
 Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):

 ```bash
-  yarn add @payloadcms/plugin-seo
+  pnpm add @payloadcms/plugin-seo
 ```

 ## Basic Usage
@@ -46,7 +46,7 @@ In the `plugins` array of your [Payload config](https://payloadcms.com/docs/conf

 ```ts
 import { buildConfig } from 'payload/config';
-import seoPlugin from '@payloadcms/plugin-seo';
+import { seoPlugin } from '@payloadcms/plugin-seo';

 const config = buildConfig({
  collections: [
--- a/docs/plugins/stripe.mdx
+++ b/docs/plugins/stripe.mdx
@@ -39,7 +39,7 @@ The beauty of this plugin is the entirety of your application's content and busi
 Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):

 ```bash
-  yarn add @payloadcms/plugin-stripe
+  pnpm add @payloadcms/plugin-stripe
 ```

 ## Basic Usage
@@ -48,7 +48,7 @@ In the `plugins` array of your [Payload config](https://payloadcms.com/docs/conf

 ```ts
 import { buildConfig } from 'payload/config'
-import stripePlugin from '@payloadcms/plugin-stripe'
+import { stripePlugin } from '@payloadcms/plugin-stripe'

 const config = buildConfig({
  plugins: [
@@ -128,7 +128,7 @@ If you need to proxy the API server-side, use the [stripeProxy](#node) function.
 Development:

 1. Login using Stripe cli `stripe login`
-1. Forward events to localhost `stripe listen --forward-to localhost:3000/stripe/webhooks`
+1. Forward events to localhost `stripe listen --forward-to localhost:3000/api/stripe/webhooks`
 1. Paste the given secret into your `.env` file as `STRIPE_WEBHOOKS_ENDPOINT_SECRET`

 Production: