chore: significantly improve eslint performance, lint and prettier everything

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;

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: {

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);
   }

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 || '')}

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;
   }
 }

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`,

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);

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>

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);

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

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);

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);

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);

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('')

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);
 }
-

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);

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%;

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);
   }

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>

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;
   }
 }

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);

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>

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);

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

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);

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);
 }
-

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);

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`,

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'

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'
 

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);
   }

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 || '')}

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);

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>
       )}

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);

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"

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);

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);

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);

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);
 }
-

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);

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%;

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 => {
+      allRoles.some((role) => {
-        return user?.roles?.some(individualRole => {
+        return user?.roles?.some((individualRole) => {
           return individualRole === role
         })
       })

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.  
+> 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).
+> Alternatively you can also rename Payload's own routes via the [configuration](https://payloadcms.com/docs/configuration/overview).
 
 ## Production
 

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 => {
+  directories.forEach((directory) => {
-    fs.rm(path.join(__dirname, directory), { recursive: true }, err => {
+    fs.rm(path.join(__dirname, directory), { recursive: true }, (err) => {
       if (err) throw err
     })
   })

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;

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()}`)
       },
     },

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()}`)
       },
     },

examples/custom-server/tsconfig.server.json

@@ -4,10 +4,7 @@
     "module": "commonjs",
     "outDir": "dist",
     "noEmit": false,
-    "jsx": "react",
+    "jsx": "react"
   },
-  "include": [
+  "include": ["src/server.ts", "src/payload.config.ts"]
-    "src/server.ts",
-    "src/payload.config.ts",
-  ]
 }

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
 }

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 =>
+  } = await fetch(`${process.env.NEXT_PUBLIC_PAYLOAD_URL}/api/pages?depth=0&limit=100`).then(
-    res.json(),
+    (res) => res.json(),
   ) // eslint-disable-line function-paren-newline
 
   return pageRes?.docs ?? []

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 (

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
 

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;

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 (

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>()

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 } }))
     }
   }
 

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;

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)
 }

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"
       // ]
-    },
+    }
   ]
 }

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,

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({

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] })

examples/email/src/collections/Newsletter.ts

@@ -32,7 +32,7 @@ const Newsletter: CollectionConfig = {
       name: 'email',
       type: 'text',
       required: true,
-    }
+    },
   ],
 }
 

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:
+    content: '<p>Let&apos;s get you back in.</p>',
-      '<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}`,

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>
+      body,
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      html,
-  <style type="text/css">
+      .bg {
-    body,
+        height: 100%;
-    html {
+      }
-      margin: 0;
-      padding: 0;
-    }
 
-    body,
+      body,
-    html,
+      h1,
-    .bg {
+      h2,
-      height: 100%;
+      h3,
-    }
+      h4,
+      p,
+      em,
+      strong {
+        font-family: sans-serif;
+      }
 
-    body,
+      body {
-    h1,
+        font-size: 15px;
-    h2,
+        color: #333333;
-    h3,
+      }
-    h4,
-    p,
-    em,
-    strong {
-      font-family: sans-serif;
-    }
 
-    body {
+      a {
-      font-size: 15px;
+        color: #333333;
-      color: #333333;
+        outline: 0;
-    }
+        text-decoration: underline;
+      }
 
-    a {
+      a img {
-      color: #333333;
+        border: 0;
-      outline: 0;
+        outline: 0;
-      text-decoration: underline;
+      }
-    }
 
-    a img {
+      img {
-      border: 0;
+        max-width: 100%;
-      outline: 0;
+        height: auto;
-    }
+        vertical-align: top;
+      }
 
-    img {
+      h1,
-      max-width: 100%;
+      h2,
-      height: auto;
+      h3,
-      vertical-align: top;
+      h4,
-    }
+      h5 {
-
+        font-weight: 900;
-    h1,
+        line-height: 1.25;
-    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 {
-        font-size: 24px !important;
+        font-size: 40px;
-        margin: 0 0 20px 0 !important;
+        color: #333333;
+        margin: 0 0 25px 0;
       }
 
       h2 {
-        font-size: 20px !important;
+        color: #333333;
-        margin: 0 0 20px 0 !important;
+        margin: 0 0 25px 0;
+        font-size: 30px;
+        line-height: 30px;
       }
 
       h3 {
-        font-size: 20px !important;
+        font-size: 25px;
-        margin: 0 0 20px 0 !important;
+        color: #333333;
+        margin: 0 0 25px 0;
       }
 
       h4 {
-        font-size: 18px !important;
+        font-size: 20px;
-        margin: 0 0 15px 0 !important;
+        color: #333333;
+        margin: 0 0 15px 0;
+        line-height: 30px;
       }
 
       h5 {
-        font-size: 15px !important;
+        color: #333333;
-        margin: 0 0 10px !important;
+        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;
+        max-width: 800px;
-        margin: 0 5% !important;
+        width: 94%;
+        margin: 0 3%;
       }
 
-      td.padding {
+      /********************************
-        padding: 30px !important;
+    REUSABLES
+    ********************************/
+
+      .padding {
+        padding: 60px;
       }
 
-      td.padding-vert {
+      .center {
-        padding-top: 20px !important;
+        text-align: center;
-        padding-bottom: 20px !important;
       }
 
-      td.padding-horiz {
+      .no-border {
-        padding-left: 20px !important;
+        border: 0;
-        padding-right: 20px !important;
+        outline: none;
+        text-decoration: none;
+      }
+
+      .no-margin {
+        margin: 0;
       }
 
       .spacer {
-        line-height: 20px !important;
+        line-height: 45px;
-        height: 20px !important;
+        height: 45px;
       }
-    }
-  </style>
-</head>
 
-<body>
+      /********************************
-  <div style="background-color:#F3F3F3; height: 100%;">
+    PANELS
-    <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}}}
 
-                                          <!-- CTA -->
+      .panel {
-                                          {{#if cta}}
+        width: 100%;
-                                          <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;">
+      @media screen and (max-width: 800px) {
-                                              {{cta.buttonLabel}}
+        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>
+                                          </td>
-                                          {{/if}}
+                                        </tr>
-                                        </td>
+                                        <tr>
-                                      </tr>
+                                          <td class="spacer">&nbsp;</td>
-                                    </tbody>
+                                        </tr>
-                                  </table>
+                                        <tr>
-                                </td>
+                                          <td>
-                              </tr>
+                                            <!-- HEADLINE -->
-                            </tbody>
+                                            <h1 style="margin: 0 0 30px">{{headline}}</h1>
-                          </table>
+                                          </td>
-                        </td>
+                                        </tr>
-                      </tr>
+                                        <tr>
-                    </tbody>
+                                          <td>
-                  </table>
+                                            <!-- CONTENT -->
-                </td>
+                                            {{{content}}}
-              </tr>
-            </tbody>
-          </table>
-        </td>
-      </tr>
-    </table>
-  </div>
-</body>
 
+                                            <!-- 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>

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',

examples/email/src/emptyModule.js

@@ -1 +1 @@
-export default {};
+export default {}

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: [
+  collections: [Newsletter, Users],
-    Newsletter,
-    Users,
-  ],
   typescript: {
     outputFile: path.resolve(__dirname, 'payload-types.ts'),
   },

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;

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;

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;

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;

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;

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;

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;

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;

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%;
   }
 }

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;

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);

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);
   }
 

examples/form-builder/next-app/css/app.scss

@@ -3,10 +3,10 @@
 @use './type.scss' as *;
 
 :root {
-  --breakpoint-xs-width : #{$breakpoint-xs-width};
+  --breakpoint-xs-width: #{$breakpoint-xs-width};
-  --breakpoint-s-width : #{$breakpoint-s-width};
+  --breakpoint-s-width: #{$breakpoint-s-width};
-  --breakpoint-m-width : #{$breakpoint-m-width};
+  --breakpoint-m-width: #{$breakpoint-m-width};
-  --breakpoint-l-width : #{$breakpoint-l-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;
   }
 }

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-dark-gray: rgb(51, 52, 52);
-  --color-mid-gray: rgb(196,196,196);
+  --color-mid-gray: rgb(196, 196, 196);
-  --color-gray: rgb(212,212,212);
+  --color-gray: rgb(212, 212, 212);
-  --color-light-gray: rgb(244,244,244);
+  --color-light-gray: rgb(244, 244, 244);
   --color-black: rgb(0, 0, 0);
 }

examples/form-builder/next-app/css/type.scss

@@ -140,7 +140,6 @@
   @include mid-break {
     font-size: 22px;
     line-height: 30px;
-
   }
 
   @include small-break {

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;

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;

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)}
+              value={countryOptions.find((c) => c.value === value)}
-              onChange={val => onChange(val.value)}
+              onChange={(val) => onChange(val.value)}
               className={classes.reactSelect}
               classNamePrefix="rs"
               inputId={name}

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;

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;

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;

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)}
+              value={options.find((s) => s.value === value)}
-              onChange={val => onChange(val.value)}
+              onChange={(val) => onChange(val.value)}
               className={classes.reactSelect}
               classNamePrefix="rs"
               inputId={name}

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;

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)}
+              value={stateOptions.find((t) => t.value === value)}
-              onChange={val => onChange(val.value)}
+              onChange={(val) => onChange(val.value)}
               className={classes.reactSelect}
               classNamePrefix="rs"
               id={name}

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;

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;