docs: dedicated custom components docs (#10987)

Adds a dedicated "Custom Components" section to the docs.

As users become familiar with building custom components, not all areas
that support customization are well documented. Not only this, but the
current pattern does not allow for deep elaboration on these concepts
without their pages growing to an unmanageable size. Custom components
in general is a large enough topic to merit a standalone section with
subpages. This change will make navigation much more intuitive, help
keep page size down, and provide room to document every single available
custom component with snippets to show exactly how they are typed, etc.

This is a substantial change to the docs, here is the overview: 

- The "Admin > Customizing Components" doc is now located at "Custom
Components > overview"
- The "Admin > Views" doc is now located at "Custom Components > Custom
Views"
- There is a new "Custom Components > Edit View" doc
- There is a new "Custom Components > List View" doc
- The information about root components within the "Admin > Customizing
Components" doc has been moved to a new "Custom Components > Root
Components" doc
- The information about custom providers within the "Admin > Customizing
Components" doc has been moved to a new "Custom Components > Custom
Providers" doc

Similar to the goals of #10743, #10742, and #10741.

Fixes #10872 and initial scaffolding for #10353.

Dependent on #11126.

This change will require the following redirects to be set up:

- `/docs/admin/hooks` → `/docs/admin/react-hooks`
- `/docs/admin/components` → `/docs/custom-components/overview`
- `/docs/admin/views` → `/docs/custom-components/views`

Author: jacobsfletch

docs/admin/customizing-css.mdx

@@ -1,7 +1,7 @@
 ---
 title: Customizing CSS & SCSS
 label: Customizing CSS
-order: 80
+order: 50
 desc: Customize the 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, nextjs
 ---
@@ -30,7 +30,7 @@ Here is an example of how you might target the Dashboard View and change the bac
 
 <Banner type="warning">
   **Note:**
-  If you are building [Custom Components](./components), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
+  If you are building [Custom Components](../custom-components/overview), it is best to import your own stylesheets directly into your components, rather than using the global stylesheet. You can continue to use the [CSS library](#css-library) as needed.
 </Banner>
 
 ### Specificity rules

docs/admin/locked-documents.mdx

@@ -1,7 +1,7 @@
 ---
 title: Document Locking
 label: Document Locking
-order: 90
+order: 40
 desc: Ensure your documents are locked during editing to prevent concurrent changes from multiple users and maintain data integrity.
 keywords: locking, document locking, edit locking, document, concurrency, Payload, headless, Content Management System, cms, javascript, react, node, nextjs
 ---

docs/admin/metadata.mdx

@@ -194,7 +194,7 @@ The Global Meta config has the same options as the [Root Metadata](#root-metadat
 
 ## View Metadata
 
-View Metadata is the metadata that is applied to specific [Views](./views) within the Admin Panel. This metadata is used to customize the title and description of a specific view, overriding any metadata set at the [Root](#root-metadata), [Collection](#collection-metadata), or [Global](#global-metadata) level.
+View Metadata is the metadata that is applied to specific [Views](../custom-components/custom-views) within the Admin Panel. This metadata is used to customize the title and description of a specific view, overriding any metadata set at the [Root](#root-metadata), [Collection](#collection-metadata), or [Global](#global-metadata) level.
 
 To customize View Metadata, use the `meta` key within your View Config:
 

docs/admin/overview.mdx

@@ -8,12 +8,12 @@ keywords: admin, components, custom, customize, documentation, Content Managemen
 
 Payload dynamically generates a beautiful, [fully type-safe](../typescript/overview) Admin Panel to manage your users and data. It is highly performant, even with 100+ fields, and is translated in over 30 languages. Within the Admin Panel you can manage content, [render your site](../live-preview/overview), [preview drafts](./preview), [diff versions](../versions/overview), and so much more.
 
-The Admin Panel is designed to [white-label your brand](https://payloadcms.com/blog/white-label-admin-ui). You can endlessly customize and extend the Admin UI by swapping in your own [Custom Components](./components)—everything from simple field labels to entire views can be modified or replaced to perfectly tailor the interface for your editors.
+The Admin Panel is designed to [white-label your brand](https://payloadcms.com/blog/white-label-admin-ui). You can endlessly customize and extend the Admin UI by swapping in your own [Custom Components](../custom-components/overview)—everything from simple field labels to entire views can be modified or replaced to perfectly tailor the interface for your editors.
 
 The Admin Panel is written in [TypeScript](https://www.typescriptlang.org) and built with [React](https://react.dev) using the [Next.js App Router](https://nextjs.org/docs/app). It supports [React Server Components](https://react.dev/reference/rsc/server-components), enabling the use of the [Local API](/docs/local-api/overview) on the front-end. You can install Payload into any [existing Next.js app in just one line](../getting-started/installation) and [deploy it anywhere](../production/deployment).
 
 <Banner type="success">
-  The Payload Admin Panel is designed to be as minimal and straightforward as possible to allow easy customization and control. [Learn more](./components).
+  The Payload Admin Panel is designed to be as minimal and straightforward as possible to allow easy customization and control. [Learn more](../custom-components/overview).
 </Banner>
 
 <LightDarkImage
@@ -91,7 +91,7 @@ The following options are available:
 | **`avatar`**                   | Set account profile picture. Options: `gravatar`, `default` or a custom React component.                                                                              |
 | **`autoLogin`**                | Used to automate log-in for dev and demonstration convenience. [More details](../authentication/overview).                                                            |
 | **`buildPath`**                | Specify an absolute path for where to store the built Admin bundle used in production. Defaults to `path.resolve(process.cwd(), 'build')`.                            |
-| **`components`**               | Component overrides that affect the entirety of the Admin Panel. [More details](./components).                                                                        |
+| **`components`**               | Component overrides that affect the entirety of the Admin Panel. [More details](../custom-components/overview).                                                                        |
 | **`custom`**                   | Any custom properties you wish to pass to the Admin Panel.                                                                                                            |
 | **`dateFormat`**               | The date format that will be used for all dates within the Admin Panel. Any valid [date-fns](https://date-fns.org/) format pattern can be used.                       |
 | **`livePreview`**              | Enable real-time editing for instant visual feedback of your front-end application. [More details](../live-preview/overview).                                         |
@@ -178,7 +178,7 @@ The following options are available:
 
 <Banner type="success">
   **Tip:**
-  You can easily add _new_ routes to the Admin Panel through [Custom Endpoints](../rest-api/overview#custom-endpoints) and [Custom Views](./views).
+  You can easily add _new_ routes to the Admin Panel through [Custom Endpoints](../rest-api/overview#custom-endpoints) and [Custom Views](../custom-components/custom-views).
 </Banner>
 
 #### Customizing Root-level Routes
@@ -233,7 +233,7 @@ The following options are available:
 
 <Banner type="success">
   **Note:**
-  You can also swap out entire _views_ out for your own, using the `admin.views` property of the Payload Config. See [Custom Views](./views) for more information.
+  You can also swap out entire _views_ out for your own, using the `admin.views` property of the Payload Config. See [Custom Views](../custom-components/custom-views) for more information.
 </Banner>
 
 ## I18n

docs/admin/preferences.mdx

@@ -1,7 +1,7 @@
 ---
 title: Managing User Preferences
 label: Preferences
-order: 70
+order: 60
 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, nextjs
 ---
@@ -81,7 +81,7 @@ import { usePreferences } from '@payloadcms/ui'
 
 const lastUsedColorsPreferenceKey = 'last-used-colors';
 
-const CustomComponent = (props) => {
+export function CustomComponent() {
   const { getPreference, setPreference } = usePreferences();
 
   // Store the last used colors in local state
@@ -154,8 +154,6 @@ const CustomComponent = (props) => {
         </Fragment>
       )}
     </div>
-  );
-};
-
-export default CustomComponent;
+  )
+}
 ```

docs/admin/preview.mdx

@@ -1,7 +1,7 @@
 ---
 title: Preview
 label: Preview
-order: 50
+order: 30
 desc: Enable links to your front-end to preview published or draft content.
 keywords: admin, components, preview, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---

docs/admin/hooks.mdx renamed to docs/admin/react-hooks.mdx

@@ -1,16 +1,16 @@
 ---
 title: React Hooks
 label: React Hooks
-order: 40
+order: 50
 desc: Make use of all of the powerful React hooks that Payload provides.
 keywords: admin, components, custom, documentation, Content Management System, cms, headless, javascript, node, react, nextjs
 ---
 
-Payload provides a variety of powerful [React Hooks](https://react.dev/reference/react-dom/hooks) that can be used within your own [Custom Components](./components), such as [Custom Fields](../fields/overview#custom-components). With them, you can interface with Payload itself to build just about any type of complex customization you can think of.
+Payload provides a variety of powerful [React Hooks](https://react.dev/reference/react-dom/hooks) that can be used within your own [Custom Components](../custom-components/overview), such as [Custom Fields](../fields/overview#custom-components). With them, you can interface with Payload itself to build just about any type of complex customization you can think of.
 
 <Banner type="warning">
   **Reminder:**
-  All Custom Components are [React Server Components](https://react.dev/reference/rsc/server-components) by default. Hooks, on the other hand, are only available in client-side environments. To use hooks, [ensure your component is a client component](./components#client-components).
+  All Custom Components are [React Server Components](https://react.dev/reference/rsc/server-components) by default. Hooks, on the other hand, are only available in client-side environments. To use hooks, [ensure your component is a client component](../custom-components/overview#client-components).
 </Banner>
 
 ## useField
@@ -875,7 +875,7 @@ const Greeting: React.FC = () => {
 
 ## useConfig
 
-Used to retrieve the Payload [Client Config](./components#accessing-the-payload-config).
+Used to retrieve the Payload [Client Config](../custom-components/overview#accessing-the-payload-config).
 
 ```tsx
 'use client'