Move frontend to Vite 5 (#2775)

* merge squashed - A couple of CJS modules into ESM (config mostly) - Vite complains about node.js modules: fixed `useIsMatchingLocation.ts` > or use rollupOptions in vite.config.ts > ref: https://github.com/saleor/saleor-dashboard/blob/f0e4f59d97e2a8c3e22bd2af7b7ce68a361fc9a4/vite.config.js#L6 - Adjust Storybook to work with Vite: use @storybook/test - Use SWC for jest tranformations - Remove unused deps: - ts-jest: replaced with @swc/jest, typecheck by `tsc` - babel plugins - @svgr/plugin-jsx: not used - @testing-library/user-event: handled by @storybook/test - @typescript-eslint/utils: was not plugged in - tsup, esbuild-plugin-svgr: will look into that later - Install Vite required deps, and remove craco/webpack deps - Adjust SVG to work with Vite as components - Fixed `Step.tsx`: I dont know if one should be swaped for the other, but there should be no slash - Initial formating and linting: - removed empty object params - sorting imports, etc.. * prettier: fix pattern * coverage: sb coverage report isnt working * Add missing pieces * `yarn lint --fix` * fix: scripts permissions * tsc: cut errors in half * fix: remove `react-app-env.d.ts` * tsc: all fixed, except `react-data-grid` types issue * eslint: ignore env-config.js * eslint: Align ci with config * msw: bypass testing warnings ref: https://stackoverflow.com/questions/68024935/msw-logging-warnings-for-unhandled-supertest-requests * rebase: and fix things * Adjust to current `graphql-codegen` no ESM support * Remove vite plugin and use built-in methods * rebase: and some fixes * quick fix + `corepack use [email protected]` * Fix build errors --------- Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Dec 10, 2023 · a70a928 · a70a928
1 parent f24541b
commit a70a928
Show file tree

Hide file tree

Showing 132 changed files with 4,524 additions and 9,074 deletions.
diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml
@@ -145,7 +145,7 @@ jobs:
       - name: Front / Install Dependencies
         run: cd front && yarn
       - name: Front / Run linter
-        run: cd front && yarn lint --config .eslintrc-ci.js
+        run: cd front && yarn lint --config .eslintrc-ci.cjs
   front-jest:
     needs: front-yarn-install
     runs-on: ubuntu-latest

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -38,5 +38,11 @@
   "cSpell.words": [
     "twentyhq"
   ],
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "[javascript][typescript][typescriptreact]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit",
+      "source.addMissingImports": "always"
+    }
+  }
 }
diff --git a/front/.eslintrc-ci.js → front/.eslintrc-ci.cjs b/front/.eslintrc-ci.js → front/.eslintrc-ci.cjs
@@ -8,7 +8,7 @@ module.exports = {
     },
   ],
   extends: [
-    './.eslintrc.js'
+    './.eslintrc.cjs'
   ],
   rules: {
     'no-console': 'error',

diff --git a/front/.eslintrc.js → front/.eslintrc.cjs b/front/.eslintrc.js → front/.eslintrc.cjs
@@ -1,37 +1,118 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    jest: true,
+  },
   parserOptions: {
-    project: 'tsconfig.json',
-    tsconfigRootDir: __dirname,
+    ecmaVersion: 'latest',
     sourceType: 'module',
-    ecmaVersion: "2023"
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
   },
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-unused-vars': 'off',
+    'simple-import-sort/imports': 'error',
+    'simple-import-sort/exports': 'error',
+    'twenty/effect-components': 'error',
+    'twenty/no-hardcoded-colors': 'error',
+    'twenty/matching-state-variable': 'error',
+    'twenty/component-props-naming': 'error',
+    'twenty/sort-css-properties-alphabetically': 'error',
+    'twenty/styled-components-prefixed-with-styled': 'error',
+    'twenty/no-state-useref': 'error',
+    'func-style': ['error', 'declaration', { allowArrowFunctions: true }],
+    'no-unused-vars': 'off',
+    'react/jsx-props-no-spreading': [
+      'error',
+      {
+        explicitSpread: 'ignore',
+      },
+    ],
+    'react-hooks/exhaustive-deps': [
+      'warn',
+      {
+        additionalHooks: 'useRecoilCallback',
+      },
+    ],
+    'unused-imports/no-unused-imports': 'warn',
+    'unused-imports/no-unused-vars': [
+      'warn',
+      {
+        vars: 'all',
+        varsIgnorePattern: '^_',
+        args: 'after-used',
+        argsIgnorePattern: '^_',
+      },
+    ],
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['@tabler/icons-react'],
+            message: 'Icon imports are only allowed for `@/ui/icon`',
+          },
+          {
+            group: ['react-hotkeys-web-hook'],
+            importNames: ['useHotkeys'],
+            message: 'Please use the custom wrapper: `useScopedHotkeys`',
+          },
+        ],
+      },
+    ],
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+      { prefer: 'no-type-imports' },
+    ],
+    'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
+    // 'react-refresh/only-export-components': [
+    //   'warn',
+    //   { allowConstantExport: true },
+    // ],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:prettier/recommended',
+    'plugin:storybook/recommended',
+  ],
   plugins: [
     '@typescript-eslint/eslint-plugin',
-    'unused-imports',
     'simple-import-sort',
+    'unused-imports',
     'prefer-arrow',
-    'import',
     'twenty',
+    'react-refresh',
   ],
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'plugin:storybook/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
+  ignorePatterns: [
+    'mockServiceWorker.js',
+    '**/generated*/*',
+    '.eslintrc.cjs',
+    '*.config.cjs',
+    '*.config.ts',
+    '*config.js',
+    'codegen*',
   ],
-  root: true,
-  env: {
-    node: true,
-    jest: true,
-  },
   overrides: [
     {
       files: ['*.stories.tsx', '*.test.ts'],
       rules: {
         'no-console': 'off',
-      }
+      },
     },
     {
       files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
@@ -43,7 +124,7 @@ module.exports = {
         'react/jsx-uses-react': 'off',
         'react/react-in-jsx-scope': 'off',
         'no-control-regex': 0,
-        'import/no-duplicates': ["error", {"considerQueryString": true}],
+        'no-undef': 'off',
         'simple-import-sort/imports': [
           'error',
           {
@@ -53,76 +134,19 @@ module.exports = {
               ['^\\u0000'],
               ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
               ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
-              ['^.+\\.?(css)$']
-            ]
-          }
+              ['^.+\\.?(css)$'],
+            ],
+          },
         ],
         'prefer-arrow/prefer-arrow-functions': [
           'error',
           {
-            "disallowPrototype": true,
-            "singleReturnOnly": false,
-            "classPropertiesAllowed": false
-          }
-        ]
-      }
-    },
-  ],
-  ignorePatterns: ['.eslintrc.js', 'codegen*.js', '**/generated*/*', '*.config.js'],
-  rules: {
-    '@typescript-eslint/interface-name-prefix': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error',
-    'twenty/effect-components': 'error',
-    'twenty/no-hardcoded-colors': 'error',
-    'twenty/matching-state-variable': 'error',
-    'twenty/component-props-naming': 'error',
-    'twenty/sort-css-properties-alphabetically': 'error',
-    'twenty/styled-components-prefixed-with-styled': 'error',
-    'twenty/no-state-useref': 'error',
-    'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
-    "@typescript-eslint/no-unused-vars": "off",
-    "no-unused-vars": "off",
-    "react/jsx-props-no-spreading": [
-      "error", {
-        "explicitSpread": "ignore",
-      }
-    ],
-    "react-hooks/exhaustive-deps": [
-      "warn", {
-        "additionalHooks": "useRecoilCallback"
-      }
-    ],
-    "unused-imports/no-unused-imports": "warn",
-    "unused-imports/no-unused-vars": [
-      "warn",
-      { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
-    ],
-    'no-restricted-imports': [
-      'error',
-      {
-        'patterns': [
-          {
-            'group': ['@tabler/icons-react'],
-            'message': 'Icon imports are only allowed for `@/ui/icon`',
-          },
-          {
-            'group': ['react-hotkeys-web-hook'],
-            "importNames": ["useHotkeys"],
-            'message': 'Please use the custom wrapper: `useScopedHotkeys`',
+            disallowPrototype: true,
+            singleReturnOnly: false,
+            classPropertiesAllowed: false,
           },
         ],
       },
-    ],
-    "@typescript-eslint/consistent-type-imports": ["error", { "prefer": "no-type-imports" }],
-    'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
-  },
-  settings: {
-    "react": {
-      "version": "detect"
-    }
-  }
+    },
+  ],
 };
diff --git a/front/.gitignore b/front/.gitignore
@@ -1,7 +1,15 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
 # dependencies
 /node_modules
+/coverage*
 /.pnp
 .pnp.js
 
@@ -12,16 +20,22 @@ build-storybook.log
 
 # production
 /build
+dist
+dist-ssr
 
-# misc
-.DS_Store
+# env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-.nyc_output
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/front/.prettierignore b/front/.prettierignore
@@ -0,0 +1,3 @@
+**/generated*/
+*.lock
+*.yaml
diff --git a/front/.prettierrc b/front/.prettierrc
@@ -2,4 +2,4 @@
   "singleQuote": true,
   "trailingComma": "all",
   "endOfLine": "auto"
-}
+}