@etus/ui 0.1.0

package/src/components/primitives/Tag/Tag.test.tsx

@@ -0,0 +1,410 @@
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { describe, expect, it, vi } from "vitest"
+
+import { Tag } from "./Tag"
+
+expect.extend(toHaveNoViolations)
+
+describe("Tag", () => {
+  // ============================================
+  // RENDERING TESTS
+  // ============================================
+  describe("Rendering", () => {
+    it("renders with default props", () => {
+      render(<Tag>Label</Tag>)
+      expect(screen.getByText("Label")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<Tag className="custom-class">Content</Tag>)
+      expect(screen.getByText("Content").closest("[data-slot='tag']")).toHaveClass(
+        "custom-class"
+      )
+    })
+
+    it("has correct data-slot attribute", () => {
+      render(<Tag>Content</Tag>)
+      expect(screen.getByText("Content").closest("[data-slot='tag']")).toHaveAttribute(
+        "data-slot",
+        "tag"
+      )
+    })
+  })
+
+  // ============================================
+  // SIZE TESTS
+  // ============================================
+  describe("Sizes", () => {
+    it("applies sm size classes", () => {
+      render(<Tag size="sm">Small</Tag>)
+      expect(screen.getByText("Small").closest("[data-slot='tag']")).toHaveClass("h-[var(--tag-size-height-sm)]")
+    })
+
+    it("applies md size classes (default)", () => {
+      render(<Tag size="md">Medium</Tag>)
+      expect(screen.getByText("Medium").closest("[data-slot='tag']")).toHaveClass("h-[var(--tag-size-height-md)]")
+    })
+
+    it("applies lg size classes", () => {
+      render(<Tag size="lg">Large</Tag>)
+      expect(screen.getByText("Large").closest("[data-slot='tag']")).toHaveClass("h-[var(--tag-size-height-lg)]")
+    })
+  })
+
+  // ============================================
+  // CHECKBOX TESTS
+  // ============================================
+  describe("Checkbox", () => {
+    it("renders checkbox when checkbox prop is true", () => {
+      render(<Tag checkbox>Selectable</Tag>)
+      expect(screen.getByRole("checkbox")).toBeInTheDocument()
+    })
+
+    it("toggles checked state on click", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+
+      render(
+        <Tag checkbox checked={false} onCheckedChange={handleChange}>
+          Toggle
+        </Tag>
+      )
+
+      await user.click(screen.getByRole("checkbox"))
+      expect(handleChange).toHaveBeenCalledWith(true)
+    })
+
+    it("toggles on Space key", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+
+      render(
+        <Tag checkbox checked={false} onCheckedChange={handleChange}>
+          Toggle
+        </Tag>
+      )
+
+      await user.tab()
+      await user.keyboard(" ")
+      expect(handleChange).toHaveBeenCalledWith(true)
+    })
+
+    it("toggles on Enter key", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+
+      render(
+        <Tag checkbox checked={false} onCheckedChange={handleChange}>
+          Toggle
+        </Tag>
+      )
+
+      await user.tab()
+      await user.keyboard("{Enter}")
+      expect(handleChange).toHaveBeenCalledWith(true)
+    })
+
+    it("respects controlled checked state", () => {
+      render(
+        <Tag checkbox checked>
+          Checked
+        </Tag>
+      )
+      expect(screen.getByRole("checkbox")).toHaveAttribute("aria-checked", "true")
+    })
+
+    it("works with uncontrolled defaultChecked", async () => {
+      const user = userEvent.setup()
+
+      render(
+        <Tag checkbox defaultChecked>
+          Default Checked
+        </Tag>
+      )
+
+      expect(screen.getByRole("checkbox")).toHaveAttribute("aria-checked", "true")
+
+      await user.click(screen.getByRole("checkbox"))
+      expect(screen.getByRole("checkbox")).toHaveAttribute("aria-checked", "false")
+    })
+
+    it("does not toggle when disabled", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+
+      render(
+        <Tag checkbox disabled onCheckedChange={handleChange}>
+          Disabled
+        </Tag>
+      )
+
+      const tag = screen.getByText("Disabled").closest("[data-slot='tag']")
+      expect(tag).toBeInTheDocument()
+      await user.click(tag as HTMLElement)
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // COUNT TESTS
+  // ============================================
+  describe("Count", () => {
+    it("renders count when provided", () => {
+      render(<Tag count={5}>Label</Tag>)
+      expect(screen.getByText("5")).toBeInTheDocument()
+    })
+
+    it("truncates large counts", () => {
+      render(<Tag count={1500}>Label</Tag>)
+      expect(screen.getByText("999+")).toBeInTheDocument()
+    })
+
+    it("renders zero count", () => {
+      render(<Tag count={0}>Label</Tag>)
+      expect(screen.getByText("0")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // DISMISS TESTS
+  // ============================================
+  describe("Dismiss", () => {
+    it("shows dismiss button when onDismiss is provided", () => {
+      render(<Tag onDismiss={() => {}}>Dismissible</Tag>)
+      expect(screen.getByRole("button", { name: /remove/i })).toBeInTheDocument()
+    })
+
+    it("calls onDismiss when X is clicked", async () => {
+      const user = userEvent.setup()
+      const handleDismiss = vi.fn()
+
+      render(<Tag onDismiss={handleDismiss}>Remove me</Tag>)
+
+      await user.click(screen.getByRole("button", { name: /remove/i }))
+      expect(handleDismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it("dismisses with Delete key", async () => {
+      const user = userEvent.setup()
+      const handleDismiss = vi.fn()
+
+      render(
+        <Tag checkbox onDismiss={handleDismiss}>
+          Delete me
+        </Tag>
+      )
+
+      await user.tab()
+      await user.keyboard("{Delete}")
+      expect(handleDismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it("dismisses with Backspace key", async () => {
+      const user = userEvent.setup()
+      const handleDismiss = vi.fn()
+
+      render(
+        <Tag checkbox onDismiss={handleDismiss}>
+          Delete me
+        </Tag>
+      )
+
+      await user.tab()
+      await user.keyboard("{Backspace}")
+      expect(handleDismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it("does not dismiss when disabled", async () => {
+      const user = userEvent.setup()
+      const handleDismiss = vi.fn()
+
+      render(
+        <Tag disabled onDismiss={handleDismiss}>
+          Disabled
+        </Tag>
+      )
+
+      // The button should not be clickable
+      const dismissButton = screen.getByRole("button", { name: /remove/i })
+      await user.click(dismissButton)
+      expect(handleDismiss).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // LEADING CONTENT TESTS
+  // ============================================
+  describe("Leading Content", () => {
+    it("renders dot indicator", () => {
+      render(<Tag dot>With Dot</Tag>)
+      expect(screen.getByText("With Dot").closest("[data-slot='tag']")).toContainElement(
+        document.querySelector("[data-slot='tag-dot']")
+      )
+    })
+
+    it("renders avatar", () => {
+      render(<Tag avatar={{ fallback: "JD" }}>John Doe</Tag>)
+      expect(
+        screen.getByText("John Doe").closest("[data-slot='tag']")
+      ).toContainElement(document.querySelector("[data-slot='tag-avatar']"))
+    })
+
+    it("renders avatar with initials fallback", () => {
+      render(<Tag avatar={{ fallback: "John Doe" }}>User</Tag>)
+      expect(screen.getByText("JD")).toBeInTheDocument()
+    })
+
+    it("renders country flag", () => {
+      render(<Tag country="BR">Brazil</Tag>)
+      expect(screen.getByText("Brazil").closest("[data-slot='tag']")).toContainElement(
+        document.querySelector("[data-slot='tag-country']")
+      )
+    })
+
+    it("checkbox takes precedence over other leading content", () => {
+      render(
+        <Tag checkbox dot>
+          Priority
+        </Tag>
+      )
+      expect(document.querySelector("[data-slot='tag-checkbox']")).toBeInTheDocument()
+      expect(document.querySelector("[data-slot='tag-dot']")).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // DISABLED STATE TESTS
+  // ============================================
+  describe("Disabled State", () => {
+    it("applies disabled styling", () => {
+      render(<Tag disabled>Disabled</Tag>)
+      expect(
+        screen.getByText("Disabled").closest("[data-slot='tag']")
+      ).toHaveAttribute("aria-disabled", "true")
+    })
+
+    it("is not focusable when disabled", () => {
+      render(
+        <Tag checkbox disabled>
+          Not Focusable
+        </Tag>
+      )
+      expect(
+        screen.getByText("Not Focusable").closest("[data-slot='tag']")
+      ).not.toHaveAttribute("tabindex")
+    })
+
+    it("does not trigger onClick when disabled", async () => {
+      const user = userEvent.setup()
+      const handleClick = vi.fn()
+
+      render(
+        <Tag disabled onClick={handleClick}>
+          Disabled Click
+        </Tag>
+      )
+
+      const tag = screen.getByText("Disabled Click").closest("[data-slot='tag']")
+      expect(tag).toBeInTheDocument()
+      await user.click(tag as HTMLElement)
+      expect(handleClick).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations (basic)", async () => {
+      const { container } = render(<Tag>Accessible</Tag>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations (checkbox)", async () => {
+      const { container } = render(<Tag checkbox>Checkbox Tag</Tag>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations (dismissible)", async () => {
+      const { container } = render(<Tag onDismiss={() => {}}>Dismissible</Tag>)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("checkbox has proper role", () => {
+      render(<Tag checkbox>Checkbox Tag</Tag>)
+      expect(screen.getByRole("checkbox")).toBeInTheDocument()
+    })
+
+    it("is keyboard navigable when interactive", async () => {
+      const user = userEvent.setup()
+      render(<Tag checkbox>Focus me</Tag>)
+
+      await user.tab()
+      expect(screen.getByRole("checkbox")).toHaveFocus()
+    })
+
+    it("dismiss button has aria-label", () => {
+      render(<Tag onDismiss={() => {}}>Dismissible</Tag>)
+      expect(screen.getByRole("button")).toHaveAttribute("aria-label", "Remove tag")
+    })
+  })
+
+  // ============================================
+  // COMBINED FEATURES TESTS
+  // ============================================
+  describe("Combined Features", () => {
+    it("renders checkbox with count", () => {
+      render(
+        <Tag checkbox count={12}>
+          With Both
+        </Tag>
+      )
+      expect(screen.getByRole("checkbox")).toBeInTheDocument()
+      expect(screen.getByText("12")).toBeInTheDocument()
+    })
+
+    it("renders avatar with dismiss", () => {
+      render(
+        <Tag avatar={{ fallback: "AB" }} onDismiss={() => {}}>
+          Avatar + Dismiss
+        </Tag>
+      )
+      expect(document.querySelector("[data-slot='tag-avatar']")).toBeInTheDocument()
+      expect(screen.getByRole("button", { name: /remove/i })).toBeInTheDocument()
+    })
+
+    it("renders country with count and dismiss", () => {
+      render(
+        <Tag count={42} country="US" onDismiss={() => {}}>
+          Full Feature
+        </Tag>
+      )
+      expect(document.querySelector("[data-slot='tag-country']")).toBeInTheDocument()
+      expect(screen.getByText("42")).toBeInTheDocument()
+      expect(screen.getByRole("button", { name: /remove/i })).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTE TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+    it("supports data-testid", () => {
+      render(<Tag data-testid="test-tag">Content</Tag>)
+      expect(screen.getByTestId("test-tag")).toBeInTheDocument()
+    })
+
+    it("passes through data-* attributes", () => {
+      render(<Tag data-custom="value">Content</Tag>)
+      expect(screen.getByText("Content").closest("[data-slot='tag']")).toHaveAttribute(
+        "data-custom",
+        "value"
+      )
+    })
+  })
+})

package/src/components/primitives/Tag/Tag.tsx

@@ -0,0 +1,302 @@
+"use client"
+
+import type { TagAvatarProps, TagProps } from "./Tag.types"
+
+import { Check, X } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import { tagCheckboxVariants, tagCountVariants, tagVariants } from "./Tag.variants"
+import { useTagGroup } from "./TagGroup"
+
+// Internal checkbox component
+function TagCheckbox({
+  checked,
+  disabled,
+  size,
+}: {
+  checked: boolean
+  disabled?: boolean
+  size: "lg" | "md" | "sm"
+}) {
+  return (
+    <span
+      className={cn(tagCheckboxVariants({ size, checked, disabled }))}
+      data-slot="tag-checkbox"
+    >
+      {checked && <Check className="size-3" strokeWidth={3} />}
+    </span>
+  )
+}
+
+// Internal count pill component
+function TagCount({ count, size }: { count: number; size: "lg" | "md" | "sm" }) {
+  return (
+    <span className={cn(tagCountVariants({ size }))} data-slot="tag-count">
+      {count > 999 ? "999+" : count}
+    </span>
+  )
+}
+
+// Dismiss button size mapping (Figma: sm=10px, md=12px, lg=14px icons)
+const dismissSizeMap = {
+  sm: { button: "size-3.5", icon: "size-2.5" },  // 14px button, 10px icon
+  md: { button: "size-4", icon: "size-3" },      // 16px button, 12px icon
+  lg: { button: "size-4.5", icon: "size-3.5" }, // 18px button, 14px icon
+}
+
+// Internal dismiss button component
+function TagDismiss({
+  onClick,
+  disabled,
+  size = "md",
+}: {
+  disabled?: boolean
+  onClick: () => void
+  size?: "lg" | "md" | "sm"
+}) {
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (!disabled) {
+      onClick()
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if ((e.key === "Enter" || e.key === " ") && !disabled) {
+      e.preventDefault()
+      e.stopPropagation()
+      onClick()
+    }
+  }
+
+  const sizeClasses = dismissSizeMap[size]
+
+  return (
+    <button
+      className={cn(
+        sizeClasses.button,
+        "-mr-0.5 rounded-sm inline-flex items-center justify-center shrink-0",
+        "text-muted-foreground hover:text-foreground hover:bg-muted",
+        "transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+        disabled && "pointer-events-none"
+      )}
+      aria-label="Remove tag"
+      data-slot="tag-dismiss"
+      disabled={disabled}
+      tabIndex={-1}
+      type="button"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      <X className={sizeClasses.icon} />
+    </button>
+  )
+}
+
+// Internal avatar component
+function TagAvatar({ src, fallback, alt }: TagAvatarProps) {
+  const [imageError, setImageError] = React.useState(false)
+
+  const initials = fallback
+    .split(" ")
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2)
+
+  return (
+    <span
+      className="size-4 -ml-0.5 rounded-full shrink-0 inline-flex items-center justify-center overflow-hidden bg-muted text-3xs font-medium"
+      data-slot="tag-avatar"
+    >
+      {src && !imageError ? (
+        <img
+          alt={alt ?? fallback}
+          className="size-full object-cover"
+          src={src}
+          onError={() => {
+            setImageError(true)
+          }}
+        />
+      ) : (
+        <span aria-label={alt ?? fallback}>{initials}</span>
+      )}
+    </span>
+  )
+}
+
+// Internal dot component
+function TagDot() {
+  return (
+    <span
+      className="size-1.5 rounded-full shrink-0 bg-muted-foreground"
+      data-slot="tag-dot"
+    />
+  )
+}
+
+// Internal country flag component
+function TagCountry({ code }: { code: string }) {
+  const countryToFlag = (countryCode: string) => {
+    // eslint-disable-next-line unicorn/prefer-spread -- Array.from handles Unicode correctly for country codes
+    const codePoints = Array.from(countryCode.toUpperCase()).map(
+      (char) => 127397 + char.charCodeAt(0)
+    )
+    return String.fromCodePoint(...codePoints)
+  }
+
+  return (
+    <span
+      aria-label={`Flag of ${code}`}
+      className="text-base -ml-0.5 shrink-0 leading-none"
+      data-slot="tag-country"
+      role="img"
+    >
+      {countryToFlag(code)}
+    </span>
+  )
+}
+
+/**
+ * Tag - Interactive selectable/filterable component
+ *
+ * Used for filtering, categorization, and selection with optional
+ * checkbox, count, avatar, country flag, and dismiss functionality.
+ *
+ * @example
+ * ```tsx
+ * // Basic tag
+ * <Tag>Label</Tag>
+ *
+ * // With checkbox
+ * <Tag checkbox checked={selected} onCheckedChange={setSelected}>
+ *   React
+ * </Tag>
+ *
+ * // With count and dismiss
+ * <Tag count={5} onDismiss={() => {}}>
+ *   Notifications
+ * </Tag>
+ * ```
+ */
+export function Tag({
+  children,
+  className,
+  size: sizeProp,
+  checkbox,
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  dot,
+  avatar,
+  country,
+  count,
+  onDismiss,
+  disabled: disabledProp,
+  onClick,
+  onKeyDown,
+  ...props
+}: TagProps) {
+  // Get context from TagGroup (if present)
+  const groupContext = useTagGroup()
+
+  // Merge with context values
+  const size = sizeProp ?? groupContext?.size ?? "md"
+  const disabled = disabledProp ?? groupContext?.disabled
+
+  // Uncontrolled state for checkbox
+  const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
+
+  // Use controlled or uncontrolled checked value
+  const isChecked = controlledChecked ?? internalChecked
+  const isInteractive = Boolean(checkbox) || Boolean(onClick)
+
+  // Handle checkbox toggle
+  const handleToggle = () => {
+    if (disabled) return
+
+    const newChecked = !isChecked
+    setInternalChecked(newChecked)
+    onCheckedChange?.(newChecked)
+  }
+
+  // Handle click
+  const handleClick = (e: React.MouseEvent<HTMLSpanElement>) => {
+    if (disabled) return
+
+    if (checkbox) {
+      handleToggle()
+    }
+
+    onClick?.(e)
+  }
+
+  // Handle keyboard
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (disabled) return
+
+    // Toggle on Space/Enter for checkbox
+    if (checkbox && (e.key === " " || e.key === "Enter")) {
+      e.preventDefault()
+      handleToggle()
+    }
+
+    // Dismiss on Delete/Backspace
+    if (onDismiss && (e.key === "Delete" || e.key === "Backspace")) {
+      e.preventDefault()
+      onDismiss()
+    }
+
+    onKeyDown?.(e)
+  }
+
+  // Render leading content (checkbox, avatar, country, or dot)
+  const renderLeading = () => {
+    if (checkbox) {
+      return <TagCheckbox checked={isChecked} disabled={disabled} size={size} />
+    }
+    if (avatar) return <TagAvatar {...avatar} />
+    if (country) return <TagCountry code={country} />
+    if (dot) return <TagDot />
+    return null
+  }
+
+  // Render trailing content (count, dismiss)
+  const renderTrailing = () => {
+    return (
+      <>
+        {count !== undefined && <TagCount count={count} size={size} />}
+        {onDismiss && <TagDismiss disabled={disabled} size={size} onClick={onDismiss} />}
+      </>
+    )
+  }
+
+  return (
+    <span
+      className={cn(
+        tagVariants({
+          size,
+          checked: isChecked,
+          disabled,
+          interactive: isInteractive,
+        }),
+        className
+      )}
+      aria-checked={checkbox ? isChecked : undefined}
+      aria-disabled={disabled}
+      data-slot="tag"
+      role={checkbox ? "checkbox" : undefined}
+      tabIndex={isInteractive && !disabled ? 0 : undefined}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
+      {renderLeading()}
+      <span data-slot="tag-content">{children}</span>
+      {renderTrailing()}
+    </span>
+  )
+}
+
+Tag.displayName = "Tag"