getlago · stephenlago99 · Jan 8, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025
diff --git a/.babelrc.js b/.babelrc.js
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@ dist
 .env
 yarn-error.log
 coverage
-cypress/downloads
+cypress/downloads
+.swc/
diff --git a/__mocks__/styleMock.js → __mocks__/styleMock.cjs b/__mocks__/styleMock.js → __mocks__/styleMock.cjs
diff --git a/__mocks__/svgMock.js → __mocks__/svgMock.cjs b/__mocks__/svgMock.js → __mocks__/svgMock.cjs
diff --git a/cypress/cypress.config.js b/cypress/cypress.config.js
@@ -1,9 +1,10 @@
-const { defineConfig } = require('cypress')
-const fs = require('fs')
+import { defineConfig } from 'cypress'
+import dotenv from 'dotenv'
+import fs from 'node:fs'
 
-require('dotenv').config({ path: '../.env' })
+dotenv.config({ path: '../.env' })
 
-module.exports = defineConfig({
+export default defineConfig({
   projectId: 'u863yi',
   retries: 3,
   e2e: {

diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
@@ -13,9 +13,23 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 // Import commands.js using ES2015 syntax:
-import './commands'
 import { userEmail, userPassword } from './reusableConstants'
 
+Cypress.Commands.add('login', (email = userEmail, password = userPassword) => {
+  cy.visit('/login')
+  cy.get('input[name="email"]').type(email)
+  cy.get('input[name="password"]').type(password)
+  cy.get('[data-test="submit"]').click()
+  cy.url().should('be.equal', Cypress.config().baseUrl + '/')
+})
+
+// https://docs.cypress.io/api/cypress-api/custom-commands#Overwrite-type-command
+// @ts-ignore
+Cypress.Commands.overwrite('type', (originalFn, element, text, options) => {
+  // @ts-ignore
+  return originalFn(element, text, { ...options, delay: 0 })
+})
+
 beforeEach(() => {
   // Allow access to broswer's clipboard api
   Cypress.automation('remote:debugger:protocol', {

diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -95,10 +95,16 @@ export default [
     },
   },
   {
-    files: ['**/*.js'],
+    files: ['**/*.cjs'],
     rules: {
       '@typescript-eslint/no-require-imports': 'off',
     },
   },
+  {
+    files: ['vite.config.ts', 'scripts/**/*.js'],
+    rules: {
+      'import/order': 'off',
+    },
+  },
   pluginPrettier,
 ]
diff --git a/src/index.html → index.html b/src/index.html → index.html
@@ -16,10 +16,12 @@
     />
 
     <script src="env-config.js"></script>
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title><%- title %></title>
+    <link rel="shortcut icon" href="<%- favicon %>" type="image/svg" />
   </head>
   <body>
     <!-- React app root element -->
     <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/jest.config.js → jest.config.ts b/jest.config.js → jest.config.ts
@@ -1,4 +1,6 @@
-module.exports = {
+import type { Config } from 'jest'
+
+export default {
   // The root of your source code, typically /src
   // `<rootDir>` is a token Jest substitutes
   roots: ['<rootDir>/src'],
@@ -9,7 +11,7 @@ module.exports = {
   // using ts-jest
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
-    '\\.svg$': '<rootDir>/__mocks__/svgMock.js',
+    '\\.svg$': '<rootDir>/__mocks__/svgMock.cjs',
   },
 
   transformIgnorePatterns: [
@@ -29,6 +31,7 @@ module.exports = {
   coverageReporters: ['text', 'lcov'],
   collectCoverage: false, // set to true to collect coverage
   coverageThreshold: {
+    global: {},
     'src/hooks/ui/useShortcuts.tsx': {
       statements: 90,
     },
@@ -49,7 +52,7 @@ module.exports = {
   moduleNameMapper: {
     '^~/(.*)$': '<rootDir>/src/$1',
     'ace-builds': '<rootDir>/node_modules/ace-builds',
-    '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+    '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.cjs',
   },
 
   // Module file extensions for importing
@@ -65,4 +68,4 @@ module.exports = {
     NANGO_PUBLIC_KEY: '',
     SENTRY_DSN: 'https://sentry.io/',
   },
-}
+} satisfies Config
diff --git a/package.json b/package.json
@@ -2,36 +2,35 @@
   "name": "lago-front",
   "version": "1.0.0",
   "description": "Front application of Lago",
-  "main": "index.js",
   "repository": "[email protected]:getlago/lago-front.git",
   "author": "Lago tech team <[email protected]>",
   "license": "MIT",
   "private": true,
+  "type": "module",
+  "sideEffects": false,
   "changelog": {
     "repo": "[email protected]:getlago/lago-front.git"
   },
   "scripts": {
-    "start": "webpack serve --config ./webpack.dev.js",
-    "start:build": "yarn build && npx http-server-spa ./dist",
-    "build": "webpack --config ./webpack.prod.js",
-    "lint": "prettier --check src/**/*.{ts,tsx,svg,html} --check cypress/**/*.ts && eslint",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "prettier --check src/**/*.{ts,tsx,svg} --check index.html --check cypress/**/*.ts && eslint",
     "eslint": "eslint",
-    "lint:fix": "prettier --write {src,cypress}/** && eslint --fix .",
+    "lint:fix": "prettier --write {src,cypress}/** index.html && eslint --fix .",
     "codegen": "graphql-codegen --config codegen.yml -r dotenv/config",
     "codegen:watch": "graphql-codegen --config codegen.yml -r dotenv/config --watch",
-    "test": "jest --config jest.config.js",
+    "test": "jest --config jest.config.ts",
     "test:e2e": "cypress open --config-file cypress/cypress.config.js",
     "translations:add": "node scripts/translations/add",
     "translations:inspect": "node scripts/translations/inspect",
     "changelog:update": "auto-changelog --template=.changelog/regular.hbs",
     "codemod": "node scripts/codemod.js",
-    "postinstall": "npx yarn-deduplicate"
+    "postinstall": "npx yarn-deduplicate",
+    "bundle-analyzer": "vite-bundle-visualizer --sourcemap"
   },
+  "packageManager": "[email protected]",
   "devDependencies": {
-    "@babel/core": "7.23.0",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.22.20",
-    "@babel/preset-react": "7.22.15",
     "@emotion/react": "11.13.5",
     "@emotion/styled": "11.13.5",
     "@eslint/compat": "^1.2.2",
@@ -42,8 +41,9 @@
     "@graphql-codegen/typescript-operations": "4.2.3",
     "@graphql-codegen/typescript-react-apollo": "4.3.2",
     "@parcel/watcher": "^2.3.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@svgr/webpack": "8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
+    "@swc/plugin-styled-components": "^6.0.2",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
@@ -54,24 +54,20 @@
     "@types/jsonwebtoken": "^9.0.2",
     "@types/lodash": "4.17.13",
     "@types/luxon": "3.4.2",
+    "@types/node": "^22.10.2",
     "@types/prismjs": "1.26.3",
     "@types/react": "18.2.38",
     "@types/react-dom": "18.2.17",
     "@types/react-router-dom": "5.3.3",
     "@types/react-window": "1.8.5",
     "@types/sanitize-html": "2.9.5",
-    "@types/webpack": "5.28.5",
+    "@vitejs/plugin-react-swc": "^3.7.2",
     "auto-changelog": "2.4.0",
     "autoprefixer": "^10.4.19",
-    "babel-loader": "9.1.3",
-    "babel-plugin-prismjs": "2.1.0",
-    "babel-plugin-styled-components": "2.1.4",
     "class-variance-authority": "^0.7.0",
-    "css-loader": "^7.1.2",
     "cssnano": "^7.0.6",
     "cypress": "13.14.2",
     "dotenv": "16.3.1",
-    "duplicate-package-checker-webpack-plugin": "3.0.0",
     "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
@@ -80,32 +76,28 @@
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-tailwindcss": "^3.17.5",
-    "file-loader": "6.2.0",
-    "fork-ts-checker-webpack-plugin": "9.0.2",
     "gettext-extractor": "3.8.0",
     "glob": "^10.3.4",
     "globals": "^15.12.0",
-    "html-webpack-plugin": "5.5.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jscodeshift": "^17.1.1",
     "postcss": "^8.4.38",
-    "postcss-loader": "^8.1.1",
     "postcss-preset-env": "^9.5.13",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",
-    "react-refresh": "^0.14.2",
-    "style-loader": "^4.0.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.11",
     "ts-jest": "29.2.4",
-    "ts-loader": "9.5.1",
+    "ts-node": "^10.9.2",
     "typescript": "5.5.3",
-    "webpack": "5.94.0",
-    "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "5.1.4",
-    "webpack-dev-server": "^5.2.0",
-    "webpack-merge": "5.9.0"
+    "typescript-eslint": "^8.14.0",
+    "vite": "^6.0.5",
+    "vite-bundle-visualizer": "^1.2.1",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-plugin-top-level-await": "^1.4.4",
+    "vite-plugin-wasm": "^3.4.1"
   },
   "dependencies": {
     "@apollo/client": "3.11.4",
@@ -133,8 +125,6 @@
     "recharts": "^2.9.0",
     "sanitize-html": "2.12.1",
     "styled-components": "^6.1.13",
-    "typescript-eslint": "^8.14.0",
-    "yarn": "1.22.19",
     "yup": "1.2.0"
   },
   "engines": {

diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
diff --git a/src/public/images/favicon-local.svg → public/favicon-local.svg b/src/public/images/favicon-local.svg → public/favicon-local.svg
diff --git a/src/public/images/favicon-prod.svg → public/favicon-prod.svg b/src/public/images/favicon-prod.svg → public/favicon-prod.svg
diff --git a/src/public/images/favicon-staging.svg → public/favicon-staging.svg b/src/public/images/favicon-staging.svg → public/favicon-staging.svg
diff --git a/scripts/codemod.js b/scripts/codemod.js
@@ -1,9 +1,7 @@
 /* eslint no-console: ["error", { allow: ["info"] }] */
-
-const path = require('path')
-
-const { globSync } = require('glob')
-const { run: jscodeshift } = require('jscodeshift/src/Runner')
+import { globSync } from 'glob'
+import { run as jscodeshift } from 'jscodeshift/src/Runner'
+import path from 'node:path'
 
 const SRC_DIR = './src/'
 

diff --git a/scripts/transforms/skeleton-migrate-margin-values.js b/scripts/transforms/skeleton-migrate-margin-values.js
@@ -1,4 +1,4 @@
-module.exports = function (file, api) {
+export default function (file, api) {
   // Alias the jscodeshift API for ease of use.
   const j = api.jscodeshift
 

diff --git a/scripts/transforms/skeleton-migrate-width-values.js b/scripts/transforms/skeleton-migrate-width-values.js
@@ -1,4 +1,4 @@
-module.exports = function (file, api) {
+export default function (file, api) {
   // Alias the jscodeshift API for ease of use.
   const j = api.jscodeshift
 

diff --git a/scripts/transforms/skeleton-remove-unnecessary-height.js b/scripts/transforms/skeleton-remove-unnecessary-height.js
@@ -1,4 +1,4 @@
-module.exports = function (file, api) {
+export default function (file, api) {
   // Alias the jscodeshift API for ease of use.
   const j = api.jscodeshift
 

diff --git a/scripts/translations/add.js b/scripts/translations/add.js
@@ -1,5 +1,5 @@
 /* eslint no-console: ["error", { allow: ["info"] }] */
-const fs = require('fs')
+import fs from 'node:fs'
 
 const KEY_RANDOM_CHARS_LENGTH = 11
 const TRANSLATIONS_FOLDER = './translations'

diff --git a/scripts/translations/inspect.js b/scripts/translations/inspect.js
@@ -1,10 +1,9 @@
 /* eslint no-console: ["error", { allow: ["info"] }] */
-const fs = require('fs')
-const path = require('path')
-
-const _ = require('lodash')
-const { globSync } = require('glob')
-const { GettextExtractor, JsExtractors } = require('gettext-extractor')
+import { GettextExtractor, JsExtractors } from 'gettext-extractor'
+import { globSync } from 'glob'
+import _ from 'lodash'
+import fs from 'node:fs'
+import path from 'node:path'
 
 const SRC_DIR = './src/'
 const TRANSLATION_FILES_PATH = './translations/base.json' // './translations/**.json' for when we'll support several languages

diff --git a/src/components/form/JsonEditor/JsonEditor.tsx b/src/components/form/JsonEditor/JsonEditor.tsx
@@ -2,9 +2,8 @@ import ace from 'ace-builds/src-noconflict/ace'
 import 'ace-builds/src-noconflict/ext-language_tools'
 import 'ace-builds/src-noconflict/mode-json'
 import 'ace-builds/src-noconflict/theme-github'
-import 'ace-builds/webpack-resolver'
-// @ts-expect-error https://stackoverflow.com/questions/65616136/how-to-use-json-with-react-ace
-import jsonWorkerUrl from 'file-loader!ace-builds/src-noconflict/worker-json'
+// https://github.com/securingsincity/react-ace/issues/725#issuecomment-1086221818
+import jsonWorkerUrl from 'ace-builds/src-noconflict/worker-json?url'
 import { ReactNode, useEffect, useRef, useState } from 'react'
 import AceEditor from 'react-ace'