docs: add missing types, prefer pnpm, fix various typos, discourage using payload from import (#9847)

- Adds missing types, especially the `Where` type. Will be helpful for
people to see that they can type their queries like that
- Mention pnpm first and prefer pnpm > npm > yarn throughout docs
- Add `payload` to function arguments in examples to discourage people
from doing `import payload from 'payload'`
- PNPM => pnpm, NPM => npm
- Fix some typos

Author: AlessioGr

docs/cloud/projects.mdx

@@ -98,7 +98,7 @@ From there, you are ready to make updates to your project. When you are ready to
 
 Projects generated from a template will come pre-configured with the official Cloud Plugin, but if you are using your own repository you will need to add this into your project. To do so, add the plugin to your Payload Config:
 
-`yarn add @payloadcms/payload-cloud`
+`pnpm add @payloadcms/payload-cloud`
 
 ```js
 import { payloadCloudPlugin } from '@payloadcms/payload-cloud'

docs/getting-started/installation.mdx

@@ -10,7 +10,7 @@ keywords: documentation, getting started, guide, Content Management System, cms,
 
 Payload requires the following software:
 
-- Any JavaScript package manager (Yarn, NPM, or pnpm - pnpm is preferred)
+- Any JavaScript package manager (pnpm, npm, or yarn - pnpm is preferred)
 - Node.js version 20.9.0+
 - Any [compatible database](/docs/database/overview) (MongoDB, Postgres or Sqlite)
 
@@ -49,7 +49,7 @@ pnpm i payload @payloadcms/next @payloadcms/richtext-lexical sharp graphql
 
 <Banner type="warning">
   <strong>Note:</strong>
-  Swap out `pnpm` for your package manager. If you are using NPM, you might need to install using legacy peer deps: `npm i --legacy-peer-deps`.
+  Swap out `pnpm` for your package manager. If you are using npm, you might need to install using legacy peer deps: `npm i --legacy-peer-deps`.
 </Banner>
 
 Next, install a [Database Adapter](/docs/database/overview). Payload requires a Database Adapter to establish a database connection. Payload works with all types of databases, but the most common are MongoDB and Postgres.
@@ -181,6 +181,6 @@ Once you have a Payload Config, update your `tsconfig` to include a `path` that
 
 #### 5. Fire it up!
 
-After you've reached this point, it's time to boot up Payload. Start your project in your application's folder to get going. By default, the Next.js dev script is `pnpm dev` (or `npm run dev` if using NPM).
+After you've reached this point, it's time to boot up Payload. Start your project in your application's folder to get going. By default, the Next.js dev script is `pnpm dev` (or `npm run dev` if using npm).
 
 After it starts, you can go to `http://localhost:3000/admin` to create your first Payload user!

docs/graphql/graphql-schema.mdx

@@ -62,7 +62,7 @@ type Collection1 {
 
 The above example outputs all your definitions to a file relative from your payload config as `./graphql/schema.graphql`. By default, the file will be output to your current working directory as `schema.graphql`.
 
-### Adding an NPM script
+### Adding an npm script
 
 <Banner type="warning">
   <strong>Important</strong>
@@ -72,7 +72,7 @@ The above example outputs all your definitions to a file relative from your payl
 
 Payload will automatically try and locate your config, but might not always be able to find it. For example, if you are working in a `/src` directory or similar, you need to tell Payload where to find your config manually by using an environment variable.
 
-If this applies to you, create an NPM script to make generating types easier:
+If this applies to you, create an npm script to make generating types easier:
 
 ```json
 // package.json

docs/hooks/context.mdx

@@ -28,6 +28,8 @@ To pass data between hooks, you can assign values to context in an earlier hook
 For example:
 
 ```ts
+import type { CollectionConfig } from 'payload'
+
 const Customer: CollectionConfig = {
   slug: 'customers',
   hooks: {
@@ -43,7 +45,6 @@ const Customer: CollectionConfig = {
       },
     ],
     afterChange: [
-
       async ({ context, doc, req }) => {
         // use context.customerData without needing to fetch it again
         if (context.customerData.contacted === false) {
@@ -65,6 +66,8 @@ Let's say you have an `afterChange` hook, and you want to do a calculation insid
 Bad example:
 
 ```ts
+import type { CollectionConfig } from 'payload'
+
 const Customer: CollectionConfig = {
   slug: 'customers',
   hooks: {
@@ -92,6 +95,8 @@ Instead of the above, we need to tell the `afterChange` hook to not run again if
 Fixed example:
 
 ```ts
+import type { CollectionConfig } from 'payload'
+
 const MyCollection: CollectionConfig = {
   slug: 'slug',
   hooks: {
@@ -125,7 +130,7 @@ const MyCollection: CollectionConfig = {
 
 The default TypeScript interface for `context` is `{ [key: string]: unknown }`. If you prefer a more strict typing in your project or when authoring plugins for others, you can override this using the `declare` syntax.
 
-This is known as "type augmentation", a TypeScript feature which allows us to add types to existing objects. Simply put this in any `.ts` or `.d.ts` file:
+This is known as "type augmentation", a TypeScript feature which allows us to add types to existing types. Simply put this in any `.ts` or `.d.ts` file:
 
 ```ts
 import { RequestContext as OriginalRequestContext } from 'payload'

docs/hooks/overview.mdx

@@ -37,7 +37,7 @@ Root Hooks are not associated with any specific Collection, Global, or Field. Th
 To add Root Hooks, use the `hooks` property in your [Payload Config](/docs/configuration/config):
 
 ```ts
-import {  buildConfig } from 'payload'
+import { buildConfig } from 'payload'
 
 export default buildConfig({
   // ...
@@ -60,7 +60,7 @@ The following options are available:
 The `afterError` Hook is triggered when an error occurs in the Payload application. This can be useful for logging errors to a third-party service, sending an email to the development team, logging the error to Sentry or DataDog, etc. The output can be used to transform the result object / status code.
 
 ```ts
-import {  buildConfig } from 'payload'
+import { buildConfig } from 'payload'
 
 export default buildConfig({
   // ...

docs/plugins/build-your-own.mdx

@@ -84,7 +84,7 @@ cd dev
 npx create-payload-app@latest
 ```
 
-If you're using the plugin template, the dev folder is built out for you and the `samplePlugin` has already been installed in `dev/payload.config()`.
+If you're using the plugin template, the dev folder is built out for you and the `samplePlugin` has already been installed in `dev/payload.config.ts`.
 
 ```
   plugins: [
@@ -95,11 +95,11 @@ If you're using the plugin template, the dev folder is built out for you an
   ]
 ```
 
-You can add to the `dev/payload.config` and build out the dev project as needed to test your plugin.
+You can add to the `dev/payload.config.ts` and build out the dev project as needed to test your plugin.
 
 When you're ready to start development, navigate into this folder with `cd dev`
 
-And then start the project with `yarn dev` and pull up `http://localhost:3000` in your browser.
+And then start the project with `pnpm dev` and pull up `http://localhost:3000` in your browser.
 
 ## Testing
 
@@ -112,7 +112,7 @@ Jest organizes tests into test suites and cases. We recommend creating tests bas
 The plugin template provides a stubbed out test suite at `dev/plugin.spec.ts` which is ready to go - just add in your own test conditions and you're all set!
 
 ```
-import payload from 'payload'
+let payload: Payload
 
 describe('Plugin tests', () => {
   // Example test to check for seeded data
@@ -245,7 +245,7 @@ config.hooks = {
 ```
 
 ### Extending functions
-Function properties cannot use spread syntax. The way to extend them is to execute the existing function if it exists and then run your additional functionality. 
+Function properties cannot use spread syntax. The way to extend them is to execute the existing function if it exists and then run your additional functionality.
 
 Here is an example extending the `onInit` property:
 
@@ -285,11 +285,11 @@ For a better user experience, provide a way to disable the plugin without uninst
 
 ### Include tests in your GitHub CI workflow
 
-If you've configured tests for your package, integrate them into your workflow to run the tests each time you commit to the plugin repository. Learn more about [how to configure tests into your GitHub CI workflow.](https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs)
+If you've configured tests for your package, integrate them into your workflow to run the tests each time you commit to the plugin repository. Learn more about [how to configure tests into your GitHub CI workflow.](https://docs.github.com/en/actions/use-cases-and-examples/building-and-testing/building-and-testing-nodejs)
 
-### Publish your finished plugin to NPM
+### Publish your finished plugin to npm
 
-The best way to share and allow others to use your plugin once it is complete is to publish an NPM package. This process is straightforward and well documented, find out more about [creating and publishing a NPM package here](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/).
+The best way to share and allow others to use your plugin once it is complete is to publish an npm package. This process is straightforward and well documented, find out more about [creating and publishing a npm package here](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/).
 
 ### Add payload-plugin topic tag
 

docs/plugins/form-builder.mdx

@@ -6,7 +6,7 @@ desc: Easily build and manage forms from the Admin Panel. Send dynamic, personal
 keywords: plugins, plugin, form, forms, form builder
 ---
 
-[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-form-builder)](https://www.npmjs.com/package/@payloadcms/plugin-form-builder)
+[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-form-builder)](https://www.npmjs.com/package/@payloadcms/plugin-form-builder)
 
 This plugin allows you to build and manage custom forms directly within the [Admin Panel](../admin/overview). Instead of hard-coding a new form into your website or application every time you need one, admins can simply define the schema for each form they need on-the-fly, and your front-end can map over this schema, render its own UI components, and match your brand's design system.
 
@@ -33,7 +33,7 @@ Forms can be as simple or complex as you need, from a basic contact form, to a m
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
+Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
 
 ```bash
 pnpm add @payloadcms/plugin-form-builder

docs/plugins/nested-docs.mdx

@@ -6,7 +6,7 @@ desc: Nested documents in a parent, child, and sibling relationship.
 keywords: plugins, nested, documents, parent, child, sibling, relationship
 ---
 
-[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-nested-docs)](https://www.npmjs.com/package/@payloadcms/plugin-nested-docs)
+[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-nested-docs)](https://www.npmjs.com/package/@payloadcms/plugin-nested-docs)
 
 This plugin allows you to easily nest the documents of your application inside of one another. It does so by adding a
 new `parent` field onto each of your documents that, when selected, attaches itself to the parent's tree. When you edit
@@ -44,8 +44,7 @@ but different parents.
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com),
-or [PNPM](https://pnpm.io):
+Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
 
 ```bash
   pnpm add @payloadcms/plugin-nested-docs

docs/plugins/redirects.mdx

@@ -6,7 +6,7 @@ desc: Automatically create redirects for your Payload application
 keywords: plugins, redirects, redirect, plugin, payload, cms, seo, indexing, search, search engine
 ---
 
-[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-redirects)](https://www.npmjs.com/package/@payloadcms/plugin-redirects)
+[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-redirects)](https://www.npmjs.com/package/@payloadcms/plugin-redirects)
 
 This plugin allows you to easily manage redirects for your application from within your [Admin Panel](../admin/overview). It does so by adding a `redirects` collection to your config that allows you specify a redirect from one URL to another. Your front-end application can use this data to automatically redirect users to the correct page using proper HTTP status codes. This is useful for SEO, indexing, and search engine ranking when re-platforming or when changing your URL structure.
 
@@ -29,7 +29,7 @@ For example, if you have a page at `/about` and you want to change it to `/about
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
+Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
 
 ```bash
   pnpm add @payloadcms/plugin-redirects

docs/plugins/search.mdx

@@ -6,7 +6,7 @@ desc: Generates records of your documents that are extremely fast to search on.
 keywords: plugins, search, search plugin, search engine, search index, search results, search bar, search box, search field, search form, search input
 ---
 
-[![NPM](https://img.shields.io/npm/v/@payloadcms/plugin-search)](https://www.npmjs.com/package/@payloadcms/plugin-search)
+[![npm](https://img.shields.io/npm/v/@payloadcms/plugin-search)](https://www.npmjs.com/package/@payloadcms/plugin-search)
 
 This plugin generates records of your documents that are extremely fast to search on. It does so by creating a new `search` collection that is indexed in the database then saving a static copy of each of your documents using only search-critical data. Search records are automatically created, synced, and deleted behind-the-scenes as you manage your application's documents.
 
@@ -37,7 +37,7 @@ This plugin is a great way to implement a fast, immersive search experience such
 
 ## Installation
 
-Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
+Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
 
 ```bash
   pnpm add @payloadcms/plugin-search