style: add eslint and prettier, fix style errors

tests/unit/components/ui/Alignment.test.ts

@@ -1,44 +1,43 @@
-import { TextAlign } from "$lib/constants";
-import { render, screen } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-import AlignmentTest from "./AlignmentTest.svelte";
-
-describe("Alignment.svelte", () => {
-  it("should update state for every button by clicking in sequence", async () => {
-    const user = userEvent.setup();
-    render(AlignmentTest);
-
-    const buttons = screen.getAllByRole("radio");
-    const stateDisplay = screen.getByTestId("align-value");
-
-    const allButtonsToClick = [...buttons, buttons[0]];
-
-    for (const button of allButtonsToClick) {
-      const label = button.getAttribute("aria-label")?.toLowerCase() || "";
-
-      await user.click(button);
-
-      const finalValue = stateDisplay.textContent?.toLowerCase() || "";
-      expect(label).toContain(finalValue);
-    }
-  });
-
-  it("should have initial state from props", () => {
-    render(AlignmentTest, { props: { align: TextAlign.RIGHT } });
-    expect(screen.getByTestId("align-value").textContent).toBe(TextAlign.RIGHT);
-  });
-
-  it("should sync with initial state and change state", async () => {
-    const user = userEvent.setup();
-    const { rerender } = render(AlignmentTest, { props: { align: TextAlign.RIGHT } });
-    const stateDisplay = screen.getByTestId("align-value");
-
-    expect(stateDisplay.textContent).toBe(TextAlign.RIGHT);
-
-    await rerender({ align: TextAlign.CENTER });
-
-    const centerBtn = screen.getByRole("radio", { name: new RegExp(TextAlign.CENTER, "i") });
-    expect(centerBtn).toBeChecked();
-  });
-});
+import { TextAlign } from "$lib/constants";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import AlignmentTest from "./AlignmentTest.svelte";
+
+describe("Alignment.svelte", () => {
+  it("should update state for every button by clicking in sequence", async () => {
+    const user = userEvent.setup();
+    render(AlignmentTest);
+
+    const buttons = screen.getAllByRole("radio");
+    const stateDisplay = screen.getByTestId("align-value");
+
+    const allButtonsToClick = [...buttons, buttons[0]];
+
+    for (const button of allButtonsToClick) {
+      const label = button.getAttribute("aria-label")?.toLowerCase() || "";
+
+      await user.click(button);
+
+      const finalValue = stateDisplay.textContent?.toLowerCase() || "";
+      expect(label).toContain(finalValue);
+    }
+  });
+
+  it("should have initial state from props", () => {
+    render(AlignmentTest, { props: { align: TextAlign.RIGHT } });
+    expect(screen.getByTestId("align-value").textContent).toBe(TextAlign.RIGHT);
+  });
+
+  it("should sync with initial state and change state", async () => {
+    const { rerender } = render(AlignmentTest, { props: { align: TextAlign.RIGHT } });
+    const stateDisplay = screen.getByTestId("align-value");
+
+    expect(stateDisplay.textContent).toBe(TextAlign.RIGHT);
+
+    await rerender({ align: TextAlign.CENTER });
+
+    const centerBtn = screen.getByRole("radio", { name: new RegExp(TextAlign.CENTER, "i") });
+    expect(centerBtn).toBeChecked();
+  });
+});

tests/unit/components/ui/AlignmentTest.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">
-  import Alignment from "$components/ui/Alignment.svelte";
-
-  import { TextAlign } from "$lib/constants";
-
-  let { align = TextAlign.LEFT } = $props();
-</script>
-
-<Alignment bind:align />
-
-<div data-testid="align-value">{align}</div>
+<script lang="ts">
+  import Alignment from "$components/ui/Alignment.svelte";
+
+  import { TextAlign } from "$lib/constants";
+
+  let { align = TextAlign.LEFT } = $props();
+</script>
+
+<Alignment bind:align />
+
+<div data-testid="align-value">{align}</div>

tests/unit/components/ui/Badge.test.ts

@@ -1,43 +1,43 @@
-import Badge from "$components/ui/Badge.svelte";
-import { render, screen } from "@testing-library/svelte";
-import { describe, expect, it } from "vitest";
-
-describe("Badge.svelte", () => {
-  it("should render with string text", () => {
-    render(Badge, {
-      props: {
-        text: "Test Badge",
-      },
-    });
-
-    expect(screen.getByText("Test Badge")).toBeInTheDocument();
-  });
-
-  it("should render with number text", () => {
-    render(Badge, {
-      props: {
-        text: 42,
-      },
-    });
-
-    expect(screen.getByText("42")).toBeInTheDocument();
-  });
-
-  it("should render with empty string", () => {
-    render(Badge, {
-      props: {
-        text: "",
-      },
-    });
-  });
-
-  it("should render with zero", () => {
-    render(Badge, {
-      props: {
-        text: 0,
-      },
-    });
-
-    expect(screen.getByText("0")).toBeInTheDocument();
-  });
-});
+import Badge from "$components/ui/Badge.svelte";
+import { render, screen } from "@testing-library/svelte";
+import { describe, expect, it } from "vitest";
+
+describe("Badge.svelte", () => {
+  it("should render with string text", () => {
+    render(Badge, {
+      props: {
+        text: "Test Badge",
+      },
+    });
+
+    expect(screen.getByText("Test Badge")).toBeInTheDocument();
+  });
+
+  it("should render with number text", () => {
+    render(Badge, {
+      props: {
+        text: 42,
+      },
+    });
+
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("should render with empty string", () => {
+    render(Badge, {
+      props: {
+        text: "",
+      },
+    });
+  });
+
+  it("should render with zero", () => {
+    render(Badge, {
+      props: {
+        text: 0,
+      },
+    });
+
+    expect(screen.getByText("0")).toBeInTheDocument();
+  });
+});

tests/unit/components/ui/Button.test.ts

@@ -1,95 +1,95 @@
-import Button from "$components/ui/Button.svelte";
-import { render, screen } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import MockIcon from "./MockIcon.svelte";
-
-describe("Button.svelte", () => {
-  it("should render with icon and label", () => {
-    render(Button, {
-      props: {
-        icon: MockIcon,
-        label: "Test Button",
-        ariaLabel: "Test button",
-      },
-    });
-
-    expect(screen.getByText("Test Button")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: /test button/i })).toBeInTheDocument();
-  });
-
-  it("should render with icon only", () => {
-    render(Button, {
-      props: {
-        icon: MockIcon,
-        ariaLabel: "Test button",
-      },
-    });
-
-    const button = screen.getByRole("button", { name: /test button/i });
-    expect(button).toBeInTheDocument();
-    expect(button.textContent.trim()).toBe("");
-  });
-
-  it("should call onclick handler", async () => {
-    const onclick = vi.fn();
-    const user = userEvent.setup();
-
-    render(Button, {
-      props: {
-        icon: MockIcon,
-        label: "Click me",
-        onclick,
-        ariaLabel: "Test button",
-      },
-    });
-
-    const button = screen.getByRole("button", { name: /test button/i });
-    await user.click(button);
-
-    expect(onclick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not throw error when clicked without onclick prop", async () => {
-    const user = userEvent.setup();
-
-    render(Button, {
-      props: {
-        icon: MockIcon,
-        label: "Click me",
-        ariaLabel: "Test button",
-      },
-    });
-
-    const button = screen.getByRole("button", { name: /test button/i });
-
-    expect(() => user.click(button)).not.toThrow();
-  });
-
-  it("should be disabled when disabled prop is true", () => {
-    render(Button, {
-      props: {
-        icon: MockIcon,
-        label: "Disabled",
-        disabled: true,
-        ariaLabel: "Test button",
-      },
-    });
-
-    const button = screen.getByRole("button", { name: /test button/i });
-    expect(button).toBeDisabled();
-  });
-
-  it("should not be disabled by default", () => {
-    render(Button, {
-      props: {
-        icon: MockIcon,
-        label: "Enabled",
-        ariaLabel: "Test button",
-      },
-    });
-
-    const button = screen.getByRole("button", { name: /test button/i });
-    expect(button).not.toBeDisabled();
-  });
-});
+import Button from "$components/ui/Button.svelte";
+import { render, screen } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import MockIcon from "./MockIcon.svelte";
+
+describe("Button.svelte", () => {
+  it("should render with icon and label", () => {
+    render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Test Button",
+        ariaLabel: "Test button",
+      },
+    });
+
+    expect(screen.getByText("Test Button")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /test button/i })).toBeInTheDocument();
+  });
+
+  it("should render with icon only", () => {
+    render(Button, {
+      props: {
+        icon: MockIcon,
+        ariaLabel: "Test button",
+      },
+    });
+
+    const button = screen.getByRole("button", { name: /test button/i });
+    expect(button).toBeInTheDocument();
+    expect(button.textContent.trim()).toBe("");
+  });
+
+  it("should call onclick handler", async () => {
+    const onclick = vi.fn();
+    const user = userEvent.setup();
+
+    render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Click me",
+        onclick,
+        ariaLabel: "Test button",
+      },
+    });
+
+    const button = screen.getByRole("button", { name: /test button/i });
+    await user.click(button);
+
+    expect(onclick).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not throw error when clicked without onclick prop", async () => {
+    const user = userEvent.setup();
+
+    render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Click me",
+        ariaLabel: "Test button",
+      },
+    });
+
+    const button = screen.getByRole("button", { name: /test button/i });
+
+    expect(() => user.click(button)).not.toThrow();
+  });
+
+  it("should be disabled when disabled prop is true", () => {
+    render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Disabled",
+        disabled: true,
+        ariaLabel: "Test button",
+      },
+    });
+
+    const button = screen.getByRole("button", { name: /test button/i });
+    expect(button).toBeDisabled();
+  });
+
+  it("should not be disabled by default", () => {
+    render(Button, {
+      props: {
+        icon: MockIcon,
+        label: "Enabled",
+        ariaLabel: "Test button",
+      },
+    });
+
+    const button = screen.getByRole("button", { name: /test button/i });
+    expect(button).not.toBeDisabled();
+  });
+});

tests/unit/components/ui/ColorPicker.test.ts

@@ -1,13 +1,13 @@
-import ColorPicker from "$components/ui/ColorPicker.svelte";
-import { render } from "@testing-library/svelte";
-import { describe, it } from "vitest";
-
-describe("ColorPicker.svelte", () => {
-  it("should render without crashing", () => {
-    render(ColorPicker, {
-      props: {
-        value: "#ffffff",
-      },
-    });
-  });
-});
+import ColorPicker from "$components/ui/ColorPicker.svelte";
+import { render } from "@testing-library/svelte";
+import { describe, it } from "vitest";
+
+describe("ColorPicker.svelte", () => {
+  it("should render without crashing", () => {
+    render(ColorPicker, {
+      props: {
+        value: "#ffffff",
+      },
+    });
+  });
+});

tests/unit/components/ui/MockIcon.svelte

@@ -1,3 +1,3 @@
-<svg data-testid="mock-icon" viewBox="0 0 24 24">
-  <circle cx="12" cy="12" r="10" />
-</svg>
+<svg data-testid="mock-icon" viewBox="0 0 24 24">
+  <circle cx="12" cy="12" r="10" />
+</svg>

tests/unit/components/ui/RangeSlider.test.ts

@@ -1,21 +1,21 @@
-import RangeSlider from "$components/ui/RangeSlider.svelte";
-import { fireEvent, render, screen } from "@testing-library/svelte";
-import { describe, expect, it, vi } from "vitest";
-
-describe("RangeSlider.svelte", () => {
-  it("should call onchange handler", async () => {
-    const onchange = vi.fn();
-
-    render(RangeSlider, {
-      props: {
-        value: 50,
-        onchange,
-      },
-    });
-
-    const slider = screen.getByRole("slider");
-    await fireEvent.change(slider, { target: { value: "75" } });
-
-    expect(onchange).toHaveBeenCalledTimes(1);
-  });
-});
+import RangeSlider from "$components/ui/RangeSlider.svelte";
+import { fireEvent, render, screen } from "@testing-library/svelte";
+import { describe, expect, it, vi } from "vitest";
+
+describe("RangeSlider.svelte", () => {
+  it("should call onchange handler", async () => {
+    const onchange = vi.fn();
+
+    render(RangeSlider, {
+      props: {
+        value: 50,
+        onchange,
+      },
+    });
+
+    const slider = screen.getByRole("slider");
+    await fireEvent.change(slider, { target: { value: "75" } });
+
+    expect(onchange).toHaveBeenCalledTimes(1);
+  });
+});

tests/unit/components/ui/SelectFont.test.ts

@@ -1,13 +1,13 @@
-import SelectFont from "$components/ui/SelectFont.svelte";
-import { render } from "@testing-library/svelte";
-import { describe, it } from "vitest";
-
-describe("SelectFont.svelte", () => {
-  it("should render without crashing", () => {
-    render(SelectFont, {
-      props: {
-        value: "Arial",
-      },
-    });
-  });
-});
+import SelectFont from "$components/ui/SelectFont.svelte";
+import { render } from "@testing-library/svelte";
+import { describe, it } from "vitest";
+
+describe("SelectFont.svelte", () => {
+  it("should render without crashing", () => {
+    render(SelectFont, {
+      props: {
+        value: "Arial",
+      },
+    });
+  });
+});