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/.eslintrc.cjs

@@ -1,18 +1,61 @@
+// eslint-disable-next-line
+const path = require('path');
+
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
+    'plugin:@nx/react',
+    'plugin:react/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+    '../../.eslintrc.js',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: ['react-hooks', 'react-refresh'],
+  ignorePatterns: ['!**/*', 'node_modules', 'dist'],
   rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
+    '@nx/workspace-effect-components': 'error',
+    '@nx/workspace-no-hardcoded-colors': 'error',
+    '@nx/workspace-matching-state-variable': 'error',
+    '@nx/workspace-sort-css-properties-alphabetically': 'error',
+    '@nx/workspace-styled-components-prefixed-with-styled': 'error',
+    '@nx/workspace-no-state-useref': 'error',
+    '@nx/workspace-component-props-naming': 'error',
+
+    'react/no-unescaped-entities': 'off',
+    'react/prop-types': 'off',
+    'react/jsx-key': 'off',
+    'react/display-name': 'off',
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-no-useless-fragment': 'off',
+    'react/jsx-props-no-spreading': [
+      'error',
+      {
+        explicitSpread: 'ignore',
+      },
     ],
   },
-}
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx', '*.js', '*.jsx'],
+      parserOptions: {
+        project: ['packages/twenty-chrome-extension/tsconfig.*?.json'],
+      },
+      rules: {},
+    },
+    {
+      files: ['.storybook/main.@(js|cjs|mjs|ts)'],
+      rules: {
+        'storybook/no-uninstalled-addons': [
+          'error',
+          { packageJsonLocation: path.resolve('../../package.json') },
+        ],
+      },
+    },
+    {
+      files: ['.storybook/**/*', '**/*.stories.tsx', '**/*.test.@(ts|tsx)'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+};