Auto-sort imports in TypeScript (#160)

frontend/.ladle/components.tsx

@@ -1,6 +1,7 @@
-import type { GlobalProvider } from "@ladle/react";
 import { StaticRouter } from "react-router-dom/server";
 
+import type { GlobalProvider } from "@ladle/react";
+
 import "../lib/ui/style/index.css";
 import "./override.css";
 

frontend/.prettierrc.cjs

@@ -0,0 +1,16 @@
+module.exports = {
+  printWidth: 100,
+  plugins: ["@trivago/prettier-plugin-sort-imports"],
+  importOrder: [
+    "^react.*$", // anything react
+    "<THIRD_PARTY_MODULES>", // node_modules
+    "^ladle/.*$", // ladle
+    "^app/.*$", // app
+    "^@kiesraad/.*$", // lib
+    "^(\\.||\\.\\.)/.*$", // local imports
+  ],
+  importOrderSeparation: true, // ensures new line separation between sorted import declarations group
+  importOrderSortSpecifiers: true, // sorts the specifiers in an import declarations
+  importOrderGroupNamespaceSpecifiers: true, // sorts the namespace specifiers to the top of the import group
+  importOrderCaseInsensitive: true, // enable case-insensitivity (because CamelCase)
+};

frontend/app/app.test.ts

@@ -1,4 +1,5 @@
 import { expect, test } from "vitest";
+
 test("it is an app", () => {
   expect(true).toBe(true);
 });

frontend/app/component/form/account_setup/AccountSetupForm.tsx

@@ -1,6 +1,7 @@
-import { BottomBar, Button, InputField } from "@kiesraad/ui";
 import { useNavigate } from "react-router-dom";
 
+import { BottomBar, Button, InputField } from "@kiesraad/ui";
+
 interface FormElements extends HTMLFormControlsCollection {
   username: HTMLInputElement;
   password: HTMLInputElement;

frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx

@@ -1,6 +1,8 @@
-import { getUrlMethodAndBody, overrideOnce, render, screen } from "app/test/unit";
 import { userEvent } from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { getUrlMethodAndBody, overrideOnce, render, screen } from "app/test/unit";
+
 import {
   Election,
   PoliticalGroup,

frontend/app/component/form/differences/DifferencesForm.test.tsx

@@ -1,16 +1,17 @@
 /**
  * @vitest-environment jsdom
  */
-
-import { getUrlMethodAndBody, overrideOnce, render, screen } from "app/test/unit";
 import { userEvent } from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
 
+import { getUrlMethodAndBody, overrideOnce, render, screen } from "app/test/unit";
+
 import {
   POLLING_STATION_DATA_ENTRY_REQUEST_BODY,
   PollingStationFormController,
 } from "@kiesraad/api";
 import { electionMock } from "@kiesraad/api-mocks";
+
 import { DifferencesForm } from "./DifferencesForm";
 
 const Component = (

frontend/app/component/form/differences/DifferencesForm.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { useBlocker } from "react-router-dom";
 
-import { useDifferences, DifferencesCounts, useErrorsAndWarnings } from "@kiesraad/api";
-import { Button, InputGrid, Feedback, BottomBar, InputGridRow, useTooltip } from "@kiesraad/ui";
+import { DifferencesCounts, useDifferences, useErrorsAndWarnings } from "@kiesraad/api";
+import { BottomBar, Button, Feedback, InputGrid, InputGridRow, useTooltip } from "@kiesraad/ui";
 import { usePositiveNumberInputMask, usePreventFormEnterSubmit } from "@kiesraad/util";
 
 interface FormElements extends HTMLFormControlsCollection {

frontend/app/component/form/login/LoginForm.tsx

@@ -1,6 +1,7 @@
-import { BottomBar, Button, InputField } from "@kiesraad/ui";
 import { useNavigate } from "react-router-dom";
 
+import { BottomBar, Button, InputField } from "@kiesraad/ui";
+
 interface FormElements extends HTMLFormControlsCollection {
   username: HTMLInputElement;
   password: HTMLInputElement;

frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.test.tsx

@@ -1,7 +1,8 @@
-import { describe, expect, test } from "vitest";
 import { userEvent } from "@testing-library/user-event";
-import { render, screen } from "app/test/unit";
+import { describe, expect, test } from "vitest";
+
 import { PollingStationChoiceForm } from "app/component/form/polling_station_choice/PollingStationChoiceForm.tsx";
+import { render, screen } from "app/test/unit";
 
 describe("Test PollingStationChoiceForm", () => {
   test("Form field entry and buttons", async () => {

frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx

@@ -1,6 +1,7 @@
-import { Badge, BottomBar, Button, InputField } from "@kiesraad/ui";
 import { useNavigate } from "react-router-dom";
+
 import { IconChevronRight } from "@kiesraad/icon";
+import { Badge, BottomBar, Button, InputField } from "@kiesraad/ui";
 
 interface FormElements extends HTMLFormControlsCollection {
   number: HTMLInputElement;

frontend/app/component/form/recounted/RecountedForm.test.tsx

@@ -1,6 +1,8 @@
-import { overrideOnce, render, screen } from "app/test/unit";
 import { userEvent } from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { overrideOnce, render, screen } from "app/test/unit";
+
 import { RecountedForm } from "./RecountedForm";
 
 describe("Test RecountedForm", () => {

frontend/app/component/form/recounted/RecountedForm.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { BottomBar, Button, Feedback } from "@kiesraad/ui";
-import { useState } from "react";
 
 interface FormElements extends HTMLFormControlsCollection {
   yes: HTMLInputElement;

frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx

@@ -1,16 +1,17 @@
 /**
  * @vitest-environment jsdom
  */
-
-import { getUrlMethodAndBody, overrideOnce, render, screen } from "app/test/unit";
 import { userEvent } from "@testing-library/user-event";
 import { afterEach, describe, expect, test, vi } from "vitest";
 
+import { getUrlMethodAndBody, overrideOnce, render, screen } from "app/test/unit";
+
 import {
   POLLING_STATION_DATA_ENTRY_REQUEST_BODY,
   PollingStationFormController,
 } from "@kiesraad/api";
 import { electionMock } from "@kiesraad/api-mocks";
+
 import { VotersAndVotesForm } from "./VotersAndVotesForm";
 
 const Component = (

frontend/app/component/form/voters_and_votes/VotersAndVotesForm.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
+import { useBlocker } from "react-router-dom";
 
-import { useVotersAndVotes, VotersAndVotesValues, useErrorsAndWarnings } from "@kiesraad/api";
-import { Button, InputGrid, Feedback, BottomBar, InputGridRow, useTooltip } from "@kiesraad/ui";
+import { useErrorsAndWarnings, useVotersAndVotes, VotersAndVotesValues } from "@kiesraad/api";
+import { BottomBar, Button, Feedback, InputGrid, InputGridRow, useTooltip } from "@kiesraad/ui";
 import { usePositiveNumberInputMask, usePreventFormEnterSubmit } from "@kiesraad/util";
-import { useBlocker } from "react-router-dom";
 
 interface FormElements extends HTMLFormControlsCollection {
   poll_card_count: HTMLInputElement;

frontend/app/component/pollingstation/PollingStationProgress.tsx

@@ -1,8 +1,8 @@
+import { Link, useLocation, useParams } from "react-router-dom";
+
 import { useElection } from "@kiesraad/api";
 import { ProgressList } from "@kiesraad/ui";
 
-import { Link, useLocation, useParams } from "react-router-dom";
-
 export function PollingStationProgress() {
   const { pollingStationId, listNumber } = useParams();
   const { election } = useElection();

frontend/app/main.tsx

@@ -1,11 +1,12 @@
-import ReactDOM from "react-dom/client";
 import { StrictMode } from "react";
+import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
+import { ApiProvider, ElectionListProvider, ElectionProvider } from "@kiesraad/api";
+
 // ignore in prod
 import { startMockAPI } from "./msw-mock-api.ts";
 import { routes } from "./routes.tsx";
-import { ApiProvider, ElectionListProvider, ElectionProvider } from "@kiesraad/api";
 
 const rootDiv = document.getElementById("root");
 if (!rootDiv) throw new Error("Root div not found");

frontend/app/module/HomePage.tsx

@@ -1,6 +1,7 @@
-import { MockTest } from "app/component/MockTest";
 import { Link } from "react-router-dom";
 
+import { MockTest } from "app/component/MockTest";
+
 export function HomePage() {
   return (
     <div style={{ padding: "32px" }}>

frontend/app/module/RootLayout.tsx

@@ -1,6 +1,7 @@
-import { AppFrame } from "@kiesraad/ui";
 import { Outlet } from "react-router-dom";
 
+import { AppFrame } from "@kiesraad/ui";
+
 export function RootLayout() {
   return (
     <AppFrame>

frontend/app/module/input/InputLayout.tsx

@@ -1,6 +1,7 @@
-import { Footer } from "app/component/footer/Footer";
 import { Outlet } from "react-router-dom";
 
+import { Footer } from "app/component/footer/Footer";
+
 export function InputLayout() {
   return (
     <div className="app-layout">

frontend/app/module/input/PollingStation/CandidatesVotesPage.tsx

@@ -1,8 +1,9 @@
 import { useParams } from "react-router-dom";
 
-import { useElection } from "@kiesraad/api";
 import { CandidatesVotesForm } from "app/component/form/candidates_votes_form/CandidatesVotesForm";
 
+import { useElection } from "@kiesraad/api";
+
 export function CandidatesVotesPage() {
   const { listNumber } = useParams();
   const { election } = useElection();

frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx

@@ -1,6 +1,9 @@
-import { render } from "app/test/unit";
 import { describe, expect, test } from "vitest";
+
+import { render } from "app/test/unit";
+
 import { ElectionListProvider, ElectionProvider } from "@kiesraad/api";
+
 import { PollingStationLayout } from "./PollingStationLayout";
 
 describe("PollingStationLayout", () => {

frontend/app/module/input/PollingStation/PollingStationLayout.tsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
 import { Outlet, useParams } from "react-router-dom";
 
+import { PollingStationProgress } from "app/component/pollingstation/PollingStationProgress";
+
 import { PollingStationFormController, useElection } from "@kiesraad/api";
 import { IconCross } from "@kiesraad/icon";
 import { Badge, Button, Modal, PollingStationNumber, WorkStationNumber } from "@kiesraad/ui";
-import { PollingStationProgress } from "app/component/pollingstation/PollingStationProgress";
 
 export function PollingStationLayout() {
   const { pollingStationId } = useParams();

frontend/app/module/input/page/InputHomePage.tsx

@@ -1,7 +1,9 @@
-import { Alert, WorkStationNumber } from "@kiesraad/ui";
-import { PollingStationChoiceForm } from "app/component/form/polling_station_choice/PollingStationChoiceForm.tsx";
 import { useState } from "react";
 
+import { PollingStationChoiceForm } from "app/component/form/polling_station_choice/PollingStationChoiceForm.tsx";
+
+import { Alert, WorkStationNumber } from "@kiesraad/ui";
+
 export function InputHomePage() {
   const [showAlert, setShowAlert] = useState(true);
 

frontend/app/module/overview/OverviewLayout.tsx

@@ -1,6 +1,7 @@
-import { Footer } from "app/component/footer/Footer";
 import { Outlet } from "react-router-dom";
 
+import { Footer } from "app/component/footer/Footer";
+
 export function OverviewLayout() {
   return (
     <div className="app-layout">

frontend/app/module/overview/page/OverviewPage.tsx

@@ -1,12 +1,13 @@
 import { useNavigate } from "react-router-dom";
-import { WorkStationNumber } from "@kiesraad/ui";
+
 import {
   IconCheckHeart,
   IconCheckVerified,
   IconChevronRight,
   IconClock,
   IconHourglass,
 } from "@kiesraad/icon";
+import { WorkStationNumber } from "@kiesraad/ui";
 
 export function OverviewPage() {
   const navigate = useNavigate();

frontend/app/module/user/page/AccountSetupPage.tsx

@@ -1,7 +1,9 @@
-import { Alert, WorkStationNumber } from "@kiesraad/ui";
-import { AccountSetupForm } from "app/component/form/account_setup/AccountSetupForm";
 import { useState } from "react";
 
+import { AccountSetupForm } from "app/component/form/account_setup/AccountSetupForm";
+
+import { Alert, WorkStationNumber } from "@kiesraad/ui";
+
 export function AccountSetupPage() {
   const [showAlert, setShowAlert] = useState(true);
 

frontend/app/module/user/page/LoginPage.test.tsx

@@ -1,6 +1,7 @@
-import { render } from "app/test/unit";
 import { describe, expect, test } from "vitest";
+
 import { LoginPage } from "app/module/user";
+import { render } from "app/test/unit";
 
 describe("LoginPage", () => {
   test("Enter form field values", () => {

frontend/app/module/user/page/LoginPage.tsx

@@ -1,6 +1,7 @@
-import { WorkStationNumber } from "@kiesraad/ui";
 import { LoginForm } from "app/component/form/login/LoginForm";
 
+import { WorkStationNumber } from "@kiesraad/ui";
+
 export function LoginPage() {
   return (
     <>

frontend/app/routes.tsx

@@ -1,17 +1,18 @@
 import { createRoutesFromElements, Route } from "react-router-dom";
+
 import { HomePage } from "./module/HomePage";
 import {
   CandidatesVotesPage,
   DifferencesPage,
-  InputLayout,
   InputHomePage,
+  InputLayout,
   PollingStationLayout,
   RecountedPage,
   VotersAndVotesPage,
 } from "./module/input";
 import { OverviewLayout, OverviewPage } from "./module/overview";
 import { RootLayout } from "./module/RootLayout";
-import { AccountSetupPage, LoginPage, LoginLayout, UserHomePage } from "./module/user";
+import { AccountSetupPage, LoginLayout, LoginPage, UserHomePage } from "./module/user";
 
 export const routes = createRoutesFromElements(
   <Route element={<RootLayout />}>

frontend/app/test/unit/Providers.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { createMemoryRouter, RouterProvider } from "react-router-dom";
+
 import { ApiProvider } from "@kiesraad/api";
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {

frontend/app/test/unit/server.ts

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-
 import { http, HttpResponse } from "msw";
 import { setupServer } from "msw/node";
 

frontend/app/test/unit/setup.ts

@@ -1,5 +1,4 @@
 import "@testing-library/jest-dom/vitest";
-
 import { cleanup, configure } from "@testing-library/react";
 import { afterAll, afterEach, beforeAll } from "vitest";
 import failOnConsole from "vitest-fail-on-console";

frontend/app/test/unit/test-utils.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
-import { Providers } from "./Providers";
 
 import { render, RenderOptions } from "@testing-library/react";
 
+import { Providers } from "./Providers";
+
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, "wrapper">) =>
   render(ui, { wrapper: Providers, ...options });
 

frontend/lib/api-mocks/index.ts

@@ -1,4 +1,5 @@
 import { http, type HttpHandler, HttpResponse } from "msw";
+
 import {
   DataEntryResponse,
   Election,
@@ -9,6 +10,7 @@ import {
   VotersCounts,
   VotesCounts,
 } from "@kiesraad/api";
+
 import { electionMockData, electionsMockData, politicalGroupMockData } from "./ElectionMockData.ts";
 
 export const electionMock = electionMockData as Required<Election>;

frontend/lib/api/ApiClient.test.ts

@@ -1,7 +1,9 @@
 import { describe, expect, test } from "vitest";
-import { ApiClient } from "./ApiClient";
+
 import { overrideOnce } from "app/test/unit";
 
+import { ApiClient } from "./ApiClient";
+
 describe("ApiClient", () => {
   test("200 response is parsed as success", async () => {
     overrideOnce("post", "/api/polling_stations/1/data_entries/1", 200, { fizz: "buzz" });