Merge pull request #43 from swiftss-org/feat/improve_eslint

Feat/improve eslint

Author: whosyourtaco

.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;
   }
 `;