first commit

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

@@ -0,0 +1,33 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+import { dirname } from 'path';
+
+import { fileURLToPath } from 'url';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+	return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+}
+const config: StorybookConfig = {
+	stories: [
+		'../../design-system/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+		'../../chat/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+		'../../../editor-ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+	],
+	addons: [
+		getAbsolutePath('@chromatic-com/storybook'),
+		getAbsolutePath('@storybook/addon-vitest'),
+		getAbsolutePath('@storybook/addon-a11y'),
+		getAbsolutePath('@storybook/addon-docs'),
+		getAbsolutePath('@storybook/addon-themes'),
+	],
+	framework: getAbsolutePath('@storybook/vue3-vite'),
+	staticDirs: ['../../design-system/assets'],
+	core: {
+		disableTelemetry: true,
+	},
+};
+export default config;

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

@@ -0,0 +1,8 @@
+export const allModes = {
+	dark: {
+		theme: 'dark',
+	},
+	light: {
+		theme: 'light',
+	},
+} as const;

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

@@ -0,0 +1,113 @@
+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 { createPinia } from 'pinia';
+import { createMemoryHistory, createRouter } from 'vue-router';
+
+import { N8nPlugin } from '@n8n/design-system';
+import { i18nInstance } from '@n8n/i18n';
+
+import './storybook.scss';
+import { allModes } from './modes';
+// import '../src/css/tailwind/index.css';
+
+setup((app) => {
+	const pinia = createPinia();
+	app.use(pinia);
+	app.use(i18nInstance);
+
+	const router = createRouter({
+		history: createMemoryHistory(),
+		routes: [{ path: '/:catchAll(.*)', component: { template: '' } }],
+	});
+	app.use(router);
+
+	app.use(ElementPlus, {
+		locale: lang,
+	});
+
+	app.use(N8nPlugin, {});
+});
+
+export const parameters = {
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/,
+		},
+	},
+	backgrounds: {
+		default: '--color--background--light-3',
+		values: [
+			{
+				name: '--color--background--shade-2',
+				value: 'var(--color--background--shade-2)',
+			},
+			{
+				name: '--color--background',
+				value: 'var(--color--background)',
+			},
+			{
+				name: '--color--background--light-2',
+				value: 'var(--color--background--light-2)',
+			},
+			{
+				name: '--color--background--light-3',
+				value: 'var(--color--background--light-3)',
+			},
+		],
+	},
+	themes: {
+		default: 'light',
+		list: [
+			{
+				name: 'light',
+				class: 'theme-light',
+				color: '#fff',
+			},
+			{
+				name: 'dark',
+				class: 'theme-dark-beta',
+				color: '#000',
+			},
+		],
+	},
+	options: {
+		storySort: {
+			order: [
+				'Docs',
+				'Styleguide',
+				['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'],
+				'Core',
+				'Assistant',
+				'Chat',
+				'Tables',
+				'Utilities',
+				'Experimental',
+			],
+		},
+	},
+	chromatic: {
+		modes: {
+			light: allModes['light'],
+			dark: allModes['dark'],
+		},
+		disableSnapshot: false,
+	},
+};
+
+export const decorators = [
+	withThemeByDataAttribute({
+		themes: {
+			light: 'light',
+			dark: 'dark',
+		},
+		defaultTheme: 'light',
+		attributeName: 'data-theme',
+		parentSelector: 'body',
+	}),
+];
+
+export const tags = ['autodocs'];

packages/frontend/@n8n/storybook/.storybook/storybook.scss

@@ -0,0 +1,22 @@
+@use '../../design-system/src/css/base.scss';
+@use '../../design-system/src/css/reset.scss';
+@use '../../design-system/src/css/index.scss';
+
+.multi-container > * {
+	margin-bottom: 10px;
+}
+
+#storybook-root > div:not([class]) > *,
+#storybook-root > * {
+	margin: var(--spacing--5xs);
+}
+
+body {
+	padding: 0 !important;
+}
+
+.story {
+	padding: 2rem;
+	display: flex;
+	gap: 1rem;
+}