fix: Lint typescript stories (no-changelog) (#4723)

* fix: Lint typescript stories (no-changelog)

* import StoryFn as type

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

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,

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,