chore(templates): fix eslint errors in website template (#10752)

templates/website/eslint.config.mjs

@@ -30,6 +30,9 @@ const eslintConfig = [
       ],
     },
   },
+  {
+    ignores: ['.next/'],
+  },
 ]
 
 export default eslintConfig

templates/website/postcss.config.js

@@ -1,6 +1,8 @@
-export default {
+const config = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
 }
+
+export default config

templates/website/src/Footer/RowLabel.tsx

@@ -2,7 +2,7 @@
 import { Header } from '@/payload-types'
 import { RowLabelProps, useRowLabel } from '@payloadcms/ui'
 
-export const RowLabel: React.FC<RowLabelProps> = (props) => {
+export const RowLabel: React.FC<RowLabelProps> = () => {
   const data = useRowLabel<NonNullable<Header['navItems']>[number]>()
 
   const label = data?.data?.link?.label

templates/website/src/Header/RowLabel.tsx

@@ -2,7 +2,7 @@
 import { Header } from '@/payload-types'
 import { RowLabelProps, useRowLabel } from '@payloadcms/ui'
 
-export const RowLabel: React.FC<RowLabelProps> = (props) => {
+export const RowLabel: React.FC<RowLabelProps> = () => {
   const data = useRowLabel<NonNullable<Header['navItems']>[number]>()
 
   const label = data?.data?.link?.label

templates/website/src/app/(frontend)/next/preview/route.ts

@@ -4,8 +4,6 @@ import { getPayload, type PayloadRequest } from 'payload'
 import configPromise from '@payload-config'
 import { CollectionSlug } from 'payload'
 
-const payloadToken = 'payload-token'
-
 export async function GET(
   req: Request & {
     cookies: {
@@ -16,7 +14,6 @@ export async function GET(
   },
 ): Promise<Response> {
   const payload = await getPayload({ config: configPromise })
-  const token = req.cookies.get(payloadToken)?.value
   const { searchParams } = new URL(req.url)
   const path = searchParams.get('path')
   const collection = searchParams.get('collection') as CollectionSlug

templates/website/src/app/(frontend)/next/seed/route.ts

@@ -5,15 +5,7 @@ import { headers } from 'next/headers'
 
 export const maxDuration = 60 // This function can run for a maximum of 60 seconds
 
-export async function POST(
+export async function POST(): Promise<Response> {
-  req: Request & {
-    cookies: {
-      get: (name: string) => {
-        value: string
-      }
-    }
-  },
-): Promise<Response> {
   const payload = await getPayload({ config })
   const requestHeaders = await headers()
 

templates/website/src/app/(frontend)/search/page.tsx

@@ -4,7 +4,6 @@ import { CollectionArchive } from '@/components/CollectionArchive'
 import configPromise from '@payload-config'
 import { getPayload } from 'payload'
 import React from 'react'
-import { Post } from '@/payload-types'
 import { Search } from '@/search/Component'
 import PageClient from './page.client'
 import { CardPostData } from '@/components/Card'

templates/website/src/blocks/Form/Checkbox/index.tsx

@@ -12,14 +12,8 @@ import { Width } from '../Width'
 
 export const Checkbox: React.FC<
   CheckboxField & {
-    errors: Partial<
+    errors: Partial<FieldErrorsImpl>
-      FieldErrorsImpl<{
-        [x: string]: any
-      }>
-    >
-    getValues: any
     register: UseFormRegister<FieldValues>
-    setValue: any
   }
 > = ({ name, defaultValue, errors, label, register, required, width }) => {
   const props = register(name, { required: required })

templates/website/src/blocks/Form/Component.tsx

@@ -142,6 +142,7 @@ export const FormBlock: React.FC<
                 {formFromProps &&
                   formFromProps.fields &&
                   formFromProps.fields?.map((field, index) => {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     const Field: React.FC<any> = fields?.[field.blockType as keyof typeof fields]
                     if (Field) {
                       return (

templates/website/src/blocks/Form/Country/index.tsx

@@ -1,5 +1,5 @@
 import type { CountryField } from '@payloadcms/plugin-form-builder/types'
-import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
+import type { Control, FieldErrorsImpl } from 'react-hook-form'
 
 import { Label } from '@/components/ui/label'
 import {
@@ -18,12 +18,8 @@ import { countryOptions } from './options'
 
 export const Country: React.FC<
   CountryField & {
-    control: Control<FieldValues, any>
+    control: Control
-    errors: Partial<
+    errors: Partial<FieldErrorsImpl>
-      FieldErrorsImpl<{
-        [x: string]: any
-      }>
-    >
   }
 > = ({ name, control, errors, label, required, width }) => {
   return (

templates/website/src/blocks/Form/Email/index.tsx

@@ -10,11 +10,7 @@ import { Width } from '../Width'
 
 export const Email: React.FC<
   EmailField & {
-    errors: Partial<
+    errors: Partial<FieldErrorsImpl>
-      FieldErrorsImpl<{
-        [x: string]: any
-      }>
-    >
     register: UseFormRegister<FieldValues>
   }
 > = ({ name, defaultValue, errors, label, register, required, width }) => {

templates/website/src/blocks/Form/Number/index.tsx

@@ -9,11 +9,7 @@ import { Error } from '../Error'
 import { Width } from '../Width'
 export const Number: React.FC<
   TextField & {
-    errors: Partial<
+    errors: Partial<FieldErrorsImpl>
-      FieldErrorsImpl<{
-        [x: string]: any
-      }>
-    >
     register: UseFormRegister<FieldValues>
   }
 > = ({ name, defaultValue, errors, label, register, required, width }) => {

templates/website/src/blocks/Form/Select/index.tsx

@@ -1,5 +1,5 @@
 import type { SelectField } from '@payloadcms/plugin-form-builder/types'
-import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
+import type { Control, FieldErrorsImpl } from 'react-hook-form'
 
 import { Label } from '@/components/ui/label'
 import {
@@ -17,12 +17,8 @@ import { Width } from '../Width'
 
 export const Select: React.FC<
   SelectField & {
-    control: Control<FieldValues, any>
+    control: Control
-    errors: Partial<
+    errors: Partial<FieldErrorsImpl>
-      FieldErrorsImpl<{
-        [x: string]: any
-      }>
-    >
   }
 > = ({ name, control, errors, label, options, required, width }) => {
   return (

templates/website/src/blocks/Form/State/index.tsx

@@ -1,5 +1,5 @@
 import type { StateField } from '@payloadcms/plugin-form-builder/types'
-import type { Control, FieldErrorsImpl, FieldValues } from 'react-hook-form'
+import type { Control, FieldErrorsImpl } from 'react-hook-form'
 
 import { Label } from '@/components/ui/label'
 import {
@@ -18,12 +18,8 @@ import { stateOptions } from './options'
 
 export const State: React.FC<
   StateField & {
-    control: Control<FieldValues, any>
+    control: Control
-    errors: Partial<
+    errors: Partial<FieldErrorsImpl>
-      FieldErrorsImpl<{
-        [x: string]: any
-      }>
-    >
   }
 > = ({ name, control, errors, label, required, width }) => {
   return (

templates/website/src/blocks/Form/Text/index.tsx

@@ -10,11 +10,7 @@ import { Width } from '../Width'
 
 export const Text: React.FC<
   TextField & {
-    errors: Partial<
+    errors: Partial<FieldErrorsImpl>
-      FieldErrorsImpl<{
-        [x: string]: any
-      }>
-    >
     register: UseFormRegister<FieldValues>
   }
 > = ({ name, defaultValue, errors, label, register, required, width }) => {

templates/website/src/blocks/Form/Textarea/index.tsx

@@ -10,11 +10,7 @@ import { Width } from '../Width'
 
 export const Textarea: React.FC<
   TextField & {
-    errors: Partial<
+    errors: Partial<FieldErrorsImpl>
-      FieldErrorsImpl<{
-        [x: string]: any
-      }>
-    >
     register: UseFormRegister<FieldValues>
     rows?: number
   }

templates/website/src/blocks/RelatedPosts/Component.tsx

@@ -5,11 +5,12 @@ import RichText from '@/components/RichText'
 import type { Post } from '@/payload-types'
 
 import { Card } from '../../components/Card'
+import { SerializedEditorState } from '@payloadcms/richtext-lexical/lexical'
 
 export type RelatedPostsProps = {
   className?: string
   docs?: Post[]
-  introContent?: any
+  introContent?: SerializedEditorState
 }
 
 export const RelatedPosts: React.FC<RelatedPostsProps> = (props) => {

templates/website/src/blocks/RenderBlocks.tsx

@@ -1,4 +1,3 @@
-import { cn } from '@/utilities/ui'
 import React, { Fragment } from 'react'
 
 import type { Page } from '@/payload-types'

templates/website/src/components/CollectionArchive/index.tsx

@@ -1,8 +1,6 @@
 import { cn } from '@/utilities/ui'
 import React from 'react'
 
-import type { Post } from '@/payload-types'
-
 import { Card, CardPostData } from '@/components/Card'
 
 export type Props = {

templates/website/src/components/Media/ImageMedia/index.tsx

@@ -35,13 +35,7 @@ export const ImageMedia: React.FC<MediaProps> = (props) => {
   let src: StaticImageData | string = srcFromProps || ''
 
   if (!src && resource && typeof resource === 'object') {
-    const {
+    const { alt: altFromResource, height: fullHeight, url, width: fullWidth } = resource
-      alt: altFromResource,
-      filename: fullFilename,
-      height: fullHeight,
-      url,
-      width: fullWidth,
-    } = resource
 
     width = fullWidth!
     height = fullHeight!

templates/website/src/components/Media/index.tsx

@@ -9,7 +9,7 @@ export const Media: React.FC<Props> = (props) => {
   const { className, htmlElement = 'div', resource } = props
 
   const isVideo = typeof resource === 'object' && resource?.mimeType?.includes('video')
-  const Tag = (htmlElement as any) || Fragment
+  const Tag = htmlElement || Fragment
 
   return (
     <Tag

templates/website/src/endpoints/seed/contact-page.ts

@@ -10,7 +10,6 @@ export const contact: Partial<Page> = {
     {
       blockType: 'formBlock',
       enableIntro: true,
-      // @ts-ignore
       form: '{{CONTACT_FORM_ID}}',
       introContent: {
         root: {

templates/website/src/endpoints/seed/home-static.ts

@@ -1,7 +1,6 @@
 import type { Page } from '@/payload-types'
 
 // Used for pre-seeded content so that the homepage is not empty
-// @ts-expect-error
 export const homeStatic: Page = {
   slug: 'home',
   _status: 'published',
@@ -85,4 +84,8 @@ export const homeStatic: Page = {
     title: 'Payload Website Template',
   },
   title: 'Home',
+  id: '',
+  layout: [],
+  updatedAt: '',
+  createdAt: '',
 }

templates/website/src/endpoints/seed/home.ts

@@ -23,7 +23,6 @@ export const home: RequiredDataFromCollectionSlug<'pages'> = {
         },
       },
     ],
-    // @ts-ignore
     media: '{{IMAGE_1}}',
     richText: {
       root: {
@@ -502,7 +501,6 @@ export const home: RequiredDataFromCollectionSlug<'pages'> = {
     {
       blockName: 'Media Block',
       blockType: 'mediaBlock',
-      // @ts-ignore
       media: '{{IMAGE_2}}',
     },
     {
@@ -659,7 +657,6 @@ export const home: RequiredDataFromCollectionSlug<'pages'> = {
   ],
   meta: {
     description: 'An open-source website built with Payload and Next.js.',
-    // @ts-ignore
     image: '{{IMAGE_1}}',
     title: 'Payload Website Template',
   },

templates/website/src/endpoints/seed/index.ts

@@ -104,9 +104,6 @@ export const seed = async ({
     technologyCategory,
     newsCategory,
     financeCategory,
-    designCategory,
-    softwareCategory,
-    engineeringCategory,
   ] = await Promise.all([
     payload.create({
       collection: 'users',

templates/website/src/fields/slug/formatSlug.ts

@@ -8,7 +8,7 @@ export const formatSlug = (val: string): string =>
 
 export const formatSlugHook =
   (fallback: string): FieldHook =>
-  ({ data, operation, originalDoc, value }) => {
+  ({ data, operation, value }) => {
     if (typeof value === 'string') {
       return formatSlug(value)
     }

templates/website/src/fields/slug/index.ts

@@ -23,8 +23,7 @@ export const slugField: Slug = (fieldToUse = 'title', overrides = {}) => {
     ...checkboxOverrides,
   }
 
-  // Expect ts error here because of typescript mismatching Partial<TextField> with TextField
+  // @ts-expect-error - ts mismatch Partial<TextField> with TextField
-  // @ts-expect-error
   const slugField: TextField = {
     name: 'slug',
     type: 'text',

templates/website/src/payload-types.ts

@@ -1645,4 +1645,4 @@ export interface Auth {
 
 declare module 'payload' {
   export interface GeneratedTypes extends Config {}
-}
+}

templates/website/src/search/beforeSync.ts

@@ -1,11 +1,11 @@
 import { BeforeSync, DocToSync } from '@payloadcms/plugin-search/types'
 
-export const beforeSyncWithSearch: BeforeSync = async ({ originalDoc, searchDoc, payload }) => {
+export const beforeSyncWithSearch: BeforeSync = async ({ originalDoc, searchDoc }) => {
   const {
     doc: { relationTo: collection },
   } = searchDoc
 
-  const { slug, id, categories, title, meta, excerpt } = originalDoc
+  const { slug, id, categories, title, meta } = originalDoc
 
   const modifiedDoc: DocToSync = {
     ...searchDoc,
@@ -33,7 +33,7 @@ export const beforeSyncWithSearch: BeforeSync = async ({ originalDoc, searchDoc,
       })
 
       modifiedDoc.categories = mappedCategories
-    } catch (err) {
+    } catch (_err) {
       console.error(
         `Failed. Category not found when syncing collection '${collection}' with id: '${id}' to search.`,
       )

templates/website/src/utilities/deepMerge.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 
 /**
@@ -5,8 +6,8 @@
  * @param item
  * @returns {boolean}
  */
-export function isObject(item: unknown): boolean {
+export function isObject(item: unknown): item is object {
-  return item && typeof item === 'object' && !Array.isArray(item)
+  return typeof item === 'object' && !Array.isArray(item)
 }
 
 /**

templates/website/tailwind.config.mjs

@@ -1,5 +1,8 @@
+import tailwindcssAnimate from 'tailwindcss-animate'
+import typography from '@tailwindcss/typography'
+
 /** @type {import('tailwindcss').Config} */
-export default {
+const config = {
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
@@ -7,7 +10,7 @@ export default {
     './src/**/*.{ts,tsx}',
   ],
   darkMode: ['selector', '[data-theme="dark"]'],
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [tailwindcssAnimate, typography],
   prefix: '',
   safelist: [
     'lg:col-span-4',
@@ -104,7 +107,7 @@ export default {
           to: { height: '0' },
         },
       },
-      typography: ({ theme }) => ({
+      typography: () => ({
         DEFAULT: {
           css: [
             {
@@ -146,3 +149,5 @@ export default {
     },
   },
 }
+
+export default config