Add React rules for ESLint back

Author: hasparus

.eslintrc.cjs

@@ -5,7 +5,15 @@ const MARKDOWN_EXT = "md,mdx"
 
 module.exports = {
   root: true,
-  plugins: ["@graphql-eslint", "mdx", "@typescript-eslint", "tailwindcss"],
+  plugins: [
+    "@graphql-eslint",
+    "mdx",
+    "@typescript-eslint",
+    "tailwindcss",
+    "react",
+    "@next/next",
+    "react-hooks",
+  ],
   overrides: [
     {
       files: [`**/*.{${CODE_EXT}}`],
@@ -14,8 +22,42 @@ module.exports = {
         "plugin:@typescript-eslint/recommended",
         "plugin:tailwindcss/recommended",
         "prettier",
+        "plugin:@next/next/recommended",
+        "plugin:react-hooks/recommended-legacy",
+        "plugin:react/recommended",
       ],
       rules: {
+        "react/react-in-jsx-scope": "off", // TS checks this
+        "react/prop-types": "off", // and this
+        "no-undef": "off", // and this too
+        // This is type checking for projects without `@types/react`. Disabled due to false positives.
+        "react/no-unknown-property": "off",
+
+        "react/no-unescaped-entities": [
+          "warn", // quotes and apostrophes are okay
+          {
+            forbid: [
+              {
+                char: "<",
+                alternatives: ["&lt;"],
+              },
+              {
+                char: ">",
+                alternatives: ["&gt;"],
+              },
+              {
+                char: "{",
+                alternatives: ["&#123;"],
+              },
+              {
+                char: "}",
+                alternatives: ["&#125;"],
+              },
+            ],
+          },
+        ],
+        "@next/next/no-img-element": "off", // straight up upsell, small `img`s actually don't need optimization
+
         "tailwindcss/classnames-order": "off",
         "@typescript-eslint/no-restricted-imports": [
           "error",
@@ -41,6 +83,9 @@ module.exports = {
         tailwindcss: {
           whitelist: ["roboto-mono"],
         },
+        react: {
+          version: "detect",
+        },
       },
     },
     {
@@ -63,6 +108,7 @@ module.exports = {
       },
       rules: {
         "mdx/remark": "error",
+        "no-unused-expressions": "off",
       },
     },
     {
@@ -91,6 +137,7 @@ module.exports = {
       files: [
         `src/pages/blog/**/*.{${MARKDOWN_EXT}}`,
         `src/code/**/*.{${MARKDOWN_EXT}}`,
+        `src/app/conf/**/*.{${MARKDOWN_EXT}}`,
       ],
       rules: {
         // Disable `remark-lint-first-heading-level` since in blogs we don't want to enforce the first heading to be an `h1`

package.json

@@ -22,64 +22,67 @@
   "dependencies": {
     "@graphql-tools/schema": "10.0.15",
     "@headlessui/react": "^2.2.4",
-    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
-    "@tailwindcss/typography": "^0.5.10",
-    "autoprefixer": "^10.4.17",
-    "clsx": "^2.1.0",
+    "@tailwindcss/typography": "^0.5.15",
+    "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.19",
     "codemirror-graphql": "1.3.2",
     "date-fns": "^2.30.0",
-    "fast-glob": "^3.3.2",
+    "fast-glob": "^3.3.3",
     "graphql": "16.10.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-string": "3.0.1",
-    "iframe-resizer-react": "^1.1.0",
+    "iframe-resizer-react": "^1.1.1",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.469.0",
-    "markdown-to-jsx": "^7.4.0",
+    "markdown-to-jsx": "^7.7.2",
     "marked": "5.1.2",
     "motion": "^12.11.0",
-    "next": "^14.2.5",
-    "next-image-export-optimizer": "^1.12.3",
-    "next-query-params": "^5.0.0",
+    "next": "^14.2.22",
+    "next-image-export-optimizer": "^1.18.0",
+    "next-query-params": "^5.0.1",
     "next-sitemap": "^4.2.3",
     "next-with-less": "^3.0.1",
     "nextra": "3.0.0-alpha.28",
     "nextra-theme-docs": "3.0.0-alpha.28",
     "numbro": "2.5.0",
     "p-limit": "^4.0.0",
     "parser-front-matter": "1.6.4",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-medium-image-zoom": "5.2.13",
     "react-use-measure": "^2.1.7",
     "rss": "1.2.2",
     "server-only": "0.0.1",
     "string-similarity": "^4.0.4",
-    "string-strip-html": "^13.4.5",
-    "tailwindcss": "^3.4.1",
+    "string-strip-html": "^13.4.8",
+    "tailwindcss": "^3.4.17",
     "timeago.js": "4.0.2",
     "unified": "11.0.5",
     "unist-util-visit": "^5.0.0",
     "use-query-params": "^2.2.1"
   },
   "devDependencies": {
     "@graphql-eslint/eslint-plugin": "4.3.0",
-    "@svgr/webpack": "^8.0.1",
+    "@next/eslint-plugin-next": "^15.3.3",
+    "@svgr/webpack": "^8.1.0",
     "@types/codemirror": "5.60.7",
     "@types/hast": "3.0.4",
-    "@types/node": "^22.10.2",
-    "@types/react": "^18.2.73",
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.3.18",
     "@types/rss": "0.0.32",
     "@types/string-similarity": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "eslint": "8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-tailwindcss": "3.17.5",
     "prettier": "3.5.3",
     "prettier-plugin-pkg": "^0.20.0",