chore: Add eslint import ordering to CI (#931)

### Change list

- Adds
[eslint-plugin-import](https://github.com/import-js/eslint-plugin-import)
for deterministic import ordering
- Checks in any auto-fixed changes

Closes #929

Author: kylebarron

.gitignore

@@ -1,3 +1,4 @@
+.vscode
 *.mov
 .mypy_cache
 *.html

eslint.config.js

@@ -3,6 +3,7 @@ import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
 import pluginReact from "eslint-plugin-react";
 import eslintConfigPrettier from "eslint-config-prettier";
+import pluginImport from "eslint-plugin-import";
 
 export default [
   { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
@@ -17,5 +18,27 @@ export default [
       },
     },
   },
+  // **Import sorting config**
+  {
+    plugins: {
+      import: pluginImport,
+    },
+    rules: {
+      "import/order": [
+        "error",
+        {
+          groups: [
+            "builtin",
+            "external",
+            "internal",
+            ["parent", "sibling", "index"],
+          ],
+          "newlines-between": "always",
+          alphabetize: { order: "asc", caseInsensitive: true },
+        },
+      ],
+      "import/newline-after-import": "error",
+    },
+  },
   eslintConfigPrettier,
 ];

package-lock.json

@@ -22,9 +22,9 @@
     "maplibre-gl": "^5.9.0",
     "memoize-one": "^6.0.0",
     "parquet-wasm": "0.7.1",
+    "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-map-gl": "^8.1.0",
-    "react": "^19.2.0",
     "uuid": "^13.0.0",
     "xstate": "^5.22.0"
   },
@@ -35,26 +35,27 @@
     "@jupyter-widgets/base": "^6.0.10",
     "@playwright/test": "^1.55.1",
     "@statelyai/inspect": "^0.4.0",
+    "@types/lodash": "^4.17.13",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.throttle": "^4.1.9",
-    "@types/lodash": "^4.17.13",
     "@types/react": "^19.1.1",
     "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.20",
     "dotenv": "^17.2.2",
     "esbuild": "^0.25.10",
+    "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.2",
-    "eslint": "^9.36.0",
     "globals": "^16.4.0",
     "nodemon": "^3.1.7",
+    "postcss": "^8.4.49",
     "postcss-modules": "^6.0.1",
     "postcss-preset-env": "^10.1.1",
-    "postcss": "^8.4.49",
     "prettier": "^3.4.1",
     "tailwindcss": "^3.4.15",
-    "typescript-eslint": "^8.16.0",
     "typescript": "^5.7.2",
+    "typescript-eslint": "^8.16.0",
     "vitest": "^2.1.6"
   },
   "overrides": {
@@ -77,6 +78,7 @@
     "prettier:check": "prettier './src/**/*.{ts,tsx,css}' --check",
     "prettier": "prettier './src/**/*.{ts,tsx,css}' --write",
     "lint": "eslint src",
+    "lint-fix": "eslint src --fix",
     "test": "vitest run",
     "pretest:e2e": "npm run build",
     "test:e2e": "playwright test",

package.json

@@ -1,7 +1,8 @@
 import * as arrow from "apache-arrow";
-import { parseParquetBuffers } from "./parquet.js";
 import { useState, useEffect } from "react";
 
+import { parseParquetBuffers } from "./parquet.js";
+
 type AccessorRaw = DataView[] | unknown;
 
 export function useTableBufferState(

src/accessor.ts

@@ -1,5 +1,6 @@
-import { FlyToMessage } from "../types";
 import { FlyToInterpolator, MapViewState } from "@deck.gl/core";
+
+import { FlyToMessage } from "../types";
 import { isDefined } from "../util";
 
 export function flyTo(

src/actions/fly-to.ts

@@ -1,31 +1,31 @@
-import * as React from "react";
-import { useEffect, useCallback, useState, useRef } from "react";
-import { createRender, useModelState, useModel } from "@anywidget/react";
+import { createRender, useModel, useModelState } from "@anywidget/react";
 import type { Initialize, Render } from "@anywidget/types";
 import { MapViewState, PickingInfo, type Layer } from "@deck.gl/core";
-import { BaseLayerModel, initializeLayer } from "./model/index.js";
+import { DeckGLRef } from "@deck.gl/react";
 import type { IWidgetManager, WidgetModel } from "@jupyter-widgets/base";
-import { initParquetWasm } from "./parquet.js";
-import { isDefined, loadChildModels } from "./util.js";
+import { NextUIProvider } from "@nextui-org/react";
+import throttle from "lodash.throttle";
+import * as React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { v4 as uuidv4 } from "uuid";
-import { Message } from "./types.js";
+
 import { flyTo } from "./actions/fly-to.js";
+import { BaseLayerModel, initializeLayer } from "./model/index.js";
+import { initParquetWasm } from "./parquet.js";
+import DeckFirstRenderer from "./renderers/deck-first.js";
+import OverlayRenderer from "./renderers/overlay.js";
+import { MapRendererProps } from "./renderers/types.js";
+import SidePanel from "./sidepanel/index";
 import { useViewStateDebounced } from "./state";
-
+import Toolbar from "./toolbar.js";
+import { getTooltip } from "./tooltip/index.js";
+import { Message } from "./types.js";
+import { isDefined, loadChildModels } from "./util.js";
 import { MachineContext, MachineProvider } from "./xstate";
 import * as selectors from "./xstate/selectors";
 
-import "./globals.css";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { NextUIProvider } from "@nextui-org/react";
-import Toolbar from "./toolbar.js";
-import throttle from "lodash.throttle";
-import SidePanel from "./sidepanel/index";
-import { getTooltip } from "./tooltip/index.js";
-import { DeckGLRef } from "@deck.gl/react";
-import OverlayRenderer from "./renderers/overlay.js";
-import { MapRendererProps } from "./renderers/types.js";
-import DeckFirstRenderer from "./renderers/deck-first.js";
+import "./globals.css";
 
 await initParquetWasm();