Chore frontend linting (#486)

.github/workflows/lint-and-format.yml

@@ -0,0 +1,25 @@
+name: Lint and Prettier
+
+on: [push]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+        with:
+          path: frontend
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - name: Install dependencies
+        run: cd frontend/frontend && yarn
+
+      # - name: Lint with ESLint
+      #   run: yarn lint
+      - name: Run Prettier
+        run: cd frontend/frontend && yarn pretty

.pre-commit-config.yaml

@@ -6,12 +6,12 @@ repos:
       - id: end-of-file-fixer
       - id: trailing-whitespace
   - repo: https://github.com/psf/black
-    rev: stable
+    rev: 22.12.0
     hooks:
       - id: black
   - repo: https://github.com/charliermarsh/ruff-pre-commit
     # Ruff version.
-    rev: "v0.0.223"
+    rev: "v0.0.229"
     hooks:
       - id: ruff
         # Respect `exclude` and `extend-exclude` settings.

frontend/.eslintignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.prettierrc.js
+.eslintrc.js
+env.d.ts

frontend/.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+  extends: [
+    // By extending from a plugin config, we can get recommended rules without having to add them manually.
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended", // This line was added
+    "plugin:import/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
+    // Make sure it's always the last config, so it gets the chance to override other configs.
+    "eslint-config-prettier",
+  ],
+  settings: {
+    react: {
+      // Tells eslint-plugin-react to automatically detect the version of React to use.
+      version: "detect",
+    },
+    // Tells eslint how to resolve imports
+    "import/resolver": {
+      node: {
+        paths: ["src"],
+        extensions: [".js", ".jsx", ".ts", ".tsx"],
+      },
+    },
+  },
+  rules: {
+    // Add your own rules here to override ones from the extended configs.
+  },
+};

frontend/.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.prettierrc.js

frontend/cypress/e2e/spec.cy.ts

@@ -1,31 +1,31 @@
 /// <reference types="cypress" />
 
 const Login = () => {
-    cy.visit('http://localhost:8000/login')
-    cy.contains('Username or Email')
-    cy.get("#username").type("lotus");
-    cy.get("#password").type("hardik");
-    cy.get('form').contains('Login').click()
-    cy.wait(10000)
-}
+  cy.visit("http://localhost:8000/login");
+  cy.contains("Username or Email");
+  cy.get("#username").type("lotus");
+  cy.get("#password").type("hardik");
+  cy.get("form").contains("Login").click();
+  cy.wait(10000);
+};
 
-describe('Testing Successful Login', () => {
-    it('Navigates to Dashboard After Login', () => {
-        Login()
-        cy.contains("Dashboard")
-        cy.url().should('eq', "http://localhost:8000/dashboard") // => true
-    })
-})
+describe("Testing Successful Login", () => {
+  it("Navigates to Dashboard After Login", () => {
+    Login();
+    cy.contains("Dashboard");
+    cy.url().should("eq", "http://localhost:8000/dashboard"); // => true
+  });
+});
 
-describe('Testing Successful Plan Creation', () => {
-    it('Test Plan creation flow', () => {
-        Login();
-        cy.visit('http://localhost:8000/create-plan');
-        cy.wait(10000)
-        cy.contains('Create Plan');
-        cy.get("#planNameInput").type("Random Plan");
-        cy.get("#planDescInput").type("Random Plan Description");
-        cy.get('[type="radio"]').check("monthly");
-        cy.get('form').submit()
-    })
-})
+describe("Testing Successful Plan Creation", () => {
+  it("Test Plan creation flow", () => {
+    Login();
+    cy.visit("http://localhost:8000/create-plan");
+    cy.wait(10000);
+    cy.contains("Create Plan");
+    cy.get("#planNameInput").type("Random Plan");
+    cy.get("#planDescInput").type("Random Plan Description");
+    cy.get('[type="radio"]').check("monthly");
+    cy.get("form").submit();
+  });
+});

frontend/cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

frontend/package.json

@@ -7,22 +7,33 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "dev": "vite",
-    "start": "vite"
+    "start": "vite",
+    "lint": "eslint . --ext .ts,.tsx",
+    "pretty": "prettier --write ."
   },
   "dependencies": {
     "@ant-design/plots": "1.2.1",
     "@ant-design/pro-components": "1.1.16",
     "@tanstack/react-query": "4.3.9",
     "@tremor/react": "^1.0.7",
     "@types/node": "18.7.3",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
     "ace-builds": "^1.14.0",
     "antd": "4.22.4",
     "axios": "0.27.2",
     "babel-plugin-import": "1.13.5",
     "dayjs": "1.11.5",
     "depcheck": "^1.4.3",
+    "eslint": "^8.32.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "mintlify": "^1.1.9",
     "posthog-js": "^1.34.1",
+    "prettier": "^2.8.3",
     "react": "18.2.0",
     "react-ace": "^10.1.0",
     "react-dom": "18.2.0",

frontend/postcss.config.cjs

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

frontend/prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  trailingComma: "all",
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  printWidth: 120,
+  bracketSpacing: true,
+};

frontend/src/components/CustomPagination/CustomPagination.css

@@ -1,21 +1,21 @@
 .movementButton {
-    cursor: pointer;
-    font-size: 12px;
+  cursor: pointer;
+  font-size: 12px;
 }
 
-.movementButton[disabled]{
-    color: #666666;
-    cursor: not-allowed;
+.movementButton[disabled] {
+  color: #666666;
+  cursor: not-allowed;
 }
 
 .currentPageNumber {
-    height: 30px;
-    width: 30px;
-    align-items: center;
-    justify-content: center;
-    display: flex;
-    font-weight: 400;
-    text-align: center;
-    border: 1px solid lightgray;
-    border-radius: 10px;
+  height: 30px;
+  width: 30px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  font-weight: 400;
+  text-align: center;
+  border: 1px solid lightgray;
+  border-radius: 10px;
 }

frontend/src/components/Customers/CustomerDetail.css

@@ -23,7 +23,7 @@
 }
 
 .sourceIcon {
-    height: 30px;
-    border-radius: 10px;
-    cursor: pointer;
+  height: 30px;
+  border-radius: 10px;
+  cursor: pointer;
 }

frontend/src/components/Customers/CustomerInvoices.tsx

@@ -33,9 +33,6 @@ const downloadFile = async (s3link) => {
   }
 };
 
-
-
-
 // @ts-ignore
 const lotusUrl = new URL("./lotusIcon.svg", import.meta.url).href;
 
@@ -64,15 +61,12 @@ const CustomerInvoiceView: FC<Props> = ({ invoices }) => {
   );
 
   useEffect(() => {
-
     if (selectedRecord !== undefined) {
       changeStatus.mutate({
         invoice_id: selectedRecord.invoice_id,
         payment_status:
-          selectedRecord.payment_status === "unpaid"
-            ? "paid"
-            : "unpaid",
-      });       
+          selectedRecord.payment_status === "unpaid" ? "paid" : "unpaid",
+      });
     }
   }, [selectedRecord]);
 
@@ -157,12 +151,10 @@ const CustomerInvoiceView: FC<Props> = ({ invoices }) => {
                               record.payment_status === "unpaid"
                                 ? "paid"
                                 : "unpaid",
-                          });       
+                          });
                         } else {
-                            setSelectedRecord(record);
-
-                          }
-
+                          setSelectedRecord(record);
+                        }
                       }}
                     >
                       <div className="archiveLabel">

frontend/src/components/EventPreview.css

@@ -1,6 +1,6 @@
 .loadMoreSpinner {
-    height: 500px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  height: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

frontend/src/components/Plans/FeatureForm.tsx

@@ -54,7 +54,7 @@ const FeatureForm = (props: {
           feature_name: createdFeatureName,
           feature_description: createdFeatureDescription,
         };
-        
+
         Features.createFeature(newFeature).then((res) => {
           queryClient.invalidateQueries("feature_list");
           setNewFeatures([...newFeatures, res]);

frontend/src/components/Plans/PlanCard/PlanCard.css

@@ -1,4 +1,3 @@
-
 .planCard:hover {
   box-shadow: 0 0 10px rgba(33, 33, 33, 0.2);
 }
@@ -7,8 +6,6 @@
   color: #c3986b;
 }
 
-
-
 .planDetailsValue {
   font-weight: 600;
   color: #1d1d1f;