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: f0e4f59d97/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 yarn@1.22.19`

* Fix build errors

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

.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

.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"
+    }
+  }
 }

front/.eslintrc-ci.cjs

@@ -8,7 +8,7 @@ module.exports = {
     },
   ],
   extends: [
-    './.eslintrc.js'
+    './.eslintrc.cjs'
   ],
   rules: {
     'no-console': 'error',

front/.eslintrc.cjs

@@ -1,37 +1,118 @@
 module.exports = {
   parser: '@typescript-eslint/parser',
-  parserOptions: {
-    project: 'tsconfig.json',
-    tsconfigRootDir: __dirname,
-    sourceType: 'module',
-    ecmaVersion: "2023"
-  },
-  plugins: [
-    '@typescript-eslint/eslint-plugin',
-    'unused-imports',
-    'simple-import-sort',
-    'prefer-arrow',
-    'import',
-    'twenty',
-  ],
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'plugin:storybook/recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-  ],
   root: true,
   env: {
+    browser: true,
     node: true,
     jest: true,
   },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    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',
+    'simple-import-sort',
+    'unused-imports',
+    'prefer-arrow',
+    'twenty',
+    'react-refresh',
+  ],
+  ignorePatterns: [
+    'mockServiceWorker.js',
+    '**/generated*/*',
+    '.eslintrc.cjs',
+    '*.config.cjs',
+    '*.config.ts',
+    '*config.js',
+    'codegen*',
+  ],
   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,
+            disallowPrototype: true,
-            "singleReturnOnly": false,
+            singleReturnOnly: false,
-            "classPropertiesAllowed": 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`',
           },
         ],
       },
-    ],
-    "@typescript-eslint/consistent-type-imports": ["error", { "prefer": "no-type-imports" }],
-    'no-console': ['warn', { allow: ['group', 'groupCollapsed', 'groupEnd'] }],
     },
-  settings: {
+  ],
-    "react": {
-      "version": "detect"
-    }
-  }
 };

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
+# env
-.DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 
-npm-debug.log*
+# Editor directories and files
-yarn-debug.log*
+.vscode/*
-yarn-error.log*
+!.vscode/extensions.json
-
+.idea
-.nyc_output
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

front/.prettierignore

@@ -0,0 +1,3 @@
+**/generated*/
+*.lock
+*.yaml

front/.storybook/main.js

@@ -1,94 +0,0 @@
-const path = require('path');
-
-computeStoriesGlob = () => {
-  if (process.env.STORYBOOK_SCOPE === 'pages') {
-    return [
-      '../src/pages/**/*.stories.@(js|jsx|ts|tsx)',
-      '../src/__stories__/*.stories.@(js|jsx|ts|tsx)',
-      '../src/pages/**/*.docs.mdx',
-      '../src/__stories__/*.docs.mdx'
-    ]
-  }
-
-  if (process.env.STORYBOOK_SCOPE === 'modules') {
-    return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)', '../src/modules/**/*.docs.mdx']
-  }
-
-  if (process.env.STORYBOOK_SCOPE === 'ui-docs') {
-      return ['../src/modules/ui/**/*.docs.mdx'];
-  }
-
-  return ['../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.docs.mdx']
-};
-
-module.exports = {
-  webpackFinal: (config) => {
-    config.module.rules.push({
-      test: /\.tsx?$/,
-      exclude: /node_modules/,
-      use: [
-        {
-          loader: require.resolve('babel-loader'),
-          options: {
-            presets: [
-              require('@babel/preset-typescript').default,
-              [
-                require('@babel/preset-react').default,
-                {
-                  runtime: 'automatic',
-                },
-              ],
-              require('@babel/preset-env').default,
-            ],
-          },
-        },
-      ],
-    });
-    config.resolve.extensions.push('.ts', '.tsx');
-    config.module.rules.push({
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: 'javascript/auto',
-    });
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: [
-        {
-          loader: '@svgr/webpack',
-        },
-        {
-          loader: 'file-loader',
-          options: {
-            name: 'static/media/[path][name].[ext]',
-          },
-        },
-      ],
-      type: 'javascript/auto',
-      issuer: {
-        and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-      },
-    });
-    config.resolve.extensions.push('.mjs');
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      '~': path.resolve(__dirname, '../src'),
-      '@': path.resolve(__dirname, '../src/modules'),
-    };
-    return config;
-  },
-  stories: computeStoriesGlob(),
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-coverage',
-    '@storybook/addon-styling',
-    'storybook-addon-pseudo-states',
-    'storybook-addon-cookie',
-  ],
-  docs: { autodocs: false },
-  framework: {
-    name: '@storybook/react-webpack5',
-    options: {},
-  },
-};

front/.storybook/main.ts

@@ -0,0 +1,45 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const computeStoriesGlob = () => {
+  if (process.env.STORYBOOK_SCOPE === 'pages') {
+    return [
+      '../src/pages/**/*.stories.@(js|jsx|ts|tsx)',
+      '../src/__stories__/*.stories.@(js|jsx|ts|tsx)',
+      '../src/pages/**/*.docs.mdx',
+      '../src/__stories__/*.docs.mdx'
+    ]
+  }
+
+  if (process.env.STORYBOOK_SCOPE === 'modules') {
+    return ['../src/modules/**/*.stories.@(js|jsx|ts|tsx)', '../src/modules/**/*.docs.mdx']
+  }
+
+  if (process.env.STORYBOOK_SCOPE === 'ui-docs') {
+      return ['../src/modules/ui/**/*.docs.mdx'];
+  }
+
+  return ['../src/**/*.docs.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)']
+};
+
+const config: StorybookConfig = {
+  stories: computeStoriesGlob(),
+  staticDirs: ['../public'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    '@storybook/addon-coverage',
+    '@storybook/addon-themes',
+    'storybook-addon-cookie',
+    'storybook-addon-pseudo-states',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: false,
+  },
+};
+export default config;

front/.storybook/preview-head.html

@@ -2,7 +2,12 @@
 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
 rel="stylesheet"
 />
+
 <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.7/iframeResizer.contentWindow.min.js"></script>
+<!-- <script>
+  window.global = window;
+</script> -->
+
 <style type="text/css">
 body {
   margin: 0;

front/.storybook/preview.ts

@@ -1,18 +1,19 @@
-import { initialize, mswLoader } from 'msw-storybook-addon';
-import { Preview } from '@storybook/react';
 import { ThemeProvider } from '@emotion/react';
-import { withThemeFromJSXProvider } from '@storybook/addon-styling';
+import { Preview, ReactRenderer } from '@storybook/react';
-import { lightTheme, darkTheme } from '../src/modules/ui/theme/constants/theme';
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
-import { RootDecorator } from '../src/testing/decorators/RootDecorator';
+import { initialize, mswLoader } from 'msw-storybook-addon';
-import 'react-loading-skeleton/dist/skeleton.css';
-import { mockedUserJWT } from '../src/testing/mock-data/jwt';
-import { rest } from 'msw'
 
-initialize();
+import { RootDecorator } from '../src/testing/decorators/RootDecorator';
+import { mockedUserJWT } from '../src/testing/mock-data/jwt';
+
+import { lightTheme, darkTheme } from '../src/modules/ui/theme/constants/theme';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+initialize({ onUnhandledRequest: 'bypass' });
 
 const preview: Preview = {
   decorators: [
-    withThemeFromJSXProvider({
+    withThemeFromJSXProvider<ReactRenderer>({
       themes: {
         light: lightTheme,
         dark: darkTheme,
@@ -30,16 +31,16 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
-    cookie: {
-      tokenPair: `{%22accessToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-07-18T15:06:40.704Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22refreshToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-10-15T15:06:41.558Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22__typename%22:%22AuthTokenPair%22}`,
-    },
     options: {
       storySort: {
         order: ['UI', 'Modules', 'Pages'],
       },
     },
+    cookie: {
+      tokenPair: `{%22accessToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-07-18T15:06:40.704Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22refreshToken%22:{%22token%22:%22${mockedUserJWT}%22%2C%22expiresAt%22:%222023-10-15T15:06:41.558Z%22%2C%22__typename%22:%22AuthToken%22}%2C%22__typename%22:%22AuthTokenPair%22}`,
     },
     loaders: [mswLoader],
+  },
 };
 
 export default preview;

front/.storybook/test-runner-jest.config.js

@@ -1,9 +1,9 @@
-const { getJestConfig } = require('@storybook/test-runner');
+import { getJestConfig } from "@storybook/test-runner";
 
 /**
  * @type {import('@jest/types').Config.InitialOptions}
  */
-module.exports = {
+export default {
   // The default configuration comes from @storybook/test-runner
   ...getJestConfig(),
   /** Add your own overrides below

front/.swcrc

@@ -0,0 +1,31 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "transform": {
+      "react": {
+        "pragma": "React.createElement",
+        "pragmaFrag": "React.Fragment",
+        "throwIfNamespace": true,
+        "development": false,
+        "useBuiltins": false,
+        "runtime": "automatic"
+      },
+      "hidden": {
+        "jest": true
+      }
+    }
+  },
+  "module": {
+    "type": "commonjs",
+    "strict": false,
+    "strictMode": true,
+    "lazy": false,
+    "noInterop": false
+  }
+}

front/README.md

@@ -0,0 +1 @@
+Run `yarn dev` while server running on port `3000`

front/craco.config.js

@@ -1,48 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  devServer: {
-    client: {
-      overlay: {
-        runtimeErrors: (error) => {
-          switch (error.message) {
-            case "ResizeObserver loop limit exceeded":
-            case "Unauthenticated":
-              return false;
-            default:
-              return true;
-          }
-        },
-      },
-    }
-  },
-  webpack: {
-    alias: {
-      '~': path.resolve(__dirname, 'src'),
-      '@': path.resolve(__dirname, 'src/modules'),
-      '@testing': path.resolve(__dirname, 'src/testing'),
-    },
-    // TODO: remove this workaround by resolving source map errors with @sniptt/guards
-    configure: {
-        module: {
-            rules: [
-                {
-                    test: /\.js$/,
-                    enforce: "pre",
-                    use: ["source-map-loader"],
-                },
-            ],
-        },
-        ignoreWarnings: [/Failed to parse source map/],
-    },
-  },
-  jest: {
-    configure: {
-      moduleNameMapper: {
-        '~/(.+)': "<rootDir>/src/$1",
-        '@/(.+)': "<rootDir>/src/modules/$1",
-        '@testing/(.+)': "<rootDir>/src/testing/$1",
-      }
-    },
-  },
-};

front/index.html

@@ -1,23 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="utf-8" />
+    <meta charset="UTF-8" />
-    <link
+
-      rel="icon"
+    <link rel="icon" href="/icons/android/android-launchericon-48-48.png" />
-      href="%PUBLIC_URL%/icons/android/android-launchericon-48-48.png"
+    <link rel="apple-touch-icon" href="/icons/ios/192.png" />
-    />
+
-    <link
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      rel="apple-touch-icon"
-      href="%PUBLIC_URL%/icons/ios/icon-192x192.png"
-    />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="A modern open-source CRM" />
     <meta
       property="og:image"
       content="https://raw.githubusercontent.com/twentyhq/twenty/main/docs/static/img/social-card.png"
     />
-
     <meta property="og:description" content="A modern open-source CRM" />
     <meta property="og:title" content="Twenty" />
     <meta name="twitter:card" content="summary_large_image" />
@@ -28,18 +23,17 @@
 
     <meta name="twitter:description" content="A modern open-source CRM" />
     <meta name="twitter:title" content="Twenty" />
-
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
     />
 
     <title>Twenty</title>
-    <script src="%PUBLIC_URL%/env-config.js"></script>
+    <script src="/env-config.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

front/jest.config.js

@@ -1,5 +1,17 @@
-const { createJestConfig } = require("@craco/craco");
+export default {
-const cracoConfig = require("./craco.config.js");
+  setupFilesAfterEnv: ["./src/setupTests.ts"],
-const jestConfig = createJestConfig(cracoConfig);
+  testEnvironment: "jsdom",
-
+  transform: {
-module.exports = jestConfig;
+    "^.+\\.(ts|js|tsx|jsx)$": "@swc/jest",
+  },
+  moduleNameMapper: {
+    '~/(.+)': "<rootDir>/src/$1",
+    '@/(.+)': "<rootDir>/src/modules/$1",
+    '@testing/(.+)': "<rootDir>/src/testing/$1",
+  },
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  // collectCoverage: true,
+  // collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
+  // coveragePathIgnorePatterns: ['(tests/.*.mock).(jsx?|tsx?)$', '(.*).d.ts$'],
+  // coverageDirectory: '<rootDir>/coverage/',
+}

front/nyc.config.cjs

@@ -26,10 +26,10 @@ const pagesCoverage = {
   ]
 };
 
-
-
 const storybookStoriesFolders = process.env.STORYBOOK_SCOPE;
 
-module.exports = storybookStoriesFolders === 'pages' ?
+module.exports = storybookStoriesFolders === 'pages' 
-  pagesCoverage : storybookStoriesFolders === 'modules' ? modulesCoverage
+  ? pagesCoverage 
+  : storybookStoriesFolders === 'modules' 
+    ? modulesCoverage
     : globalCoverage;

front/package.json

@@ -2,6 +2,37 @@
   "name": "twenty",
   "version": "0.2.1",
   "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:clean": "yarn dev --force",
+    "build": "tsc && vite build && yarn build:inject-runtime-env",
+    "build:inject-runtime-env": "./scripts/inject-runtime-env.sh",
+    "preview": "vite preview",
+    "eslint-plugin:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
+    "test": "jest",
+    "coverage": "jest --coverage",
+    "storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev",
+    "storybook:dev": "storybook dev -p 6006 --no-open",
+    "storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev",
+    "storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev",
+    "storybook:build": "storybook build",
+    "storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
+    "storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
+    "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build",
+    "storybook:test": "test-storybook",
+    "storybook:test-slow": "test-storybook --maxWorkers=3",
+    "storybook:coverage": "yarn storybook:test-slow --coverage && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
+    "storybook:modules:coverage": "STORYBOOK_SCOPE=modules yarn storybook:coverage",
+    "storybook:pages:coverage": "STORYBOOK_SCOPE=pages yarn storybook:coverage",
+    "graphql:data:generate": "dotenv cross-var graphql-codegen -- --config codegen.cjs",
+    "graphql:metadata:generate": "dotenv cross-var graphql-codegen -- --config codegen-metadata.cjs",
+    "chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+    "install": "yarn eslint-plugin:setup"
+  },
   "dependencies": {
     "@air/react-drag-to-select": "^5.0.8",
     "@apollo/client": "^3.7.17",
@@ -15,11 +46,9 @@
     "@hello-pangea/dnd": "^16.2.0",
     "@hookform/resolvers": "^3.1.1",
     "@sniptt/guards": "^0.2.0",
+    "@swc/core": "^1.3.100",
+    "@swc/jest": "^0.2.29",
     "@tabler/icons-react": "^2.30.0",
-    "@types/node": "^16.18.4",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "@types/react-helmet-async": "^1.0.3",
     "afterframe": "^1.0.2",
     "apollo-upload-client": "^17.0.0",
     "date-fns": "^2.30.0",
@@ -57,43 +86,79 @@
     "ts-key-enum": "^2.0.12",
     "type-fest": "^4.1.0",
     "uuid": "^9.0.0",
+    "vite-tsconfig-paths": "^4.2.1",
     "xlsx-ugnis": "^0.19.3",
     "zod": "^3.22.2"
   },
-  "scripts": {
+  "devDependencies": {
-    "start": "PORT=3001 craco start --max-warnings=0",
+    "@graphql-codegen/cli": "^3.3.1",
-    "build:inject-runtime-env": "./scripts/inject-runtime-env.sh",
+    "@graphql-codegen/client-preset": "^4.1.0",
-    "build": "craco build && yarn build:inject-runtime-env",
+    "@graphql-codegen/typescript": "^3.0.4",
-    "test": "craco test",
+    "@graphql-codegen/typescript-operations": "^3.0.4",
-    "coverage": "craco test --coverage .",
+    "@graphql-codegen/typescript-react-apollo": "^3.3.7",
-    "lint": "eslint src --max-warnings=0",
+    "@storybook/addon-actions": "^7.6.3",
-    "eslint-plugin:setup": "cd ../packages/eslint-plugin-twenty/ && yarn && yarn build && cd ../../front/ && yarn upgrade eslint-plugin-twenty",
+    "@storybook/addon-coverage": "^1.0.0",
-    "storybook:dev": "storybook dev -p 6006 -s ../public",
+    "@storybook/addon-essentials": "^7.6.3",
-    "storybook:test": "test-storybook",
+    "@storybook/addon-interactions": "^7.6.3",
-    "storybook:test-slow": "test-storybook --maxWorkers=3",
+    "@storybook/addon-links": "^7.6.3",
-    "storybook:build": "storybook build -s public",
+    "@storybook/addon-onboarding": "^1.0.9",
-    "storybook:coverage": "test-storybook --coverage --maxWorkers=3 && npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook --check-coverage",
+    "@storybook/addon-themes": "^7.6.3",
-    "storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev",
+    "@storybook/blocks": "^7.6.3",
-    "storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev",
+    "@storybook/react": "^7.6.3",
-    "storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev",
+    "@storybook/react-vite": "^7.6.3",
-    "storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build",
+    "@storybook/test": "^7.6.3",
-    "storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build",
+    "@storybook/test-runner": "^0.16.0",
-    "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build",
+    "@testing-library/jest-dom": "^6.1.5",
-    "storybook:modules:coverage": "STORYBOOK_SCOPE=modules yarn storybook:coverage",
+    "@testing-library/react": "^13.4.0",
-    "storybook:pages:coverage": "STORYBOOK_SCOPE=pages yarn storybook:coverage",
+    "@types/apollo-upload-client": "^17.0.2",
-    "graphql:data:generate": "dotenv cross-var graphql-codegen -- --config codegen.js",
+    "@types/deep-equal": "^1.0.1",
-    "graphql:metadata:generate": "dotenv cross-var graphql-codegen -- --config codegen-metadata.js",
+    "@types/jest": "^29.5.10",
-    "chromatic": "dotenv cross-var npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+    "@types/js-cookie": "^3.0.3",
-    "install": "yarn eslint-plugin:setup"
+    "@types/lodash.camelcase": "^4.3.7",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/lodash.kebabcase": "^4.1.7",
+    "@types/lodash.snakecase": "^4.1.9",
+    "@types/luxon": "^3.3.0",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.39",
+    "@types/react-datepicker": "^4.11.2",
+    "@types/react-dom": "^18.2.15",
+    "@types/scroll-into-view": "^1.16.0",
+    "@types/uuid": "^9.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "chromatic": "^6.18.0",
+    "concurrently": "^8.0.1",
+    "cross-var": "^1.1.0",
+    "dotenv-cli": "^7.2.1",
+    "eslint": "^8.53.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prefer-arrow": "^1.2.3",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "http-server": "^14.1.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "msw": "1.3.2",
+    "msw-storybook-addon": "^1.10.0",
+    "prettier": "^3.1.0",
+    "storybook": "^7.6.3",
+    "storybook-addon-cookie": "^3.1.0",
+    "storybook-addon-pseudo-states": "^2.1.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-svgr": "^4.2.0"
   },
-  "overrides": {
+  "engines": {
-    "react-refresh": "0.14.0"
+    "node": "^18.16.0",
-  },
+    "npm": "please-use-yarn"
-  "jest": {
-    "testMatch": [
-      "<rootDir>/**/*.test.ts",
-      "<rootDir>/**/*.test.tsx"
-    ]
   },
   "browserslist": {
     "production": [
@@ -107,76 +172,8 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@craco/craco": "^7.1.0",
-    "@graphql-codegen/cli": "^3.3.1",
-    "@graphql-codegen/client-preset": "^4.1.0",
-    "@graphql-codegen/typescript": "^3.0.4",
-    "@graphql-codegen/typescript-operations": "^3.0.4",
-    "@graphql-codegen/typescript-react-apollo": "^3.3.7",
-    "@storybook/addon-actions": "^7.0.22",
-    "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-essentials": "^7.0.22",
-    "@storybook/addon-interactions": "^7.0.22",
-    "@storybook/addon-links": "^7.0.22",
-    "@storybook/addon-styling": "^1.3.0",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/node-logger": "^7.0.22",
-    "@storybook/react": "^7.0.22",
-    "@storybook/react-webpack5": "^7.0.22",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.1.0",
-    "@svgr/plugin-jsx": "^8.1.0",
-    "@svgr/webpack": "^8.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/apollo-upload-client": "^17.0.2",
-    "@types/deep-equal": "^1.0.1",
-    "@types/jest": "^27.5.2",
-    "@types/js-cookie": "^3.0.3",
-    "@types/lodash.camelcase": "^4.3.7",
-    "@types/lodash.debounce": "^4.0.7",
-    "@types/lodash.kebabcase": "^4.1.7",
-    "@types/lodash.snakecase": "^4.1.9",
-    "@types/luxon": "^3.3.0",
-    "@types/react-datepicker": "^4.11.2",
-    "@types/scroll-into-view": "^1.16.0",
-    "@types/uuid": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
-    "@typescript-eslint/utils": "^6.7.0",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "chromatic": "^6.18.0",
-    "concurrently": "^8.0.1",
-    "cross-var": "^1.1.0",
-    "dotenv-cli": "^7.2.1",
-    "esbuild-plugin-svgr": "^2.1.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-config-standard-with-typescript": "^23.0.0",
-    "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-storybook": "^0.6.12",
-    "eslint-plugin-twenty": "file:../packages/eslint-plugin-twenty",
-    "eslint-plugin-unused-imports": "^3.0.0",
-    "http-server": "^14.1.1",
-    "msw": "1.3.2",
-    "msw-storybook-addon": "^1.10.0",
-    "prettier": "^2.8.0",
-    "react-scripts": "5.0.1",
-    "storybook": "^7.0.22",
-    "storybook-addon-cookie": "^3.0.1",
-    "storybook-addon-pseudo-states": "^2.1.0",
-    "ts-jest": "^29.1.0",
-    "tsup": "^7.2.0",
-    "typescript": "^5.2.2",
-    "webpack": "^5.75.0"
-  },
   "msw": {
     "workerDirectory": "public"
-  }
+  },
+  "packageManager": "yarn@1.22.19+sha256.732620bac8b1690d507274f025f3c6cfdc3627a84d9642e38a07452cc00e0f2e"
 }

front/public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow: /

front/src/hooks/useIsMatchingLocation.ts

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
 import { matchPath, useLocation } from 'react-router-dom';
-import { parse } from 'url';
 
 import { AppBasePath } from '@/types/AppBasePath';
 
@@ -10,7 +9,7 @@ export const useIsMatchingLocation = () => {
   return useCallback(
     (path: string, basePath?: AppBasePath) => {
       const constructedPath = basePath
-        ? parse(`${basePath}/${path}`).pathname ?? ''
+        ? new URL(basePath + path, document.location.origin).pathname ?? ''
         : path;
 
       return !!matchPath(constructedPath, location.pathname);

front/src/index.tsx

@@ -26,9 +26,7 @@ import '@emotion/react';
 import './index.css';
 import 'react-loading-skeleton/dist/skeleton.css';
 
-const root = ReactDOM.createRoot(
+const root = ReactDOM.createRoot(document.getElementById('root')!);
-  document.getElementById('root') as HTMLElement,
-);
 
 root.render(
   <RecoilRoot>
@@ -68,6 +66,5 @@ root.render(
 );
 
 declare module '@emotion/react' {
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
   export interface Theme extends ThemeType {}
 }

front/src/modules/apollo/services/apollo.factory.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-loop-func */
 import {
   ApolloClient,
   ApolloClientOptions,

front/src/modules/apollo/utils/index.ts

@@ -14,7 +14,7 @@ const parseQuery = (queryString: string) => {
   const queryObj = gql`
     ${queryString}
   `;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   const { name } = queryObj.definitions[0] as any;
   return [name ? name.value : 'Generic', queryString.trim()];
 };
@@ -25,10 +25,10 @@ export const loggerLink = (getSchemaName: (operation: Operation) => string) =>
     operation.setContext({ start: Date.now() });
 
     const { variables } = operation;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
     const operationType = (operation.query.definitions[0] as any).operation;
     const headers = operation.getContext().headers;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
     const [queryName, query] = parseQuery(operation.query.loc!.source.body);
 
     if (operationType === 'subscription') {
@@ -65,7 +65,6 @@ export const loggerLink = (getSchemaName: (operation: Operation) => string) =>
         getGroup(!hasError)(...titleArgs);
 
         if (errors) {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           errors.forEach((err: any) => {
             logDebug(
               `%c${err.message}`,

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -176,7 +176,8 @@ export const CommandMenu = () => {
     .concat(activities.map((activity) => activity.id));
 
   return (
-    isCommandMenuOpened && (
+    <>
+      {isCommandMenuOpened && (
         <StyledDialog>
           <StyledInput
             value={search}
@@ -247,7 +248,9 @@ export const CommandMenu = () => {
                               avatarUrl={null}
                               colorId={person.id}
                               placeholder={
-                              person.name.firstName + ' ' + person.name.lastName
+                                person.name.firstName +
+                                ' ' +
+                                person.name.lastName
                               }
                             />
                           )}
@@ -294,6 +297,7 @@ export const CommandMenu = () => {
             </ScrollWrapper>
           </StyledList>
         </StyledDialog>
-    )
+      )}
+    </>
   );
 };

front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, userEvent, within } from '@storybook/test';
 
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandType } from '@/command-menu/types/Command';

front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx

@@ -42,7 +42,8 @@ export const KeyboardShortcutMenu = () => {
   );
 
   return (
-    isKeyboardShortcutMenuOpened && (
+    <>
+      {isKeyboardShortcutMenuOpened && (
         <KeyboardMenuDialog onClose={toggleKeyboardShortcutMenu}>
           <KeyboardMenuGroup heading="Table">
             {keyboardShortcutsTable.map((TableShortcut) => (
@@ -55,6 +56,7 @@ export const KeyboardShortcutMenu = () => {
             ))}
           </KeyboardMenuGroup>
         </KeyboardMenuDialog>
-    )
+      )}
+    </>
   );
 };

front/src/modules/object-metadata/components/ApolloMetadataClientProvider.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { useMemo } from 'react';
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 import { useRecoilState } from 'recoil';

front/src/modules/object-record/field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { FieldContextProvider } from '../../../__stories__/FieldContextProvider';
 import { useBooleanField } from '../../../hooks/useBooleanField';
@@ -61,7 +60,7 @@ export default meta;
 
 type Story = StoryObj<typeof BooleanFieldInputWithContext>;
 
-const submitJestFn = jest.fn();
+const submitJestFn = fn();
 
 export const Default: Story = {};
 

front/src/modules/object-record/field/meta-types/input/components/__stories__/DateFieldInput.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
@@ -65,9 +64,9 @@ const DateFieldInputWithContext = ({
   );
 };
 
-const escapeJestFn = jest.fn();
+const escapeJestFn = fn();
-const enterJestFn = jest.fn();
+const enterJestFn = fn();
-const clickOutsideJestFn = jest.fn();
+const clickOutsideJestFn = fn();
 
 const meta: Meta = {
   title: 'UI/Data/Field/Input/DateFieldInput',

front/src/modules/object-record/field/meta-types/input/components/__stories__/EmailFieldInput.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { expect, jest } from '@storybook/jest';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
@@ -68,11 +67,11 @@ const EmailFieldInputWithContext = ({
   );
 };
 
-const enterJestFn = jest.fn();
+const enterJestFn = fn();
-const escapeJestfn = jest.fn();
+const escapeJestfn = fn();
-const clickOutsideJestFn = jest.fn();
+const clickOutsideJestFn = fn();
-const tabJestFn = jest.fn();
+const tabJestFn = fn();
-const shiftTabJestFn = jest.fn();
+const shiftTabJestFn = fn();
 
 const clearMocksDecorator: Decorator = (Story, context) => {
   if (context.parameters.clearMocks) {

front/src/modules/object-record/field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { expect, jest } from '@storybook/jest';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
@@ -68,11 +67,11 @@ const NumberFieldInputWithContext = ({
   );
 };
 
-const enterJestFn = jest.fn();
+const enterJestFn = fn();
-const escapeJestfn = jest.fn();
+const escapeJestfn = fn();
-const clickOutsideJestFn = jest.fn();
+const clickOutsideJestFn = fn();
-const tabJestFn = jest.fn();
+const tabJestFn = fn();
-const shiftTabJestFn = jest.fn();
+const shiftTabJestFn = fn();
 
 const clearMocksDecorator: Decorator = (Story, context) => {
   if (context.parameters.clearMocks) {

front/src/modules/object-record/field/meta-types/input/components/__stories__/PhoneFieldInput.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { expect, jest } from '@storybook/jest';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
@@ -69,11 +68,11 @@ const PhoneFieldInputWithContext = ({
   );
 };
 
-const enterJestFn = jest.fn();
+const enterJestFn = fn();
-const escapeJestfn = jest.fn();
+const escapeJestfn = fn();
-const clickOutsideJestFn = jest.fn();
+const clickOutsideJestFn = fn();
-const tabJestFn = jest.fn();
+const tabJestFn = fn();
-const shiftTabJestFn = jest.fn();
+const shiftTabJestFn = fn();
 
 const clearMocksDecorator: Decorator = (Story, context) => {
   if (context.parameters.clearMocks) {

front/src/modules/object-record/field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { expect, jest } from '@storybook/jest';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -60,7 +59,7 @@ const RatingFieldInputWithContext = ({
   );
 };
 
-const submitJestFn = jest.fn();
+const submitJestFn = fn();
 
 const clearMocksDecorator: Decorator = (Story, context) => {
   if (context.parameters.clearMocks) {

front/src/modules/object-record/field/meta-types/input/components/__stories__/RelationFieldInput.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { expect, jest } from '@storybook/jest';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
@@ -66,8 +65,8 @@ const RelationFieldInputWithContext = ({
   );
 };
 
-const submitJestFn = jest.fn();
+const submitJestFn = fn();
-const cancelJestFn = jest.fn();
+const cancelJestFn = fn();
 
 const clearMocksDecorator: Decorator = (Story, context) => {
   if (context.parameters.clearMocks) {

front/src/modules/object-record/field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { expect, jest } from '@storybook/jest';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
@@ -68,11 +67,11 @@ const TextFieldInputWithContext = ({
   );
 };
 
-const enterJestFn = jest.fn();
+const enterJestFn = fn();
-const escapeJestfn = jest.fn();
+const escapeJestfn = fn();
-const clickOutsideJestFn = jest.fn();
+const clickOutsideJestFn = fn();
-const tabJestFn = jest.fn();
+const tabJestFn = fn();
-const shiftTabJestFn = jest.fn();
+const shiftTabJestFn = fn();
 
 const clearMocksDecorator: Decorator = (Story, context) => {
   if (context.parameters.clearMocks) {

front/src/modules/object-record/field/types/guards/assertFieldMetadata.ts

@@ -31,13 +31,15 @@ type AssertFieldMetadataFunction = <
             ? FieldEmailMetadata
             : E extends 'SELECT'
               ? FieldSelectMetadata
+              : E extends 'RATING'
+                ? FieldRatingMetadata
                 : E extends 'LINK'
                   ? FieldLinkMetadata
                   : E extends 'NUMBER'
                     ? FieldNumberMetadata
                     : E extends 'PHONE'
                       ? FieldPhoneMetadata
-    : E extends 'RATING'
+                      : E extends 'PROBABILITY'
                         ? FieldRatingMetadata
                         : E extends 'RELATION'
                           ? FieldRelationMetadata

front/src/modules/object-record/graphql/optimistic-effect-definition/getRecordOptimisticEffectDefinition.ts

@@ -65,4 +65,4 @@ export const getRecordOptimisticEffectDefinition = ({
     },
     isUsingFlexibleBackend: true,
     objectMetadataItem,
-  } satisfies OptimisticEffectDefinition);
+  }) satisfies OptimisticEffectDefinition;

front/src/modules/object-record/record-board/components/RecordBoardInternalEffect.tsx

@@ -12,7 +12,7 @@ export type RecordBoardInternalEffectProps = {
   onFieldsChange: (fields: any) => void;
 };
 
-export const RecordBoardInternalEffect = ({}) => {
+export const RecordBoardInternalEffect = () => {
   const updateCompanyColumnsBoardInternal =
     useUpdateCompanyBoardColumnsInternal();
   const { setActionBarEntries } = useRecordBoardActionBarEntriesInternal();

front/src/modules/object-record/record-board/hooks/internal/useRecordBoardColumnsInternal.ts

@@ -22,7 +22,8 @@ export const useBoardColumnsInternal = () => {
     if (!stages.length) return;
 
     return Promise.all(
-      stages.map((stage) =>
+      stages.map(
+        (stage) =>
           updateOnePipelineStep?.({
             idToUpdate: stage.id,
             input: {

front/src/modules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, userEvent, within } from '@storybook/test';
 
 import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 import { IconUserCircle } from '@/ui/display/icon';

front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldTypeSelectSection.stories.tsx

@@ -1,6 +1,6 @@
 import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 
 import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
 import { SnackBarProviderScope } from '@/ui/feedback/snack-bar-manager/scopes/SnackBarProviderScope';

front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx

@@ -1,13 +1,12 @@
-import { expect, jest } from '@storybook/jest';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { SettingsObjectDisabledMenuDropDown } from '../SettingsObjectDisabledMenuDropDown';
 
-const handleActivateMockFunction = jest.fn();
+const handleActivateMockFunction = fn();
-const handleEraseMockFunction = jest.fn();
+const handleEraseMockFunction = fn();
 
 const ClearMocksDecorator: Decorator = (Story, context) => {
   if (context.parameters.clearMocks) {

front/src/modules/spreadsheet-import/components/Table.tsx

@@ -1,3 +1,4 @@
+// @ts-expect-error // Todo: remove usage of react-data-grid
 import DataGrid, { DataGridProps } from 'react-data-grid';
 import styled from '@emotion/styled';
 

front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectColumn.tsx

@@ -1,3 +1,4 @@
+// @ts-expect-error // Todo: remove usage of react-data-grid
 import { Column, FormatterProps, useRowSelection } from 'react-data-grid';
 
 import { RawData } from '@/spreadsheet-import/types';

front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/components/SelectHeaderTable.tsx

@@ -20,20 +20,21 @@ export const SelectHeaderTable = ({
 
   return (
     <Table
-      rowKeyGetter={(row) => data.indexOf(row)}
+      // Todo: remove usage of react-data-grid
+      rowKeyGetter={(row: any) => data.indexOf(row)}
       rows={data}
       columns={columns}
       selectedRows={selectedRows}
-      onSelectedRowsChange={(newRows) => {
+      onSelectedRowsChange={(newRows: any) => {
         // allow selecting only one row
-        newRows.forEach((value) => {
+        newRows.forEach((value: any) => {
           if (!selectedRows.has(value as number)) {
             setSelectedRows(new Set([value as number]));
             return;
           }
         });
       }}
-      onRowClick={(row) => {
+      onRowClick={(row: any) => {
         setSelectedRows(new Set([data.indexOf(row)]));
       }}
       headerRowHeight={0}

front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx

@@ -44,9 +44,17 @@ const StyledContainer = styled.div`
       ${theme.font.color.primary} 20px
     );
   `};
-  background-position: 0 0, 0 0, 100% 0, 0 100%;
+  background-position:
+    0 0,
+    0 0,
+    100% 0,
+    0 100%;
   background-repeat: no-repeat;
-  background-size: 2px 100%, 100% 2px, 2px 100%, 100% 2px;
+  background-size:
+    2px 100%,
+    100% 2px,
+    2px 100%,
+    100% 2px;
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: flex;
   flex: 1;

front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx

@@ -1,3 +1,4 @@
+// @ts-expect-error // Todo: remove usage of react-data-grid
 import { Column } from 'react-data-grid';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
@@ -48,7 +49,7 @@ export const generateColumns = <T extends string>(fields: Fields<T>) =>
             )}
         </StyledHeaderContainer>
       ),
-      formatter: ({ row }) => (
+      formatter: ({ row }: any) => (
         <StyledDefaultContainer>{row[column.key]}</StyledDefaultContainer>
       ),
     }),

front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
+// @ts-expect-error Todo: remove usage of react-data-grid
 import { RowsChangeData } from 'react-data-grid';
 import styled from '@emotion/styled';
 
@@ -105,14 +106,18 @@ export const ValidationStep = <T extends string>({
       rows: typeof data,
       changedData?: RowsChangeData<(typeof data)[number]>,
     ) => {
-      const changes = changedData?.indexes.reduce((acc, index) => {
+      const changes = changedData?.indexes.reduce(
+        // Todo: remove usage of react-data-grid
+        (acc: any, index: any) => {
           // when data is filtered val !== actual index in data
           const realIndex = data.findIndex(
             (value) => value.__index === rows[index].__index,
           );
           acc[realIndex] = rows[index];
           return acc;
-      }, {} as Record<number, (typeof data)[number]>);
+        },
+        {} as Record<number, (typeof data)[number]>,
+      );
       const newData = Object.assign([], data, changes);
       updateData(newData);
     },

front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx

@@ -1,3 +1,4 @@
+// @ts-expect-error // Todo: remove usage of react-data-grid
 import { Column, useRowSelection } from 'react-data-grid';
 import { createPortal } from 'react-dom';
 import styled from '@emotion/styled';
@@ -71,7 +72,7 @@ export const generateColumns = <T extends string>(
     resizable: false,
     sortable: false,
     frozen: true,
-    formatter: (props) => {
+    formatter: (props: any) => {
       // eslint-disable-next-line  react-hooks/rules-of-hooks
       const [isRowSelected, onRowSelectionChange] = useRowSelection();
 
@@ -116,7 +117,8 @@ export const generateColumns = <T extends string>(
         </StyledHeaderContainer>
       ),
       editable: column.fieldType.type !== 'checkbox',
-      editor: ({ row, onRowChange, onClose }) => {
+      // Todo: remove usage of react-data-grid
+      editor: ({ row, onRowChange, onClose }: any) => {
         const columnKey = column.key as keyof (Data<T> & Meta);
         let component;
 
@@ -162,7 +164,8 @@ export const generateColumns = <T extends string>(
       editorOptions: {
         editOnClick: true,
       },
-      formatter: ({ row, onRowChange }) => {
+      // Todo: remove usage of react-data-grid
+      formatter: ({ row, onRowChange }: { row: any; onRowChange: any }) => {
         const columnKey = column.key as keyof (Data<T> & Meta);
         let component;
 

front/src/modules/spreadsheet-import/utils/findUnmatchedRequiredFields.ts

@@ -6,7 +6,8 @@ export const findUnmatchedRequiredFields = <T extends string>(
   columns: Columns<T>,
 ) =>
   fields
-    .filter((field) =>
+    .filter(
+      (field) =>
         field.validations?.some((validation) => validation.rule === 'required'),
     )
     .filter(

front/src/modules/spreadsheet-import/utils/generateExampleRow.ts

@@ -7,8 +7,11 @@ const titleMap: Record<Field<string>['fieldType']['type'], string> = {
 };
 
 export const generateExampleRow = <T extends string>(fields: Fields<T>) => [
-  fields.reduce((acc, field) => {
+  fields.reduce(
+    (acc, field) => {
       acc[field.key as T] = field.example || titleMap[field.fieldType.type];
       return acc;
-  }, {} as Record<T, string>),
+    },
+    {} as Record<T, string>,
+  ),
 ];

front/src/modules/ui/display/icon/components/IconAddressBook.tsx

@@ -1,6 +1,6 @@
 import { TablerIconsProps } from '@/ui/display/icon';
 
-import { ReactComponent as IconAddressBookRaw } from '../assets/address-book.svg';
+import IconAddressBookRaw from '../assets/address-book.svg?react';
 
 type IconAddressBookProps = TablerIconsProps;
 

front/src/modules/ui/display/icon/components/IconGoogle.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@emotion/react';
 
-import { ReactComponent as IconGoogleRaw } from '../assets/google-icon.svg';
+import IconGoogleRaw from '../assets/google-icon.svg?react';
 
 interface IconGoogleProps {
   size?: number;

front/src/modules/ui/display/icon/components/IconTwentyStar.tsx

@@ -1,6 +1,6 @@
 import { TablerIconsProps } from '@/ui/display/icon';
 
-import { ReactComponent as IconTwentyStarRaw } from '../assets/twenty-star.svg';
+import IconTwentyStarRaw from '../assets/twenty-star.svg?react';
 
 type IconTwentyStarProps = TablerIconsProps;
 

front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx

@@ -1,6 +1,6 @@
 import { TablerIconsProps } from '@/ui/display/icon';
 
-import { ReactComponent as IconTwentyStarFilledRaw } from '../assets/twenty-star-filled.svg';
+import IconTwentyStarFilledRaw from '../assets/twenty-star-filled.svg?react';
 
 type IconTwentyStarFilledProps = TablerIconsProps;
 

front/src/modules/ui/display/status/components/__stories__/Status.stories.tsx

@@ -1,6 +1,5 @@
-import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
@@ -23,7 +22,7 @@ type Story = StoryObj<typeof Status>;
 export const Default: Story = {
   args: {
     color: 'red',
-    onClick: jest.fn(),
+    onClick: fn(),
   },
   decorators: [ComponentDecorator],
   play: async ({ canvasElement, args }) => {

front/src/modules/ui/display/tag/components/__stories__/Tag.stories.tsx

@@ -1,6 +1,5 @@
-import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
@@ -23,7 +22,7 @@ type Story = StoryObj<typeof Tag>;
 export const Default: Story = {
   args: {
     color: 'red',
-    onClick: jest.fn(),
+    onClick: fn(),
   },
   decorators: [ComponentDecorator],
   play: async ({ canvasElement, args }) => {

front/src/modules/ui/display/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

front/src/modules/ui/input/button/components/FloatingIconButton.tsx

@@ -33,9 +33,7 @@ const StyledButton = styled.button<
   align-items: center;
   backdrop-filter: ${({ applyBlur }) => (applyBlur ? 'blur(20px)' : 'none')};
   background: ${({ theme, isActive }) =>
-    !!isActive
+    isActive ? theme.background.transparent.medium : theme.background.primary};
-      ? theme.background.transparent.medium
-      : theme.background.primary};
   border: ${({ focus, theme }) =>
     focus ? `1px solid ${theme.color.blue}` : 'transparent'};
   border-radius: ${({ position, theme }) => {

front/src/modules/ui/input/button/components/RoundedIconButton.tsx

@@ -19,7 +19,9 @@ const StyledIconButton = styled.button`
 
   outline: none;
   padding: 0;
-  transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
+  transition:
+    color 0.1s ease-in-out,
+    background 0.1s ease-in-out;
 
   &:disabled {
     background: ${({ theme }) => theme.background.quaternary};

front/src/modules/ui/input/button/components/__stories__/MainButton.stories.tsx

@@ -1,13 +1,12 @@
-import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { IconBrandGoogle } from '@/ui/display/icon';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { MainButton } from '../MainButton';
 
-const clickJestFn = jest.fn();
+const clickJestFn = fn();
 
 const meta: Meta<typeof MainButton> = {
   title: 'UI/Input/Button/MainButton',

front/src/modules/ui/input/button/components/__stories__/RoundedIconButton.stories.tsx

@@ -1,13 +1,12 @@
-import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { IconArrowRight } from '@/ui/display/icon';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { RoundedIconButton } from '../RoundedIconButton';
 
-const clickJestFn = jest.fn();
+const clickJestFn = fn();
 
 const meta: Meta<typeof RoundedIconButton> = {
   title: 'UI/Input/Button/RoundedIconButton',

front/src/modules/ui/input/components/__stories__/IconPicker.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, userEvent, within } from '@storybook/test';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { sleep } from '~/testing/sleep';

front/src/modules/ui/input/components/__stories__/Select.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

front/src/modules/ui/input/components/internal/date/components/__stories__/DatePicker.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, userEvent, within } from '@storybook/test';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import styled from '@emotion/styled';
-import { expect } from '@storybook/jest';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
 import { PlayFunction } from '@storybook/types';
 
 import { Button } from '@/ui/input/button/components/Button';

front/src/modules/ui/layout/tab/components/__stories__/Tablist.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { expect, within } from '@storybook/test';
 
 import { IconCheckbox } from '@/ui/display/icon';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';

front/src/modules/ui/layout/table/components/TableSection.tsx

@@ -32,7 +32,8 @@ const StyledSection = styled.div<{ isExpanded: boolean }>`
   max-height: ${({ isExpanded }) => (isExpanded ? '1000px' : 0)};
   opacity: ${({ isExpanded }) => (isExpanded ? 1 : 0)};
   overflow: hidden;
-  transition: max-height ${({ theme }) => theme.animation.duration.normal}s,
+  transition:
+    max-height ${({ theme }) => theme.animation.duration.normal}s,
     opacity ${({ theme }) => theme.animation.duration.normal}s;
 `;
 

front/src/modules/ui/navigation/link/components/__stories__/ContactLink.stories.tsx

@@ -1,5 +1,5 @@
-import { jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
@@ -18,7 +18,7 @@ const meta: Meta<typeof ContactLink> = {
 
 export default meta;
 type Story = StoryObj<typeof ContactLink>;
-const clickJestFn = jest.fn();
+const clickJestFn = fn();
 
 export const Email: Story = {
   args: {

front/src/modules/ui/navigation/link/components/__stories__/RawLink.stories.tsx

@@ -1,6 +1,5 @@
-import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
@@ -19,7 +18,7 @@ const meta: Meta<typeof RawLink> = {
 
 export default meta;
 type Story = StoryObj<typeof RawLink>;
-const clickJestFn = jest.fn();
+const clickJestFn = fn();
 
 export const Default: Story = {
   args: {

front/src/modules/ui/navigation/link/components/__stories__/RoundedLink.stories.tsx

@@ -1,6 +1,5 @@
-import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
@@ -18,7 +17,7 @@ const meta: Meta<typeof RoundedLink> = {
 
 export default meta;
 type Story = StoryObj<typeof RoundedLink>;
-const clickJestFn = jest.fn();
+const clickJestFn = fn();
 
 export const Default: Story = {
   args: {

front/src/modules/ui/navigation/link/components/__stories__/SocialLink.stories.tsx

@@ -1,6 +1,5 @@
-import { expect, jest } from '@storybook/jest';
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
@@ -18,7 +17,7 @@ const meta: Meta<typeof SocialLink> = {
 
 export default meta;
 type Story = StoryObj<typeof SocialLink>;
-const clickJestFn = jest.fn();
+const clickJestFn = fn();
 
 const linkedin: LinkType = LinkType.LinkedIn;
 const twitter: LinkType = LinkType.Twitter;

front/src/modules/ui/navigation/step-bar/components/Step.tsx

@@ -121,4 +121,4 @@ export const Step = ({
   );
 };
 
-Step.displayName = 'StepBar/Step';
+Step.displayName = 'StepBar';

front/src/modules/ui/theme/constants/effects.ts

@@ -2,15 +2,13 @@ import { css } from '@emotion/react';
 
 import { ThemeType } from './theme';
 
-export const overlayBackground = (props: { theme: ThemeType }) =>
+export const overlayBackground = (props: { theme: ThemeType }) => css`
-  css`
   backdrop-filter: blur(8px);
   background: ${props.theme.background.transparent.secondary};
   box-shadow: ${props.theme.boxShadow.strong};
 `;
 
-export const textInputStyle = (props: { theme: ThemeType }) =>
+export const textInputStyle = (props: { theme: ThemeType }) => css`
-  css`
   background-color: transparent;
   border: none;
   color: ${props.theme.font.color.primary};
@@ -28,8 +26,7 @@ export const textInputStyle = (props: { theme: ThemeType }) =>
   }
 `;
 
-export const hoverBackground = (props: any) =>
+export const hoverBackground = (props: any) => css`
-  css`
   transition: background 0.1s ease;
   &:hover {
     background: ${props.theme.background.transparent.light};

front/src/modules/ui/utilities/hotkey/hooks/useScopedHotkeys.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
   HotkeyCallback,

front/src/modules/ui/utilities/hotkey/hooks/useSequenceScopedHotkeys.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line no-restricted-imports
 import { Options, useHotkeys } from 'react-hotkeys-hook';
 import { Keys } from 'react-hotkeys-hook/dist/types';
 import { useRecoilState } from 'recoil';
@@ -56,7 +55,7 @@ export const useSequenceHotkeys = (
 
           setPendingHotkey(null);
 
-          if (!!options.preventDefault) {
+          if (options.preventDefault) {
             keyboardEvent.stopImmediatePropagation();
             keyboardEvent.stopPropagation();
             keyboardEvent.preventDefault();

front/src/pages/auth/CreateProfile.tsx

@@ -109,7 +109,7 @@ export const CreateProfile = () => {
                 firstName: data.firstName,
                 lastName: data.lastName,
               },
-            } as any),
+            }) as any,
         );
 
         navigate('/');

front/src/pages/auth/__stories__/CreateProfile.stories.tsx

@@ -1,6 +1,6 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { within } from '@storybook/test';
 import { graphql } from 'msw';
 
 import { AppPath } from '@/types/AppPath';

front/src/pages/auth/__stories__/CreateWorkspace.stories.tsx

@@ -1,6 +1,6 @@
 import { getOperationName } from '@apollo/client/utilities';
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { within } from '@storybook/test';
 import { graphql } from 'msw';
 
 import { AppPath } from '@/types/AppPath';

front/src/pages/auth/__stories__/SignInUp.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { fireEvent, within } from '@storybook/testing-library';
+import { fireEvent, within } from '@storybook/test';
 
 import { AppPath } from '@/types/AppPath';
 import {

front/src/pages/impersonate/__stories__/ImpersonateEffect.stories.tsx

@@ -28,7 +28,7 @@ export default meta;
 export type Story = StoryObj<typeof ImpersonateEffect>;
 
 export const Default: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/pages/not-found/__stories__/NotFound.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { within } from '@storybook/test';
 
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 import { PageDecoratorArgs } from '~/testing/decorators/PageDecorator';

front/src/pages/opportunities/__stories__/Opportunities.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 
 import { AppPath } from '@/types/AppPath';
 import {

front/src/pages/settings/__stories__/SettingsProfile.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { within } from '@storybook/test';
 
 import {
   PageDecorator,

front/src/pages/settings/__stories__/SettingsWorkspaceMembers.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { within } from '@storybook/test';
 
 import {
   PageDecorator,

front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 
 import {
   PageDecorator,
@@ -27,7 +27,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsNewObject>;
 
 export const WithStandardSelected: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/pages/settings/data-model/__stories__/SettingsObjectDetail.stories.tsx

@@ -27,7 +27,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsObjectDetail>;
 
 export const StandardObject: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/pages/settings/data-model/__stories__/SettingsObjectEdit.stories.tsx

@@ -27,7 +27,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsObjectEdit>;
 
 export const StandardObject: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep1.stories.tsx

@@ -28,7 +28,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsObjectNewFieldStep1>;
 
 export const Default: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/pages/settings/data-model/__stories__/SettingsObjectNewField/SettingsObjectNewFieldStep2.stories.tsx

@@ -28,7 +28,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsObjectNewFieldStep2>;
 
 export const Default: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/pages/settings/data-model/__stories__/SettingsObjects.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { within } from '@storybook/testing-library';
+import { within } from '@storybook/test';
 
 import {
   PageDecorator,

front/src/pages/settings/developers/api-keys/__stories__/SettingsDevelopersApiKeys.stories.tsx

@@ -23,7 +23,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsDevelopersApiKeys>;
 
 export const Default: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/pages/settings/developers/api-keys/__stories__/SettingsDevelopersApiKeysDetail.stories.tsx

@@ -24,7 +24,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsDevelopersApiKeyDetail>;
 
 export const Default: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/pages/settings/developers/api-keys/__stories__/SettingsDevelopersApiKeysNew.stories.tsx

@@ -23,7 +23,7 @@ export default meta;
 export type Story = StoryObj<typeof SettingsDevelopersApiKeysNew>;
 
 export const Default: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/pages/tasks/__stories__/Tasks.stories.tsx

@@ -25,7 +25,7 @@ export default meta;
 export type Story = StoryObj<typeof Tasks>;
 
 export const Default: Story = {
-  play: async ({}) => {
+  play: async () => {
     await sleep(100);
   },
 };

front/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

front/src/utils/cookie-storage.ts

@@ -1,4 +1,4 @@
-import Cookies, { CookieAttributes } from 'js-cookie';
+import Cookies from 'js-cookie';
 
 class CookieStorage {
   private keys: Set<string> = new Set();
@@ -7,7 +7,11 @@ class CookieStorage {
     return Cookies.get(key);
   }
 
-  setItem(key: string, value: string, attributes?: CookieAttributes): void {
+  setItem(
+    key: string,
+    value: string,
+    attributes?: Cookies.CookieAttributes,
+  ): void {
     this.keys.add(key);
     Cookies.set(key, value, attributes);
   }

front/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />