refactor!: rename widget ComponentPath to Component for consistency (#15780)

- Renames `Widget.ComponentPath` to `Widget.Component` and types it as
`PayloadComponent` instead of `string`
- This aligns dashboard widgets with every other component reference in
Payload (collections, globals, fields, admin components) - none of them
use _path_ in the property name, and all of them are typed as
`PayloadComponent`
- Enables new [typescript
plugin](#15779) to work for
widget paths (the plugin uses `PayloadComponent` contextual type
detection - `string`-typed properties were invisible to it)

## Breaking Change

`Widget.ComponentPath` has been renamed to `Widget.Component`.

### Migration

Find and replace in your Payload config:

```diff
 widgets: [
   {
     slug: 'my-widget',
-    ComponentPath: './components/MyWidget#MyWidget',
+    Component: './components/MyWidget#MyWidget',
   },
 ]
```

Author: AlessioGr

docs/custom-components/dashboard.mdx

@@ -33,7 +33,7 @@ export default buildConfig({
       widgets: [
         {
           slug: 'sales-summary',
-          ComponentPath: './components/SalesSummary.tsx#default',
+          Component: './components/SalesSummary.tsx#default',
           fields: [
             { name: 'title', type: 'text' },
             {
@@ -54,13 +54,13 @@ export default buildConfig({
 
 ### Widget Configuration
 
-| Property           | Type          | Description                                                          |
-| ------------------ | ------------- | -------------------------------------------------------------------- |
-| `slug` \*          | `string`      | Unique identifier for the widget                                     |
-| `ComponentPath` \* | `string`      | Path to the widget component (supports `#` syntax for named exports) |
-| `fields`           | `Field[]`     | Optional widget-specific form fields shown in the edit drawer        |
-| `minWidth`         | `WidgetWidth` | Minimum width the widget can be resized to (default: `'x-small'`)    |
-| `maxWidth`         | `WidgetWidth` | Maximum width the widget can be resized to (default: `'full'`)       |
+| Property       | Type          | Description                                                          |
+| -------------- | ------------- | -------------------------------------------------------------------- |
+| `slug` \*      | `string`      | Unique identifier for the widget                                     |
+| `Component` \* | `string`      | Path to the widget component (supports `#` syntax for named exports) |
+| `fields`       | `Field[]`     | Optional widget-specific form fields shown in the edit drawer        |
+| `minWidth`     | `WidgetWidth` | Minimum width the widget can be resized to (default: `'x-small'`)    |
+| `maxWidth`     | `WidgetWidth` | Maximum width the widget can be resized to (default: `'full'`)       |
 
 **WidgetWidth Values:** `'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'full'`.
 

packages/next/src/views/Dashboard/Default/ModularDashboard/index.tsx

@@ -35,7 +35,7 @@ export async function ModularDashboard(props: DashboardViewServerProps) {
 
     return {
       component: RenderServerComponent({
-        Component: widgetConfig?.ComponentPath,
+        Component: widgetConfig?.Component,
         importMap,
         serverProps: {
           cookies,
@@ -52,7 +52,7 @@ export async function ModularDashboard(props: DashboardViewServerProps) {
 
   // Resolve function labels to static labels for client components
   const clientWidgets: ClientWidget[] = widgets.map((widget) => {
-    const { ComponentPath: _, fields: __, label, ...rest } = widget
+    const { Component: _, fields: __, label, ...rest } = widget
     return {
       ...rest,
       label: typeof label === 'function' ? label({ i18n, t: i18n.t as TFunction }) : label,

packages/next/src/views/Dashboard/Default/ModularDashboard/renderWidget/getDefaultLayoutServerFn.ts

@@ -37,7 +37,7 @@ export const getDefaultLayoutHandler: ServerFunction<
     const widgetSlug = layoutItem.id.slice(0, layoutItem.id.lastIndexOf('-'))
     return {
       component: RenderServerComponent({
-        Component: widgets.find((widget) => widget.slug === widgetSlug)?.ComponentPath,
+        Component: widgets.find((widget) => widget.slug === widgetSlug)?.Component,
         importMap,
         serverProps: {
           cookies,

packages/next/src/views/Dashboard/Default/ModularDashboard/renderWidget/renderWidgetServerFn.ts

@@ -73,7 +73,7 @@ export const renderWidgetHandler: ServerFunction<
 
     // Render the widget server component
     const component = RenderServerComponent({
-      Component: widgetConfig.ComponentPath,
+      Component: widgetConfig.Component,
       importMap,
       serverProps,
     })

packages/payload/src/bin/generateImportMap/iterateConfig.ts

@@ -84,7 +84,7 @@ export function iterateConfig({
 
   if (config.admin?.dashboard?.widgets?.length) {
     for (const dashboardWidget of config.admin.dashboard.widgets) {
-      addToImportMap(dashboardWidget.ComponentPath)
+      addToImportMap(dashboardWidget.Component)
       if (dashboardWidget.fields?.length) {
         genImportMapIterateFields({
           addToImportMap,

packages/payload/src/config/client.ts

@@ -183,7 +183,7 @@ export const createClientConfig = ({
         if (config.admin.dashboard?.widgets) {
           ;(clientConfig.admin.dashboard ??= {}).widgets = config.admin.dashboard.widgets.map(
             (widget) => {
-              const { ComponentPath: _, fields, label, ...rest } = widget
+              const { Component: _, fields, label, ...rest } = widget
               return {
                 ...rest,
                 ...(fields?.length

packages/payload/src/config/sanitize.ts

@@ -58,7 +58,7 @@ const sanitizeAdminConfig = (configToSanitize: Config): Partial<SanitizedConfig>
   }
   ;(sanitizedConfig.admin!.dashboard ??= { widgets: [] }).widgets.push({
     slug: 'collections',
-    ComponentPath: '@payloadcms/next/rsc#CollectionCards',
+    Component: '@payloadcms/next/rsc#CollectionCards',
     minWidth: 'full',
   })
   sanitizedConfig.admin!.dashboard.defaultLayout ??= [

packages/payload/src/config/types.ts

@@ -753,7 +753,7 @@ export type AfterErrorHook = (
 export type WidgetWidth = 'full' | 'large' | 'medium' | 'small' | 'x-large' | 'x-small'
 
 export type Widget = {
-  ComponentPath: string
+  Component: PayloadComponent
   fields?: Field[]
   /**
    * Human-friendly label for the widget.
@@ -807,7 +807,7 @@ export type DashboardConfig = {
 }
 
 export type SanitizedDashboardConfig = {
-  widgets: Array<Omit<Widget, 'ComponentPath'>>
+  widgets: Array<Omit<Widget, 'Component'>>
 }
 
 /**

test/dashboard/config.ts

@@ -64,7 +64,7 @@ export default buildConfigWithDefaults({
       widgets: [
         {
           slug: 'count',
-          ComponentPath: './components/Count.tsx#default',
+          Component: './components/Count.tsx#default',
           fields: [
             {
               name: 'title',
@@ -94,24 +94,24 @@ export default buildConfigWithDefaults({
         },
         {
           slug: 'private',
-          ComponentPath: './components/Private.tsx#default',
+          Component: './components/Private.tsx#default',
           label: 'Private Widget',
         },
         {
           slug: 'revenue',
-          ComponentPath: './components/Revenue.tsx#default',
+          Component: './components/Revenue.tsx#default',
           // Demonstrates function form with i18n - returns localized label via t()
           label: ({ i18n }) => (i18n.language === 'es' ? 'Gráfico de Ingresos' : 'Revenue Chart'),
           minWidth: 'medium',
         },
         {
           slug: 'page-query',
-          ComponentPath: './components/PageQuery.tsx#default',
+          Component: './components/PageQuery.tsx#default',
           label: 'Page Query Widget',
         },
         {
           slug: 'configurable',
-          ComponentPath: './components/Configurable.tsx#default',
+          Component: './components/Configurable.tsx#default',
           fields: [
             {
               name: 'title',