perf: Add tailwind to editor and design system (#9032)

cypress/e2e/17-workflow-tags.cy.ts

@@ -79,6 +79,7 @@ describe('Workflow tags', () => {
 		wf.getters.nthTagPill(1).click();
 		wf.getters.tagsDropdown().find('.el-tag__close').first().click();
 		cy.get('body').click(0, 0);
+		wf.getters.workflowTags().click();
 		wf.getters.tagPills().should('have.length', TEST_TAGS.length - 1);
 	});
 
@@ -88,6 +89,7 @@ describe('Workflow tags', () => {
 		wf.getters.nthTagPill(1).click();
 		wf.getters.tagsInDropdown().filter('.selected').first().click();
 		cy.get('body').click(0, 0);
+		wf.getters.workflowTags().click();
 		wf.getters.tagPills().should('have.length', TEST_TAGS.length - 1);
 	});
 });

cypress/e2e/26-resource-locator.cy.ts

@@ -75,7 +75,7 @@ describe('Resource Locator', () => {
 
 		ndv.actions.setInvalidExpression({ fieldName: 'fieldId' });
 
-		ndv.getters.nodeParameters().click(); // remove focus from input, hide expression preview
+		ndv.getters.inputDataContainer().click(); // remove focus from input, hide expression preview
 
 		ndv.getters.resourceLocatorInput('rlc').click();
 

cypress/e2e/5-ndv.cy.ts

@@ -325,7 +325,7 @@ describe('NDV', () => {
 
 		ndv.actions.setInvalidExpression({ fieldName: 'fieldId', delay: 200 });
 
-		ndv.getters.nodeParameters().click(); // remove focus from input, hide expression preview
+		ndv.getters.inputDataContainer().click(); // remove focus from input, hide expression preview
 
 		ndv.getters.parameterInput('remoteOptions').click();
 

cypress/pages/workflow.ts

@@ -145,7 +145,7 @@ export class WorkflowPage extends BasePage {
 		},
 		addInitialNodeToCanvas: (
 			nodeDisplayName: string,
-			opts?: { keepNdvOpen?: boolean; action?: string, isTrigger?: boolean},
+			opts?: { keepNdvOpen?: boolean; action?: string; isTrigger?: boolean },
 		) => {
 			this.getters.canvasPlusButton().click();
 			this.getters.nodeCreatorSearchBar().type(nodeDisplayName);
@@ -318,7 +318,6 @@ export class WorkflowPage extends BasePage {
 				this.getters.workflowTagsInput().type(tag);
 				this.getters.workflowTagsInput().type('{enter}');
 			});
-			cy.realPress('Tab');
 			// For a brief moment the Element UI tag component shows the tags as(+X) string
 			// so we need to wait for it to disappear
 			this.getters.workflowTagsContainer().should('not.contain', `+${tags.length}`);

packages/@n8n/storybook/main.ts

@@ -8,6 +8,7 @@ export const sharedConfig: StorybookConfig = {
 		'@storybook/addon-essentials',
 		'@storybook/addon-interactions',
 		'@storybook/addon-links',
+		'@storybook/addon-themes',
 	],
 	staticDirs: ['../public'],
 	framework: {

packages/@n8n/storybook/package.json

@@ -10,6 +10,7 @@
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-interactions": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
+    "@storybook/addon-themes": "^8.0.0",
     "@storybook/blocks": "^8.0.0",
     "@storybook/test": "^8.0.0",
     "@storybook/vue3": "^8.0.0",

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

@@ -1,6 +1,8 @@
 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';
@@ -59,7 +61,25 @@ export const parameters = {
 	},
 	options: {
 		storySort: {
-			order: ['Docs', 'Styleguide', ['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'], 'Atoms', 'Modules'],
+			order: [
+				'Docs',
+				'Styleguide',
+				['Colors Primitives', 'Colors Tokens', 'Font', 'Spacing', 'Border'],
+				'Atoms',
+				'Modules',
+			],
 		},
 	},
 };
+
+export const decorators = [
+	withThemeByDataAttribute({
+		themes: {
+			light: 'light',
+			dark: 'dark',
+		},
+		defaultTheme: 'light',
+		attributeName: 'data-theme',
+		parentSelector: 'body',
+	}),
+];

packages/design-system/package.json

@@ -41,11 +41,13 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/test-utils": "^2.4.3",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.19",
     "core-js": "^3.31.0",
     "jsdom": "^23.0.1",
+    "postcss": "^8.4.38",
     "sass": "^1.64.1",
-    "sass-loader": "^13.3.2"
+    "sass-loader": "^13.3.2",
+    "tailwindcss": "^3.4.3"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",

packages/design-system/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
 	plugins: {
+		tailwindcss: {},
 		autoprefixer: {},
 	},
 };

packages/design-system/src/css/tailwind/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/design-system/tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	content: ['./src/**/*.{vue,js,ts}'],
+	darkMode: ['selector', '[data-theme="dark"]'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};

packages/editor-ui/postcss.config.js

@@ -1,5 +1,6 @@
 module.exports = {
 	plugins: {
+		tailwindcss: {},
 		autoprefixer: {},
 	},
 };

packages/editor-ui/src/main.ts

@@ -3,6 +3,7 @@ import { createApp } from 'vue';
 import 'vue-json-pretty/lib/styles.css';
 import '@jsplumb/browser-ui/css/jsplumbtoolkit.css';
 import 'n8n-design-system/css/index.scss';
+import 'n8n-design-system/css/tailwind/index.css';
 
 import './n8n-theme.scss';
 

packages/editor-ui/tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	content: ['./index.html', './src/**/*.{vue,js,ts}'],
+	darkMode: ['selector', '[data-theme="dark"]'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};