chore: update eslint and maintain eslint ignore correctly (#714)

Author: MarcusNotheis

.eslint-imports.js

@@ -1,6 +1,36 @@
 packages/*/src/lib/
-packages/*/lib/
-packages/*/dist/
+
+# build results for base package
+packages/base/cjs
+packages/base/Device
+packages/base/hooks
+packages/base/lib
+packages/base/polyfill
+packages/base/scripts
+packages/base/styling
+packages/base/types
+packages/base/utils
+
+# build results for charts package
+packages/charts/cjs
+packages/charts/components
+packages/charts/hooks
+packages/charts/interfaces
+packages/charts/internal
+packages/charts/lib
+
+# build results for main package
+packages/main/cjs
+packages/main/components
+packages/main/dist
+packages/main/enums
+packages/main/interfaces
+packages/main/internal
+packages/main/lib
+packages/main/scripts
+packages/main/webComponents
+
+
 scripts
 shared
 .eslintrc.js
@@ -11,3 +41,4 @@ rollup.config.js
 index.cjs.js
 index.esm.js
 packages/cra-template
+

.eslintignore

@@ -6,8 +6,10 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
     'plugin:react/recommended',
-    'prettier',
-    './.eslint-imports.js'
+    'plugin:import/errors',
+    'plugin:import/warnings',
+    'plugin:import/typescript',
+    'prettier'
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
@@ -122,6 +124,17 @@ module.exports = {
     'react/self-closing-comp': 'error',
     'spaced-comment': 'error',
     'use-isnan': 'error',
-    'valid-typeof': 'off'
+    'valid-typeof': 'off',
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'never',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true
+        }
+      }
+    ],
+    'import/no-duplicates': 2
   }
 };

.eslintrc.js

@@ -57,8 +57,8 @@
     "@types/jest": "^26.0.8",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
-    "@typescript-eslint/eslint-plugin": "^3.7.0",
-    "@typescript-eslint/parser": "^3.7.0",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
     "@ui5/webcomponents-tools": "^1.0.0-rc.8",
     "babel-loader": "^8.1.0",
     "chalk": "^4.0.0",
@@ -67,12 +67,12 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
-    "eslint": "^7.5.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint": "^7.10.0",
+    "eslint-config-prettier": "^6.12.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prefer-arrow": "^1.2.2",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
+    "eslint-plugin-react": "^7.21.3",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "glob": "^7.1.6",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",

config/rules/noIndexImportsRule.js

@@ -344,6 +344,13 @@ const getEventParameters = (parameters) => {
 
   const importStatements = [];
 
+  if (resolvedEventParameters.length === 0) {
+    return {
+      tsType: `(event: CustomEvent) => void`,
+      importStatements
+    };
+  }
+
   const detailPayload = resolvedEventParameters.map((parameter) => {
     if (parameter.importStatement) {
       importStatements.push(parameter.importStatement);

config/rules/noIndexImportsRule.ts

@@ -33,7 +33,7 @@ export interface ButtonPropTypes extends Omit<WithWebComponentPropTypes, 'onClic
   /**
    * Fired when the <code>Button</code> is activated either with a mouse/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event will not be fired if the <code>disabled</code> property is set to <code>true</code>.
    */
-  onClick?: (event: CustomEvent<{}>) => void;
+  onClick?: (event: CustomEvent) => void;
 }
 
 /**

package.json

@@ -34,7 +34,7 @@ export interface CardPropTypes extends WithWebComponentPropTypes {
   /**
    * Fired when the <code>Card</code> header is activated by mouse/tap or by using the Enter or Space key. <br><br> <b>Note:</b> The event would be fired only if the <code>headerInteractive</code> property is set to true.
    */
-  onHeaderClick?: (event: CustomEvent<{}>) => void;
+  onHeaderClick?: (event: CustomEvent) => void;
 }
 
 /**

packages/main/scripts/create-web-components-wrapper.js

@@ -43,7 +43,7 @@ export interface CarouselPropTypes extends WithWebComponentPropTypes {
   /**
    * Fired for the last items of the <code>Carousel</code> if it is scrolled and the direction of scrolling is to the end. The number of items for which the event is thrown is controlled by the <code>infiniteScrollOffset</code> property.
    */
-  onLoadMore?: (event: CustomEvent<{}>) => void;
+  onLoadMore?: (event: CustomEvent) => void;
   /**
    * Fired whenever the <code>selectedIndex</code> changes due to user interaction, when the user clicks on the navigation arrows or while resizing, based on the <code>items-per-page-l</code>, <code>items-per-page-m</code> and <code>items-per-page-s</code> properties.
    */

packages/main/src/webComponents/Button/index.tsx

@@ -39,7 +39,7 @@ export interface CheckBoxPropTypes extends Omit<WithWebComponentPropTypes, 'onCh
   /**
    * Fired when the <code>CheckBox</code> checked state changes.
    */
-  onChange?: (event: CustomEvent<{}>) => void;
+  onChange?: (event: CustomEvent) => void;
 }
 
 /**

packages/main/src/webComponents/Card/index.tsx

@@ -49,11 +49,11 @@ export interface ComboBoxPropTypes extends Omit<WithWebComponentPropTypes, 'onCh
   /**
    * Fired when the input operation has finished by pressing Enter, focusout or an item is selected.
    */
-  onChange?: (event: CustomEvent<{}>) => void;
+  onChange?: (event: CustomEvent) => void;
   /**
    * Fired when typing in input. <br><br> <b>Note:</b> filterValue property is updated, input is changed.
    */
-  onInput?: (event: CustomEvent<{}>) => void;
+  onInput?: (event: CustomEvent) => void;
 }
 
 /**

packages/main/src/webComponents/Carousel/index.tsx

@@ -19,7 +19,7 @@ export interface CustomListItemPropTypes extends WithWebComponentPropTypes {
   /**
    * Fired when the user clicks on the detail button when type is <code>Detail</code>.
    */
-  onDetailClick?: (event: CustomEvent<{}>) => void;
+  onDetailClick?: (event: CustomEvent) => void;
 }
 
 /**

packages/main/src/webComponents/CheckBox/index.tsx

@@ -66,11 +66,11 @@ export interface DatePickerPropTypes extends Omit<WithWebComponentPropTypes, 'on
   /**
    * Fired when the input operation has finished by pressing Enter or on focusout.
    */
-  onChange?: (event: CustomEvent<{}>) => void;
+  onChange?: (event: CustomEvent) => void;
   /**
    * Fired when the value of the <code>DatePicker</code> is changed at each key stroke.
    */
-  onInput?: (event: CustomEvent<{}>) => void;
+  onInput?: (event: CustomEvent) => void;
 }
 
 /**

packages/main/src/webComponents/ComboBox/index.tsx

@@ -70,11 +70,11 @@ export interface DateRangePickerPropTypes extends Omit<WithWebComponentPropTypes
   /**
    * Fired when the input operation has finished by pressing Enter or on focusout.
    */
-  onChange?: (event: CustomEvent<{}>) => void;
+  onChange?: (event: CustomEvent) => void;
   /**
    * Fired when the value of the <code>DatePicker</code> is changed at each key stroke.
    */
-  onInput?: (event: CustomEvent<{}>) => void;
+  onInput?: (event: CustomEvent) => void;
 }
 
 /**

packages/main/src/webComponents/CustomListItem/index.tsx

@@ -66,11 +66,11 @@ export interface DateTimePickerPropTypes extends Omit<WithWebComponentPropTypes,
   /**
    * Fired when the input operation has finished by pressing Enter or on focusout.
    */
-  onChange?: (event: CustomEvent<{}>) => void;
+  onChange?: (event: CustomEvent) => void;
   /**
    * Fired when the value of the <code>DatePicker</code> is changed at each key stroke.
    */
-  onInput?: (event: CustomEvent<{}>) => void;
+  onInput?: (event: CustomEvent) => void;
 }
 
 /**

packages/main/src/webComponents/DatePicker/index.tsx

@@ -34,19 +34,19 @@ export interface DialogPropTypes extends WithWebComponentPropTypes {
   /**
    * Fired after the component is closed. This event does not bubble.
    */
-  onAfterClose?: (event: CustomEvent<{}>) => void;
+  onAfterClose?: (event: CustomEvent) => void;
   /**
    * Fired after the component is opened. This event does not bubble.
    */
-  onAfterOpen?: (event: CustomEvent<{}>) => void;
+  onAfterOpen?: (event: CustomEvent) => void;
   /**
    * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble.
    */
   onBeforeClose?: (event: CustomEvent<{ escPressed: boolean }>) => void;
   /**
    * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble.
    */
-  onBeforeOpen?: (event: CustomEvent<{}>) => void;
+  onBeforeOpen?: (event: CustomEvent) => void;
 }
 
 /**

packages/main/src/webComponents/DateRangePicker/index.tsx

@@ -48,7 +48,7 @@ export interface DurationPickerPropTypes extends Omit<WithWebComponentPropTypes,
   /**
    * Fired when the input operation has finished by pressing Enter or on focusout.
    */
-  onChange?: (event: CustomEvent<{}>) => void;
+  onChange?: (event: CustomEvent) => void;
 }
 
 /**

packages/main/src/webComponents/DateTimePicker/index.tsx

@@ -70,15 +70,15 @@ export interface InputPropTypes extends Omit<WithWebComponentPropTypes, 'onChang
   /**
    * Fired when the input operation has finished by pressing Enter or on focusout.
    */
-  onChange?: (event: CustomEvent<{}>) => void;
+  onChange?: (event: CustomEvent) => void;
   /**
    * Fired when the value of the <code>Input</code> changes at each keystroke, and when a suggestion item has been selected.
    */
-  onInput?: (event: CustomEvent<{}>) => void;
+  onInput?: (event: CustomEvent) => void;
   /**
    * Fired when user presses Enter key on the <code>Input</code>. <br><br> <b>Note:</b> The event is fired independent of whether there was a change before or not. If change was performed, the event is fired after the change event. The event is also fired when an item of the select list is selected by pressing Enter.
    */
-  onSubmit?: (event: CustomEvent<{}>) => void;
+  onSubmit?: (event: CustomEvent) => void;
   /**
    * Fired when the user navigates to a suggestion item via the ARROW keys, as a preview, before the final selection.
    */

packages/main/src/webComponents/Dialog/index.tsx

@@ -31,7 +31,7 @@ export interface LinkPropTypes extends Omit<WithWebComponentPropTypes, 'onClick'
   /**
    * Fired when the <code>Link</code> is triggered either with a mouse/tap or by using the Enter key.
    */
-  onClick?: (event: CustomEvent<{}>) => void;
+  onClick?: (event: CustomEvent) => void;
 }
 
 /**