feat(editor): Upgrade Storybook to 8.0 (no-changelog) (#8867)

.gitignore

@@ -22,3 +22,4 @@ cypress/screenshots/*
 cypress/downloads/*
 *.swp
 CHANGELOG-*.md
+*.mdx

package.json

@@ -68,10 +68,10 @@
     "tsc-watch": "^6.0.4",
     "turbo": "1.10.12",
     "typescript": "*",
-    "vite": "^5.1.5",
+    "vite": "^5.1.6",
     "vite-plugin-checker": "^0.6.4",
     "vitest": "^1.3.1",
-    "vue-tsc": "^2.0.4"
+    "vue-tsc": "^2.0.6"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

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

@@ -1,27 +1,4 @@
-import type { StorybookConfig } from '@storybook/vue3-vite';
+import { sharedConfig } from '@n8n/storybook/main';
 
-import { join, dirname } from 'path';
+const config = { ...sharedConfig };
-
-/**
- * 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(require.resolve(join(value, 'package.json')));
-}
-const config: StorybookConfig = {
-	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-	addons: [
-		getAbsolutePath('@storybook/addon-links'),
-		getAbsolutePath('@storybook/addon-essentials'),
-		getAbsolutePath('@storybook/addon-interactions'),
-	],
-	framework: {
-		name: getAbsolutePath('@storybook/vue3-vite'),
-		options: {},
-	},
-	docs: {
-		autodocs: 'tag',
-	},
-};
 export default config;

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

@@ -3,7 +3,6 @@ import './preview.scss';
 
 const preview: Preview = {
 	parameters: {
-		actions: { argTypesRegex: '^on[A-Z].*' },
 		controls: {
 			matchers: {
 				color: /(background|color)$/i,

packages/@n8n/chat/package.json

@@ -45,6 +45,7 @@
     "vue-markdown-render": "^2.0.1"
   },
   "devDependencies": {
+    "@n8n/storybook": "workspace:*",
     "@iconify-json/mdi": "^1.1.54",
     "shelljs": "^0.8.5",
     "unbuild": "^2.0.0",

packages/@n8n/chat/vite.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
 		alias: {
 			'@': srcPath,
 			'@n8n/chat': srcPath,
+			lodash: 'lodash-es',
 		},
 	},
 	define: {

packages/@n8n/storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+export const sharedConfig: StorybookConfig = {
+	stories: ['../src/**/*.stories.ts'],
+	addons: [
+		'@storybook/addon-a11y',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/addon-links',
+	],
+	staticDirs: ['../public'],
+	framework: {
+		name: '@storybook/vue3-vite',
+		options: {},
+	},
+	core: {
+		disableTelemetry: true,
+	},
+	docs: {
+		autodocs: true,
+	},
+};

packages/@n8n/storybook/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@n8n/storybook",
+  "private": true,
+  "devDependencies": {
+    "@storybook/addon-a11y": "^8.0.0",
+    "@storybook/addon-actions": "^8.0.0",
+    "@storybook/addon-docs": "^8.0.0",
+    "@storybook/addon-essentials": "^8.0.0",
+    "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/addon-links": "^8.0.0",
+    "@storybook/blocks": "^8.0.0",
+    "@storybook/test": "^8.0.0",
+    "@storybook/vue3": "^8.0.0",
+    "@storybook/vue3-vite": "^8.0.0",
+    "storybook": "^8.0.0"
+  }
+}

packages/@n8n_io/eslint-config/frontend.js

@@ -16,7 +16,12 @@ module.exports = {
 
 	overrides: [
 		{
-			files: ['**/*.test.ts', '**/test/**/*.ts', '**/__tests__/**/*.ts'],
+			files: [
+				'**/*.test.ts',
+				'**/test/**/*.ts',
+				'**/__tests__/**/*.ts',
+				'**/*.stories.ts',
+			],
 			rules: {
 				'import/no-extraneous-dependencies': 'off',
 			},

packages/design-system/.eslintrc.js

@@ -20,12 +20,6 @@ module.exports = {
 	},
 
 	overrides: [
-		{
-			files: ['src/**/*.stories.ts'],
-			rules: {
-				'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-			},
-		},
 		{
 			files: ['src/**/*.stories.ts', 'src/**/*.vue', 'src/**/*.spec.ts'],
 			rules: {

packages/design-system/.npmignore

@@ -12,4 +12,3 @@ vite.config.ts
 
 *.md
 *.stories.js
-*.mdx

packages/design-system/.storybook/main.ts

@@ -1,29 +1,4 @@
-import { dirname, join } from 'path';
+import { sharedConfig } from '@n8n/storybook/main';
-import type { StorybookConfig } from '@storybook/vue3-vite';
-
-function getAbsolutePath(value: string): string {
-	return dirname(require.resolve(join(value, 'package.json'))).toString();
-}
-
-const config: StorybookConfig = {
-	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
-	addons: [
-		getAbsolutePath('@storybook/addon-links'),
-		getAbsolutePath('@storybook/addon-essentials'),
-		getAbsolutePath('@storybook/addon-a11y'),
-		getAbsolutePath('storybook-dark-mode'),
-	],
-	staticDirs: ['../public'],
-	framework: {
-		name: getAbsolutePath('@storybook/vue3-vite') as '@storybook/vue3-vite',
-		options: {},
-	},
-	core: {
-		disableTelemetry: true,
-	},
-	docs: {
-		autodocs: true,
-	},
-};
 
+const config = { ...sharedConfig, staticDirs: ['../public'] };
 export default config;

packages/design-system/.storybook/preview.js

@@ -21,9 +21,6 @@ setup((app) => {
 });
 
 export const parameters = {
-	actions: {
-		argTypesRegex: '^on[A-Z].*',
-	},
 	controls: {
 		matchers: {
 			color: /(background|color)$/i,

packages/design-system/package.json

@@ -27,17 +27,7 @@
     "lintfix": "eslint src --ext .js,.ts,.vue --fix"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^7.5.2",
+    "@n8n/storybook": "workspace:*",
-    "@storybook/addon-actions": "^7.5.2",
-    "@storybook/addon-docs": "^7.5.2",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/addon-postcss": "3.0.0-alpha.1",
-    "@storybook/blocks": "^7.5.2",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/vue3": "^7.5.2",
-    "@storybook/vue3-vite": "^7.5.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/user-event": "^14.5.1",
     "@testing-library/vue": "^8.0.1",
@@ -47,19 +37,14 @@
     "@types/markdown-it-emoji": "^2.0.2",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/sanitize-html": "^2.11.0",
-    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue": "^5.0.4",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.14",
     "core-js": "^3.31.0",
     "jsdom": "^23.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "sass": "^1.64.1",
-    "sass-loader": "^13.3.2",
+    "sass-loader": "^13.3.2"
-    "storybook": "^7.5.2",
-    "storybook-addon-themes": "^6.1.0",
-    "storybook-dark-mode": "^3.0.1"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",

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

@@ -1,7 +1,14 @@
-import { action } from '@storybook/addon-actions';
+import { type StoryFn } from '@storybook/vue3';
+import { type ActionOptions, action } from '@storybook/addon-actions';
 import N8nResizeWrapper from './ResizeWrapper.vue';
 import { ref } from 'vue';
 
+// TODO: remove this after converting ResizeWrapper to composition API
+interface ResizeData extends ActionOptions {
+	height: number;
+	width: number;
+}
+
 export default {
 	title: 'Atoms/ResizeWrapper',
 	component: N8nResizeWrapper,
@@ -13,12 +20,12 @@ const methods = {
 	onResizeStart: action('resizestart'),
 };
 
-const Template = (args, { argTypes }) => ({
+const Template: StoryFn = (args, { argTypes }) => ({
 	setup: () => {
 		const newWidth = ref(args.width);
 		const newHeight = ref(args.height);
 
-		function onResize(resizeData) {
+		function onResize(resizeData: ResizeData) {
 			action('resize', resizeData);
 			newHeight.value = resizeData.height;
 			newWidth.value = resizeData.width;

packages/design-system/src/docs/Introduction.stories.mdx

@@ -1,7 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-
-<Meta title="Docs/Introduction" />
-
-# Welcome to n8n Storybook
-
-This project includes components that make up n8n editor.

packages/design-system/src/styleguide/border.stories.mdx

@@ -1,49 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import VariableTable from './VariableTable.vue';
-
-<Meta
-	title="Styleguide/Border"
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
-		},
-	}}
-/>
-
-# Border Radius
-
-<Canvas>
-	<Story name="border-radius">
-		{{
-			template: `<variable-table :variables="['--border-radius-small','--border-radius-base', '--border-radius-large', '--border-radius-xlarge']" />`,
-			components: {
-				VariableTable,
-			},
-		}}
-	</Story>
-</Canvas>
-
-# Border Width
-
-<Canvas>
-	<Story name="border-width">
-		{{
-			template: `<variable-table :variables="['--border-width-base']" />`,
-			components: {
-				VariableTable,
-			},
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="border-style">
-		{{
-			template: `<variable-table :variables="['--border-style-base']" />`,
-			components: {
-				VariableTable,
-			},
-		}}
-	</Story>
-</Canvas>

packages/design-system/src/styleguide/border.stories.ts

@@ -0,0 +1,29 @@
+import { type StoryFn } from '@storybook/vue3';
+import VariableTable from './VariableTable.vue';
+
+export default {
+	title: 'Styleguide/Border',
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
+		},
+	},
+};
+
+const Template =
+	(template: string): StoryFn =>
+	() => ({
+		components: {
+			VariableTable,
+		},
+		template,
+	});
+
+export const BorderRadius = Template(
+	"<variable-table :variables=\"['--border-radius-small','--border-radius-base', '--border-radius-large', '--border-radius-xlarge']\" />",
+);
+
+export const BorderWidth = Template('<variable-table :variables="[\'--border-width-base\']" />');
+
+export const BorderStyle = Template('<variable-table :variables="[\'--border-style-base\']" />');

packages/design-system/src/styleguide/colors.stories.mdx

@@ -1,118 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import ColorCircles from './ColorCircles.vue';
-
-<Meta
-	title="Styleguide/Colors Tokens"
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
-		},
-	}}
-/>
-
-# Colors
-
-## Primary
-
-<Canvas>
-	<Story name="primary">
-		{{
-			template: `<color-circles :colors="['--color-primary-shade-1', '--color-primary', '--color-primary-tint-1', '--color-primary-tint-2', '--color-primary-tint-3']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Secondary
-
-<Canvas>
-	<Story name="secondary">
-		{{
-			template: `<color-circles :colors="['--color-secondary-shade-1', '--color-secondary', '--color-secondary-tint-1', '--color-secondary-tint-3']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Success
-
-<Canvas>
-	<Story name="success">
-		{{
-			template: `<color-circles :colors="['--color-success-shade-1', '--color-success', '--color-success-light',  '--color-success-light-2', '--color-success-tint-1', '--color-success-tint-2']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Warning
-
-<Canvas>
-	<Story name="warning">
-		{{
-			template: `<color-circles :colors="['--color-warning-shade-1', '--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Danger
-
-<Canvas>
-	<Story name="danger">
-		{{
-			template: `<color-circles :colors="['--color-danger-shade-1', '--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Text
-
-<Canvas>
-	<Story name="text">
-		{{
-			template: `<color-circles :colors="['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight', '--color-text-danger']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Foreground
-
-<Canvas>
-	<Story name="foreground">
-		{{
-			template: `<color-circles :colors="['--color-foreground-xdark', '--color-foreground-dark', '--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Background
-
-<Canvas>
-	<Story name="background">
-		{{
-			template: `<color-circles :colors="['--color-background-dark', '--color-background-medium', '--color-background-base', '--color-background-light', '--color-background-xlight']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>

packages/design-system/src/styleguide/colors.stories.ts

@@ -0,0 +1,53 @@
+import { type StoryFn } from '@storybook/vue3';
+import ColorCircles from './ColorCircles.vue';
+
+export default {
+	title: 'Styleguide/Colors Tokens',
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
+		},
+	},
+};
+
+const Template =
+	(template: string): StoryFn =>
+	() => ({
+		components: {
+			ColorCircles,
+		},
+		template,
+	});
+
+export const Primary = Template(
+	"<color-circles :colors=\"['--color-primary-shade-1', '--color-primary', '--color-primary-tint-1', '--color-primary-tint-2', '--color-primary-tint-3']\" />",
+);
+
+export const Secondary = Template(
+	"<color-circles :colors=\"['--color-secondary-shade-1', '--color-secondary', '--color-secondary-tint-1', '--color-secondary-tint-3']\" />",
+);
+
+export const Success = Template(
+	"<color-circles :colors=\"['--color-success-shade-1', '--color-success', '--color-success-light',  '--color-success-light-2', '--color-success-tint-1', '--color-success-tint-2']\" />",
+);
+
+export const Warning = Template(
+	"<color-circles :colors=\"['--color-warning-shade-1', '--color-warning', '--color-warning-tint-1', '--color-warning-tint-2']\" />",
+);
+
+export const Danger = Template(
+	"<color-circles :colors=\"['--color-danger-shade-1', '--color-danger', '--color-danger-tint-1', '--color-danger-tint-2']\" />",
+);
+
+export const Text = Template(
+	"<color-circles :colors=\"['--color-text-dark', '--color-text-base', '--color-text-light', '--color-text-lighter', '--color-text-xlight', '--color-text-danger']\" />",
+);
+
+export const Foreground = Template(
+	"<color-circles :colors=\"['--color-foreground-xdark', '--color-foreground-dark', '--color-foreground-base', '--color-foreground-light', '--color-foreground-xlight']\" />",
+);
+
+export const Background = Template(
+	"<color-circles :colors=\"['--color-background-dark', '--color-background-medium', '--color-background-base', '--color-background-light', '--color-background-xlight']\" />",
+);

packages/design-system/src/styleguide/colorsprimitives.stories.mdx

@@ -1,183 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import ColorCircles from './ColorCircles.vue';
-
-<Meta
-	title="Styleguide/Colors Primitives"
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
-		},
-	}}
-/>
-
-# Colors Primitives
-
-## Gray
-
-<Canvas>
-	<Story name="gray">
-		{{
-			template: `<color-circles :colors="['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-30', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Primary
-
-<Canvas>
-	<Story name="primary">
-		{{
-			template: `<color-circles :colors="['--prim-color-primary-shade-300', '--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Secondary
-
-<Canvas>
-	<Story name="secondary">
-		{{
-			template: `<color-circles :colors="['--prim-color-secondary-shade-250', '--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate A
-
-<Canvas>
-	<Story name="alternate-a">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-a-shade-200', '--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate B
-
-<Canvas>
-	<Story name="alternate-b">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-b-shade-350', '--prim-color-alt-b-shade-250', '--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-150', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-300', '--prim-color-alt-b-tint-400']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate C
-
-<Canvas>
-	<Story name="alternate-c">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-c-shade-250', '--prim-color-alt-c-shade-150', '--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-300', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate D
-
-<Canvas>
-	<Story name="alternate-d">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-d-shade-700', '--prim-color-alt-d-shade-600', '--prim-color-alt-d-shade-150', '--prim-color-alt-d']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate E
-
-<Canvas>
-	<Story name="alternate-e">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-e-shade-350', '--prim-color-alt-e-shade-250', '--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e', '--prim-color-alt-e-tint-250', '--prim-color-alt-e-tint-350']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate F
-
-<Canvas>
-	<Story name="alternate-f">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-f', '--prim-color-alt-f-tint-150']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate G
-
-<Canvas>
-	<Story name="alternate-g">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-g', '--prim-color-alt-g-tint-150']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate H
-
-<Canvas>
-	<Story name="alternate-h">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-h']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate I
-
-<Canvas>
-	<Story name="alternate-i">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-i']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Alternate J
-
-<Canvas>
-	<Story name="alternate-j">
-		{{
-			template: `<color-circles :colors="['--prim-color-alt-j']" />`,
-			components: {
-				ColorCircles,
-			},
-		}}
-	</Story>
-</Canvas>

packages/design-system/src/styleguide/colorsprimitives.stories.ts

@@ -0,0 +1,67 @@
+import { type StoryFn } from '@storybook/vue3';
+import ColorCircles from './ColorCircles.vue';
+
+export default {
+	title: 'Styleguide/Colors Primitives',
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=2%3A23',
+		},
+	},
+};
+
+const Template =
+	(template: string): StoryFn =>
+	() => ({
+		components: {
+			ColorCircles,
+		},
+		template,
+	});
+
+export const Gray = Template(
+	"<color-circles :colors=\"['--prim-gray-820', '--prim-gray-800', '--prim-gray-740', '--prim-gray-670', '--prim-gray-540', '--prim-gray-490', '--prim-gray-420', '--prim-gray-320', '--prim-gray-200', '--prim-gray-120', '--prim-gray-70', '--prim-gray-30', '--prim-gray-40', '--prim-gray-10', '--prim-gray-0']\" />",
+);
+
+export const Primary = Template(
+	"<color-circles :colors=\"['--prim-color-primary-shade-300', '--prim-color-primary-shade-100', '--prim-color-primary', '--prim-color-primary-tint-100', '--prim-color-primary-tint-200', '--prim-color-primary-tint-250', '--prim-color-primary-tint-300']\" />",
+);
+
+export const Secondary = Template(
+	"<color-circles :colors=\"['--prim-color-secondary-shade-250', '--prim-color-secondary-shade-100', '--prim-color-secondary', '--prim-color-secondary-tint-100', '--prim-color-secondary-tint-200', '--prim-color-secondary-tint-300', '--prim-color-secondary-tint-400']\" />",
+);
+
+export const AlternateA = Template(
+	"<color-circles :colors=\"['--prim-color-alt-a-shade-200', '--prim-color-alt-a-shade-100', '--prim-color-alt-a', '--prim-color-alt-a-tint-300', '--prim-color-alt-a-tint-400', '--prim-color-alt-a-tint-500', '--prim-color-alt-a-tint-550']\" />",
+);
+
+export const AlternateB = Template(
+	"<color-circles :colors=\"['--prim-color-alt-b-shade-350', '--prim-color-alt-b-shade-250', '--prim-color-alt-b-shade-100', '--prim-color-alt-b', '--prim-color-alt-b-tint-150', '--prim-color-alt-b-tint-250', '--prim-color-alt-b-tint-300', '--prim-color-alt-b-tint-400']\" />",
+);
+
+export const AlternateC = Template(
+	"<color-circles :colors=\"['--prim-color-alt-c-shade-250', '--prim-color-alt-c-shade-150', '--prim-color-alt-c-shade-100', '--prim-color-alt-c', '--prim-color-alt-c-tint-150', '--prim-color-alt-c-tint-250', '--prim-color-alt-c-tint-300', '--prim-color-alt-c-tint-400', '--prim-color-alt-c-tint-450']\" />",
+);
+
+export const AlternateD = Template(
+	"<color-circles :colors=\"['--prim-color-alt-d-shade-700', '--prim-color-alt-d-shade-600', '--prim-color-alt-d-shade-150', '--prim-color-alt-d']\" />",
+);
+
+export const AlternateE = Template(
+	"<color-circles :colors=\"['--prim-color-alt-e-shade-350', '--prim-color-alt-e-shade-250', '--prim-color-alt-e-shade-150', '--prim-color-alt-e-shade-100', '--prim-color-alt-e', '--prim-color-alt-e-tint-250', '--prim-color-alt-e-tint-350']\" />",
+);
+
+export const AlternateF = Template(
+	"<color-circles :colors=\"['--prim-color-alt-f', '--prim-color-alt-f-tint-150']\" />",
+);
+
+export const AlternateG = Template(
+	"<color-circles :colors=\"['--prim-color-alt-g', '--prim-color-alt-g-tint-150']\" />",
+);
+
+export const AlternateH = Template('<color-circles :colors="[\'--prim-color-alt-h\']" />');
+
+export const AlternateI = Template('<color-circles :colors="[\'--prim-color-alt-i\']" />');
+
+export const AlternateJ = Template('<color-circles :colors="[\'--prim-color-alt-j\']" />');

packages/design-system/src/styleguide/fonts.stories.mdx

@@ -1,59 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import Sizes from './Sizes.vue';
-import VariableTable from './VariableTable.vue';
-
-<Meta title="Styleguide/Font" />
-
-# Font
-
-## Font Sizes
-
-<Canvas>
-	<Story name="font-size">
-		{{
-			template: `<sizes :variables="['--font-size-3xs', '--font-size-2xs','--font-size-xs','--font-size-s','--font-size-m','--font-size-l','--font-size-xl','--font-size-2xl']" attr="font-size" />`,
-			components: {
-				Sizes,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Line Heights
-
-<Canvas>
-	<Story name="line-height">
-		{{
-			template: `<variable-table :variables="['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']" />`,
-			components: {
-				VariableTable,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Font Weights
-
-<Canvas>
-	<Story name="font-weight">
-		{{
-			template: `<variable-table :variables="['--font-weight-regular','--font-weight-bold']" attr="font-weight" />`,
-			components: {
-				VariableTable,
-			},
-		}}
-	</Story>
-</Canvas>
-
-## Font Family
-
-<Canvas>
-	<Story name="font-family">
-		{{
-			template: `<variable-table :variables="['--font-family']" attr="font-family" />`,
-			components: {
-				VariableTable,
-			},
-		}}
-	</Story>
-</Canvas>

packages/design-system/src/styleguide/fonts.stories.ts

@@ -0,0 +1,36 @@
+import { type StoryFn } from '@storybook/vue3';
+import Sizes from './Sizes.vue';
+import VariableTable from './VariableTable.vue';
+
+export default {
+	title: 'Styleguide/Font',
+};
+
+export const FontSize: StoryFn = () => ({
+	components: {
+		Sizes,
+	},
+	template:
+		"<sizes :variables=\"['--font-size-3xs', '--font-size-2xs','--font-size-xs','--font-size-s','--font-size-m','--font-size-l','--font-size-xl','--font-size-2xl']\" attr=\"font-size\" />",
+});
+
+const Template =
+	(template: string): StoryFn =>
+	() => ({
+		components: {
+			VariableTable,
+		},
+		template,
+	});
+
+export const LineHeight = Template(
+	"<variable-table :variables=\"['--font-line-height-compact','--font-line-height-regular','--font-line-height-loose','--font-line-height-xloose']\" />",
+);
+
+export const FontWeight = Template(
+	'<variable-table :variables="[\'--font-weight-regular\',\'--font-weight-bold\']" attr="font-weight" />',
+);
+
+export const FontFamily = Template(
+	'<variable-table :variables="[\'--font-family\']" attr="font-family" />',
+);

packages/design-system/src/styleguide/spacing.stories.mdx

@@ -1,25 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import Sizes from './Sizes.vue';
-
-<Meta
-	title="Styleguide/Spacing"
-	parameters={{
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
-		},
-	}}
-/>
-
-# Spacing
-
-<Canvas>
-	<Story name="spacing">
-		{{
-			template: `<sizes :variables="['--spacing-5xs','--spacing-4xs','--spacing-3xs','--spacing-2xs','--spacing-xs','--spacing-s','--spacing-m','--spacing-l','--spacing-xl','--spacing-2xl','--spacing-3xl','--spacing-4xl','--spacing-5xl']" />`,
-			components: {
-				Sizes,
-			},
-		}}
-	</Story>
-</Canvas>

packages/design-system/src/styleguide/spacing.stories.ts

@@ -0,0 +1,20 @@
+import { type StoryFn } from '@storybook/vue3';
+import Sizes from './Sizes.vue';
+
+export default {
+	title: 'Styleguide/Spacing',
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=79%3A6898',
+		},
+	},
+};
+
+export const Spacing: StoryFn = () => ({
+	components: {
+		Sizes,
+	},
+	template:
+		"<sizes :variables=\"['--spacing-5xs','--spacing-4xs','--spacing-3xs','--spacing-2xs','--spacing-xs','--spacing-s','--spacing-m','--spacing-l','--spacing-xl','--spacing-2xl','--spacing-3xl','--spacing-4xl','--spacing-5xl']\" />",
+});

packages/design-system/src/styleguide/utilities/float.stories.mdx

@@ -1,27 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-
-<Meta title="Utilities/Float" />
-
-# `.float-left`
-
-<Canvas>
-	<Story name="float-left">
-		{{
-			template: `<div>
-	<span class="float-left">Float left</span>
-</div>`,
-		}}
-	</Story>
-</Canvas>
-
-# `.float-right`
-
-<Canvas>
-	<Story name="float-right">
-		{{
-			template: `<div>
-	<span class="float-right">Float right</span>
-</div>`,
-		}}
-	</Story>
-</Canvas>

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

@@ -0,0 +1,17 @@
+import { type StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Utilities/Float',
+};
+
+const Template =
+	(template: string): StoryFn =>
+	() => ({ template });
+
+export const FloatLeft = Template(`<div>
+<span class="float-left">Float left</span>
+</div>`);
+
+export const FloatRight = Template(`<div>
+<span class="float-right">Float right</span>
+</div>`);

packages/design-system/vite.config.mts

@@ -41,6 +41,7 @@ export default mergeConfig(
 			alias: {
 				'@': resolve(__dirname, 'src'),
 				'n8n-design-system': resolve(__dirname, 'src'),
+				lodash: 'lodash-es',
 			},
 		},
 		build: {