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>

front/src/modules/ui/display/chip/components/Chip.tsx

@@ -41,8 +41,8 @@ const StyledContainer = styled.div<Partial<ChipProps>>`
     variant === ChipVariant.Highlighted
       ? theme.background.transparent.light
       : variant === ChipVariant.Rounded
-      ? theme.background.transparent.lighter
-      : 'transparent'};
+        ? theme.background.transparent.lighter
+        : 'transparent'};
   border-color: ${({ theme, variant }) =>
     variant === ChipVariant.Rounded ? theme.border.color.medium : 'none'};
   border-radius: ${({ theme, variant }) =>
@@ -56,14 +56,14 @@ const StyledContainer = styled.div<Partial<ChipProps>>`
     disabled
       ? theme.font.color.light
       : accent === ChipAccent.TextPrimary
-      ? theme.font.color.primary
-      : theme.font.color.secondary};
+        ? theme.font.color.primary
+        : theme.font.color.secondary};
   cursor: ${({ clickable, disabled, variant }) =>
     disabled || variant === ChipVariant.Transparent
       ? 'inherit'
       : clickable
-      ? 'pointer'
-      : 'inherit'};
+        ? 'pointer'
+        : 'inherit'};
   display: inline-flex;
   font-weight: ${({ theme, accent }) =>
     accent === ChipAccent.TextSecondary ? theme.font.weight.medium : 'inherit'};
@@ -85,8 +85,8 @@ const StyledContainer = styled.div<Partial<ChipProps>>`
           (variant === ChipVariant.Highlighted
             ? theme.background.transparent.medium
             : variant === ChipVariant.Regular
-            ? theme.background.transparent.light
-            : 'transparent') +
+              ? theme.background.transparent.light
+              : 'transparent') +
           ';'
         );
       }
@@ -100,8 +100,8 @@ const StyledContainer = styled.div<Partial<ChipProps>>`
           (variant === ChipVariant.Highlighted
             ? theme.background.transparent.strong
             : variant === ChipVariant.Regular
-            ? theme.background.transparent.medium
-            : 'transparent') +
+              ? theme.background.transparent.medium
+              : 'transparent') +
           ';'
         );
       }

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';