Add linter to Chrome Extension (#4044). (#4174)

* feat: configure eslint rules by replicating those in the twenty-front package and introduce scripts for linting, formatting code and removing build output

* fix: ensure each file of the extension package satisfies linting rules and disable some rules where necessary

* fix: update relative imports to absolute imports throughout extension code with the defined tilde and at symbols

* fix: import the updated ui module from the front package to the chrome extension package to prevent eslint rules from breaking subject to the recent merged changes into main

* fix: commit the case change for files that were missed by Git in the earlier commits due to default configuration

packages/twenty-chrome-extension/src/contentScript/createButton.ts

@@ -1,7 +1,8 @@
-function createNewButton(
+/* eslint-disable @nx/workspace-no-hardcoded-colors */
+const createNewButton = (
   text: string,
   onClickHandler: () => void,
-): HTMLButtonElement {
+): HTMLButtonElement => {
   const newButton: HTMLButtonElement = document.createElement('button');
   newButton.textContent = text;
 
@@ -52,6 +53,6 @@ function createNewButton(
   });
 
   return newButton;
-}
+};
 
 export default createNewButton;

packages/twenty-chrome-extension/src/contentScript/extractCompanyProfile.ts

@@ -1,10 +1,10 @@
-import handleQueryParams from '../utils/handleQueryParams';
-import requestDb from '../utils/requestDb';
-import createNewButton from './createButton';
-import extractCompanyLinkedinLink from './utils/extractCompanyLinkedinLink';
-import extractDomain from './utils/extractDomain';
+import createNewButton from '~/contentScript/createButton';
+import extractCompanyLinkedinLink from '~/contentScript/utils/extractCompanyLinkedinLink';
+import extractDomain from '~/contentScript/utils/extractDomain';
+import handleQueryParams from '~/utils/handleQueryParams';
+import requestDb from '~/utils/requestDb';
 
-function insertButtonForCompany(): void {
+const insertButtonForCompany = (): void => {
   // Select the element in which to create the button.
   const parentDiv: HTMLDivElement | null = document.querySelector(
     '.org-top-card-primary-actions__inner',
@@ -101,6 +101,6 @@ function insertButtonForCompany(): void {
 
     Object.assign(newButtonCompany.style, buttonSpecificStyles);
   }
-}
+};
 
 export default insertButtonForCompany;

packages/twenty-chrome-extension/src/contentScript/extractPersonProfile.ts

@@ -1,9 +1,9 @@
-import handleQueryParams from '../utils/handleQueryParams';
-import requestDb from '../utils/requestDb';
-import createNewButton from './createButton';
-import extractFirstAndLastName from './utils/extractFirstAndLastName';
+import createNewButton from '~/contentScript/createButton';
+import extractFirstAndLastName from '~/contentScript/utils/extractFirstAndLastName';
+import handleQueryParams from '~/utils/handleQueryParams';
+import requestDb from '~/utils/requestDb';
 
-function insertButtonForPerson(): void {
+const insertButtonForPerson = (): void => {
   // Select the element in which to create the button.
   const parentDiv: HTMLDivElement | null = document.querySelector(
     '.pv-top-card-v2-ctas',
@@ -114,6 +114,6 @@ function insertButtonForPerson(): void {
 
     Object.assign(newButtonPerson.style, buttonSpecificStyles);
   }
-}
+};
 
 export default insertButtonForPerson;

packages/twenty-chrome-extension/src/contentScript/index.ts

@@ -1,5 +1,5 @@
-import insertButtonForPerson from './extractPersonProfile';
-import insertButtonForCompany from './extractCompanyProfile';
+import insertButtonForCompany from '~/contentScript/extractCompanyProfile';
+import insertButtonForPerson from '~/contentScript/extractPersonProfile';
 
 // Inject buttons into the DOM when SPA is reloaded on the resource url.
 // e.g. reload the page when on https://www.linkedin.com/in/mabdullahabaid/

packages/twenty-chrome-extension/src/contentScript/utils/extractDomain.ts

@@ -1,4 +1,4 @@
-function extractDomain(url: string | null) {
+const extractDomain = (url: string | null) => {
   if (!url) return '';
 
   const hostname = new URL(url).hostname;
@@ -10,6 +10,6 @@ function extractDomain(url: string | null) {
   }
 
   return domain;
-}
+};
 
 export default extractDomain;