feat(plugin-seo)!: remove support for payload <2.7.0 (#4765)

Author: AlessioGr

packages/plugin-seo/README.md

@@ -2,6 +2,10 @@
 
 A plugin for [Payload](https://github.com/payloadcms/payload) to manage SEO metadata from within your admin panel.
 
+If you're using version 2.0.0 or higher of this plugin, you'll need to be using version 2.7.0 or higher of Payload.
+
+If you're still on an older payload version, please use version 1.0.15.
+
 - [Source code](https://github.com/payloadcms/payload/tree/main/packages/plugin-seo)
 - [Documentation](https://payloadcms.com/docs/plugins/seo)
 - [Documentation source](https://github.com/payloadcms/payload/tree/main/docs/plugins/seo.mdx)

packages/plugin-seo/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@payloadcms/plugin-seo",
- "version": "1.1.0",
+ "version": "2.0.0",
  "homepage:": "https://payloadcms.com",
  "repository": "git@github.com:payloadcms/plugin-seo.git",
  "description": "SEO plugin for Payload",
@@ -28,13 +28,13 @@
  "author": "dev@payloadcms.com",
  "license": "MIT",
  "peerDependencies": {
- "payload": "^0.18.5 || ^1.0.0 || ^2.0.0",
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ "payload": "^2.7.0",
+ "react": "^18.0.0"
  },
  "devDependencies": {
  "@payloadcms/eslint-config": "workspace:*",
- "@types/express": "^4.17.9",
- "@types/react": "18.0.21",
+ "@types/express": "4.17.17",
+ "@types/react": "18.2.15",
  "payload": "workspace:*",
  "react": "^18.0.0"
  },

packages/plugin-seo/src/fields/MetaDescription.tsx

@@ -1,18 +1,15 @@
 'use client'
 
-// TODO: fix this import to work in dev mode within the monorepo in a way that is backwards compatible with 1.x
-// import TextareaInput from 'payload/dist/admin/components/forms/field-types/Textarea/Input'
 import type { FieldType, Options } from 'payload/dist/admin/components/forms/useField/types'
 import type { TextareaField } from 'payload/types'
 
 import { TextareaInput, useAllFormFields, useField } from 'payload/components/forms'
 import { useDocumentInfo, useLocale } from 'payload/components/utilities'
 import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import type { PluginConfig } from '../types'
 
-import { useTranslation } from 'react-i18next'
-
 import { defaults } from '../defaults'
 import { LengthIndicator } from '../ui/LengthIndicator'
 
@@ -96,7 +93,7 @@ export const MetaDescription: React.FC<MetaDescriptionProps> = (props) => {
  color: '#9A9A9A',
  }}
  >
- {t('lengthTipDescription', { minLength, maxLength })}
+ {t('lengthTipDescription', { maxLength, minLength })}
  <a
  href="https://developers.google.com/search/docs/advanced/appearance/snippet#meta-descriptions"
  rel="noopener noreferrer"
@@ -130,7 +127,7 @@ export const MetaDescription: React.FC<MetaDescriptionProps> = (props) => {
  width: '100%',
  }}
  >
- <LengthIndicator maxLength={maxLength} minLength={minLength} text={value as string} />
+ <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />
  </div>
  </div>
  )

packages/plugin-seo/src/fields/MetaImage.tsx

@@ -1,18 +1,15 @@
 'use client'
 
-import type { FieldType, Options } from 'payload/dist/admin/components/forms/useField/types'
-// TODO: fix this import to work in dev mode within the monorepo in a way that is backwards compatible with 1.x
-// import UploadInput from 'payload/dist/admin/components/forms/field-types/Upload/Input'
 import type { Props as UploadInputProps } from 'payload/components/fields/Upload'
+import type { FieldType, Options } from 'payload/dist/admin/components/forms/useField/types'
 
 import { UploadInput, useAllFormFields, useField } from 'payload/components/forms'
 import { useConfig, useDocumentInfo, useLocale } from 'payload/components/utilities'
 import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import type { PluginConfig } from '../types'
 
-import { useTranslation } from 'react-i18next'
-
 import { Pill } from '../ui/Pill'
 
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents

packages/plugin-seo/src/fields/MetaTitle.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-// TODO: fix this import to work in dev mode within the monorepo in a way that is backwards compatible with 1.x
-// import TextInput from 'payload/dist/admin/components/forms/field-types/Text/Input'
 import type {
  FieldType as FieldType,
  Options,
@@ -11,9 +9,9 @@ import type { TextField as TextFieldType } from 'payload/types'
 import { TextInput, useAllFormFields, useField } from 'payload/components/forms'
 import { useDocumentInfo, useLocale } from 'payload/components/utilities'
 import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import type { PluginConfig } from '../types'
-import { useTranslation } from 'react-i18next'
 
 import { defaults } from '../defaults'
 import { LengthIndicator } from '../ui/LengthIndicator'
@@ -98,7 +96,7 @@ export const MetaTitle: React.FC<MetaTitleProps> = (props) => {
  color: '#9A9A9A',
  }}
  >
- {t('lengthTipTitle', { minLength, maxLength })}
+ {t('lengthTipTitle', { maxLength, minLength })}
  <a
  href="https://developers.google.com/search/docs/advanced/appearance/title-link#page-titles"
  rel="noopener noreferrer"
@@ -133,7 +131,7 @@ export const MetaTitle: React.FC<MetaTitleProps> = (props) => {
  width: '100%',
  }}
  >
- <LengthIndicator maxLength={maxLength} minLength={minLength} text={value as string} />
+ <LengthIndicator maxLength={maxLength} minLength={minLength} text={value} />
  </div>
  </div>
  )

packages/plugin-seo/src/index.ts

@@ -1,58 +1,61 @@
 import type { Config } from 'payload/config'
 import type { Field, GroupField, TabsField } from 'payload/dist/fields/config/types'
 
+import { deepMerge } from 'payload/utilities'
+
 import type { PluginConfig } from './types'
 
 import { getMetaDescriptionField } from './fields/MetaDescription'
 import { getMetaImageField } from './fields/MetaImage'
 import { getMetaTitleField } from './fields/MetaTitle'
+import translations from './translations'
 import { Overview } from './ui/Overview'
 import { getPreviewField } from './ui/Preview'
-import { deepMerge } from 'payload/dist/utilities/deepMerge'
-import translations from './translations'
 
 const seo =
  (pluginConfig: PluginConfig) =>
  (config: Config): Config => {
  const seoFields: GroupField[] = [
  {
  name: 'meta',
+ type: 'group',
  fields: [
  {
  name: 'overview',
+ type: 'ui',
  admin: {
  components: {
  Field: Overview,
  },
  },
  label: 'Overview',
- type: 'ui',
  },
  {
  name: 'title',
+ type: 'text',
  admin: {
  components: {
  Field: (props) => getMetaTitleField({ ...props, pluginConfig }),
  },
  },
  localized: true,
- type: 'text',
  },
  {
  name: 'description',
+ type: 'textarea',
  admin: {
  components: {
  Field: (props) => getMetaDescriptionField({ ...props, pluginConfig }),
  },
  },
  localized: true,
- type: 'textarea',
  },
  ...(pluginConfig?.uploadsCollection
  ? [
  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
  {
  name: 'image',
+ type: 'upload',
  admin: {
  components: {
  Field: (props) => getMetaImageField({ ...props, pluginConfig }),
@@ -63,24 +66,22 @@ const seo =
  label: 'Meta Image',
  localized: true,
  relationTo: pluginConfig?.uploadsCollection,
- type: 'upload',
  } as Field,
  ]
  : []),
  ...(pluginConfig?.fields || []),
  {
  name: 'preview',
+ type: 'ui',
  admin: {
  components: {
  Field: (props) => getPreviewField({ ...props, pluginConfig }),
  },
  },
  label: 'Preview',
- type: 'ui',
  },
  ],
  label: 'SEO',
- type: 'group',
  },
  ]
 
@@ -95,6 +96,7 @@ const seo =
  if (pluginConfig?.tabbedUI) {
  const seoTabs: TabsField[] = [
  {
+ type: 'tabs',
  tabs: [
  // append a new tab onto the end of the tabs array, if there is one at the first index
  // if needed, create a new `Content` tab in the first index for this collection's base fields
@@ -111,7 +113,6 @@ const seo =
  label: 'SEO',
  },
  ],
- type: 'tabs',
  },
  ]
 
@@ -141,6 +142,7 @@ const seo =
  if (pluginConfig?.tabbedUI) {
  const seoTabs: TabsField[] = [
  {
+ type: 'tabs',
  tabs: [
  // append a new tab onto the end of the tabs array, if there is one at the first index
  // if needed, create a new `Content` tab in the first index for this global's base fields
@@ -157,7 +159,6 @@ const seo =
  label: 'SEO',
  },
  ],
- type: 'tabs',
  },
  ]
 

packages/plugin-seo/src/ui/LengthIndicator.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import React, { Fragment, useEffect, useState } from 'react'
-
 import { useTranslation } from 'react-i18next'
 
 import { Pill } from './Pill'
@@ -98,7 +97,7 @@ export const LengthIndicator: React.FC<{
  }}
  >
  <small>
- {t('characterCount', { current: text?.length || 0, minLength, maxLength })}
+ {t('characterCount', { current: text?.length || 0, maxLength, minLength })}
  {(textLength === 0 || charsUntilMin > 0) && (
  <Fragment>{t('charactersToGo', { characters: charsUntilMin })}</Fragment>
  )}

packages/plugin-seo/src/ui/Overview.tsx

@@ -4,7 +4,6 @@ import type { FormField } from 'payload/types'
 
 import { useAllFormFields, useForm } from 'payload/components/forms'
 import React, { useCallback, useEffect, useState } from 'react'
-
 import { useTranslation } from 'react-i18next'
 
 import { defaults } from '../defaults'

packages/plugin-seo/src/ui/Preview.tsx

@@ -6,6 +6,7 @@ import { useAllFormFields } from 'payload/components/forms'
 import { useDocumentInfo, useLocale } from 'payload/components/utilities'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+
 import type { PluginConfig } from '../types'
 
 // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents