feat(48): Create badge component

app/__tests__/Badge.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import Badge from "../components/ui/badge";
+import { FaCheck, FaTimes, FaInfo } from "react-icons/fa";
+import { describe, it, expect } from "vitest";
+
+describe("Badge", () => {
+  it("renders the label correctly", () => {
+    render(<Badge label="Test Label" variant="default" />);
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+  });
+
+  it("renders the icon correctly", () => {
+    render(<Badge label="Test Label" variant="default" icon={<FaCheck />} />);
+    expect(screen.getByTestId("badge-icon")).toBeInTheDocument();
+  });
+
+  it("applies the correct variant styles for default", () => {
+    render(<Badge label="Default" variant="default" />);
+    expect(screen.getByText("Default")).toHaveClass(
+      "bg-gray-200 text-gray-800"
+    );
+  });
+
+  it("applies the correct variant styles for primary", () => {
+    render(<Badge label="Primary" variant="primary" />);
+    expect(screen.getByText("Primary")).toHaveClass("bg-blue-500 text-white");
+  });
+
+  it("applies the correct variant styles for success", () => {
+    render(<Badge label="Success" variant="success" />);
+    expect(screen.getByText("Success")).toHaveClass("bg-green-500 text-white");
+  });
+
+  it("applies the correct variant styles for error", () => {
+    render(<Badge label="Error" variant="error" />);
+    expect(screen.getByText("Error")).toHaveClass("bg-red-500 text-white");
+  });
+
+  it("renders the correct icon with default variant", () => {
+    render(<Badge label="Default" variant="default" icon={<FaInfo />} />);
+    expect(screen.getByTestId("badge-icon")).toBeInTheDocument();
+  });
+
+  it("renders the correct icon with primary variant", () => {
+    render(<Badge label="Primary" variant="primary" icon={<FaCheck />} />);
+    expect(screen.getByTestId("badge-icon")).toBeInTheDocument();
+  });
+
+  it("renders the correct icon with success variant", () => {
+    render(<Badge label="Success" variant="success" icon={<FaCheck />} />);
+    expect(screen.getByTestId("badge-icon")).toBeInTheDocument();
+  });
+
+  it("renders the correct icon with error variant", () => {
+    render(<Badge label="Error" variant="error" icon={<FaTimes />} />);
+    expect(screen.getByTestId("badge-icon")).toBeInTheDocument();
+  });
+
+  it("has the correct accessibility attributes", () => {
+    render(<Badge label="Accessible Badge" variant="default" />);
+    const badge = screen.getByText("Accessible Badge");
+    expect(badge).toHaveAttribute("role", "status");
+    expect(badge).toHaveAttribute("aria-label", "Accessible Badge");
+  });
+});

app/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import classNames from "classnames";
+
+interface BadgeProps {
+  label: string;
+  icon?: React.ReactNode;
+  variant: "default" | "primary" | "success" | "error";
+}
+
+const Badge: React.FC<BadgeProps> = ({ label, icon, variant }) => {
+  const baseStyles =
+    "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium";
+
+  const variantStyles = {
+    default: "bg-gray-200 text-gray-800",
+    primary: "bg-orange-200 text-orange-800",
+    success: "bg-green-200 text-green-800",
+    error: "bg-red-200 text-red-800",
+  };
+
+  return (
+    <span
+      className={classNames(baseStyles, variantStyles[variant])}
+      role="status"
+      aria-label={label}
+    >
+      {icon && (
+        <span className="mr-2" data-testid="badge-icon">
+          {icon}
+        </span>
+      )}
+      {label}
+    </span>
+  );
+};
+
+export default Badge;

app/routes/_index.tsx

@@ -1,50 +1,21 @@
 import type { MetaFunction } from "@remix-run/node";
-import { Button } from "~/components/ui/button";
+import Badge from "../components/ui/badge";
+import { FaCheck, FaTimes } from "react-icons/fa";
 
 export const meta: MetaFunction = () => {
   return [
-    { title: "New Remix App" },
-    { name: "description", content: "Welcome to Remix!" },
+    { title: "Badge" },
+    { name: "description", content: "Badge component!" },
   ];
 };
 
 export default function Index() {
   return (
-    <div className="font-sans p-4">
-      <h1 className="text-3xl">Welcome to Remix</h1>
-      <ul className="list-disc mt-4 pl-6 space-y-2">
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/quickstart"
-            rel="noreferrer"
-          >
-            5m Quick Start
-          </a>
-        </li>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/start/tutorial"
-            rel="noreferrer"
-          >
-            30m Tutorial
-          </a>
-        </li>
-        <Button>Hello</Button>
-        <li>
-          <a
-            className="text-blue-700 underline visited:text-purple-900"
-            target="_blank"
-            href="https://remix.run/docs"
-            rel="noreferrer"
-          >
-            Remix Docs
-          </a>
-        </li>
-      </ul>
+    <div className="p-10 space-y-4">
+      <Badge label="Default Badge" variant="default" />
+      <Badge label="Primary Badge" variant="primary" icon={<FaCheck />} />
+      <Badge label="Success Badge" variant="success" icon={<FaCheck />} />
+      <Badge label="Error Badge" variant="error" icon={<FaTimes />} />
     </div>
   );
 }

package.json

@@ -8,7 +8,8 @@
     "dev": "remix vite:dev",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
     "start": "remix-serve ./build/server/index.js",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "test": "vitest"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.1.0",
@@ -17,32 +18,38 @@
     "@remix-run/react": "^2.10.3",
     "@remix-run/serve": "^2.10.3",
     "class-variance-authority": "^0.7.0",
+    "classnames": "^2.5.1",
     "clsx": "^2.1.1",
-    "isbot": "^4.1.0",
-    "lucide-react": "^0.408.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "isbot": "^5.1.13",
+    "lucide-react": "^0.412.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.10.3",
-    "@types/react": "^18.2.20",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@types/node": "^20.14.11",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.16.1",
+    "@typescript-eslint/parser": "^7.16.1",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.38.0",
+    "eslint": "^9.7.0",
     "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.1.6",
-    "vite": "^5.1.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "jsdom": "^24.1.1",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.6",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4",
+    "vite-tsconfig-paths": "^4.3.2",
+    "vitest": "^2.0.3"
   },
   "engines": {
     "node": ">=20.0.0"