fix(ESLint): Import orders

.eslintrc.json

@@ -1,4 +1,14 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
-  "plugins": ["@typescript-eslint"]
+  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "plugin:import/errors", "plugin:import/warnings", "plugin:import/typescript"],
+  "plugins": ["@typescript-eslint", "import"],
+  "rules": {
+    "import/order": ["error", {
+      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
+      "newlines-between": "always",
+      "alphabetize": {
+        "order": "asc",
+        "caseInsensitive": true
+      }
+    }]
+  }
 }

package-lock.json

@@ -29,8 +29,10 @@
         "@types/react": "^18.2.7",
         "@typescript-eslint/eslint-plugin": "^5.42.0",
         "@typescript-eslint/parser": "^5.42.0",
+        "@typescript-eslint/typescript-estree": "^6.1.0",
         "eslint": "8.41.0",
-        "eslint-config-next": "^13.4.4"
+        "eslint-config-next": "^13.4.4",
+        "eslint-plugin-import": "^2.27.5"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2542,6 +2544,32 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.42.0.tgz",
+      "integrity": "sha512-2O3vSq794x3kZGtV7i4SCWZWCwjEtkWfVqX4m5fbUBomOsEOyd6OAD1qU2lbvV5S8tgy/luJnOYluNyYVeOTTg==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/visitor-keys": "5.42.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@typescript-eslint/scope-manager": {
       "version": "5.42.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.42.0.tgz",
@@ -2584,19 +2612,7 @@
         }
       }
     },
-    "node_modules/@typescript-eslint/types": {
-      "version": "5.42.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.42.0.tgz",
-      "integrity": "sha512-t4lzO9ZOAUcHY6bXQYRuu+3SSYdD9TS8ooApZft4WARt4/f2Cj/YpvbTe8A4GuhT4bNW72goDMOy7SW71mZwGw==",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      }
-    },
-    "node_modules/@typescript-eslint/typescript-estree": {
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
       "version": "5.42.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.42.0.tgz",
       "integrity": "sha512-2O3vSq794x3kZGtV7i4SCWZWCwjEtkWfVqX4m5fbUBomOsEOyd6OAD1qU2lbvV5S8tgy/luJnOYluNyYVeOTTg==",
@@ -2622,6 +2638,72 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/types": {
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.42.0.tgz",
+      "integrity": "sha512-t4lzO9ZOAUcHY6bXQYRuu+3SSYdD9TS8ooApZft4WARt4/f2Cj/YpvbTe8A4GuhT4bNW72goDMOy7SW71mZwGw==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.1.0.tgz",
+      "integrity": "sha512-nUKAPWOaP/tQjU1IQw9sOPCDavs/iU5iYLiY/6u7gxS7oKQoi4aUxXS1nrrVGTyBBaGesjkcwwHkbkiD5eBvcg==",
+      "dependencies": {
+        "@typescript-eslint/types": "6.1.0",
+        "@typescript-eslint/visitor-keys": "6.1.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/@typescript-eslint/types": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.1.0.tgz",
+      "integrity": "sha512-+Gfd5NHCpDoHDOaU/yIF3WWRI2PcBRKKpP91ZcVbL0t5tQpqYWBs3z/GGhvU+EV1D0262g9XCnyqQh19prU0JQ==",
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.1.0.tgz",
+      "integrity": "sha512-yQeh+EXhquh119Eis4k0kYhj9vmFzNpbhM3LftWQVwqVjipCkwHBQOZutcYW+JVkjtTG9k8nrZU1UoNedPDd1A==",
+      "dependencies": {
+        "@typescript-eslint/types": "6.1.0",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@typescript-eslint/utils": {
       "version": "5.42.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.42.0.tgz",
@@ -2647,6 +2729,32 @@
         "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.42.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.42.0.tgz",
+      "integrity": "sha512-2O3vSq794x3kZGtV7i4SCWZWCwjEtkWfVqX4m5fbUBomOsEOyd6OAD1qU2lbvV5S8tgy/luJnOYluNyYVeOTTg==",
+      "dependencies": {
+        "@typescript-eslint/types": "5.42.0",
+        "@typescript-eslint/visitor-keys": "5.42.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@typescript-eslint/utils/node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -4239,32 +4347,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/eslint-config-sznm/node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.1.0.tgz",
-      "integrity": "sha512-nUKAPWOaP/tQjU1IQw9sOPCDavs/iU5iYLiY/6u7gxS7oKQoi4aUxXS1nrrVGTyBBaGesjkcwwHkbkiD5eBvcg==",
-      "dependencies": {
-        "@typescript-eslint/types": "6.1.0",
-        "@typescript-eslint/visitor-keys": "6.1.0",
-        "debug": "^4.3.4",
-        "globby": "^11.1.0",
-        "is-glob": "^4.0.3",
-        "semver": "^7.5.4",
-        "ts-api-utils": "^1.0.1"
-      },
-      "engines": {
-        "node": "^16.0.0 || >=18.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/eslint-config-sznm/node_modules/@typescript-eslint/utils": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.1.0.tgz",

package.json

@@ -32,8 +32,10 @@
     "@types/react": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
+    "@typescript-eslint/typescript-estree": "^6.1.0",
     "eslint": "8.41.0",
-    "eslint-config-next": "^13.4.4"
+    "eslint-config-next": "^13.4.4",
+    "eslint-plugin-import": "^2.27.5"
   },
   "volta": {
     "node": "18.16.0",

src/components/Scanner/scanner.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { Component } from "react";
 import Quagga from "@ericblade/quagga2";
+import React, { Component } from "react";
 interface ScannerProps {
   onDetected: (result: any) => void;
   setScanning: (scanning: boolean) => void;

src/components/check.tsx

@@ -1,10 +1,13 @@
-import React, { useState, useEffect, useRef } from "react";
+
 import VeganCheck from "@frontendnetwork/vegancheck";
-import Scan from "./Scanner/scanner";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
+import React, { useState, useEffect, useRef } from "react";
+
 import ModalWrapper from "@/components/elements/modalwrapper";
 import ShareButton from "@/components/elements/share";
-import { useTranslations } from "next-intl";
+
+import Scan from "./Scanner/scanner";
 
 interface ProductResult {
   productname?: string;

src/components/elements/container.tsx

@@ -1,5 +1,6 @@
-import Link from "next/link";
 import Image from "next/image";
+import Link from "next/link";
+
 import BackButton from '@/components/button_back'
 
 interface ContainerProps {

src/components/elements/contents/donate.tsx

@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
 
 const SupportOption: React.FC = () => {
   const t = useTranslations("More");

src/components/elements/contents/oledmode.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
 import { useTranslations } from 'next-intl';
+import React, { useState, useEffect } from 'react';
 
 const OLEDMode: React.FC = () => {
   const t = useTranslations('More');

src/components/elements/pwainstall.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useEffect } from "react";
-import ModalWrapper from "@/components/elements/modalwrapper";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
+import { useState, useEffect } from "react";
+
+import ModalWrapper from "@/components/elements/modalwrapper";
 
 const InstallPrompt = () => {
   const t = useTranslations("InstallPrompt");

src/components/elements/share.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useEffect } from "react";
-import { useTranslations } from "next-intl";
-import ModalWrapper from "@/components/elements/modalwrapper";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
+import React, { useState, useEffect } from "react";
+
+import ModalWrapper from "@/components/elements/modalwrapper";
 
 interface ShareButtonProps {
   productName: string | undefined;

src/components/elements/shortcutinstall.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useEffect, FC } from "react";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
+import { useState, useEffect, FC } from "react";
 
 interface ExtendedWindow extends Window {
   MSStream?: any;

src/components/ingredientscheck.tsx

@@ -1,7 +1,8 @@
-import React, { useState, FormEvent } from "react";
 import VeganCheck from "@frontendnetwork/vegancheck";
-import { useTranslations } from "next-intl";
 import Image from "next/image";
+import { useTranslations } from "next-intl";
+import React, { useState, FormEvent } from "react";
+
 import ModalWrapper from "@/components/elements/modalwrapper";
 
 export interface FlaggedItem {

src/components/nav.tsx

@@ -1,9 +1,9 @@
+import { GetStaticPropsContext } from "next";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { GetStaticPropsContext } from "next";
 import { useTranslations } from "next-intl";
+import { useEffect } from "react";
 
 export default function Nav() {
   const t = useTranslations("Nav");

src/pages/404.tsx

@@ -1,8 +1,9 @@
-import Nav from "@/components/nav";
-import Container from "@/components/elements/container";
 import { GetStaticPropsContext } from 'next'
 import { useTranslations } from 'next-intl';
 
+import Container from "@/components/elements/container";
+import Nav from "@/components/nav";
+
 export default function NotFound() {
   const t = useTranslations('404');
   return (

src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import "@/styles/style.scss";
+import { init } from "@socialgouv/matomo-next";
 import type { AppProps } from "next/app";
 import { NextIntlProvider } from "next-intl";
-import { init } from "@socialgouv/matomo-next";
 import { useEffect } from "react";
 
 export default function App({ Component, pageProps }: AppProps) {

src/pages/impressum.tsx

@@ -1,8 +1,9 @@
-import Container from "@/components/elements/container";
-import Nav from "@/components/nav";
-import React, { useState, useEffect } from 'react';
 import { GetStaticPropsContext } from 'next'
 import { useTranslations } from 'next-intl';
+import React, { useState, useEffect } from 'react';
+
+import Container from "@/components/elements/container";
+import Nav from "@/components/nav";
 
 const Impressum = () => {
   const t = useTranslations();

src/pages/index.tsx

@@ -1,9 +1,10 @@
-import Nav from "@/components/nav";
-import Footer from "@/components/footer";
+import { GetStaticPropsContext } from "next";
+
 import ProductSearch from "@/components/check";
 import InstallPrompt from "@/components/elements/pwainstall";
 import Shortcut from "@/components/elements/shortcutinstall";
-import { GetStaticPropsContext } from "next";
+import Footer from "@/components/footer";
+import Nav from "@/components/nav";
 
 export default function Home() {
   return (

src/pages/ingredients.tsx

@@ -1,8 +1,9 @@
-import Nav from "@/components/nav";
-import IngredientsCheck from '@/components/ingredientscheck'
-import Container from "@/components/elements/container";
 import { GetStaticPropsContext } from "next";
 
+import Container from "@/components/elements/container";
+import IngredientsCheck from '@/components/ingredientscheck'
+import Nav from "@/components/nav";
+
 export default function ingredients() {
   return (
     <>

src/pages/more.tsx

@@ -1,14 +1,15 @@
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/router";
-import { setCookie } from "nookies";
 import { GetStaticPropsContext } from "next";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import { useTranslations } from "next-intl";
-import Nav from "@/components/nav";
+import { setCookie } from "nookies";
+
 import Container from "@/components/elements/container";
-import ModalWrapper from "@/components/elements/modalwrapper";
 import SupportOption from "@/components/elements/contents/donate";
 import OLEDMode from "@/components/elements/contents/oledmode";
+import ModalWrapper from "@/components/elements/modalwrapper";
+import Nav from "@/components/nav";
 
 export default function More() {
   const router = useRouter();

src/pages/privacy-policy.tsx

@@ -1,8 +1,9 @@
-import Container from "@/components/elements/container";
-import Nav from "@/components/nav";
-import React, { useState, useEffect } from 'react';
 import { GetStaticPropsContext } from 'next'
 import { useTranslations } from 'next-intl';
+import React, { useState, useEffect } from 'react';
+
+import Container from "@/components/elements/container";
+import Nav from "@/components/nav";
 
 const PrivacyPolicy = () => {
   const t = useTranslations('Privacy');

src/pages/tos.tsx

@@ -1,8 +1,8 @@
-import Container from "@/components/elements/container";
-import Nav from "@/components/nav";
 import { GetStaticPropsContext } from 'next'
 import { useTranslations } from 'next-intl';
 
+import Container from "@/components/elements/container";
+import Nav from "@/components/nav";
 
 export default function TOS() {
   const t = useTranslations('TOS');