test: add ColorPicker tests and Storybook story

src/components/ui/ColorPicker/ColorPicker.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { ColorPicker } from "./ColorPicker";
+
+const meta: Meta<typeof ColorPicker> = {
+  title: "Components/ColorPicker",
+  component: ColorPicker,
+  parameters: {
+    jest: "ColorPicker.test.tsx",
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "color",
+      description: "Current hex color value",
+    },
+    onChange: {
+      action: "color changed",
+      description: "Callback when color is confirmed",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPicker>;
+
+export const Default: Story = {
+  render: () => {
+    const [color, setColor] = useState("#7C3AED");
+    return (
+      <div className="flex items-center gap-4">
+        <ColorPicker onChange={setColor} value={color} />
+        <span className="font-mono text-gray-700 text-sm">{color}</span>
+      </div>
+    );
+  },
+};
+
+export const WithDifferentColors: Story = {
+  render: () => {
+    const colors = ["#EF4444", "#F59E0B", "#10B981", "#3B82F6", "#8B5CF6"];
+    return (
+      <div className="flex items-center gap-3">
+        {colors.map((initialColor) => {
+          const Picker = () => {
+            const [color, setColor] = useState(initialColor);
+            return <ColorPicker onChange={setColor} value={color} />;
+          };
+          return <Picker key={initialColor} />;
+        })}
+      </div>
+    );
+  },
+};
+
+export const InForm: Story = {
+  render: () => {
+    const [color, setColor] = useState("#7C3AED");
+    return (
+      <div className="flex w-[300px] flex-col gap-3">
+        <label className="font-medium text-gray-900 text-sm" htmlFor="tag-name">
+          Nome da etiqueta
+        </label>
+        <div className="flex items-center gap-3">
+          <ColorPicker onChange={setColor} value={color} />
+          <input
+            className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-purple-300"
+            id="tag-name"
+            placeholder="Ex: Urgente"
+          />
+        </div>
+        <span className="font-mono text-gray-500 text-xs">
+          Cor selecionada: {color}
+        </span>
+      </div>
+    );
+  },
+};

src/components/ui/ColorPicker/ColorPicker.test.tsx

@@ -0,0 +1,146 @@
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@/tests/app-test-utils";
+import { ColorPicker } from ".";
+
+// Mock react-colorful to avoid canvas rendering issues in tests
+jest.mock("react-colorful", () => ({
+  HexColorPicker: ({ onChange }: { onChange: (color: string) => void }) => (
+    <div data-testid="hex-color-picker">
+      <button
+        data-testid="mock-picker-change"
+        onClick={() => onChange("#ff0000")}
+        type="button"
+      >
+        Pick Red
+      </button>
+    </div>
+  ),
+}));
+
+describe("ColorPicker", () => {
+  const defaultProps = {
+    value: "#7C3AED",
+    onChange: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Rendering", () => {
+    it("renders the trigger button with the correct background color", () => {
+      render(<ColorPicker {...defaultProps} />);
+
+      const trigger = screen.getByRole("button", { name: "Selecionar cor" });
+      expect(trigger).toBeVisible();
+      expect(trigger).toHaveStyle({ backgroundColor: "#7C3AED" });
+    });
+
+    it("does not show popover content initially", () => {
+      render(<ColorPicker {...defaultProps} />);
+
+      expect(screen.queryByText("Confirmar")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Popover interaction", () => {
+    it("opens the popover when trigger is clicked", async () => {
+      const user = userEvent.setup();
+      render(<ColorPicker {...defaultProps} />);
+
+      await user.click(screen.getByRole("button", { name: "Selecionar cor" }));
+
+      expect(screen.getByText("Confirmar")).toBeVisible();
+      expect(screen.getByTestId("hex-color-picker")).toBeVisible();
+    });
+
+    it("shows the hex input with current value when opened", async () => {
+      const user = userEvent.setup();
+      render(<ColorPicker {...defaultProps} />);
+
+      await user.click(screen.getByRole("button", { name: "Selecionar cor" }));
+
+      const hexInput = screen.getByDisplayValue("#7C3AED");
+      expect(hexInput).toBeVisible();
+    });
+
+    it("shows the hue slider when opened", async () => {
+      const user = userEvent.setup();
+      render(<ColorPicker {...defaultProps} />);
+
+      await user.click(screen.getByRole("button", { name: "Selecionar cor" }));
+
+      const slider = screen.getByRole("slider");
+      expect(slider).toBeVisible();
+    });
+  });
+
+  describe("Hex input", () => {
+    it("updates the draft color when a valid hex is typed", async () => {
+      const user = userEvent.setup();
+      render(<ColorPicker {...defaultProps} />);
+
+      await user.click(screen.getByRole("button", { name: "Selecionar cor" }));
+
+      const hexInput = screen.getByDisplayValue("#7C3AED");
+      await user.clear(hexInput);
+      await user.type(hexInput, "#FF5733");
+
+      expect(hexInput).toHaveValue("#FF5733");
+    });
+
+    it("rejects invalid hex characters", async () => {
+      const user = userEvent.setup();
+      render(<ColorPicker {...defaultProps} />);
+
+      await user.click(screen.getByRole("button", { name: "Selecionar cor" }));
+
+      const hexInput = screen.getByDisplayValue("#7C3AED");
+      await user.clear(hexInput);
+      await user.type(hexInput, "#ZZZZZZ");
+
+      // Should not accept invalid hex — input stays at # after clear
+      expect(hexInput).not.toHaveValue("#ZZZZZZ");
+    });
+  });
+
+  describe("Confirm behavior", () => {
+    it("calls onChange with the draft color when Confirmar is clicked", async () => {
+      const user = userEvent.setup();
+      render(<ColorPicker {...defaultProps} />);
+
+      await user.click(screen.getByRole("button", { name: "Selecionar cor" }));
+
+      // Use the mock picker to change color
+      await user.click(screen.getByTestId("mock-picker-change"));
+
+      await user.click(screen.getByText("Confirmar"));
+
+      expect(defaultProps.onChange).toHaveBeenCalledWith("#ff0000");
+    });
+
+    it("does not call onChange if popover is closed without confirming", async () => {
+      const user = userEvent.setup();
+      render(<ColorPicker {...defaultProps} />);
+
+      await user.click(screen.getByRole("button", { name: "Selecionar cor" }));
+
+      // Change color via mock picker
+      await user.click(screen.getByTestId("mock-picker-change"));
+
+      // Press Escape to close without confirming
+      await user.keyboard("{Escape}");
+
+      expect(defaultProps.onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Props forwarding", () => {
+    it("applies custom className to the trigger button", () => {
+      render(<ColorPicker {...defaultProps} className="custom-class" />);
+
+      const trigger = screen.getByRole("button", { name: "Selecionar cor" });
+      expect(trigger).toHaveClass("custom-class");
+    });
+  });
+});