feat: Integrate class-variance-authority for type-safe component variants and enhance status display management

Author: dborysov

package-lock.json

@@ -14,6 +14,8 @@
     "@microlink/react-json-view": "^1.26.2",
     "@tanstack/query-core": "^5.80.2",
     "@types/chrome": "^0.0.326",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "lucide-react": "^0.514.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"

package.json

@@ -0,0 +1,61 @@
+import React from "react";
+import { buttonVariants, type ButtonVariants } from "../../lib/variants";
+import { clsx } from "clsx";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariants {
+  children: React.ReactNode;
+  isLoading?: boolean;
+  loadingText?: string;
+}
+
+/**
+ * Reusable Button component using CVA variants
+ * Provides type-safe variant management with full HTML button props support
+ */
+export function Button({
+  children,
+  variant = "gray",
+  size = "md",
+  className,
+  disabled,
+  isLoading = false,
+  loadingText,
+  ...props
+}: ButtonProps) {
+  const isDisabled = disabled || isLoading;
+
+  return (
+    <button
+      className={clsx(buttonVariants({ variant, size }), className)}
+      disabled={isDisabled}
+      {...props}
+    >
+      {isLoading ? (loadingText || "Loading...") : children}
+    </button>
+  );
+}
+
+// Export individual button variants for convenience
+export const BlueButton = (props: Omit<ButtonProps, "variant">) => (
+  <Button variant="blue" {...props} />
+);
+
+export const RedButton = (props: Omit<ButtonProps, "variant">) => (
+  <Button variant="red" {...props} />
+);
+
+export const GreenButton = (props: Omit<ButtonProps, "variant">) => (
+  <Button variant="green" {...props} />
+);
+
+export const OrangeButton = (props: Omit<ButtonProps, "variant">) => (
+  <Button variant="orange" {...props} />
+);
+
+export const PinkButton = (props: Omit<ButtonProps, "variant">) => (
+  <Button variant="pink" {...props} />
+);
+
+export const GrayButton = (props: Omit<ButtonProps, "variant">) => (
+  <Button variant="gray" {...props} />
+);

src/components/common/Button.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { chipVariants, type ChipVariants } from "../../lib/variants";
+import { clsx } from "clsx";
+
+interface ChipProps extends React.HTMLAttributes<HTMLSpanElement>, ChipVariants {
+  children: React.ReactNode;
+}
+
+/**
+ * Reusable Chip component using CVA variants
+ * Small informational tags and labels with type-safe variant management
+ */
+export function Chip({
+  children,
+  variant = "gray",
+  size = "md",
+  className,
+  ...props
+}: ChipProps) {
+  return (
+    <span
+      className={clsx(chipVariants({ variant, size }), className)}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+
+// Export variant-specific chips for convenience
+export const DisabledChip = (props: Omit<ChipProps, "variant">) => (
+  <Chip variant="disabled" {...props} />
+);
+
+export const BlueChip = (props: Omit<ChipProps, "variant">) => (
+  <Chip variant="blue" {...props} />
+);
+
+export const GreenChip = (props: Omit<ChipProps, "variant">) => (
+  <Chip variant="green" {...props} />
+);
+
+export const RedChip = (props: Omit<ChipProps, "variant">) => (
+  <Chip variant="red" {...props} />
+);
+
+export const YellowChip = (props: Omit<ChipProps, "variant">) => (
+  <Chip variant="yellow" {...props} />
+);
+
+export const GrayChip = (props: Omit<ChipProps, "variant">) => (
+  <Chip variant="gray" {...props} />
+);

src/components/common/Chip.tsx

@@ -1,4 +1,5 @@
 import type { ViewType } from "../../types/query";
+import { toggleOptionVariants } from "../../lib/variants";
 
 interface ToggleOption {
   value: ViewType;
@@ -17,7 +18,11 @@ export function ToggleGroup({ currentView, onViewChange, options, className = ""
   return (
     <div className={`toggle-group-base ${className}`}>
       {options.map((option) => (
-        <button key={option.value} onClick={() => onViewChange(option.value)} className={currentView === option.value ? "toggle-option-active" : "toggle-option-inactive"}>
+        <button
+          key={option.value}
+          onClick={() => onViewChange(option.value)}
+          className={toggleOptionVariants({ state: currentView === option.value ? "active" : "inactive" })}
+        >
           {option.label} ({option.count})
         </button>
       ))}

src/components/layout/ToggleGroup.tsx

@@ -1,5 +1,6 @@
 import type { QueryData } from "../../types/query";
 import { formatQueryKeyShort } from "../../utils/formatters";
+import { buttonVariants } from "../../lib/variants";
 
 interface QueryActionsProps {
   selectedQuery: QueryData;
@@ -30,15 +31,15 @@ export function QueryActions({ selectedQuery, onAction, actionLoading, setAction
     <div className="p-4 border-b border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800">
       <h4 className="text-base font-semibold mb-3 text-gray-900 dark:text-gray-100">Actions</h4>
       <div className="grid grid-cols-3 gap-2">
-        <button onClick={() => handleAction("REFETCH")} disabled={shouldDisableButtons} className="btn btn-blue btn-animated">
+        <button onClick={() => handleAction("REFETCH")} disabled={shouldDisableButtons} className={buttonVariants({ variant: "blue" })}>
           {actionLoading === "REFETCH" ? "Refreshing..." : "Refresh"}
         </button>
 
-        <button onClick={() => handleAction("INVALIDATE")} disabled={shouldDisableButtons} className="btn btn-orange btn-animated">
+        <button onClick={() => handleAction("INVALIDATE")} disabled={shouldDisableButtons} className={buttonVariants({ variant: "orange" })}>
           {actionLoading === "INVALIDATE" ? "Invalidating..." : "Invalidate"}
         </button>
 
-        <button onClick={() => handleAction("RESET")} disabled={shouldDisableButtons} className="btn btn-gray btn-animated">
+        <button onClick={() => handleAction("RESET")} disabled={shouldDisableButtons} className={buttonVariants({ variant: "gray" })}>
           {actionLoading === "RESET" ? "Resetting..." : "Reset"}
         </button>
 
@@ -49,16 +50,23 @@ export function QueryActions({ selectedQuery, onAction, actionLoading, setAction
             }
           }}
           disabled={shouldDisableButtons}
-          className="btn btn-pink btn-animated"
+          className={buttonVariants({ variant: "pink" })}
         >
           {actionLoading === "REMOVE" ? "Removing..." : "Remove"}
         </button>
 
-        <button onClick={() => handleAction("TRIGGER_LOADING")} className={`btn ${isArtificialLoading ? "btn-gray" : "btn-green"} btn-animated`}>
+        <button
+          onClick={() => handleAction("TRIGGER_LOADING")}
+          className={buttonVariants({ variant: isArtificialLoading ? "gray" : "green" })}
+        >
           {actionLoading === "TRIGGER_LOADING" ? "Triggering..." : isArtificialLoading ? "Cancel Loading" : "Trigger Loading"}
         </button>
 
-        <button onClick={() => handleAction("TRIGGER_ERROR")} disabled={shouldDisableButtons} className={`btn ${isArtificialError ? "btn-gray" : "btn-red"} btn-animated`}>
+        <button
+          onClick={() => handleAction("TRIGGER_ERROR")}
+          disabled={shouldDisableButtons}
+          className={buttonVariants({ variant: isArtificialError ? "gray" : "red" })}
+        >
           {actionLoading === "TRIGGER_ERROR" ? "Triggering..." : isArtificialError ? "Cancel Error" : "Trigger Error"}
         </button>
       </div>

src/components/query/QueryActions.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { StatusBadge } from "../status/StatusBadge";
+import { Chip } from "../common/Chip";
 import { getQueryStatusDisplay } from "../../utils/status";
 import { formatQueryKeyShort } from "../../utils/formatters";
 import { useStatusTransition } from "../../hooks/useStatusTransition";
@@ -77,6 +78,13 @@ export function QueryListItem({ query, index, isSelected, onSelect, staggerIndex
 
         {/* Query key */}
         <div className="flex-1 font-mono text-xs text-gray-700 dark:text-gray-300 break-all">{formatQueryKeyShort(query.queryKey)}</div>
+
+        {/* Disabled chip for pending queries */}
+        {query.state.status === "pending" && (
+          <Chip variant="disabled" size="sm">
+            Disabled
+          </Chip>
+        )}
       </div>
     </div>
   );

src/components/query/QueryListItem.tsx

@@ -1,5 +1,6 @@
 import { useStatusTransition } from "../../hooks/useStatusTransition";
 import { IconRenderer } from "../common/IconRenderer";
+import { statusBadgeVariants } from "../../lib/variants";
 import type { StatusDisplay } from "../../types/query";
 
 interface StatusBadgeProps {
@@ -18,8 +19,8 @@ export function StatusBadge({ status, count, className = "", transitionDuration
   return (
     <div
       className={`
-        w-6 h-6 flex items-center justify-center text-white text-xs font-bold rounded
-        status-badge-animated status-transition ${status.bgColor} ${transitionClass} ${className}
+        flex items-center justify-center text-white text-xs font-bold rounded
+        ${statusBadgeVariants({ status: status.variant })} ${transitionClass} ${className}
       `}
       onAnimationEnd={handleTransitionEnd}
     >