chore: better imports structure

Made use of eslint and prettier plugins to format imports in the code and make it more readable.

frontends/web/.eslintrc.js

@@ -2,10 +2,24 @@
 module.exports = {
     extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
     parser: "@typescript-eslint/parser",
-    plugins: ["@typescript-eslint", "react-hooks"],
+    plugins: ["@typescript-eslint", "react-hooks", "import"],
     rules: {
         "react-hooks/rules-of-hooks": "error",
         "react-hooks/exhaustive-deps": "warn",
+        "import/order": [
+            "error",
+            {
+                groups: [
+                    "builtin",
+                    "external",
+                    "internal",
+                    "parent",
+                    "sibling",
+                    "index"
+                ],
+                "newlines-between": "always"
+            }
+        ],
         "no-constant-condition": [
             "error",
             {

frontends/web/.prettierrc

@@ -1,4 +1,5 @@
 {
+    "plugins": ["prettier-plugin-organize-imports"],
     "semi": true,
     "trailingComma": "none",
     "singleQuote": false,

frontends/web/index.ts

@@ -1,4 +1,5 @@
 import { startApp } from "emukit";
+
 import { GameboyEmulator } from "./ts";
 
 const BACKGROUNDS = [

frontends/web/package.json

@@ -26,11 +26,13 @@
         "buffer": "^6.0.3",
         "emukit": "^0.10.9",
         "eslint": "^8.57.0",
+        "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-react-hooks": "^4.6.2",
         "jszip": "^3.10.1",
         "nodemon": "^3.1.4",
         "parcel": "^2.12.0",
         "prettier": "^3.3.3",
+        "prettier-plugin-organize-imports": "^4.0.0",
         "process": "^0.11.10",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

frontends/web/react/components/audio-gb/audio-gb.tsx

@@ -1,3 +1,4 @@
+import { Canvas, CanvasStructure, PixelFormat } from "emukit";
 import React, {
     FC,
     useCallback,
@@ -6,8 +7,8 @@ import React, {
     useRef,
     useState
 } from "react";
-import { Canvas, CanvasStructure, PixelFormat } from "emukit";
-import { WebglPlot, WebglLine, ColorRGBA } from "webgl-plot";
+import { ColorRGBA, WebglLine, WebglPlot } from "webgl-plot";
+
 import { GameboyEmulator } from "../../../ts";
 
 import "./audio-gb.css";

frontends/web/react/components/debug/debug.tsx

@@ -1,9 +1,10 @@
-import React, { FC, useCallback, useEffect, useState } from "react";
 import { ButtonSwitch, Info, Pair } from "emukit";
+import React, { FC, useCallback, useEffect, useState } from "react";
+
+import { GameboyEmulator } from "../../../ts";
 import { AudioGB } from "../audio-gb/audio-gb";
 import { RegistersGB } from "../registers-gb/registers-gb";
 import { TilesGB } from "../tiles-gb/tiles-gb";
-import { GameboyEmulator } from "../../../ts";
 
 import "./debug.css";
 

frontends/web/react/components/registers-gb/registers-gb.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useEffect, useMemo, useState } from "react";
+
 import { GameBoySpeed } from "../../../lib/boytacean";
 
 import "./registers-gb.css";

frontends/web/react/components/serial-section/serial-section.tsx

@@ -1,5 +1,6 @@
-import React, { FC, useEffect, useMemo, useRef, useState } from "react";
 import { ButtonSwitch, Emulator, Info, Pair, PanelTab } from "emukit";
+import React, { FC, useEffect, useMemo, useRef, useState } from "react";
+
 import { GameboyEmulator, SerialDevice, bufferToDataUrl } from "../../../ts";
 
 import "./serial-section.css";

frontends/web/react/components/test-section/test-section.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useMemo } from "react";
 import { TextInput } from "emukit";
+import React, { FC, useMemo } from "react";
 
 import "./test-section.css";
 

frontends/web/react/components/tiles-gb/tiles-gb.tsx

@@ -1,5 +1,5 @@
-import React, { FC, useCallback, useEffect, useMemo, useRef } from "react";
 import { Canvas, CanvasStructure, PixelFormat } from "emukit";
+import React, { FC, useCallback, useEffect, useMemo, useRef } from "react";
 
 import "./tiles-gb.css";
 

frontends/web/ts/gb.ts

@@ -1,4 +1,3 @@
-import { loadAsync } from "jszip";
 import {
     AudioSpecs,
     base64ToBuffer,
@@ -20,29 +19,31 @@ import {
     SectionInfo,
     Size
 } from "emukit";
-import { PALETTES, PALETTES_MAP } from "./palettes";
-import {
-    DebugAudio,
-    DebugGeneral,
-    DebugSettings,
-    HelpFaqs,
-    HelpKeyboard,
-    SerialSection,
-    TestSection
-} from "../react";
+import { loadAsync } from "jszip";
 
 import {
-    Cartridge,
     default as _wasm,
+    Cartridge,
+    ClockFrame,
     GameBoy,
     GameBoyMode,
     GameBoySpeed,
     Info,
     PadKey,
-    StateManager,
-    ClockFrame
+    StateManager
 } from "../lib/boytacean";
 import info from "../package.json";
+import {
+    DebugAudio,
+    DebugGeneral,
+    DebugSettings,
+    HelpFaqs,
+    HelpKeyboard,
+    SerialSection,
+    TestSection
+} from "../react";
+
+import { PALETTES, PALETTES_MAP } from "./palettes";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 declare const require: any;