@etus/ui 0.1.0

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

@@ -0,0 +1,457 @@
+// ErrorMessage/ErrorMessage.test.tsx
+import { render, screen } from "@testing-library/react"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { AlertTriangleIcon } from "lucide-react"
+import { describe, expect, it } from "vitest"
+
+import { ErrorMessage } from "./ErrorMessage"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("ErrorMessage", () => {
+  describe("Rendering", () => {
+    it("renders correctly with message", () => {
+      render(<ErrorMessage data-testid="error">Error message</ErrorMessage>)
+      expect(screen.getByTestId("error")).toBeInTheDocument()
+      expect(screen.getByText("Error message")).toBeInTheDocument()
+    })
+
+    it("does not render when no children", () => {
+      render(<ErrorMessage data-testid="error" />)
+      expect(screen.queryByTestId("error")).not.toBeInTheDocument()
+    })
+
+    it("renders as span element", () => {
+      render(<ErrorMessage data-testid="error">Error</ErrorMessage>)
+      expect(screen.getByTestId("error").tagName).toBe("SPAN")
+    })
+
+    it("has data-slot attribute", () => {
+      render(<ErrorMessage data-testid="error">Error</ErrorMessage>)
+      expect(screen.getByTestId("error")).toHaveAttribute(
+        "data-slot",
+        "error-message"
+      )
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <ErrorMessage className="custom-class" data-testid="error">
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("error")).toHaveClass("custom-class")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <ErrorMessage data-custom="value" data-testid="error">
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("error")).toHaveAttribute("data-custom", "value")
+    })
+
+    it("has text-destructive styling", () => {
+      render(<ErrorMessage data-testid="error">Error</ErrorMessage>)
+      expect(screen.getByTestId("error")).toHaveClass("text-destructive")
+    })
+  })
+
+  // ============================================
+  // ICON TESTS
+  // ============================================
+  describe("Icon", () => {
+    it("renders default icon when showIcon is true", () => {
+      render(<ErrorMessage showIcon data-testid="error">Error</ErrorMessage>)
+      const iconSlot = screen.getByTestId("error").querySelector(
+        '[data-slot="error-message-icon"]'
+      )
+      expect(iconSlot).toBeInTheDocument()
+    })
+
+    it("renders default icon for inline variant", () => {
+      render(<ErrorMessage data-testid="error" variant="inline">Error</ErrorMessage>)
+      const iconSlot = screen.getByTestId("error").querySelector(
+        '[data-slot="error-message-icon"]'
+      )
+      expect(iconSlot).toBeInTheDocument()
+    })
+
+    it("hides icon when icon={null}", () => {
+      render(
+        <ErrorMessage data-testid="error" icon={null} variant="inline">
+          Error
+        </ErrorMessage>
+      )
+      const iconSlot = screen.getByTestId("error").querySelector(
+        '[data-slot="error-message-icon"]'
+      )
+      expect(iconSlot).not.toBeInTheDocument()
+    })
+
+    it("renders custom icon", () => {
+      render(
+        <ErrorMessage
+          showIcon
+          data-testid="error"
+          icon={<AlertTriangleIcon data-testid="custom-icon" />}
+        >
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("custom-icon")).toBeInTheDocument()
+    })
+
+    it("icon has aria-hidden attribute", () => {
+      render(<ErrorMessage data-testid="error" variant="inline">Error</ErrorMessage>)
+      const iconSlot = screen.getByTestId("error").querySelector(
+        '[data-slot="error-message-icon"]'
+      )
+      expect(iconSlot).toHaveAttribute("aria-hidden", "true")
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies md size by default", () => {
+      render(<ErrorMessage data-testid="error">Error</ErrorMessage>)
+      expect(screen.getByTestId("error")).toHaveClass("text-sm")
+    })
+
+    it("applies sm size", () => {
+      render(
+        <ErrorMessage data-testid="error" size="sm">
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("error")).toHaveClass("text-xs")
+    })
+
+    it("applies md size explicitly", () => {
+      render(
+        <ErrorMessage data-testid="error" size="md">
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("error")).toHaveClass("text-sm")
+    })
+
+    it("applies lg size", () => {
+      render(
+        <ErrorMessage data-testid="error" size="lg">
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("error")).toHaveClass("text-base")
+    })
+
+    it("sm size has smaller icon", () => {
+      render(
+        <ErrorMessage data-testid="error" size="sm" variant="inline">
+          Error
+        </ErrorMessage>
+      )
+      const svg = screen.getByTestId("error").querySelector("svg")
+      expect(svg).toHaveClass("size-3")
+    })
+
+    it("lg size has larger icon", () => {
+      render(
+        <ErrorMessage data-testid="error" size="lg" variant="inline">
+          Error
+        </ErrorMessage>
+      )
+      const svg = screen.getByTestId("error").querySelector("svg")
+      expect(svg).toHaveClass("size-5")
+    })
+  })
+
+  // ============================================
+  // VISUAL VARIANT TESTS
+  // ============================================
+  describe("Visual Variants", () => {
+    it("applies default variant by default", () => {
+      render(<ErrorMessage data-testid="error">Error</ErrorMessage>)
+      expect(screen.getByTestId("error")).toHaveClass("flex")
+    })
+
+    it("applies inline variant", () => {
+      render(
+        <ErrorMessage data-testid="error" variant="inline">
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("error")).toHaveClass("inline-flex")
+    })
+
+    it("applies bordered variant", () => {
+      render(
+        <ErrorMessage data-testid="error" variant="bordered">
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("error")).toHaveClass("rounded-md", "p-3", "border")
+    })
+
+    it("applies critical variant", () => {
+      render(
+        <ErrorMessage data-testid="error" variant="critical">
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("error")).toHaveClass("bg-destructive", "font-medium")
+    })
+  })
+
+  // ============================================
+  // SHOWICON TESTS
+  // ============================================
+  describe("showIcon", () => {
+    it("shows icon for default variant by default", () => {
+      render(<ErrorMessage data-testid="error">Error</ErrorMessage>)
+      const iconSlot = screen.getByTestId("error").querySelector('[data-slot="error-message-icon"]')
+      // Default variant has showIcon = false by default
+      expect(iconSlot).not.toBeInTheDocument()
+    })
+
+    it("shows icon for inline variant by default", () => {
+      render(<ErrorMessage data-testid="error" variant="inline">Error</ErrorMessage>)
+      const iconSlot = screen.getByTestId("error").querySelector('[data-slot="error-message-icon"]')
+      expect(iconSlot).toBeInTheDocument()
+    })
+
+    it("shows icon for bordered variant by default", () => {
+      render(<ErrorMessage data-testid="error" variant="bordered">Error</ErrorMessage>)
+      const iconSlot = screen.getByTestId("error").querySelector('[data-slot="error-message-icon"]')
+      expect(iconSlot).toBeInTheDocument()
+    })
+
+    it("shows icon for critical variant by default", () => {
+      render(<ErrorMessage data-testid="error" variant="critical">Error</ErrorMessage>)
+      const iconSlot = screen.getByTestId("error").querySelector('[data-slot="error-message-icon"]')
+      expect(iconSlot).toBeInTheDocument()
+    })
+
+    it("hides icon when showIcon is false", () => {
+      render(<ErrorMessage data-testid="error" showIcon={false} variant="inline">Error</ErrorMessage>)
+      const iconSlot = screen.getByTestId("error").querySelector('[data-slot="error-message-icon"]')
+      expect(iconSlot).not.toBeInTheDocument()
+    })
+
+    it("shows icon when showIcon is true for default variant", () => {
+      render(<ErrorMessage showIcon data-testid="error">Error</ErrorMessage>)
+      const iconSlot = screen.getByTestId("error").querySelector('[data-slot="error-message-icon"]')
+      expect(iconSlot).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // ANIMATED TESTS
+  // ============================================
+  describe("Animated", () => {
+    it("does not have animation class by default", () => {
+      render(<ErrorMessage data-testid="error">Error</ErrorMessage>)
+      expect(screen.getByTestId("error")).not.toHaveClass("animate-shake")
+    })
+
+    it("applies animation class when animated is true", () => {
+      render(<ErrorMessage animated data-testid="error">Error</ErrorMessage>)
+      expect(screen.getByTestId("error")).toHaveClass("animate-shake")
+    })
+
+    it("does not apply animation class when animated is false", () => {
+      render(<ErrorMessage animated={false} data-testid="error">Error</ErrorMessage>)
+      expect(screen.getByTestId("error")).not.toHaveClass("animate-shake")
+    })
+  })
+
+  // ============================================
+  // ERRORS ARRAY TESTS
+  // ============================================
+  describe("Errors Array", () => {
+    it("renders errors array as list", () => {
+      render(
+        <ErrorMessage
+          data-testid="error"
+          errors={[{ message: "Error 1" }, { message: "Error 2" }]}
+        />
+      )
+      expect(screen.getByText("Error 1")).toBeInTheDocument()
+      expect(screen.getByText("Error 2")).toBeInTheDocument()
+    })
+
+    it("filters out undefined errors", () => {
+      render(
+        <ErrorMessage
+          data-testid="error"
+          errors={[{ message: "Valid error" }, undefined]}
+        />
+      )
+      expect(screen.getByText("Valid error")).toBeInTheDocument()
+      expect(screen.getAllByRole("alert")).toHaveLength(1)
+    })
+
+    it("filters out errors without message", () => {
+      render(
+        <ErrorMessage
+          data-testid="error"
+          errors={[{ message: "Valid error" }, {}]}
+        />
+      )
+      expect(screen.getByText("Valid error")).toBeInTheDocument()
+    })
+
+    it("does not render when errors array is empty", () => {
+      render(<ErrorMessage data-testid="error" errors={[]} />)
+      expect(screen.queryByTestId("error")).not.toBeInTheDocument()
+    })
+
+    it("renders as div when using errors array", () => {
+      render(
+        <ErrorMessage
+          data-testid="error"
+          errors={[{ message: "Error 1" }]}
+        />
+      )
+      expect(screen.getByTestId("error").tagName).toBe("DIV")
+    })
+
+    it("applies variant to each error item", () => {
+      render(
+        <ErrorMessage
+          errors={[{ message: "Error 1" }, { message: "Error 2" }]}
+          variant="inline"
+        />
+      )
+      const items = document.querySelectorAll('[data-slot="error-message-item"]')
+      expect(items).toHaveLength(2)
+      items.forEach((item) => {
+        expect(item).toHaveClass("inline-flex")
+      })
+    })
+
+    it("shows icon for each error with showIcon variants", () => {
+      render(
+        <ErrorMessage
+          errors={[{ message: "Error 1" }, { message: "Error 2" }]}
+          variant="inline"
+        />
+      )
+      const icons = document.querySelectorAll('[data-slot="error-message-icon"]')
+      expect(icons).toHaveLength(2)
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has role=alert for accessibility", () => {
+      render(<ErrorMessage data-testid="error">Error</ErrorMessage>)
+      expect(screen.getByTestId("error")).toHaveAttribute("role", "alert")
+    })
+
+    it("can be found by role", () => {
+      render(<ErrorMessage>Error message</ErrorMessage>)
+      expect(screen.getByRole("alert")).toBeInTheDocument()
+    })
+
+    it("supports aria-live attribute", () => {
+      render(
+        <ErrorMessage aria-live="polite" data-testid="error">
+          Error
+        </ErrorMessage>
+      )
+      expect(screen.getByTestId("error")).toHaveAttribute("aria-live", "polite")
+    })
+
+    it("supports id attribute for aria-describedby", () => {
+      render(
+        <>
+          <input aria-describedby="error-id" aria-label="Input" />
+          <ErrorMessage id="error-id">Error message</ErrorMessage>
+        </>
+      )
+      expect(screen.getByRole("alert")).toHaveAttribute("id", "error-id")
+    })
+
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <ErrorMessage>This field is required</ErrorMessage>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations without icon", async () => {
+      const { container } = render(
+        <ErrorMessage icon={null}>This field is required</ErrorMessage>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with custom icon", async () => {
+      const { container } = render(
+        <ErrorMessage icon={<AlertTriangleIcon />}>
+          This field is required
+        </ErrorMessage>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no accessibility violations with different sizes", async () => {
+      const { container } = render(
+        <>
+          <ErrorMessage size="sm">Small error</ErrorMessage>
+          <ErrorMessage size="md">Medium error</ErrorMessage>
+          <ErrorMessage size="lg">Large error</ErrorMessage>
+        </>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  // ============================================
+  // COMBINED USAGE TESTS
+  // ============================================
+  describe("Combined Usage", () => {
+    it("renders multiple error messages", () => {
+      render(
+        <div>
+          <ErrorMessage>First error</ErrorMessage>
+          <ErrorMessage>Second error</ErrorMessage>
+        </div>
+      )
+      expect(screen.getByText("First error")).toBeInTheDocument()
+      expect(screen.getByText("Second error")).toBeInTheDocument()
+    })
+
+    it("works with form field pattern", () => {
+      render(
+        <div>
+          <label htmlFor="email">Email</label>
+          <input
+            aria-describedby="email-error"
+            aria-invalid="true"
+            id="email"
+            type="email"
+          />
+          <ErrorMessage id="email-error">Invalid email format</ErrorMessage>
+        </div>
+      )
+      const input = screen.getByLabelText("Email")
+      expect(input).toHaveAttribute("aria-invalid", "true")
+      expect(input).toHaveAttribute("aria-describedby", "email-error")
+      expect(screen.getByText("Invalid email format")).toBeInTheDocument()
+    })
+  })
+})

package/src/components/forms/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,128 @@
+import type { ErrorMessageProps } from "./ErrorMessage.types"
+
+import { AlertCircleIcon } from "lucide-react"
+
+import { cn } from "../../../lib/utils"
+import {
+  errorMessageIconVariants,
+  errorMessageListVariants,
+  type ErrorMessageVariantProps,
+  errorMessageVariants,
+} from "./ErrorMessage.variants"
+
+/**
+ * Determines if icon should be shown based on variant
+ */
+function shouldShowIcon(
+  showIcon: boolean | undefined,
+  variant: string | undefined
+): boolean {
+  if (showIcon !== undefined) return showIcon
+  // Default: show icon for inline, bordered, critical variants
+  return variant === "inline" || variant === "bordered" || variant === "critical"
+}
+
+/**
+ * ErrorMessage displays form validation errors with an icon and accessible alert role.
+ *
+ * @example
+ * ```tsx
+ * <ErrorMessage>This field is required</ErrorMessage>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With errors array (react-hook-form compatible)
+ * <ErrorMessage errors={[{ message: 'Error 1' }, { message: 'Error 2' }]} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With animation
+ * <ErrorMessage animated>Attention required!</ErrorMessage>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Bordered variant
+ * <ErrorMessage variant="bordered">Please fix this error</ErrorMessage>
+ * ```
+ */
+function ErrorMessage({
+  className,
+  variant = "default",
+  size,
+  icon,
+  showIcon,
+  animated = false,
+  errors,
+  children,
+  ref,
+  ...props
+}: ErrorMessageProps & ErrorMessageVariantProps) {
+  // Filter out undefined errors and extract messages
+  const errorMessages = errors?.filter((e): e is { message?: string } => !!e?.message)
+
+  // If no children and no error messages, don't render
+  if (!children && (!errorMessages || errorMessages.length === 0)) {
+    return null
+  }
+
+  const displayIcon = shouldShowIcon(showIcon, variant)
+
+  // Render errors array as list
+  if (errorMessages && errorMessages.length > 0) {
+    return (
+      <div
+        ref={ref as React.Ref<HTMLDivElement>}
+        className={cn(errorMessageListVariants({ size }), className)}
+        data-slot="error-message"
+        role="alert"
+        {...(props as React.ComponentProps<"div">)}
+      >
+        {errorMessages.map((error) => (
+          <span
+            key={error.message}
+            className={cn(errorMessageVariants({ variant, size, animated }))}
+            data-slot="error-message-item"
+          >
+            {displayIcon && icon !== null && (
+              <span aria-hidden="true" data-slot="error-message-icon">
+                {icon ?? (
+                  <AlertCircleIcon
+                    className={cn(errorMessageIconVariants({ size }))}
+                  />
+                )}
+              </span>
+            )}
+            {error.message}
+          </span>
+        ))}
+      </div>
+    )
+  }
+
+  // Render single error message
+  return (
+    <span
+      ref={ref}
+      className={cn(errorMessageVariants({ variant, size, animated }), className)}
+      data-slot="error-message"
+      role="alert"
+      {...props}
+    >
+      {displayIcon && icon !== null && (
+        <span aria-hidden="true" data-slot="error-message-icon">
+          {icon ?? (
+            <AlertCircleIcon
+              className={cn(errorMessageIconVariants({ size }))}
+            />
+          )}
+        </span>
+      )}
+      {children}
+    </span>
+  )
+}
+
+export { ErrorMessage }

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

@@ -0,0 +1,54 @@
+import type { ComponentProps, ReactNode } from "react"
+
+/**
+ * ErrorMessage variant options
+ */
+export type ErrorMessageVariant = "bordered" | "critical" | "default" | "inline"
+
+/**
+ * ErrorMessage size options
+ */
+export type ErrorMessageSize = "lg" | "md" | "sm"
+
+/**
+ * Error object compatible with react-hook-form
+ */
+export interface ErrorObject {
+  message?: string
+}
+
+/**
+ * ErrorMessage component props
+ */
+export interface ErrorMessageProps extends ComponentProps<"span"> {
+  /**
+   * Enable shake animation on mount
+   * @default false
+   */
+  animated?: boolean
+  /**
+   * Array of error objects (compatible with react-hook-form)
+   * When provided, renders as a list of errors
+   */
+  errors?: (ErrorObject | undefined)[]
+  /**
+   * Custom icon to display. Pass `null` to hide the icon.
+   * @default AlertCircleIcon
+   */
+  icon?: ReactNode
+  /**
+   * Show icon automatically based on variant
+   * @default true for 'inline', 'bordered', 'critical' variants
+   */
+  showIcon?: boolean
+  /**
+   * Size of the error message text
+   * @default "md"
+   */
+  size?: ErrorMessageSize
+  /**
+   * Visual variant of the error message
+   * @default "default"
+   */
+  variant?: ErrorMessageVariant
+}