diff --git a/frontend/.ladle/components.tsx b/frontend/.ladle/components.tsx index c7c5fb20b..896f23c10 100644 --- a/frontend/.ladle/components.tsx +++ b/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"; diff --git a/frontend/.prettierrc.cjs b/frontend/.prettierrc.cjs new file mode 100644 index 000000000..33e8ed19f --- /dev/null +++ b/frontend/.prettierrc.cjs @@ -0,0 +1,16 @@ +module.exports = { + printWidth: 100, + plugins: ["@trivago/prettier-plugin-sort-imports"], + importOrder: [ + "^react.*$", // anything react + "", // 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) +}; diff --git a/frontend/app/app.test.ts b/frontend/app/app.test.ts index 2f4b63da5..0e6d1260a 100644 --- a/frontend/app/app.test.ts +++ b/frontend/app/app.test.ts @@ -1,4 +1,5 @@ import { expect, test } from "vitest"; + test("it is an app", () => { expect(true).toBe(true); }); diff --git a/frontend/app/component/form/account_setup/AccountSetupForm.tsx b/frontend/app/component/form/account_setup/AccountSetupForm.tsx index 2c2d6948b..673bab496 100644 --- a/frontend/app/component/form/account_setup/AccountSetupForm.tsx +++ b/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; diff --git a/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx b/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx index 6d5ef8d01..8937e9bc3 100644 --- a/frontend/app/component/form/candidates_votes_form/CandidatesVotesForm.test.tsx +++ b/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, diff --git a/frontend/app/component/form/differences/DifferencesForm.test.tsx b/frontend/app/component/form/differences/DifferencesForm.test.tsx index 84cda26ca..8fa464958 100644 --- a/frontend/app/component/form/differences/DifferencesForm.test.tsx +++ b/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 = ( diff --git a/frontend/app/component/form/differences/DifferencesForm.tsx b/frontend/app/component/form/differences/DifferencesForm.tsx index e8960ec53..cb5266d43 100644 --- a/frontend/app/component/form/differences/DifferencesForm.tsx +++ b/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 { diff --git a/frontend/app/component/form/login/LoginForm.tsx b/frontend/app/component/form/login/LoginForm.tsx index f12afba15..d2c82b65c 100644 --- a/frontend/app/component/form/login/LoginForm.tsx +++ b/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; diff --git a/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.test.tsx b/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.test.tsx index de221bcf2..72bf8794f 100644 --- a/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.test.tsx +++ b/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 () => { diff --git a/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx b/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx index 9b3d4e17e..b48ecdafc 100644 --- a/frontend/app/component/form/polling_station_choice/PollingStationChoiceForm.tsx +++ b/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; diff --git a/frontend/app/component/form/recounted/RecountedForm.test.tsx b/frontend/app/component/form/recounted/RecountedForm.test.tsx index b1ebc6fe5..4da0ea4dc 100644 --- a/frontend/app/component/form/recounted/RecountedForm.test.tsx +++ b/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", () => { diff --git a/frontend/app/component/form/recounted/RecountedForm.tsx b/frontend/app/component/form/recounted/RecountedForm.tsx index 8102871d7..44d2331ea 100644 --- a/frontend/app/component/form/recounted/RecountedForm.tsx +++ b/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; diff --git a/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx b/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx index 785ac9391..91d98f77c 100644 --- a/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.test.tsx +++ b/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 = ( diff --git a/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.tsx b/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.tsx index af221036b..97ea49bb2 100644 --- a/frontend/app/component/form/voters_and_votes/VotersAndVotesForm.tsx +++ b/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; diff --git a/frontend/app/component/pollingstation/PollingStationProgress.tsx b/frontend/app/component/pollingstation/PollingStationProgress.tsx index 2f0e65918..f2502ed95 100644 --- a/frontend/app/component/pollingstation/PollingStationProgress.tsx +++ b/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(); diff --git a/frontend/app/main.tsx b/frontend/app/main.tsx index 3e90b792d..8e1bc68ec 100644 --- a/frontend/app/main.tsx +++ b/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"); diff --git a/frontend/app/module/HomePage.tsx b/frontend/app/module/HomePage.tsx index ec6fe9c64..51d013f46 100644 --- a/frontend/app/module/HomePage.tsx +++ b/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 (
diff --git a/frontend/app/module/RootLayout.tsx b/frontend/app/module/RootLayout.tsx index 8a97858f2..10c02cd41 100644 --- a/frontend/app/module/RootLayout.tsx +++ b/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 ( diff --git a/frontend/app/module/input/InputLayout.tsx b/frontend/app/module/input/InputLayout.tsx index 0077ffe59..a73d6eb6a 100644 --- a/frontend/app/module/input/InputLayout.tsx +++ b/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 (
diff --git a/frontend/app/module/input/PollingStation/CandidatesVotesPage.tsx b/frontend/app/module/input/PollingStation/CandidatesVotesPage.tsx index 7cc467bd5..82d4dd14c 100644 --- a/frontend/app/module/input/PollingStation/CandidatesVotesPage.tsx +++ b/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(); diff --git a/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx b/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx index 15df11423..6b2fe2a79 100644 --- a/frontend/app/module/input/PollingStation/PollingStationLayout.test.tsx +++ b/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", () => { diff --git a/frontend/app/module/input/PollingStation/PollingStationLayout.tsx b/frontend/app/module/input/PollingStation/PollingStationLayout.tsx index 46634fb62..82e61890e 100644 --- a/frontend/app/module/input/PollingStation/PollingStationLayout.tsx +++ b/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(); diff --git a/frontend/app/module/input/page/InputHomePage.tsx b/frontend/app/module/input/page/InputHomePage.tsx index 053b43c4e..8adf56239 100644 --- a/frontend/app/module/input/page/InputHomePage.tsx +++ b/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); diff --git a/frontend/app/module/overview/OverviewLayout.tsx b/frontend/app/module/overview/OverviewLayout.tsx index 93346bf55..c9c99560b 100644 --- a/frontend/app/module/overview/OverviewLayout.tsx +++ b/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 (
diff --git a/frontend/app/module/overview/page/OverviewPage.tsx b/frontend/app/module/overview/page/OverviewPage.tsx index 039d10f0a..039f8f03a 100644 --- a/frontend/app/module/overview/page/OverviewPage.tsx +++ b/frontend/app/module/overview/page/OverviewPage.tsx @@ -1,5 +1,5 @@ import { useNavigate } from "react-router-dom"; -import { WorkStationNumber } from "@kiesraad/ui"; + import { IconCheckHeart, IconCheckVerified, @@ -7,6 +7,7 @@ import { IconClock, IconHourglass, } from "@kiesraad/icon"; +import { WorkStationNumber } from "@kiesraad/ui"; export function OverviewPage() { const navigate = useNavigate(); diff --git a/frontend/app/module/user/page/AccountSetupPage.tsx b/frontend/app/module/user/page/AccountSetupPage.tsx index fe18317e1..63f52782b 100644 --- a/frontend/app/module/user/page/AccountSetupPage.tsx +++ b/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); diff --git a/frontend/app/module/user/page/LoginPage.test.tsx b/frontend/app/module/user/page/LoginPage.test.tsx index 07f4591f4..4bffecbf7 100644 --- a/frontend/app/module/user/page/LoginPage.test.tsx +++ b/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", () => { diff --git a/frontend/app/module/user/page/LoginPage.tsx b/frontend/app/module/user/page/LoginPage.tsx index 2dd51d88a..980906cba 100644 --- a/frontend/app/module/user/page/LoginPage.tsx +++ b/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 ( <> diff --git a/frontend/app/routes.tsx b/frontend/app/routes.tsx index ee94ccd59..6e6f50671 100644 --- a/frontend/app/routes.tsx +++ b/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( }> diff --git a/frontend/app/test/unit/Providers.tsx b/frontend/app/test/unit/Providers.tsx index b2b02223c..9296602e3 100644 --- a/frontend/app/test/unit/Providers.tsx +++ b/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 }) => { diff --git a/frontend/app/test/unit/server.ts b/frontend/app/test/unit/server.ts index 92a992274..e26f190a6 100644 --- a/frontend/app/test/unit/server.ts +++ b/frontend/app/test/unit/server.ts @@ -5,7 +5,6 @@ * * Copyright Oxide Computer Company */ - import { http, HttpResponse } from "msw"; import { setupServer } from "msw/node"; diff --git a/frontend/app/test/unit/setup.ts b/frontend/app/test/unit/setup.ts index ca84e691b..217b1139a 100644 --- a/frontend/app/test/unit/setup.ts +++ b/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"; diff --git a/frontend/app/test/unit/test-utils.ts b/frontend/app/test/unit/test-utils.ts index 4079a4f65..12e6277c5 100644 --- a/frontend/app/test/unit/test-utils.ts +++ b/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) => render(ui, { wrapper: Providers, ...options }); diff --git a/frontend/lib/api-mocks/index.ts b/frontend/lib/api-mocks/index.ts index ae53e1801..b1c1fb07c 100644 --- a/frontend/lib/api-mocks/index.ts +++ b/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; diff --git a/frontend/lib/api/ApiClient.test.ts b/frontend/lib/api/ApiClient.test.ts index 3b646fbbe..e1f085068 100644 --- a/frontend/lib/api/ApiClient.test.ts +++ b/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" }); diff --git a/frontend/lib/api/ApiProvider.tsx b/frontend/lib/api/ApiProvider.tsx index b59b2037a..eff216e1e 100644 --- a/frontend/lib/api/ApiProvider.tsx +++ b/frontend/lib/api/ApiProvider.tsx @@ -1,4 +1,5 @@ import * as React from "react"; + import { ApiClient } from "./ApiClient"; export interface iApiProviderContext { diff --git a/frontend/lib/api/api.d.ts b/frontend/lib/api/api.d.ts index b1fa3609d..37c366da0 100644 --- a/frontend/lib/api/api.d.ts +++ b/frontend/lib/api/api.d.ts @@ -1,4 +1,5 @@ import { type ValidationResultCode } from "./gen/openapi"; + export type ResultCode = ValidationResultCode | "REFORMAT_WARNING"; export type FieldValidationResult = { diff --git a/frontend/lib/api/election/ElectionListProvider.tsx b/frontend/lib/api/election/ElectionListProvider.tsx index 32eabec4d..55be60668 100644 --- a/frontend/lib/api/election/ElectionListProvider.tsx +++ b/frontend/lib/api/election/ElectionListProvider.tsx @@ -1,4 +1,5 @@ import * as React from "react"; + import { Election } from "../gen/openapi"; import { useElectionListRequest } from "../useElectionListRequest"; diff --git a/frontend/lib/api/election/ElectionProvider.tsx b/frontend/lib/api/election/ElectionProvider.tsx index d46543f56..c840e6e08 100644 --- a/frontend/lib/api/election/ElectionProvider.tsx +++ b/frontend/lib/api/election/ElectionProvider.tsx @@ -1,4 +1,5 @@ import * as React from "react"; + import { Election } from "../gen/openapi"; import { useElectionDataRequest } from "../useElectionDataRequest"; import { useElectionList } from "./useElectionList"; diff --git a/frontend/lib/api/election/useElection.ts b/frontend/lib/api/election/useElection.ts index 292937dde..00fc8140b 100644 --- a/frontend/lib/api/election/useElection.ts +++ b/frontend/lib/api/election/useElection.ts @@ -1,4 +1,5 @@ import * as React from "react"; + import { ElectionProviderContext } from "./ElectionProvider"; export function useElection() { diff --git a/frontend/lib/api/election/useElectionList.ts b/frontend/lib/api/election/useElectionList.ts index aee10322b..483019178 100644 --- a/frontend/lib/api/election/useElectionList.ts +++ b/frontend/lib/api/election/useElectionList.ts @@ -1,4 +1,5 @@ import * as React from "react"; + import { ElectionListProviderContext } from "./ElectionListProvider"; export function useElectionList() { diff --git a/frontend/lib/api/form/pollingstation/PollingStationFormController.tsx b/frontend/lib/api/form/pollingstation/PollingStationFormController.tsx index 220f94d8d..3d9f8a5c8 100644 --- a/frontend/lib/api/form/pollingstation/PollingStationFormController.tsx +++ b/frontend/lib/api/form/pollingstation/PollingStationFormController.tsx @@ -1,4 +1,5 @@ import * as React from "react"; + import { ApiResponseErrorData, DataEntryResponse, diff --git a/frontend/lib/api/form/pollingstation/usePollingStationFormController.ts b/frontend/lib/api/form/pollingstation/usePollingStationFormController.ts index c4fea382c..967ed3c0d 100644 --- a/frontend/lib/api/form/pollingstation/usePollingStationFormController.ts +++ b/frontend/lib/api/form/pollingstation/usePollingStationFormController.ts @@ -1,4 +1,5 @@ import * as React from "react"; + import { PollingStationControllerContext } from "./PollingStationFormController"; export function usePollingStationFormController() { diff --git a/frontend/lib/api/form/useErrorsAndWarnings.ts b/frontend/lib/api/form/useErrorsAndWarnings.ts index 8812cc9af..585637324 100644 --- a/frontend/lib/api/form/useErrorsAndWarnings.ts +++ b/frontend/lib/api/form/useErrorsAndWarnings.ts @@ -1,7 +1,9 @@ import * as React from "react"; + +import { fieldNameFromPath } from "@kiesraad/util"; + import { ErrorsAndWarnings, FieldValidationResult } from "../api"; import { ValidationResult } from "../gen/openapi"; -import { fieldNameFromPath } from "@kiesraad/util"; export function useErrorsAndWarnings( errors: ValidationResult[], diff --git a/frontend/lib/api/useApiGetRequest.ts b/frontend/lib/api/useApiGetRequest.ts index e14588344..d69f031a6 100644 --- a/frontend/lib/api/useApiGetRequest.ts +++ b/frontend/lib/api/useApiGetRequest.ts @@ -1,7 +1,7 @@ import * as React from "react"; -import { useApi } from "./useApi"; import { ApiResponseErrorData } from "./ApiClient"; +import { useApi } from "./useApi"; export type UseApiGetRequestReturn = { loading: boolean; diff --git a/frontend/lib/api/useApiPostRequest.ts b/frontend/lib/api/useApiPostRequest.ts index 146443d9f..7b7713dfd 100644 --- a/frontend/lib/api/useApiPostRequest.ts +++ b/frontend/lib/api/useApiPostRequest.ts @@ -1,7 +1,7 @@ import * as React from "react"; -import { useApi } from "./useApi"; import { ApiResponseErrorData } from "./ApiClient"; +import { useApi } from "./useApi"; export type UseApiPostRequestReturn = [ (requestBody: REQUEST_BODY) => void, diff --git a/frontend/lib/api/useElectionDataRequest.test.ts b/frontend/lib/api/useElectionDataRequest.test.ts index e22ed40ef..095947ea5 100644 --- a/frontend/lib/api/useElectionDataRequest.test.ts +++ b/frontend/lib/api/useElectionDataRequest.test.ts @@ -1,5 +1,7 @@ import { describe, expect, test } from "vitest"; + import { overrideOnce, Providers, renderHook, waitFor } from "app/test/unit"; + import { useElectionDataRequest } from "./useElectionDataRequest"; describe("Test useElectionDataRequest", () => { diff --git a/frontend/lib/api/useElectionDataRequest.ts b/frontend/lib/api/useElectionDataRequest.ts index 57be94e79..1c6bc4277 100644 --- a/frontend/lib/api/useElectionDataRequest.ts +++ b/frontend/lib/api/useElectionDataRequest.ts @@ -1,9 +1,9 @@ -import { useApiGetRequest } from "./useApiGetRequest"; import { Election, ELECTION_DETAILS_REQUEST_PARAMS, ELECTION_DETAILS_REQUEST_PATH, } from "./gen/openapi"; +import { useApiGetRequest } from "./useApiGetRequest"; export function useElectionDataRequest(params: ELECTION_DETAILS_REQUEST_PARAMS) { let path: ELECTION_DETAILS_REQUEST_PATH | ""; diff --git a/frontend/lib/api/useElectionListRequest.test.ts b/frontend/lib/api/useElectionListRequest.test.ts index 4a9979354..4a751a087 100644 --- a/frontend/lib/api/useElectionListRequest.test.ts +++ b/frontend/lib/api/useElectionListRequest.test.ts @@ -1,5 +1,7 @@ import { describe, expect, test } from "vitest"; + import { overrideOnce, Providers, renderHook, waitFor } from "app/test/unit"; + import { useElectionListRequest } from "./useElectionListRequest"; describe("Test useElectionListRequest", () => { diff --git a/frontend/lib/api/useElectionListRequest.ts b/frontend/lib/api/useElectionListRequest.ts index 4d5d3b507..80d235a7c 100644 --- a/frontend/lib/api/useElectionListRequest.ts +++ b/frontend/lib/api/useElectionListRequest.ts @@ -1,5 +1,5 @@ -import { useApiGetRequest } from "./useApiGetRequest"; import { ElectionListResponse } from "./gen/openapi"; +import { useApiGetRequest } from "./useApiGetRequest"; export function useElectionListRequest() { return useApiGetRequest(`/api/elections`); diff --git a/frontend/lib/api/usePollingStationDataEntry.test.ts b/frontend/lib/api/usePollingStationDataEntry.test.ts index 7e9d50e06..578d36787 100644 --- a/frontend/lib/api/usePollingStationDataEntry.test.ts +++ b/frontend/lib/api/usePollingStationDataEntry.test.ts @@ -1,5 +1,7 @@ import { assert, describe, expect, test } from "vitest"; + import { overrideOnce, Providers, renderHook, waitFor } from "app/test/unit"; + import { usePollingStationDataEntry } from "./usePollingStationDataEntry"; describe("usePollingStationDataEntry", () => { diff --git a/frontend/lib/api/usePollingStationDataEntry.ts b/frontend/lib/api/usePollingStationDataEntry.ts index 2d2220eb2..50395b1e2 100644 --- a/frontend/lib/api/usePollingStationDataEntry.ts +++ b/frontend/lib/api/usePollingStationDataEntry.ts @@ -1,11 +1,12 @@ import * as React from "react"; -import { useApiPostRequest } from "./useApiPostRequest"; + import { DataEntryResponse, POLLING_STATION_DATA_ENTRY_REQUEST_BODY, POLLING_STATION_DATA_ENTRY_REQUEST_PARAMS, POLLING_STATION_DATA_ENTRY_REQUEST_PATH, } from "./gen/openapi"; +import { useApiPostRequest } from "./useApiPostRequest"; export function usePollingStationDataEntry(params: POLLING_STATION_DATA_ENTRY_REQUEST_PARAMS) { const path = React.useMemo(() => { diff --git a/frontend/lib/ui/Alert/Alert.stories.tsx b/frontend/lib/ui/Alert/Alert.stories.tsx index 463735842..88c4d01a7 100644 --- a/frontend/lib/ui/Alert/Alert.stories.tsx +++ b/frontend/lib/ui/Alert/Alert.stories.tsx @@ -1,7 +1,7 @@ import type { Story } from "@ladle/react"; -import { Alert } from "./Alert"; import { AlertType } from "../ui.types"; +import { Alert } from "./Alert"; type Props = { type: AlertType; diff --git a/frontend/lib/ui/Alert/Alert.test.tsx b/frontend/lib/ui/Alert/Alert.test.tsx index 321f6ad03..94a0b9c44 100644 --- a/frontend/lib/ui/Alert/Alert.test.tsx +++ b/frontend/lib/ui/Alert/Alert.test.tsx @@ -1,7 +1,8 @@ import { describe, expect, test, vi } from "vitest"; import { fireEvent, render } from "app/test/unit"; -import { DefaultAlert, ClosableAlert } from "./Alert.stories"; + +import { ClosableAlert, DefaultAlert } from "./Alert.stories"; describe("UI component: Alert", () => { test("Alert has expected children", () => { diff --git a/frontend/lib/ui/Alert/Alert.tsx b/frontend/lib/ui/Alert/Alert.tsx index 04a36f1e2..4c28e93d2 100644 --- a/frontend/lib/ui/Alert/Alert.tsx +++ b/frontend/lib/ui/Alert/Alert.tsx @@ -1,9 +1,11 @@ import * as React from "react"; + +import { IconCross } from "@kiesraad/icon"; +import { IconButton, renderIconForType } from "@kiesraad/ui"; +import { cn } from "@kiesraad/util"; + import { AlertType } from "../ui.types"; import cls from "./Alert.module.css"; -import { cn } from "@kiesraad/util"; -import { IconButton, renderIconForType } from "@kiesraad/ui"; -import { IconCross } from "@kiesraad/icon"; export interface AlertProps { type: AlertType; diff --git a/frontend/lib/ui/Badge/Badge.e2e.ts b/frontend/lib/ui/Badge/Badge.e2e.ts index 5e97c383e..2091ead33 100644 --- a/frontend/lib/ui/Badge/Badge.e2e.ts +++ b/frontend/lib/ui/Badge/Badge.e2e.ts @@ -1,4 +1,4 @@ -import { test, expect } from "@playwright/test"; +import { expect, test } from "@playwright/test"; test("all badges are visible", async ({ page }) => { await page.goto("http://localhost:61000/?story=badge--all-badges"); diff --git a/frontend/lib/ui/Badge/Badge.test.tsx b/frontend/lib/ui/Badge/Badge.test.tsx index c1760657e..a400e3d44 100644 --- a/frontend/lib/ui/Badge/Badge.test.tsx +++ b/frontend/lib/ui/Badge/Badge.test.tsx @@ -1,6 +1,7 @@ import { expect, test } from "vitest"; import { render, screen } from "app/test/unit"; + import { Badge } from "./Badge.tsx"; test("The correction badge is visible", () => { diff --git a/frontend/lib/ui/Badge/PollingStationNumber.tsx b/frontend/lib/ui/Badge/PollingStationNumber.tsx index f527a7210..c34a5d22e 100644 --- a/frontend/lib/ui/Badge/PollingStationNumber.tsx +++ b/frontend/lib/ui/Badge/PollingStationNumber.tsx @@ -1,4 +1,5 @@ import * as React from "react"; + import classes from "./badge.module.css"; export function PollingStationNumber({ children }: React.PropsWithChildren) { diff --git a/frontend/lib/ui/BottomBar/BottomBar.e2e.ts b/frontend/lib/ui/BottomBar/BottomBar.e2e.ts index f04e019d6..9aa4f51f9 100644 --- a/frontend/lib/ui/BottomBar/BottomBar.e2e.ts +++ b/frontend/lib/ui/BottomBar/BottomBar.e2e.ts @@ -1,4 +1,4 @@ -import { test, expect } from "@playwright/test"; +import { expect, test } from "@playwright/test"; test("bottom bar is visible", async ({ page }) => { await page.goto("http://localhost:61000/?story=bottom-bar--default-bottom-bar"); diff --git a/frontend/lib/ui/BottomBar/BottomBar.stories.tsx b/frontend/lib/ui/BottomBar/BottomBar.stories.tsx index 40b85d864..df6f28d1f 100644 --- a/frontend/lib/ui/BottomBar/BottomBar.stories.tsx +++ b/frontend/lib/ui/BottomBar/BottomBar.stories.tsx @@ -1,8 +1,9 @@ import type { Story } from "@ladle/react"; -import { BottomBar } from "./BottomBar"; import { Button } from "@kiesraad/ui"; +import { BottomBar } from "./BottomBar"; + export const DefaultBottomBar: Story = () => { return ( diff --git a/frontend/lib/ui/BottomBar/BottomBar.test.tsx b/frontend/lib/ui/BottomBar/BottomBar.test.tsx index db45b821f..03ddad4c3 100644 --- a/frontend/lib/ui/BottomBar/BottomBar.test.tsx +++ b/frontend/lib/ui/BottomBar/BottomBar.test.tsx @@ -1,6 +1,7 @@ import { expect, test } from "vitest"; import { render, screen } from "app/test/unit"; + import { DefaultBottomBar } from "./BottomBar.stories.tsx"; test("The bottom bar is rendered with a button as child", () => { diff --git a/frontend/lib/ui/BottomBar/BottomBar.tsx b/frontend/lib/ui/BottomBar/BottomBar.tsx index 345ca0a5a..951a9cc76 100644 --- a/frontend/lib/ui/BottomBar/BottomBar.tsx +++ b/frontend/lib/ui/BottomBar/BottomBar.tsx @@ -1,5 +1,7 @@ import * as React from "react"; + import { cn } from "@kiesraad/util"; + import cls from "./BottomBar.module.css"; export interface BottomBarProps { diff --git a/frontend/lib/ui/Button/Button.stories.tsx b/frontend/lib/ui/Button/Button.stories.tsx index f4136253a..3d2c38204 100644 --- a/frontend/lib/ui/Button/Button.stories.tsx +++ b/frontend/lib/ui/Button/Button.stories.tsx @@ -1,7 +1,7 @@ import type { Story } from "@ladle/react"; -import { Button } from "./Button"; import { Size, Variant } from "../ui.types"; +import { Button } from "./Button"; type Props = { label: string; diff --git a/frontend/lib/ui/Button/Button.test.tsx b/frontend/lib/ui/Button/Button.test.tsx index 7b3e6aabd..7d4f99a7a 100644 --- a/frontend/lib/ui/Button/Button.test.tsx +++ b/frontend/lib/ui/Button/Button.test.tsx @@ -1,7 +1,8 @@ import { expect, test } from "vitest"; import { render, screen } from "app/test/unit"; -import { DefaultButton, EnabledButton, DisabledButton } from "./Button.stories"; + +import { DefaultButton, DisabledButton, EnabledButton } from "./Button.stories"; test("The default button is enabled", () => { render( diff --git a/frontend/lib/ui/Button/Button.tsx b/frontend/lib/ui/Button/Button.tsx index ff26af744..0cba133ae 100644 --- a/frontend/lib/ui/Button/Button.tsx +++ b/frontend/lib/ui/Button/Button.tsx @@ -1,6 +1,7 @@ import * as React from "react"; -import cls from "./Button.module.css"; + import { Size, Variant } from "../ui.types"; +import cls from "./Button.module.css"; export interface ButtonProps extends React.ButtonHTMLAttributes { isDisabled?: boolean; diff --git a/frontend/lib/ui/Button/button.e2e.ts b/frontend/lib/ui/Button/button.e2e.ts index dadb94ed7..6db516533 100644 --- a/frontend/lib/ui/Button/button.e2e.ts +++ b/frontend/lib/ui/Button/button.e2e.ts @@ -1,4 +1,4 @@ -import { test, expect } from "@playwright/test"; +import { expect, test } from "@playwright/test"; test("default button is visible", async ({ page }) => { await page.goto("http://localhost:61000/?story=button--default-button"); diff --git a/frontend/lib/ui/Feedback/Feedback.stories.tsx b/frontend/lib/ui/Feedback/Feedback.stories.tsx index e099e287b..4ff51878f 100644 --- a/frontend/lib/ui/Feedback/Feedback.stories.tsx +++ b/frontend/lib/ui/Feedback/Feedback.stories.tsx @@ -1,6 +1,7 @@ import type { Story } from "@ladle/react"; -import { Feedback } from "./Feedback"; + import { AlertType } from "../ui.types"; +import { Feedback } from "./Feedback"; type Props = { title: string; diff --git a/frontend/lib/ui/Feedback/Feedback.test.tsx b/frontend/lib/ui/Feedback/Feedback.test.tsx index 44bc0d728..b023aa121 100644 --- a/frontend/lib/ui/Feedback/Feedback.test.tsx +++ b/frontend/lib/ui/Feedback/Feedback.test.tsx @@ -1,6 +1,7 @@ -import { render } from "app/test/unit"; import { describe, expect, test } from "vitest"; +import { render } from "app/test/unit"; + import { DefaultFeedback } from "./Feedback.stories"; describe("UI component: Feedback", () => { diff --git a/frontend/lib/ui/Feedback/Feedback.tsx b/frontend/lib/ui/Feedback/Feedback.tsx index 9d6166664..e4b43f803 100644 --- a/frontend/lib/ui/Feedback/Feedback.tsx +++ b/frontend/lib/ui/Feedback/Feedback.tsx @@ -1,8 +1,10 @@ import * as React from "react"; -import cls from "./Feedback.module.css"; -import { AlertType } from "../ui.types"; + import { cn } from "@kiesraad/util"; + +import { AlertType } from "../ui.types"; import { renderIconForType } from "../util/Util"; +import cls from "./Feedback.module.css"; export interface FeedbackProps { type: AlertType; diff --git a/frontend/lib/ui/FormField/FormField.stories.tsx b/frontend/lib/ui/FormField/FormField.stories.tsx index 06c264cba..861fba767 100644 --- a/frontend/lib/ui/FormField/FormField.stories.tsx +++ b/frontend/lib/ui/FormField/FormField.stories.tsx @@ -1,8 +1,9 @@ import type { Story } from "@ladle/react"; -import { FormField } from "./FormField"; import { ResultCode } from "@kiesraad/api"; +import { FormField } from "./FormField"; + type Props = { error?: ResultCode; }; diff --git a/frontend/lib/ui/FormField/FormField.test.tsx b/frontend/lib/ui/FormField/FormField.test.tsx index 0761242a4..7902e137f 100644 --- a/frontend/lib/ui/FormField/FormField.test.tsx +++ b/frontend/lib/ui/FormField/FormField.test.tsx @@ -1,6 +1,7 @@ -import { render } from "app/test/unit"; import { describe, expect, test } from "vitest"; +import { render } from "app/test/unit"; + import { DefaultFormField } from "./FormField.stories"; describe("UI component: FormField", () => { diff --git a/frontend/lib/ui/FormField/FormField.tsx b/frontend/lib/ui/FormField/FormField.tsx index 508d9a82d..4f86ffaa1 100644 --- a/frontend/lib/ui/FormField/FormField.tsx +++ b/frontend/lib/ui/FormField/FormField.tsx @@ -1,9 +1,11 @@ -import { type FieldValidationResult } from "@kiesraad/api"; import * as React from "react"; -import cls from "./FormField.module.css"; -import { cn } from "@kiesraad/util"; + +import { type FieldValidationResult } from "@kiesraad/api"; import { IconError, IconWarning } from "@kiesraad/icon"; +import { cn } from "@kiesraad/util"; + import { Tooltip } from "../Tooltip/Tooltip"; +import cls from "./FormField.module.css"; export interface FormFieldProps { children: React.ReactNode; diff --git a/frontend/lib/ui/Icon/Icon.stories.tsx b/frontend/lib/ui/Icon/Icon.stories.tsx index 5dbbb8e2f..42a63026a 100644 --- a/frontend/lib/ui/Icon/Icon.stories.tsx +++ b/frontend/lib/ui/Icon/Icon.stories.tsx @@ -1,9 +1,10 @@ import type { Story } from "@ladle/react"; -import { Icon } from "./Icon"; -import { Size } from "../ui.types"; import { IconWarning } from "@kiesraad/icon"; +import { Size } from "../ui.types"; +import { Icon } from "./Icon"; + type Props = { color: "primary" | "warning"; size: Size; diff --git a/frontend/lib/ui/Icon/Icon.test.tsx b/frontend/lib/ui/Icon/Icon.test.tsx index abcb5ef06..f940c36c1 100644 --- a/frontend/lib/ui/Icon/Icon.test.tsx +++ b/frontend/lib/ui/Icon/Icon.test.tsx @@ -1,6 +1,7 @@ -import { render } from "app/test/unit"; import { describe, expect, test } from "vitest"; +import { render } from "app/test/unit"; + import { DefaultIcon } from "./Icon.stories"; describe("UI component: Icon", () => { diff --git a/frontend/lib/ui/Icon/Icon.tsx b/frontend/lib/ui/Icon/Icon.tsx index e1f47fb46..34be159b3 100644 --- a/frontend/lib/ui/Icon/Icon.tsx +++ b/frontend/lib/ui/Icon/Icon.tsx @@ -1,7 +1,9 @@ import * as React from "react"; + +import { cn } from "@kiesraad/util"; + import { Size } from "../ui.types"; import cls from "./Icon.module.css"; -import { cn } from "@kiesraad/util"; export interface IconProps { icon: React.ReactNode; diff --git a/frontend/lib/ui/IconButton/IconButton.stories.tsx b/frontend/lib/ui/IconButton/IconButton.stories.tsx index e27f59997..633767752 100644 --- a/frontend/lib/ui/IconButton/IconButton.stories.tsx +++ b/frontend/lib/ui/IconButton/IconButton.stories.tsx @@ -1,8 +1,9 @@ import type { Story } from "@ladle/react"; -import { IconButton } from "./IconButton"; import { IconCross } from "@kiesraad/icon"; + import { Size, Variant } from "../ui.types"; +import { IconButton } from "./IconButton"; type Props = { label: string; diff --git a/frontend/lib/ui/IconButton/IconButton.test.tsx b/frontend/lib/ui/IconButton/IconButton.test.tsx index a8d6caa00..8cf65c101 100644 --- a/frontend/lib/ui/IconButton/IconButton.test.tsx +++ b/frontend/lib/ui/IconButton/IconButton.test.tsx @@ -1,6 +1,7 @@ import { describe, expect, test } from "vitest"; import { render } from "app/test/unit"; + import { DefaultIconButton, DisabledIconButton } from "./IconButton.stories"; describe("UI component: IconButton", () => { diff --git a/frontend/lib/ui/IconButton/IconButton.tsx b/frontend/lib/ui/IconButton/IconButton.tsx index 01a43d2d8..723d97e40 100644 --- a/frontend/lib/ui/IconButton/IconButton.tsx +++ b/frontend/lib/ui/IconButton/IconButton.tsx @@ -1,7 +1,9 @@ import * as React from "react"; -import cls from "./IconButton.module.css"; + import { cn } from "@kiesraad/util"; + import { Size, Variant } from "../ui.types"; +import cls from "./IconButton.module.css"; export interface IconButtonProps extends React.ButtonHTMLAttributes { icon: React.ReactNode; diff --git a/frontend/lib/ui/InputField/InputField.e2e.ts b/frontend/lib/ui/InputField/InputField.e2e.ts index cff497b88..be3f0b8c5 100644 --- a/frontend/lib/ui/InputField/InputField.e2e.ts +++ b/frontend/lib/ui/InputField/InputField.e2e.ts @@ -1,4 +1,4 @@ -import { test, expect } from "@playwright/test"; +import { expect, test } from "@playwright/test"; test("default small wide input field is visible", async ({ page }) => { await page.goto("http://localhost:61000/?story=input-field--wide-input-field"); diff --git a/frontend/lib/ui/InputField/InputField.tsx b/frontend/lib/ui/InputField/InputField.tsx index 9245f5707..df542c0d5 100644 --- a/frontend/lib/ui/InputField/InputField.tsx +++ b/frontend/lib/ui/InputField/InputField.tsx @@ -1,4 +1,5 @@ import * as React from "react"; + import cls from "./InputField.module.css"; export interface InputFieldProps extends React.InputHTMLAttributes { diff --git a/frontend/lib/ui/InputGrid/InputGrid.e2e.ts b/frontend/lib/ui/InputGrid/InputGrid.e2e.ts index 79e336c08..7cd33bf3d 100644 --- a/frontend/lib/ui/InputGrid/InputGrid.e2e.ts +++ b/frontend/lib/ui/InputGrid/InputGrid.e2e.ts @@ -1,4 +1,4 @@ -import { Locator, test as base, expect } from "@playwright/test"; +import { test as base, expect, Locator } from "@playwright/test"; const test = base.extend<{ gridPage: Locator }>({ gridPage: async ({ page }, use) => { diff --git a/frontend/lib/ui/InputGrid/InputGrid.test.tsx b/frontend/lib/ui/InputGrid/InputGrid.test.tsx index 5af3a7655..e533a00a8 100644 --- a/frontend/lib/ui/InputGrid/InputGrid.test.tsx +++ b/frontend/lib/ui/InputGrid/InputGrid.test.tsx @@ -2,6 +2,7 @@ import { userEvent } from "@testing-library/user-event"; import { describe, expect, test } from "vitest"; import { render, screen } from "app/test/unit"; + import { InputGrid } from "./InputGrid"; const component = ( diff --git a/frontend/lib/ui/InputGrid/InputGrid.tsx b/frontend/lib/ui/InputGrid/InputGrid.tsx index 8b99d8661..afae081e5 100644 --- a/frontend/lib/ui/InputGrid/InputGrid.tsx +++ b/frontend/lib/ui/InputGrid/InputGrid.tsx @@ -1,8 +1,9 @@ import * as React from "react"; -import cls from "./InputGrid.module.css"; import { cn, domtoren } from "@kiesraad/util"; +import cls from "./InputGrid.module.css"; + export interface InputGridProps { zebra?: boolean; children: React.ReactNode; diff --git a/frontend/lib/ui/Modal/Modal.stories.tsx b/frontend/lib/ui/Modal/Modal.stories.tsx index aecdd0184..cb53633cc 100644 --- a/frontend/lib/ui/Modal/Modal.stories.tsx +++ b/frontend/lib/ui/Modal/Modal.stories.tsx @@ -1,6 +1,7 @@ import type { Story } from "@ladle/react"; import { Button } from "@kiesraad/ui"; + import { Modal } from "./Modal"; export const DefaultModal: Story = () => ( diff --git a/frontend/lib/ui/Modal/Modal.test.tsx b/frontend/lib/ui/Modal/Modal.test.tsx index 3b556abf6..97d946af8 100644 --- a/frontend/lib/ui/Modal/Modal.test.tsx +++ b/frontend/lib/ui/Modal/Modal.test.tsx @@ -1,5 +1,7 @@ import { describe, expect, test } from "vitest"; + import { getQueriesForElement, render } from "app/test/unit"; + import { Modal } from "./Modal"; const component = (onClose: () => void) => ( diff --git a/frontend/lib/ui/Modal/Modal.tsx b/frontend/lib/ui/Modal/Modal.tsx index 8008ee310..59fc3ac3d 100644 --- a/frontend/lib/ui/Modal/Modal.tsx +++ b/frontend/lib/ui/Modal/Modal.tsx @@ -1,7 +1,9 @@ import * as React from "react"; import { createPortal } from "react-dom"; -import { IconButton } from "@kiesraad/ui"; + import { IconCross } from "@kiesraad/icon"; +import { IconButton } from "@kiesraad/ui"; + import cls from "./Modal.module.css"; export interface ModalProps { diff --git a/frontend/lib/ui/ProgressList/ProgressList.tsx b/frontend/lib/ui/ProgressList/ProgressList.tsx index 1d4e6dbee..d343eb451 100644 --- a/frontend/lib/ui/ProgressList/ProgressList.tsx +++ b/frontend/lib/ui/ProgressList/ProgressList.tsx @@ -1,4 +1,5 @@ import * as React from "react"; + import { IconArrowNarrowRight, IconAsterisk, @@ -7,6 +8,7 @@ import { IconWarning, } from "@kiesraad/icon"; import { cn } from "@kiesraad/util"; + import { MenuStatus } from "../ui.types"; import cls from "./ProgressList.module.css"; diff --git a/frontend/lib/ui/Spinner/Spinner.stories.tsx b/frontend/lib/ui/Spinner/Spinner.stories.tsx index 014ac68fc..f76968fe4 100644 --- a/frontend/lib/ui/Spinner/Spinner.stories.tsx +++ b/frontend/lib/ui/Spinner/Spinner.stories.tsx @@ -1,7 +1,7 @@ import type { Story } from "@ladle/react"; -import { Spinner } from "./Spinner"; import { Size } from "../ui.types"; +import { Spinner } from "./Spinner"; type Props = { size: Size; diff --git a/frontend/lib/ui/Spinner/Spinner.test.tsx b/frontend/lib/ui/Spinner/Spinner.test.tsx index 96884a615..2e233f613 100644 --- a/frontend/lib/ui/Spinner/Spinner.test.tsx +++ b/frontend/lib/ui/Spinner/Spinner.test.tsx @@ -1,5 +1,7 @@ import { describe, expect, test } from "vitest"; + import { render } from "app/test/unit"; + import { DefaultSpinner } from "./Spinner.stories"; describe("UI component: Spinner", () => { diff --git a/frontend/lib/ui/Spinner/Spinner.tsx b/frontend/lib/ui/Spinner/Spinner.tsx index 9ecca7ab3..b12daf04f 100644 --- a/frontend/lib/ui/Spinner/Spinner.tsx +++ b/frontend/lib/ui/Spinner/Spinner.tsx @@ -1,7 +1,9 @@ import * as React from "react"; + +import { cn } from "@kiesraad/util"; + import { Size } from "../ui.types"; import cls from "./Spinner.module.css"; -import { cn } from "@kiesraad/util"; export interface SpinnerProps { size?: Size; diff --git a/frontend/lib/ui/Tooltip/Tooltip.stories.tsx b/frontend/lib/ui/Tooltip/Tooltip.stories.tsx index 7e0dbd635..d98ea95b6 100644 --- a/frontend/lib/ui/Tooltip/Tooltip.stories.tsx +++ b/frontend/lib/ui/Tooltip/Tooltip.stories.tsx @@ -1,8 +1,10 @@ import type { Story } from "@ladle/react"; -import { Tooltip } from "./Tooltip"; -import { Icon } from "../Icon/Icon"; + import { IconWarningSquare } from "@kiesraad/icon"; +import { Icon } from "../Icon/Icon"; +import { Tooltip } from "./Tooltip"; + type Props = { text: string; }; diff --git a/frontend/lib/ui/Tooltip/Tooltip.tsx b/frontend/lib/ui/Tooltip/Tooltip.tsx index 5f41b1869..a1a392a8a 100644 --- a/frontend/lib/ui/Tooltip/Tooltip.tsx +++ b/frontend/lib/ui/Tooltip/Tooltip.tsx @@ -1,4 +1,5 @@ import * as React from "react"; + import cls from "./Tooltip.module.css"; export interface TooltipProps { diff --git a/frontend/lib/ui/Tooltip/useTooltip.ts b/frontend/lib/ui/Tooltip/useTooltip.ts index 63c6c961a..54b33838c 100644 --- a/frontend/lib/ui/Tooltip/useTooltip.ts +++ b/frontend/lib/ui/Tooltip/useTooltip.ts @@ -1,4 +1,5 @@ import * as React from "react"; + import { EVENT_TOOLTIP_HIDE } from "./Tooltip"; export interface UseTooltipParams { diff --git a/frontend/lib/ui/util/Util.tsx b/frontend/lib/ui/util/Util.tsx index c0f8f37ba..a743297fc 100644 --- a/frontend/lib/ui/util/Util.tsx +++ b/frontend/lib/ui/util/Util.tsx @@ -1,4 +1,5 @@ -import { IconError, IconThumbsUp, IconWarning, IconInfo } from "@kiesraad/icon"; +import { IconError, IconInfo, IconThumbsUp, IconWarning } from "@kiesraad/icon"; + import { AlertType } from "../ui.types"; export function renderIconForType(type: AlertType) { diff --git a/frontend/lib/util/classnames.test.ts b/frontend/lib/util/classnames.test.ts index 775df26a2..a863079b9 100644 --- a/frontend/lib/util/classnames.test.ts +++ b/frontend/lib/util/classnames.test.ts @@ -1,4 +1,5 @@ import { expect, test } from "vitest"; + import { classnames, cn } from "./classnames"; test("classnames result", () => { diff --git a/frontend/lib/util/domtoren.test.ts b/frontend/lib/util/domtoren.test.ts index c1f9aa1db..4448a48da 100644 --- a/frontend/lib/util/domtoren.test.ts +++ b/frontend/lib/util/domtoren.test.ts @@ -1,4 +1,5 @@ -import { expect, test, assert } from "vitest"; +import { assert, expect, test } from "vitest"; + import { domtoren } from "./domtoren"; const div = document.createElement("div"); diff --git a/frontend/lib/util/fields.test.ts b/frontend/lib/util/fields.test.ts index 528a78196..28626f5c3 100644 --- a/frontend/lib/util/fields.test.ts +++ b/frontend/lib/util/fields.test.ts @@ -1,4 +1,5 @@ import { expect, test } from "vitest"; + import { fieldNameFromPath, matchValidationResultWithFormSections } from "./fields"; test.each([ diff --git a/frontend/lib/util/hook/usePositiveNumberInputMask.test.ts b/frontend/lib/util/hook/usePositiveNumberInputMask.test.ts index ec8bd8f1e..1d0f0debe 100644 --- a/frontend/lib/util/hook/usePositiveNumberInputMask.test.ts +++ b/frontend/lib/util/hook/usePositiveNumberInputMask.test.ts @@ -1,5 +1,7 @@ import { describe, expect, test } from "vitest"; + import { renderHook } from "app/test/unit"; + import { usePositiveNumberInputMask } from "@kiesraad/util"; describe("useInputMask", () => { diff --git a/frontend/lib/util/hook/usePositiveNumberInputMask.ts b/frontend/lib/util/hook/usePositiveNumberInputMask.ts index ea561753e..319abbaf1 100644 --- a/frontend/lib/util/hook/usePositiveNumberInputMask.ts +++ b/frontend/lib/util/hook/usePositiveNumberInputMask.ts @@ -1,6 +1,7 @@ -import { FieldValidationResult } from "@kiesraad/api"; import * as React from "react"; +import { FieldValidationResult } from "@kiesraad/api"; + export type FormatFunc = (s: string | number | null | undefined) => string; export type DeformatFunc = (s: string) => number; export type ValidateFunc = (s: string | number | null | undefined) => boolean; diff --git a/frontend/lib/util/hook/usePreventFormEnterSubmit.test.tsx b/frontend/lib/util/hook/usePreventFormEnterSubmit.test.tsx index 1579677a9..6b1995d7a 100644 --- a/frontend/lib/util/hook/usePreventFormEnterSubmit.test.tsx +++ b/frontend/lib/util/hook/usePreventFormEnterSubmit.test.tsx @@ -1,8 +1,10 @@ import * as React from "react"; + import { userEvent } from "@testing-library/user-event"; import { describe, expect, test, vi } from "vitest"; import { render } from "app/test/unit"; + import { usePreventFormEnterSubmit } from "@kiesraad/util"; const TestComponent = ({ cb }: { cb: (event: React.FormEvent) => void }) => { diff --git a/frontend/lib/util/strings.test.ts b/frontend/lib/util/strings.test.ts index f3ebca10c..b95045046 100644 --- a/frontend/lib/util/strings.test.ts +++ b/frontend/lib/util/strings.test.ts @@ -1,4 +1,5 @@ -import { expect, describe, test } from "vitest"; +import { describe, expect, test } from "vitest"; + import { ellipsis } from "./strings"; describe("Strings util", () => { diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5e4345bf0..a3b0d747c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,6 +19,7 @@ "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", + "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@types/node": "^20.14.9", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", @@ -2346,6 +2347,115 @@ "@testing-library/dom": ">=7.21.4" } }, + "node_modules/@trivago/prettier-plugin-sort-imports": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-4.3.0.tgz", + "integrity": "sha512-r3n0onD3BTOVUNPhR4lhVK4/pABGpbA7bW3eumZnYdKaHkf1qEC+Mag6DPbGNuuh0eG8AaYj+YqmVHSiGslaTQ==", + "dev": true, + "dependencies": { + "@babel/generator": "7.17.7", + "@babel/parser": "^7.20.5", + "@babel/traverse": "7.23.2", + "@babel/types": "7.17.0", + "javascript-natural-sort": "0.7.1", + "lodash": "^4.17.21" + }, + "peerDependencies": { + "@vue/compiler-sfc": "3.x", + "prettier": "2.x - 3.x" + }, + "peerDependenciesMeta": { + "@vue/compiler-sfc": { + "optional": true + } + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/generator": { + "version": "7.17.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.7.tgz", + "integrity": "sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==", + "dev": true, + "dependencies": { + "@babel/types": "^7.17.0", + "jsesc": "^2.5.1", + "source-map": "^0.5.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse": { + "version": "7.23.2", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.2.tgz", + "integrity": "sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.22.13", + "@babel/generator": "^7.23.0", + "@babel/helper-environment-visitor": "^7.22.20", + "@babel/helper-function-name": "^7.23.0", + "@babel/helper-hoist-variables": "^7.22.5", + "@babel/helper-split-export-declaration": "^7.22.6", + "@babel/parser": "^7.23.0", + "@babel/types": "^7.23.0", + "debug": "^4.1.0", + "globals": "^11.1.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/generator": { + "version": "7.24.10", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.10.tgz", + "integrity": "sha512-o9HBZL1G2129luEUlG1hB4N/nlYNWHnpwlND9eOMclRqqu1YDy2sSYVCFUZwl8I1Gxh+QSRrP2vD7EpUmFVXxg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.24.9", + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25", + "jsesc": "^2.5.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/traverse/node_modules/@babel/types": { + "version": "7.24.9", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.9.tgz", + "integrity": "sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ==", + "dev": true, + "dependencies": { + "@babel/helper-string-parser": "^7.24.8", + "@babel/helper-validator-identifier": "^7.24.7", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/@babel/types": { + "version": "7.17.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz", + "integrity": "sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==", + "dev": true, + "dependencies": { + "@babel/helper-validator-identifier": "^7.16.7", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@trivago/prettier-plugin-sort-imports/node_modules/source-map": { + "version": "0.5.7", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/@types/acorn": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz", @@ -7804,6 +7914,12 @@ "node": ">=8" } }, + "node_modules/javascript-natural-sort": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz", + "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==", + "dev": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 6ac921e9d..ea6cdba7b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -35,6 +35,7 @@ "@testing-library/jest-dom": "^6.4.6", "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", + "@trivago/prettier-plugin-sort-imports": "^4.3.0", "@types/node": "^20.14.9", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", @@ -75,8 +76,5 @@ }, "lint-staged": { "*.{js,ts,tsx,json}": "eslint --cache --fix" - }, - "prettier": { - "printWidth": 100 } } diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts index 891fe183f..b42ab55f0 100644 --- a/frontend/playwright.config.ts +++ b/frontend/playwright.config.ts @@ -1,4 +1,4 @@ -import { devices, type PlaywrightTestConfig, defineConfig } from "@playwright/test"; +import { defineConfig, devices, type PlaywrightTestConfig } from "@playwright/test"; /** * See https://playwright.dev/docs/test-configuration. diff --git a/frontend/scripts/gen_openapi_types.ts b/frontend/scripts/gen_openapi_types.ts index 4d19dfede..9b0c0a458 100644 --- a/frontend/scripts/gen_openapi_types.ts +++ b/frontend/scripts/gen_openapi_types.ts @@ -1,7 +1,8 @@ import assert from "assert"; import fs from "fs"; import prettier from "prettier"; -import { OpenAPIV3, ReferenceObject, SchemaObject, PathsObject, OperationObject } from "./openapi"; + +import { OpenAPIV3, OperationObject, PathsObject, ReferenceObject, SchemaObject } from "./openapi"; const TARGET_PATH = "./lib/api/gen"; const FILE_NAME = "openapi.ts"; diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 114fcd211..d6d03e1db 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -1,8 +1,9 @@ +import react from "@vitejs/plugin-react-swc"; import path from "path"; import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react-swc"; -import tsConfig from "./tsconfig.json"; + import pkgjson from "./package.json"; +import tsConfig from "./tsconfig.json"; const apiMode = process.env.API_MODE || "mock"; const apiHost = process.env.API_HOST || apiMode === "mock" ? "" : "http://localhost:8080";