feat: update config and setup files with node18, vite and vue3

Author: paulobernardoaf

.eslintrc.json

@@ -8,21 +8,42 @@
     "jest": true,
     "es6" :true
   },
+  "parser": "@typescript-eslint/parser",
   "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "tabWidth": 2,
+        "semi": true,
+        "singleQuote": true,
+        "bracketSpacing": true,
+        "printWidth": 80,
+        "trailingComma": "all",
+        "endOfLine": "lf",
+        "singleAttributePerLine": true
+      }
+    ],
     "no-prototype-builtins": 0,
     "no-case-declarations": 1,
     "no-empty": 1,
+    "no-var": 1,
+    "prefer-const": 1,
+    "react/prop-types": 1,
     "react/no-unescaped-entities": 1,
     "react/display-name": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/camelcase": 0,
     "@typescript-eslint/explicit-member-accessibility": 0,
     "@typescript-eslint/no-namespace": 0,
     "@typescript-eslint/no-var-requires": 0,
     "@typescript-eslint/no-use-before-define": 0,
     "@typescript-eslint/no-object-literal-type-assertion": 0,
     "@typescript-eslint/no-empty-interface": 1,
-    "@typescript-eslint/no-non-null-assertion": 0
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "@typescript-eslint/no-inferrable-types": 1,
+    "@typescript-eslint/ban-types": 1,
+    "@typescript-eslint/no-this-alias": 1,
+    "@typescript-eslint/ban-ts-comment": 1,
+    "@typescript-eslint/no-empty-function": 1
   },
   "settings": {
     "react": {

.gitignore

@@ -14,4 +14,6 @@ lambda-build
 lib
 build
 fabric
-fabfile.py
+fabfile.py
+# Local Netlify folder
+.netlify

.npmrc

@@ -1 +1,2 @@
 save-exact=true
+engine-strict=true

netlify.toml

@@ -2,3 +2,6 @@
   command = "yarn run netlify"
   publish = "build"
   functions = "lambda-build"
+
+[functions]
+  node_bundler = "esbuild"

package.json

@@ -8,22 +8,25 @@
   "unpkg": "umd/flow-editor.min.js",
   "author": "Weni <support@weni.ai>",
   "homepage": "./",
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "files": [
     "build"
   ],
   "private": false,
   "dependencies": {
     "@material-symbols/font-400": "0.13.2",
-    "@weni/unnnic-system": "1.24.8",
+    "@weni/unnnic-system": "2.0.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "sms-length": "0.1.2",
-    "vuereact-combined": "1.2.11"
+    "veaury": "2.3.18"
   },
   "scripts": {
     "lambda:serve": "netlify-lambda serve lambda -p 6000",
     "lambda:build": "netlify-lambda build lambda",
-    "lambda": "yarn run lambda:build && yarn run lambda:serve",
+    "lambda": "netlify functions:serve --functions lambda --port 6000",
     "prettify": "prettier --write 'src/**/*.{ts,tsx,json,js,css,md}'",
     "netlify": "yarn run build && yarn run lambda:build",
     "precommit": "lint-staged",
@@ -32,12 +35,12 @@
     "version": "yarn run build && auto-changelog -p && git add CHANGELOG.md",
     "scan": "./node_modules/i18next-scanner/bin/cli.js",
     "dev": "yarn build && cp -Rf build/* ../rapidpro/node_modules/@weni/flow-editor/build/",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom-sixteen",
-    "tester": "react-scripts test --env=jest-environment-happy-dom",
-    "eject": "react-scripts eject",
-    "lint": "eslint -c .eslintrc.json src/**/*.{ts,tsx,js} --fix"
+    "start": "vite --port 3000",
+    "build": "vite build",
+    "test": "vitest",
+    "lint": "eslint -c .eslintrc.json src/**/*.{ts,tsx,js} --fix",
+    "build:vite": "tsc && vite build",
+    "preview": "vite preview"
   },
   "browserslist": {
     "production": [
@@ -76,29 +79,32 @@
     "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "7.0.0",
     "@nyaruka/temba-components": "0.18.1",
-    "@testing-library/jest-dom": "4.0.0",
-    "@testing-library/react": "8.0.1",
+    "@originjs/vite-plugin-commonjs": "1.0.3",
+    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "12.0.0",
     "@types/common-tags": "^1.8.0",
     "@types/core-js": "2.5.0",
     "@types/dateformat": "3.0.0",
     "@types/enzyme": "^3.9.3",
     "@types/enzyme-adapter-react-16": "^1.0.3",
-    "@types/jest": "24.0.13",
-    "@types/react": "16.8.23",
+    "@types/react": "16.14.1",
     "@types/react-addons-shallow-compare": "0.14.22",
-    "@types/react-dom": "16.8.4",
+    "@types/react-dom": "16.9.10",
     "@types/react-modal": "^3.8.1",
     "@types/react-redux": "7.1.3",
     "@types/react-select": "3.0.8",
     "@types/redux-mock-store": "^1.0.0",
     "@types/textarea-caret": "3.0.0",
     "@types/uniqid": "^4.1.2",
     "@types/uuid": "^3.4.3",
-    "@types/webpack-env": "^1.13.6",
-    "@typescript-eslint/eslint-plugin": "1.12.0",
-    "@typescript-eslint/parser": "1.12.0",
-    "@weni/eslint-config": "1.0.2",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
+    "@vitejs/plugin-react": "4.2.1",
+    "@vitejs/plugin-vue": "5.0.4",
+    "@vitejs/plugin-vue-jsx": "3.1.0",
+    "@vitest/coverage-v8": "1.6.0",
+    "@weni/eslint-config": "1.0.4",
     "ajv": "6.5.2",
     "array-move": "2.1.0",
     "auto-bind": "2.1.0",
@@ -113,9 +119,11 @@
     "enzyme-adapter-react-16": "^1.13.0",
     "enzyme-adapter-utils": "1.12.0",
     "enzyme-to-json": "^3.3.4",
-    "eslint-config-prettier": "6.0.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-config-react": "1.1.7",
-    "eslint-plugin-prettier": "3.1.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-plugin-prettier": "4.2.1",
     "fast-deep-equal": "2.0.1",
     "http-headers-validation": "0.0.1",
     "http-proxy-middleware": "0.19.1",
@@ -127,13 +135,15 @@
     "identity-obj-proxy": "3.0.0",
     "immutability-helper": "2.7.1",
     "jest-environment-jsdom-sixteen": "2.0.0",
+    "jsdom": "24.0.0",
     "jsplumb": "file:jsplumb-2.13.1.tgz",
     "lint-staged": "8.1.7",
     "local-storage": "1.4.2",
     "lodash.clonedeep": "4.5.0",
     "material-symbols": "0.12.0",
     "moment": "2.24.0",
-    "netlify-lambda": "^1.4.9",
+    "msw": "2.3.1",
+    "netlify-cli": "17.23.1",
     "panzoom": "9.4.3",
     "prettier": "1.18.2",
     "pretty-quick": "^1.11.0",
@@ -150,15 +160,14 @@
     "react-page-visibility": "3.2.1",
     "react-player": "1.9.3",
     "react-redux": "7.1.3",
-    "react-scripts": "^3.4.1",
     "react-select": "3.0.8",
     "react-sortable-hoc": "1.9.1",
     "redux": "3.7.2",
     "redux-devtools-extension": "^2.13.5",
     "redux-mock-store": "1.5.3",
     "redux-thunk": "2.2.0",
     "resize-observer-polyfill": "1.5.1",
-    "sass": "1.32.13",
+    "sass": "1.75.0",
     "sha1": "1.1.1",
     "shx": "0.3.2",
     "sign-bunny": "1.0.0",
@@ -167,8 +176,16 @@
     "tslint": "5.17.0",
     "tslint-config-prettier": "1.18.0",
     "tslint-plugin-prettier": "2.0.1",
-    "typescript": "3.4.5",
+    "typescript": "3.9",
     "uniqid": "5.0.3",
-    "uuid": "3.3.2"
+    "uuid": "3.3.2",
+    "vite": "4.5.3",
+    "vite-plugin-eslint": "1.8.1",
+    "vite-tsconfig-paths": "4.2.1",
+    "vitest": "1.6.0"
+  },
+  "resolutions": {
+    "@types/react": "16.8.25",
+    "typescript": "3.9"
   }
 }

src/env.d.ts

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

tsconfig.json

@@ -16,9 +16,11 @@
     "downlevelIteration": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "strictNullChecks": false,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vitest/globals"]
   },
   "include": ["src"],
   "exclude": ["__mocks__", "node_modules", "src/setupProxy.js"]

vite.config.js

@@ -0,0 +1,51 @@
+import { defineConfig } from 'vite';
+import path from 'path';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
+import veauryVitePlugins from 'veaury/vite/index.js';
+import eslint from 'vite-plugin-eslint';
+
+export default defineConfig({
+  plugins: [
+    eslint({ cache: false }),
+    tsconfigPaths({ loose: true }),
+    viteCommonjs(),
+    veauryVitePlugins({
+      type: 'react',
+    }),
+  ],
+  resolve: {
+    alias: {
+      src: path.resolve(__dirname, './src'),
+    },
+  },
+  server: {
+    proxy: {
+      '/.netlify/functions/': {
+        target: 'http://localhost:6000/',
+        changeOrigin: true,
+      },
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @import '@weni/unnnic-system/src/assets/scss/unnnic.scss';
+        `,
+      },
+    },
+  },
+  test: {
+    cache: false,
+    clearMocks: true,
+    globals: true,
+    setupFiles: ['./vitest-setup.ts', 'vitest.d.ts'],
+    environment: 'jsdom',
+    root: 'src',
+    coverage: {
+      reporter: ['lcov', 'text'],
+    },
+    outputFile: 'coverage/sonar-report.xml',
+  },
+});