chore(eslint): add eslint-plugin-import dependency

.eslintrc.cjs

@@ -16,10 +16,11 @@ limitations under the License.
 
 module.exports = {
   root: true,
-  plugins: ['notice', 'unicorn'],
+  plugins: ['notice', 'unicorn', 'import'],
   parser: '@typescript-eslint/parser', // Specifies the ESLint parser
   extends: [
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+    'plugin:import/recommended',
   ],
   parserOptions: {
     ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
@@ -39,6 +40,20 @@ module.exports = {
         },
       },
     ],
+    'import/newline-after-import': ['error', { count: 1 }],
+    'import/first': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: ['type', 'builtin', 'external', 'parent', 'sibling', 'index', 'internal'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          orderImportKind: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
   },
   overrides: [
     // typescript
@@ -48,7 +63,16 @@ module.exports = {
         'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
         'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
         'plugin:@typescript-eslint/stylistic',
+        'plugin:import/typescript',
       ],
+      settings: {
+        'import/resolver': {
+          typescript: {
+            alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
+            project: '**/tsconfig.json',
+          },
+        },
+      },
       parserOptions: {
         // This setting is required if you want to use rules which require type information
         // https://typescript-eslint.io/packages/parser/#project

dev/ts/component/SvgExporter.ts

@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { mxgraph, mxClient, mxConstants, mxSvgCanvas2D, mxUtils } from '../../../src/component/mxgraph/initializer';
 import type { mxGraph, mxSvgCanvas2D as mxSvgCanvas2DType } from 'mxgraph';
 
+import { mxgraph, mxClient, mxConstants, mxSvgCanvas2D, mxUtils } from '../../../src/component/mxgraph/initializer';
+
 interface SvgExportOptions {
   scale: number;
   border: number;

dev/ts/component/ThemedBpmnVisualization.ts

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import { BpmnVisualization, FlowKind, ShapeBpmnElementKind, ShapeUtil, StyleConfigurator, StyleDefault } from '../../../src/bpmn-visualization';
-import { logStartup } from '../shared/internal-helpers';
 import { mxConstants } from '../../../src/component/mxgraph/initializer';
+import { logStartup } from '../shared/internal-helpers';
 
 interface Theme {
   defaultFillColor: string;

dev/ts/pages/elements-identification.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import type { BpmnElementKind, BpmnSemantic, Overlay, ShapeStyleUpdate, StyleUpdate } from '../dev-bundle-index';
+
 import {
   addCssClasses,
   addOverlays,

dev/ts/pages/index.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import type { FitOptions, FitType } from '../dev-bundle-index';
+
 import {
   documentReady,
   handleFileSelect,

dev/ts/pages/overlays.ts

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import type { Overlay, OverlayPosition } from '../dev-bundle-index';
+
 import { addOverlays, configureControlsPanel, configureMousePointer, documentReady, getModelElementsByIds, removeAllOverlays, startBpmnVisualization } from '../dev-bundle-index';
 
 const bpmnIdInputElt = document.getElementById('bpmn-id-input') as HTMLInputElement;

dev/ts/shared/main.ts

@@ -14,7 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import type { mxCell } from 'mxgraph';
 import type {
   BpmnElementKind,
   BpmnSemantic,
@@ -31,14 +30,17 @@ import type {
   Version,
   ZoomType,
 } from '../../../src/bpmn-visualization';
+import type { mxCell } from 'mxgraph';
+
 import { FlowKind, ShapeBpmnElementKind } from '../../../src/bpmn-visualization';
-import { fetchBpmnContent, logDownload, logError, logErrorAndOpenAlert, logStartup } from './internal-helpers';
-import { log } from './shared-helpers';
+import { downloadAsPng, downloadAsSvg } from '../component/download';
 import { DropFileUserInterface } from '../component/DropFileUserInterface';
 import { SvgExporter } from '../component/SvgExporter';
-import { downloadAsPng, downloadAsSvg } from '../component/download';
 import { ThemedBpmnVisualization } from '../component/ThemedBpmnVisualization';
 
+import { fetchBpmnContent, logDownload, logError, logErrorAndOpenAlert, logStartup } from './internal-helpers';
+import { log } from './shared-helpers';
+
 let bpmnVisualization: ThemedBpmnVisualization;
 let loadOptions: LoadOptions = {};
 let statusKoNotifier: (errorMsg: string) => void;