Fix eslint v2 (#3384)

* added reccommended react linting plugin

* 🐛 Fixed eslint scanning tina generated files

* Added short circuit and ternary expressions to exceptions for typescript unused expressions

* fixed linter error caused by out of date typescript dependency

* added react plugin for eslint

* committing pnpm lock file for eslint

* fixed linting error for playwright config

* fixed prettier code being loaded in the incorrect order

* Revert "added react plugin for eslint"

This reverts commit 56f8fc8.

* fixed existing linting errors

* added settings to disable eslint during builds

* updated prettierc to factor in our tailwind configuration

* added missing lock file

* updated eslint to use Next's typescript configuration

* fixed eslint ignore during builds being in wrong part of array

* updated PR workflwow to use the branch that triggered the workflow

* replaced with focus:ring class

* update eslintrc to use tailwind config

* undo prev commit

* updated custom class list

* reverted changes to github workflow

* added tina generated to prettier ignore

---------

Co-authored-by: Baba Kamyljanov <babakamyljanov@ssw.com.au>

.eslintignore

@@ -1,4 +1,4 @@
-.tina/__generated__
+tina/__generated__
 .next
 node_modules
 dist

.eslintrc

@@ -4,20 +4,27 @@
   "plugins": ["@typescript-eslint", "tailwindcss"],
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
+    "next/typescript",
+    "plugin:react/recommended",
     "plugin:tailwindcss/recommended",
-    "plugin:prettier/recommended",
     "next/core-web-vitals",
+    "plugin:prettier/recommended",
   ],
   "rules": {
+    "@typescript-eslint/no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true,
+      },
+    ],
     "quotes": ["error", "double"],
     "no-console": "warn",
     "tailwindcss/no-arbitrary-value": "error",
     "tailwindcss/no-custom-classname": [
       "error",
       {
-        "whitelist": ["g\\-yt.+", "legend"],
+        "whitelist": ["g\\-yt.+", "legend", "dark"],
       },
     ],
     "prettier/prettier": [

.prettierignore

@@ -1,4 +1,4 @@
-.tina/__generated__
+tina/__generated__
 .next
 node_modules
 content

.prettierrc

@@ -3,5 +3,6 @@
 	"singleQuote": false,
 	"tabWidth": 2,
 	"trailingComma": "es5",
+	"tailwindConfig": "./tailwind.config.js",
 	"plugins": ["prettier-plugin-tailwindcss"]
 }

app/articles/[filename]/page.tsx

@@ -15,7 +15,6 @@ const getData = async (
   props: UseTinaProps & ArticlePageProps["props"];
 }> => {
   const tinaProps = await getArticle(filename);
-  tinaProps.data.articlesIndex.title;
   return {
     props: {
       data: tinaProps.data,

app/articles/index.tsx

@@ -28,8 +28,6 @@ type ArticlesIndexPageProps = {
 
 function ArticlesIndexPage({ props, tinaProps }: ArticlesIndexPageProps) {
   const { data } = tinaProps;
-  data.articlesIndex;
-  data.articlesIndex.seo;
   const { dehydratedState } = props;
   return (
     <>

app/consulting/[filename]/consulting2.tsx

@@ -21,7 +21,6 @@ export default function ConsultingV2({
 
   return (
     <>
-      {/* eslint-disable-next-line tailwindcss/no-custom-classname*/}
       <div className="dark flex h-full flex-col">
         <Section color={SectionColor.ToggleLightMode}>
           <Container width="custom" size="small" className="w-full sm:py-12">

components/blocks/youtubePlaylist.tsx

@@ -35,7 +35,6 @@ export const YoutubePlaylistBlock: React.FC<YoutubePlaylistProps> = (props) => {
             },
           })
           .then((response) => {
-            response;
             setPlaylistVideosLinks(response.data);
           });
       } catch (error) {

components/textInputWithCount/textInputWithCount.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import classNames from "classnames";
+import React from "react";
 import { wrapFieldsWithMeta } from "tinacms";
 
 /**
@@ -13,14 +13,12 @@ export const TextInputWithCount = (max: number, isTextArea: boolean = false) =>
     <div className="flex flex-col gap-2">
       {isTextArea ? (
         <textarea
-          // eslint-disable-next-line tailwindcss/no-custom-classname
-          className="focus:shadow-outline block min-h-40 w-full resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-600 shadow-inner focus:border-blue-500 focus:text-gray-900"
+          className="block min-h-40 w-full resize-y rounded-md border border-gray-200 px-3 py-2 text-base text-gray-600 shadow-inner focus:border-blue-500 focus:text-gray-900 focus:ring"
           {...input}
         />
       ) : (
         <input
-          // eslint-disable-next-line tailwindcss/no-custom-classname
-          className="focus:shadow-outline block w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-base text-gray-600 shadow-inner transition-all duration-150 ease-out placeholder:text-gray-300 focus:border-blue-500 focus:text-gray-900 focus:outline-none"
+          className="block w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-base text-gray-600 shadow-inner transition-all duration-150 ease-out placeholder:text-gray-300 focus:border-blue-500 focus:text-gray-900 focus:outline-none focus:ring"
           {...input}
         />
       )}

components/usergroup/ticketForm.tsx

@@ -38,6 +38,7 @@ export const TicketForm = ({ className }: TicketFormProps) => {
         validationSchema={validationSchema}
         onSubmit={(values: FormValues) => {
           // Process form submission here
+          //eslint-disable-next-line @typescript-eslint/no-unused-expressions
           values.email;
         }}
       >

next.config.mjs

@@ -5,9 +5,13 @@ const withNextPluginPreval = createNextPluginPreval();
 /** @type {import('next').NextConfig} */
 const config = {
   poweredByHeader: false,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
   images: {
     deviceSizes: [384, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     minimumCacheTTL: 60,
+
     remotePatterns: [
       {
         protocol: "https",

package.json

@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@next/eslint-plugin-next": "15.0.3",
+    "@next/eslint-plugin-next": "14.2.15",
     "@playwright/test": "1.48.2",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.6",
@@ -32,8 +32,8 @@
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -73,7 +73,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
-    "eslint-config-next": "15.0.1",
+    "eslint-config-next": "14.2.15",
     "formik": "^2.4.6",
     "lucide-react": "^0.460.0",
     "next": "14.2.15",

playwright.config.ts

@@ -5,7 +5,7 @@ import { defineConfig, devices } from "@playwright/test";
  * https://github.com/motdotla/dotenv
  */
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 require("dotenv").config();
 
 /**