@etus/ui 0.1.1 → 0.1.3

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

@@ -1,410 +0,0 @@
-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

@@ -1,302 +0,0 @@
-"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"