Feat/improve eslint

.eslintrc.json

@@ -1,7 +1,16 @@
 {
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
-  "plugins": ["react", "@typescript-eslint", "react-hooks"],
-
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "react",
+    "@typescript-eslint",
+    "react-hooks",
+    "import",
+    "better-styled-components"
+  ],
   "env": {
     "node": true,
     "browser": true,
@@ -10,11 +19,54 @@
     "es6": true
   },
   "rules": {
+    "better-styled-components/sort-declarations-alphabetically": 2,
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          [
+            "internal",
+            "parent",
+            "sibling",
+            "index",
+            "object"
+          ]
+        ],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "src/**",
+            "group": "internal"
+          },
+          {
+            "pattern": "theme/**",
+            "group": "internal"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [
+          "react"
+        ],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "newlines-between": "always"
+      }
+    ],
     "@typescript-eslint/naming-convention": [
       "error",
       {
         "selector": "typeLike",
-        "format": ["PascalCase", "UPPER_CASE"]
+        "format": [
+          "PascalCase",
+          "UPPER_CASE"
+        ]
       }
     ],
     "react-hooks/rules-of-hooks": "error",
@@ -23,6 +75,7 @@
     "no-unused-expressions": "off",
     "@typescript-eslint/no-unused-expressions": "error",
     "no-unused-vars": "off",
+    "@typescript-eslint/explicit-module-boundary-types": 0,
     "@typescript-eslint/no-unused-vars": [
       "error",
       {

package.json

@@ -73,6 +73,8 @@
     "babel-plugin-styled-components": "^1.12.0",
     "cross-env": "^7.0.3",
     "eslint-config-prettier": "^7.2.0",
+    "eslint-plugin-better-styled-components": "^1.1.2",
+    "eslint-plugin-import": "^2.23.4",
     "husky": "^6.0.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",

src/App.style.ts

@@ -3,22 +3,22 @@ import styled from '@emotion/styled';
 import theme from 'theme/globals';
 
 export const AppWrapper = styled.div`
-  width: 100%;
-  height: calc(100vh);
   background-color: ${theme.defaultBackgroundColor};
-  font-family: ${theme.fontFamily};
   color: ${theme.defaultTextColor};
-  position: relative;
+  font-family: ${theme.fontFamily};
+  height: calc(100vh);
   overflow: hidden;
+  position: relative;
+  width: 100%;
 `;
 
 export const TopBar = styled.div`
-  width: 100%;
-  position: sticky;
-  display: flex;
-  flex-direction: row;
   align-items: center;
+  border-bottom: 1px black solid;
   color: black;
+  display: flex;
+  flex-direction: row;
   font-weight: 700;
-  border-bottom: 1px black solid;
+  position: sticky;
+  width: 100%;
 `;

src/App.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
+
 import { ThemeProvider } from '@orfium/ictinus';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 
-import theme from 'theme/globals';
 import { AppWrapper } from './App.style';
 import Routes from './routing/Routes';
+import theme from 'theme/globals';
 
 const queryClient = new QueryClient();
 

src/api/userAPI/userAPI.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { METHODS, request } from '../axiosInstances';
 import { LoginResponse } from '../../models/apiTypes';
+import { METHODS, request } from '../axiosInstances';
 
 export default {
   signIn: (params: LoginResponse) => request(METHODS.POST, '/sign-in/', { params }),

src/common.style.tsx

@@ -1,7 +1,8 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { grid } from '@orfium/ictinus/dist/theme/functions';
+
 import { flex } from './theme/functions';
-import { css } from '@emotion/react';
 
 export const PageWrapper = styled.div`
   ${flex};
@@ -44,26 +45,26 @@ export const CheckBoxContainer = styled.div<{ error?: boolean; checked?: boolean
 
 export const FieldsContainer = styled.div<{ withMargin?: boolean }>`
   ${grid};
-  grid-template-columns: 1fr 1fr;
   column-gap: 38px;
-  row-gap: 24px;
+  grid-template-columns: 1fr 1fr;
   margin-bottom: ${(props) => (props.withMargin ? '24px' : null)};
+  row-gap: 24px;
 `;
 
 export const LongFieldWrapper = styled.div`
   grid-column: 1 / 3;
 `;
 
 export const FieldWrapper = styled.div`
-  width: 100%;
   box-sizing: border-box;
+  width: 100%;
 `;
 
 export const RadioText = styled.span`
-  min-height: 48px;
-  display: inline-flex;
   align-items: center;
+  display: inline-flex;
   margin-left: 8px;
+  min-height: 48px;
 `;
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

src/hooks/api/userHooks.ts

@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { AxiosError } from 'axios';
 import { useMutation } from 'react-query';
 import { useHistory } from 'react-router-dom';
-import { AxiosError } from 'axios';
+import { __TOKEN__ } from 'utils/constants';
 
-import { LoginFormType, LoginResponse } from '../../models/apiTypes';
-import userAPI from '../../api/userAPI';
 import { setAxiosToken } from '../../api/axiosInstances';
-import { __TOKEN__ } from 'utils/constants';
+import userAPI from '../../api/userAPI';
+import { LoginFormType, LoginResponse } from '../../models/apiTypes';
+import urls from '../../routing/urls';
 import { setUserStorageItem } from '../../utils/storage';
 
-import urls from '../../routing/urls';
 
 export const useSignIn = () => {
   const history = useHistory();

src/hooks/useResponsiveSidebar.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import useBreakpoints from '@orfium/ictinus/dist/hooks/useBreakpoints';
 
 export const useResponsiveLayout = () => {

src/index.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+
 import ReactDOM from 'react-dom';
 
 import './index.css';
-import App from './App';
 import { setAxiosToken } from './api/axiosInstances';
-import { getUserStorageItem } from './utils/storage';
+import App from './App';
 import { __TOKEN__ } from './utils/constants';
+import { getUserStorageItem } from './utils/storage';
 
 const token = getUserStorageItem(__TOKEN__);
 if (token) {

src/pages/Layout/Layout.style.ts

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
 import { flexCenter } from '@orfium/ictinus/dist/theme/functions';
 
-import { flex } from 'theme/functions';
+
 import { scrollBar } from '../../common.style';
 import { ResponsiveProps } from '../types';
+import { flex } from 'theme/functions';
 
 const SIDEBAR_WIDTH_COLLAPSED = 110;
 
@@ -28,31 +29,31 @@ export const Main = styled.main`
   grid-area: main;
   ${scrollBar};
 
-  overflow-y: auto;
   overflow-x: hidden;
+  overflow-y: auto;
 
   ${flex}
 `;
 
 export const MainContainer = styled.div<ResponsiveProps>`
   display: grid;
-  grid-template-columns: ${getWidth}px 1fr;
-  grid-template-rows: 0fr;
   grid-template-areas:
     'header header'
     'sidebar main'
     'sidebar main';
+  grid-template-columns: ${getWidth}px 1fr;
+  grid-template-rows: 0fr;
   height: 100vh;
   transition: all 0.5s ease-in-out 0s;
 `;
 
 export const Header = styled.header`
-  width: 100%;
   grid-area: header;
+  width: 100%;
   z-index: 120;
   & > div > div:nth-of-type(2) {
-    flex: 1;
     display: flex;
+    flex: 1;
     justify-content: flex-end;
   }
 `;

src/pages/Layout/Layout.tsx

@@ -1,10 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 
-import { Header, Main, MainContainer, SideNav } from './Layout.style';
 import { Drawer, IconButton } from '@orfium/ictinus';
+
 import { TopBar } from '../../App.style';
 import { useResponsiveLayout } from '../../hooks/useResponsiveSidebar';
+import { Header, Main, MainContainer, SideNav } from './Layout.style';
 
 interface Props {
   /** Component to load */

src/pages/Login/Login.style.ts

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
 
 export const TextContainer = styled.div`
-  display: flex;
   align-items: start;
+  display: flex;
   flex-direction: column;
   margin-top: 100px;
 `;

src/pages/Login/Login.tsx

@@ -1,8 +1,8 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
 
-import { Subtitle, TextContainer, Title } from './Login.style';
 import LoginForm from './components/LoginForm';
+import { Subtitle, TextContainer, Title } from './Login.style';
 
 const Login: React.FC = () => {
   return (

src/pages/Login/components/LoginForm/LoginForm.style.ts

@@ -19,9 +19,9 @@ export const ButtonContainer = styled.div`
     width: 100%;
 
     span {
-      justify-content: center;
-      font-weight: 700;
       font-size: 16px;
+      font-weight: 700;
+      justify-content: center;
     }
   }
 `;

src/pages/Login/components/LoginForm/LoginForm.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource @emotion/react */
 import React from 'react';
-import { Field, Form } from 'react-final-form';
-import { Button, CheckBox, TextField } from '@orfium/ictinus';
 
+import { Button, CheckBox, TextField } from '@orfium/ictinus';
 import { CheckBoxContainer, FieldsContainer, FieldWrapper, LongFieldWrapper } from 'common.style';
-import { ButtonContainer, FormBottom, FormContainer } from './LoginForm.style';
+import { Field, Form } from 'react-final-form';
+
 import { useSignIn } from '../../../../hooks/api/userHooks';
 import { LoginFormType } from '../../../../models/apiTypes';
+import { ButtonContainer, FormBottom, FormContainer } from './LoginForm.style';
 
 const SignIn: React.FC = () => {
   const { mutate } = useSignIn();

src/pages/PatientDirectory/PatientDirectory.style.ts

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+
 import { scrollBar } from '../../common.style';
 
 export const PatientDirectoryContainer = styled.div`
@@ -8,24 +9,24 @@ export const PatientDirectoryContainer = styled.div`
 `;
 
 export const SearchWrapper = styled.div`
-  padding: 18px;
   display: flex;
   flex-direction: column;
   gap: 8px;
+  padding: 18px;
 
   & > div > div {
     background: ${(props) => props.theme.utils.getColor('lightGray', 100)};
   }
 `;
 
 export const Line = styled.div`
-  height: 0px;
   border-top: 1px solid #f2f2f2;
+  height: 0px;
 `;
 
 export const PatientsList = styled.div`
   ${scrollBar};
-  overflow-y: auto;
   margin-bottom: 56px;
+  overflow-y: auto;
   padding: 0px 18px 18px 18px;
 `;

src/pages/PatientDirectory/PatientDirectory.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
+
 import { TextField, Select } from '@orfium/ictinus';
 
+import PatientCard from './components/PatientCard';
+import { Patients } from './constants';
 import {
   PatientDirectoryContainer,
   SearchWrapper,
   Line,
   PatientsList,
 } from './PatientDirectory.style';
-import PatientCard from './components/PatientCard';
-import { Patients } from './constants';
 
 const PatientDirectory: React.FC = () => {
   return (