chore: significantly improve eslint performance, lint and prettier everything

2024-08-29 21:25:50 -04:00
parent bc367ab73c
commit 86fdad0bb8
653 changed files with 50289 additions and 19143 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/README.md
+++ b/README.md
@@ -1,6 +1,7 @@
 <a href="https://payloadcms.com"><img width="100%" src="https://github.com/payloadcms/payload/blob/main/packages/payload/src/admin/assets/images/github-banner-alt.jpg?raw=true" alt="Payload headless CMS Admin panel built with React" /></a>
 <br />
 <br />
+
 <p align="left">
  <a href="https://github.com/payloadcms/payload/actions"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/payloadcms/payload/main.yml?style=flat-square"></a>
  &nbsp;
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -28,9 +28,8 @@ export const rootParserOptions = {
  sourceType: 'module',
  ecmaVersion: 'latest',
  projectService: {
-    allowDefaultProject: ['./src/*.ts', './src/*.tsx'],
-    defaultProject: './tsconfig.json',
    maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 40,
+    allowDefaultProject: ['scripts/*.ts', '*.js', '*.mjs', '*.spec.ts'],
  },
 }

@@ -46,15 +45,6 @@ export const rootEslintConfig = [
      'templates/**',
    ],
  },
-  {
-    languageOptions: {
-      parserOptions: {
-        project: './tsconfig.json',
-        tsconfigDirName: import.meta.dirname,
-        ...rootParserOptions,
-      },
-    },
-  },
  {
    plugins: {
      payload: payloadPlugin,
@@ -79,6 +69,15 @@ export const rootEslintConfig = [

 export default [
  ...rootEslintConfig,
+  {
+    languageOptions: {
+      parserOptions: {
+        ...rootParserOptions,
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
  {
    files: ['packages/eslint-config/**/*.ts'],
    rules: {
--- a/examples/auth/next-app/app/_components/Header/index.module.scss
+++ b/examples/auth/next-app/app/_components/Header/index.module.scss
@@ -15,7 +15,7 @@
  width: 150px;
 }

-:global([data-theme="light"]) {
+:global([data-theme='light']) {
  .logo {
    filter: invert(1);
  }
--- a/examples/auth/next-app/app/_components/RenderParams/index.tsx
+++ b/examples/auth/next-app/app/_components/RenderParams/index.tsx
@@ -10,12 +10,12 @@ export const RenderParams: React.FC<{
  className?: string
 }> = ({ params = ['error', 'message', 'success'], message, className }) => {
  const searchParams = useSearchParams()
-  const paramValues = params.map(param => searchParams.get(param)).filter(Boolean)
+  const paramValues = params.map((param) => searchParams.get(param)).filter(Boolean)

  if (paramValues.length) {
    return (
      <div className={className}>
-        {paramValues.map(paramValue => (
+        {paramValues.map((paramValue) => (
          <Message
            key={paramValue}
            message={(message || 'PARAM')?.replace('PARAM', paramValue || '')}
--- a/examples/auth/next-app/app/_css/app.scss
+++ b/examples/auth/next-app/app/_css/app.scss
@@ -1,7 +1,7 @@
@use './queries.scss' as *;
@use './colors.scss' as *;
@use './type.scss' as *;
-@import "./theme.scss";
+@import './theme.scss';

 :root {
  --base: 24px;
@@ -88,7 +88,7 @@ p {
  margin: var(--base) 0;

  @include mid-break {
-    margin: calc(var(--base) * .75) 0;
+    margin: calc(var(--base) * 0.75) 0;
  }
 }

@@ -102,12 +102,12 @@ a {
  color: currentColor;

  &:focus {
-    opacity: .8;
+    opacity: 0.8;
    outline: none;
  }

  &:active {
-    opacity: .7;
+    opacity: 0.7;
    outline: none;
  }
 }
--- a/examples/auth/next-app/app/_providers/Auth/index.tsx
+++ b/examples/auth/next-app/app/_providers/Auth/index.tsx
@@ -16,7 +16,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
  const [user, setUser] = useState<User | null>()

  const create = useCallback<Create>(
-    async args => {
+    async (args) => {
      if (api === 'rest') {
        const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, args)
        setUser(user)
@@ -38,7 +38,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
  )

  const login = useCallback<Login>(
-    async args => {
+    async (args) => {
      if (api === 'rest') {
        const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/login`, args)
        setUser(user)
@@ -110,7 +110,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
  }, [api])

  const forgotPassword = useCallback<ForgotPassword>(
-    async args => {
+    async (args) => {
      if (api === 'rest') {
        const user = await rest(
          `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/forgot-password`,
@@ -132,7 +132,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
  )

  const resetPassword = useCallback<ResetPassword>(
-    async args => {
+    async (args) => {
      if (api === 'rest') {
        const user = await rest(
          `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/reset-password`,
--- a/examples/auth/next-app/app/account/AccountForm/index.module.scss
+++ b/examples/auth/next-app/app/account/AccountForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .form {
  margin-bottom: var(--base);
--- a/examples/auth/next-app/app/account/AccountForm/index.tsx
+++ b/examples/auth/next-app/app/account/AccountForm/index.tsx
@@ -139,7 +139,7 @@ export const AccountForm: React.FC = () => {
            label="Confirm Password"
            required
            register={register}
-            validate={value => value === password.current || 'The passwords do not match'}
+            validate={(value) => value === password.current || 'The passwords do not match'}
            error={errors.passwordConfirm}
          />
        </Fragment>
--- a/examples/auth/next-app/app/create-account/CreateAccountForm/index.module.scss
+++ b/examples/auth/next-app/app/create-account/CreateAccountForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .form {
  margin-bottom: var(--base);
--- a/examples/auth/next-app/app/create-account/CreateAccountForm/index.tsx
+++ b/examples/auth/next-app/app/create-account/CreateAccountForm/index.tsx
@@ -103,7 +103,7 @@ export const CreateAccountForm: React.FC = () => {
        label="Confirm Password"
        required
        register={register}
-        validate={value => value === password.current || 'The passwords do not match'}
+        validate={(value) => value === password.current || 'The passwords do not match'}
        error={errors.passwordConfirm}
      />
      <Button
--- a/examples/auth/next-app/app/create-account/index.module.scss
+++ b/examples/auth/next-app/app/create-account/index.module.scss
@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';

 .createAccount {
  margin-bottom: var(--block-padding);
--- a/examples/auth/next-app/app/login/LoginForm/index.module.scss
+++ b/examples/auth/next-app/app/login/LoginForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .form {
  margin-bottom: var(--base);
--- a/examples/auth/next-app/app/login/index.module.scss
+++ b/examples/auth/next-app/app/login/index.module.scss
@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';

 .login {
  margin-bottom: var(--block-padding);
--- a/examples/auth/next-app/app/logout/LogoutPage/index.tsx
+++ b/examples/auth/next-app/app/logout/LogoutPage/index.tsx
@@ -5,7 +5,7 @@ import Link from 'next/link'

 import { useAuth } from '../../_providers/Auth'

-export const LogoutPage: React.FC = props => {
+export const LogoutPage: React.FC = (props) => {
  const { logout } = useAuth()
  const [success, setSuccess] = useState('')
  const [error, setError] = useState('')
--- a/examples/auth/next-app/app/recover-password/RecoverPasswordForm/index.module.scss
+++ b/examples/auth/next-app/app/recover-password/RecoverPasswordForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .error {
  color: red;
@@ -20,4 +20,3 @@
 .message {
  margin-bottom: var(--base);
 }
-
--- a/examples/auth/next-app/app/recover-password/index.module.scss
+++ b/examples/auth/next-app/app/recover-password/index.module.scss
@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';

 .recoverPassword {
  margin-bottom: var(--block-padding);
--- a/examples/auth/next-app/app/reset-password/ResetPasswordForm/index.module.scss
+++ b/examples/auth/next-app/app/reset-password/ResetPasswordForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .form {
  width: 66.66%;
--- a/examples/auth/next-app/pnpm-lock.yaml
+++ b/examples/auth/next-app/pnpm-lock.yaml
--- a/examples/auth/next-pages/pnpm-lock.yaml
+++ b/examples/auth/next-pages/pnpm-lock.yaml
--- a/examples/auth/next-pages/src/components/Header/index.module.scss
+++ b/examples/auth/next-pages/src/components/Header/index.module.scss
@@ -15,7 +15,7 @@
  width: 150px;
 }

-:global([data-theme="light"]) {
+:global([data-theme='light']) {
  .logo {
    filter: invert(1);
  }
--- a/examples/auth/next-pages/src/components/RenderParams/index.tsx
+++ b/examples/auth/next-pages/src/components/RenderParams/index.tsx
@@ -9,12 +9,12 @@ export const RenderParams: React.FC<{
 }> = ({ params = ['error', 'message', 'success'], message, className }) => {
  const router = useRouter()
  const searchParams = new URLSearchParams(router.query as any)
-  const paramValues = params.map(param => searchParams.get(param)).filter(Boolean)
+  const paramValues = params.map((param) => searchParams.get(param)).filter(Boolean)

  if (paramValues.length) {
    return (
      <div className={className}>
-        {paramValues.map(paramValue => (
+        {paramValues.map((paramValue) => (
          <Message key={paramValue} message={(message || 'PARAM')?.replace('PARAM', paramValue)} />
        ))}
      </div>
--- a/examples/auth/next-pages/src/css/app.scss
+++ b/examples/auth/next-pages/src/css/app.scss
@@ -1,7 +1,7 @@
@use './queries.scss' as *;
@use './colors.scss' as *;
@use './type.scss' as *;
-@import "./theme.scss";
+@import './theme.scss';

 :root {
  --base: 24px;
@@ -88,7 +88,7 @@ p {
  margin: var(--base) 0;

  @include mid-break {
-    margin: calc(var(--base) * .75) 0;
+    margin: calc(var(--base) * 0.75) 0;
  }
 }

@@ -102,12 +102,12 @@ a {
  color: currentColor;

  &:focus {
-    opacity: .8;
+    opacity: 0.8;
    outline: none;
  }

  &:active {
-    opacity: .7;
+    opacity: 0.7;
    outline: none;
  }
 }
--- a/examples/auth/next-pages/src/pages/account/index.module.scss
+++ b/examples/auth/next-pages/src/pages/account/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';

 .account {
  margin-bottom: var(--block-padding);
--- a/examples/auth/next-pages/src/pages/account/index.tsx
+++ b/examples/auth/next-pages/src/pages/account/index.tsx
@@ -150,7 +150,7 @@ const Account: React.FC = () => {
              label="Confirm Password"
              required
              register={register}
-              validate={value => value === password.current || 'The passwords do not match'}
+              validate={(value) => value === password.current || 'The passwords do not match'}
              error={errors.passwordConfirm}
            />
          </Fragment>
--- a/examples/auth/next-pages/src/pages/create-account/index.module.scss
+++ b/examples/auth/next-pages/src/pages/create-account/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';

 .createAccount {
  margin-bottom: var(--block-padding);
--- a/examples/auth/next-pages/src/pages/create-account/index.tsx
+++ b/examples/auth/next-pages/src/pages/create-account/index.tsx
@@ -106,7 +106,7 @@ const CreateAccount: React.FC = () => {
          label="Confirm Password"
          required
          register={register}
-          validate={value => value === password.current || 'The passwords do not match'}
+          validate={(value) => value === password.current || 'The passwords do not match'}
          error={errors.passwordConfirm}
        />
        <Button
--- a/examples/auth/next-pages/src/pages/login/index.module.scss
+++ b/examples/auth/next-pages/src/pages/login/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';

 .login {
  margin-bottom: var(--block-padding);
--- a/examples/auth/next-pages/src/pages/recover-password/index.module.scss
+++ b/examples/auth/next-pages/src/pages/recover-password/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';

 .recoverPassword {
  margin-bottom: var(--block-padding);
@@ -24,4 +24,3 @@
 .message {
  margin-bottom: var(--base);
 }
-
--- a/examples/auth/next-pages/src/pages/reset-password/index.module.scss
+++ b/examples/auth/next-pages/src/pages/reset-password/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../css/common";
+@import '../../css/common';

 .resetPassword {
  margin-bottom: var(--block-padding);
--- a/examples/auth/next-pages/src/providers/Auth/index.tsx
+++ b/examples/auth/next-pages/src/providers/Auth/index.tsx
@@ -14,7 +14,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
  const [user, setUser] = useState<User | null>()

  const create = useCallback<Create>(
-    async args => {
+    async (args) => {
      if (api === 'rest') {
        const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users`, args)
        setUser(user)
@@ -36,7 +36,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
  )

  const login = useCallback<Login>(
-    async args => {
+    async (args) => {
      if (api === 'rest') {
        const user = await rest(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/login`, args)
        setUser(user)
@@ -108,7 +108,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
  }, [api])

  const forgotPassword = useCallback<ForgotPassword>(
-    async args => {
+    async (args) => {
      if (api === 'rest') {
        const user = await rest(
          `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/forgot-password`,
@@ -130,7 +130,7 @@ export const AuthProvider: React.FC<{ children: React.ReactNode; api?: 'rest' |
  )

  const resetPassword = useCallback<ResetPassword>(
-    async args => {
+    async (args) => {
      if (api === 'rest') {
        const user = await rest(
          `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/users/reset-password`,
--- a/examples/auth/payload/pnpm-lock.yaml
+++ b/examples/auth/payload/pnpm-lock.yaml
--- a/examples/auth/payload/src/app/(app)/_components/Button/index.tsx
+++ b/examples/auth/payload/src/app/(app)/_components/Button/index.tsx
@@ -1,6 +1,6 @@
 'use client'

-import type { ElementType } from 'react';
+import type { ElementType } from 'react'

 import Link from 'next/link'
 import React from 'react'
--- a/examples/auth/payload/src/app/(app)/_components/Gutter/index.tsx
+++ b/examples/auth/payload/src/app/(app)/_components/Gutter/index.tsx
@@ -1,4 +1,4 @@
-import type { Ref } from 'react';
+import type { Ref } from 'react'

 import React, { forwardRef } from 'react'

--- a/examples/auth/payload/src/app/(app)/_components/Header/index.module.scss
+++ b/examples/auth/payload/src/app/(app)/_components/Header/index.module.scss
@@ -15,7 +15,7 @@
  width: 150px;
 }

-:global([data-theme="light"]) {
+:global([data-theme='light']) {
  .logo {
    filter: invert(1);
  }
--- a/examples/auth/payload/src/app/(app)/_components/RenderParams/index.tsx
+++ b/examples/auth/payload/src/app/(app)/_components/RenderParams/index.tsx
@@ -10,12 +10,12 @@ export const RenderParams: React.FC<{
  params?: string[]
 }> = ({ className, message, params = ['error', 'message', 'success'] }) => {
  const searchParams = useSearchParams()
-  const paramValues = params.map(param => searchParams.get(param)).filter(Boolean)
+  const paramValues = params.map((param) => searchParams.get(param)).filter(Boolean)

  if (paramValues.length) {
    return (
      <div className={className}>
-        {paramValues.map(paramValue => (
+        {paramValues.map((paramValue) => (
          <Message
            key={paramValue}
            message={(message || 'PARAM')?.replace('PARAM', paramValue || '')}
--- a/examples/auth/payload/src/app/(app)/account/AccountForm/index.module.scss
+++ b/examples/auth/payload/src/app/(app)/account/AccountForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .form {
  margin-bottom: var(--base);
--- a/examples/auth/payload/src/app/(app)/account/AccountForm/index.tsx
+++ b/examples/auth/payload/src/app/(app)/account/AccountForm/index.tsx
@@ -136,7 +136,7 @@ export const AccountForm: React.FC = () => {
            register={register}
            required
            type="password"
-            validate={value => value === password.current || 'The passwords do not match'}
+            validate={(value) => value === password.current || 'The passwords do not match'}
          />
        </Fragment>
      )}
--- a/examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.module.scss
+++ b/examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .form {
  margin-bottom: var(--base);
--- a/examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.tsx
+++ b/examples/auth/payload/src/app/(app)/create-account/CreateAccountForm/index.tsx
@@ -103,7 +103,7 @@ export const CreateAccountForm: React.FC = () => {
        register={register}
        required
        type="password"
-        validate={value => value === password.current || 'The passwords do not match'}
+        validate={(value) => value === password.current || 'The passwords do not match'}
      />
      <Button
        appearance="primary"
--- a/examples/auth/payload/src/app/(app)/create-account/index.module.scss
+++ b/examples/auth/payload/src/app/(app)/create-account/index.module.scss
@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';

 .createAccount {
  margin-bottom: var(--block-padding);
--- a/examples/auth/payload/src/app/(app)/login/LoginForm/index.module.scss
+++ b/examples/auth/payload/src/app/(app)/login/LoginForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .form {
  margin-bottom: var(--base);
--- a/examples/auth/payload/src/app/(app)/login/index.module.scss
+++ b/examples/auth/payload/src/app/(app)/login/index.module.scss
@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';

 .login {
  margin-bottom: var(--block-padding);
--- a/examples/auth/payload/src/app/(app)/recover-password/RecoverPasswordForm/index.module.scss
+++ b/examples/auth/payload/src/app/(app)/recover-password/RecoverPasswordForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .error {
  color: red;
@@ -20,4 +20,3 @@
 .message {
  margin-bottom: var(--base);
 }
-
--- a/examples/auth/payload/src/app/(app)/recover-password/index.module.scss
+++ b/examples/auth/payload/src/app/(app)/recover-password/index.module.scss
@@ -1,4 +1,4 @@
-@import "../_css/common";
+@import '../_css/common';

 .recoverPassword {
  margin-bottom: var(--block-padding);
--- a/examples/auth/payload/src/app/(app)/reset-password/ResetPasswordForm/index.module.scss
+++ b/examples/auth/payload/src/app/(app)/reset-password/ResetPasswordForm/index.module.scss
@@ -1,4 +1,4 @@
-@import "../../_css/common";
+@import '../../_css/common';

 .form {
  width: 66.66%;
--- a/examples/auth/payload/src/collections/access/checkRole.ts
+++ b/examples/auth/payload/src/collections/access/checkRole.ts
@@ -3,8 +3,8 @@ import type { User } from '../../payload-types'
 export const checkRole = (allRoles: User['roles'] = [], user: User = undefined): boolean => {
  if (user) {
    if (
-      allRoles.some(role => {
-        return user?.roles?.some(individualRole => {
+      allRoles.some((role) => {
+        return user?.roles?.some((individualRole) => {
          return individualRole === role
        })
      })
--- a/examples/custom-server/README.md
+++ b/examples/custom-server/README.md
@@ -100,10 +100,10 @@ On boot, a seed script is included to scaffold a basic database for you to use a

 ### Conflicting routes

->In a monorepo when routes are bootstrapped to the same host, they can conflict with Payload's own routes if they have the same name. In our template we've named the Nextjs API routes to `next` to avoid this conflict.
+> In a monorepo when routes are bootstrapped to the same host, they can conflict with Payload's own routes if they have the same name. In our template we've named the Nextjs API routes to `next` to avoid this conflict.
 >
->This can happen with any other routes conflicting with Payload such as `admin` and we recommend using different names for custom routes.  
->Alternatively you can also rename Payload's own routes via the [configuration](https://payloadcms.com/docs/configuration/overview).
+> This can happen with any other routes conflicting with Payload such as `admin` and we recommend using different names for custom routes.  
+> Alternatively you can also rename Payload's own routes via the [configuration](https://payloadcms.com/docs/configuration/overview).

 ## Production

--- a/examples/custom-server/eject.ts
+++ b/examples/custom-server/eject.ts
@@ -10,12 +10,12 @@ const files = ['./next.config.js', './next-env.d.ts']
 const directories = ['./src/app']

 const eject = async (): Promise<void> => {
-  files.forEach(file => {
+  files.forEach((file) => {
    fs.unlinkSync(path.join(__dirname, file))
  })

-  directories.forEach(directory => {
-    fs.rm(path.join(__dirname, directory), { recursive: true }, err => {
+  directories.forEach((directory) => {
+    fs.rm(path.join(__dirname, directory), { recursive: true }, (err) => {
      if (err) throw err
    })
  })
--- a/examples/custom-server/src/app/app.scss
+++ b/examples/custom-server/src/app/app.scss
@@ -29,7 +29,18 @@ $breakpoint: 1000px;
 html {
  font-size: 20px;
  line-height: 1.5;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;

  @media (max-width: $breakpoint) {
    font-size: 16px;
--- a/examples/custom-server/src/server.default.ts
+++ b/examples/custom-server/src/server.default.ts
@@ -20,7 +20,7 @@ const start = async (): Promise<void> => {
  const payload = await getPayloadClient({
    initOptions: {
      express: app,
-      onInit: async newPayload => {
+      onInit: async (newPayload) => {
        newPayload.logger.info(`Payload Admin URL: ${newPayload.getAdminURL()}`)
      },
    },
--- a/examples/custom-server/src/server.ts
+++ b/examples/custom-server/src/server.ts
@@ -18,7 +18,7 @@ const start = async (): Promise<void> => {
  const payload = await getPayloadClient({
    initOptions: {
      express: app,
-      onInit: async newPayload => {
+      onInit: async (newPayload) => {
        newPayload.logger.info(`Payload Admin URL: ${newPayload.getAdminURL()}`)
      },
    },
--- a/examples/custom-server/tsconfig.server.json
+++ b/examples/custom-server/tsconfig.server.json
@@ -4,10 +4,7 @@
    "module": "commonjs",
    "outDir": "dist",
    "noEmit": false,
-    "jsx": "react",
+    "jsx": "react"
  },
-  "include": [
-    "src/server.ts",
-    "src/payload.config.ts",
-  ]
+  "include": ["src/server.ts", "src/payload.config.ts"]
 }
--- a/examples/draft-preview/next-app/app/_api/fetchPage.ts
+++ b/examples/draft-preview/next-app/app/_api/fetchPage.ts
@@ -33,7 +33,7 @@ export const fetchPage = async (
          }
        : {}),
    },
-  ).then(res => res.json())
+  ).then((res) => res.json())

  return pageRes?.docs?.[0] ?? null
 }
--- a/examples/draft-preview/next-app/app/_api/fetchPages.ts
+++ b/examples/draft-preview/next-app/app/_api/fetchPages.ts
@@ -3,8 +3,8 @@ import type { Page } from '../../payload-types'
 export const fetchPages = async (): Promise<Page[]> => {
  const pageRes: {
    docs: Page[]
-  } = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/pages?depth=0&limit=100`).then(res =>
-    res.json(),
+  } = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/pages?depth=0&limit=100`).then(
+    (res) => res.json(),
  ) // eslint-disable-line function-paren-newline

  return pageRes?.docs ?? []
--- a/examples/draft-preview/next-app/app/_components/AdminBar/index.client.tsx
+++ b/examples/draft-preview/next-app/app/_components/AdminBar/index.client.tsx
@@ -9,7 +9,7 @@ import classes from './index.module.scss'

 const Title: React.FC = () => <span>Dashboard</span>

-export const AdminBarClient: React.FC<PayloadAdminBarProps> = props => {
+export const AdminBarClient: React.FC<PayloadAdminBarProps> = (props) => {
  const [user, setUser] = useState<PayloadMeUser>()

  return (
--- a/examples/draft-preview/next-app/app/_components/Header/index.tsx
+++ b/examples/draft-preview/next-app/app/_components/Header/index.tsx
@@ -11,7 +11,7 @@ import classes from './index.module.scss'
 export async function Header() {
  const mainMenu: MainMenu = await fetch(
    `${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/globals/main-menu`,
-  ).then(res => res.json())
+  ).then((res) => res.json())

  const { navItems } = mainMenu

--- a/examples/draft-preview/next-app/app/app.scss
+++ b/examples/draft-preview/next-app/app/app.scss
@@ -29,7 +29,18 @@ $breakpoint: 1000px;
 html {
  font-size: 20px;
  line-height: 1.5;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;

  @media (max-width: $breakpoint) {
    font-size: 16px;
--- a/examples/draft-preview/next-pages/src/components/AdminBar/index.tsx
+++ b/examples/draft-preview/next-pages/src/components/AdminBar/index.tsx
@@ -11,7 +11,7 @@ export const AdminBar: React.FC<{
  adminBarProps?: PayloadAdminBarProps
  user?: PayloadMeUser
  setUser?: (user: PayloadMeUser) => void // eslint-disable-line no-unused-vars
-}> = props => {
+}> = (props) => {
  const { adminBarProps, user, setUser } = props

  return (
--- a/examples/draft-preview/next-pages/src/components/Header/index.tsx
+++ b/examples/draft-preview/next-pages/src/components/Header/index.tsx
@@ -43,7 +43,7 @@ export const Header: React.FC<{
    mainMenu: MainMenu
  }
  adminBarProps: PayloadAdminBarProps
-}> = props => {
+}> = (props) => {
  const { globals, adminBarProps } = props

  const [user, setUser] = useState<PayloadMeUser>()
--- a/examples/draft-preview/next-pages/src/pages/[slug].tsx
+++ b/examples/draft-preview/next-pages/src/pages/[slug].tsx
@@ -14,7 +14,7 @@ const Page: React.FC<
    mainMenu: MainMenu
    preview?: boolean
  }
-> = props => {
+> = (props) => {
  const { title, richText } = props

  return (
@@ -119,7 +119,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
    const { docs: pages } = pagesData

    if (pages && Array.isArray(pages) && pages.length > 0) {
-      paths = pages.map(page => ({ params: { slug: page.slug } }))
+      paths = pages.map((page) => ({ params: { slug: page.slug } }))
    }
  }

--- a/examples/draft-preview/next-pages/src/pages/app.scss
+++ b/examples/draft-preview/next-pages/src/pages/app.scss
@@ -29,7 +29,18 @@ $breakpoint: 1000px;
 html {
  font-size: 20px;
  line-height: 1.5;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;

  @media (max-width: $breakpoint) {
    font-size: 16px;
@@ -136,7 +147,18 @@ $breakpoint: 1000px;
 html {
  font-size: 20px;
  line-height: 1.5;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Open Sans',
+    'Helvetica Neue',
+    sans-serif;

  @media (max-width: $breakpoint) {
    font-size: 16px;
--- a/examples/draft-preview/next-pages/src/pages/index.tsx
+++ b/examples/draft-preview/next-pages/src/pages/index.tsx
@@ -4,7 +4,7 @@ import Page, { getStaticProps as sharedGetStaticProps } from './[slug]'

 export default Page

-export const getStaticProps: GetStaticProps = async ctx => {
+export const getStaticProps: GetStaticProps = async (ctx) => {
  const func = sharedGetStaticProps.bind(this)
  return func(ctx)
 }
--- a/examples/draft-preview/payload/.vscode/launch.json
+++ b/examples/draft-preview/payload/.vscode/launch.json
@@ -12,10 +12,10 @@
      "preLaunchTask": "npm: build:server",
      "env": {
        "PAYLOAD_CONFIG_PATH": "${workspaceFolder}/src/payload.config.ts"
-      },
+      }
      // "outFiles": [
      //   "${workspaceFolder}/dist/**/*.js"
      // ]
-    },
+    }
  ]
 }
--- a/examples/draft-preview/payload/src/collections/Pages/index.ts
+++ b/examples/draft-preview/payload/src/collections/Pages/index.ts
@@ -11,7 +11,7 @@ export const Pages: CollectionConfig = {
  admin: {
    useAsTitle: 'title',
    defaultColumns: ['title', 'slug', 'updatedAt'],
-    preview: doc => {
+    preview: (doc) => {
      return `${process.env.PAYLOAD_PUBLIC_SITE_URL}/api/preview?url=${encodeURIComponent(
        formatAppURL({
          doc,
--- a/examples/draft-preview/payload/src/fields/link.ts
+++ b/examples/draft-preview/payload/src/fields/link.ts
@@ -125,7 +125,7 @@ const link: LinkType = ({ appearances, disableLabel = false, overrides = {} } =
    ]

    if (appearances) {
-      appearanceOptionsToUse = appearances.map(appearance => appearanceOptions[appearance])
+      appearanceOptionsToUse = appearances.map((appearance) => appearanceOptions[appearance])
    }

    linkResult.fields.push({
--- a/examples/draft-preview/payload/src/utilities/deepMerge.ts
+++ b/examples/draft-preview/payload/src/utilities/deepMerge.ts
@@ -17,7 +17,7 @@ export function isObject(item: unknown): boolean {
 export default function deepMerge<T, R>(target: T, source: R): T {
  const output = { ...target }
  if (isObject(target) && isObject(source)) {
-    Object.keys(source).forEach(key => {
+    Object.keys(source).forEach((key) => {
      if (isObject(source[key])) {
        if (!(key in target)) {
          Object.assign(output, { [key]: source[key] })
--- a/examples/email/src/collections/Newsletter.ts
+++ b/examples/email/src/collections/Newsletter.ts
@@ -32,7 +32,7 @@ const Newsletter: CollectionConfig = {
      name: 'email',
      type: 'text',
      required: true,
-    }
+    },
  ],
 }

--- a/examples/email/src/email/generateForgotPasswordEmail.ts
+++ b/examples/email/src/email/generateForgotPasswordEmail.ts
@@ -3,8 +3,7 @@ import generateEmailHTML from './generateEmailHTML'
 const generateForgotPasswordEmail = async ({ token }): Promise<string> =>
  generateEmailHTML({
    headline: 'Locked out?',
-    content:
-      '<p>Let&apos;s get you back in.</p>',
+    content: '<p>Let&apos;s get you back in.</p>',
    cta: {
      buttonLabel: 'Reset your password',
      url: `${process.env.PAYLOAD_PUBLIC_SERVER_URL}/reset-password?token=${token}`,
--- a/examples/email/src/email/template.html
+++ b/examples/email/src/email/template.html
@@ -1,317 +1,345 @@
 <!doctype html>
 <html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style type="text/css">
+      body,
+      html {
+        margin: 0;
+        padding: 0;
+      }

-<head>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <style type="text/css">
-    body,
-    html {
-      margin: 0;
-      padding: 0;
-    }
+      body,
+      html,
+      .bg {
+        height: 100%;
+      }

-    body,
-    html,
-    .bg {
-      height: 100%;
-    }
+      body,
+      h1,
+      h2,
+      h3,
+      h4,
+      p,
+      em,
+      strong {
+        font-family: sans-serif;
+      }

-    body,
-    h1,
-    h2,
-    h3,
-    h4,
-    p,
-    em,
-    strong {
-      font-family: sans-serif;
-    }
+      body {
+        font-size: 15px;
+        color: #333333;
+      }

-    body {
-      font-size: 15px;
-      color: #333333;
-    }
+      a {
+        color: #333333;
+        outline: 0;
+        text-decoration: underline;
+      }

-    a {
-      color: #333333;
-      outline: 0;
-      text-decoration: underline;
-    }
+      a img {
+        border: 0;
+        outline: 0;
+      }

-    a img {
-      border: 0;
-      outline: 0;
-    }
+      img {
+        max-width: 100%;
+        height: auto;
+        vertical-align: top;
+      }

-    img {
-      max-width: 100%;
-      height: auto;
-      vertical-align: top;
-    }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5 {
-      font-weight: 900;
-      line-height: 1.25;
-    }
-
-    h1 {
-      font-size: 40px;
-      color: #333333;
-      margin: 0 0 25px 0;
-    }
-
-    h2 {
-      color: #333333;
-      margin: 0 0 25px 0;
-      font-size: 30px;
-      line-height: 30px;
-    }
-
-    h3 {
-      font-size: 25px;
-      color: #333333;
-      margin: 0 0 25px 0;
-    }
-
-    h4 {
-      font-size: 20px;
-      color: #333333;
-      margin: 0 0 15px 0;
-      line-height: 30px;
-    }
-
-    h5 {
-      color: #333333;
-      font-size: 17px;
-      font-weight: 900;
-      margin: 0 0 15px;
-    }
-
-    table {
-      border-collapse: collapse;
-    }
-
-    p,
-    td {
-      font-size: 14px;
-      line-height: 25px;
-      color: #333333;
-    }
-
-    p {
-      margin: 0 0 25px;
-    }
-
-    ul {
-      padding-left: 15px;
-      margin-left: 15px;
-      font-size: 14px;
-      line-height: 25px;
-      margin-bottom: 25px;
-    }
-
-    li {
-      font-size: 14px;
-      line-height: 25px;
-      color: #333333;
-    }
-
-    table.hr td {
-      font-size: 0;
-      line-height: 2px;
-    }
-
-    .white {
-      color: white;
-    }
-
-    /********************************
-    MAIN
-    ********************************/
-
-    .main {
-      background: white;
-    }
-
-    /********************************
-    MAX WIDTHS
-    ********************************/
-
-    .max-width {
-      max-width: 800px;
-      width: 94%;
-      margin: 0 3%;
-    }
-
-    /********************************
-    REUSABLES
-    ********************************/
-
-    .padding {
-      padding: 60px;
-    }
-
-    .center {
-      text-align: center;
-    }
-
-    .no-border {
-      border: 0;
-      outline: none;
-      text-decoration: none;
-    }
-
-    .no-margin {
-      margin: 0;
-    }
-
-    .spacer {
-      line-height: 45px;
-      height: 45px;
-    }
-
-    /********************************
-    PANELS
-    ********************************/
-
-    .panel {
-      width: 100%;
-    }
-
-    @media screen and (max-width : 800px) {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5 {
+        font-weight: 900;
+        line-height: 1.25;
+      }

      h1 {
-        font-size: 24px !important;
-        margin: 0 0 20px 0 !important;
+        font-size: 40px;
+        color: #333333;
+        margin: 0 0 25px 0;
      }

      h2 {
-        font-size: 20px !important;
-        margin: 0 0 20px 0 !important;
+        color: #333333;
+        margin: 0 0 25px 0;
+        font-size: 30px;
+        line-height: 30px;
      }

      h3 {
-        font-size: 20px !important;
-        margin: 0 0 20px 0 !important;
+        font-size: 25px;
+        color: #333333;
+        margin: 0 0 25px 0;
      }

      h4 {
-        font-size: 18px !important;
-        margin: 0 0 15px 0 !important;
+        font-size: 20px;
+        color: #333333;
+        margin: 0 0 15px 0;
+        line-height: 30px;
      }

      h5 {
-        font-size: 15px !important;
-        margin: 0 0 10px !important;
+        color: #333333;
+        font-size: 17px;
+        font-weight: 900;
+        margin: 0 0 15px;
      }

+      table {
+        border-collapse: collapse;
+      }
+
+      p,
+      td {
+        font-size: 14px;
+        line-height: 25px;
+        color: #333333;
+      }
+
+      p {
+        margin: 0 0 25px;
+      }
+
+      ul {
+        padding-left: 15px;
+        margin-left: 15px;
+        font-size: 14px;
+        line-height: 25px;
+        margin-bottom: 25px;
+      }
+
+      li {
+        font-size: 14px;
+        line-height: 25px;
+        color: #333333;
+      }
+
+      table.hr td {
+        font-size: 0;
+        line-height: 2px;
+      }
+
+      .white {
+        color: white;
+      }
+
+      /********************************
+    MAIN
+    ********************************/
+
+      .main {
+        background: white;
+      }
+
+      /********************************
+    MAX WIDTHS
+    ********************************/
+
      .max-width {
-        width: 90% !important;
-        margin: 0 5% !important;
+        max-width: 800px;
+        width: 94%;
+        margin: 0 3%;
      }

-      td.padding {
-        padding: 30px !important;
+      /********************************
+    REUSABLES
+    ********************************/
+
+      .padding {
+        padding: 60px;
      }

-      td.padding-vert {
-        padding-top: 20px !important;
-        padding-bottom: 20px !important;
+      .center {
+        text-align: center;
      }

-      td.padding-horiz {
-        padding-left: 20px !important;
-        padding-right: 20px !important;
+      .no-border {
+        border: 0;
+        outline: none;
+        text-decoration: none;
+      }
+
+      .no-margin {
+        margin: 0;
      }

      .spacer {
-        line-height: 20px !important;
-        height: 20px !important;
+        line-height: 45px;
+        height: 45px;
      }
-    }
-  </style>
-</head>

-<body>
-  <div style="background-color:#F3F3F3; height: 100%;">
-    <table height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f3f3f3"
-      style="background-color: #f3f3f3;">
-      <tr>
-        <td valign="top" align="left">
-          <table cellpadding="0" cellspacing="0" border="0" width="100%">
-            <tbody>
-              <tr>
-                <td align="center" valign="top">
-                  <table cellpadding="0" cellspacing="0" border="0" width="100%">
-                    <tbody>
-                      <tr>
-                        <td align="center">
-                          <table class="max-width" cellpadding="0" cellspacing="0" border="0" width="100%"
-                            style="width: 100%;">
-                            <tbody>
-                              <tr>
-                                <td class="spacer">&nbsp;</td>
-                              </tr>
-                              <tr>
-                                <td class="padding main">
-                                  <table cellpadding="0" cellspacing="0" border="0" width="100%">
-                                    <tbody>
-                                      <tr>
-                                        <td>
-                                          <!-- LOGO -->
-                                          <a href="https://payloadcms.com/" target="_blank">
-                                            <img src="https://payloadcms.com/images/logo-dark.png" width="150"
-                                              height="auto" />
-                                          </a>
-                                        </td>
-                                      </tr>
-                                      <tr>
-                                        <td class="spacer">&nbsp;</td>
-                                      </tr>
-                                      <tr>
-                                        <td>
-                                          <!-- HEADLINE -->
-                                          <h1 style="margin: 0 0 30px;">{{headline}}</h1>
-                                        </td>
-                                      </tr>
-                                      <tr>
-                                        <td>
-                                          <!-- CONTENT -->
-                                          {{{content}}}
+      /********************************
+    PANELS
+    ********************************/

-                                          <!-- CTA -->
-                                          {{#if cta}}
-                                          <div>
-                                            <a href="{{cta.url}}"
-                                              style="background-color:#222222;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:60px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">
-                                              {{cta.buttonLabel}}
+      .panel {
+        width: 100%;
+      }
+
+      @media screen and (max-width: 800px) {
+        h1 {
+          font-size: 24px !important;
+          margin: 0 0 20px 0 !important;
+        }
+
+        h2 {
+          font-size: 20px !important;
+          margin: 0 0 20px 0 !important;
+        }
+
+        h3 {
+          font-size: 20px !important;
+          margin: 0 0 20px 0 !important;
+        }
+
+        h4 {
+          font-size: 18px !important;
+          margin: 0 0 15px 0 !important;
+        }
+
+        h5 {
+          font-size: 15px !important;
+          margin: 0 0 10px !important;
+        }
+
+        .max-width {
+          width: 90% !important;
+          margin: 0 5% !important;
+        }
+
+        td.padding {
+          padding: 30px !important;
+        }
+
+        td.padding-vert {
+          padding-top: 20px !important;
+          padding-bottom: 20px !important;
+        }
+
+        td.padding-horiz {
+          padding-left: 20px !important;
+          padding-right: 20px !important;
+        }
+
+        .spacer {
+          line-height: 20px !important;
+          height: 20px !important;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <div style="background-color: #f3f3f3; height: 100%">
+      <table
+        height="100%"
+        width="100%"
+        cellpadding="0"
+        cellspacing="0"
+        border="0"
+        bgcolor="#f3f3f3"
+        style="background-color: #f3f3f3"
+      >
+        <tr>
+          <td valign="top" align="left">
+            <table cellpadding="0" cellspacing="0" border="0" width="100%">
+              <tbody>
+                <tr>
+                  <td align="center" valign="top">
+                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
+                      <tbody>
+                        <tr>
+                          <td align="center">
+                            <table
+                              class="max-width"
+                              cellpadding="0"
+                              cellspacing="0"
+                              border="0"
+                              width="100%"
+                              style="width: 100%"
+                            >
+                              <tbody>
+                                <tr>
+                                  <td class="spacer">&nbsp;</td>
+                                </tr>
+                                <tr>
+                                  <td class="padding main">
+                                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
+                                      <tbody>
+                                        <tr>
+                                          <td>
+                                            <!-- LOGO -->
+                                            <a href="https://payloadcms.com/" target="_blank">
+                                              <img
+                                                src="https://payloadcms.com/images/logo-dark.png"
+                                                width="150"
+                                                height="auto"
+                                              />
                                            </a>
-                                          </div>
-                                          {{/if}}
-                                        </td>
-                                      </tr>
-                                    </tbody>
-                                  </table>
-                                </td>
-                              </tr>
-                            </tbody>
-                          </table>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </td>
-      </tr>
-    </table>
-  </div>
-</body>
+                                          </td>
+                                        </tr>
+                                        <tr>
+                                          <td class="spacer">&nbsp;</td>
+                                        </tr>
+                                        <tr>
+                                          <td>
+                                            <!-- HEADLINE -->
+                                            <h1 style="margin: 0 0 30px">{{headline}}</h1>
+                                          </td>
+                                        </tr>
+                                        <tr>
+                                          <td>
+                                            <!-- CONTENT -->
+                                            {{{content}}}

+                                            <!-- CTA -->
+                                            {{#if cta}}
+                                            <div>
+                                              <a
+                                                href="{{cta.url}}"
+                                                style="
+                                                  background-color: #222222;
+                                                  border-radius: 4px;
+                                                  color: #ffffff;
+                                                  display: inline-block;
+                                                  font-family: sans-serif;
+                                                  font-size: 13px;
+                                                  font-weight: bold;
+                                                  line-height: 60px;
+                                                  text-align: center;
+                                                  text-decoration: none;
+                                                  width: 200px;
+                                                  -webkit-text-size-adjust: none;
+                                                "
+                                              >
+                                                {{cta.buttonLabel}}
+                                              </a>
+                                            </div>
+                                            {{/if}}
+                                          </td>
+                                        </tr>
+                                      </tbody>
+                                    </table>
+                                  </td>
+                                </tr>
+                              </tbody>
+                            </table>
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </body>
 </html>
--- a/examples/email/src/email/transport.ts
+++ b/examples/email/src/email/transport.ts
@@ -8,7 +8,6 @@ if (process.env.NODE_ENV === 'production') {
      // Configure a custom transport here
    },
  }
-
 } else {
  email = {
    fromName: 'Ethereal Email',
--- a/examples/email/src/emptyModule.js
+++ b/examples/email/src/emptyModule.js
@@ -1 +1 @@
-export default {};
+export default {}
--- a/examples/email/src/payload.config.ts
+++ b/examples/email/src/payload.config.ts
@@ -1,4 +1,3 @@
-
 import dotenv from 'dotenv'
 import path from 'path'
 import { buildConfig } from 'payload/config'
@@ -14,7 +13,7 @@ const mockModulePath = path.resolve(__dirname, './emptyModule.js')

 export default buildConfig({
  admin: {
-    webpack: config => ({
+    webpack: (config) => ({
      ...config,
      resolve: {
        ...config?.resolve,
@@ -36,10 +35,7 @@ export default buildConfig({
      },
    }),
  },
-  collections: [
-    Newsletter,
-    Users,
-  ],
+  collections: [Newsletter, Users],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
--- a/examples/form-builder/next-app/components/Blocks/Form/Checkbox/index.module.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/Checkbox/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .checkbox {
  position: relative;
--- a/examples/form-builder/next-app/components/Blocks/Form/Country/index.module.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/Country/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .select {
  position: relative;
--- a/examples/form-builder/next-app/components/Blocks/Form/Email/index.module.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/Email/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .wrap {
  position: relative;
--- a/examples/form-builder/next-app/components/Blocks/Form/Number/index.module.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/Number/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .wrap {
  position: relative;
--- a/examples/form-builder/next-app/components/Blocks/Form/Select/index.module.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/Select/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .select {
  position: relative;
--- a/examples/form-builder/next-app/components/Blocks/Form/State/index.module.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/State/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .select {
  position: relative;
--- a/examples/form-builder/next-app/components/Blocks/Form/Text/index.module.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/Text/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .wrap {
  position: relative;
--- a/examples/form-builder/next-app/components/Blocks/Form/Textarea/index.module.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/Textarea/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .wrap {
  position: relative;
--- a/examples/form-builder/next-app/components/Blocks/Form/index.module.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/index.module.scss
@@ -41,7 +41,7 @@
  margin-right: calc(var(--base) * -0.5);
  width: calc(100% + #{var(--base)});

-  >* {
+  > * {
    width: 100%;
  }
 }
--- a/examples/form-builder/next-app/components/Blocks/Form/shared.scss
+++ b/examples/form-builder/next-app/components/Blocks/Form/shared.scss
@@ -1,4 +1,4 @@
-@use "../../../css/common.scss" as *;
+@use '../../../css/common.scss' as *;

@mixin formInput() {
  all: unset;
--- a/examples/form-builder/next-app/components/Button/index.module.scss
+++ b/examples/form-builder/next-app/components/Button/index.module.scss
@@ -35,7 +35,8 @@
  background-color: var(--color-black);
  color: var(--color-white);

-  &:hover, &:focus {
+  &:hover,
+  &:focus {
    background-color: var(--color-white);
    color: var(--color-black);
    box-shadow: inset 0 0 0 1px var(--color-black);
@@ -46,7 +47,8 @@
  background-color: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-black);

-  &:hover, &:focus {
+  &:hover,
+  &:focus {
    background-color: var(--color-black);
    color: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-black);
--- a/examples/form-builder/next-app/components/Header/index.module.scss
+++ b/examples/form-builder/next-app/components/Header/index.module.scss
@@ -26,7 +26,7 @@
  cursor: pointer;
  display: none;

-  &[aria-expanded="true"] {
+  &[aria-expanded='true'] {
    transform: rotate(-25deg);
  }

--- a/examples/form-builder/next-app/css/app.scss
+++ b/examples/form-builder/next-app/css/app.scss
@@ -3,10 +3,10 @@
@use './type.scss' as *;

 :root {
-  --breakpoint-xs-width : #{$breakpoint-xs-width};
-  --breakpoint-s-width : #{$breakpoint-s-width};
-  --breakpoint-m-width : #{$breakpoint-m-width};
-  --breakpoint-l-width : #{$breakpoint-l-width};
+  --breakpoint-xs-width: #{$breakpoint-xs-width};
+  --breakpoint-s-width: #{$breakpoint-s-width};
+  --breakpoint-m-width: #{$breakpoint-m-width};
+  --breakpoint-l-width: #{$breakpoint-l-width};
  --scrollbar-width: 17px;

  --base: 24px;
@@ -100,7 +100,7 @@ p {
  margin: var(--base) 0;

  @include mid-break {
-    margin: calc(var(--base) * .75) 0;
+    margin: calc(var(--base) * 0.75) 0;
  }
 }

@@ -114,12 +114,12 @@ a {
  color: currentColor;

  &:focus {
-    opacity: .8;
+    opacity: 0.8;
    outline: none;
  }

  &:active {
-    opacity: .7;
+    opacity: 0.7;
    outline: none;
  }
 }
--- a/examples/form-builder/next-app/css/colors.scss
+++ b/examples/form-builder/next-app/css/colors.scss
@@ -1,10 +1,10 @@
 :root {
-  --color-red: rgb(255,0,0);
+  --color-red: rgb(255, 0, 0);
  --color-green: rgb(178, 255, 214);
  --color-white: rgb(255, 255, 255);
-  --color-dark-gray: rgb(51,52,52);
-  --color-mid-gray: rgb(196,196,196);
-  --color-gray: rgb(212,212,212);
-  --color-light-gray: rgb(244,244,244);
+  --color-dark-gray: rgb(51, 52, 52);
+  --color-mid-gray: rgb(196, 196, 196);
+  --color-gray: rgb(212, 212, 212);
+  --color-light-gray: rgb(244, 244, 244);
  --color-black: rgb(0, 0, 0);
 }
--- a/examples/form-builder/next-app/css/type.scss
+++ b/examples/form-builder/next-app/css/type.scss
@@ -140,7 +140,6 @@
  @include mid-break {
    font-size: 22px;
    line-height: 30px;
-
  }

  @include small-break {
--- a/examples/form-builder/next-app/pnpm-lock.yaml
+++ b/examples/form-builder/next-app/pnpm-lock.yaml
--- a/examples/form-builder/next-pages/components/Blocks/Form/Checkbox/index.module.scss
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Checkbox/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .checkbox {
  position: relative;
--- a/examples/form-builder/next-pages/components/Blocks/Form/Country/index.module.scss
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Country/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .select {
  position: relative;
--- a/examples/form-builder/next-pages/components/Blocks/Form/Country/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Country/index.tsx
@@ -33,8 +33,8 @@ export const Country: React.FC<
            <ReactSelect
              instanceId={name}
              options={countryOptions}
-              value={countryOptions.find(c => c.value === value)}
-              onChange={val => onChange(val.value)}
+              value={countryOptions.find((c) => c.value === value)}
+              onChange={(val) => onChange(val.value)}
              className={classes.reactSelect}
              classNamePrefix="rs"
              inputId={name}
--- a/examples/form-builder/next-pages/components/Blocks/Form/Email/index.module.scss
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Email/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .wrap {
  position: relative;
--- a/examples/form-builder/next-pages/components/Blocks/Form/Number/index.module.scss
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Number/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .wrap {
  position: relative;
--- a/examples/form-builder/next-pages/components/Blocks/Form/Select/index.module.scss
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Select/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .select {
  position: relative;
--- a/examples/form-builder/next-pages/components/Blocks/Form/Select/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Select/index.tsx
@@ -32,8 +32,8 @@ export const Select: React.FC<
            <ReactSelect
              instanceId={name}
              options={options}
-              value={options.find(s => s.value === value)}
-              onChange={val => onChange(val.value)}
+              value={options.find((s) => s.value === value)}
+              onChange={(val) => onChange(val.value)}
              className={classes.reactSelect}
              classNamePrefix="rs"
              inputId={name}
--- a/examples/form-builder/next-pages/components/Blocks/Form/State/index.module.scss
+++ b/examples/form-builder/next-pages/components/Blocks/Form/State/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .select {
  position: relative;
--- a/examples/form-builder/next-pages/components/Blocks/Form/State/index.tsx
+++ b/examples/form-builder/next-pages/components/Blocks/Form/State/index.tsx
@@ -33,8 +33,8 @@ export const State: React.FC<
            <ReactSelect
              instanceId={name}
              options={stateOptions}
-              value={stateOptions.find(t => t.value === value)}
-              onChange={val => onChange(val.value)}
+              value={stateOptions.find((t) => t.value === value)}
+              onChange={(val) => onChange(val.value)}
              className={classes.reactSelect}
              classNamePrefix="rs"
              id={name}
--- a/examples/form-builder/next-pages/components/Blocks/Form/Text/index.module.scss
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Text/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .wrap {
  position: relative;
--- a/examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.module.scss
+++ b/examples/form-builder/next-pages/components/Blocks/Form/Textarea/index.module.scss
@@ -1,4 +1,4 @@
-@use "../shared.scss";
+@use '../shared.scss';

 .wrap {
  position: relative;
--- a/Show More
+++ b/Show More