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

* Fix build errors

---------

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

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 { lightTheme, darkTheme } from '../src/modules/ui/theme/constants/theme';
-import { RootDecorator } from '../src/testing/decorators/RootDecorator';
-import 'react-loading-skeleton/dist/skeleton.css';
-import { mockedUserJWT } from '../src/testing/mock-data/jwt';
-import { rest } from 'msw'
+import { Preview, ReactRenderer } from '@storybook/react';
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+import { initialize, mswLoader } from 'msw-storybook-addon';
 
-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],
   },
-  loaders: [mswLoader],
 };
 
 export default preview;

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

@@ -1,13 +1,13 @@
-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
    * @see https://jestjs.io/docs/configuration
    */
-  testTimeout: process.env.STORYBOOK_SCOPE=== 'pages' ? 60000 : 15000,
+  testTimeout: process.env.STORYBOOK_SCOPE === 'pages' ? 60000 : 15000,
 };