@etus/ui 0.1.1 → 0.1.3

package/src/components/workflow/ProgressSteps/ProgressSteps.test.tsx

@@ -1,318 +0,0 @@
-import type { Step } from "./ProgressSteps.types"
-
-import { render, screen } from "@testing-library/react"
-import { axe, toHaveNoViolations } from "jest-axe"
-import { CircleCheck, Home, Package, Truck } from "lucide-react"
-import { describe, expect, it } from "vitest"
-
-import { ProgressSteps } from "./ProgressSteps"
-
-expect.extend(toHaveNoViolations)
-
-const mockSteps: Step[] = [
-  { id: "1", label: "Step 1" },
-  { id: "2", label: "Step 2" },
-  { id: "3", label: "Step 3" },
-]
-
-const mockStepsWithDescriptions: Step[] = [
-  { description: "First step description", id: "1", label: "Step 1" },
-  { description: "Second step description", id: "2", label: "Step 2" },
-  { description: "Third step description", id: "3", label: "Step 3" },
-]
-
-const mockStepsWithIcons: Step[] = [
-  { icon: <Package data-testid="icon-package" />, id: "1", label: "Order" },
-  { icon: <Truck data-testid="icon-truck" />, id: "2", label: "Shipping" },
-  { icon: <Home data-testid="icon-home" />, id: "3", label: "Delivery" },
-  { icon: <CircleCheck data-testid="icon-check" />, id: "4", label: "Complete" },
-]
-
-const mockStepsWithStatus: Step[] = [
-  { id: "1", label: "Step 1", status: "completed" },
-  { id: "2", label: "Step 2", status: "completed" },
-  { id: "3", label: "Step 3", status: "error" },
-  { id: "4", label: "Step 4", status: "upcoming" },
-  { id: "5", label: "Step 5", status: "skipped" },
-]
-
-describe("ProgressSteps", () => {
-  describe("Rendering", () => {
-    it("renders all steps", () => {
-      render(<ProgressSteps steps={mockSteps} />)
-
-      expect(screen.getByText("Step 1")).toBeInTheDocument()
-      expect(screen.getByText("Step 2")).toBeInTheDocument()
-      expect(screen.getByText("Step 3")).toBeInTheDocument()
-    })
-
-    it("renders with correct role and aria-label", () => {
-      render(<ProgressSteps steps={mockSteps} />)
-
-      const container = screen.getByRole("list", { name: "Progress Steps" })
-      expect(container).toBeInTheDocument()
-    })
-
-    it("renders step items with listitem role", () => {
-      render(<ProgressSteps steps={mockSteps} />)
-
-      const items = screen.getAllByRole("listitem")
-      expect(items).toHaveLength(3)
-    })
-
-    it("marks current step correctly with aria-current", () => {
-      render(<ProgressSteps currentStep={1} steps={mockSteps} />)
-
-      const step2 = screen.getByText("Step 2").closest('[role="listitem"]')
-      expect(step2).toHaveAttribute("aria-current", "step")
-    })
-
-    it("applies data-status attribute correctly", () => {
-      const { container } = render(
-        <ProgressSteps currentStep={1} steps={mockSteps} />
-      )
-
-      const steps = container.querySelectorAll('[data-slot="progress-step"]')
-      expect(steps[0]).toHaveAttribute("data-status", "completed")
-      expect(steps[1]).toHaveAttribute("data-status", "current")
-      expect(steps[2]).toHaveAttribute("data-status", "upcoming")
-    })
-  })
-
-  describe("Variants", () => {
-    it("renders default variant with circles", () => {
-      const { container } = render(<ProgressSteps steps={mockSteps} />)
-
-      const circles = container.querySelectorAll(
-        '[data-slot="progress-step-circle"]'
-      )
-      expect(circles).toHaveLength(3)
-    })
-
-    it("renders numbered variant with step numbers", () => {
-      render(<ProgressSteps steps={mockSteps} variant="numbered" />)
-
-      expect(screen.getByText("1")).toBeInTheDocument()
-      expect(screen.getByText("2")).toBeInTheDocument()
-      expect(screen.getByText("3")).toBeInTheDocument()
-    })
-
-    it("renders dot variant with dots", () => {
-      const { container } = render(
-        <ProgressSteps steps={mockSteps} variant="dot" />
-      )
-
-      const dots = container.querySelectorAll('[data-slot="progress-step-dot"]')
-      expect(dots).toHaveLength(3)
-    })
-
-    it("renders icon variant with custom icons", () => {
-      render(<ProgressSteps steps={mockStepsWithIcons} variant="icon" />)
-
-      expect(screen.getByTestId("icon-package")).toBeInTheDocument()
-      expect(screen.getByTestId("icon-truck")).toBeInTheDocument()
-    })
-
-    it("renders bar variant with bar segments", () => {
-      const { container } = render(
-        <ProgressSteps steps={mockSteps} variant="bar" />
-      )
-
-      const bars = container.querySelectorAll('[data-slot="progress-step-bar"]')
-      expect(bars).toHaveLength(3)
-    })
-  })
-
-  describe("Orientation", () => {
-    it("renders horizontal orientation by default", () => {
-      const { container } = render(<ProgressSteps steps={mockSteps} />)
-
-      expect(container.firstChild).toHaveClass("flex-row")
-    })
-
-    it("renders vertical orientation when specified", () => {
-      const { container } = render(
-        <ProgressSteps orientation="vertical" steps={mockSteps} />
-      )
-
-      expect(container.firstChild).toHaveClass("flex-col")
-    })
-  })
-
-  describe("Sizes", () => {
-    it("applies small size classes", () => {
-      const { container } = render(
-        <ProgressSteps size="sm" steps={mockSteps} />
-      )
-
-      const circles = container.querySelectorAll(
-        '[data-slot="progress-step-circle"]'
-      )
-      expect(circles[0]).toHaveClass("h-6", "w-6")
-    })
-
-    it("applies medium size classes", () => {
-      const { container } = render(
-        <ProgressSteps size="md" steps={mockSteps} />
-      )
-
-      const circles = container.querySelectorAll(
-        '[data-slot="progress-step-circle"]'
-      )
-      expect(circles[0]).toHaveClass("h-8", "w-8")
-    })
-
-    it("applies large size classes", () => {
-      const { container } = render(
-        <ProgressSteps size="lg" steps={mockSteps} />
-      )
-
-      const circles = container.querySelectorAll(
-        '[data-slot="progress-step-circle"]'
-      )
-      expect(circles[0]).toHaveClass("h-10", "w-10")
-    })
-  })
-
-  describe("Labels and Descriptions", () => {
-    it("shows labels by default", () => {
-      render(<ProgressSteps steps={mockSteps} />)
-
-      expect(screen.getByText("Step 1")).toBeInTheDocument()
-    })
-
-    it("hides labels when showLabels is false", () => {
-      render(<ProgressSteps showLabels={false} steps={mockSteps} />)
-
-      expect(screen.queryByText("Step 1")).not.toBeInTheDocument()
-    })
-
-    it("shows descriptions when showDescriptions is true", () => {
-      render(
-        <ProgressSteps showDescriptions steps={mockStepsWithDescriptions} />
-      )
-
-      expect(screen.getByText("First step description")).toBeInTheDocument()
-    })
-
-    it("hides descriptions by default", () => {
-      render(<ProgressSteps steps={mockStepsWithDescriptions} />)
-
-      expect(
-        screen.queryByText("First step description")
-      ).not.toBeInTheDocument()
-    })
-  })
-
-  describe("Connectors", () => {
-    it("shows connectors by default", () => {
-      const { container } = render(<ProgressSteps steps={mockSteps} />)
-
-      const connectors = container.querySelectorAll(
-        '[data-slot="progress-step-connector"]'
-      )
-      // Should have 2 connectors for 3 steps (not after last step)
-      expect(connectors).toHaveLength(2)
-    })
-
-    it("hides connectors when showConnectors is false", () => {
-      const { container } = render(
-        <ProgressSteps showConnectors={false} steps={mockSteps} />
-      )
-
-      const connectors = container.querySelectorAll(
-        '[data-slot="progress-step-connector"]'
-      )
-      expect(connectors).toHaveLength(0)
-    })
-  })
-
-  describe("Custom Step Status", () => {
-    it("respects custom status on steps", () => {
-      const { container } = render(
-        <ProgressSteps steps={mockStepsWithStatus} />
-      )
-
-      const steps = container.querySelectorAll('[data-slot="progress-step"]')
-      expect(steps[0]).toHaveAttribute("data-status", "completed")
-      expect(steps[1]).toHaveAttribute("data-status", "completed")
-      expect(steps[2]).toHaveAttribute("data-status", "error")
-      expect(steps[3]).toHaveAttribute("data-status", "upcoming")
-      expect(steps[4]).toHaveAttribute("data-status", "skipped")
-    })
-
-    it("applies completed style to steps", () => {
-      const { container } = render(
-        <ProgressSteps currentStep={2} steps={mockSteps} />
-      )
-
-      const completedCircles = container.querySelectorAll(
-        '[data-slot="progress-step-circle"].bg-primary'
-      )
-      expect(completedCircles.length).toBeGreaterThanOrEqual(2)
-    })
-  })
-
-  describe("Accessibility", () => {
-    it("has no accessibility violations", async () => {
-      const { container } = render(
-        <ProgressSteps currentStep={1} steps={mockSteps} />
-      )
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with vertical orientation", async () => {
-      const { container } = render(
-        <ProgressSteps
-          currentStep={1}
-          orientation="vertical"
-          steps={mockSteps}
-        />
-      )
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-
-    it("has no accessibility violations with numbered variant", async () => {
-      const { container } = render(
-        <ProgressSteps
-          currentStep={1}
-          steps={mockSteps}
-          variant="numbered"
-        />
-      )
-
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
-  })
-
-  describe("Props", () => {
-    it("passes className to container", () => {
-      const { container } = render(
-        <ProgressSteps className="custom-class" steps={mockSteps} />
-      )
-
-      expect(container.firstChild).toHaveClass("custom-class")
-    })
-
-    it("applies data-variant attribute", () => {
-      const { container } = render(
-        <ProgressSteps steps={mockSteps} variant="numbered" />
-      )
-
-      expect(container.firstChild).toHaveAttribute("data-variant", "numbered")
-    })
-
-    it("passes additional props to container", () => {
-      render(
-        <ProgressSteps data-testid="progress-steps" steps={mockSteps} />
-      )
-
-      expect(screen.getByTestId("progress-steps")).toBeInTheDocument()
-    })
-  })
-})

package/src/components/workflow/ProgressSteps/ProgressSteps.tsx

@@ -1,350 +0,0 @@
-import type { ProgressStepsProps, Step, StepItemProps } from "./ProgressSteps.types"
-
-import { Check, X } from "lucide-react"
-
-import { cn } from "../../../lib/utils"
-import {
-  progressStepsVariants,
-  stepBarSegmentVariants,
-  stepCircleVariants,
-  stepConnectorHorizontalVariants,
-  stepConnectorVerticalVariants,
-  stepDescriptionVariants,
-  stepDotVariants,
-  stepItemVariants,
-  stepLabelVariants,
-} from "./ProgressSteps.variants"
-
-/**
- * Compute the status of a step based on its index and current step
- */
-function computeStepStatus(
-  step: Step,
-  index: number,
-  currentStep: number
-): "completed" | "current" | "error" | "skipped" | "upcoming" {
-  // If step has explicit status, use it
-  if (step.status) {
-    return step.status
-  }
-
-  // Auto-compute based on currentStep
-  if (index < currentStep) {
-    return "completed"
-  }
-  if (index === currentStep) {
-    return "current"
-  }
-  return "upcoming"
-}
-
-/**
- * Format a date to a human-readable string
- */
-function formatTimestamp(date: Date): string {
-  return date.toLocaleDateString(undefined, {
-    day: "numeric",
-    month: "short",
-    year: "numeric",
-  })
-}
-
-/**
- * Render the step marker content based on variant
- */
-function StepMarkerContent({
-  index,
-  size = "md",
-  status,
-  step,
-  variant = "default",
-}: {
-  index: number
-  size?: "lg" | "md" | "sm"
-  status: "completed" | "current" | "error" | "skipped" | "upcoming"
-  step: Step
-  variant?: "bar" | "default" | "dot" | "icon" | "numbered"
-}) {
-  const iconSize = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4"
-
-  switch (variant) {
-    case "numbered":
-      if (status === "completed") {
-        return <Check className={iconSize} />
-      }
-      if (status === "error") {
-        return <X className={iconSize} />
-      }
-      return <span>{index + 1}</span>
-
-    case "icon":
-      if (step.icon) {
-        return (
-          <span className={cn("flex items-center justify-center", `[&>svg]:${iconSize}`)}>
-            {step.icon}
-          </span>
-        )
-      }
-      // Fallback to checkmark for completed, number otherwise
-      if (status === "completed") {
-        return <Check className={iconSize} />
-      }
-      return <span>{index + 1}</span>
-
-    case "default":
-    default:
-      // Default shows checkmark for completed, nothing otherwise
-      if (status === "completed") {
-        return <Check className={iconSize} />
-      }
-      if (status === "error") {
-        return <X className={iconSize} />
-      }
-      return null
-  }
-}
-
-/**
- * Single step item component
- */
-function StepItem({
-  animated = true,
-  index,
-  isLast = false,
-  orientation = "horizontal",
-  showConnector = true,
-  showDescription = false,
-  showLabel = true,
-  size = "md",
-  status,
-  step,
-  variant = "default",
-}: StepItemProps) {
-  const isHorizontal = orientation === "horizontal"
-  const isDot = variant === "dot"
-  const isBar = variant === "bar"
-
-  // Get the connector status (next step's status affects connector appearance)
-  const connectorStatus = status === "completed" ? "completed" : "upcoming"
-
-  return (
-    <div
-      aria-current={status === "current" ? "step" : undefined}
-      aria-label={`${step.label}${status === "completed" ? " - Completed" : status === "current" ? " - Current" : status === "error" ? " - Error" : ""}`}
-      className={cn(stepItemVariants({ orientation, size }))}
-      data-slot="progress-step"
-      data-status={status}
-      role="listitem"
-    >
-      {/* Circle/Marker wrapper for horizontal orientation */}
-      {isHorizontal && !isBar && (
-        <div className="relative flex items-center justify-center">
-          {/* Circle or Dot */}
-          {isDot ? (
-            <div
-              className={stepDotVariants({ animated, size, status })}
-              data-slot="progress-step-dot"
-            />
-          ) : (
-            <div
-              className={stepCircleVariants({ animated, size, status, variant })}
-              data-slot="progress-step-circle"
-            >
-              <StepMarkerContent
-                index={index}
-                size={size}
-                status={status}
-                step={step}
-                variant={variant}
-              />
-            </div>
-          )}
-
-          {/* Horizontal Connector */}
-          {showConnector && !isLast && (
-            <div
-              className={stepConnectorHorizontalVariants({
-                size,
-                status: connectorStatus,
-                variant,
-              })}
-              aria-hidden="true"
-              data-slot="progress-step-connector"
-            />
-          )}
-        </div>
-      )}
-
-      {/* Vertical layout marker */}
-      {!isHorizontal && !isBar && (
-        <div className="relative flex flex-col items-center">
-          {/* Circle or Dot */}
-          {isDot ? (
-            <div
-              className={stepDotVariants({ animated, size, status })}
-              data-slot="progress-step-dot"
-            />
-          ) : (
-            <div
-              className={stepCircleVariants({ animated, size, status, variant })}
-              data-slot="progress-step-circle"
-            >
-              <StepMarkerContent
-                index={index}
-                size={size}
-                status={status}
-                step={step}
-                variant={variant}
-              />
-            </div>
-          )}
-
-          {/* Vertical Connector */}
-          {showConnector && !isLast && (
-            <div
-              className={cn(
-                stepConnectorVerticalVariants({
-                  size,
-                  status: connectorStatus,
-                  variant,
-                }),
-                "min-h-8"
-              )}
-              aria-hidden="true"
-              data-slot="progress-step-connector"
-            />
-          )}
-        </div>
-      )}
-
-      {/* Bar variant segment */}
-      {isBar && (
-        <div
-          className={stepBarSegmentVariants({ status })}
-          data-slot="progress-step-bar"
-        />
-      )}
-
-      {/* Labels and Description */}
-      {(showLabel || showDescription) && !isBar && (
-        <div
-          className={cn(
-            "flex flex-col",
-            isHorizontal ? "mt-2 items-center text-center" : "min-w-0 flex-1"
-          )}
-          data-slot="progress-step-content"
-        >
-          {showLabel && (
-            <span
-              className={stepLabelVariants({ size, status })}
-              data-slot="progress-step-label"
-            >
-              {step.label}
-            </span>
-          )}
-          {showDescription && step.description && (
-            <span
-              className={stepDescriptionVariants({ size })}
-              data-slot="progress-step-description"
-            >
-              {step.description}
-            </span>
-          )}
-          {showDescription && step.timestamp && (
-            <time
-              className={cn(stepDescriptionVariants({ size }), "mt-0.5")}
-              data-slot="progress-step-timestamp"
-              dateTime={step.timestamp.toISOString()}
-            >
-              {formatTimestamp(step.timestamp)}
-            </time>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-/**
- * ProgressSteps component displays a sequence of steps in a process.
- *
- * @example
- * ```tsx
- * const steps = [
- *   { id: "1", label: "Order Received" },
- *   { id: "2", label: "In Preparation" },
- *   { id: "3", label: "Shipped" },
- *   { id: "4", label: "Delivered" },
- * ]
- *
- * <ProgressSteps steps={steps} currentStep={1} />
- * ```
- */
-function ProgressSteps({
-  animated = true,
-  className,
-  currentStep = 0,
-  orientation = "horizontal",
-  showConnectors = true,
-  showDescriptions = false,
-  showLabels = true,
-  size = "md",
-  steps,
-  variant = "default",
-  ...props
-}: ProgressStepsProps) {
-  const isBar = variant === "bar"
-
-  // Compute gap based on size and orientation
-  const gapClass = orientation === "horizontal"
-    ? size === "sm"
-      ? "gap-2"
-      : size === "lg"
-        ? "gap-4"
-        : "gap-3"
-    : size === "sm"
-      ? "gap-4"
-      : size === "lg"
-        ? "gap-8"
-        : "gap-6"
-
-  return (
-    <div
-      className={cn(
-        progressStepsVariants({ orientation, size, variant }),
-        isBar && "gap-1",
-        !isBar && gapClass,
-        className
-      )}
-      aria-label="Progress Steps"
-      data-slot="progress-steps"
-      data-variant={variant}
-      role="list"
-      {...props}
-    >
-      {steps.map((step, index) => {
-        const status = computeStepStatus(step, index, currentStep)
-
-        return (
-          <StepItem
-            key={step.id}
-            animated={animated}
-            index={index}
-            isLast={index === steps.length - 1}
-            orientation={orientation}
-            showConnector={showConnectors}
-            showDescription={showDescriptions}
-            showLabel={showLabels}
-            size={size}
-            status={status}
-            step={step}
-            variant={variant}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-export { ProgressSteps }
-export type { ProgressStepsProps, Step }