diff --git a/packages/design-system/.storybook/main.js b/packages/design-system/.storybook/main.js
index f11d0b2cd90f0..3e512d7a6d1ee 100644
--- a/packages/design-system/.storybook/main.js
+++ b/packages/design-system/.storybook/main.js
@@ -4,7 +4,7 @@ const path = require('path');
  * @type {import('@storybook/core-common').StorybookConfig}
  */
 module.exports = {
-	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.ts'],
+	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.{ts,js}'],
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts b/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
index 176121f3b1b20..f3f3c03a516e3 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
+++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts
@@ -1,5 +1,6 @@
 import N8nActionToggle from './ActionToggle.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/ActionToggle',
@@ -23,7 +24,7 @@ const methods = {
 	onAction: action('action'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nActionToggle,
diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.stories.ts b/packages/design-system/src/components/N8nAvatar/Avatar.stories.ts
index a1d22012758e2..b690009016421 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.stories.ts
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nAvatar from './Avatar.vue';
 
 export default {
@@ -11,7 +12,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nAvatar,
diff --git a/packages/design-system/src/components/N8nBadge/Badge.stories.ts b/packages/design-system/src/components/N8nBadge/Badge.stories.ts
index 6d0a65a556688..ac4d178eda5da 100644
--- a/packages/design-system/src/components/N8nBadge/Badge.stories.ts
+++ b/packages/design-system/src/components/N8nBadge/Badge.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nBadge from './Badge.vue';
 
 export default {
@@ -15,7 +16,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nBadge,
diff --git a/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts b/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
index f9a8f8a842382..bbcc750712199 100644
--- a/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
+++ b/packages/design-system/src/components/N8nBlockUi/BlockUi.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nBlockUi from './BlockUi.vue';
 
 export default {
@@ -5,7 +6,7 @@ export default {
 	component: N8nBlockUi,
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nBlockUi,
diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts b/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts
index a073bd5c9147f..44a45077bdcd1 100644
--- a/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts
+++ b/packages/design-system/src/components/N8nFormBox/FormBox.stories.ts
@@ -1,5 +1,6 @@
 import N8nFormBox from './FormBox.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/FormBox',
@@ -15,7 +16,7 @@ const methods = {
 	onInput: action('input'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nFormBox,
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.stories.ts b/packages/design-system/src/components/N8nFormInput/FormInput.stories.ts
index e524d60b5ffbb..1542944794c1f 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.stories.ts
+++ b/packages/design-system/src/components/N8nFormInput/FormInput.stories.ts
@@ -1,5 +1,6 @@
 import N8nFormInput from './FormInput.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/FormInput',
@@ -13,7 +14,7 @@ const methods = {
 	onChange: action('change'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nFormInput,
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts b/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
index c073577a4c6c5..09f59bf2b78e0 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
+++ b/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.ts
@@ -1,5 +1,6 @@
 import N8nFormInputs from './FormInputs.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/FormInputs',
@@ -15,7 +16,7 @@ const methods = {
 	onSubmit: action('submit'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nFormInputs,
diff --git a/packages/design-system/src/components/N8nHeading/Heading.stories.ts b/packages/design-system/src/components/N8nHeading/Heading.stories.ts
index 055a48c37021a..c581f3c7901b8 100644
--- a/packages/design-system/src/components/N8nHeading/Heading.stories.ts
+++ b/packages/design-system/src/components/N8nHeading/Heading.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nHeading from './Heading.vue';
 
 export default {
@@ -19,7 +20,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nHeading,
diff --git a/packages/design-system/src/components/N8nIcon/Icon.stories.ts b/packages/design-system/src/components/N8nIcon/Icon.stories.ts
index 6d8c5c2754e22..6d71ea5a00c2d 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.stories.ts
+++ b/packages/design-system/src/components/N8nIcon/Icon.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nIcon from './Icon.vue';
 
 export default {
@@ -21,7 +22,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nIcon,
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts b/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
index 828d22b1136a1..8eb6539865391 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.stories.ts
@@ -1,5 +1,6 @@
 import N8nInputLabel from './InputLabel.vue';
 import N8nInput from '../N8nInput';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/Input Label',
@@ -10,7 +11,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nInputLabel,
diff --git a/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts b/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
index fae34a57835a8..78ce48e77d9f5 100644
--- a/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
+++ b/packages/design-system/src/components/N8nInputNumber/InputNumber.stories.ts
@@ -1,5 +1,6 @@
 import N8nInputNumber from './InputNumber.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/Input Number',
@@ -51,7 +52,7 @@ const methods = {
 	onInput: action('input'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nInputNumber,
@@ -71,7 +72,7 @@ Input.args = {
 	controls: false,
 };
 
-const ManyTemplate = (args, { argTypes }) => ({
+const ManyTemplate: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nInputNumber,
diff --git a/packages/design-system/src/components/N8nLink/Link.stories.ts b/packages/design-system/src/components/N8nLink/Link.stories.ts
index 2224190d1f1c0..6daeb93d64ac4 100644
--- a/packages/design-system/src/components/N8nLink/Link.stories.ts
+++ b/packages/design-system/src/components/N8nLink/Link.stories.ts
@@ -1,5 +1,6 @@
 import N8nLink from './Link.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/Link',
@@ -18,7 +19,7 @@ const methods = {
 	onClick: action('click'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nLink,
diff --git a/packages/design-system/src/components/N8nLoading/Loading.stories.ts b/packages/design-system/src/components/N8nLoading/Loading.stories.ts
index 2d08e3a409d1f..86f0bd1461104 100644
--- a/packages/design-system/src/components/N8nLoading/Loading.stories.ts
+++ b/packages/design-system/src/components/N8nLoading/Loading.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nLoading from './Loading.vue';
 
 export default {
@@ -29,7 +30,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nLoading,
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts b/packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts
index 93259c5b34337..b185505b6c21c 100644
--- a/packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nMarkdown from './Markdown.vue';
 
 export default {
@@ -29,7 +30,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nMarkdown,
diff --git a/packages/design-system/src/components/N8nPopover/Popover.stories.ts b/packages/design-system/src/components/N8nPopover/Popover.stories.ts
index f2709a2429d73..36bd7179c78f1 100644
--- a/packages/design-system/src/components/N8nPopover/Popover.stories.ts
+++ b/packages/design-system/src/components/N8nPopover/Popover.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nPopover from './Popover.vue';
 
 export default {
@@ -34,7 +35,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nPopover,
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
index 27efc67487b64..c711b0ce85a2b 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts
@@ -1,6 +1,7 @@
 import N8nRadioButtons from './RadioButtons.vue';
 
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/RadioButtons',
@@ -20,7 +21,7 @@ const methods = {
 	onInput: action('input'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nRadioButtons,
diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js
similarity index 100%
rename from packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts
rename to packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.js
diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.stories.ts b/packages/design-system/src/components/N8nSpinner/Spinner.stories.ts
index 7e3acff6152b7..0a51e8ec4ce14 100644
--- a/packages/design-system/src/components/N8nSpinner/Spinner.stories.ts
+++ b/packages/design-system/src/components/N8nSpinner/Spinner.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nSpinner from './Spinner.vue';
 
 export default {
@@ -19,7 +20,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nSpinner,
diff --git a/packages/design-system/src/components/N8nSticky/Sticky.stories.ts b/packages/design-system/src/components/N8nSticky/Sticky.stories.ts
index c41339456af9d..d453e5e6a8dfd 100644
--- a/packages/design-system/src/components/N8nSticky/Sticky.stories.ts
+++ b/packages/design-system/src/components/N8nSticky/Sticky.stories.ts
@@ -1,4 +1,5 @@
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 import N8nSticky from './Sticky.vue';
 
 export default {
@@ -45,7 +46,7 @@ const methods = {
 	onResizeStart: action('resizestart'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nSticky,
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.stories.ts b/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
index b8cc4f0f2bdd1..2cb7a55e4f128 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
+++ b/packages/design-system/src/components/N8nTabs/Tabs.stories.ts
@@ -1,6 +1,7 @@
 import N8nTabs from './Tabs.vue';
 
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/Tabs',
@@ -15,7 +16,7 @@ const methods = {
 	onInput: action('input'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nTabs,
diff --git a/packages/design-system/src/components/N8nTag/Tag.stories.ts b/packages/design-system/src/components/N8nTag/Tag.stories.ts
index 3f3c9490ce4d5..3ce2fe65a8596 100644
--- a/packages/design-system/src/components/N8nTag/Tag.stories.ts
+++ b/packages/design-system/src/components/N8nTag/Tag.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nTag from './Tag.vue';
 
 export default {
@@ -12,7 +13,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nTag,
diff --git a/packages/design-system/src/components/N8nTags/Tags.stories.ts b/packages/design-system/src/components/N8nTags/Tags.stories.ts
index 0fa9b3af45328..a4d751cf45bd5 100644
--- a/packages/design-system/src/components/N8nTags/Tags.stories.ts
+++ b/packages/design-system/src/components/N8nTags/Tags.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nTags from './Tags.vue';
 
 export default {
@@ -6,7 +7,7 @@ export default {
 	argTypes: {},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nTags,
diff --git a/packages/design-system/src/components/N8nText/Text.stories.ts b/packages/design-system/src/components/N8nText/Text.stories.ts
index 49d12dd7074cc..dd0313f3b1bc8 100644
--- a/packages/design-system/src/components/N8nText/Text.stories.ts
+++ b/packages/design-system/src/components/N8nText/Text.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nText from './Text.vue';
 
 export default {
@@ -27,7 +28,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nText,
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts b/packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts
index 60c2a410e4d0e..337d50ebb1e36 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nTooltip from './Tooltip.vue';
 
 export default {
@@ -34,7 +35,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nTooltip,
diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts b/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
index dd521b000a2e1..29247db8f0a37 100644
--- a/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
+++ b/packages/design-system/src/components/N8nUserInfo/UserInfo.stories.ts
@@ -1,3 +1,4 @@
+import type { StoryFn } from '@storybook/vue';
 import N8nUserInfo from './UserInfo.vue';
 
 export default {
@@ -8,7 +9,7 @@ export default {
 	},
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nUserInfo,
diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts b/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
index 875fe2df42fc0..dfc574dcabacd 100644
--- a/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
+++ b/packages/design-system/src/components/N8nUserSelect/UserSelect.stories.ts
@@ -1,5 +1,6 @@
 import N8nUserSelect from './UserSelect.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/UserSelect',
@@ -16,7 +17,7 @@ const methods = {
 	onFocus: action('focus'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nUserSelect,
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts b/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
index 63a9415275b07..f3e9e65d751b2 100644
--- a/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
+++ b/packages/design-system/src/components/N8nUsersList/UsersList.stories.ts
@@ -1,5 +1,6 @@
 import N8nUsersList from './UsersList.vue';
 import { action } from '@storybook/addon-actions';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Modules/UsersList',
@@ -15,7 +16,7 @@ const methods = {
 	onDelete: action('delete'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: {
 		N8nUsersList,