ci: Ensure that eslint runs on all frontend code (no-changelog) (#4602)

* ensure that eslint runs on all frontend code

* remove tslint from `design-system`

* enable prettier and eslint-prettier for `design-system`

* Delete tslint.json

* use a single editorconfig for the repo

* enable prettier for all code in `design-system`

* more linting fixes on design-system

* ignore coverage for git and prettier

* lintfix on editor-ui

.editorconfig

@@ -15,3 +15,6 @@ indent_size = 2
 [*.yml]
 indent_style = space
 indent_size = 2
+
+[*.ts]
+quote_type = single

.prettierignore

@@ -1,7 +1,6 @@
 dist
 packages/editor-ui
-packages/design-system
-package*.json
+package.json
 
 !packages/nodes-base/src
 !packages/nodes-base/test

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

@@ -9,11 +9,9 @@ const config = (module.exports = {
 	},
 
 	ignorePatterns: [
-		'.eslintrc.js', // TODO: remove this
 		'node_modules/**',
 		'dist/**',
 		'test/**', // TODO: remove this
-		'jest.config.js', // TODO: remove this
 	],
 
 	plugins: [

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

@@ -14,10 +14,15 @@ module.exports = {
 
 	parser: 'vue-eslint-parser',
 	parserOptions: {
-		parser: '@typescript-eslint/parser',
+		parser: {
+			ts: '@typescript-eslint/parser',
+			js: '@typescript-eslint/parser',
+			vue: 'vue-eslint-parser',
+			template: 'vue-eslint-parser',
+		},
 	},
 
-	ignorePatterns: ['**/*.js', '**/*.d.ts', 'vite.config.ts'],
+	ignorePatterns: ['**/*.js', '**/*.d.ts', 'vite.config.ts', '**/*.ts.snap'],
 
 	rules: {
 		'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

packages/design-system/.eslintrc.js

@@ -6,23 +6,50 @@ module.exports = {
 
 	parserOptions: {
 		project: ['./tsconfig.json'],
+		tsconfigRootDir: __dirname,
+		extraFileExtensions: ['.vue'],
 	},
 
 	rules: {
 		// TODO: Remove these
 		'import/no-default-export': 'off',
-		'import/no-extraneous-dependencies': 'off',
 		'import/order': 'off',
-		'prettier/prettier': 'off',
-		'@typescript-eslint/member-delimiter-style': 'off',
-		'@typescript-eslint/naming-convention': 'off',
-		'@typescript-eslint/no-explicit-any': 'off',
-		'@typescript-eslint/no-unsafe-argument': 'off',
-		'@typescript-eslint/no-unsafe-return': 'off',
-		'@typescript-eslint/no-unused-vars': 'off',
-		'@typescript-eslint/prefer-nullish-coalescing': 'off',
-		'@typescript-eslint/prefer-optional-chain': 'off',
-		'@typescript-eslint/restrict-template-expressions': 'off',
-		'@typescript-eslint/ban-ts-comment': ['warn', { 'ts-ignore': true }],
-	}
+		'@typescript-eslint/no-explicit-any': 'warn',
+		'@typescript-eslint/no-unsafe-argument': 'warn',
+		'@typescript-eslint/no-unsafe-return': 'warn',
+		'@typescript-eslint/no-unsafe-member-access': 'warn',
+	},
+
+	overrides: [
+		{
+			files: ['src/**/*.stories.{js,ts}'],
+			rules: {
+				'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+			},
+		},
+		{
+			files: ['src/**/*.stories.{js,ts}', 'src/**/*.vue', 'src/**/*.spec.ts'],
+			rules: {
+				'@typescript-eslint/naming-convention': [
+					'warn',
+					{
+						selector: ['variable', 'property'],
+						format: ['PascalCase', 'camelCase', 'UPPER_CASE'],
+					},
+				],
+			},
+		},
+		{
+			files: ['src/components/N8nFormInput/validators.ts'],
+			rules: {
+				'@typescript-eslint/naming-convention': [
+					'error',
+					{
+						selector: ['property'],
+						format: ['camelCase', 'UPPER_CASE'],
+					},
+				],
+			},
+		},
+	],
 };

packages/design-system/.gitignore

@@ -1 +1,2 @@
+coverage
 storybook-static

packages/design-system/.prettierignore

@@ -0,0 +1,3 @@
+coverage
+dist
+package.json

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

@@ -14,7 +14,7 @@ module.exports = {
 				postcssLoaderOptions: {
 					implementation: require('postcss'),
 				},
-			}
+			},
 		},
 		'storybook-addon-designs',
 		'storybook-addon-themes',

packages/design-system/.storybook/storybook.scss

@@ -1,11 +1,11 @@
-@use "./fonts.scss";
+@use './fonts.scss';
 
-@use "~/src/css/base.scss" with (
-	$font-path: '~element-ui/lib/theme-chalk/fonts',
+@use '~/src/css/base.scss' with (
+	$font-path: '~element-ui/lib/theme-chalk/fonts'
 );
 
-@use "~/src/css/reset.scss";
-@use "~/src/css/index.scss";
+@use '~/src/css/reset.scss';
+@use '~/src/css/index.scss';
 
 .multi-container > * {
 	margin-bottom: 10px;

packages/design-system/package.json

@@ -21,15 +21,22 @@
     "test:dev": "vitest",
     "build:storybook": "build-storybook",
     "storybook": "start-storybook -p 6006",
-    "format": "prettier **/**.{ts,vue} --write",
-    "lint": "tslint -p tsconfig.json -c tslint.json && eslint .",
-    "lintfix": "tslint --fix -p tsconfig.json -c tslint.json && eslint . --fix"
+    "format": "prettier **/**.{js,ts,vue,css,scss,mdx,html} --write .",
+    "lint": "eslint --ext .js,.ts,.vue src",
+    "lintfix": "eslint --ext .js,.ts,.vue src --fix"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-svg-core": "1.x",
     "@fortawesome/free-solid-svg-icons": "5.x",
     "@fortawesome/vue-fontawesome": "2.x",
-    "core-js": "3.x"
+    "core-js": "3.x",
+    "markdown-it": "^12.3.2",
+    "markdown-it-emoji": "^2.0.0",
+    "markdown-it-link-attributes": "^4.0.0",
+    "markdown-it-task-lists": "^2.1.1",
+    "vue": "^2.7",
+    "vue-typed-mixins": "^0.2.0",
+    "xss": "^1.0.10"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
@@ -43,14 +50,12 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/vue": "^5.8.3",
     "@types/markdown-it": "^12.2.3",
+    "@types/markdown-it-emoji": "^2.0.2",
+    "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/sanitize-html": "^2.6.2",
     "c8": "7.11.0",
     "core-js": "^3.6.5",
     "jsdom": "19.0.0",
-    "markdown-it": "^12.3.2",
-    "markdown-it-emoji": "^2.0.0",
-    "markdown-it-link-attributes": "^4.0.0",
-    "markdown-it-task-lists": "^2.1.1",
     "node-notifier": ">=8.0.1",
     "sass": "^1.55.0",
     "sass-loader": "^10.1.1",
@@ -60,16 +65,13 @@
     "vite": "^2.9.5",
     "@vitejs/plugin-vue2": "^1.1.2",
     "vitest": "^0.9.3",
-    "vue": "^2.7",
     "vue-class-component": "^7.2.3",
     "vue-loader": "^15.9.7",
     "vue-property-decorator": "^9.1.2",
     "vue-template-compiler": "^2.7",
     "vue-tsc": "^0.34.8",
-    "vue-typed-mixins": "^0.2.0",
     "vue2-boring-avatars": "0.3.4",
-    "webpack": "^4.46.0",
-    "xss": "^1.0.10"
+    "webpack": "^4.46.0"
   },
   "dependencies": {
     "element-ui": "~2.15.7",

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

@@ -1,8 +1,6 @@
-/* tslint:disable:variable-name */
-
 import N8nActionBox from './ActionBox.vue';
 import { action } from '@storybook/addon-actions';
-import {StoryFn} from "@storybook/vue";
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/ActionBox',
@@ -35,8 +33,9 @@ const Template: StoryFn = (args, { argTypes }) => ({
 
 export const ActionBox = Template.bind({});
 ActionBox.args = {
-	emoji: "😿",
-	heading: "Headline you need to know",
-	description: "Long description that you should know something is the way it is because of how it is. ",
-	buttonText: "Do something",
+	emoji: '😿',
+	heading: 'Headline you need to know',
+	description:
+		'Long description that you should know something is the way it is because of how it is. ',
+	buttonText: 'Do something',
 };

packages/design-system/src/components/N8nActionBox/ActionBox.vue

@@ -118,5 +118,4 @@ export default Vue.extend({
 	width: 100%;
 	text-align: left;
 }
-
 </style>

packages/design-system/src/components/N8nActionBox/__tests__/ActionBox.spec.ts

@@ -1,21 +1,17 @@
-import {render} from '@testing-library/vue';
+import { render } from '@testing-library/vue';
 import N8NActionBox from '../ActionBox.vue';
 
 describe('N8NActionBox', () => {
 	it('should render correctly', () => {
 		const wrapper = render(N8NActionBox, {
 			props: {
-				emoji: "😿",
-				heading: "Headline you need to know",
-				description: "Long description that you should know something is the way it is because of how it is. ",
-				buttonText: "Do something",
+				emoji: '😿',
+				heading: 'Headline you need to know',
+				description:
+					'Long description that you should know something is the way it is because of how it is. ',
+				buttonText: 'Do something',
 			},
-			stubs: [
-				'n8n-heading',
-				'n8n-text',
-				'n8n-button',
-				'n8n-callout',
-			],
+			stubs: ['n8n-heading', 'n8n-text', 'n8n-button', 'n8n-callout'],
 		});
 		expect(wrapper.html()).toMatchSnapshot();
 	});

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

@@ -1,5 +1,5 @@
-import N8nActionDropdown from "./ActionDropdown.vue";
-import { StoryFn } from '@storybook/vue';
+import N8nActionDropdown from './ActionDropdown.vue';
+import type { StoryFn } from '@storybook/vue';
 
 export default {
 	title: 'Atoms/ActionDropdown',