feat: Add reusable frontend composables package (#13077)

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <[email protected]>
n8n-io · Feb 6, 2025 · ef87da4 · ef87da4
1 parent df89c6f
commit ef87da4
Show file tree

Hide file tree

Showing 49 changed files with 684 additions and 309 deletions.
diff --git a/codecov.yml b/codecov.yml
@@ -46,6 +46,7 @@ component_management:
         - packages/@n8n/codemirror-lang/**
         - packages/design-system/**
         - packages/editor-ui/**
+        - packages/frontend/**
     - component_id: nodes_packages
       name: Nodes
       paths:

diff --git a/packages/design-system/.eslintrc.js b/packages/design-system/.eslintrc.js
@@ -1,13 +1,9 @@
-const sharedOptions = require('@n8n_io/eslint-config/shared');
+const { createFrontendEslintConfig } = require('@n8n/frontend-eslint-config');
 
 /**
  * @type {import('@types/eslint').ESLint.ConfigData}
  */
-module.exports = {
-	extends: ['@n8n_io/eslint-config/frontend'],
-
-	...sharedOptions(__dirname, 'frontend'),
-
+module.exports = createFrontendEslintConfig(__dirname, {
 	rules: {
 		// TODO: Remove these
 		'import/no-default-export': 'warn',
@@ -44,4 +40,4 @@ module.exports = {
 			},
 		},
 	],
-};
+});
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,8 +1,8 @@
 {
   "name": "n8n-design-system",
   "version": "1.67.0",
-  "main": "src/main.ts",
-  "import": "src/main.ts",
+  "main": "src/index.ts",
+  "import": "src/index.ts",
   "scripts": {
     "dev": "pnpm run storybook",
     "clean": "rimraf dist .turbo",
@@ -19,6 +19,9 @@
     "lintfix": "eslint src --ext .js,.ts,.vue --fix"
   },
   "devDependencies": {
+    "@n8n/frontend-eslint-config": "workspace:*",
+    "@n8n/frontend-typescript-config": "workspace:*",
+    "@n8n/frontend-vitest-config": "workspace:*",
     "@n8n/storybook": "workspace:*",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.0",
@@ -41,6 +44,7 @@
     "vue-tsc": "catalog:frontend"
   },
   "dependencies": {
+    "@n8n/composables": "workspace:*",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^3.0.3",

diff --git a/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue b/packages/design-system/src/components/N8nKeyboardShortcut/N8nKeyboardShortcut.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { computed } from 'vue';
 
-import { useDeviceSupport } from '../../composables/useDeviceSupport';
 import type { KeyboardShortcut } from '../../types/keyboardshortcut';
 
 const props = defineProps<KeyboardShortcut>();

diff --git a/packages/design-system/src/components/N8nUserStack/UserStack.test.ts b/packages/design-system/src/components/N8nUserStack/UserStack.test.ts
@@ -1,8 +1,7 @@
 import { render } from '@testing-library/vue';
 
-import { N8nAvatar, N8nUserInfo } from 'n8n-design-system/main';
-
 import UserStack from './UserStack.vue';
+import { N8nAvatar, N8nUserInfo } from '../index';
 
 describe('UserStack', () => {
 	it('should render flat user list', () => {

diff --git a/packages/design-system/src/main.ts → packages/design-system/src/index.ts b/packages/design-system/src/main.ts → packages/design-system/src/index.ts
@@ -1,6 +1,5 @@
 import * as locale from './locale';
 
-export { useDeviceSupport } from './composables/useDeviceSupport';
 export * from './components';
 export * from './plugin';
 export * from './types';

diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json
@@ -1,29 +1,20 @@
 {
-	"extends": "../../tsconfig.json",
+	"extends": "@n8n/frontend-typescript-config",
 	"compilerOptions": {
-		"rootDir": ".",
-		"outDir": "dist",
-		"target": "esnext",
-		"module": "esnext",
-		"importHelpers": true,
-		"allowJs": true,
-		"incremental": false,
-		"allowSyntheticDefaultImports": true,
 		"baseUrl": ".",
-		"types": ["vitest/globals"],
+		"rootDirs": [".", "../../frontend/@n8n/composables/src"],
+		"outDir": "dist",
+		"types": ["vite/client", "vitest/globals"],
 		"typeRoots": [
 			"./node_modules/@testing-library",
 			"./node_modules/@types",
 			"../../node_modules",
 			"../../node_modules/@types"
 		],
 		"paths": {
-			"n8n-design-system/*": ["./src/*"]
-		},
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
-		// TODO: remove all options below this line
-		"noImplicitAny": false,
-		"noImplicitReturns": false
+			"n8n-design-system*": ["./src*"],
+			"@n8n/composables*": ["../frontend/@n8n/composables/src*"]
+		}
 	},
 	"include": ["src/**/*.ts", "src/**/*.vue"]
 }
diff --git a/packages/design-system/vite.config.mts b/packages/design-system/vite.config.mts
@@ -1,35 +1,12 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig, mergeConfig } from 'vite';
-import { type UserConfig } from 'vitest';
-import { defineConfig as defineVitestConfig } from 'vitest/config';
 import components from 'unplugin-vue-components/vite';
 import icons from 'unplugin-icons/vite';
 import iconsResolver from 'unplugin-icons/resolver';
+import { vitestConfig } from '@n8n/frontend-vitest-config';
 
-export const vitestConfig = defineVitestConfig({
-	test: {
-		silent: true,
-		globals: true,
-		environment: 'jsdom',
-		setupFiles: ['./src/__tests__/setup.ts'],
-		...(process.env.COVERAGE_ENABLED === 'true'
-			? {
-					coverage: {
-						enabled: true,
-						provider: 'v8',
-						reporter: process.env.CI === 'true' ? 'cobertura' : 'text-summary',
-						all: true,
-					},
-				}
-			: {}),
-		css: {
-			modules: {
-				classNameStrategy: 'non-scoped',
-			},
-		},
-	},
-}) as UserConfig;
+const frontendDir = resolve(__dirname, '..', 'frontend');
 
 export default mergeConfig(
 	defineConfig({
@@ -53,12 +30,13 @@ export default mergeConfig(
 			alias: {
 				'@': resolve(__dirname, 'src'),
 				'n8n-design-system': resolve(__dirname, 'src'),
+				'@n8n/composables(.*)': resolve(frontendDir, '@n8n', 'composables', 'src$1'),
 				lodash: 'lodash-es',
 			},
 		},
 		build: {
 			lib: {
-				entry: resolve(__dirname, 'src', 'main.ts'),
+				entry: resolve(__dirname, 'src', 'index.ts'),
 				name: 'N8nDesignSystem',
 				fileName: (format) => `n8n-design-system.${format}.js`,
 			},

diff --git a/packages/editor-ui/.eslintrc.js b/packages/editor-ui/.eslintrc.js
@@ -1,13 +1,9 @@
-const sharedOptions = require('@n8n_io/eslint-config/shared');
+const { createFrontendEslintConfig } = require('@n8n/frontend-eslint-config');
 
 /**
  * @type {import('@types/eslint').ESLint.ConfigData}
  */
-module.exports = {
-	extends: ['@n8n_io/eslint-config/frontend'],
-
-	...sharedOptions(__dirname, 'frontend'),
-
+module.exports = createFrontendEslintConfig(__dirname, {
 	rules: {
 		'n8n-local-rules/dangerously-use-html-string-missing': 'error',
 
@@ -41,4 +37,4 @@ module.exports = {
 		'@typescript-eslint/no-redundant-type-constituents': 'warn',
 		'@typescript-eslint/no-unsafe-enum-comparison': 'warn',
 	},
-};
+});
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
@@ -39,6 +39,7 @@
     "@n8n/chat": "workspace:*",
     "@n8n/codemirror-lang": "workspace:*",
     "@n8n/codemirror-lang-sql": "^1.0.2",
+    "@n8n/composables": "workspace:*",
     "@n8n/permissions": "workspace:*",
     "@replit/codemirror-indentation-markers": "^6.5.3",
     "@sentry/vue": "catalog:frontend",
@@ -92,6 +93,9 @@
     "xss": "catalog:"
   },
   "devDependencies": {
+    "@n8n/frontend-eslint-config": "workspace:*",
+    "@n8n/frontend-vitest-config": "workspace:*",
+    "@n8n/frontend-typescript-config": "workspace:*",
     "@faker-js/faker": "^8.0.2",
     "@iconify/json": "^2.2.228",
     "@pinia/testing": "^0.1.6",

diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue
@@ -3,7 +3,7 @@ import { onBeforeMount, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useCanvasStore } from '@/stores/canvas.store';
 import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useI18n } from '@/composables/useI18n';
 
 const canvasStore = useCanvasStore();

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
@@ -46,7 +46,8 @@ import { getTriggerNodeServiceName } from '@/utils/nodeTypesUtils';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 import { get } from 'lodash-es';
-import { N8nIconButton, useDeviceSupport } from 'n8n-design-system';
+import { N8nIconButton } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 
 type Props = {
 	name: string;

diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -28,7 +28,7 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useMessage } from '@/composables/useMessage';
 import { useExternalHooks } from '@/composables/useExternalHooks';

diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
@@ -12,7 +12,7 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useContextMenu } from '@/composables/useContextMenu';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { GRID_SIZE } from '@/utils/nodeViewUtils';
 import { useToast } from '@/composables/useToast';
 import { assert } from '@/utils/assert';

diff --git a/packages/editor-ui/src/components/canvas/Canvas.test.ts b/packages/editor-ui/src/components/canvas/Canvas.test.ts
@@ -6,7 +6,7 @@ import { createPinia, setActivePinia } from 'pinia';
 import type { CanvasConnection, CanvasNode } from '@/types';
 import { createCanvasConnection, createCanvasNodeElement } from '@/__tests__/data';
 import { NodeConnectionType } from 'n8n-workflow';
-import type { useDeviceSupport } from 'n8n-design-system';
+import type { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 
 const matchMedia = global.window.matchMedia;
 // @ts-expect-error Initialize window object

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -19,7 +19,8 @@ import Node from './elements/nodes/CanvasNode.vue';
 import Edge from './elements/edges/CanvasEdge.vue';
 import { computed, onMounted, onUnmounted, provide, ref, toRef, useCssModule, watch } from 'vue';
 import type { EventBus } from 'n8n-design-system';
-import { createEventBus, useDeviceSupport } from 'n8n-design-system';
+import { createEventBus } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu';
 import { useKeybindings } from '@/composables/useKeybindings';
 import ContextMenu from '@/components/ContextMenu/ContextMenu.vue';

diff --git a/packages/editor-ui/src/composables/useCanvasMouseSelect.ts b/packages/editor-ui/src/composables/useCanvasMouseSelect.ts
@@ -1,6 +1,6 @@
 import type { INodeUi, XYPosition } from '@/Interface';
 
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { getMousePosition, getRelativePosition } from '@/utils/nodeViewUtils';

diff --git a/packages/editor-ui/src/composables/useCanvasPanning.ts b/packages/editor-ui/src/composables/useCanvasPanning.ts
@@ -3,7 +3,7 @@ import { ref, unref } from 'vue';
 
 import { getMousePosition } from '@/utils/nodeViewUtils';
 import { useUIStore } from '@/stores/ui.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { MOUSE_EVENT_BUTTON, MOUSE_EVENT_BUTTONS } from '@/constants';
 
 /**

diff --git a/packages/editor-ui/src/composables/useDebugInfo.test.ts b/packages/editor-ui/src/composables/useDebugInfo.test.ts
@@ -49,7 +49,7 @@ vi.mock('@/stores/settings.store', () => ({
 	useSettingsStore,
 }));
 
-vi.mock('n8n-design-system', () => ({
+vi.mock('@n8n/composables/useDeviceSupport', () => ({
 	useDeviceSupport: () => ({
 		isTouchDevice: false,
 		userAgent: 'Mozilla/5.0',

diff --git a/packages/editor-ui/src/composables/useDebugInfo.ts b/packages/editor-ui/src/composables/useDebugInfo.ts
@@ -1,6 +1,6 @@
 import { useRootStore } from '@/stores/root.store';
 import { useSettingsStore } from '@/stores/settings.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { WorkflowSettings } from 'n8n-workflow';
 
 type DebugInfo = {

diff --git a/packages/editor-ui/src/composables/useHistoryHelper.ts b/packages/editor-ui/src/composables/useHistoryHelper.ts
@@ -6,7 +6,7 @@ import { useHistoryStore } from '@/stores/history.store';
 import { useUIStore } from '@/stores/ui.store';
 
 import { onMounted, onUnmounted, nextTick } from 'vue';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { getNodeViewTab } from '@/utils/canvasUtils';
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 import { useTelemetry } from './useTelemetry';

diff --git a/packages/editor-ui/src/composables/useKeybindings.ts b/packages/editor-ui/src/composables/useKeybindings.ts
@@ -1,5 +1,5 @@
 import { useActiveElement, useEventListener } from '@vueuse/core';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { MaybeRef, Ref } from 'vue';
 import { computed, unref } from 'vue';
 

diff --git a/packages/editor-ui/src/composables/useNodeBase.ts b/packages/editor-ui/src/composables/useNodeBase.ts
@@ -22,7 +22,7 @@ import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
 import type { Endpoint, EndpointOptions } from '@jsplumb/core';
 import * as NodeViewUtils from '@/utils/nodeViewUtils';
 import type { EndpointSpec } from '@jsplumb/common';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import type { N8nEndpointLabelLength } from '@/plugins/jsplumb/N8nPlusEndpointType';
 import { isValidNodeConnectionType } from '@/utils/typeGuards';
 import { useI18n } from '@/composables/useI18n';

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
@@ -166,7 +166,7 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useClipboard } from '@/composables/useClipboard';
 import { usePinnedData } from '@/composables/usePinnedData';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
-import { useDeviceSupport } from 'n8n-design-system';
+import { useDeviceSupport } from '@n8n/composables/useDeviceSupport';
 import { useDebounce } from '@/composables/useDebounce';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { useCanvasPanning } from '@/composables/useCanvasPanning';

diff --git a/packages/editor-ui/tsconfig.json b/packages/editor-ui/tsconfig.json
@@ -1,29 +1,26 @@
 {
-	"extends": "../../tsconfig.json",
+	"extends": "@n8n/frontend-typescript-config",
 	"compilerOptions": {
-		"rootDirs": [".", "../design-system/src", "../@n8n/chat/src"],
-		"outDir": "dist",
-		"target": "esnext",
-		"module": "esnext",
-		"allowJs": true,
-		"importHelpers": true,
-		"incremental": false,
-		"allowSyntheticDefaultImports": true,
-		"resolveJsonModule": true,
 		"baseUrl": ".",
+		"rootDirs": [
+			".",
+			"../../frontend/@n8n/composables/src",
+			"../design-system/src",
+			"../@n8n/chat/src"
+		],
+		"outDir": "dist",
 		"types": [
 			"vitest/globals",
 			"unplugin-icons/types/vue",
 			"../design-system/src/shims-modules.d.ts"
 		],
 		"paths": {
 			"@/*": ["./src/*"],
-			"n8n-design-system": ["../design-system/src/main.ts"],
-			"n8n-design-system/*": ["../design-system/src/*"],
+			"n8n-design-system*": ["../design-system/src*"],
+			"@n8n/composables*": ["../frontend/@n8n/composables/src*"],
 			"@n8n/chat/*": ["../@n8n/chat/src/*"],
 			"@n8n/api-types*": ["../@n8n/api-types/src*"]
 		},
-		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 		// TODO: remove all options below this line
 		"useUnknownInCatchVariables": false
 	},