refactor: remove @numeric-text/react dependency and implement NumericText component

src/components/Header.tsx

@@ -1,4 +1,3 @@
-import NumericText from "@numeric-text/react";
 import { useQuery } from "@tanstack/react-query";
 import { ImageMinus } from "lucide-react";
 import { DateTime } from "luxon";
@@ -16,6 +15,7 @@ import { cn } from "@/lib/utils";
 import AnimateCountClient from "./AnimatedCount";
 import { LanguageSwitcher } from "./LanguageSwitcher";
 import { Loader, LoadingSpinner } from "./loading/Loader";
+import NumericText from "./NumericText";
 import { SearchButton } from "./SearchButton";
 import { Button } from "./ui/button";
 

src/components/NumericText.tsx

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+type NumericTextTransition = {
+	duration?: number;
+	easing?: string;
+};
+
+type NumericTextProps = Omit<ComponentPropsWithoutRef<"span">, "children"> & {
+	animated?: boolean;
+	respectMotionPreference?: boolean;
+	transition?: NumericTextTransition;
+	trend?: -1 | 0 | 1;
+	value: number | string;
+};
+
+export default function NumericText({
+	animated,
+	respectMotionPreference,
+	transition,
+	trend,
+	value,
+	...spanProps
+}: NumericTextProps) {
+	void animated;
+	void respectMotionPreference;
+	void transition;
+	void trend;
+
+	return <span {...spanProps}>{value}</span>;
+}

src/components/ServerDetailOverview.tsx

@@ -1,4 +1,3 @@
-import NumericText from "@numeric-text/react";
 import countries from "i18n-iso-countries";
 import enLocale from "i18n-iso-countries/langs/en.json";
 import { useEffect, useState } from "react";
@@ -12,6 +11,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { useWebSocketContext } from "@/hooks/use-websocket-context";
 import { formatBytes } from "@/lib/format";
 import { cn, formatNezhaInfo } from "@/lib/utils";
+import NumericText from "./NumericText";
 import {
 	Accordion,
 	AccordionContent,

src/components/ServerOverview.tsx

@@ -2,12 +2,12 @@ import {
 	ArrowDownCircleIcon,
 	ArrowUpCircleIcon,
 } from "@heroicons/react/20/solid";
-import NumericText from "@numeric-text/react";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "@/components/ui/card";
 import { useStatus } from "@/hooks/use-status";
 import { formatBytes } from "@/lib/format";
 import { cn } from "@/lib/utils";
+import NumericText from "./NumericText";
 
 type ServerOverviewProps = {
 	online: number;

src/test/components/basic-components.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import AnimateCountClient, { AnimateCount } from "@/components/AnimatedCount";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import ChartSkeleton from "@/components/loading/ChartSkeleton";
@@ -14,16 +14,6 @@ import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 
-vi.mock("@numeric-text/react", () => ({
-	default: ({
-		className,
-		value,
-	}: {
-		className?: string;
-		value: string | number;
-	}) => <span className={className}>{value}</span>,
-}));
-
 import { CommandProvider } from "@/context/command-provider";
 import { StatusProvider } from "@/context/status-provider";
 import { useCommand } from "@/hooks/use-command";

src/test/components/header.test.tsx

@@ -21,12 +21,6 @@ const headerMocks = vi.hoisted(() => ({
 	updateBackground: vi.fn(),
 }));
 
-vi.mock("@numeric-text/react", () => ({
-	default: ({ value }: { value: string | number }) => (
-		<span data-testid="numeric-text">{value}</span>
-	),
-}));
-
 vi.mock("@/hooks/use-background", () => ({
 	useBackground: () => ({
 		backgroundImage: headerMocks.backgroundImage,
@@ -150,7 +144,7 @@ describe("Header", () => {
 		);
 		expect(screen.getAllByRole("link", { name: "Docs" })).toHaveLength(2);
 		expect(await screen.findAllByText("dashboard")).toHaveLength(2);
-		expect(screen.getByTestId("numeric-text")).toHaveTextContent("4");
+		expect(screen.getByText("online").closest("button")).toHaveTextContent("4");
 		expect(screen.getByText("online")).toBeInTheDocument();
 
 		await waitFor(() => {

src/test/components/server-detail-components.test.tsx

@@ -14,10 +14,6 @@ const websocketMocks = vi.hoisted(() => ({
 	} | null,
 }));
 
-vi.mock("@numeric-text/react", () => ({
-	default: ({ value }: { value: string | number }) => <span>{value}</span>,
-}));
-
 vi.mock("@/hooks/use-websocket-context", () => ({
 	useWebSocketContext: () => websocketMocks,
 }));