fix: Fix storybook (no-changelog) (#4624)

since we migrated to vite, storybook/webpack aren't doing all the babel transforms. that's we we need to revert all optional-chaining and nullish-coalescing in design-system.

Hopefully this will be remedied after we move to vite for storybook.

packages/design-system/.eslintrc.js

@@ -18,6 +18,8 @@ module.exports = {
 		'@typescript-eslint/no-unsafe-argument': 'warn',
 		'@typescript-eslint/no-unsafe-return': 'warn',
 		'@typescript-eslint/no-unsafe-member-access': 'warn',
+		'@typescript-eslint/prefer-optional-chain': 'off',
+		'@typescript-eslint/prefer-nullish-coalescing': 'off',
 	},
 
 	overrides: [

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -128,10 +128,10 @@ const slots = useSlots();
 const inputRef = ref<HTMLTextAreaElement | null>(null);
 
 function getInputValidationError(): ReturnType<IValidator['validate']> {
-	const rules = props.validationRules ?? [];
+	const rules = props.validationRules || [];
 	const validators = {
 		...VALIDATORS,
-		...(props.validators ?? {}),
+		...(props.validators || {}),
 	} as { [key: string]: IValidator | RuleGroup };
 
 	if (props.required) {

packages/design-system/src/components/N8nFormInput/validators.ts

@@ -49,7 +49,7 @@ export const VALIDATORS: { [key: string]: IValidator | RuleGroup } = {
 				return false;
 			}
 
-			const numberCount = (value.match(/\d/g) ?? []).length;
+			const numberCount = (value.match(/\d/g) || []).length;
 			if (numberCount < config.minimum) {
 				return {
 					messageKey: 'formInput.validator.numbersRequired',
@@ -77,7 +77,7 @@ export const VALIDATORS: { [key: string]: IValidator | RuleGroup } = {
 				return false;
 			}
 
-			const uppercaseCount = (value.match(/[A-Z]/g) ?? []).length;
+			const uppercaseCount = (value.match(/[A-Z]/g) || []).length;
 			if (uppercaseCount < config.minimum) {
 				return {
 					messageKey: 'formInput.validator.uppercaseCharsRequired',

packages/design-system/src/components/N8nMenu/Menu.vue

@@ -104,7 +104,7 @@ export default Vue.extend({
 			const found = this.items.find((item) => {
 				return (
 					(Array.isArray(item.activateOnRouteNames) &&
-						item.activateOnRouteNames.includes(this.$route.name ?? '')) ||
+						item.activateOnRouteNames.includes(this.$route.name || '')) ||
 					(Array.isArray(item.activateOnRoutePaths) &&
 						item.activateOnRoutePaths.includes(this.$route.path))
 				);

packages/design-system/src/components/N8nMenuItem/MenuItem.vue

@@ -134,7 +134,7 @@ export default Vue.extend({
 				} else if (item.activateOnRouteNames) {
 					return (
 						Array.isArray(item.activateOnRouteNames) &&
-						item.activateOnRouteNames.includes(this.$route.name ?? '')
+						item.activateOnRouteNames.includes(this.$route.name || '')
 					);
 				}
 				return false;

packages/design-system/src/components/N8nNotice/Notice.vue

@@ -74,7 +74,7 @@ export default Vue.extend({
 
 			if (event.target.localName !== 'a') return;
 
-			if (event.target.dataset?.key) {
+			if (event.target.dataset && event.target.dataset.key) {
 				event.stopPropagation();
 				event.preventDefault();
 

packages/design-system/src/components/N8nUserSelect/UserSelect.vue

@@ -82,13 +82,13 @@ export default mixins(Locale).extend({
 		};
 	},
 	computed: {
-		fitleredUsers(): IUser[] {
+		filteredUsers(): IUser[] {
 			return (this.users as IUser[]).filter((user) => {
 				if (user.isPendingUser || !user.email) {
 					return false;
 				}
 
-				if (this.ignoreIds?.includes(user.id)) {
+				if (this.ignoreIds && this.ignoreIds.includes(user.id)) {
 					return false;
 				}
 
@@ -103,7 +103,7 @@ export default mixins(Locale).extend({
 			});
 		},
 		sortedUsers(): IUser[] {
-			return [...this.fitleredUsers].sort((a: IUser, b: IUser) => {
+			return [...this.filteredUsers].sort((a: IUser, b: IUser) => {
 				if (a.lastName && b.lastName && a.lastName !== b.lastName) {
 					return a.lastName > b.lastName ? 1 : -1;
 				}

packages/design-system/src/components/utils/helpers.ts

@@ -1,3 +1,3 @@
 export function addTargetBlank(html: string) {
-	return html?.includes('href=') ? html.replace(/href=/g, 'target="_blank" href=') : html;
+	return html && html.includes('href=') ? html.replace(/href=/g, 'target="_blank" href=') : html;
 }