fix(editor): upgrade and make testing consistent in editor-ui and design-system (#4434)

* 📦 Update `package-lock.json`

* 📦 Make versions consistent in design-system

* 📦 Make lib versions consistent in editor-ui

* 🔧 Make vite configs consistent

* fix(design-system): updating vue2-bring-avatars alias

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>

packages/design-system/package.json

@@ -40,7 +40,7 @@
     "@storybook/addon-postcss": "^2.0.0",
     "@storybook/vue": "^6.5.10",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/vue": "^5.8.2",
+    "@testing-library/vue": "^5.8.3",
     "@types/markdown-it": "^12.2.3",
     "@types/sanitize-html": "^2.6.2",
     "c8": "7.11.0",
@@ -62,7 +62,7 @@
     "trim": ">=0.0.3",
     "typescript": "~4.8.0",
     "vite": "2.9.5",
-    "vite-plugin-vue2": "1.9.3",
+    "@vitejs/plugin-vue2": "^1.1.2",
     "vitest": "0.9.3",
     "vue": "~2.7.10",
     "vue-class-component": "^7.2.3",

packages/design-system/vite.config.ts

@@ -1,42 +1,45 @@
-import { createVuePlugin } from 'vite-plugin-vue2';
+import vue from '@vitejs/plugin-vue2';
 import { resolve } from 'path';
+import { defineConfig, mergeConfig } from 'vite';
+import { defineConfig as defineVitestConfig } from 'vitest/config';
 
-export default {
-	plugins: [
-		createVuePlugin(),
-	],
-	resolve: {
-		alias: {
-			'@': resolve(__dirname, 'src'),
-			'vue2-boring-avatars': resolve(__dirname, '..', '..', 'node_modules', 'vue2-boring-avatars', 'dist', 'vue-2-boring-avatars.umd.js'),
-			// 'vue2-boring-avatars': 'vue2-boring-avatars/dist/vue-2-boring-avatars.umd.js',
+export default mergeConfig(
+	defineConfig({
+		plugins: [
+			vue(),
+		],
+		resolve: {
+			alias: {
+				'@': resolve(__dirname, 'src'),
+				'vue2-boring-avatars': require.resolve('vue2-boring-avatars'),
+			},
 		},
-	},
-	build: {
-		lib: {
-			entry: resolve(__dirname, 'src', 'main.js'),
-			name: 'N8nDesignSystem',
-			fileName: (format) => `n8n-design-system.${format}.js`,
-		},
-		rollupOptions: {
-			// make sure to externalize deps that shouldn't be bundled
-			// into your library
-			external: ['vue'],
-			output: {
-				exports: 'named',
-				// Provide global variables to use in the UMD build
-				// for externalized deps
-				globals: {
-					vue: 'Vue',
+		build: {
+			lib: {
+				entry: resolve(__dirname, 'src', 'main.js'),
+				name: 'N8nDesignSystem',
+				fileName: (format) => `n8n-design-system.${format}.js`,
+			},
+			rollupOptions: {
+				// make sure to externalize deps that shouldn't be bundled
+				// into your library
+				external: ['vue'],
+				output: {
+					exports: 'named',
+					// Provide global variables to use in the UMD build
+					// for externalized deps
+					globals: {
+						vue: 'Vue',
+					},
 				},
 			},
 		},
-	},
-	test: {
-		globals: true,
-		environment: 'jsdom',
-		setupFiles: [
-			'./src/__tests__/setup.ts',
-		],
-	},
-};
+	}),
+	defineVitestConfig({
+		test: {
+			globals: true,
+			environment: 'jsdom',
+			setupFiles: ['./src/__tests__/setup.ts'],
+		},
+	}),
+);