setup eslint with Next 11 more modern architecture

VulcanJS · Aug 30, 2021 · c402749 · c402749
1 parent 084714d
commit c402749
Show file tree

Hide file tree

Showing 12 changed files with 841 additions and 477 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,8 +1,7 @@
 {
-  "extends": ["plugin:cypress/recommended"],
+  "extends": ["plugin:cypress/recommended", "next"],
   "root": true,
-  "parser": "babel-eslint",
-  "plugins": ["react", "react-hooks"],
+  "plugins": [],
   "env": {
     "browser": true,
     "commonjs": true,
@@ -23,66 +22,25 @@
   },
   "overrides": [
     { "files": ["**/__tests__/**"], "env": { "jest": true } },
+      {"files": ["**/*.stories.tsx"],
+        "rules": {
+          // stories always have a named default export
+          "import/no-anonymous-default-export": "off"
+      }
+    },
     {
       "files": ["**/*.ts", "**/*.tsx"],
-      "parser": "@typescript-eslint/parser",
-      "parserOptions": {
-        "ecmaVersion": 2018,
-        "sourceType": "module",
-        "ecmaFeatures": {
-          "jsx": true
-        },
-        "warnOnUnsupportedTypeScriptVersion": false
-      },
-      "plugins": ["@typescript-eslint"],
       "rules": {
         // Already handled by TS
         "no-dupe-class-members": "off",
         "no-undef": "off",
-
         // Add TypeScript specific rules (and turn off ESLint equivalents)
-        "@typescript-eslint/consistent-type-assertions": "warn",
         "no-array-constructor": "off",
-        "@typescript-eslint/no-array-constructor": "warn",
-        "@typescript-eslint/no-namespace": "error",
         "no-use-before-define": "off",
-        "@typescript-eslint/no-use-before-define": [
-          "warn",
-          {
-            "functions": false,
-            "classes": false,
-            "variables": false,
-            "typedefs": false
-          }
-        ],
         "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": [
-          "warn",
-          {
-            "args": "none",
-            "ignoreRestSiblings": true
-          }
-        ],
         "no-unused-expressions": "off",
-        "@typescript-eslint/no-unused-expressions": [
-          "error",
-          {
-            "allowShortCircuit": true,
-            "allowTernary": true,
-            "allowTaggedTemplates": true
-          }
-        ],
-        "no-useless-constructor": "off",
-        "@typescript-eslint/no-useless-constructor": "warn"
+        "no-useless-constructor": "off"
       }
-    },
-    {
-      "files": [
-        "test/**/*",
-        "examples/**/*",
-        "packages/create-next-app/templates/**/*"
-      ],
-      "rules": { "react/react-in-jsx-scope": "off" }
     }
   ],
   "rules": {
@@ -223,6 +181,7 @@
     "react/react-in-jsx-scope": "off",
     "react/require-render-return": "error",
     "react/style-prop-object": "warn",
-    "react-hooks/rules-of-hooks": "error"
+    "react-hooks/rules-of-hooks": "error",
+    "react/no-unescaped-entities": ["error", {"forbid": [">", "}"]}]
   }
 }
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
     "i18next-http-backend": "^1.0.15",
     "lodash": "^4.17.19",
     "mongoose": "^5.9.19",
-    "next": "^10.0.2",
+    "next": "^11.1.0",
     "next-connect": "^0.9.1",
     "next-i18next": "^5.1.0",
     "next-mdx-remote": "^2.1.3",
@@ -107,20 +107,15 @@
     "@types/react": "^16.9.23",
     "@types/react-dom": "^16.9.5",
     "@types/shelljs": "^0.8.8",
-    "@typescript-eslint/eslint-plugin": "^2.21.0",
-    "@typescript-eslint/parser": "^2.21.0",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.5.0",
+    "eslint": "^7.32.0",
     "graphql-voyager": "^1.0.0-rc.31",
     "react-is": "^16.13.1",
     "source-map-support": "^0.5.19",
     "storybook-css-modules-preset": "^1.0.5",
     "ts-loader": "^7.0.5",
     "ts-node": "^8.10.2",
-    "typescript": "4.2.2",
+    "typescript": "^4.3.5",
     "yalc": "^1.0.0-pre.53"
   },
   "optionalDependencies": {
@@ -145,6 +140,7 @@
     "@types/jest": "^25.2.3",
     "auto-changelog": "^2.2.1",
     "cypress": "4.8.0",
+    "eslint-config-next": "^11.1.0",
     "eslint-plugin-cypress": "2.11.1",
     "jest": "^26.0.1",
     "jest-transformer-mdx": "^2.2.0",

diff --git a/packages/@vulcanjs/next-material-ui/components/Link.tsx b/packages/@vulcanjs/next-material-ui/components/Link.tsx
@@ -72,7 +72,7 @@ const Link: React.FC<LinkProps> = (props) => {
   } = props;
 
   const router = useRouter();
-  const pathname = typeof href === "string" ? href : href.pathname;
+  const pathname = typeof href === "string" ? href : (href as URL).pathname;
   const className = clsx(classNameProps, {
     [activeClassName]: router.pathname === pathname && activeClassName,
   });

diff --git a/packages/@vulcanjs/next-material-ui/tsconfig.json b/packages/@vulcanjs/next-material-ui/tsconfig.json
@@ -4,5 +4,5 @@
     "outDir": "./dist",
     "lib": ["es6", "dom"]
   },
-  "include": ["*.ts"]
+  "include": ["**/*.ts", "**/*.tsx"]
 }
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -25,6 +25,10 @@ const Header = () => {
                 </Link>
               </li>
               <li>
+                {/* We use a GET request for logging out at the moment
+                TODO: this should be replaced by an explicit POST request on click,
+                side-effects with GET is a bad practice leading to all sort of troubles */}
+                {/* eslint-disable-next-line @next/next/no-html-link-for-pages */}
                 <a href="/api/logout">Logout</a>
               </li>
             </>

diff --git a/src/components/layout/muiMdComponents.tsx b/src/components/layout/muiMdComponents.tsx
@@ -51,5 +51,12 @@ export const muiMdComponents = {
   //hr: Typography,
   a: Link,
   // TODO: didn't find a way to override image styling...
-  img: (props) => <img {...props} style={{ maxWidth: "100%" }} />,
+  img: (props) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      alt="Image from markdown content with no alt text"
+      {...props}
+      style={{ maxWidth: "100%" }}
+    />
+  ),
 };
diff --git a/src/components/user/layout.tsx b/src/components/user/layout.tsx
@@ -1,4 +1,5 @@
 import Head from "next/head";
+import Link from "next/link";
 
 const Layout = (props) => (
   <>
@@ -16,7 +17,11 @@ const Layout = (props) => (
               database.
             </p>
             <p>
-              See <a href="/">home README </a> for relevant instructions.
+              See{" "}
+              <Link href="/">
+                <a>home README </a>
+              </Link>{" "}
+              for relevant instructions.
             </p>
           </div>
         ) : (

diff --git a/src/lib/style/colors.ts b/src/lib/style/colors.ts
@@ -1,4 +1,4 @@
-export default {
+const colors = {
   pinkGraphql: "#e10098",
   darkBlueApollo: "#15336e",
   greenApollo: "#22A699",
@@ -10,3 +10,5 @@ export default {
   darkOrangeVulcan: "#E45729",
   white: "#fefefe",
 };
+
+export default colors;
diff --git a/src/pages/admin/crud/[modelName].tsx b/src/pages/admin/crud/[modelName].tsx
@@ -78,8 +78,8 @@ export default function CrudPage({ modelName }) {
     <PageLayout>
       <Typography variant="h1"> Manage {model.name}</Typography>
       <Typography variant="body1">
-        /!\ This page is an experimental demonstration of using Vulcan "magic"
-        components (SmartForm) to manage your model
+        /!&#92; This page is an experimental demonstration of using Vulcan
+        "magic" components (SmartForm) to manage your model
       </Typography>
       <hr />
       <Typography variant="h2"> Create a new {model.name} </Typography>

diff --git a/src/pages/docs/[[...filePath]].tsx b/src/pages/docs/[[...filePath]].tsx
@@ -8,6 +8,7 @@ import { List, ListItem, Link, Typography } from "@material-ui/core";
 import matter from "gray-matter";
 import { muiMdComponents } from "~/components/layout/muiMdComponents";
 import { MdxRemote } from "next-mdx-remote/types";
+import Image from "next/image";
 
 // Define components to allow them in your mdx files
 // You can also replace HTML tags (components is passed to MDXProvider )
@@ -52,7 +53,12 @@ function PreviousPageLink(props: { filePath: string }) {
 const header = (
   <Typography variant="h1">
     <Link href="/">
-      <img src="/img/vns-logo-96.png" style={{ marginRight: "32px" }} />
+      {/* eslint-disable @next/next/no-img-element */}
+      <img
+        src="/img/vns-logo-96.png"
+        alt="Vulcan Next logo"
+        style={{ marginRight: "32px" }}
+      />
     </Link>
     VN Live Documentation
   </Typography>