From 1a982d51b366264b1b6aaf46a793bc3e6f1d2aa5 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Mon, 3 Jun 2024 16:04:21 +0300
Subject: [PATCH] refactor(editor): Fix typecheck for design-system and chat
 packages (no-changelog) (#9599)

---
 packages/design-system/src/__tests__/setup.ts  |  2 +-
 .../src/components/N8nActionBox/ActionBox.vue  |  2 +-
 .../N8nActionDropdown/ActionDropdown.vue       |  2 +-
 .../N8nActionToggle/ActionToggle.vue           |  4 ++--
 .../src/components/N8nBadge/Badge.vue          |  2 +-
 .../src/components/N8nButton/Button.vue        |  2 +-
 .../src/components/N8nCallout/Callout.vue      |  4 ++--
 .../src/components/N8nCheckbox/Checkbox.vue    |  7 +++++--
 .../components/N8nColorPicker/ColorPicker.vue  | 12 ++++++------
 .../src/components/N8nFormBox/FormBox.vue      |  2 +-
 .../components/N8nFormInputs/FormInputs.vue    |  2 +-
 .../src/components/N8nIcon/Icon.vue            |  2 +-
 .../components/N8nIconButton/IconButton.vue    |  2 +-
 .../N8nInfoAccordion/InfoAccordion.vue         |  2 +-
 .../src/components/N8nInput/Input.vue          |  4 ++--
 .../components/N8nInputLabel/InputLabel.vue    |  2 +-
 .../components/N8nInputNumber/InputNumber.vue  |  2 +-
 .../src/components/N8nLink/Link.vue            |  2 +-
 .../src/components/N8nMarkdown/Markdown.vue    |  5 ++++-
 .../src/components/N8nMenu/Menu.vue            |  4 ++--
 .../src/components/N8nMenuItem/routerUtil.ts   |  2 +-
 .../N8nNotice/__tests__/Notice.spec.ts         |  2 +-
 .../N8nResizeWrapper/ResizeWrapper.vue         |  6 +++---
 .../src/components/N8nSelect/Select.vue        |  2 +-
 .../src/components/N8nSpinner/Spinner.vue      |  2 +-
 .../src/components/N8nSticky/Sticky.vue        | 12 ++++++------
 .../src/components/N8nTabs/Tabs.vue            |  2 +-
 .../src/components/N8nText/Text.vue            |  2 +-
 .../src/components/N8nTooltip/Tooltip.vue      |  2 +-
 .../src/components/N8nTree/Tree.vue            | 18 +++++++++++++++---
 .../src/components/N8nUserStack/UserStack.vue  |  2 +-
 .../N8nUserStack/__tests__/UserStack.spec.ts   |  2 +-
 .../N8nUsersList/UsersList.stories.ts          |  2 +-
 .../src/composables/useDeviceSupport.test.ts   |  2 +-
 packages/design-system/src/locale/index.ts     |  2 +-
 packages/design-system/src/locale/lang/en.ts   |  2 +-
 .../design-system/src/types/action-dropdown.ts |  2 +-
 .../src/utils/__tests__/valueByPath.spec.ts    |  2 +-
 packages/design-system/tsconfig.json           |  2 +-
 packages/editor-ui/tsconfig.json               |  7 +++++--
 40 files changed, 81 insertions(+), 60 deletions(-)

diff --git a/packages/design-system/src/__tests__/setup.ts b/packages/design-system/src/__tests__/setup.ts
index 1734bac34f..9ebe505648 100644
--- a/packages/design-system/src/__tests__/setup.ts
+++ b/packages/design-system/src/__tests__/setup.ts
@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
 import { config } from '@vue/test-utils';
-import { N8nPlugin } from '@/plugin';
+import { N8nPlugin } from 'n8n-design-system/plugin';
 
 config.global.plugins = [N8nPlugin];
diff --git a/packages/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
index 575e35ffe4..916e888860 100644
--- a/packages/design-system/src/components/N8nActionBox/ActionBox.vue
+++ b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
@@ -40,7 +40,7 @@ import N8nButton from '../N8nButton';
 import N8nHeading from '../N8nHeading';
 import N8nText from '../N8nText';
 import N8nCallout, { type CalloutTheme } from '../N8nCallout';
-import type { ButtonType } from '@/types/button';
+import type { ButtonType } from 'n8n-design-system/types/button';
 
 interface ActionBoxProps {
 	emoji: string;
diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 2ec50e72bc..1159ba52b9 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -62,7 +62,7 @@ import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'elem
 import N8nIcon from '../N8nIcon';
 import { N8nKeyboardShortcut } from '../N8nKeyboardShortcut';
 import type { ActionDropdownItem } from '../../types';
-import type { IconSize } from '@/types/icon';
+import type { IconSize } from 'n8n-design-system/types/icon';
 
 const TRIGGER = ['click', 'hover'] as const;
 
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
index b1e5fb215b..331ee25947 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -43,9 +43,9 @@
 
 <script lang="ts" setup>
 import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
-import type { UserAction } from '@/types';
+import type { UserAction } from 'n8n-design-system/types';
 import N8nIcon from '../N8nIcon';
-import type { IconOrientation, IconSize } from '@/types/icon';
+import type { IconOrientation, IconSize } from 'n8n-design-system/types/icon';
 
 const SIZE = ['mini', 'small', 'medium'] as const;
 const THEME = ['default', 'dark'] as const;
diff --git a/packages/design-system/src/components/N8nBadge/Badge.vue b/packages/design-system/src/components/N8nBadge/Badge.vue
index c2d2c68c48..c523ed15a6 100644
--- a/packages/design-system/src/components/N8nBadge/Badge.vue
+++ b/packages/design-system/src/components/N8nBadge/Badge.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { TextSize } from '@/types/text';
+import type { TextSize } from 'n8n-design-system/types/text';
 import N8nText from '../N8nText';
 
 const THEME = [
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index 5c6800e6e0..f21313febc 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -26,7 +26,7 @@
 import { useCssModule, computed, useAttrs, watchEffect } from 'vue';
 import N8nIcon from '../N8nIcon';
 import N8nSpinner from '../N8nSpinner';
-import type { ButtonProps } from '@/types/button';
+import type { ButtonProps } from 'n8n-design-system/types/button';
 
 const $style = useCssModule();
 const $attrs = useAttrs();
diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue
index 453555cf99..9a8e17ddf6 100644
--- a/packages/design-system/src/components/N8nCallout/Callout.vue
+++ b/packages/design-system/src/components/N8nCallout/Callout.vue
@@ -19,12 +19,12 @@
 import { computed, useCssModule } from 'vue';
 import N8nText from '../N8nText';
 import N8nIcon from '../N8nIcon';
-import type { IconSize } from '@/types/icon';
+import type { IconSize } from 'n8n-design-system/types/icon';
 
 const THEMES = ['info', 'success', 'secondary', 'warning', 'danger', 'custom'] as const;
 export type CalloutTheme = (typeof THEMES)[number];
 
-const CALLOUT_DEFAULT_ICONS = {
+const CALLOUT_DEFAULT_ICONS: Record<string, string> = {
 	info: 'info-circle',
 	success: 'check-circle',
 	warning: 'exclamation-triangle',
diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
index ce9c3b8e69..b0af416f42 100644
--- a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
@@ -23,6 +23,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { ElCheckbox } from 'element-plus';
+import type { CheckboxValueType } from 'element-plus';
 import N8nInputLabel from '../N8nInputLabel';
 
 const LABEL_SIZE = ['small', 'medium'] as const;
@@ -44,8 +45,10 @@ withDefaults(defineProps<CheckboxProps>(), {
 	labelSize: 'medium',
 });
 
-const $emit = defineEmits(['update:modelValue']);
-const onUpdateModelValue = (value: boolean) => $emit('update:modelValue', value);
+const $emit = defineEmits<{
+	(event: 'update:modelValue', value: CheckboxValueType): void;
+}>();
+const onUpdateModelValue = (value: CheckboxValueType) => $emit('update:modelValue', value);
 
 const checkbox = ref<InstanceType<typeof ElCheckbox>>();
 const onLabelClick = () => {
diff --git a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
index f480dc2644..3997308c86 100644
--- a/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
+++ b/packages/design-system/src/components/N8nColorPicker/ColorPicker.vue
@@ -36,12 +36,12 @@ const colorPickerProps = computed(() => {
 });
 
 const emit = defineEmits<{
-	(event: 'update:modelValue', value: string): void;
-	(event: 'change', value: string): void;
-	(event: 'active-change', value: string): void;
+	(event: 'update:modelValue', value: string | null): void;
+	(event: 'change', value: string | null): void;
+	(event: 'active-change', value: string | null): void;
 }>();
 
-const onChange = (value: string) => {
+const onChange = (value: string | null) => {
 	emit('change', value);
 };
 
@@ -49,11 +49,11 @@ const onInput = (value: string) => {
 	color.value = value;
 };
 
-const onActiveChange = (value: string) => {
+const onActiveChange = (value: string | null) => {
 	emit('active-change', value);
 };
 
-const onColorSelect = (value: string) => {
+const onColorSelect = (value: string | null) => {
 	emit('update:modelValue', value);
 };
 </script>
diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.vue b/packages/design-system/src/components/N8nFormBox/FormBox.vue
index 33ecb2d7a7..2c9d875dd1 100644
--- a/packages/design-system/src/components/N8nFormBox/FormBox.vue
+++ b/packages/design-system/src/components/N8nFormBox/FormBox.vue
@@ -43,7 +43,7 @@ import N8nFormInputs from '../N8nFormInputs';
 import N8nHeading from '../N8nHeading';
 import N8nLink from '../N8nLink';
 import N8nButton from '../N8nButton';
-import type { IFormInput } from '@/types';
+import type { IFormInput } from 'n8n-design-system/types';
 import { createEventBus } from '../../utils';
 
 interface FormBoxProps {
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
index 293b78e854..b49103493e 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
+++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.vue
@@ -126,7 +126,7 @@ export default defineComponent({
 		onUpdateModelValue(name: string, value: unknown) {
 			this.values = {
 				...this.values,
-				[name]: value,
+				[name]: value as Validatable,
 			};
 			this.$emit('update', { name, value });
 			this.$emit('update:modelValue', this.values);
diff --git a/packages/design-system/src/components/N8nIcon/Icon.vue b/packages/design-system/src/components/N8nIcon/Icon.vue
index 0caa880ba9..e4b431d4dc 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.vue
+++ b/packages/design-system/src/components/N8nIcon/Icon.vue
@@ -7,7 +7,7 @@
 <script lang="ts" setup>
 import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import type { IconSize, IconColor } from '@/types/icon';
+import type { IconSize, IconColor } from 'n8n-design-system/types/icon';
 import N8nText from '../N8nText';
 
 interface IconProps {
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index 151a111b03..e70527e6c3 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { IconButtonProps } from '@/types/button';
+import type { IconButtonProps } from 'n8n-design-system/types/button';
 import N8nButton from '../N8nButton';
 
 defineOptions({ name: 'N8nIconButton' });
diff --git a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
index 42a437e73a..b2a871b947 100644
--- a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
+++ b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
@@ -42,7 +42,7 @@
 import { onMounted, ref } from 'vue';
 import N8nText from '../N8nText';
 import N8nIcon from '../N8nIcon';
-import type { IconColor } from '@/types/icon';
+import type { IconColor } from 'n8n-design-system/types/icon';
 import { createEventBus, type EventBus } from '../../utils';
 
 interface IAccordionItem {
diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index 5de8253d22..7b600709ba 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -34,8 +34,8 @@
 import { computed, ref } from 'vue';
 import { ElInput } from 'element-plus';
 import { uid } from '../../utils';
-import type { InputSize, InputType } from '@/types/input';
-import type { ElementPlusSizePropType, InputAutocompletePropType } from '@/types';
+import type { InputSize, InputType } from 'n8n-design-system/types/input';
+import type { ElementPlusSizePropType, InputAutocompletePropType } from 'n8n-design-system/types';
 
 interface InputProps {
 	modelValue?: string | number;
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index a2b397aa0c..795a684650 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -49,7 +49,7 @@
 import N8nText from '../N8nText';
 import N8nIcon from '../N8nIcon';
 import N8nTooltip from '../N8nTooltip';
-import type { TextColor } from '@/types/text';
+import type { TextColor } from 'n8n-design-system/types/text';
 
 const SIZE = ['small', 'medium'] as const;
 
diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
index be4e4d4263..99c0399f8c 100644
--- a/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
+++ b/packages/design-system/src/components/N8nInputNumber/InputNumber.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ElementPlusSizePropType, InputSize } from '@/types';
+import type { ElementPlusSizePropType, InputSize } from 'n8n-design-system/types';
 import { ElInputNumber } from 'element-plus';
 import { computed } from 'vue';
 
diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue
index 1134291e45..891aef5e16 100644
--- a/packages/design-system/src/components/N8nLink/Link.vue
+++ b/packages/design-system/src/components/N8nLink/Link.vue
@@ -12,7 +12,7 @@
 import type { RouteLocationRaw } from 'vue-router';
 import N8nText from '../N8nText';
 import N8nRoute from '../N8nRoute';
-import type { TextSize } from '@/types/text';
+import type { TextSize } from 'n8n-design-system/types/text';
 
 const THEME = ['primary', 'danger', 'text', 'secondary'] as const;
 
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
index ff0ad5c09f..767dcae49e 100644
--- a/packages/design-system/src/components/N8nMarkdown/Markdown.vue
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -114,7 +114,7 @@ const htmlContent = computed(() => {
 	}
 	const html = md.render(escapeMarkdown(contentToRender));
 	const safeHtml = xss(html, {
-		onTagAttr: (tag, name, value) => {
+		onTagAttr(tag, name, value) {
 			if (tag === 'img' && name === 'src') {
 				if (value.match(fileIdRegex)) {
 					const id = value.split('fileId:')[1];
@@ -129,18 +129,21 @@ const htmlContent = computed(() => {
 				}
 			}
 			// Return nothing, means keep the default handling measure
+			return;
 		},
 		onTag(tag, code) {
 			if (tag === 'img' && code.includes('alt="workflow-screenshot"')) {
 				return '';
 			}
 			// return nothing, keep tag
+			return;
 		},
 		onIgnoreTag(tag, tagHTML) {
 			// Allow checkboxes
 			if (tag === 'input' && tagHTML.includes('type="checkbox"')) {
 				return tagHTML;
 			}
+			return;
 		},
 		whiteList: xssWhiteList,
 	});
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 96bc59668f..321259d80b 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -83,8 +83,8 @@ const props = withDefaults(defineProps<MenuProps>(), {
 const $route = useRoute();
 
 const $emit = defineEmits<{
-	(event: 'select', itemId: string);
-	(event: 'update:modelValue', itemId: string);
+	(event: 'select', itemId: string): void;
+	(event: 'update:modelValue', itemId: string): void;
 }>();
 
 const activeTab = ref(props.modelValue);
diff --git a/packages/design-system/src/components/N8nMenuItem/routerUtil.ts b/packages/design-system/src/components/N8nMenuItem/routerUtil.ts
index ec7482e089..a32df485fd 100644
--- a/packages/design-system/src/components/N8nMenuItem/routerUtil.ts
+++ b/packages/design-system/src/components/N8nMenuItem/routerUtil.ts
@@ -1,4 +1,4 @@
-import type { IMenuItem } from '@/types';
+import type { IMenuItem } from 'n8n-design-system/types';
 import type { RouteLocationNormalizedLoaded, RouteLocationRaw } from 'vue-router';
 
 /**
diff --git a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
index caf53c5ca5..84617dab51 100644
--- a/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
+++ b/packages/design-system/src/components/N8nNotice/__tests__/Notice.spec.ts
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue';
 import N8nNotice from '../Notice.vue';
-import { N8nText } from '@/components';
+import { N8nText } from 'n8n-design-system/components';
 
 describe('components', () => {
 	describe('N8nNotice', () => {
diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
index f4f74ec779..4cb155aa91 100644
--- a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
+++ b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
@@ -80,9 +80,9 @@ export interface ResizeData {
 }
 
 const $emit = defineEmits<{
-	(event: 'resizestart');
+	(event: 'resizestart'): void;
 	(event: 'resize', value: ResizeData): void;
-	(event: 'resizeend');
+	(event: 'resizeend'): void;
 }>();
 
 const enabledDirections = computed((): Direction[] => {
@@ -165,7 +165,7 @@ const resizerMove = (event: MouseEvent) => {
 		state.dir.value = targetResizer.dataset.dir.toLocaleLowerCase() as Direction;
 	}
 
-	document.body.style.cursor = directionsCursorMaps[state.dir.value];
+	document.body.style.cursor = directionsCursorMaps[state.dir.value as Direction];
 
 	state.x.value = event.pageX;
 	state.y.value = event.pageY;
diff --git a/packages/design-system/src/components/N8nSelect/Select.vue b/packages/design-system/src/components/N8nSelect/Select.vue
index 9c89206e9c..5e9d5e2318 100644
--- a/packages/design-system/src/components/N8nSelect/Select.vue
+++ b/packages/design-system/src/components/N8nSelect/Select.vue
@@ -31,7 +31,7 @@
 <script lang="ts">
 import { ElSelect } from 'element-plus';
 import { type PropType, defineComponent } from 'vue';
-import type { SelectSize } from '@/types';
+import type { SelectSize } from 'n8n-design-system/types';
 import { isEventBindingElementAttribute } from '../../utils';
 
 type InnerSelectRef = InstanceType<typeof ElSelect>;
diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.vue b/packages/design-system/src/components/N8nSpinner/Spinner.vue
index 6050add9f3..76ed2f7f39 100644
--- a/packages/design-system/src/components/N8nSpinner/Spinner.vue
+++ b/packages/design-system/src/components/N8nSpinner/Spinner.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { TextSize } from '@/types/text';
+import type { TextSize } from 'n8n-design-system/types/text';
 import N8nIcon from '../N8nIcon';
 
 const TYPE = ['dots', 'ring'] as const;
diff --git a/packages/design-system/src/components/N8nSticky/Sticky.vue b/packages/design-system/src/components/N8nSticky/Sticky.vue
index 173dc8a550..7e57612f52 100644
--- a/packages/design-system/src/components/N8nSticky/Sticky.vue
+++ b/packages/design-system/src/components/N8nSticky/Sticky.vue
@@ -94,12 +94,12 @@ const props = withDefaults(defineProps<StickyProps>(), {
 });
 
 const $emit = defineEmits<{
-	(event: 'edit', editing: boolean);
-	(event: 'update:modelValue', value: string);
-	(event: 'markdown-click', link: string, e: Event);
-	(event: 'resize', values: ResizeData);
-	(event: 'resizestart');
-	(event: 'resizeend');
+	(event: 'edit', editing: boolean): void;
+	(event: 'update:modelValue', value: string): void;
+	(event: 'markdown-click', link: string, e: Event): void;
+	(event: 'resize', values: ResizeData): void;
+	(event: 'resizestart'): void;
+	(event: 'resizeend'): void;
 }>();
 
 const { t } = useI18n();
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 433d05c06c..82a5825ed3 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -112,7 +112,7 @@ onUnmounted(() => {
 
 const $emit = defineEmits<{
 	(event: 'tooltipClick', tab: string, e: MouseEvent): void;
-	(event: 'update:modelValue', tab: string);
+	(event: 'update:modelValue', tab: string): void;
 }>();
 
 const handleTooltipClick = (tab: string, event: MouseEvent) => $emit('tooltipClick', tab, event);
diff --git a/packages/design-system/src/components/N8nText/Text.vue b/packages/design-system/src/components/N8nText/Text.vue
index 146ead18d9..d5624f9b4c 100644
--- a/packages/design-system/src/components/N8nText/Text.vue
+++ b/packages/design-system/src/components/N8nText/Text.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
-import type { TextSize, TextColor, TextAlign } from '@/types/text';
+import type { TextSize, TextColor, TextAlign } from 'n8n-design-system/types/text';
 
 interface TextProps {
 	bold?: boolean;
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index fa280f4d9f..6af93a92e9 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -24,7 +24,7 @@
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
 import { ElTooltip } from 'element-plus';
-import type { IN8nButton } from '@/types';
+import type { IN8nButton } from 'n8n-design-system/types';
 import N8nButton from '../N8nButton';
 
 export default defineComponent({
diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
index 9903d9b159..b588af3ae6 100644
--- a/packages/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/design-system/src/components/N8nTree/Tree.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="n8n-tree">
+	<div v-if="isObject(value)" class="n8n-tree">
 		<div v-for="(label, i) in Object.keys(value)" :key="i" :class="classes">
 			<div v-if="isSimple(value[label])" :class="$style.simple">
 				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
@@ -14,7 +14,7 @@
 				<n8n-tree
 					:path="getPath(label)"
 					:depth="depth + 1"
-					:value="value[label]"
+					:value="value[label] as Record<string, unknown>"
 					:node-class="nodeClass"
 				>
 					<template v-for="(_, name) in $slots" #[name]="data">
@@ -30,12 +30,20 @@
 import { computed, useCssModule } from 'vue';
 
 interface TreeProps {
-	value?: unknown;
+	value?: Record<string, unknown>;
 	path?: Array<string | number>;
 	depth?: number;
 	nodeClass?: string;
 }
 
+defineSlots<{
+	[key: string]: (props: {
+		label?: string;
+		path?: Array<string | number>;
+		value?: unknown;
+	}) => never;
+}>();
+
 defineOptions({ name: 'N8nTree' });
 const props = withDefaults(defineProps<TreeProps>(), {
 	value: () => ({}),
@@ -49,6 +57,10 @@ const classes = computed((): Record<string, boolean> => {
 	return { [props.nodeClass]: !!props.nodeClass, [$style.indent]: props.depth > 0 };
 });
 
+const isObject = (data: unknown): data is Record<string, unknown> => {
+	return typeof data === 'object' && data !== null;
+};
+
 const isSimple = (data: unknown): boolean => {
 	if (data === null || data === undefined) {
 		return true;
diff --git a/packages/design-system/src/components/N8nUserStack/UserStack.vue b/packages/design-system/src/components/N8nUserStack/UserStack.vue
index cffc641730..047239ade2 100644
--- a/packages/design-system/src/components/N8nUserStack/UserStack.vue
+++ b/packages/design-system/src/components/N8nUserStack/UserStack.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { IUser, UserStackGroups } from '@/types';
+import type { IUser, UserStackGroups } from 'n8n-design-system/types';
 import N8nAvatar from '../N8nAvatar';
 import N8nUserInfo from '../N8nUserInfo';
 import type { PropType } from 'vue';
diff --git a/packages/design-system/src/components/N8nUserStack/__tests__/UserStack.spec.ts b/packages/design-system/src/components/N8nUserStack/__tests__/UserStack.spec.ts
index ff3ac1b897..087dee0e0c 100644
--- a/packages/design-system/src/components/N8nUserStack/__tests__/UserStack.spec.ts
+++ b/packages/design-system/src/components/N8nUserStack/__tests__/UserStack.spec.ts
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/vue';
 import UserStack from '../UserStack.vue';
-import { N8nAvatar, N8nUserInfo } from '@/main';
+import { N8nAvatar, N8nUserInfo } from 'n8n-design-system/main';
 
 describe('UserStack', () => {
 	it('should render flat user list', () => {
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts b/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
index 0ee668266f..3c73a8ce67 100644
--- a/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
+++ b/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
@@ -1,7 +1,7 @@
 import N8nUsersList from './UsersList.vue';
 import { action } from '@storybook/addon-actions';
 import type { StoryFn } from '@storybook/vue3';
-import type { IUser } from '@/types';
+import type { IUser } from 'n8n-design-system/types';
 
 export default {
 	title: 'Modules/UsersList',
diff --git a/packages/design-system/src/composables/useDeviceSupport.test.ts b/packages/design-system/src/composables/useDeviceSupport.test.ts
index d6974cb9eb..767a751601 100644
--- a/packages/design-system/src/composables/useDeviceSupport.test.ts
+++ b/packages/design-system/src/composables/useDeviceSupport.test.ts
@@ -1,4 +1,4 @@
-import { useDeviceSupport } from '@/composables/useDeviceSupport';
+import { useDeviceSupport } from 'n8n-design-system/composables/useDeviceSupport';
 
 describe('useDeviceSupport()', () => {
 	beforeEach(() => {
diff --git a/packages/design-system/src/locale/index.ts b/packages/design-system/src/locale/index.ts
index 4688b6a5ba..2d830ea62b 100644
--- a/packages/design-system/src/locale/index.ts
+++ b/packages/design-system/src/locale/index.ts
@@ -1,6 +1,6 @@
 import defaultLang from '../locale/lang/en';
 import createFormatTemplate from './format';
-import type { N8nLocale, N8nLocaleTranslateFn } from '@/types';
+import type { N8nLocale, N8nLocaleTranslateFn } from 'n8n-design-system/types';
 
 // import { ElementLocale } from 'element-plus';
 // import ElementLang from 'element-plus/lib/locale/lang/en';
diff --git a/packages/design-system/src/locale/lang/en.ts b/packages/design-system/src/locale/lang/en.ts
index 78102ec5c2..5db6856b86 100644
--- a/packages/design-system/src/locale/lang/en.ts
+++ b/packages/design-system/src/locale/lang/en.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { N8nLocale } from '@/types';
+import type { N8nLocale } from 'n8n-design-system/types';
 
 export default {
 	'nds.auth.roles.owner': 'Owner',
diff --git a/packages/design-system/src/types/action-dropdown.ts b/packages/design-system/src/types/action-dropdown.ts
index 8caf6560f8..9ea96de909 100644
--- a/packages/design-system/src/types/action-dropdown.ts
+++ b/packages/design-system/src/types/action-dropdown.ts
@@ -1,4 +1,4 @@
-import type { KeyboardShortcut } from '@/types/keyboardshortcut';
+import type { KeyboardShortcut } from 'n8n-design-system/types/keyboardshortcut';
 
 export interface ActionDropdownItem {
 	id: string;
diff --git a/packages/design-system/src/utils/__tests__/valueByPath.spec.ts b/packages/design-system/src/utils/__tests__/valueByPath.spec.ts
index fc5bfea6ad..9ea56c11c3 100644
--- a/packages/design-system/src/utils/__tests__/valueByPath.spec.ts
+++ b/packages/design-system/src/utils/__tests__/valueByPath.spec.ts
@@ -1,4 +1,4 @@
-import { getValueByPath } from '@/utils';
+import { getValueByPath } from 'n8n-design-system/utils';
 
 describe('getValueByPath()', () => {
 	const object = {
diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json
index c963febbb8..afd462cb8f 100644
--- a/packages/design-system/tsconfig.json
+++ b/packages/design-system/tsconfig.json
@@ -13,7 +13,7 @@
 		"types": ["vitest/globals"],
 		"typeRoots": ["./node_modules/@testing-library", "./node_modules/@types", "../../node_modules", "../../node_modules/@types"],
 		"paths": {
-			"@/*": ["src/*"]
+			"n8n-design-system/*": ["./src/*"]
 		},
 		"lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 		// TODO: remove all options below this line
diff --git a/packages/editor-ui/tsconfig.json b/packages/editor-ui/tsconfig.json
index 5be734f88d..621157cd8a 100644
--- a/packages/editor-ui/tsconfig.json
+++ b/packages/editor-ui/tsconfig.json
@@ -13,13 +13,16 @@
 		"baseUrl": ".",
 		"types": [
 			"vitest/globals",
+			"unplugin-icons/types/vue",
 			"./src/shims.d.ts",
 			"./src/shims-vue.d.ts",
 			"./src/v3-infinite-loading.d.ts",
-      "../workflow/src/types.d.ts"
+			"../workflow/src/types.d.ts",
+			"../design-system/src/shims-markdown-it.d.ts"
 		],
 		"paths": {
-			"@/*": ["src/*"],
+			"@/*": ["./src/*"],
+			"n8n-design-system": ["../design-system/src/main.ts"],
 			"n8n-design-system/*": ["../design-system/src/*"],
 			"@n8n/chat/*": ["../@n8n/chat/src/*"]
 		},