@etus/ui 0.1.0

package/src/components/forms/Checkbox/index.ts

@@ -0,0 +1,3 @@
+export * from './Checkbox'
+export { checkboxIconVariants, type CheckboxVariantProps, checkboxVariants } from './Checkbox.variants'
+export type { CheckboxProps, CheckboxSize, CheckboxState } from './Checkbox.types'

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

@@ -0,0 +1,338 @@
+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 { CheckboxGroup, CheckboxGroupItem } from "./CheckboxGroup"
+
+expect.extend(toHaveNoViolations)
+
+const defaultOptions = [
+  { value: "option1", label: "Option 1" },
+  { value: "option2", label: "Option 2" },
+  { value: "option3", label: "Option 3" },
+]
+
+describe("CheckboxGroup", () => {
+  // ============================================
+  // RENDERING TESTS
+  // ============================================
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(<CheckboxGroup options={defaultOptions} />)
+      expect(screen.getByText("Option 1")).toBeInTheDocument()
+      expect(screen.getByText("Option 2")).toBeInTheDocument()
+      expect(screen.getByText("Option 3")).toBeInTheDocument()
+    })
+
+    it("renders with label", () => {
+      render(<CheckboxGroup label="Select options" options={defaultOptions} />)
+      expect(screen.getByText("Select options")).toBeInTheDocument()
+    })
+
+    it("renders required indicator", () => {
+      render(<CheckboxGroup required label="Select options" options={defaultOptions} />)
+      expect(screen.getByText("*")).toBeInTheDocument()
+    })
+
+    it("renders with custom className", () => {
+      render(<CheckboxGroup className="custom-class" options={defaultOptions} />)
+      expect(screen.getByRole("group")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(<CheckboxGroup options={defaultOptions} />)
+      expect(screen.getByRole("group")).toHaveAttribute("data-slot", "checkbox-group")
+    })
+
+    it("renders with default value", () => {
+      render(<CheckboxGroup defaultValue={["option1", "option2"]} options={defaultOptions} />)
+      const checkboxes = screen.getAllByRole("checkbox")
+      expect(checkboxes[0]).toBeChecked()
+      expect(checkboxes[1]).toBeChecked()
+      expect(checkboxes[2]).not.toBeChecked()
+    })
+
+    it("renders with controlled value", () => {
+      render(<CheckboxGroup options={defaultOptions} value={["option2"]} onChange={() => {}} />)
+      const checkboxes = screen.getAllByRole("checkbox")
+      expect(checkboxes[0]).not.toBeChecked()
+      expect(checkboxes[1]).toBeChecked()
+      expect(checkboxes[2]).not.toBeChecked()
+    })
+
+    it("renders with descriptions", () => {
+      const optionsWithDescriptions = [
+        { value: "opt1", label: "Option 1", description: "Description 1" },
+        { value: "opt2", label: "Option 2", description: "Description 2" },
+      ]
+      render(<CheckboxGroup options={optionsWithDescriptions} />)
+      expect(screen.getByText("Description 1")).toBeInTheDocument()
+      expect(screen.getByText("Description 2")).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // ORIENTATION TESTS
+  // ============================================
+  describe("Orientation", () => {
+    it("renders vertical by default", () => {
+      const { container } = render(<CheckboxGroup options={defaultOptions} />)
+      const itemsContainer = container.querySelector('[data-slot="checkbox-group-items"]')
+      expect(itemsContainer).toHaveClass("grid-flow-row")
+    })
+
+    it("renders horizontal when specified", () => {
+      const { container } = render(<CheckboxGroup options={defaultOptions} orientation="horizontal" />)
+      const itemsContainer = container.querySelector('[data-slot="checkbox-group-items"]')
+      expect(itemsContainer).toHaveClass("grid-flow-col")
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state on all checkboxes", () => {
+      render(<CheckboxGroup disabled options={defaultOptions} />)
+      const checkboxes = screen.getAllByRole("checkbox")
+      checkboxes.forEach((checkbox) => {
+        expect(checkbox).toBeDisabled()
+      })
+    })
+
+    it("handles disabled state on individual options", () => {
+      const optionsWithDisabled = [
+        { value: "opt1", label: "Option 1" },
+        { value: "opt2", label: "Option 2", disabled: true },
+        { value: "opt3", label: "Option 3" },
+      ]
+      render(<CheckboxGroup options={optionsWithDisabled} />)
+      const checkboxes = screen.getAllByRole("checkbox")
+      expect(checkboxes[0]).not.toBeDisabled()
+      expect(checkboxes[1]).toBeDisabled()
+      expect(checkboxes[2]).not.toBeDisabled()
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onChange when checkbox is clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(<CheckboxGroup options={defaultOptions} onChange={handleChange} />)
+
+      await user.click(screen.getByText("Option 1"))
+      expect(handleChange).toHaveBeenCalledWith(["option1"])
+    })
+
+    it("adds value to selection when checkbox is checked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <CheckboxGroup
+          defaultValue={["option1"]}
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      await user.click(screen.getByText("Option 2"))
+      expect(handleChange).toHaveBeenCalledWith(["option1", "option2"])
+    })
+
+    it("removes value from selection when checkbox is unchecked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <CheckboxGroup
+          defaultValue={["option1", "option2"]}
+          options={defaultOptions}
+          onChange={handleChange}
+        />
+      )
+
+      await user.click(screen.getByText("Option 1"))
+      expect(handleChange).toHaveBeenCalledWith(["option2"])
+    })
+
+    it("works with controlled value", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      const { rerender } = render(
+        <CheckboxGroup
+          options={defaultOptions}
+          value={[]}
+          onChange={handleChange}
+        />
+      )
+
+      await user.click(screen.getByText("Option 1"))
+      expect(handleChange).toHaveBeenCalledWith(["option1"])
+
+      // Simulate controlled update
+      rerender(
+        <CheckboxGroup
+          options={defaultOptions}
+          value={["option1"]}
+          onChange={handleChange}
+        />
+      )
+      expect(screen.getAllByRole("checkbox")[0]).toBeChecked()
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(<CheckboxGroup options={defaultOptions} />)
+      const checkboxes = screen.getAllByRole("checkbox")
+      expect(checkboxes[0]).toHaveClass("size-[var(--checkbox-size-md)]")
+    })
+
+    it("applies sm size", () => {
+      render(<CheckboxGroup options={defaultOptions} size="sm" />)
+      const checkboxes = screen.getAllByRole("checkbox")
+      expect(checkboxes[0]).toHaveClass("size-[var(--checkbox-size-sm)]")
+    })
+
+    it("applies lg size", () => {
+      render(<CheckboxGroup options={defaultOptions} size="lg" />)
+      const checkboxes = screen.getAllByRole("checkbox")
+      expect(checkboxes[0]).toHaveClass("size-[var(--checkbox-size-lg)]")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <CheckboxGroup label="Select options" options={defaultOptions} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has role=group on container", () => {
+      render(<CheckboxGroup options={defaultOptions} />)
+      expect(screen.getByRole("group")).toBeInTheDocument()
+    })
+
+    it("associates label with group via aria-labelledby", () => {
+      render(<CheckboxGroup label="Select options" options={defaultOptions} />)
+      const group = screen.getByRole("group")
+      expect(group).toHaveAttribute("aria-labelledby")
+    })
+
+    it("sets aria-required when required", () => {
+      render(<CheckboxGroup required options={defaultOptions} />)
+      expect(screen.getByRole("group")).toHaveAttribute("aria-required", "true")
+    })
+
+    it("labels are properly associated with checkboxes", () => {
+      render(<CheckboxGroup options={defaultOptions} />)
+      const checkboxes = screen.getAllByRole("checkbox")
+      const checkbox = checkboxes[0]
+      const label = screen.getByText("Option 1")
+      expect(checkbox).toBeDefined()
+      expect(label).toHaveAttribute("for", checkbox?.id)
+    })
+
+    it("disabled group has no violations", async () => {
+      const { container } = render(
+        <CheckboxGroup disabled label="Select options" options={defaultOptions} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("group with descriptions has no violations", async () => {
+      const optionsWithDescriptions = [
+        { value: "opt1", label: "Option 1", description: "Description 1" },
+        { value: "opt2", label: "Option 2", description: "Description 2" },
+      ]
+      const { container } = render(
+        <CheckboxGroup label="Select" options={optionsWithDescriptions} />
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})
+
+describe("CheckboxGroupItem", () => {
+  // ============================================
+  // RENDERING TESTS
+  // ============================================
+  describe("Rendering", () => {
+    it("renders checkbox only when no label", () => {
+      render(<CheckboxGroupItem value="test" />)
+      expect(screen.getByRole("checkbox")).toBeInTheDocument()
+    })
+
+    it("renders with label", () => {
+      render(<CheckboxGroupItem label="Test Label" value="test" />)
+      expect(screen.getByText("Test Label")).toBeInTheDocument()
+    })
+
+    it("renders with description", () => {
+      render(
+        <CheckboxGroupItem
+          description="Test description"
+          label="Test"
+          value="test"
+        />
+      )
+      expect(screen.getByText("Test description")).toBeInTheDocument()
+    })
+
+    it("has data-slot attribute", () => {
+      const { container } = render(
+        <CheckboxGroupItem label="Test" value="test" />
+      )
+      expect(container.querySelector('[data-slot="checkbox-group-item"]')).toBeInTheDocument()
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onCheckedChange when clicked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <CheckboxGroupItem
+          label="Test"
+          value="test"
+          onCheckedChange={handleChange}
+        />
+      )
+
+      await user.click(screen.getByText("Test"))
+      expect(handleChange).toHaveBeenCalledWith(true)
+    })
+
+    it("calls onCheckedChange with false when unchecked", async () => {
+      const user = userEvent.setup()
+      const handleChange = vi.fn()
+      render(
+        <CheckboxGroupItem
+          checked
+          label="Test"
+          value="test"
+          onCheckedChange={handleChange}
+        />
+      )
+
+      await user.click(screen.getByText("Test"))
+      expect(handleChange).toHaveBeenCalledWith(false)
+    })
+  })
+})

package/src/components/forms/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,212 @@
+"use client"
+
+import type {
+  CheckboxGroupItemProps,
+  CheckboxGroupProps,
+} from "./CheckboxGroup.types"
+
+import * as React from "react"
+import { useCallback, useId, useState } from "react"
+
+import { cn } from "../../../lib/utils"
+import { Checkbox } from "../Checkbox"
+import {
+  checkboxGroupDescriptionVariants,
+  checkboxGroupHeaderVariants,
+  checkboxGroupItemWrapperVariants,
+  checkboxGroupLabelVariants,
+  checkboxGroupVariants,
+} from "./CheckboxGroup.variants"
+
+/**
+ * CheckboxGroupItem - Individual checkbox with optional label and description
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroupItem
+ *   value="option1"
+ *   label="Option 1"
+ *   description="Description for option 1"
+ *   checked={selected.includes("option1")}
+ *   onCheckedChange={(checked) => handleChange("option1", checked)}
+ * />
+ * ```
+ */
+function CheckboxGroupItem({
+  className,
+  size = "md",
+  label,
+  description,
+  id,
+  value,
+  checked,
+  onCheckedChange,
+  disabled,
+  name,
+}: CheckboxGroupItemProps) {
+  const generatedId = useId()
+  const itemId = id ?? generatedId
+  const hasDescription = !!description
+
+  const checkbox = (
+    <Checkbox
+      checked={checked}
+      className="mt-0.5"
+      disabled={disabled}
+      id={itemId}
+      name={name}
+      size={size}
+      value={value}
+      onCheckedChange={(state) => {
+        if (typeof state === "boolean") {
+          onCheckedChange?.(state)
+        }
+      }}
+    />
+  )
+
+  if (!label) return checkbox
+
+  return (
+    <div
+      className={cn(
+        checkboxGroupItemWrapperVariants({ hasDescription }),
+        className
+      )}
+      data-slot="checkbox-group-item"
+    >
+      {checkbox}
+      <div className="grid gap-0.5">
+        <label
+          className={checkboxGroupLabelVariants({ size })}
+          data-slot="checkbox-group-item-label"
+          htmlFor={itemId}
+        >
+          {label}
+        </label>
+        {description && (
+          <p
+            className={checkboxGroupDescriptionVariants({ size })}
+            data-slot="checkbox-group-item-description"
+          >
+            {description}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * CheckboxGroup - A group of related checkboxes with shared state management
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <CheckboxGroup
+ *   label="Select features"
+ *   options={[
+ *     { value: "feature1", label: "Feature 1" },
+ *     { value: "feature2", label: "Feature 2" },
+ *     { value: "feature3", label: "Feature 3", disabled: true },
+ *   ]}
+ *   defaultValue={["feature1"]}
+ * />
+ *
+ * // Controlled
+ * const [selected, setSelected] = useState(["feature1"])
+ * <CheckboxGroup
+ *   label="Select features"
+ *   options={[
+ *     { value: "feature1", label: "Feature 1" },
+ *     { value: "feature2", label: "Feature 2" },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ * />
+ * ```
+ */
+function CheckboxGroup({
+  className,
+  label,
+  options,
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  orientation = "vertical",
+  size = "md",
+  disabled,
+  name,
+  required,
+}: CheckboxGroupProps) {
+  const groupId = useId()
+
+  // Internal state for uncontrolled mode
+  const [internalValue, setInternalValue] = useState<string[]>(defaultValue)
+
+  // Determine if controlled
+  const isControlled = controlledValue !== undefined
+  const selectedValues = isControlled ? controlledValue : internalValue
+
+  const handleCheckedChange = useCallback(
+    (optionValue: string, checked: boolean) => {
+      const newValues = checked
+        ? [...selectedValues, optionValue]
+        : selectedValues.filter((v) => v !== optionValue)
+
+      if (!isControlled) {
+        setInternalValue(newValues)
+      }
+
+      onChange?.(newValues)
+    },
+    [selectedValues, isControlled, onChange]
+  )
+
+  return (
+    <div
+      aria-labelledby={label ? `${groupId}-label` : undefined}
+      aria-required={required}
+      className={cn("flex flex-col", className)}
+      data-slot="checkbox-group"
+      role="group"
+    >
+      {label && (
+        <span
+          className={checkboxGroupHeaderVariants({ size })}
+          data-slot="checkbox-group-label"
+          id={`${groupId}-label`}
+        >
+          {label}
+          {required && (
+            <span aria-hidden="true" className="text-destructive ml-1">
+              *
+            </span>
+          )}
+        </span>
+      )}
+      <div
+        className={checkboxGroupVariants({ orientation })}
+        data-slot="checkbox-group-items"
+      >
+        {options.map((option) => (
+          <CheckboxGroupItem
+            key={option.value}
+            checked={selectedValues.includes(option.value)}
+            description={option.description}
+            disabled={disabled || option.disabled}
+            label={option.label}
+            name={name}
+            size={size}
+            value={option.value}
+            onCheckedChange={(checked) => {
+              handleCheckedChange(option.value, checked)
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export { CheckboxGroup, CheckboxGroupItem }

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

@@ -0,0 +1,150 @@
+import type { CheckboxSize } from "../Checkbox"
+import type { ReactNode } from "react"
+
+/**
+ * CheckboxGroup orientation variants
+ */
+export type CheckboxGroupOrientation = "horizontal" | "vertical"
+
+/**
+ * Option definition for CheckboxGroup
+ */
+export interface CheckboxGroupOption {
+  /**
+   * Description text shown below the label
+   */
+  description?: ReactNode
+
+  /**
+   * Whether this option is disabled
+   */
+  disabled?: boolean
+
+  /**
+   * Label text for the checkbox
+   */
+  label: ReactNode
+
+  /**
+   * Unique value for the checkbox
+   */
+  value: string
+}
+
+/**
+ * CheckboxGroup component props
+ */
+export interface CheckboxGroupProps {
+  /**
+   * Additional class name for styling the container
+   */
+  className?: string
+
+  /**
+   * Default selected values for uncontrolled usage
+   */
+  defaultValue?: string[]
+
+  /**
+   * Whether all checkboxes in the group are disabled
+   */
+  disabled?: boolean
+
+  /**
+   * Group label displayed above the checkboxes
+   */
+  label?: ReactNode
+
+  /**
+   * Name attribute for form submission
+   */
+  name?: string
+
+  /**
+   * Callback when selection changes
+   */
+  onChange?: (values: string[]) => void
+
+  /**
+   * Array of checkbox options to render
+   */
+  options: CheckboxGroupOption[]
+
+  /**
+   * Layout orientation
+   * @default "vertical"
+   */
+  orientation?: CheckboxGroupOrientation
+
+  /**
+   * Whether at least one checkbox must be selected
+   */
+  required?: boolean
+
+  /**
+   * Visual size of all checkboxes
+   * @default "md"
+   */
+  size?: CheckboxSize
+
+  /**
+   * Controlled selected values
+   */
+  value?: string[]
+}
+
+/**
+ * CheckboxGroupItem component props
+ */
+export interface CheckboxGroupItemProps {
+  /**
+   * Whether the checkbox is checked
+   */
+  checked?: boolean
+
+  /**
+   * Additional class name for styling
+   */
+  className?: string
+
+  /**
+   * Description text shown below the label
+   */
+  description?: ReactNode
+
+  /**
+   * Whether the checkbox is disabled
+   */
+  disabled?: boolean
+
+  /**
+   * ID for the checkbox element
+   */
+  id?: string
+
+  /**
+   * Label text for the checkbox
+   */
+  label?: ReactNode
+
+  /**
+   * Name attribute for form submission
+   */
+  name?: string
+
+  /**
+   * Callback when checked state changes
+   */
+  onCheckedChange?: (checked: boolean) => void
+
+  /**
+   * Visual size of the checkbox
+   * @default "md"
+   */
+  size?: CheckboxSize
+
+  /**
+   * Value for form submission
+   */
+  value: string
+}