Configure eslint plugins for imports (codse#77)

Author: sudhashrestha

.eslintrc.cjs

@@ -8,9 +8,9 @@ module.exports = {
     "plugin:@typescript-eslint/recommended",
     "prettier",
   ],
-  plugins: ["react", "@typescript-eslint"],
+  plugins: ["react", "@typescript-eslint", "simple-import-sort", "unused-imports"],
   parserOptions: {
-    ecmaVersion: 2021,
+    ecmaVersion: "latest",
     sourceType: "module",
   },
   rules: {
@@ -19,5 +19,46 @@ module.exports = {
     "@typescript-eslint/no-explicit-any": "warn",
     "react/no-unknown-property": ["error", { ignore: ["vaul-drawer-wrapper"] }],
     "@next/next/no-img-element": "off",
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error",
+    "@typescript-eslint/no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        vars: "all",
+        varsIgnorePattern: "^_",
+        args: "after-used",
+        argsIgnorePattern: "^_",
+      },
+    ],
   },
+  overrides: [
+    {
+      files: ["**/*.js", "**/*.ts", "**/*.tsx"],
+      rules: {
+        "simple-import-sort/imports": [
+          "error",
+          {
+            groups: [
+              // `react` first, `next` second, then packages starting with a character
+              ["^react$", "^next", "^[a-z]"],
+              // Packages starting with `@`
+              ["^@"],
+              // Packages starting with `~`
+              ["^~"],
+              // Imports starting with `../`
+              ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+              // Imports starting with `./`
+              ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+              // Style imports
+              ["^.+\\.s?css$"],
+              // Side effect imports
+              ["^\\u0000"],
+            ],
+          },
+        ],
+      },
+    },
+  ],
 };

animata/background/blurry-blob.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
+
 import BlurryBlob from "./blurry-blob";
 
 const meta = {

animata/background/moving-gradient.stories.tsx

@@ -1,6 +1,7 @@
+import { BadgeAlert } from "lucide-react";
+
 import MovingGradient from "@/animata/background/moving-gradient";
 import { Meta, StoryObj } from "@storybook/react";
-import { BadgeAlert } from "lucide-react";
 
 const meta = {
   title: "Background/Moving Gradient",

animata/background/moving-gradient.tsx

@@ -1,6 +1,7 @@
-import { cn } from "@/lib/utils";
 import { ComponentPropsWithoutRef } from "react";
 
+import { cn } from "@/lib/utils";
+
 interface MovingGradientProps extends ComponentPropsWithoutRef<"div"> {
   animated?: boolean;
   gradientClassName?: string;
@@ -15,10 +16,7 @@ export default function MovingGradient({
 }: MovingGradientProps) {
   const backgroundClassName = "pointer-events-none absolute h-full w-full";
   return (
-    <div
-      {...props}
-      className={cn("relative overflow-hidden bg-white", className)}
-    >
+    <div {...props} className={cn("relative overflow-hidden bg-white", className)}>
       <div
         className={cn(
           "bg-size bg-gradient-to-r from-yellow-500 from-30% via-yellow-700 via-50% to-pink-500 to-80% opacity-15",

animata/bento-grid/gradient.tsx

@@ -1,5 +1,4 @@
-import MovingGradient from "@/animata/background/moving-gradient";
-import { cn } from "@/lib/utils";
+import { ReactNode } from "react";
 import {
   ArrowRight,
   BarChart,
@@ -10,7 +9,9 @@ import {
   Sun,
   TypeIcon,
 } from "lucide-react";
-import { ReactNode } from "react";
+
+import MovingGradient from "@/animata/background/moving-gradient";
+import { cn } from "@/lib/utils";
 
 function BentoCard({
   title,

animata/button/arrow-button.tsx

@@ -1,7 +1,8 @@
 "use client";
-import { cn } from "@/lib/utils";
-import { MoveRight } from "lucide-react";
 import React from "react";
+import { MoveRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
 
 interface ArrowButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   text: string;

animata/button/get-started-button.tsx

@@ -1,6 +1,7 @@
-import { cn } from "@/lib/utils";
 import { ArrowRight } from "lucide-react";
 
+import { cn } from "@/lib/utils";
+
 interface IGetStartedButtonProps {
   text: string;
 }

animata/button/shining-button.tsx

@@ -1,6 +1,7 @@
-import { cn } from "@/lib/utils";
 import { ArrowRight } from "lucide-react";
 
+import { cn } from "@/lib/utils";
+
 export default function ShiningButton() {
   const label = "See Calendar";
   return (

animata/button/swipe-button.tsx

@@ -1,7 +1,8 @@
 "use client";
-import { cn } from "@/lib/utils";
 import React from "react";
 
+import { cn } from "@/lib/utils";
+
 interface SwipeButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   firstText: string;
   secondText: string;

animata/card/animated-card.stories.tsx

@@ -1,5 +1,5 @@
-
 import { Meta, StoryObj } from "@storybook/react";
+
 import AnimatedCard3d from "./animated-card";
 
 const meta = {