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/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/Tab.tsx

@@ -23,8 +23,8 @@ const StyledTab = styled.div<{ active?: boolean; disabled?: boolean }>`
     active
       ? theme.font.color.primary
       : disabled
-      ? theme.font.color.light
-      : theme.font.color.secondary};
+        ? theme.font.color.light
+        : theme.font.color.secondary};
   cursor: pointer;
 
   display: flex;

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/TableCell.tsx

@@ -14,8 +14,8 @@ const StyledTableCell = styled.div<TableCellProps>`
     align === 'right'
       ? 'flex-end'
       : align === 'center'
-      ? 'center'
-      : 'flex-start'};
+        ? 'center'
+        : 'flex-start'};
   padding: 0 ${({ theme }) => theme.spacing(2)};
   text-align: ${({ align }) => align ?? 'left'};
 `;

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

@@ -11,8 +11,8 @@ const StyledTableHeader = styled.div<{ align?: 'left' | 'center' | 'right' }>`
     align === 'right'
       ? 'flex-end'
       : align === 'center'
-      ? 'center'
-      : 'flex-start'};
+        ? 'center'
+        : 'flex-start'};
   padding: 0 ${({ theme }) => theme.spacing(2)};
   text-align: ${({ align }) => align ?? 'left'};
 `;

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