Merge pull request #9 from consdu/feature/format

Feature/format
consdu · Dec 28, 2023 · e22b616 · e22b616
2 parents 0ef3510 + 71c7056
commit e22b616
Show file tree

Hide file tree

Showing 63 changed files with 441 additions and 229 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -16,8 +16,48 @@ module.exports = {
   },
   parser: "@typescript-eslint/parser",
   parserOptions: { ecmaVersion: "latest", sourceType: "module" },
-  plugins: ["react-refresh", "jsx-a11y", "react-hooks"],
+  plugins: ["react-refresh", "jsx-a11y", "react-hooks", "perfectionist"],
   rules: {
+    "perfectionist/sort-imports": [
+      "error",
+      {
+        groups: [
+          [
+            "type",
+            "parent-type",
+            "sibling-type",
+            "index-type",
+            "internal-type",
+          ],
+          "react",
+          "next",
+          ["builtin", "external"],
+          "alias",
+          ["index", "parent", "sibling", "internal"],
+          ["side-effect", "style"],
+          "object",
+          "unknown",
+        ],
+        "custom-groups": {
+          value: {
+            react: [
+              "react",
+              "react-dom",
+              "react-native",
+              "react-router-dom",
+              "react-redux",
+            ],
+            next: ["next", "next/*"],
+            alias: "@/**",
+          },
+          type: {
+            react: "react",
+            next: "next",
+          },
+        },
+        "newlines-between": "never",
+      },
+    ],
     "react-refresh/only-export-components": "warn",
     "no-console": "error",
   },

diff --git a/index.html b/index.html
@@ -1,27 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="description"
+      content="An app that helps you manage your contact list"
+    />
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/site.webmanifest" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3d8c62" />
+    <meta name="msapplication-TileColor" content="#2c6f4c" />
+    <meta name="theme-color" content="#f1f8f4" />
+    <link
+      rel="preconnect"
+      href="https://constantin-dusescu-final-project-back.onrender.com"
+    />
+    <link rel="preconnect" href="https://media.discordapp.net" />
+    <link rel="dns-prefetch" href="https://media.discordapp.net" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Contact-in</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="description" content="An app that helps you manage your contact list">
-  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <link rel="manifest" href="/site.webmanifest">
-  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3d8c62">
-  <meta name="msapplication-TileColor" content="#2c6f4c">
-  <meta name="theme-color" content="#f1f8f4">
-  <link rel="preconnect" href="https://constantin-dusescu-final-project-back.onrender.com">
-  <link rel="preconnect" href="https://media.discordapp.net">
-  <link rel="dns-prefetch" href="https://media.discordapp.net">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Contact-in</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
-
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -45,6 +45,7 @@
     "@vitest/coverage-c8": "^0.31.0",
     "eslint": "^8.38.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-perfectionist": "^2.5.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -1,8 +1,8 @@
 import { useEffect } from "react";
-import useLocalStorage from "../../hooks/useLocalStorage/useLocalStorage";
-import useToken from "../../hooks/useToken/useToken";
-import { useAppDispatch } from "../../store";
-import { loginUserActionCreator } from "../../store/user/userSlice";
+import useLocalStorage from "@/hooks/useLocalStorage/useLocalStorage";
+import useToken from "@/hooks/useToken/useToken";
+import { useAppDispatch } from "@/store";
+import { loginUserActionCreator } from "@/store/user/userSlice";
 import Layout from "../Layout/Layout";
 
 const App = (): React.ReactElement => {

diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
@@ -1,5 +1,5 @@
 import { screen } from "@testing-library/react";
-import { renderWithProviders } from "../../testUtils/testUtils";
+import { renderWithProviders } from "@/testUtils/testUtils";
 import Button from "./Button";
 
 describe("Given a Button component", () => {

diff --git a/src/components/ContactCard/ContactCard.test.tsx b/src/components/ContactCard/ContactCard.test.tsx
@@ -1,9 +1,9 @@
 import { screen } from "@testing-library/react";
-import { vi } from "vitest";
 import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+import { contactMock } from "@/factories/contacts/contactsFactory";
+import { renderWithProviders, wrapWithRouter } from "@/testUtils/testUtils";
 import ContactCard from "./ContactCard";
-import { contactMock } from "../../factories/contacts/contactsFactory";
-import { renderWithProviders, wrapWithRouter } from "../../testUtils/testUtils";
 
 const handleDeleteClick = vi.fn();
 describe("Given a ContactCard component", () => {

diff --git a/src/components/ContactCard/ContactCard.tsx b/src/components/ContactCard/ContactCard.tsx
@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
-import { ContactStructure } from "../../types";
-import ContactCardStyled from "./ContactCardStyled";
 import { IoCloseCircleOutline } from "react-icons/io5";
+import { ContactStructure } from "@/types";
+import ContactCardStyled from "./ContactCardStyled";
 
 interface ContactCardProps {
   contact: ContactStructure;

diff --git a/src/components/ContactForm/ContactForm.test.tsx b/src/components/ContactForm/ContactForm.test.tsx
@@ -1,11 +1,8 @@
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { vi } from "vitest";
+import { fillContactForm, renderWithProviders } from "@/testUtils/testUtils";
 import ContactForm from "./ContactForm";
-import {
-  fillContactForm,
-  renderWithProviders,
-} from "../../testUtils/testUtils";
 
 const handleFormSubmit = vi.fn();
 

diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import {
   IoPerson,
   IoPeopleSharp,
@@ -10,10 +11,9 @@ import {
   IoLogoInstagram,
   IoLogoLinkedin,
 } from "react-icons/io5";
-import ContactFormStyled from "./ContactFormStyled";
-import { useState } from "react";
-import { ContactStructure } from "../../types";
+import { ContactStructure } from "@/types";
 import Button from "../Button/Button";
+import ContactFormStyled from "./ContactFormStyled";
 
 interface ContactFormProps {
   buttonText: string;

diff --git a/src/components/ContactList/ContactList.test.tsx b/src/components/ContactList/ContactList.test.tsx
@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react";
+import { contactsMock } from "@/factories/contacts/contactsFactory";
+import { renderWithProviders, wrapWithRouter } from "@/testUtils/testUtils";
 import ContactList from "./ContactList";
-import { contactsMock } from "../../factories/contacts/contactsFactory";
-import { renderWithProviders, wrapWithRouter } from "../../testUtils/testUtils";
 
 describe("Given a ContactList component", () => {
   describe("When it receives a collection of contacts and it's rendered", () => {