chore(eslint): add simple import sort plugin and rules (#127)

* chore(eslint): add simple import sort plugin and rules

* fix unit tests

Author: domhhv

.eslintrc

@@ -21,7 +21,8 @@
     "react-hooks",
     "jsx-a11y",
     "import",
-    "unused-imports"
+    "unused-imports",
+    "simple-import-sort"
   ],
   "settings": {
     "react": {
@@ -32,6 +33,23 @@
     "object-shorthand": "error",
     "no-undef": "off",
     "no-duplicate-imports": "error",
+    "import/first": "error",
+    "import/newline-after-import": "error",
+    "import/no-duplicates": "error",
+    "simple-import-sort/exports": "error",
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          ["^react", "^@?\\w"],
+          ["^(@components|@models|@services|@stores|@hooks|@helpers|@utils|@tests)(/.*|$)"],
+          ["^\\u0000"],
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+          ["^.+\\.s?css$"]
+        ]
+      }
+    ],
     "@typescript-eslint/consistent-type-imports": [
       "error",
       {
@@ -44,22 +62,6 @@
         "argsIgnorePattern": "^_",
         "varsIgnorePattern": "^_"
       }
-    ],
-    "import/order": [
-      "error",
-      {
-        "newlines-between": "always",
-        "alphabetize": {
-          "order": "asc"
-        },
-        "groups": [
-          "builtin",
-          "external",
-          "internal",
-          "parent",
-          ["index", "sibling"]
-        ]
-      }
     ]
   }
 }

package.json

@@ -35,7 +35,7 @@
     "eslint:fix": "eslint --fix .",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write .",
-    "test": "DEBUG_PRINT_LIMIT=30000 jest --config tests/jest.config.js",
+    "test": "DEBUG_PRINT_LIMIT=30000 jest --silent --config tests/jest.config.js",
     "test:watch": "yarn test --watch",
     "test:coverage": "yarn test --coverage",
     "test:clear-cache": "jest --clearCache",
@@ -97,6 +97,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-unused-imports": "^3.0.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",

src/components/App.test.tsx

@@ -1,9 +1,10 @@
-import { generateCalendarRange } from '@helpers';
-import { getWeeksInMonth } from '@internationalized/date';
-import { act, render } from '@testing-library/react';
 import React from 'react';
 import { useCalendar } from 'react-aria';
 import { useCalendarState } from 'react-stately';
+import { getWeeksInMonth } from '@internationalized/date';
+import { act, render } from '@testing-library/react';
+
+import { generateCalendarRange } from '@helpers';
 
 import App from './App';
 

src/components/App.tsx

@@ -1,14 +1,15 @@
+import React from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { setDefaultOptions } from 'date-fns';
+import { enGB } from 'date-fns/locale';
+
 import {
+  AccountPage,
   AppHeader,
   Calendar,
-  AccountPage,
   HabitsPage,
   Snackbars,
 } from '@components';
-import { setDefaultOptions } from 'date-fns';
-import { enGB } from 'date-fns/locale';
-import React from 'react';
-import { Navigate, Route, Routes } from 'react-router-dom';
 
 import Providers from './Providers';
 

src/components/Providers.tsx

@@ -1,9 +1,10 @@
-import { supabaseClient } from '@helpers';
-import { NextUIProvider } from '@nextui-org/react';
-import { SessionContextProvider } from '@supabase/auth-helpers-react';
 import React, { type ReactNode } from 'react';
 import { I18nProvider } from 'react-aria';
 import { BrowserRouter, useNavigate } from 'react-router-dom';
+import { NextUIProvider } from '@nextui-org/react';
+import { SessionContextProvider } from '@supabase/auth-helpers-react';
+
+import { supabaseClient } from '@helpers';
 
 type ProviderProps = {
   children: ReactNode;

src/components/calendar/Calendar.test.tsx

@@ -1,5 +1,11 @@
 import Calendar from './Calendar';
 
+jest.mock('@stores', () => ({
+  useHabitsStore: jest.fn(),
+  useOccurrencesStore: jest.fn(),
+  useTraitsStore: jest.fn(),
+}));
+
 describe(Calendar.name, () => {
   it('should be tested', () => {
     expect(true).toBeTruthy();

src/components/calendar/Calendar.tsx

@@ -1,11 +1,12 @@
+import React from 'react';
+import { type AriaButtonProps, useCalendar, useLocale } from 'react-aria';
+import { useCalendarState } from 'react-stately';
+import { CalendarDate, GregorianCalendar } from '@internationalized/date';
+
 import { generateCalendarRange } from '@helpers';
 import { useDocumentTitle } from '@hooks';
-import { CalendarDate, GregorianCalendar } from '@internationalized/date';
 import { useOccurrencesStore } from '@stores';
 import { capitalizeFirstLetter } from '@utils';
-import React from 'react';
-import { type AriaButtonProps, useCalendar, useLocale } from 'react-aria';
-import { useCalendarState } from 'react-stately';
 
 import CalendarGrid from './CalendarGrid';
 import CalendarHeader from './CalendarHeader';

src/components/calendar/CalendarCell.test.tsx

@@ -1,5 +1,11 @@
 import CalendarCell from './CalendarCell';
 
+jest.mock('@stores', () => ({
+  useHabitsStore: jest.fn(),
+  useOccurrencesStore: jest.fn(),
+  useTraitsStore: jest.fn(),
+}));
+
 describe(CalendarCell.name, () => {
   it('should render', () => {
     expect(true).toBe(true);

src/components/calendar/CalendarCell.tsx

@@ -1,11 +1,12 @@
-import { useScreenSize } from '@hooks';
+import React from 'react';
 import { CalendarBlank } from '@phosphor-icons/react';
-import { useOccurrencesStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
 import clsx from 'clsx';
 import { format } from 'date-fns';
 import { AnimatePresence, motion } from 'framer-motion';
-import React from 'react';
+
+import { useScreenSize } from '@hooks';
+import { useOccurrencesStore } from '@stores';
 
 import OccurrenceChip from './OccurrenceChip';
 

src/components/calendar/CalendarGrid.test.tsx

@@ -1,5 +1,11 @@
 import CalendarGrid from './CalendarGrid';
 
+jest.mock('@stores', () => ({
+  useHabitsStore: jest.fn(),
+  useOccurrencesStore: jest.fn(),
+  useTraitsStore: jest.fn(),
+}));
+
 describe(CalendarGrid.name, () => {
   it('should be tested', () => {
     expect(true).toBeTruthy();

src/components/calendar/CalendarHeader.test.tsx

@@ -1,8 +1,14 @@
-import { render } from '@testing-library/react';
 import React from 'react';
+import { render } from '@testing-library/react';
 
 import CalendarHeader, { type CalendarHeaderProps } from './CalendarHeader';
 
+jest.mock('@stores', () => ({
+  useHabitsStore: jest.fn(),
+  useOccurrencesStore: jest.fn(),
+  useTraitsStore: jest.fn(),
+}));
+
 describe(CalendarHeader.name, () => {
   const props: CalendarHeaderProps = {
     activeMonthLabel: 'January',

src/components/calendar/CalendarHeader.tsx

@@ -1,9 +1,10 @@
-import { useScreenSize } from '@hooks';
-import { Select, SelectItem, Button, SelectSection } from '@nextui-org/react';
+import React from 'react';
+import { Button, Select, SelectItem, SelectSection } from '@nextui-org/react';
 import { ArrowFatLeft, ArrowFatRight } from '@phosphor-icons/react';
-import { useTraitsStore, useHabitsStore, useOccurrencesStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
-import React from 'react';
+
+import { useScreenSize } from '@hooks';
+import { useHabitsStore, useOccurrencesStore, useTraitsStore } from '@stores';
 
 type NavigationButtonProps = {
   disabled: boolean;

src/components/calendar/CalendarMonthGrid.tsx

@@ -1,8 +1,8 @@
-import { type CalendarDate, getWeeksInMonth } from '@internationalized/date';
-import clsx from 'clsx';
 import React, { type ForwardedRef } from 'react';
 import { useLocale } from 'react-aria';
 import { type CalendarState } from 'react-stately';
+import { type CalendarDate, getWeeksInMonth } from '@internationalized/date';
+import clsx from 'clsx';
 
 import CalendarCell from './CalendarCell';
 

src/components/calendar/DayHabitModalDialog.test.tsx

@@ -1,9 +1,10 @@
-import { useHabitsStore, useOccurrencesStore } from '@stores';
+import React from 'react';
 import { useUser } from '@supabase/auth-helpers-react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
-import { makeTestHabit } from '@tests';
 import { format } from 'date-fns';
-import React from 'react';
+
+import { useHabitsStore, useOccurrencesStore } from '@stores';
+import { makeTestHabit } from '@tests';
 
 import DayHabitModalDialog from './DayHabitModalDialog';
 

src/components/calendar/DayHabitModalDialog.tsx

@@ -1,17 +1,18 @@
+import React, { type MouseEventHandler } from 'react';
 import {
   Button,
   Modal,
-  ModalContent,
-  ModalHeader,
   ModalBody,
+  ModalContent,
   ModalFooter,
+  ModalHeader,
   Select,
   SelectItem,
 } from '@nextui-org/react';
-import { useHabitsStore, useOccurrencesStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
 import { format } from 'date-fns';
-import React, { type MouseEventHandler } from 'react';
+
+import { useHabitsStore, useOccurrencesStore } from '@stores';
 
 type DayHabitModalDialogProps = {
   open: boolean;

src/components/calendar/OccurrenceChip.test.tsx

@@ -1,8 +1,9 @@
-import { useScreenSize } from '@hooks';
+import React from 'react';
 import { fireEvent, render, waitFor } from '@testing-library/react';
+
+import { useScreenSize } from '@hooks';
 import { makeTestOccurrence } from '@tests';
 import { getHabitIconUrl } from '@utils';
-import React from 'react';
 
 import OccurrenceChip, { type OccurrenceChipProps } from './OccurrenceChip';
 

src/components/calendar/OccurrenceChip.tsx

@@ -1,8 +1,9 @@
+import React from 'react';
 import type { Occurrence } from '@models';
 import { Badge, Button, Tooltip } from '@nextui-org/react';
 import { Trash } from '@phosphor-icons/react';
+
 import { getHabitIconUrl } from '@utils';
-import React from 'react';
 
 export type OccurrenceChipProps = {
   occurrences: Occurrence[];

src/components/calendar/index.ts

@@ -1,5 +1,4 @@
 export * from './Calendar';
 export { default as Calendar } from './Calendar';
-
 export * from './OccurrenceChip';
 export { default as OccurrenceChip } from './OccurrenceChip';

src/components/common/Alert/Alert.tsx

@@ -1,3 +1,4 @@
+import React, { type ReactNode } from 'react';
 import { type ButtonProps } from '@nextui-org/react';
 import {
   BellRinging,
@@ -9,7 +10,6 @@ import {
   WarningCircle,
 } from '@phosphor-icons/react';
 import clsx from 'clsx';
-import React, { type ReactNode } from 'react';
 import { type SetRequired, type ValueOf } from 'type-fest';
 
 export type ButtonColor = ValueOf<

src/components/common/ConfirmDialog/ConfirmDialog.test.tsx

@@ -1,5 +1,5 @@
-import { render } from '@testing-library/react';
 import React from 'react';
+import { render } from '@testing-library/react';
 
 import ConfirmDialog from './ConfirmDialog';
 

src/components/common/ConfirmDialog/ConfirmDialog.tsx

@@ -1,11 +1,11 @@
+import React from 'react';
 import {
   Button,
-  ModalBody,
-  ModalHeader,
   Modal,
+  ModalBody,
   ModalContent,
+  ModalHeader,
 } from '@nextui-org/react';
-import React from 'react';
 
 type ConfirmDialogProps = {
   open: boolean;

src/components/common/PasswordInput/PasswordInput.tsx

@@ -1,6 +1,6 @@
+import React, { type ChangeEventHandler } from 'react';
 import { Button, Input } from '@nextui-org/react';
 import { Eye, EyeSlash } from '@phosphor-icons/react';
-import React, { type ChangeEventHandler } from 'react';
 
 type PasswordInputProps = {
   variant?: 'flat' | 'bordered' | 'faded' | 'underlined';

src/components/common/Snackbars/Snackbars.tsx

@@ -1,8 +1,9 @@
-import { Alert } from '@components';
+import React from 'react';
 import { Button } from '@nextui-org/react';
-import { useSnackbarsStore } from '@stores';
 import { AnimatePresence, motion } from 'framer-motion';
-import React from 'react';
+
+import { Alert } from '@components';
+import { useSnackbarsStore } from '@stores';
 
 const Snackbars = () => {
   const { snackbars, hideSnackbar } = useSnackbarsStore();

src/components/common/index.ts

@@ -1,5 +1,5 @@
+export * from './Alert';
 export * from './ConfirmDialog';
-export * from './VisuallyHiddenInput';
 export * from './PasswordInput';
-export * from './Alert';
 export * from './Snackbars';
+export * from './VisuallyHiddenInput';

src/components/habit/add-habit/AddHabitDialogButton.test.tsx

@@ -1,8 +1,9 @@
-import { StorageBuckets, uploadFile } from '@services';
-import { useSnackbarsStore, useHabitsStore } from '@stores';
+import React from 'react';
 import { useUser } from '@supabase/auth-helpers-react';
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
-import React from 'react';
+
+import { StorageBuckets, uploadFile } from '@services';
+import { useHabitsStore, useSnackbarsStore } from '@stores';
 
 import AddHabitDialogButton from './AddHabitDialogButton';
 

src/components/habit/add-habit/AddHabitDialogButton.tsx

@@ -1,5 +1,4 @@
-import { AddCustomTraitModal, VisuallyHiddenInput } from '@components';
-import { useTextField, useFileField } from '@hooks';
+import React from 'react';
 import {
   Button,
   Input,
@@ -13,9 +12,11 @@ import {
   Textarea,
 } from '@nextui-org/react';
 import { CloudArrowUp, Plus } from '@phosphor-icons/react';
-import { useHabitsStore, useTraitsStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
-import React from 'react';
+
+import { AddCustomTraitModal, VisuallyHiddenInput } from '@components';
+import { useFileField, useTextField } from '@hooks';
+import { useHabitsStore, useTraitsStore } from '@stores';
 
 const AddHabitDialogButton = () => {
   const user = useUser();