ref(frontend): apply eslint simple import sort

frontend/.eslintrc.json

@@ -1,6 +1,46 @@
 {
   "extends": "next/core-web-vitals",
+  "plugins": [
+    "simple-import-sort"
+  ],
   "rules": {
-    "react-hooks/exhaustive-deps": "off"
+    "react-hooks/exhaustive-deps": "off",
+    "simple-import-sort/exports": "warn",
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        "groups": [
+          // Node.js builtins. You could also generate this regex if you use a `.js` config.
+          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
+          // Note that if you use the `node:` prefix for Node.js builtins,
+          // you can avoid this complexity: You can simply use "^node:".
+          [
+            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
+          ],
+          // Packages `react` related packages
+          [
+            "^react",
+            "^next",
+            "^@?\\w"
+          ],
+          // Internal packages.
+          [
+            "^~(/.*|$)"
+          ],
+          // Relative imports
+          [
+            "^\\.\\.(?!/?$)",
+            "^\\.\\./?$",
+            "^\\./(?=.*/)(?!/?$)",
+            "^\\.(?!/?$)",
+            "^\\./?$"
+          ],
+          // Style imports.
+          [
+            "^.+\\.?(css|scss)$"
+          ]
+        ]
+      }
+    ]
   }
 }

frontend/components/RouteGuard.js

@@ -1,7 +1,9 @@
-import { useState, useEffect } from "react";
+import { useEffect,useState } from "react";
+import Image from "next/image";
 import { useRouter } from "next/router";
+
 import checkAuth from "~/pages/api/auth/CheckAuth";
-import Image from "next/image";
+
 import { publicPaths } from "../const";
 
 // #TODO: finish spinner only when the data loads fully

frontend/components/analytics/posthog.js

@@ -1,4 +1,5 @@
 import posthog from "posthog-js";
+
 import { ENV, POSTHOG_API_KEY, POSTHOG_HOST, TELEMETRY_ENABLED } from "../utilities/config";
 
 export const initPostHog = () => {

frontend/components/basic/Error.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function Error({ text }) {
 	return (

frontend/components/basic/InputField.js

@@ -1,16 +1,17 @@
 import React from "react";
-import Error from "./Error";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import { useRouter } from "next/router";
 import {
 	faCircle,
 	faCircleExclamation,
 	faE,
 	faEye,
 	faEyeSlash,
 } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import guidGenerator from "../utilities/randomId";
-import { useState } from "react";
-import { useRouter } from "next/router";
+import Error from "./Error";
 
 const InputField = (props) => {
 	const [passwordVisible, setPasswordVisible] = useState(false);

frontend/components/basic/Listbox.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { Listbox, Transition } from "@headlessui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faPlus, faAngleDown } from "@fortawesome/free-solid-svg-icons";
 import { Fragment } from "react";
 import { useRouter } from "next/router";
+import { faAngleDown,faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Listbox, Transition } from "@headlessui/react";
 
 /**
  * This is the component that we use for drop down lists.

frontend/components/basic/buttons/Button.js

@@ -1,8 +1,8 @@
 import React from "react";
-import Link from "next/link";
 import Image from "next/image";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 var classNames = require("classnames");
 

frontend/components/basic/dialog/AddIncidentContactDialog.js

@@ -1,8 +1,10 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import InputField from "../InputField";
+import { Dialog, Transition } from "@headlessui/react";
+
 import addIncidentContact from "~/pages/api/organization/addIncidentContact";
+
 import Button from "../buttons/Button";
+import InputField from "../InputField";
 
 const AddIncidentContactDialog = ({
 	isOpen,

frontend/components/basic/dialog/AddProjectMemberDialog.js

@@ -1,8 +1,9 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import ListBox from "../Listbox";
 import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+
 import Button from "../buttons/Button";
+import ListBox from "../Listbox";
 
 const AddProjectMemberDialog = ({
 	isOpen,

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -1,15 +1,17 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import ListBox from "../Listbox";
 import { useRouter } from "next/router";
-import Button from "../buttons/Button";
-import InputField from "../InputField";
-import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
-import { decryptAssymmetric, encryptAssymmetric } from "../../utilities/crypto";
-import addServiceToken from "~/pages/api/serviceToken/addServiceToken";
-import nacl from "tweetnacl";
 import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Dialog, Transition } from "@headlessui/react";
+import nacl from "tweetnacl";
+
+import addServiceToken from "~/pages/api/serviceToken/addServiceToken";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+
+import { decryptAssymmetric, encryptAssymmetric } from "../../utilities/crypto";
+import Button from "../buttons/Button";
+import InputField from "../InputField";
+import ListBox from "../Listbox";
 
 const envMapping = {
 	Development: "dev",

frontend/components/basic/dialog/AddUserDialog.js

@@ -1,9 +1,10 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment } from "react";
-import InputField from "../InputField";
 import { useRouter } from "next/router";
-import Button from "../buttons/Button";
+import { Dialog, Transition } from "@headlessui/react";
+
 import { STRIPE_PRODUCT_STARTER } from "../../utilities/config";
+import Button from "../buttons/Button";
+import InputField from "../InputField";
 
 const AddUserDialog = ({
 	isOpen,

frontend/components/basic/dialog/AddWorkspaceDialog.js

@@ -1,9 +1,10 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import InputField from "../InputField";
 import Image from "next/image";
-import { Checkbox } from "../table/Checkbox";
+import { Dialog, Transition } from "@headlessui/react";
+
 import Button from "../buttons/Button";
+import InputField from "../InputField";
+import { Checkbox } from "../table/Checkbox";
 
 /**
  * The dialog modal for when the user wants to create a new workspace

frontend/components/basic/dialog/DeleteUserDialog.js

@@ -1,5 +1,6 @@
-import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+
 import InputField from '../InputField';
 
 // #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.

frontend/components/basic/layout.js

@@ -1,29 +1,29 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-
-import NavBarDashboard from "../navigation/NavBarDashboard";
-import Listbox from "./Listbox";
-import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-	faHouse,
-	faUser,
 	faGear,
-	faMobile,
+	faHouse,
 	faLink,
+	faMobile,
+	faUser,
 } from "@fortawesome/free-solid-svg-icons";
-import AddWorkspaceDialog from "./dialog/AddWorkspaceDialog";
-import createWorkspace from "~/pages/api/workspace/createWorkspace";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import getOrganizations from "~/pages/api/organization/getOrgs";
 import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProjects";
 import getOrganizationUsers from "~/pages/api/organization/GetOrgUsers";
 import addUserToWorkspace from "~/pages/api/workspace/addUserToWorkspace";
-import getOrganizations from "~/pages/api/organization/getOrgs";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import createWorkspace from "~/pages/api/workspace/createWorkspace";
+import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
 
+import NavBarDashboard from "../navigation/NavBarDashboard";
 import { decryptAssymmetric, encryptAssymmetric } from "../utilities/crypto";
 import Button from "./buttons/Button";
+import AddWorkspaceDialog from "./dialog/AddWorkspaceDialog";
+import Listbox from "./Listbox";
 
 export default function Layout({ children }) {
 	const router = useRouter();

frontend/components/basic/popups/BottomRightPopup.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function BottonRightPopup({
 	buttonText,

frontend/components/basic/table/ServiceTokenTable.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { faX } from "@fortawesome/free-solid-svg-icons";
-import Button from "../buttons/Button";
+
 import guidGenerator from "../../utilities/randomId";
+import Button from "../buttons/Button";
 
 const roles = ["admin", "user"];
 

frontend/components/basic/table/UserTable.js

@@ -1,14 +1,16 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
-import Listbox from "../Listbox";
-import uploadKeys from "~/pages/api/workspace/uploadKeys";
-import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
-import deleteUserFromWorkspace from "~/pages/api/workspace/deleteUserFromWorkspace";
-import changeUserRoleInWorkspace from "~/pages/api/workspace/changeUserRoleInWorkspace";
-import deleteUserFromOrganization from "~/pages/api/organization/deleteUserFromOrganization";
 import { faX } from "@fortawesome/free-solid-svg-icons";
-import Button from "../buttons/Button";
+
+import deleteUserFromOrganization from "~/pages/api/organization/deleteUserFromOrganization";
+import changeUserRoleInWorkspace from "~/pages/api/workspace/changeUserRoleInWorkspace";
+import deleteUserFromWorkspace from "~/pages/api/workspace/deleteUserFromWorkspace";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+import uploadKeys from "~/pages/api/workspace/uploadKeys";
+
 import guidGenerator from "../../utilities/randomId";
+import Button from "../buttons/Button";
+import Listbox from "../Listbox";
 
 const {
 	decryptAssymmetric,

frontend/components/billing/Card.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
+import { faCheck, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function Card({ card, changeSelectedCard, selected }) {
 	function creditCardBrandIcon(cc) {

frontend/components/billing/Plan.js

@@ -1,4 +1,5 @@
 import React from "react";
+
 import StripeRedirect from "~/pages/api/organization/StripeRedirect";
 
 export default function Plan({ plan }) {

frontend/components/dashboard/DashboardInputField.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import guidGenerator from "../utilities/randomId";
 
 /**

frontend/components/dashboard/DropZone.js

@@ -1,13 +1,12 @@
 import { useState } from "react";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Image from "next/image";
 import { faUpload } from "@fortawesome/free-solid-svg-icons";
-import guidGenerator from "../utilities/randomId";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import Button from "../basic/buttons/Button";
 import Error from "../basic/Error";
-import Image from "next/image";
 import parse from "../utilities/file";
-import Button from "../basic/buttons/Button";
+import guidGenerator from "../utilities/randomId";
 
 const DropZone = ({
 	setData,

frontend/components/navigation/NavBarDashboard.js

@@ -1,27 +1,27 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/jsx-key */
-import React, { useState, Fragment, useEffect } from "react";
-import { useRouter } from "next/router";
-
+import React, { Fragment, useEffect,useState } from "react";
 import Image from "next/image";
-
-import logout from "~/pages/api/auth/Logout";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRouter } from "next/router";
+import { faGithub,faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
 import {
+	faAngleDown,
 	faBook,
-	faGear,
 	faCoins,
-	faRightFromBracket,
 	faEnvelope,
+	faGear,
 	faPlus,
-	faAngleDown,
+	faRightFromBracket,
 } from "@fortawesome/free-solid-svg-icons";
-import { faSlack, faGithub } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Menu, Transition } from "@headlessui/react";
-import getUser from "~/pages/api/user/getUser";
-import getOrganizations from "~/pages/api/organization/getOrgs";
+
+import logout from "~/pages/api/auth/Logout";
 import getOrganization from "~/pages/api/organization/GetOrg";
+import getOrganizations from "~/pages/api/organization/getOrgs";
+import getUser from "~/pages/api/user/getUser";
+
 import guidGenerator from "../utilities/randomId";
 
 const supportOptions = [

frontend/components/navigation/NavHeader.js

@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRouter } from "next/router";
+import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
 import {
 	faAngleRight,
 	faQuestionCircle,
 } from "@fortawesome/free-solid-svg-icons";
-import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import getOrganization from "~/pages/api/organization/GetOrg";
 import getWorkspaceInfo from "~/pages/api/workspace/getWorkspaceInfo";
-import { useRouter } from "next/router";
 
 export default function NavHeader({ pageName, isProjectRelated }) {
 	const [orgName, setOrgName] = useState("");