feat(plugin-seo): export fields from plugin seo so that they can be imported freely in a collection fields config (#6996)

Exports the fields from the SEO plugin so that they can be used anywhere
inside a collection, new exports:

```ts
import { MetaDescriptionField, MetaImageField, MetaTitleField, OverviewField, PreviewField } from '@payloadcms/plugin-seo/fields'

// Used as fields
MetaImageField({
  relationTo: 'media',
  hasGenerateFn: true,
})

MetaDescriptionField({
  hasGenerateFn: true,
})

MetaTitleField({
  hasGenerateFn: true,
})

PreviewField({
  hasGenerateFn: true,
  titlePath: 'meta.title',
  descriptionPath: 'meta.description',
})

OverviewField({
  titlePath: 'meta.title',
  descriptionPath: 'meta.description',
  imagePath: 'meta.image',
})

```

Author: paulpopus

docs/plugins/seo.mdx

@@ -68,7 +68,7 @@ const config = buildConfig({
         'pages',
       ],
       uploadsCollection: 'media',
-      generateTitle: ({ doc }) => `Website.com — ${doc.title.value}`,
+      generateTitle: ({ doc }) => `Website.com — ${doc.title}`,
       generateDescription: ({ doc }) => doc.excerpt
     })
   ]
@@ -119,7 +119,7 @@ A function that allows you to return any meta title, including from document's c
 {
   // ...
   seoPlugin({
-    generateTitle: ({ ...docInfo, doc, locale }) => `Website.com — ${doc?.title?.value}`,
+    generateTitle: ({ ...docInfo, doc, locale }) => `Website.com — ${doc?.title}`,
   })
 }
 ```
@@ -133,7 +133,7 @@ A function that allows you to return any meta description, including from docume
 {
   // ...
   seoPlugin({
-    generateDescription: ({ ...docInfo, doc, locale }) => doc?.excerpt?.value,
+    generateDescription: ({ ...docInfo, doc, locale }) => doc?.excerpt,
   })
 }
 ```
@@ -147,7 +147,7 @@ A function that allows you to return any meta image, including from document's c
 {
   // ...
   seoPlugin({
-    generateImage: ({ ...docInfo, doc, locale }) => doc?.featuredImage?.value,
+    generateImage: ({ ...docInfo, doc, locale }) => doc?.featuredImage,
   })
 }
 ```
@@ -162,7 +162,7 @@ A function called by the search preview component to display the actual URL of y
   // ...
   seoPlugin({
     generateURL: ({ ...docInfo, doc, locale }) =>
-      `https://yoursite.com/${collection?.slug}/${doc?.slug?.value}`,
+      `https://yoursite.com/${collection?.slug}/${doc?.slug}`,
   })
 }
 ```
@@ -200,6 +200,54 @@ seoPlugin({
 })
 ```
 
+## Direct use of fields
+
+There is the option to directly import any of the fields from the plugin so that you can include them anywhere as needed.
+
+<Banner type="info">
+  You will still need to configure the plugin in the Payload config in order to configure the generation functions.
+  Since these fields are imported and used directly, they don't have access to the plugin config so they may need additional arguments to work the same way.
+</Banner>
+
+```ts
+import { MetaDescriptionField, MetaImageField, MetaTitleField, OverviewField, PreviewField } from '@payloadcms/plugin-seo/fields'
+
+// Used as fields
+MetaImageField({
+  // the upload collection slug
+  relationTo: 'media',
+
+  // if the `generateImage` function is configured
+  hasGenerateFn: true,
+})
+
+MetaDescriptionField({
+  // if the `generateDescription` function is configured
+  hasGenerateFn: true,
+})
+
+MetaTitleField({
+  // if the `generateTitle` function is configured
+  hasGenerateFn: true,
+})
+
+PreviewField({
+  // if the `generateUrl` function is configured
+  hasGenerateFn: true,
+
+  // field paths to match the target field for data
+  titlePath: 'meta.title',
+  descriptionPath: 'meta.description',
+})
+
+OverviewField({
+  // field paths to match the target field for data
+  titlePath: 'meta.title',
+  descriptionPath: 'meta.description',
+  imagePath: 'meta.image',
+})
+```
+
 ## TypeScript
 
 All types can be directly imported:
@@ -213,6 +261,18 @@ import {
 } from '@payloadcms/plugin-seo/types';
 ```
 
+You can then pass the collections from your generated Payload types into the generation types, for example:
+
+```ts
+import { Page } from './payload-types.ts';
+
+import { GenerateTitle } from '@payloadcms/plugin-seo/types';
+
+const generateTitle: GenerateTitle<Page> = async ({ doc, locale }) => {
+  return `Website.com — ${doc?.title}`
+}
+```
+
 ## Examples
 
 The [Templates Directory](https://github.com/payloadcms/payload/tree/main/templates) contains an official [Website Template](https://github.com/payloadcms/payload/tree/main/templates/website) and [E-commerce Template](https://github.com/payloadcms/payload/tree/main/templates/ecommere) which demonstrates exactly how to configure this plugin in Payload and implement it on your front-end.

packages/plugin-seo/package.json

@@ -29,6 +29,11 @@
       "import": "./src/exports/types.ts",
       "types": "./src/exports/types.ts",
       "default": "./src/exports/types.ts"
+    },
+    "./fields": {
+      "import": "./src/exports/fields.ts",
+      "types": "./src/exports/fields.ts",
+      "default": "./src/exports/fields.ts"
     }
   },
   "main": "./src/index.tsx",
@@ -73,6 +78,11 @@
         "import": "./dist/exports/types.js",
         "types": "./dist/exports/types.d.ts",
         "default": "./dist/exports/types.js"
+      },
+      "./fields": {
+        "import": "./dist/exports/fields.js",
+        "types": "./dist/exports/fields.d.ts",
+        "default": "./dist/exports/fields.js"
       }
     },
     "main": "./dist/index.js",

packages/plugin-seo/src/exports/fields.ts

@@ -0,0 +1,5 @@
+export { MetaDescriptionField } from '../fields/MetaDescription/index.js'
+export { MetaImageField } from '../fields/MetaImage/index.js'
+export { MetaTitleField } from '../fields/MetaTitle/index.js'
+export { OverviewField } from '../fields/Overview/index.js'
+export { PreviewField } from '../fields/Preview/index.js'

packages/plugin-seo/src/fields/MetaDescription.tsx renamed to packages/plugin-seo/src/fields/MetaDescription/MetaDescriptionComponent.tsx

@@ -14,11 +14,11 @@ import {
 } from '@payloadcms/ui'
 import React, { useCallback } from 'react'
 
-import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'
-import type { GenerateDescription } from '../types.js'
+import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'
+import type { GenerateDescription } from '../../types.js'
 
-import { defaults } from '../defaults.js'
-import { LengthIndicator } from '../ui/LengthIndicator.js'
+import { defaults } from '../../defaults.js'
+import { LengthIndicator } from '../../ui/LengthIndicator.js'
 
 const { maxLength, minLength } = defaults.description
 
@@ -28,8 +28,8 @@ type MetaDescriptionProps = FormFieldBase & {
   path: string
 }
 
-export const MetaDescription: React.FC<MetaDescriptionProps> = (props) => {
-  const { CustomLabel, hasGenerateDescriptionFn, label, labelProps, path, required } = props
+export const MetaDescriptionComponent: React.FC<MetaDescriptionProps> = (props) => {
+  const { CustomLabel, hasGenerateDescriptionFn, label, labelProps, required } = props
   const { path: pathFromContext } = useFieldProps()
 
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
@@ -39,7 +39,7 @@ export const MetaDescription: React.FC<MetaDescriptionProps> = (props) => {
   const docInfo = useDocumentInfo()
 
   const field: FieldType<string> = useField({
-    path,
+    path: pathFromContext,
   } as Options)
 
   const { errorMessage, setValue, showError, value } = field

packages/plugin-seo/src/fields/MetaDescription/index.ts

@@ -0,0 +1,35 @@
+import type { TextareaField } from 'payload'
+
+import { withMergedProps } from '@payloadcms/ui/shared'
+
+import { MetaDescriptionComponent } from './MetaDescriptionComponent.js'
+
+interface FieldFunctionProps {
+  /**
+   * Tell the component if the generate function is available as configured in the plugin config
+   */
+  hasGenerateFn?: boolean
+  overrides?: Partial<TextareaField>
+}
+
+type FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => TextareaField
+
+export const MetaDescriptionField: FieldFunction = ({ hasGenerateFn = false, overrides }) => {
+  return {
+    name: 'description',
+    type: 'textarea',
+    admin: {
+      components: {
+        Field: withMergedProps({
+          Component: MetaDescriptionComponent,
+          sanitizeServerOnlyProps: true,
+          toMergeIntoProps: {
+            hasGenerateDescriptionFn: hasGenerateFn,
+          },
+        }),
+      },
+    },
+    localized: true,
+    ...((overrides as unknown as TextareaField) ?? {}),
+  }
+}

packages/plugin-seo/src/fields/MetaImage.tsx renamed to packages/plugin-seo/src/fields/MetaImage/MetaImageComponent.tsx

@@ -8,26 +8,28 @@ import {
   useConfig,
   useDocumentInfo,
   useField,
+  useFieldProps,
   useForm,
   useLocale,
   useTranslation,
 } from '@payloadcms/ui'
 import React, { useCallback } from 'react'
 
-import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'
-import type { GenerateImage } from '../types.js'
+import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'
+import type { GenerateImage } from '../../types.js'
 
-import { Pill } from '../ui/Pill.js'
+import { Pill } from '../../ui/Pill.js'
 
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 type MetaImageProps = UploadInputProps & {
   hasGenerateImageFn: boolean
 }
 
-export const MetaImage: React.FC<MetaImageProps> = (props) => {
+export const MetaImageComponent: React.FC<MetaImageProps> = (props) => {
   const { CustomLabel, hasGenerateImageFn, label, labelProps, relationTo, required } = props || {}
+  const { path: pathFromContext } = useFieldProps()
 
-  const field: FieldType<string> = useField(props as Options)
+  const field: FieldType<string> = useField({ ...props, path: pathFromContext } as Options)
 
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
 

packages/plugin-seo/src/fields/MetaImage/index.ts

@@ -0,0 +1,39 @@
+import type { UploadField } from 'payload'
+
+import { withMergedProps } from '@payloadcms/ui/shared'
+
+import { MetaImageComponent } from './MetaImageComponent.js'
+
+interface FieldFunctionProps {
+  /**
+   * Tell the component if the generate function is available as configured in the plugin config
+   */
+  hasGenerateFn?: boolean
+  overrides?: Partial<UploadField>
+  relationTo: string
+}
+
+type FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => UploadField
+
+export const MetaImageField: FieldFunction = ({ hasGenerateFn = false, overrides, relationTo }) => {
+  return {
+    name: 'image',
+    type: 'upload',
+    admin: {
+      components: {
+        Field: withMergedProps({
+          Component: MetaImageComponent,
+          sanitizeServerOnlyProps: true,
+          toMergeIntoProps: {
+            hasGenerateImageFn: hasGenerateFn,
+          },
+        }),
+      },
+      description: 'Maximum upload file size: 12MB. Recommended file size for images is <500KB.',
+    },
+    label: 'Meta Image',
+    localized: true,
+    relationTo,
+    ...((overrides as unknown as UploadField) ?? {}),
+  }
+}

packages/plugin-seo/src/fields/MetaTitle.tsx renamed to packages/plugin-seo/src/fields/MetaTitle/MetaTitleComponent.tsx

@@ -14,12 +14,12 @@ import {
 } from '@payloadcms/ui'
 import React, { useCallback } from 'react'
 
-import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../translations/index.js'
-import type { GenerateTitle } from '../types.js'
+import type { PluginSEOTranslationKeys, PluginSEOTranslations } from '../../translations/index.js'
+import type { GenerateTitle } from '../../types.js'
 
-import { defaults } from '../defaults.js'
-import { LengthIndicator } from '../ui/LengthIndicator.js'
-import './index.scss'
+import { defaults } from '../../defaults.js'
+import { LengthIndicator } from '../../ui/LengthIndicator.js'
+import '../index.scss'
 
 const { maxLength, minLength } = defaults.title
 
@@ -28,14 +28,14 @@ type MetaTitleProps = FormFieldBase & {
   hasGenerateTitleFn: boolean
 }
 
-export const MetaTitle: React.FC<MetaTitleProps> = (props) => {
-  const { CustomLabel, hasGenerateTitleFn, label, labelProps, path, required } = props || {}
+export const MetaTitleComponent: React.FC<MetaTitleProps> = (props) => {
+  const { CustomLabel, hasGenerateTitleFn, label, labelProps, required } = props || {}
   const { path: pathFromContext } = useFieldProps()
 
   const { t } = useTranslation<PluginSEOTranslations, PluginSEOTranslationKeys>()
 
   const field: FieldType<string> = useField({
-    path,
+    path: pathFromContext,
   } as Options)
 
   const locale = useLocale()

packages/plugin-seo/src/fields/MetaTitle/index.ts

@@ -0,0 +1,35 @@
+import type { TextField } from 'payload'
+
+import { withMergedProps } from '@payloadcms/ui/shared'
+
+import { MetaTitleComponent } from './MetaTitleComponent.js'
+
+interface FieldFunctionProps {
+  /**
+   * Tell the component if the generate function is available as configured in the plugin config
+   */
+  hasGenerateFn?: boolean
+  overrides?: Partial<TextField>
+}
+
+type FieldFunction = ({ hasGenerateFn, overrides }: FieldFunctionProps) => TextField
+
+export const MetaTitleField: FieldFunction = ({ hasGenerateFn = false, overrides }) => {
+  return {
+    name: 'title',
+    type: 'text',
+    admin: {
+      components: {
+        Field: withMergedProps({
+          Component: MetaTitleComponent,
+          sanitizeServerOnlyProps: true,
+          toMergeIntoProps: {
+            hasGenerateTitleFn: hasGenerateFn,
+          },
+        }),
+      },
+    },
+    localized: true,
+    ...((overrides as unknown as TextField) ?? {}),
+  }
+}