feat(frontend): create filter label

frontend/package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@tanstack/react-query": "^5.35.1",
@@ -58,7 +59,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "happy-dom": "^14.7.1",
+    "happy-dom": "14.10.2",
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
     "lint-staged": "^15.2.2",

frontend/src/components/FilterCheckbox.test.tsx

@@ -0,0 +1,36 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import FilterCheckbox from "./FilterCheckbox";
+
+test("label renders text with label", () => {
+  // Arrange
+  render(<FilterCheckbox label="Meat" />);
+
+  // Act
+  const label = screen.getByText("Meat");
+
+  // Assert
+  expect(label).toBeInTheDocument();
+});
+
+test("clicking on the label triggers onChange", async () => {
+  const change = vi.fn();
+
+  // Arrange
+  render(<FilterCheckbox label="Meat" onChange={change} />);
+
+  // Act
+  const label = screen.getByText("Meat");
+  fireEvent.click(label);
+
+  // Assert
+  await waitFor(() => {
+    expect(change).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target: expect.objectContaining({
+          checked: true,
+        }),
+      }),
+    );
+  });
+});

frontend/src/components/FilterCheckbox.tsx

@@ -0,0 +1,44 @@
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-react";
+
+export default function FilterCheckbox({
+  label,
+  value,
+  onChange,
+  checked,
+  className,
+  ...props
+}: {
+  label: string;
+} & React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <label
+      className={cn(
+        "flex items-center rounded-3xl border-2 border-primary px-4 py-2 transition-all",
+        checked
+          ? "bg-primary text-white brightness-100 filter hover:brightness-90 active:brightness-75"
+          : "bg-primary/0 font-bold text-primary hover:bg-primary/10 active:bg-primary/30",
+        className,
+        props.disabled ? "cursor-not-allowed" : "cursor-pointer",
+      )}
+    >
+      <input
+        type="checkbox"
+        value={value}
+        onChange={onChange}
+        checked={checked}
+        className="hidden"
+        {...props}
+      />
+      <span className="select-none text-sm">{label}</span>
+      <div
+        className={cn(
+          "ml-0 w-0 overflow-hidden transition-all",
+          checked && "ml-3 flex w-3",
+        )}
+      >
+        <Check strokeWidth={6} size={13} />
+      </div>
+    </label>
+  );
+}

frontend/src/components/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

frontend/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

frontend/yarn.lock

@@ -922,6 +922,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-popover@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "@radix-ui/react-popover@npm:1.0.7"
+  dependencies:
+    "@babel/runtime": "npm:^7.13.10"
+    "@radix-ui/primitive": "npm:1.0.1"
+    "@radix-ui/react-compose-refs": "npm:1.0.1"
+    "@radix-ui/react-context": "npm:1.0.1"
+    "@radix-ui/react-dismissable-layer": "npm:1.0.5"
+    "@radix-ui/react-focus-guards": "npm:1.0.1"
+    "@radix-ui/react-focus-scope": "npm:1.0.4"
+    "@radix-ui/react-id": "npm:1.0.1"
+    "@radix-ui/react-popper": "npm:1.1.3"
+    "@radix-ui/react-portal": "npm:1.0.4"
+    "@radix-ui/react-presence": "npm:1.0.1"
+    "@radix-ui/react-primitive": "npm:1.0.3"
+    "@radix-ui/react-slot": "npm:1.0.2"
+    "@radix-ui/react-use-controllable-state": "npm:1.0.1"
+    aria-hidden: "npm:^1.1.1"
+    react-remove-scroll: "npm:2.5.5"
+  peerDependencies:
+    "@types/react": "*"
+    "@types/react-dom": "*"
+    react: ^16.8 || ^17.0 || ^18.0
+    react-dom: ^16.8 || ^17.0 || ^18.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    "@types/react-dom":
+      optional: true
+  checksum: 10c0/ed7abbd61df1e15d62072e214fafbdc4e31942e0ce49665f2045d8279944a0a37762bcd70a36389ed9e43c95797d5acb57f6f5ca5a15b688b1928cfc2b9ce196
+  languageName: node
+  linkType: hard
+
 "@radix-ui/react-popper@npm:1.1.3":
   version: 1.1.3
   resolution: "@radix-ui/react-popper@npm:1.1.3"
@@ -3804,6 +3838,7 @@ __metadata:
     "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-dropdown-menu": "npm:^2.0.6"
     "@radix-ui/react-label": "npm:^2.0.2"
+    "@radix-ui/react-popover": "npm:^1.0.7"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@radix-ui/react-tabs": "npm:^1.0.4"
     "@tanstack/react-query": "npm:^5.35.1"
@@ -3825,7 +3860,7 @@ __metadata:
     eslint-config-prettier: "npm:^9.1.0"
     eslint-plugin-react-hooks: "npm:^4.6.0"
     eslint-plugin-react-refresh: "npm:^0.4.6"
-    happy-dom: "npm:^14.7.1"
+    happy-dom: "npm:14.10.2"
     husky: "npm:^9.0.11"
     jsdom: "npm:^24.0.0"
     lint-staged: "npm:^15.2.2"
@@ -4152,14 +4187,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"happy-dom@npm:^14.7.1":
-  version: 14.7.1
-  resolution: "happy-dom@npm:14.7.1"
+"happy-dom@npm:14.10.2":
+  version: 14.10.2
+  resolution: "happy-dom@npm:14.10.2"
   dependencies:
     entities: "npm:^4.5.0"
     webidl-conversions: "npm:^7.0.0"
     whatwg-mimetype: "npm:^3.0.0"
-  checksum: 10c0/546a16921cde2cad91a35eefc936eb26df444d95e976e01276052e5fd2db3a8dd5864182475ebbfc8443689ce306246d8e6dfec40bab5fb8bc99e2a448b795e9
+  checksum: 10c0/0dfd692101743f5e82db08154fe5089353ce83a756a3542dcc5d2f030b8d32d1abd6d6a9350f80c4955b891fc2fe6d980a95072fb1fe50bc920fbf5c62975866
   languageName: node
   linkType: hard