Merge pull request #454 from ayshadogo/layout

Implement dark mode toggle with persistence

Author: mftee

frontend/cmmty/components/Button/Button.test.tsx

@@ -1,37 +1,92 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ArrowRight } from "lucide-react";
-import Button from "./Button";
+import { fireEvent, render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Button from "./index";
 
 describe("Button", () => {
-  it("renders with default styles and children", () => {
+  // --- Renders correctly ---
+  it("renders with children text", () => {
     render(<Button>Click me</Button>);
+    expect(screen.getByRole("button", { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it("renders with primary variant by default", () => {
+    render(<Button>Primary</Button>);
+    expect(screen.getByRole("button")).toHaveClass("bg-indigo-600");
+  });
+
+  it("renders with secondary variant", () => {
+    render(<Button variant="secondary">Secondary</Button>);
+    expect(screen.getByRole("button")).toHaveClass("border-gray-300");
+  });
+
+  it("renders with destructive variant", () => {
+    render(<Button variant="destructive">Delete</Button>);
+    expect(screen.getByRole("button")).toHaveClass("bg-red-600");
+  });
+
+  it("renders with ghost variant", () => {
+    render(<Button variant="ghost">Ghost</Button>);
+    expect(screen.getByRole("button")).toHaveClass("hover:bg-gray-100");
+  });
+
+  // --- Handles user interaction ---
+  it("calls onClick when clicked", () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+    fireEvent.click(screen.getByRole("button"));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onClick when disabled", () => {
+    const handleClick = jest.fn();
+    render(<Button disabled onClick={handleClick}>Disabled</Button>);
+    fireEvent.click(screen.getByRole("button"));
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  // --- Shows correct state (loading / disabled) ---
+  it("shows loading spinner when loading", () => {
+    render(<Button loading>Submit</Button>);
+    expect(screen.getByRole("button")).toBeDisabled();
+    expect(screen.getByRole("button").querySelector("svg")).toBeInTheDocument();
+  });
 
-    const btn = screen.getByRole("button", { name: /click me/i });
-    expect(btn).toBeInTheDocument();
-    expect(btn).toHaveClass("bg-indigo-600");
+  it("is disabled when disabled prop is true", () => {
+    render(<Button disabled>Disabled</Button>);
+    expect(screen.getByRole("button")).toBeDisabled();
+    expect(screen.getByRole("button")).toHaveClass("disabled:opacity-60");
   });
 
-  it("shows a spinner and disables interaction when loading", async () => {
-    const user = userEvent.setup();
-    render(<Button isLoading>Submitting</Button>);
+  it("is disabled when loading is true (even without disabled prop)", () => {
+    render(<Button loading>Loading</Button>);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
 
-    const btn = screen.getByRole("button", { name: /submitting/i });
-    expect(btn).toBeDisabled();
-    expect(screen.getByTestId("spinner")).toBeInTheDocument();
+  // --- Size variants ---
+  it("applies sm size classes", () => {
+    render(<Button size="sm">Small</Button>);
+    expect(screen.getByRole("button")).toHaveClass("text-xs");
+  });
 
-    await user.click(btn);
-    expect(btn).toBeDisabled();
+  it("applies lg size classes", () => {
+    render(<Button size="lg">Large</Button>);
+    expect(screen.getByRole("button")).toHaveClass("text-base");
   });
 
-  it("renders left and right icons", () => {
-    render(
-      <Button leftIcon={<span data-testid="left-icon" />} rightIcon={<ArrowRight data-testid="right-icon" />}>
-        Next
-      </Button>
-    );
+  // --- Full width ---
+  it("applies full width class when fullWidth is true", () => {
+    render(<Button fullWidth>Full Width</Button>);
+    expect(screen.getByRole("button")).toHaveClass("w-full");
+  });
+
+  // --- Supports native button attributes ---
+  it("forwards type attribute", () => {
+    render(<Button type="submit">Submit</Button>);
+    expect(screen.getByRole("button")).toHaveAttribute("type", "submit");
+  });
 
-    expect(screen.getByTestId("left-icon")).toBeInTheDocument();
-    expect(screen.getByTestId("right-icon")).toBeInTheDocument();
+  it("merges custom className", () => {
+    render(<Button className="my-custom">Custom</Button>);
+    expect(screen.getByRole("button")).toHaveClass("my-custom");
   });
 });

frontend/cmmty/components/Button/index.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+
+export type ButtonVariant = "primary" | "secondary" | "destructive" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  fullWidth?: boolean;
+}
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary:
+    "bg-indigo-600 text-white hover:bg-indigo-700 active:bg-indigo-800 focus:ring-indigo-200",
+  secondary:
+    "border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 active:bg-gray-100 focus:ring-gray-200",
+  destructive:
+    "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus:ring-red-200",
+  ghost:
+    "text-gray-700 hover:bg-gray-100 active:bg-gray-200 focus:ring-gray-200",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "px-3 py-1.5 text-xs min-h-[32px]",
+  md: "px-4 py-2 text-sm min-h-[40px]",
+  lg: "px-6 py-3 text-base min-h-[48px]",
+};
+
+export default function Button({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  fullWidth = false,
+  disabled,
+  children,
+  className,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      disabled={disabled || loading}
+      className={`inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60 ${variantClasses[variant]} ${sizeClasses[size]} ${fullWidth ? "w-full" : ""} ${className ?? ""}`}
+      {...props}
+    >
+      {loading && (
+        <svg
+          className="h-4 w-4 animate-spin"
+          fill="none"
+          viewBox="0 0 24 24"
+          aria-hidden="true"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
+        </svg>
+      )}
+      {children}
+    </button>
+  );
+}