From 5e083689d016fbff6c83419336e920f248932993 Mon Sep 17 00:00:00 2001 From: Alessio Gravili <70709113+AlessioGr@users.noreply.github.com> Date: Wed, 10 Jan 2024 17:29:29 +0100 Subject: [PATCH] feat(plugin-seo)!: remove support for payload <2.7.0 (#4765) --- packages/plugin-seo/README.md | 4 ++++ packages/plugin-seo/package.json | 10 ++++----- .../plugin-seo/src/fields/MetaDescription.tsx | 9 +++----- packages/plugin-seo/src/fields/MetaImage.tsx | 7 ++----- packages/plugin-seo/src/fields/MetaTitle.tsx | 8 +++---- packages/plugin-seo/src/index.ts | 21 ++++++++++--------- .../plugin-seo/src/ui/LengthIndicator.tsx | 3 +-- packages/plugin-seo/src/ui/Overview.tsx | 1 - packages/plugin-seo/src/ui/Preview.tsx | 1 + pnpm-lock.yaml | 6 +++--- 10 files changed, 33 insertions(+), 37 deletions(-) diff --git a/packages/plugin-seo/README.md b/packages/plugin-seo/README.md index 1de4a85ec2f..7efce2439c9 100644 --- a/packages/plugin-seo/README.md +++ b/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) diff --git a/packages/plugin-seo/package.json b/packages/plugin-seo/package.json index 4377cda4b39..386f051e02b 100644 --- a/packages/plugin-seo/package.json +++ b/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" }, diff --git a/packages/plugin-seo/src/fields/MetaDescription.tsx b/packages/plugin-seo/src/fields/MetaDescription.tsx index 7c79b94c2a3..2539b1748d2 100644 --- a/packages/plugin-seo/src/fields/MetaDescription.tsx +++ b/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 = (props) => { color: '#9A9A9A', }} > - {t('lengthTipDescription', { minLength, maxLength })} + {t('lengthTipDescription', { maxLength, minLength })} = (props) => { width: '100%', }} > - + ) diff --git a/packages/plugin-seo/src/fields/MetaImage.tsx b/packages/plugin-seo/src/fields/MetaImage.tsx index cf653111341..7df4381707c 100644 --- a/packages/plugin-seo/src/fields/MetaImage.tsx +++ b/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 diff --git a/packages/plugin-seo/src/fields/MetaTitle.tsx b/packages/plugin-seo/src/fields/MetaTitle.tsx index 5ffe3432773..6e6309e81d7 100644 --- a/packages/plugin-seo/src/fields/MetaTitle.tsx +++ b/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 = (props) => { color: '#9A9A9A', }} > - {t('lengthTipTitle', { minLength, maxLength })} + {t('lengthTipTitle', { maxLength, minLength })} = (props) => { width: '100%', }} > - + ) diff --git a/packages/plugin-seo/src/index.ts b/packages/plugin-seo/src/index.ts index 0919546af4a..df9f57c5793 100644 --- a/packages/plugin-seo/src/index.ts +++ b/packages/plugin-seo/src/index.ts @@ -1,15 +1,16 @@ 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) => @@ -17,42 +18,44 @@ const seo = 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', }, ] diff --git a/packages/plugin-seo/src/ui/LengthIndicator.tsx b/packages/plugin-seo/src/ui/LengthIndicator.tsx index 0ece606da8d..5db5099be57 100644 --- a/packages/plugin-seo/src/ui/LengthIndicator.tsx +++ b/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<{ }} > - {t('characterCount', { current: text?.length || 0, minLength, maxLength })} + {t('characterCount', { current: text?.length || 0, maxLength, minLength })} {(textLength === 0 || charsUntilMin > 0) && ( {t('charactersToGo', { characters: charsUntilMin })} )} diff --git a/packages/plugin-seo/src/ui/Overview.tsx b/packages/plugin-seo/src/ui/Overview.tsx index 4f9db00517c..f9f8a60ac5a 100644 --- a/packages/plugin-seo/src/ui/Overview.tsx +++ b/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' diff --git a/packages/plugin-seo/src/ui/Preview.tsx b/packages/plugin-seo/src/ui/Preview.tsx index ec00d928752..33fc13066f4 100644 --- a/packages/plugin-seo/src/ui/Preview.tsx +++ b/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 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d11808eefa..578fe9d5c15 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1294,11 +1294,11 @@ importers: specifier: workspace:* version: link:../eslint-config-payload '@types/express': - specifier: ^4.17.9 + specifier: 4.17.17 version: 4.17.17 '@types/react': - specifier: 18.0.21 - version: 18.0.21 + specifier: 18.2.15 + version: 18.2.15 payload: specifier: workspace:* version: link:../payload