@etus/ui 0.1.0

package/src/components/forms/PaymentInput/PaymentInput.test.tsx

@@ -0,0 +1,252 @@
+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 { PaymentInput } from "./PaymentInput"
+
+expect.extend(toHaveNoViolations)
+
+describe("PaymentInput", () => {
+  // ============================================
+  // RENDERING TESTS
+  // ============================================
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<PaymentInput />)
+      expect(screen.getByPlaceholderText("0000 0000 0000 0000")).toBeInTheDocument()
+    })
+
+    it("renders with custom placeholder", () => {
+      render(<PaymentInput placeholder="Enter card number" />)
+      expect(screen.getByPlaceholderText("Enter card number")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      const { container } = render(<PaymentInput className="custom-class" data-testid="payment" />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      const { container } = render(<PaymentInput data-testid="payment" />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper).toBeInTheDocument()
+    })
+
+    it("renders with default value", () => {
+      render(<PaymentInput defaultValue="4111111111111111" />)
+      expect(screen.getByRole("textbox")).toHaveValue("4111 1111 1111 1111")
+    })
+
+    it("renders with controlled value", () => {
+      render(<PaymentInput value="4242424242424242" onChange={() => {}} />)
+      expect(screen.getByRole("textbox")).toHaveValue("4242 4242 4242 4242")
+    })
+
+    it("shows card icon by default", () => {
+      const { container } = render(<PaymentInput data-testid="payment" />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper?.querySelector("svg")).toBeInTheDocument()
+    })
+
+    it("hides card icon when showCardIcon is false", () => {
+      const { container } = render(<PaymentInput data-testid="payment" showCardIcon={false} />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper?.querySelector("svg")).not.toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // CARD DETECTION TESTS
+  // ============================================
+  describe("Card Detection", () => {
+    it("detects Visa card", async () => {
+      const user = userEvent.setup()
+      const onCardTypeChange = vi.fn()
+      render(<PaymentInput onCardTypeChange={onCardTypeChange} />)
+
+      await user.type(screen.getByRole("textbox"), "4111")
+      expect(onCardTypeChange).toHaveBeenCalledWith("visa")
+    })
+
+    it("detects Mastercard", async () => {
+      const user = userEvent.setup()
+      const onCardTypeChange = vi.fn()
+      render(<PaymentInput onCardTypeChange={onCardTypeChange} />)
+
+      await user.type(screen.getByRole("textbox"), "5500")
+      expect(onCardTypeChange).toHaveBeenCalledWith("mastercard")
+    })
+
+    it("detects Amex card", async () => {
+      const user = userEvent.setup()
+      const onCardTypeChange = vi.fn()
+      render(<PaymentInput onCardTypeChange={onCardTypeChange} />)
+
+      await user.type(screen.getByRole("textbox"), "3782")
+      expect(onCardTypeChange).toHaveBeenCalledWith("amex")
+    })
+
+    it("returns null for unknown card type", async () => {
+      const user = userEvent.setup()
+      const onCardTypeChange = vi.fn()
+      render(<PaymentInput onCardTypeChange={onCardTypeChange} />)
+
+      await user.type(screen.getByRole("textbox"), "1234")
+      expect(onCardTypeChange).not.toHaveBeenCalled()
+    })
+  })
+
+  // ============================================
+  // FORMATTING TESTS
+  // ============================================
+  describe("Formatting", () => {
+    it("formats card number with spaces", async () => {
+      const user = userEvent.setup()
+      render(<PaymentInput />)
+
+      await user.type(screen.getByRole("textbox"), "4111111111111111")
+      expect(screen.getByRole("textbox")).toHaveValue("4111 1111 1111 1111")
+    })
+
+    it("limits input to 19 digits", async () => {
+      const user = userEvent.setup()
+      render(<PaymentInput />)
+
+      await user.type(screen.getByRole("textbox"), "12345678901234567890123")
+      const value = screen.getByRole("textbox").getAttribute("value") ?? ""
+      // Value should be limited (19 digits max)
+      expect(value.replaceAll(/\s/g, "").length).toBeLessThanOrEqual(19)
+    })
+
+    it("strips non-numeric characters", async () => {
+      const user = userEvent.setup()
+      render(<PaymentInput />)
+
+      await user.type(screen.getByRole("textbox"), "4111-1111-1111")
+      expect(screen.getByRole("textbox")).toHaveValue("4111 1111 1111")
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(<PaymentInput disabled />)
+      expect(screen.getByRole("textbox")).toBeDisabled()
+    })
+
+    it("handles invalid state", () => {
+      render(<PaymentInput invalid data-testid="payment" />)
+      expect(screen.getByTestId("payment")).toHaveAttribute("aria-invalid", "true")
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onChange with raw value and card type", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<PaymentInput onChange={handleChange} />)
+
+      await user.type(screen.getByRole("textbox"), "4111")
+      expect(handleChange).toHaveBeenCalledWith("4111", "visa")
+    })
+
+    it("calls onCardTypeChange when card type changes", async () => {
+      const user = userEvent.setup()
+      const handleCardTypeChange = vi.fn()
+      render(<PaymentInput onCardTypeChange={handleCardTypeChange} />)
+
+      await user.type(screen.getByRole("textbox"), "4")
+      expect(handleCardTypeChange).toHaveBeenCalledWith("visa")
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      const { container } = render(<PaymentInput data-testid="payment" />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper).toHaveClass("h-9")
+    })
+
+    it("applies sm size", () => {
+      const { container } = render(<PaymentInput data-testid="payment" size="sm" />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper).toHaveClass("h-8")
+    })
+
+    it("applies lg size", () => {
+      const { container } = render(<PaymentInput data-testid="payment" size="lg" />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper).toHaveClass("h-10")
+    })
+  })
+
+  // ============================================
+  // VARIANT TESTS
+  // ============================================
+  describe("Visual Variants", () => {
+    it("applies default variant", () => {
+      const { container } = render(<PaymentInput data-testid="payment" />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper).toHaveClass("border-input")
+    })
+
+    it("applies filled variant", () => {
+      const { container } = render(<PaymentInput data-testid="payment" variant="filled" />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper).toHaveClass("bg-muted")
+    })
+
+    it("applies flushed variant", () => {
+      const { container } = render(<PaymentInput data-testid="payment" variant="flushed" />)
+      const wrapper = container.querySelector('[data-slot="payment-input"]')
+      expect(wrapper).toHaveClass("rounded-none")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <label>
+          Card Number
+          <PaymentInput />
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has autocomplete attribute for credit card", () => {
+      render(<PaymentInput />)
+      expect(screen.getByRole("textbox")).toHaveAttribute("autocomplete", "cc-number")
+    })
+
+    it("has inputMode numeric", () => {
+      render(<PaymentInput />)
+      expect(screen.getByRole("textbox")).toHaveAttribute("inputmode", "numeric")
+    })
+
+    it("disabled input has no violations", async () => {
+      const { container } = render(
+        <label>
+          Card Number
+          <PaymentInput disabled />
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/forms/PaymentInput/PaymentInput.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import type { PaymentInputProps } from "./PaymentInput.types"
+
+import { CreditCard } from "lucide-react"
+import * as React from "react"
+import { useCallback, useRef, useState } from "react"
+
+import { cn } from "../../../lib/utils"
+import {
+  type CardType,
+  detectCardType,
+  formatCardNumber,
+  getCardDigits,
+} from "./card-utils"
+import {
+  paymentInputIconVariants,
+  paymentInputInputVariants,
+  paymentInputVariants,
+} from "./PaymentInput.variants"
+
+/**
+ * Card brand icons as simple SVG components
+ */
+const CardIcons: Record<"unknown" | CardType, React.FC<{ className?: string }>> = {
+  visa: ({ className }) => (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M9.5 14.25h-1.5l.94-5.5h1.5l-.94 5.5zm6.75-5.37c-.3-.11-.77-.23-1.35-.23-1.5 0-2.55.75-2.56 1.83-.01.8.76 1.24 1.34 1.5.59.27.79.45.79.69-.01.37-.47.54-.91.54-.61 0-.93-.08-1.43-.29l-.2-.09-.21 1.24c.36.15 1.02.29 1.7.29 1.59 0 2.62-.74 2.63-1.9.01-.63-.4-1.12-1.29-1.52-.54-.26-.87-.43-.87-.69 0-.23.28-.48.88-.48.51-.01.87.1 1.15.21l.14.06.21-1.16zm3.97-.13h-1.17c-.36 0-.64.1-.79.46l-2.26 5.04h1.59l.32-.83h1.95l.18.83h1.4l-1.22-5.5zm-1.65 3.57l.8-2.02.46 2.02h-1.26zm-11.82-3.57l-1.49 3.75-.16-.75-.52-2.48c-.09-.34-.35-.47-.68-.48h-2.42l-.03.14c.56.14 1.06.33 1.49.55l1.27 4.77h1.61l2.39-5.5h-1.46z" />
+    </svg>
+  ),
+  mastercard: ({ className }) => (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M15.245 17.831c-1.458 1.093-3.256 1.744-5.207 1.744-4.786 0-8.669-3.855-8.669-8.613s3.883-8.613 8.669-8.613c1.951 0 3.749.651 5.207 1.744-2.06 1.655-3.383 4.177-3.383 7.019s1.323 5.364 3.383 7.019zm5.217-6.869c0-2.842-1.323-5.364-3.383-7.019-1.458 1.093-3.256 1.744-5.207 1.744-1.951 0-3.749-.651-5.207-1.744 2.06 1.655 3.383 4.177 3.383 7.019s-1.323 5.364-3.383 7.019c1.458-1.093 3.256-1.744 5.207-1.744 1.951 0 3.749.651 5.207 1.744-2.06-1.655-3.383-4.177-3.383-7.019z" />
+    </svg>
+  ),
+  amex: ({ className }) => (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zm-10.65 2.5h1.3v-1.125h-1.3V12.5h1.3v-1h-2.35v4h2.35v-1h-1.3zm6.65-3h-3.85v4h1.05v-1.25h2.3v-1h-2.3v-.75h2.8v-1zm-9.25 0h-2.1l-1.4 1.65-1.4-1.65h-2.1v4h1.05v-2.8l1.45 1.75h.95l1.45-1.75v2.8h1.05v-4z" />
+    </svg>
+  ),
+  discover: ({ className }) => (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" />
+    </svg>
+  ),
+  diners: ({ className }) => (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9c1.45.55 2.48 1.94 2.48 3.55v1.9c0 1.61-1.03 3-2.48 3.55zm4 0v-9c1.45.55 2.48 1.94 2.48 3.55v1.9c0 1.61-1.03 3-2.48 3.55z" />
+    </svg>
+  ),
+  jcb: ({ className }) => (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M17.5 3h-11C4.57 3 3 4.57 3 6.5v11c0 1.93 1.57 3.5 3.5 3.5h11c1.93 0 3.5-1.57 3.5-3.5v-11C21 4.57 19.43 3 17.5 3zm-7 12c0 .55-.45 1-1 1s-1-.45-1-1V9c0-.55.45-1 1-1s1 .45 1 1v6zm4.5 1c-1.38 0-2.5-1.12-2.5-2.5V9h2v4.5c0 .28.22.5.5.5s.5-.22.5-.5V9h2v4.5c0 1.38-1.12 2.5-2.5 2.5z" />
+    </svg>
+  ),
+  elo: ({ className }) => (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 13l-4-4 1.41-1.41L10 12.17l6.59-6.59L18 7l-8 8z" />
+    </svg>
+  ),
+  hipercard: ({ className }) => (
+    <svg className={className} fill="currentColor" viewBox="0 0 24 24">
+      <path d="M12 2L4 7v10l8 5 8-5V7l-8-5zm0 2.5L18 8v8l-6 3.5L6 16V8l6-3.5z" />
+    </svg>
+  ),
+  unknown: CreditCard,
+}
+
+/**
+ * PaymentInput - A credit card number input with auto-formatting and brand detection
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <PaymentInput placeholder="Card number" />
+ *
+ * // Controlled
+ * const [cardNumber, setCardNumber] = useState("")
+ * <PaymentInput
+ *   value={cardNumber}
+ *   onChange={(value, cardType) => {
+ *     setCardNumber(value)
+ *     console.log(`Card type: ${cardType}`)
+ *   }}
+ * />
+ * ```
+ */
+function PaymentInput({
+  value: controlledValue,
+  defaultValue = "",
+  onChange,
+  onCardTypeChange,
+  disabled,
+  size = "md",
+  variant,
+  invalid,
+  showCardIcon = true,
+  placeholder = "0000 0000 0000 0000",
+  className,
+  ...props
+}: PaymentInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Internal state for uncontrolled mode
+  const [internalValue, setInternalValue] = useState(defaultValue)
+  const [cardType, setCardType] = useState<CardType | null>(() =>
+    detectCardType(defaultValue)
+  )
+
+  // Determine if controlled
+  const isControlled = controlledValue !== undefined
+  const cardValue = isControlled ? controlledValue : internalValue
+
+  // Format the display value
+  const displayValue = formatCardNumber(cardValue, cardType)
+
+  // Track previous card type for change detection
+  const prevCardTypeRef = useRef<CardType | null>(cardType)
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const rawValue = getCardDigits(e.target.value)
+
+      // Limit to 19 digits (max card length)
+      const limitedValue = rawValue.slice(0, 19)
+
+      // Detect card type
+      const detectedType = detectCardType(limitedValue)
+      setCardType(detectedType)
+
+      if (!isControlled) {
+        setInternalValue(limitedValue)
+      }
+
+      onChange?.(limitedValue, detectedType)
+
+      // Notify on card type changes directly in the event handler (avoids effect anti-pattern)
+      if (prevCardTypeRef.current !== detectedType) {
+        onCardTypeChange?.(detectedType)
+        prevCardTypeRef.current = detectedType
+      }
+    },
+    [isControlled, onChange, onCardTypeChange]
+  )
+
+  // Get the card icon component
+  const CardIcon = cardType ? CardIcons[cardType] : CardIcons.unknown
+
+  return (
+    <div
+      aria-invalid={invalid ?? undefined}
+      className={cn(paymentInputVariants({ size, variant }), className)}
+      data-slot="payment-input"
+    >
+      {showCardIcon && (
+        <CardIcon
+          className={paymentInputIconVariants({ size, hasCard: !!cardType })}
+        />
+      )}
+      <input
+        ref={inputRef}
+        aria-invalid={invalid ?? undefined}
+        autoComplete="cc-number"
+        className={paymentInputInputVariants({ size })}
+        data-slot="payment-input-field"
+        disabled={disabled}
+        inputMode="numeric"
+        placeholder={placeholder}
+        type="text"
+        value={displayValue}
+        onChange={handleInputChange}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export { PaymentInput }

package/src/components/forms/PaymentInput/PaymentInput.types.ts

@@ -0,0 +1,69 @@
+import type { CardType } from "./card-utils"
+import type { ComponentProps } from "react"
+
+/**
+ * PaymentInput size variants
+ */
+export type PaymentInputSize = "lg" | "md" | "sm"
+
+/**
+ * PaymentInput visual variants
+ */
+export type PaymentInputVariant = "default" | "filled" | "flushed"
+
+/**
+ * PaymentInput component props
+ */
+export interface PaymentInputProps extends Omit<ComponentProps<"input">, "defaultValue" | "onChange" | "size" | "value"> {
+  /**
+   * Default card number for uncontrolled usage
+   */
+  defaultValue?: string
+
+  /**
+   * Whether the input is disabled
+   */
+  disabled?: boolean
+
+  /**
+   * Whether the input has an error state
+   */
+  invalid?: boolean
+
+  /**
+   * Callback when card type changes
+   */
+  onCardTypeChange?: (cardType: CardType | null) => void
+
+  /**
+   * Callback when card number changes
+   * @param value - The card number (digits only)
+   * @param cardType - The detected card type (null if unknown)
+   */
+  onChange?: (value: string, cardType: CardType | null) => void
+
+  /**
+   * Show card brand icon
+   * @default true
+   */
+  showCardIcon?: boolean
+
+  /**
+   * Visual size of the input
+   * @default "md"
+   */
+  size?: PaymentInputSize
+
+  /**
+   * Controlled card number value (digits only)
+   */
+  value?: string
+
+  /**
+   * Visual variant
+   * @default "default"
+   */
+  variant?: PaymentInputVariant
+}
+
+export type { CardType }

package/src/components/forms/PaymentInput/PaymentInput.variants.ts

@@ -0,0 +1,81 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * PaymentInput container variant styles using CVA
+ */
+export const paymentInputVariants = cva(
+  [
+    "flex items-center w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none",
+    "dark:bg-input/30",
+    "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+    "has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 text-sm gap-2",
+        md: "h-9 px-3 text-base md:text-sm gap-2.5",
+        lg: "h-10 px-3.5 text-base gap-3",
+      },
+      variant: {
+        default: "border-input shadow-xs",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * PaymentInput inner input styles
+ */
+export const paymentInputInputVariants = cva(
+  [
+    "flex-1 min-w-0 bg-transparent outline-none font-mono",
+    "placeholder:text-muted-foreground placeholder:font-sans",
+    "disabled:cursor-not-allowed",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        md: "text-base md:text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  }
+)
+
+/**
+ * PaymentInput card icon styles
+ */
+export const paymentInputIconVariants = cva(
+  "shrink-0 text-muted-foreground transition-opacity",
+  {
+    variants: {
+      size: {
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-7",
+      },
+      hasCard: {
+        true: "opacity-100",
+        false: "opacity-40",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      hasCard: false,
+    },
+  }
+)
+
+export type PaymentInputVariantProps = VariantProps<typeof paymentInputVariants>