fix: image field and type errors

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

@@ -1,21 +1,22 @@
 import React, { useCallback } from 'react';
-import { Props as TextFieldType } from 'payload/dist/admin/components/forms/field-types/Text/types';
 import { useField, useWatchForm } from 'payload/components/forms';
 import { FieldType, Options } from 'payload/dist/admin/components/forms/useField/types';
 import { LengthIndicator } from '../ui/LengthIndicator';
 import { defaults } from '../defaults';
 import TextareaInput from 'payload/dist/admin/components/forms/field-types/Textarea/Input';
+import { TextareaField } from 'payload/dist/fields/config/types';
 
 const {
   minLength,
   maxLength,
 } = defaults.description;
 
-export const MetaDescription: React.FC<TextFieldType> = (props) => {
+export const MetaDescription: React.FC<TextareaField | {}> = (props) => {
+  // TODO: this temporary until payload types are updated for custom field props
   const {
     label,
     name
-  } = props;
+  } = props as TextareaField || {};
 
   const { fields } = useWatchForm();
 

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

@@ -6,13 +6,14 @@ import { useField, useWatchForm } from 'payload/components/forms';
 import { FieldType, Options } from 'payload/dist/admin/components/forms/useField/types';
 import { Pill } from '../ui/Pill';
 
-export const MetaImage: React.FC<UploadFieldType> = (props) => {
+export const MetaImage: React.FC<UploadFieldType | {}> = (props) => {
+  // TODO: this temporary until payload types are updated for custom field props
   const {
     label,
     relationTo,
     fieldTypes,
     name,
-  } = props;
+  } = props as UploadFieldType || {};
 
   const field: FieldType<string> = useField(props as Options);
 
@@ -42,7 +43,7 @@ export const MetaImage: React.FC<UploadFieldType> = (props) => {
 
   const hasImage = Boolean(value);
 
-  const config = useConfig(); // TODO: this returns an empty object
+  const config = useConfig();
 
   const {
     collections,

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

@@ -11,11 +11,12 @@ const {
   maxLength,
 } = defaults.title;
 
-export const MetaTitle: React.FC<TextFieldType> = (props) => {
+export const MetaTitle: React.FC<TextFieldType | {}> = (props) => {
+  // TODO: this temporary until payload types are updated for custom field props
   const {
     label,
     name
-  } = props;
+  } = props as TextFieldType || {};
 
   const field: FieldType<string> = useField(props as Options);
 

packages/plugin-seo/src/index.ts

@@ -1,87 +1,92 @@
 import { Config } from 'payload/config';
-import { CollectionConfig } from 'payload/dist/collections/config/types';
 import { MetaDescription } from './fields/MetaDescription';
 import { Overview } from './ui/Overview';
 import { MetaTitle } from './fields/MetaTitle';
 import { Preview } from './ui/Preview';
 import { MetaImage } from './fields/MetaImage';
 import { SEOConfig } from './types';
+import { Field } from 'payload/dist/fields/config/types';
 
-const seo = (seoConfig: SEOConfig) => (config: Config): Config => ({
-  ...config,
-  collections: config.collections?.map((collection) => {
-    const { slug } = collection;
-    const isEnabled = seoConfig?.collections?.includes(slug);
-
-    if (isEnabled) {
-      return ({
-        ...collection,
-        fields: [
-          ...collection?.fields || [],
-          {
-            name: 'meta',
-            label: 'SEO',
-            type: 'group',
-            fields: [
-              {
-                name: 'overview',
-                label: 'Overview',
-                type: 'ui',
-                admin: {
-                  components: {
-                    Field: Overview,
-                  },
-                },
-              },
-              {
-                name: 'title',
-                label: 'Meta Title',
-                type: 'text',
-                admin: {
-                  components: {
-                    Field: MetaTitle,
-                  },
-                },
-              },
-              {
-                name: 'description',
-                label: 'Meta Description',
-                type: 'textarea',
-                admin: {
-                  components: {
-                    Field: MetaDescription,
-                  },
-                },
-              },
-              {
-                name: 'image',
-                label: 'Meta Image',
-                type: 'upload',
-                relationTo: seoConfig?.uploadsCollection || '',
-                admin: {
-                  description: 'Maximum upload file size: 12MB. Recommended file size for images is <500KB.',
-                  components: {
-                    Field: MetaImage,
-                  },
-                },
-              },
-              {
-                name: 'preview',
-                label: 'Preview',
-                type: 'ui',
-                admin: {
-                  components: {
-                    Field: Preview,
-                  },
-                },
-              },
-            ],
+const seo = (seoConfig: SEOConfig) => (config: Config): Config => {
+  const seoFields: Field[] = [
+    {
+      name: 'meta',
+      label: 'SEO',
+      type: 'group',
+      fields: [
+        {
+          name: 'overview',
+          label: 'Overview',
+          type: 'ui',
+          admin: {
+            components: {
+              Field: Overview,
+            },
           },
-        ],
-      }) as CollectionConfig;
+        },
+        {
+          name: 'title',
+          type: 'text',
+          admin: {
+            components: {
+              Field: MetaTitle,
+            },
+          },
+        },
+        {
+          name: 'description',
+          label: 'Meta Description',
+          type: 'textarea',
+          admin: {
+            components: {
+              Field: MetaDescription,
+            },
+          },
+        },
+        ...seoConfig?.uploadsCollection ? [{
+          name: 'image',
+          label: 'Meta Image',
+          type: 'upload',
+          relationTo: seoConfig?.uploadsCollection,
+          admin: {
+            description: 'Maximum upload file size: 12MB. Recommended file size for images is <500KB.',
+            components: {
+              Field: MetaImage,
+            },
+          },
+        } as Field] : [],
+        {
+          name: 'preview',
+          label: 'Preview',
+          type: 'ui',
+          admin: {
+            components: {
+              Field: Preview,
+            },
+          },
+        },
+      ]
     }
-    return collection;
-  }),
-});
+  ]
+
+  return ({
+    ...config,
+    collections: config.collections?.map((collection) => {
+      const { slug } = collection;
+      const isEnabled = seoConfig?.collections?.includes(slug);
+
+      if (isEnabled) {
+        return ({
+          ...collection,
+          fields: [
+            ...collection?.fields || [],
+            ...seoFields,
+          ],
+        })
+      }
+      return collection;
+    }) || []
+  })
+};
 
 export default seo;

packages/plugin-seo/src/types.ts

@@ -1,6 +1,10 @@
+import { Field } from "payload/dist/fields/config/types";
+
 export type SEOConfig = {
   collections?: string[]
   uploadsCollection?: string
+  fields?: Partial<Field>[]
   generateTitle?: (args: { doc: any }) => string | Promise<string>
   generateDescription?: (args: { doc: any }) => string | Promise<string>
+  generateImage?: (args: { doc: any }) => string | Promise<string>
 }

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

@@ -1,8 +1,6 @@
-/* eslint-disable no-use-before-define */
-/* eslint-disable import/no-extraneous-dependencies */
 // import { Button } from 'payload/components';
 import { useForm, useWatchForm } from 'payload/components/forms';
-// import { FormContext } from 'payload/dist/admin/components/forms/Form/context';
+import { Field } from 'payload/dist/admin/components/forms/Form/types';
 import React, { useCallback, useState, useEffect } from 'react';
 import { defaults } from '../defaults';
 
@@ -27,13 +25,13 @@ export const Overview: React.FC = () => {
     fields: {
       'meta.title': {
         value: metaTitle,
-      },
+      } = {} as Field,
       'meta.description': {
         value: metaDesc,
-      },
+      } = {} as Field,
       'meta.image': {
         value: metaImage,
-      },
+      } = {} as Field,
     },
   } = useWatchForm();
 

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

@@ -1,7 +1,6 @@
-/* eslint-disable no-use-before-define */
-/* eslint-disable import/no-extraneous-dependencies */
 import { useWatchForm } from 'payload/components/forms';
 import React from 'react';
+import { Field } from 'payload/dist/admin/components/forms/Form/types';
 
 export const Preview: React.FC = () => {
   const { fields } = useWatchForm();
@@ -9,10 +8,10 @@ export const Preview: React.FC = () => {
   const {
     'meta.title': {
       value: metaTitle,
-    },
+    } = {} as Field,
     'meta.description': {
       value: metaDescription,
-    },
+    } = {} as Field,
   } = fields;
 
   return (