style: add eslint-plugin-import and extensions to import paths (#376)

* chore: add `eslint-plugin-import` * style: add files extensions to internal import paths * docs: replace v5 with v6 * chore: limit `typescript` peer of configuration to be consistent with root * style: fix type-only imports and add a workaround for `export type` * style: `enum` cannot be used with import type Co-authored-by: wsuwt <wasuwat.limsuparhat@refinitiv.com>
Refinitiv · Jun 27, 2022 · 67fd03f · 67fd03f
1 parent e38f9a5
commit 67fd03f
Show file tree

Hide file tree

Showing 39 changed files with 1,242 additions and 750 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/configurations/README.md b/packages/configurations/README.md
@@ -25,7 +25,7 @@ You can override/use your own files to meet project requirements.
 
 ## TypeScript support
 
-Below configurations are used with TypeScript (Element Framework v5).
+Below configurations are used with TypeScript (Element Framework v6).
 
 ### .eslintrc
 

diff --git a/packages/configurations/package.json b/packages/configurations/package.json
@@ -13,7 +13,7 @@
   },
   "keywords": [
     "Element Framework",
-    "v5",
+    "v6",
     "configurations",
     "eslint",
     "tsconfig",
@@ -22,13 +22,14 @@
   "author": "Refinitiv",
   "license": "Apache-2.0",
   "peerDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.12.0",
-    "@typescript-eslint/parser": "^5.12.0",
-    "eslint": "^8.9.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "eslint": "^8.18.0",
     "eslint-plugin-html": "^6.2.0",
-    "typescript": "^4.6.2"
+    "eslint-plugin-import": "^2.26.0",
+    "typescript": "~4.6.4"
   },
   "publishConfig": {
     "access": "public"
   }
-}
+}
diff --git a/packages/configurations/typescript.eslint-config.js b/packages/configurations/typescript.eslint-config.js
@@ -1,28 +1,30 @@
 module.exports = {
-  extends: [
-    "./eslint-config.js"
-  ],
-  "overrides": [
+  extends: ['./eslint-config.js'],
+  overrides: [
     {
-      files: ["*.ts", "*.tsx"],
-      parser: "@typescript-eslint/parser",
-      plugins: ["@typescript-eslint"],
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      plugins: ['@typescript-eslint', 'eslint-plugin-import'],
       extends: [
-        "./eslint-config.js",
-        "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/recommended-requiring-type-checking"
+        './eslint-config.js',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:@typescript-eslint/recommended-requiring-type-checking',
       ],
-      "parserOptions": {
-        "extraFileExtensions": [".html"]
+      parserOptions: {
+        extraFileExtensions: ['.html'],
+      },
+      rules: {
+        'import/extensions': ['error', 'always'],
+        '@typescript-eslint/unbound-method': 0,
+        'valid-jsdoc': [
+          2,
+          {
+            requireReturnType: false,
+            requireParamType: false,
+          },
+        ],
       },
-      "rules": {
-        "@typescript-eslint/unbound-method": 0,
-        "valid-jsdoc": [2, {
-          "requireReturnType": false,
-          "requireParamType": false
-        }]
-      }
-    }
-  ]
+    },
+  ],
 };
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -43,14 +43,18 @@ export { DeprecationNotice } from './notices/DeprecationNotice.js';
  * Export events
  */
 export { TapEvent } from './events/TapEvent.js';
-export type { FocusedChangedEvent } from './types/events';
+import type { FocusedChangedEvent } from './types/events';
+export type { FocusedChangedEvent };
 
 /**
  * Export common interfaces
  */
-export type { MultiValue } from './interfaces/MultiValue';
-export type { StyleMap } from './interfaces/StyleMap';
-export type { StyleInfo } from './interfaces/StyleInfo';
+import type { MultiValue } from './interfaces/MultiValue';
+export type { MultiValue };
+import type { StyleMap } from './interfaces/StyleMap';
+export type { StyleMap };
+import type { StyleInfo } from './interfaces/StyleInfo';
+export type { StyleInfo };
 
 /**
  * Export useful utils

diff --git a/packages/demo-block/src/demo-block.ts b/packages/demo-block/src/demo-block.ts
@@ -111,7 +111,7 @@ themeLabel.style.textTransform = 'uppercase';
 themeLabel.innerHTML = removePrefixName(currentTheme);
 
 const versionTag = document.createElement('span');
-versionTag.innerHTML = 'V5';
+versionTag.innerHTML = 'V6';
 versionTag.style.marginLeft = '8px';
 versionTag.style.color = '#334BFF';
 themeLabel.appendChild(versionTag);

diff --git a/packages/elements/src/autosuggest/helpers/renderer.ts b/packages/elements/src/autosuggest/helpers/renderer.ts
@@ -1,6 +1,6 @@
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
 import { updateElementContent } from './utils.js';
-import { AutosuggestQuery, AutosuggestRenderer, Suggestion, AutosuggestItem } from './types';
+import type { AutosuggestQuery, AutosuggestRenderer, Suggestion, AutosuggestItem } from './types';
 
 /**
  * Build item element from data object

diff --git a/packages/elements/src/autosuggest/helpers/utils.ts b/packages/elements/src/autosuggest/helpers/utils.ts
@@ -1,5 +1,5 @@
 import type { Item } from '../../item';
-import { AutosuggestHighlightable, AutosuggestItem } from './types';
+import type { AutosuggestHighlightable, AutosuggestItem } from './types';
 
 /**
  * Check whether item can be highlighted

diff --git a/packages/elements/src/autosuggest/index.ts b/packages/elements/src/autosuggest/index.ts
@@ -19,7 +19,7 @@ import {
   TranslateDirective,
   TranslatePropertyKey
 } from '@refinitiv-ui/translate';
-import { TapEvent } from '../events';
+import type { TapEvent } from '../events';
 import type {
   AutosuggestTargetElement,
   AutosuggestHighlightable,
@@ -39,6 +39,17 @@ import '../loader/index.js';
 import '../item/index.js';
 import '@refinitiv-ui/phrasebook/locale/en/autosuggest.js';
 
+import type {
+  ItemHighlightEvent,
+  AddAttachTargetEventsEvent,
+  RemoveAttachTargetEventsEvent,
+  ItemSelectEvent,
+  SuggestionsFetchRequestedEvent,
+  SuggestionsClearRequestedEvent,
+  SuggestionsQueryEvent,
+  SuggestionsChangedEvent
+} from './helpers/types';
+
 export type {
   AutosuggestTargetElement,
   AutosuggestHighlightable,
@@ -55,7 +66,8 @@ export type {
   SuggestionsClearRequestedEvent,
   SuggestionsQueryEvent,
   SuggestionsChangedEvent
-} from './helpers/types';
+};
+
 export { updateElementContent } from './helpers/utils.js';
 export {
   itemHighlightable,

diff --git a/packages/elements/src/calendar/index.ts b/packages/elements/src/calendar/index.ts
@@ -71,7 +71,7 @@ import {
   YEAR_VIEW,
   MONTH_VIEW
 } from './constants.js';
-import {
+import type {
   Cell,
   Row,
   Comparator,

diff --git a/packages/elements/src/combo-box/index.ts b/packages/elements/src/combo-box/index.ts
@@ -22,16 +22,18 @@ import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js'
 import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
-import { ItemData } from '../item';
-import { ComboBoxData, ComboBoxFilter } from './helpers/types';
-import type { List } from '../list/index.js';
 import { ComboBoxRenderer } from './helpers/renderer.js';
 import { defaultFilter } from './helpers/filter.js';
 import { CustomKeyboardEvent } from './helpers/keyboard-event.js';
 import '../icon/index.js';
 import '../overlay/index.js';
 import '../list/index.js';
 import '../counter/index.js';
+
+import type { ItemData } from '../item';
+import type { ComboBoxData, ComboBoxFilter } from './helpers/types';
+import type { List } from '../list';
+
 import { translate, TranslateDirective } from '@refinitiv-ui/translate';
 import '@refinitiv-ui/phrasebook/locale/en/combo-box.js';
 

diff --git a/packages/elements/src/datetime-field/index.ts b/packages/elements/src/datetime-field/index.ts
@@ -26,7 +26,7 @@ import {
   TranslatePropertyKey
 } from '@refinitiv-ui/translate';
 import { Direction } from './constants.js';
-import {
+import type {
   NavigationKeys,
   DateTimeFormatPart,
   InputSelection

diff --git a/packages/elements/src/datetime-field/utils.ts b/packages/elements/src/datetime-field/utils.ts
@@ -1,5 +1,5 @@
-import { DateTimeFormatPart, DateTimeFormatPartTypes, InputSelection } from './types';
 import { Direction } from './constants.js';
+import type { DateTimeFormatPart, DateTimeFormatPartTypes, InputSelection } from './types';
 
 const IterablePartTypes: DateTimeFormatPartTypes[] = ['year', 'day', 'month', 'hour', 'minute', 'second', 'weekday', 'dayPeriod', 'fractionalSecond'];
 

diff --git a/packages/elements/src/heatmap/index.ts b/packages/elements/src/heatmap/index.ts
@@ -19,13 +19,13 @@ import '../tooltip/index.js';
 
 import { Track } from './helpers/track.js';
 import { blend, brighten, darken, isLight, interpolate } from './helpers/color.js';
-import type { HeatmapCell, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback } from './helpers/types';
 import { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE } from './helpers/text.js';
 
 const MAX_CELL_WIDTH_RATIO = 0.85;
 const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
 
-export type { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties } from './helpers/types';
+import type { HeatmapXAxis, HeatmapCell, HeatmapConfig, HeatmapYAxis, HeatmapCustomisableProperties, HeatmapTooltipCallback, HeatmapRenderCallback } from './helpers/types';
+export type { HeatmapXAxis, HeatmapCell, HeatmapConfig, HeatmapYAxis, HeatmapCustomisableProperties, HeatmapTooltipCallback, HeatmapRenderCallback };
 
 /**
  * A graphical representation of data where the individual

diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
@@ -1,3 +1,3 @@
 export { VERSION } from './version.js';
-export * from './events';
+export * from './events.js';
 export * from '@refinitiv-ui/core';
diff --git a/packages/elements/src/item/helpers/types.ts b/packages/elements/src/item/helpers/types.ts
@@ -1,6 +1,6 @@
 import type { DataItem } from '@refinitiv-ui/utils/collection.js';
 
-export type ItemType = 'text' | 'header' | 'divider';
+type ItemType = 'text' | 'header' | 'divider';
 
 interface CommonItem extends DataItem {
   /**
@@ -27,7 +27,7 @@ interface CommonLabelItem extends CommonItem {
 /**
  * Maps to a text/generic type ef-item
  */
-export interface ItemText extends CommonLabelItem {
+interface ItemText extends CommonLabelItem {
   type?: 'text';
   /**
    * Value of the item
@@ -46,18 +46,20 @@ export interface ItemText extends CommonLabelItem {
 /**
  * Maps to `ef-item[type=header]`
  */
-export interface ItemHeader extends CommonLabelItem {
+interface ItemHeader extends CommonLabelItem {
   type: 'header';
 }
 
 /**
  * Maps to `ef-item[type=divider]`
  */
-export interface ItemDivider extends CommonItem {
+interface ItemDivider extends CommonItem {
   type: 'divider';
 }
 
 /**
  * Used to construct a collection of items
  */
-export type ItemData = ItemText | ItemHeader | ItemDivider;
+type ItemData = ItemText | ItemHeader | ItemDivider;
+
+export type { ItemType, ItemText, ItemHeader, ItemDivider, ItemData };
diff --git a/packages/elements/src/item/index.ts b/packages/elements/src/item/index.ts
@@ -10,11 +10,11 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
 import { VERSION } from '../version.js';
-import type { ItemType } from './helpers/types';
 import '../icon/index.js';
 import '../checkbox/index.js';
 
-export * from './helpers/types';
+import type { ItemType, ItemText, ItemHeader, ItemDivider, ItemData } from './helpers/types';
+export type { ItemType, ItemText, ItemHeader, ItemDivider, ItemData };
 
 const isAllWhitespaceTextNode = (node: Node): boolean =>
   node.nodeType === document.TEXT_NODE

diff --git a/packages/elements/src/overlay-menu/helpers/constants.ts b/packages/elements/src/overlay-menu/helpers/constants.ts
@@ -0,0 +1,7 @@
+export enum Navigation {
+  FIRST = 'First',
+  LAST = 'Last',
+  NEXT = 'Next',
+  PREVIOUS = 'Previous',
+}
+
diff --git a/packages/elements/src/overlay-menu/helpers/types.ts b/packages/elements/src/overlay-menu/helpers/types.ts
@@ -8,11 +8,3 @@ export type NestedMenu = {
 };
 
 export type OverlayMenuData = ItemData[] | CollectionComposer<ItemData>;
-
-export enum Navigation {
-  FIRST = 'First',
-  LAST = 'Last',
-  NEXT = 'Next',
-  PREVIOUS = 'Previous',
-}
-
diff --git a/packages/elements/src/overlay-menu/index.ts b/packages/elements/src/overlay-menu/index.ts
@@ -20,8 +20,9 @@ import '../item/index.js';
 import { Item, ItemData } from '../item/index.js';
 import { Overlay, OverlayPosition, OverlayPositionTarget } from '../overlay/index.js';
 import { applyLock } from '../overlay/managers/interaction-lock-manager.js';
-import { OverlayMenuData, Navigation } from './helpers/types';
 import { OpenedMenusManager } from './managers/menu-manager.js';
+import { Navigation } from './helpers/constants.js';
+import type { OverlayMenuData } from './helpers/types';
 
 export type { OverlayMenuData };
 

diff --git a/packages/elements/src/overlay/index.ts b/packages/elements/src/overlay/index.ts
@@ -1,8 +1,13 @@
-export type {
+import type {
   Position as OverlayPosition,
   PositionTarget as OverlayPositionTarget,
   TransitionStyle as OverlayTransitionStyle
 } from './helpers/types';
+export type {
+  OverlayPosition,
+  OverlayPositionTarget,
+  OverlayTransitionStyle
+};
 
 export {
   Overlay

diff --git a/packages/elements/src/time-picker/index.ts b/packages/elements/src/time-picker/index.ts
@@ -12,7 +12,7 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { ValueChangedEvent, FocusedChangedEvent } from '../events';
+import type { ValueChangedEvent, FocusedChangedEvent } from '../events';
 import { VERSION } from '../version.js';
 import {
   isValidTime,

diff --git a/packages/elements/src/tree/index.ts b/packages/elements/src/tree/index.ts
@@ -1,4 +1,6 @@
 export * from './elements/tree.js';
 export * from './elements/tree-item.js';
 export { TreeRenderer } from './helpers/renderer.js';
-export type { TreeData, TreeDataItem } from './helpers/types';
+
+import type { TreeData, TreeDataItem } from './helpers/types';
+export type { TreeData, TreeDataItem };
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
@@ -1,11 +1,19 @@
-export type {
+import type {
   TranslateOptions,
   TranslateMessage,
   TranslateParams,
   UnicodeExtensions,
   MessageFormats,
   MessageOptions
 } from './types';
+export type {
+  TranslateOptions,
+  TranslateMessage,
+  TranslateParams,
+  UnicodeExtensions,
+  MessageFormats,
+  MessageOptions
+};
 
 export {
   LangObserverCallback,

diff --git a/packages/phrasebook/src/index.ts b/packages/phrasebook/src/index.ts
@@ -1,6 +1,9 @@
-export type {
+import type {
   Translations
 } from './types';
+export type {
+  Translations
+};
 
 export {
   Phrasebook,