feat: Upgrade storybook to 9.1.6 (no-changelog) (#19550)

packages/frontend/@n8n/design-system/.storybook/preview.ts

@@ -1,17 +1,17 @@
-import { setup } from '@storybook/vue3';
-import { withThemeByDataAttribute } from '@storybook/addon-themes';
-
-import './storybook.scss';
-// import '../src/css/tailwind/index.css';
-
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-
+import { sharedTags } from '@n8n/storybook/main';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
+import { setup } from '@storybook/vue3';
 import ElementPlus from 'element-plus';
+// @ts-expect-error no types
 import lang from 'element-plus/dist/locale/en.mjs';
 
 import { N8nPlugin } from '../src/plugin';
 
+import './storybook.scss';
+// import '../src/css/tailwind/index.css';
+
 setup((app) => {
 	library.add(fas);
 
@@ -19,7 +19,7 @@ setup((app) => {
 		locale: lang,
 	});
 
-	app.use(N8nPlugin);
+	app.use(N8nPlugin, {});
 });
 
 export const parameters = {
@@ -83,3 +83,5 @@ export const decorators = [
 		parentSelector: 'body',
 	}),
 ];
+
+export const tags = sharedTags;

packages/frontend/@n8n/design-system/.storybook/storybook.scss

@@ -1,9 +1,5 @@
 @use './fonts.scss';
-
-@use '../src/css/base.scss'; // @TODO CHECK IF NEEDED with (
-//	$font-path: 'element-ui/lib/theme-chalk/fonts'
-//);
-
+@use '../src/css/base.scss';
 @use '../src/css/reset.scss';
 @use '../src/css/index.scss';
 

packages/frontend/@n8n/design-system/eslint.config.mjs

@@ -1,3 +1,5 @@
+import storybook from 'eslint-plugin-storybook';
+
 import { defineConfig } from 'eslint/config';
 import { frontendConfig } from '@n8n/eslint-config/frontend';
 
@@ -49,4 +51,5 @@ export default defineConfig(
 			],
 		},
 	},
+	storybook.configs['flat/recommended'],
 );

packages/frontend/@n8n/design-system/src/components/AskAssistantAvatar/AssistantAvatar.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import AssistantAvatar from './AssistantAvatar.vue';
 

packages/frontend/@n8n/design-system/src/components/AskAssistantButton/AskAssistantButton.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import AskAssistantButton from './AskAssistantButton.vue';
 

packages/frontend/@n8n/design-system/src/components/AskAssistantChat/AskAssistantChat.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import AskAssistantChat from './AskAssistantChat.vue';
 import type { ChatUI } from '../../types/assistant';

packages/frontend/@n8n/design-system/src/components/AskAssistantIcon/AssistantIcon.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import AssistantIcon from './AssistantIcon.vue';
 

packages/frontend/@n8n/design-system/src/components/AskAssistantLoadingMessage/AssistantLoadingMessage.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import AssistantLoadingMessage from './AssistantLoadingMessage.vue';
 

packages/frontend/@n8n/design-system/src/components/AskAssistantLoadingMessage/DemoComponent.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import DemoComponent from './DemoComponent.vue';
 

packages/frontend/@n8n/design-system/src/components/AskAssistantText/AssistantText.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import AssistantText from './AssistantText.vue';
 

packages/frontend/@n8n/design-system/src/components/BetaTag/BetaTag.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import BetaTag from './BetaTag.vue';
 

packages/frontend/@n8n/design-system/src/components/BlinkingCursor/BlinkingCursor.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import BlinkingCursor from './BlinkingCursor.vue';
 

packages/frontend/@n8n/design-system/src/components/CodeDiff/CodeDiff.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import CodeDiff from './CodeDiff.vue';
 

packages/frontend/@n8n/design-system/src/components/InlineAskAssistantButton/InlineAskAssistantButton.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import InlineAskAssistantButton from './InlineAskAssistantButton.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nActionBox from './ActionBox.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nActionDropdown from './ActionDropdown.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nActionToggle from './ActionToggle.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nAlert from './Alert.vue';
 import N8nIcon from '../N8nIcon';

packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nAvatar from './Avatar.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nBadge from './Badge.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nBlockUi/BlockUi.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nBlockUi from './BlockUi.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import type { IUser, UserAction } from '@n8n/design-system/types';
 

packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nButton from './Button.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nCallout from './Callout.vue';
 import N8nLink from '../N8nLink';

packages/frontend/@n8n/design-system/src/components/N8nCard/Card.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nCard from './Card.vue';
 import N8nButton from '../N8nButton/Button.vue';

packages/frontend/@n8n/design-system/src/components/N8nCheckbox/Checkbox.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nCheckbox from './Checkbox.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nCircleLoader/CircleLoader.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nCircleLoader from './CircleLoader.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nColorPicker from './ColorPicker.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import { rows, columns } from './__tests__/data';
 import N8nDatatable from './Datatable.vue';

packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nExternalLink from './ExternalLink.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nFormBox from './FormBox.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nFormInput from './FormInput.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nFormInputs from './FormInputs.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nHeading from './Heading.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nIcon from './Icon.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nIconButton from './IconButton.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nIconPicker from './IconPicker.vue';
 import { type IconOrEmoji } from './types';

packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nInfoAccordion from './InfoAccordion.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nInfoTip from './InfoTip.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import InlineTextEdit from './InlineTextEdit.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nInput/Input.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nInput from './Input.vue';
 import N8nIcon from '../N8nIcon';

packages/frontend/@n8n/design-system/src/components/N8nInputLabel/InputLabel.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nInputLabel from './InputLabel.vue';
 import N8nInput from '../N8nInput';

packages/frontend/@n8n/design-system/src/components/N8nInputNumber/InputNumber.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nInputNumber from './InputNumber.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nKeyboardShortcut/KeyboardShortcut.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nKeyboardShorcut from './N8nKeyboardShortcut.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nLink/Link.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nLink from './Link.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nLoading/Loading.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nLoading from './Loading.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nMarkdown/Markdown.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nMarkdown from './Markdown.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nMenu/Menu.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nMenu from './Menu.vue';
 import N8nCallout from '../N8nCallout';

packages/frontend/@n8n/design-system/src/components/N8nMenuItem/MenuItem.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 import { ElMenu } from 'element-plus';
 
 import N8nMenuItem from '.';

packages/frontend/@n8n/design-system/src/components/N8nNavigationDropdown/NavigationDropdown.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import NavigationDropdown from './NavigationDropdown.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nNodeCreatorNode from './NodeCreatorNode.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nNodeIcon/NodeIcon.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nNodeIcon from './NodeIcon.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nNotice/Notice.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nNotice from './Notice.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nPagination/Pagination.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nPagination from './Pagination.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nPopover/Popover.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nPopover from './Popover.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nPopoverReka/N8nPopoverReka.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 import { ref } from 'vue';
 
 import N8nPopoverReka from './N8nPopoverReka.vue';

packages/frontend/@n8n/design-system/src/components/N8nPulse/Pulse.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nPulse from './Pulse.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nRadioButtons/RadioButtons.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nRadioButtons from './RadioButtons.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nRecycleScroller/RecycleScroller.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 import type { ComponentInstance } from 'vue';
 
 import N8nRecycleScroller from './RecycleScroller.vue';

packages/frontend/@n8n/design-system/src/components/N8nResizeWrapper/ResizeWrapper.stories.ts

@@ -1,5 +1,5 @@
-import { type ActionOptions, action } from '@storybook/addon-actions';
-import { type StoryFn } from '@storybook/vue3';
+import { type StoryFn } from '@storybook/vue3-vite';
+import { type ActionOptions, action } from 'storybook/actions';
 import { ref } from 'vue';
 
 import N8nResizeWrapper from './ResizeWrapper.vue';

packages/frontend/@n8n/design-system/src/components/N8nResizeableSticky/ResizeableSticky.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nResizeableSticky from './ResizeableSticky.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nScrollArea/N8nScrollArea.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nScrollArea from './N8nScrollArea.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nSelect/Select.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nSelect from './Select.vue';
 import N8nIcon from '../N8nIcon';

packages/frontend/@n8n/design-system/src/components/N8nSelectableList/SelectableList.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nSelectableList from './SelectableList.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nSpinner/Spinner.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nSpinner from './Spinner.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nSticky/Sticky.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nSticky from './Sticky.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nSuggestedActions/SuggestedActions.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 import { ref } from 'vue';
 
 import type { SuggestedActionsProps } from './SuggestedActions.vue';

packages/frontend/@n8n/design-system/src/components/N8nTabs/Tabs.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nTabs from './Tabs.vue';
 import type { TabOptions } from '../../types/tabs';

packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nTag from './Tag.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nTags from './Tags.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nText/Text.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nText from './Text.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nTooltip/Tooltip.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nTooltip from './Tooltip.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nTree/Tree.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nTree from './Tree.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nUserInfo/UserInfo.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import N8nUserInfo from './UserInfo.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nUserSelect/UserSelect.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import N8nUserSelect from './UserSelect.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nUserStack/UserStack.stories.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import UserStack from './UserStack.vue';
 

packages/frontend/@n8n/design-system/src/components/N8nUsersList/UsersList.stories.ts

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
+import { action } from 'storybook/actions';
 
 import type { IUser } from '@n8n/design-system/types';
 

packages/frontend/@n8n/design-system/src/components/TableHeaderControlsButton/TableHeaderControlsButton.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 import { ref } from 'vue';
 
 import TableHeaderControlsButton from './TableHeaderControlsButton.vue';

packages/frontend/@n8n/design-system/src/styleguide/border.stories.ts

@@ -1,4 +1,4 @@
-import { type StoryFn } from '@storybook/vue3';
+import { type StoryFn } from '@storybook/vue3-vite';
 
 import VariableTable from './VariableTable.vue';
 

packages/frontend/@n8n/design-system/src/styleguide/colors.stories.ts

@@ -1,4 +1,4 @@
-import { type StoryFn } from '@storybook/vue3';
+import { type StoryFn } from '@storybook/vue3-vite';
 
 import ColorCircles from './ColorCircles.vue';
 

packages/frontend/@n8n/design-system/src/styleguide/colorsprimitives.stories.ts

@@ -1,4 +1,4 @@
-import { type StoryFn } from '@storybook/vue3';
+import { type StoryFn } from '@storybook/vue3-vite';
 
 import ColorCircles from './ColorCircles.vue';
 

packages/frontend/@n8n/design-system/src/styleguide/fonts.stories.ts

@@ -1,4 +1,4 @@
-import { type StoryFn } from '@storybook/vue3';
+import { type StoryFn } from '@storybook/vue3-vite';
 
 import Sizes from './Sizes.vue';
 import VariableTable from './VariableTable.vue';

packages/frontend/@n8n/design-system/src/styleguide/spacing.stories.ts

@@ -1,4 +1,4 @@
-import { type StoryFn } from '@storybook/vue3';
+import { type StoryFn } from '@storybook/vue3-vite';
 
 import Sizes from './Sizes.vue';
 

packages/frontend/@n8n/design-system/src/styleguide/utilities/float.stories.ts

@@ -1,4 +1,4 @@
-import { type StoryFn } from '@storybook/vue3';
+import { type StoryFn } from '@storybook/vue3-vite';
 
 export default {
 	title: 'Utilities/Float',

packages/frontend/@n8n/design-system/src/styleguide/utilities/lists.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 export default {
 	title: 'Utilities/Lists',

packages/frontend/@n8n/design-system/src/styleguide/utilities/spacing.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn } from '@storybook/vue3';
+import type { StoryFn } from '@storybook/vue3-vite';
 
 import SpacingPreview from '../components/SpacingPreview.vue';
 

packages/frontend/@n8n/design-system/tsconfig.json

@@ -17,5 +17,5 @@
 			"@n8n/utils*": ["../../../@n8n/utils/src*"]
 		}
 	},
-	"include": ["src/**/*.ts", "src/**/*.vue"]
+	"include": ["src/**/*.ts", "src/**/*.vue", ".storybook/**/*.ts"]
 }

packages/frontend/@n8n/storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+export const sharedConfig: StorybookConfig = {
+	stories: ['../src/**/*.stories.ts'],
+	addons: [
+		'storybook-dark-mode',
+		'@storybook/addon-themes',
+		'@storybook/addon-links',
+		'@chromatic-com/storybook',
+	],
+	staticDirs: ['../public'],
+	framework: {
+		name: '@storybook/vue3-vite',
+		options: {},
+	},
+	core: {
+		disableTelemetry: true,
+	},
+};
+
+export const sharedTags: string[] = ['autodocs'];

packages/frontend/@n8n/storybook/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@n8n/storybook",
+  "private": true,
+  "version": "0.0.1",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.5",
+    "@storybook/addon-a11y": "^9.1.6",
+    "@storybook/addon-actions": "^9.0.8",
+    "@storybook/addon-docs": "^9.1.6",
+    "@storybook/addon-links": "^9.1.6",
+    "@storybook/addon-themes": "^9.1.6",
+    "@storybook/vue3": "^9.1.6",
+    "@storybook/vue3-vite": "^9.1.6",
+    "chromatic": "^11.27.0",
+    "eslint-plugin-storybook": "9.1.6",
+    "storybook": "^9.1.6",
+    "storybook-dark-mode": "^4.0.2"
+  }
+}

packages/frontend/editor-ui/package.json

@@ -114,6 +114,7 @@
     "@n8n/typescript-config": "workspace:*",
     "@n8n/vitest-config": "workspace:*",
     "@pinia/testing": "^0.1.6",
+    "@storybook/types": "^8.6.14",
     "@testing-library/vue": "catalog:frontend",
     "@types/dateformat": "^3.0.0",
     "@types/file-saver": "^2.0.1",

packages/frontend/editor-ui/src/shims.d.ts

@@ -5,6 +5,7 @@ import type { VNode, ComponentPublicInstance } from 'vue';
 import type { PartialDeep } from 'type-fest';
 import type { ExternalHooks } from '@/types/externalHooks';
 import type { FrontendSettings } from '@n8n/api-types';
+import type { Plugin as PrettierPlugin } from 'prettier';
 
 export {};
 
@@ -39,3 +40,9 @@ declare global {
 		findLast(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T;
 	}
 }
+
+declare module 'prettier/plugins/estree' {
+	const plugin: PrettierPlugin;
+	export = plugin;
+	export default plugin;
+}