Use eslint-plugin-import to bring some order to the mess (#132)

Fixes #130

Reviewed-on: #132
Reviewed-by: dora <d43su@csclub.uwaterloo.ca>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>

.eslintrc.js

@@ -9,6 +9,9 @@ module.exports = {
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
     "plugin:react/recommended",
     "plugin:prettier/recommended",
   ],
@@ -16,12 +19,37 @@ module.exports = {
   rules: {
     "prettier/prettier": "error",
 
+    "import/first": "error",
+    "import/order": [
+      "error",
+      {
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true,
+        },
+        "pathGroups": [
+          {
+            "pattern": "@/**",
+            "group": "external",
+            "position": "after",
+          },
+          {
+            "pattern": "./*.css",
+            "group": "index",
+            "position": "after",
+          }
+        ],
+      },
+    ],
+
     "react/prop-types": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
 
     // Turn off these rules
     "@typescript-eslint/explicit-module-boundary-types": "off",
+    "import/no-unresolved": "off",
   },
   settings: {
     react: {

components/Bubble.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+
 import { DefaultLayout } from "./DefaultLayout";
+
 import styles from "./Bubble.module.css";
 
 export default function Bubble(props: { children: React.ReactNode }) {

components/Button.tsx

@@ -1,4 +1,5 @@
 import React, { AnchorHTMLAttributes, ButtonHTMLAttributes } from "react";
+
 import styles from "./Button.module.css";
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

components/ConnectWithUs.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import styles from "./ConnectWithUs.module.css";
-import { SocialLinks } from "./SocialLinks";
+
 import { Link } from "./Link";
+import { SocialLinks } from "./SocialLinks";
+
+import styles from "./ConnectWithUs.module.css";
 
 export function ConnectWithUs() {
   return (

components/DefaultLayout.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import styles from "./DefaultLayout.module.css";
 
 export function DefaultLayout(props: { children: React.ReactNode }) {

components/EmailSignup.tsx

@@ -1,8 +1,10 @@
 import React from "react";
-import styles from "./EmailSignup.module.css";
+
 import { Button } from "./Button";
 import { Input } from "./Input";
 
+import styles from "./EmailSignup.module.css";
+
 export function EmailSignup() {
   return (
     <section className={styles.container}>

components/EventCard.tsx

@@ -1,10 +1,11 @@
 import React, { ReactNode } from "react";
-import { Button } from "./Button";
-import styles from "./EventCard.module.css";
 
+import { Button } from "./Button";
 import { EventSetting } from "./EventSetting";
 import { Image } from "./Image";
 
+import styles from "./EventCard.module.css";
+
 interface EventCardProps {
   name: string;
   short: string;

components/EventDescriptionCard.tsx

@@ -1,10 +1,12 @@
 import React from "react";
+
 import { Button } from "./Button";
-import { Image } from "./Image";
 import { EventSetting } from "./EventSetting";
-import styles from "./EventDescriptionCard.module.css";
+import { Image } from "./Image";
 import { Discord, Twitch, Instagram, Facebook } from "./SocialLinks";
 
+import styles from "./EventDescriptionCard.module.css";
+
 interface Props {
   name: string;
   short: string;

components/EventSetting.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import styles from "./EventSetting.module.css";
 
 interface Props {

components/Footer.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import styles from "./Footer.module.css";
+
 import { SocialLinks } from "./SocialLinks";
 
+import styles from "./Footer.module.css";
+
 export function Footer() {
   return (
     <footer className={styles.footer}>

components/Input.tsx

@@ -1,4 +1,5 @@
 import React, { InputHTMLAttributes } from "react";
+
 import styles from "./Input.module.css";
 
 export function Input(props: InputHTMLAttributes<HTMLInputElement>) {

components/Link.tsx

@@ -1,7 +1,7 @@
+import NextLink, { LinkProps as NextLinkProps } from "next/link";
 import React from "react";
+
 import styles from "./Link.module.css";
-import NextLink from "next/link";
-import { LinkProps as NextLinkProps } from "next/link";
 
 type Props = Omit<NextLinkProps, "href"> & { href: string };
 

components/MiniEventCard.tsx

@@ -1,5 +1,7 @@
 import React, { ReactNode } from "react";
+
 import { EventSetting } from "./EventSetting";
+
 import styles from "./MiniEventCard.module.css";
 
 interface Props {

components/MiniTechTalkCard.tsx

@@ -1,6 +1,7 @@
-import { DEFAULT_MIN_VERSION } from "node:tls";
 import React from "react";
+
 import { Image } from "./Image";
+
 import styles from "./MiniTechTalkCard.module.css";
 
 interface MiniTechTalkProps {

components/Navbar.tsx

@@ -1,7 +1,9 @@
-import React, { useReducer } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import React, { useReducer } from "react";
+
 import { Image } from "./Image";
+
 import styles from "./Navbar.module.css";
 
 type Menu = {

components/NewsCard.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+
 import styles from "./NewsCard.module.css";
 
 interface NewsCardProps {

components/OrganizedContent.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode, ComponentType } from "react";
+
 import styles from "./OrganizedContent.module.css";
 
 export interface LinkProps {

components/SocialLinks.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import styles from "./SocialLinks.module.css";
 
 interface Props {

components/TeamMember.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import styles from "./TeamMember.module.css";
+
 import { Image } from "./Image";
 
+import styles from "./TeamMember.module.css";
+
 interface TeamMemberProps {
   name: string;
   role: string;

components/TeamMemberCard.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+
 import { Image } from "./Image";
+
 import styles from "./TeamMemberCard.module.css";
 
 interface TeamMemberCardProps {

components/TechTalkCard.tsx

@@ -1,5 +1,7 @@
 import React, { ReactNode } from "react";
+
 import { Image } from "./Image";
+
 import styles from "./TechTalkCard.module.css";
 
 interface TechTalkProps {

components/playground.tsx

@@ -1,59 +1,56 @@
 import React, { useState } from "react";
-import styles from "./playground.module.css";
 
 import AfterHoursContent, {
   metadata as afterHoursMetadata,
 } from "../content/playground/after-hours.event.mdx";
-import OOTBReact, {
-  metadata as OOTBReactEventMetadata,
-} from "../content/playground/ootb-react.event.mdx";
 import AltTab, {
   metadata as altTabEventMetadata,
 } from "../content/playground/alt-tab.event.mdx";
-
-import Name, {
-  metadata as nameOrganizedContentMetadata,
-} from "../content/playground/constitution/name.section.mdx";
-import Purpose, {
-  metadata as purposeOrganizedContentMetadata,
-} from "../content/playground/constitution/purpose.section.mdx";
-import Membership, {
-  metadata as membershipOrganizedContentMetadata,
-} from "../content/playground/constitution/membership.section.mdx";
-import Officers, {
-  metadata as officersOrganizedContentMetadata,
-} from "../content/playground/constitution/officers.section.mdx";
+import CodeyInfo, {
+  metadata as codeyMetadata,
+} from "../content/playground/codey.team-member.mdx";
 import Duties, {
   metadata as dutiesOrganizedContentMetadata,
 } from "../content/playground/constitution/duties-of-officers.section.mdx";
 import ExecutiveCouncil, {
   metadata as executiveCouncilOrganizedContentMetadata,
 } from "../content/playground/constitution/executive-council.section.mdx";
-
-import UnavailableContent, {
-  metadata as unavailableMetadata,
-} from "../content/playground/unavailable.news.mdx";
+import Membership, {
+  metadata as membershipOrganizedContentMetadata,
+} from "../content/playground/constitution/membership.section.mdx";
+import Name, {
+  metadata as nameOrganizedContentMetadata,
+} from "../content/playground/constitution/name.section.mdx";
+import Officers, {
+  metadata as officersOrganizedContentMetadata,
+} from "../content/playground/constitution/officers.section.mdx";
+import Purpose, {
+  metadata as purposeOrganizedContentMetadata,
+} from "../content/playground/constitution/purpose.section.mdx";
 import { metadata as dogeMetadata } from "../content/playground/doge.team-member.mdx";
-import CodeyInfo, {
-  metadata as codeyMetadata,
-} from "../content/playground/codey.team-member.mdx";
-
+import OOTBReact, {
+  metadata as OOTBReactEventMetadata,
+} from "../content/playground/ootb-react.event.mdx";
 import TempTechTalk, {
   metadata as tempTechTalkMetadata,
 } from "../content/playground/temp.talk.mdx";
+import UnavailableContent, {
+  metadata as unavailableMetadata,
+} from "../content/playground/unavailable.news.mdx";
 
-import { MiniEventCard } from "./MiniEventCard";
-import { NewsCard } from "./NewsCard";
-import { Link } from "./Link";
+import { Button } from "./Button";
 import { EventCard } from "./EventCard";
 import { EventDescriptionCard } from "./EventDescriptionCard";
+import { Link } from "./Link";
+import { MiniEventCard } from "./MiniEventCard";
+import { MiniTechTalkCard } from "./MiniTechTalkCard";
+import { NewsCard } from "./NewsCard";
+import { OrganizedContent, LinkProps } from "./OrganizedContent";
 import { TeamMember } from "./TeamMember";
 import { TeamMemberCard } from "./TeamMemberCard";
-import { OrganizedContent, LinkProps } from "./OrganizedContent";
-import { Button } from "./Button";
-import { Footer } from "./Footer";
 import { TechTalkCard } from "./TechTalkCard";
-import { MiniTechTalkCard } from "./MiniTechTalkCard";
+
+import styles from "./playground.module.css";
 
 const events = [
   { Content: OOTBReact, metadata: OOTBReactEventMetadata },

content/about/index.mdx

@@ -1,4 +1,4 @@
-import Bubble from "./../../components/Bubble";
+import Bubble from "@/components/Bubble";
 
 <Bubble>
 

package.json

@@ -34,6 +34,7 @@
     "@typescript-eslint/parser": "4.28.4",
     "eslint": "7.32.0",
     "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",

pages/_app.tsx

@@ -1,12 +1,14 @@
-import React, { ComponentType, ReactNode } from "react";
+import { MDXProvider } from "@mdx-js/react";
 import { NextComponentType, NextPageContext } from "next";
 import { AppProps as DefaultAppProps } from "next/app";
-import { MDXProvider } from "@mdx-js/react";
-import { ThemeProvider } from "../components/Theme";
-import { Navbar } from "../components/Navbar";
-import { Footer } from "../components/Footer";
-import { Link } from "../components/Link";
-import { DefaultLayout } from "../components/DefaultLayout";
+import React, { ComponentType, ReactNode } from "react";
+
+import { DefaultLayout } from "@/components/DefaultLayout";
+import { Footer } from "@/components/Footer";
+import { Link } from "@/components/Link";
+import { Navbar } from "@/components/Navbar";
+import { ThemeProvider } from "@/components/Theme";
+
 import styles from "./_app.module.css";
 
 import "./_app.css";

pages/about/index.tsx

@@ -1,10 +1,13 @@
 import React from "react";
-import { Image } from "../../components/Image";
+
+import { ConnectWithUs } from "@/components/ConnectWithUs";
+import { DefaultLayout } from "@/components/DefaultLayout";
+import { EmailSignup } from "@/components/EmailSignup";
+import { Image } from "@/components/Image";
+
 import Content from "../../content/about/index.mdx";
+
 import styles from "./index.module.css";
-import { ConnectWithUs } from "components/ConnectWithUs";
-import { EmailSignup } from "components/EmailSignup";
-import { DefaultLayout } from "components/DefaultLayout";
 
 export default function AboutUs() {
   return (

pages/about/our-supporters.tsx

@@ -1,6 +1,9 @@
 import React from "react";
-import { Image } from "../../components/Image";
+
+import { Image } from "@/components/Image";
+
 import Content from "../../content/about/our-supporters.mdx";
+
 import styles from "./our-supporters.module.css";
 
 export default function OurSupporters() {

pages/get-involved.tsx

@@ -1,8 +1,11 @@
 import React from "react";
-import { Image } from "../components/Image";
-import { ConnectWithUs } from "../components/ConnectWithUs";
-import { EmailSignup } from "../components/EmailSignup";
+
+import { ConnectWithUs } from "@/components/ConnectWithUs";
+import { EmailSignup } from "@/components/EmailSignup";
+import { Image } from "@/components/Image";
+
 import Content from "../content/get-involved.mdx";
+
 import styles from "./get-involved.module.css";
 
 export default function GetInvolved() {

pages/index.tsx

@@ -1,24 +1,27 @@
 import React from "react";
-import { Image } from "../components/Image";
-import { SocialLinks } from "../components/SocialLinks";
-import { EventDescriptionCard } from "../components/EventDescriptionCard";
-import { NewsCard } from "../components/NewsCard";
-import { ConnectWithUs } from "../components/ConnectWithUs";
-import { EmailSignup } from "../components/EmailSignup";
-import { DefaultLayout } from "../components/DefaultLayout";
-import styles from "./index.module.css";
 
-// temporary event and news imports
-import OOTBReact, {
-  metadata as OOTBReactEventMetadata,
-} from "../content/playground/ootb-react.event.mdx";
+import { ConnectWithUs } from "@/components/ConnectWithUs";
+import { DefaultLayout } from "@/components/DefaultLayout";
+import { EmailSignup } from "@/components/EmailSignup";
+import { EventDescriptionCard } from "@/components/EventDescriptionCard";
+import { Image } from "@/components/Image";
+import { NewsCard } from "@/components/NewsCard";
+import { SocialLinks } from "@/components/SocialLinks";
+
 import AltTab, {
   metadata as altTabEventMetadata,
 } from "../content/playground/alt-tab.event.mdx";
+import OOTBReact, {
+  metadata as OOTBReactEventMetadata,
+} from "../content/playground/ootb-react.event.mdx";
 import UnavailableContent, {
   metadata as unavailableMetadata,
 } from "../content/playground/unavailable.news.mdx";
 
+import styles from "./index.module.css";
+
+// temporary event and news imports
+
 export default function Home() {
   const events = [
     { Content: OOTBReact, metadata: OOTBReactEventMetadata },

pages/playground.mdx

@@ -10,11 +10,11 @@ import {
   ButtonDemo,
   TechTalkDemo,
   MiniTechTalkDemo,
-} from "../components/playground";
-import { ConnectWithUs } from "../components/ConnectWithUs";
-import { EmailSignup } from "../components/EmailSignup";
+} from "@/components/playground";
+import { ConnectWithUs } from "@/components/ConnectWithUs";
+import { EmailSignup } from "@/components/EmailSignup";
 
-import { TeamMemberCard } from "../components/TeamMemberCard";
+import { TeamMemberCard } from "@/components/TeamMemberCard";
 
 # Playground
 

pages/resources/index.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import Head from "next/head";
+import React from "react";
 
 export default function Resources() {
   return (

pages/themer.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import { useThemeContext, emptyPalette } from "components/Theme";
-import { Input } from "components/Input";
-import { Button } from "components/Button";
+
+import { Button } from "@/components/Button";
+import { Input } from "@/components/Input";
+import { useThemeContext, emptyPalette } from "@/components/Theme";
 
 import styles from "./themer.module.css";
 

tsconfig.json

@@ -24,6 +24,9 @@
     "strictBindCallApply": true,
     "strictPropertyInitialization": true,
     "strictFunctionTypes": true,
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
   },
   "include": [
     "next-env.d.ts",