refactor(editor): Fix typecheck for design-system and chat packages (no-changelog) (#9599)

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];

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;

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;
 

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;

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 = [

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();

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',

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 = () => {

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>

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 {

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);

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 {

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' });

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 {

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;

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;
 

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';
 

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;
 

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,
 	});

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);

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';
 
 /**

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', () => {

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;

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>;

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;

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();

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);

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;

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({

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;

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';

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', () => {

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',

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(() => {

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';

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',

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;

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 = {

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

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/*"]
 		},