@etus/ui 0.1.0

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

@@ -0,0 +1,636 @@
+// Switch/Switch.test.tsx
+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 { Switch } from "./Switch"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("Switch", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<Switch aria-label="Test switch" />)
+      expect(screen.getByRole("switch")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<Switch aria-label="Test" className="custom-class" />)
+      expect(screen.getByRole("switch")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute on root", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("data-slot", "switch")
+    })
+
+    it("has data-slot attribute on thumb", () => {
+      render(<Switch aria-label="Test" />)
+      const thumb = screen.getByRole("switch").querySelector('[data-slot="switch-thumb"]')
+      expect(thumb).toBeInTheDocument()
+    })
+
+    it("passes through data-* attributes", () => {
+      render(<Switch aria-label="Test" data-custom="value" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("data-custom", "value")
+    })
+
+    it("forwards ref correctly", () => {
+      const ref = { current: null }
+      render(<Switch ref={ref} aria-label="Test" />)
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+    })
+
+    it("renders thumb element", () => {
+      render(<Switch aria-label="Test" />)
+      const switchEl = screen.getByRole("switch")
+      expect(switchEl.firstChild).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("is unchecked by default", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).not.toBeChecked()
+      expect(screen.getByRole("switch")).toHaveAttribute("data-state", "unchecked")
+    })
+
+    it("can be checked", () => {
+      render(<Switch checked aria-label="Test" />)
+      expect(screen.getByRole("switch")).toBeChecked()
+      expect(screen.getByRole("switch")).toHaveAttribute("data-state", "checked")
+    })
+
+    it("supports default checked state", () => {
+      render(<Switch defaultChecked aria-label="Test" />)
+      expect(screen.getByRole("switch")).toBeChecked()
+    })
+
+    it("handles disabled state", () => {
+      render(<Switch disabled aria-label="Test" />)
+      expect(screen.getByRole("switch")).toBeDisabled()
+    })
+
+    it("handles required state", () => {
+      render(<Switch required aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("aria-required", "true")
+    })
+
+    it("handles aria-invalid state", () => {
+      render(<Switch aria-invalid="true" aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("aria-invalid", "true")
+    })
+
+    it("applies disabled styling", () => {
+      render(<Switch disabled aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveClass("disabled:opacity-50")
+    })
+
+    it("applies aria-invalid styling", () => {
+      render(<Switch aria-invalid="true" aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveClass("aria-invalid:border-destructive")
+    })
+
+    it("has checked attribute when checked", () => {
+      render(<Switch checked aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("aria-checked", "true")
+    })
+
+    it("has unchecked attribute when unchecked", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("aria-checked", "false")
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onCheckedChange when clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<Switch aria-label="Test" onCheckedChange={handleChange} />)
+
+      await user.click(screen.getByRole("switch"))
+      expect(handleChange).toHaveBeenCalledWith(true)
+    })
+
+    it("calls onCheckedChange with false when unchecked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<Switch defaultChecked aria-label="Test" onCheckedChange={handleChange} />)
+
+      await user.click(screen.getByRole("switch"))
+      expect(handleChange).toHaveBeenCalledWith(false)
+    })
+
+    it("does not call onCheckedChange when disabled", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<Switch disabled aria-label="Test" onCheckedChange={handleChange} />)
+
+      await user.click(screen.getByRole("switch"))
+      expect(handleChange).not.toHaveBeenCalled()
+    })
+
+    it("calls onClick when clicked", async () => {
+      const user = userEvent.setup()
+      const handleClick = vi.fn()
+      render(<Switch aria-label="Test" onClick={handleClick} />)
+
+      await user.click(screen.getByRole("switch"))
+      expect(handleClick).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveClass("h-[var(--switch-size-md-h)]", "w-[var(--switch-size-md-w)]")
+    })
+
+    it("applies sm size to root", () => {
+      render(<Switch aria-label="Test" size="sm" />)
+      expect(screen.getByRole("switch")).toHaveClass("h-[var(--switch-size-sm-h)]", "w-[var(--switch-size-sm-w)]")
+    })
+
+    it("applies md size to root", () => {
+      render(<Switch aria-label="Test" size="md" />)
+      expect(screen.getByRole("switch")).toHaveClass("h-[var(--switch-size-md-h)]", "w-[var(--switch-size-md-w)]")
+    })
+
+    it("applies lg size to root", () => {
+      render(<Switch aria-label="Test" size="lg" />)
+      expect(screen.getByRole("switch")).toHaveClass("h-[var(--switch-size-lg-h)]", "w-[var(--switch-size-lg-w)]")
+    })
+
+    it("applies sm size to thumb", () => {
+      render(<Switch aria-label="Test" size="sm" />)
+      const thumb = screen.getByRole("switch").querySelector('[data-slot="switch-thumb"]')
+      expect(thumb).toHaveClass("size-[var(--switch-thumb-size-sm)]")
+    })
+
+    it("applies md size to thumb", () => {
+      render(<Switch aria-label="Test" size="md" />)
+      const thumb = screen.getByRole("switch").querySelector('[data-slot="switch-thumb"]')
+      expect(thumb).toHaveClass("size-[var(--switch-thumb-size-md)]")
+    })
+
+    it("applies lg size to thumb", () => {
+      render(<Switch aria-label="Test" size="lg" />)
+      const thumb = screen.getByRole("switch").querySelector('[data-slot="switch-thumb"]')
+      expect(thumb).toHaveClass("size-[var(--switch-thumb-size-lg)]")
+    })
+  })
+
+  // ============================================
+  // INTERACTION TESTS
+  // ============================================
+  describe("Interactions", () => {
+    it("toggles state on click", async () => {
+      const user = userEvent.setup()
+      render(<Switch aria-label="Test" />)
+
+      const switchEl = screen.getByRole("switch")
+      expect(switchEl).not.toBeChecked()
+
+      await user.click(switchEl)
+      expect(switchEl).toBeChecked()
+
+      await user.click(switchEl)
+      expect(switchEl).not.toBeChecked()
+    })
+
+    it("can be toggled with Space key", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<Switch aria-label="Test" onCheckedChange={handleChange} />)
+
+      screen.getByRole("switch").focus()
+      await user.keyboard(" ")
+
+      expect(handleChange).toHaveBeenCalledWith(true)
+    })
+
+    it("can be toggled with Enter key", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<Switch aria-label="Test" onCheckedChange={handleChange} />)
+
+      screen.getByRole("switch").focus()
+      await user.keyboard("{Enter}")
+
+      expect(handleChange).toHaveBeenCalledWith(true)
+    })
+
+    it("does not toggle when disabled", async () => {
+      const user = userEvent.setup()
+      render(<Switch disabled aria-label="Test" />)
+
+      const switchEl = screen.getByRole("switch")
+      expect(switchEl).not.toBeChecked()
+
+      await user.click(switchEl)
+      expect(switchEl).not.toBeChecked()
+    })
+
+    it("updates thumb position on toggle", async () => {
+      const user = userEvent.setup()
+      render(<Switch aria-label="Test" />)
+
+      const thumb = screen.getByRole("switch").querySelector('[data-slot="switch-thumb"]')
+      expect(thumb).toHaveAttribute("data-state", "unchecked")
+
+      await user.click(screen.getByRole("switch"))
+      expect(thumb).toHaveAttribute("data-state", "checked")
+    })
+  })
+
+  // ============================================
+  // CONTROLLED STATE TESTS
+  // ============================================
+  describe("Controlled State", () => {
+    it("respects controlled checked state", () => {
+      const { rerender } = render(
+        <Switch aria-label="Controlled" checked={false} />
+      )
+
+      expect(screen.getByRole("switch")).not.toBeChecked()
+
+      rerender(<Switch aria-label="Controlled" checked={true} />)
+      expect(screen.getByRole("switch")).toBeChecked()
+    })
+
+    it("calls onCheckedChange with new state", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <Switch aria-label="Controlled" checked={false} onCheckedChange={handleChange} />
+      )
+
+      await user.click(screen.getByRole("switch"))
+      expect(handleChange).toHaveBeenCalledWith(true)
+    })
+
+    it("does not change state in controlled mode without handler update", async () => {
+      const user = userEvent.setup()
+      render(<Switch aria-label="Controlled" checked={false} />)
+
+      const switchEl = screen.getByRole("switch")
+      await user.click(switchEl)
+
+      // In controlled mode, state depends on the checked prop
+      expect(switchEl).toHaveAttribute("data-state", "unchecked")
+    })
+  })
+
+  // ============================================
+  // FOCUS TESTS
+  // ============================================
+  describe("Focus", () => {
+    it("is focusable", () => {
+      render(<Switch aria-label="Test" />)
+      const switchEl = screen.getByRole("switch")
+      switchEl.focus()
+      expect(switchEl).toHaveFocus()
+    })
+
+    it("is not focusable when disabled", () => {
+      render(<Switch disabled aria-label="Test" />)
+      const switchEl = screen.getByRole("switch")
+      expect(switchEl).toBeDisabled()
+    })
+
+    it("handles onFocus callback", async () => {
+      const user = userEvent.setup()
+      const handleFocus = vi.fn()
+      render(<Switch aria-label="Test" onFocus={handleFocus} />)
+
+      await user.tab()
+      expect(handleFocus).toHaveBeenCalledTimes(1)
+    })
+
+    it("handles onBlur callback", async () => {
+      const user = userEvent.setup()
+      const handleBlur = vi.fn()
+      render(<Switch aria-label="Test" onBlur={handleBlur} />)
+
+      await user.tab()
+      await user.tab()
+      expect(handleBlur).toHaveBeenCalledTimes(1)
+    })
+
+    it("has focus-visible styles", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveClass("focus-visible:ring-[3px]")
+    })
+  })
+
+  // ============================================
+  // FORM INTEGRATION TESTS
+  // ============================================
+  describe("Form Integration", () => {
+    it("accepts name prop for form submission", () => {
+      render(<Switch aria-label="Test" name="notifications" />)
+      expect(screen.getByRole("switch")).toBeInTheDocument()
+    })
+
+    it("has correct id attribute", () => {
+      render(<Switch aria-label="Test" id="switch-id" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("id", "switch-id")
+    })
+
+    it("accepts value prop for form submission", () => {
+      render(<Switch aria-label="Test" value="on" />)
+      expect(screen.getByRole("switch")).toBeInTheDocument()
+    })
+
+    it("works within a form element", () => {
+      render(
+        <form data-testid="form">
+          <Switch aria-label="Toggle" name="toggle" />
+        </form>
+      )
+      expect(screen.getByTestId("form")).toContainElement(screen.getByRole("switch"))
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <label>
+          <Switch />
+          Enable notifications
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <label>
+            <Switch size="sm" />
+            Small
+          </label>
+          <label>
+            <Switch size="md" />
+            Medium
+          </label>
+          <label>
+            <Switch size="lg" />
+            Large
+          </label>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations when checked", async () => {
+      const { container } = render(
+        <label>
+          <Switch defaultChecked />
+          Checked
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations when disabled", async () => {
+      const { container } = render(
+        <label>
+          <Switch disabled />
+          Disabled
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations when required", async () => {
+      const { container } = render(
+        <label>
+          <Switch required />
+          Required
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with aria-invalid", async () => {
+      const { container } = render(
+        <label>
+          <Switch aria-describedby="error" aria-invalid="true" />
+          Invalid
+          <span id="error">This field has an error</span>
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("supports aria-label", () => {
+      render(<Switch aria-label="Enable dark mode" />)
+      expect(screen.getByRole("switch")).toHaveAccessibleName("Enable dark mode")
+    })
+
+    it("supports aria-describedby", () => {
+      render(
+        <>
+          <Switch aria-describedby="help" aria-label="Test" />
+          <span id="help">Help text</span>
+        </>
+      )
+      expect(screen.getByRole("switch")).toHaveAttribute("aria-describedby", "help")
+    })
+
+    it("supports aria-labelledby", () => {
+      render(
+        <>
+          <span id="label">Dark Mode</span>
+          <Switch aria-labelledby="label" />
+        </>
+      )
+      expect(screen.getByRole("switch")).toHaveAttribute("aria-labelledby", "label")
+    })
+
+    it("has correct role", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toBeInTheDocument()
+    })
+
+    it("can be navigated by keyboard", async () => {
+      const user = userEvent.setup()
+      render(
+        <div>
+          <button>Before</button>
+          <Switch aria-label="Test" />
+          <button>After</button>
+        </div>
+      )
+
+      await user.tab()
+      expect(screen.getByText("Before")).toHaveFocus()
+
+      await user.tab()
+      expect(screen.getByRole("switch")).toHaveFocus()
+
+      await user.tab()
+      expect(screen.getByText("After")).toHaveFocus()
+    })
+  })
+
+  // ============================================
+  // EDGE CASES TESTS
+  // ============================================
+  describe("Edge Cases", () => {
+    it("handles rapid toggling correctly", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<Switch aria-label="Test" onCheckedChange={handleChange} />)
+
+      const switchEl = screen.getByRole("switch")
+      await user.tripleClick(switchEl)
+
+      expect(handleChange).toHaveBeenCalledTimes(3)
+    })
+
+    it("maintains state through re-renders", () => {
+      const { rerender } = render(
+        <Switch defaultChecked aria-label="Test" />
+      )
+
+      expect(screen.getByRole("switch")).toBeChecked()
+
+      rerender(
+        <Switch defaultChecked aria-label="Test" className="new-class" />
+      )
+
+      expect(screen.getByRole("switch")).toBeChecked()
+    })
+
+    it("handles empty className", () => {
+      render(<Switch aria-label="Test" className="" />)
+      expect(screen.getByRole("switch")).toBeInTheDocument()
+    })
+
+    it("handles whitespace-only className", () => {
+      render(<Switch aria-label="Test" className="   " />)
+      expect(screen.getByRole("switch")).toBeInTheDocument()
+    })
+
+    it("handles undefined size prop", () => {
+      render(<Switch aria-label="Test" size={undefined} />)
+      expect(screen.getByRole("switch")).toHaveClass("h-[var(--switch-size-md-h)]", "w-[var(--switch-size-md-w)]")
+    })
+
+    it("preserves additional props", () => {
+      render(<Switch aria-label="Test" tabIndex={5} />)
+      expect(screen.getByRole("switch")).toHaveAttribute("tabindex", "5")
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTE TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+    it("has data-slot on switch", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("data-slot", "switch")
+    })
+
+    it("has data-slot on thumb", () => {
+      render(<Switch aria-label="Test" />)
+      const thumb = screen.getByRole("switch").querySelector('[data-slot="switch-thumb"]')
+      expect(thumb).toHaveAttribute("data-slot", "switch-thumb")
+    })
+
+    it("preserves custom data attributes", () => {
+      render(<Switch aria-label="Test" data-field="notifications" data-form="settings" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("data-field", "notifications")
+      expect(screen.getByRole("switch")).toHaveAttribute("data-form", "settings")
+    })
+
+    it("has data-state=unchecked when unchecked", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("data-state", "unchecked")
+    })
+
+    it("has data-state=checked when checked", () => {
+      render(<Switch checked aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("data-state", "checked")
+    })
+
+    it("thumb has data-state matching root", async () => {
+      const user = userEvent.setup()
+      render(<Switch aria-label="Test" />)
+
+      const switchEl = screen.getByRole("switch")
+      const thumb = switchEl.querySelector('[data-slot="switch-thumb"]')
+
+      expect(thumb).toHaveAttribute("data-state", "unchecked")
+
+      await user.click(switchEl)
+      expect(thumb).toHaveAttribute("data-state", "checked")
+    })
+
+    it("has data-disabled when disabled", () => {
+      render(<Switch disabled aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveAttribute("data-disabled", "")
+    })
+  })
+
+  // ============================================
+  // STYLING TESTS
+  // ============================================
+  describe("Styling", () => {
+    it("has peer class for sibling styling", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveClass("peer")
+    })
+
+    it("has transition classes", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveClass("transition-all")
+    })
+
+    it("has rounded-[var(--switch-track-radius)] for pill shape", () => {
+      render(<Switch aria-label="Test" />)
+      expect(screen.getByRole("switch")).toHaveClass("rounded-[var(--switch-track-radius)]")
+    })
+
+    it("thumb has rounded-[var(--switch-thumb-radius)]", () => {
+      render(<Switch aria-label="Test" />)
+      const thumb = screen.getByRole("switch").querySelector('[data-slot="switch-thumb"]')
+      expect(thumb).toHaveClass("rounded-[var(--switch-thumb-radius)]")
+    })
+
+    it("thumb has transition-transform", () => {
+      render(<Switch aria-label="Test" />)
+      const thumb = screen.getByRole("switch").querySelector('[data-slot="switch-thumb"]')
+      expect(thumb).toHaveClass("transition-transform")
+    })
+
+    it("applies custom className last", () => {
+      render(<Switch aria-label="Test" className="bg-red-500" />)
+      expect(screen.getByRole("switch")).toHaveClass("bg-red-500")
+    })
+  })
+})

package/src/components/forms/Switch/Switch.tsx

@@ -0,0 +1,28 @@
+import type { SwitchProps } from "./Switch.types"
+
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import { switchThumbVariants, switchVariants } from "./Switch.variants"
+
+function Switch({
+  className,
+  size = "md",
+  ...props
+}: SwitchProps) {
+  return (
+    <SwitchPrimitive.Root
+      className={cn(switchVariants({ size }), className)}
+      data-slot="switch"
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={switchThumbVariants({ size })}
+        data-slot="switch-thumb"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

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

@@ -0,0 +1,24 @@
+import type * as SwitchPrimitive from "@radix-ui/react-switch"
+import type { ComponentProps } from "react"
+
+/**
+ * Switch size variants
+ */
+export type SwitchSize = "lg" | "md" | "sm"
+
+/**
+ * Switch component props
+ */
+export interface SwitchProps
+  extends ComponentProps<typeof SwitchPrimitive.Root> {
+  /**
+   * Visual size of the switch
+   * @default "md"
+   */
+  size?: SwitchSize
+}
+
+/**
+ * Switch state for controlled usage
+ */
+export type SwitchState = boolean