Add the @typescript-eslint/consistent-type-imports eslint rule (#154)

Author: jorgea-stripe

.eslintrc.yml

@@ -45,3 +45,4 @@ rules:
   "@typescript-eslint/no-unused-vars":
     - 2
     - varsIgnorePattern: ^_
+  "@typescript-eslint/consistent-type-imports": "error"

.github/workflows/test.yml

@@ -11,6 +11,6 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 16.x
+          node-version: 18.20.2
       - run: yarn install --frozen-lockfile
       - run: yarn run validate-change

.node-version

@@ -1 +1 @@
-18.14.0
+18.20.2

package.json

@@ -16,11 +16,13 @@
     "test:unit": "jest",
     "lint": "eslint --max-warnings=0 '{src,examples}/**/*.{ts,tsx,js}'",
     "lint:prettier": "prettier './**/*.js' './**/*.ts' './**/*.tsx' './**/*.md' --list-different",
+    "lint-fix": "eslint '{src,types}/**/*.{ts,js}' --fix && yarn prettier",
     "typecheck": "tsc",
     "build": "yarn run clean && yarn run rollup -c",
     "checkimport": "scripts/check-imports",
     "clean": "rimraf dist",
     "prettier": "prettier './**/*.js' './**/*.ts' './**/*.tsx' './**/*.md' --write",
+    "prettier-check": "prettier './**/*.{js,ts,md,html,css}' --check",
     "doctoc": "doctoc README.md",
     "storybook": "start-storybook -p 6006 ",
     "local-install-publish": "yalc add @stripe/connect-js@1.0.0 && yalc publish",
@@ -53,18 +55,21 @@
     "@types/jest": "^24.0.25",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
+    "@typescript-eslint/eslint-plugin": "^7",
+    "@typescript-eslint/parser": "^7",
+    "@typescript-eslint/rule-tester": "^7",
+    "@typescript-eslint/scope-manager": "^7",
+    "@typescript-eslint/utils": "^7",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "conditional-type-checks": "^1.0.5",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.8.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jest": "^22.6.3",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jest": "^26.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.36.1",
+    "eslint-plugin-react-hooks": "5.2.0-canary-7b402084-20250107",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jsdom": "^22.0.0",

src/Components.tsx

@@ -1,7 +1,7 @@
-import {FetchEphemeralKeyFunction} from './types';
+import type {FetchEphemeralKeyFunction} from './types';
 import {useCreateComponent} from './useCreateComponent';
 import {useUpdateWithSetter} from './utils/useUpdateWithSetter';
-import {
+import type {
   LoadError,
   LoaderStart,
   NotificationCount,

src/ConnectComponents.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as connectJs from '@stripe/connect-js';
+import type * as connectJs from '@stripe/connect-js';
 
 type ConnectComponentsPayload = {
   connectInstance: connectJs.StripeConnectInstance;

src/useCreateComponent.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import * as React from 'react';
 import {useConnectComponents} from './ConnectComponents';
-import {
+import type {
   ConnectElementTagName,
   ConnectHTMLElementRecord,
 } from '@stripe/connect-js';

src/utils/useAttachAttribute.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 /**
- * @deprecated The method should not be used as we are deprecating the use of attributes directly. 
+ * @deprecated The method should not be used as we are deprecating the use of attributes directly.
  * Define a setter for your use case and use useUpdateWithSetter instead.
  */
 export const useAttachAttribute = (

src/utils/useUpdateWithSetter.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import {CollectionOptions} from '../Components';
-import {
+import type {CollectionOptions} from '../Components';
+import type {
   LoadError,
   LoaderStart,
   NotificationCount,
   StepChange,
   PaymentsListDefaultFilters,
 } from '@stripe/connect-js';
-import {FetchEphemeralKeyFunction} from '../types';
+import type {FetchEphemeralKeyFunction} from '../types';
 
 export const useUpdateWithSetter = <
   T extends HTMLElement,