Add ts lint rule for consistent type imports (#668)

- add rule and apply across packages - Create loud-doors-melt.md Author: nedredmond Reviewers: jeremywiebe, kevinbarabash, handeyeco Required Reviewers: Approved By: jeremywiebe Checks: ✅ finish_coverage, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Cypress Coverage (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ gerald, ✅ Check for .changeset file (ubuntu-latest, 16.x) Pull Request URL: #668
Khan · Aug 15, 2023 · afb14cf · afb14cf
1 parent 410d490
commit afb14cf
Show file tree

Hide file tree

Showing 66 changed files with 162 additions and 124 deletions.
diff --git a/.changeset/loud-doors-melt.md b/.changeset/loud-doors-melt.md
@@ -0,0 +1,8 @@
+---
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+"@khanacademy/simple-markdown": patch
+---
+
+Add eslint rule to make type imports consistent
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -336,5 +336,6 @@ module.exports = {
          * typescript
          */
         "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/consistent-type-imports": "error",
     },
 };
diff --git a/packages/math-input/src/components/input/math-wrapper.ts b/packages/math-input/src/components/input/math-wrapper.ts
@@ -16,8 +16,6 @@
 
 import $ from "jquery";
 
-import Key from "../../data/keys";
-import {Cursor} from "../../types";
 import handleBackspace from "../key-handlers/handle-backspace";
 import keyTranslator from "../key-handlers/key-translator";
 
@@ -27,7 +25,13 @@ import {
     maybeFindCommand,
 } from "./mathquill-helpers";
 import {createMathField, mathQuillInstance} from "./mathquill-instance";
-import {MathFieldInterface, MathFieldUpdaterCallback} from "./mathquill-types";
+
+import type Key from "../../data/keys";
+import type {Cursor} from "../../types";
+import type {
+    MathFieldInterface,
+    MathFieldUpdaterCallback,
+} from "./mathquill-types";
 
 const mobileKeyTranslator: Record<Key, MathFieldUpdaterCallback> = {
     ...keyTranslator,

diff --git a/packages/math-input/src/components/input/mathquill-helpers.ts b/packages/math-input/src/components/input/mathquill-helpers.ts
@@ -1,10 +1,8 @@
 import {CursorContext} from "./cursor-contexts";
 import {mathQuillInstance} from "./mathquill-instance";
-import {
-    MathFieldActionType,
-    MathFieldCursor,
-    MathFieldInterface,
-} from "./mathquill-types";
+import {MathFieldActionType} from "./mathquill-types";
+
+import type {MathFieldCursor, MathFieldInterface} from "./mathquill-types";
 
 const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const GreekLetters = ["\\theta", "\\pi"];

diff --git a/packages/math-input/src/components/input/mathquill-instance.ts b/packages/math-input/src/components/input/mathquill-instance.ts
@@ -1,6 +1,6 @@
 import MathQuill from "mathquill";
 
-import {MathQuillInterface, MathFieldConfig} from "./mathquill-types";
+import type {MathQuillInterface, MathFieldConfig} from "./mathquill-types";
 
 // We only need one MathQuill instance (referred to as MQ in the docs)
 // and that contains some MQ constants and the MathField constructor

diff --git a/packages/math-input/src/components/input/mathquill-types.ts b/packages/math-input/src/components/input/mathquill-types.ts
@@ -1,4 +1,4 @@
-import Key from "../../data/keys";
+import type Key from "../../data/keys";
 
 export interface MathQuillInterface {
     L: "L";

diff --git a/packages/math-input/src/components/key-handlers/handle-arrow.ts b/packages/math-input/src/components/key-handlers/handle-arrow.ts
@@ -1,13 +1,14 @@
-import Key from "../../data/keys";
 import {
     maybeFindCommand,
     maybeFindCommandBeforeParens,
     getCursor,
 } from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
+import {MathFieldActionType} from "../input/mathquill-types";
+
+import type Key from "../../data/keys";
+import type {
     MathFieldInterface,
-    MathFieldActionType,
     MathFieldCursor,
 } from "../input/mathquill-types";
 

diff --git a/packages/math-input/src/components/key-handlers/handle-backspace.ts b/packages/math-input/src/components/key-handlers/handle-backspace.ts
@@ -10,8 +10,9 @@ import {
     maybeFindCommandBeforeParens,
 } from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
-    MathFieldActionType,
+import {MathFieldActionType} from "../input/mathquill-types";
+
+import type {
     MathFieldInterface,
     MathFieldCursor,
 } from "../input/mathquill-types";

diff --git a/packages/math-input/src/components/key-handlers/handle-exponent.ts b/packages/math-input/src/components/key-handlers/handle-exponent.ts
@@ -1,10 +1,9 @@
-import Key from "../../data/keys";
 import {getCursor} from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
-    MathFieldInterface,
-    MathFieldActionType,
-} from "../input/mathquill-types";
+import {MathFieldActionType} from "../input/mathquill-types";
+
+import type Key from "../../data/keys";
+import type {MathFieldInterface} from "../input/mathquill-types";
 
 const ArithmeticOperators = ["+", "-", "\\cdot", "\\times", "\\div"];
 const EqualityOperators = ["=", "\\neq", "<", "\\leq", ">", "\\geq"];

diff --git a/packages/math-input/src/components/key-handlers/handle-jump-out.ts b/packages/math-input/src/components/key-handlers/handle-jump-out.ts
@@ -1,4 +1,3 @@
-import Key from "../../data/keys";
 import {CursorContext} from "../input/cursor-contexts";
 import {
     isFraction,
@@ -7,10 +6,10 @@ import {
     getCursor,
 } from "../input/mathquill-helpers";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
-    MathFieldInterface,
-    MathFieldActionType,
-} from "../input/mathquill-types";
+import {MathFieldActionType} from "../input/mathquill-types";
+
+import type Key from "../../data/keys";
+import type {MathFieldInterface} from "../input/mathquill-types";
 
 const KeysForJumpContext = {
     [CursorContext.IN_PARENS]: "JUMP_OUT_PARENTHESES",

diff --git a/packages/math-input/src/components/key-handlers/key-translator.ts b/packages/math-input/src/components/key-handlers/key-translator.ts
@@ -1,16 +1,17 @@
-import Key from "../../data/keys";
 import {DecimalSeparator} from "../../enums";
 import {decimalSeparator} from "../../utils";
 import {mathQuillInstance} from "../input/mathquill-instance";
-import {
-    MathFieldInterface,
-    MathFieldUpdaterCallback,
-} from "../input/mathquill-types";
 
 import handleArrow from "./handle-arrow";
 import handleExponent from "./handle-exponent";
 import handleJumpOut from "./handle-jump-out";
 
+import type Key from "../../data/keys";
+import type {
+    MathFieldInterface,
+    MathFieldUpdaterCallback,
+} from "../input/mathquill-types";
+
 enum ActionType {
     WRITE = "write",
     CMD = "cmd",

diff --git a/packages/math-input/src/components/keypad-legacy/compute-layout-parameters.ts b/packages/math-input/src/components/keypad-legacy/compute-layout-parameters.ts
@@ -27,7 +27,7 @@ import {
     innerBorderWidthPx,
 } from "../common-style";
 
-import {GridDimensions, WidthHeight} from "./store/types";
+import type {GridDimensions, WidthHeight} from "./store/types";
 
 const minButtonHeight = 48;
 const maxButtonSize = 64;

diff --git a/packages/math-input/src/components/keypad-legacy/echo-manager.tsx b/packages/math-input/src/components/keypad-legacy/echo-manager.tsx
@@ -6,12 +6,12 @@ import * as React from "react";
 import {TransitionGroup, CSSTransition} from "react-transition-group";
 
 import KeyConfigs from "../../data/key-configs";
-import Key from "../../data/keys";
 import {EchoAnimationType} from "../../enums";
 
 import KeypadButton from "./keypad-button";
 import * as zIndexes from "./z-indexes";
 
+import type Key from "../../data/keys";
 import type {Bound, Echo as EchoType} from "../../types";
 
 type EchoProps = {

diff --git a/packages/math-input/src/components/keypad-legacy/empty-keypad-button.tsx b/packages/math-input/src/components/keypad-legacy/empty-keypad-button.tsx
@@ -7,9 +7,9 @@ import {connect} from "react-redux";
 
 import KeyConfigs from "../../data/key-configs";
 
-import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
 
+import type GestureManager from "./gesture-manager";
 import type {State} from "./store/types";
 
 interface ReduxProps {

diff --git a/packages/math-input/src/components/keypad-legacy/gesture-manager.ts b/packages/math-input/src/components/keypad-legacy/gesture-manager.ts
@@ -3,15 +3,15 @@
  * connects our various bits of logic for managing gestures and interactions,
  * and links them together.
  */
-import * as React from "react";
-
-import Key from "../../data/keys";
-import {ActiveNodesObj, LayoutProps} from "../../types";
 
 import GestureStateMachine from "./gesture-state-machine";
 import NodeManager from "./node-manager";
 import PopoverStateMachine from "./popover-state-machine";
 
+import type Key from "../../data/keys";
+import type {ActiveNodesObj, LayoutProps} from "../../types";
+import type * as React from "react";
+
 const coordsForEvent = (evt) => {
     return [evt.changedTouches[0].clientX, evt.changedTouches[0].clientY];
 };

diff --git a/packages/math-input/src/components/keypad-legacy/gesture-state-machine.ts b/packages/math-input/src/components/keypad-legacy/gesture-state-machine.ts
@@ -1,4 +1,4 @@
-import Key from "../../data/keys";
+import type Key from "../../data/keys";
 
 /**
  * The state machine that backs our gesture system. In particular, this state

diff --git a/packages/math-input/src/components/keypad-legacy/keypad-button.tsx b/packages/math-input/src/components/keypad-legacy/keypad-button.tsx
@@ -6,7 +6,7 @@ import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 import {connect} from "react-redux";
 
-import {BorderDirection, BorderStyles, KeyType, KeyTypes} from "../../enums";
+import {BorderDirection, BorderStyles, KeyTypes} from "../../enums";
 import {View} from "../../fake-react-native-web/index";
 import {
     wonderBlocksBlue,
@@ -23,6 +23,7 @@ import CornerDecal from "./corner-decal";
 import Icon from "./icon";
 import MultiSymbolGrid from "./multi-symbol-grid";
 
+import type {KeyType} from "../../enums";
 import type {Border, NonManyKeyConfig, IconConfig} from "../../types";
 import type {State} from "./store/types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";

diff --git a/packages/math-input/src/components/keypad-legacy/many-keypad-button.tsx b/packages/math-input/src/components/keypad-legacy/many-keypad-button.tsx
@@ -7,11 +7,12 @@ import * as React from "react";
 
 import KeyConfigs from "../../data/key-configs";
 import {IconType} from "../../enums";
-import {KeyConfig} from "../../types";
 
 import EmptyKeypadButton from "./empty-keypad-button";
 import TouchableKeypadButton from "./touchable-keypad-button";
 
+import type {KeyConfig} from "../../types";
+
 type Props = {
     keys: ReadonlyArray<string>;
 };

diff --git a/packages/math-input/src/components/keypad-legacy/multi-symbol-grid.tsx b/packages/math-input/src/components/keypad-legacy/multi-symbol-grid.tsx
@@ -8,12 +8,13 @@ import * as React from "react";
 
 import {IconType} from "../../enums";
 import {View} from "../../fake-react-native-web/index";
-import {IconConfig} from "../../types";
 import {iconSizeHeightPx, iconSizeWidthPx} from "../common-style";
 
 import Icon from "./icon";
 import Styles from "./styles";
 
+import type {IconConfig} from "../../types";
+
 const {row, column, centered, fullWidth} = Styles;
 
 type Props = {

diff --git a/packages/math-input/src/components/keypad-legacy/multi-symbol-popover.tsx b/packages/math-input/src/components/keypad-legacy/multi-symbol-popover.tsx
@@ -7,11 +7,12 @@ import * as React from "react";
 
 import {BorderStyles} from "../../enums";
 import {View} from "../../fake-react-native-web/index";
-import {KeyConfig} from "../../types";
 
 import TouchableKeypadButton from "./touchable-keypad-button";
 import * as zIndexes from "./z-indexes";
 
+import type {KeyConfig} from "../../types";
+
 type Prop = {
     keys: ReadonlyArray<KeyConfig>;
 };

diff --git a/packages/math-input/src/components/keypad-legacy/node-manager.ts b/packages/math-input/src/components/keypad-legacy/node-manager.ts
@@ -1,4 +1,4 @@
-import {LayoutProps, Bound} from "../../types";
+import type {LayoutProps, Bound} from "../../types";
 /**
  * A manager for our node-to-ID system. In particular, this class is
  * responsible for maintaing a mapping between DOM nodes and node IDs, and

diff --git a/packages/math-input/src/components/keypad-legacy/store/actions.ts b/packages/math-input/src/components/keypad-legacy/store/actions.ts
@@ -1,5 +1,4 @@
-import Key from "../../../data/keys";
-
+import type Key from "../../../data/keys";
 import type {
     Bound,
     KeypadConfiguration,

diff --git a/packages/math-input/src/components/keypad-legacy/store/index.ts b/packages/math-input/src/components/keypad-legacy/store/index.ts
@@ -1,6 +1,5 @@
 import * as Redux from "redux";
 
-import Key from "../../../data/keys";
 import GestureManager from "../gesture-manager";
 
 import {setActiveNodes, pressKey} from "./actions";
@@ -10,6 +9,7 @@ import keypadReducer from "./keypad-reducer";
 import layoutReducer from "./layout-reducer";
 import {defaultKeypadType, keypadForType} from "./shared";
 
+import type Key from "../../../data/keys";
 import type {LayoutProps, ActiveNodesObj} from "../../../types";
 import type {Action} from "./actions";
 import type {GestureState} from "./types";

diff --git a/packages/math-input/src/components/keypad-legacy/store/types.ts b/packages/math-input/src/components/keypad-legacy/store/types.ts
@@ -1,8 +1,7 @@
-import Key from "../../../data/keys";
-import {LayoutMode, KeypadType} from "../../../enums";
-import GestureManager from "../gesture-manager";
-
+import type Key from "../../../data/keys";
+import type {LayoutMode, KeypadType} from "../../../enums";
 import type {Cursor, KeyHandler, Popover, Echo} from "../../../types";
+import type GestureManager from "../gesture-manager";
 
 // Interaction between keypad and input
 export interface InputState {

diff --git a/packages/math-input/src/components/keypad-legacy/touchable-keypad-button.tsx b/packages/math-input/src/components/keypad-legacy/touchable-keypad-button.tsx
@@ -10,13 +10,13 @@ import ReactDOM from "react-dom";
 import {connect} from "react-redux";
 
 import KeyConfigs from "../../data/key-configs";
-import Key from "../../data/keys";
-import {KeyType} from "../../enums";
 
-import GestureManager from "./gesture-manager";
 import KeypadButton from "./keypad-button";
 
+import type Key from "../../data/keys";
+import type {KeyType} from "../../enums";
 import type {Border, IconConfig, KeyConfig} from "../../types";
+import type GestureManager from "./gesture-manager";
 import type {State} from "./store/types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 

diff --git a/packages/math-input/src/components/keypad-legacy/two-page-keypad.tsx b/packages/math-input/src/components/keypad-legacy/two-page-keypad.tsx
@@ -17,10 +17,10 @@ import {
 import Tabbar from "../tabbar";
 
 import Keypad from "./keypad";
-import {State as ReduxState} from "./store/types";
 import Styles from "./styles";
 
 import type {TabbarItemType} from "../tabbar";
+import type {State as ReduxState} from "./store/types";
 
 const {column, row, fullWidth} = Styles;
 

diff --git a/packages/math-input/src/components/keypad-switch.tsx b/packages/math-input/src/components/keypad-switch.tsx
@@ -1,9 +1,10 @@
-import {StyleType} from "@khanacademy/wonder-blocks-core";
 import * as React from "react";
 
 import {MobileKeypad} from "./keypad";
 import LegacyKeypad from "./keypad-legacy";
 
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
 type Props = {
     onElementMounted?: (arg1: any) => void;
     onDismiss?: () => void;

diff --git a/packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx b/packages/math-input/src/components/keypad/__tests__/keypad-v2-mathquill.test.tsx
@@ -1,4 +1,3 @@
-import {PerseusAnalyticsEvent} from "@khanacademy/perseus-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Popover} from "@khanacademy/wonder-blocks-popover";
 import {render, screen} from "@testing-library/react";
@@ -7,12 +6,14 @@ import * as React from "react";
 
 import "@testing-library/jest-dom";
 
-import Key from "../../../data/keys";
 import {createMathField} from "../../input/mathquill-instance";
-import {MathFieldInterface} from "../../input/mathquill-types";
 import keyTranslator from "../../key-handlers/key-translator";
 import Keypad from "../index";
 
+import type Key from "../../../data/keys";
+import type {MathFieldInterface} from "../../input/mathquill-types";
+import type {PerseusAnalyticsEvent} from "@khanacademy/perseus-core";
+
 type Props = {
     onChangeMathInput: (mathInputTex: string) => void;
     keypadClosed?: boolean;

diff --git a/packages/math-input/src/components/keypad/button-assets.tsx b/packages/math-input/src/components/keypad/button-assets.tsx
@@ -12,7 +12,7 @@ no copying and pasting is necessary.
 */
 import * as React from "react";
 
-import Key from "../../data/keys";
+import type Key from "../../data/keys";
 
 type Props = {id: Key};