@etus/ui 0.1.1 → 0.1.3

package/src/components/workflow/ApprovalFlow/ApprovalFlow.tsx

@@ -1,522 +0,0 @@
-import type {
-  ApprovalFlowProps,
-  ApprovalFlowStepProps,
-  ApprovalStep,
-  ApprovalStepStatus,
-  Approver,
-} from "./ApprovalFlow.types"
-import type { KeyboardEvent, ReactNode } from "react"
-
-import {
-  Check,
-  ChevronRight,
-  Clock,
-  Forward,
-  TrendingUp,
-  User,
-  X,
-} from "lucide-react"
-import { useId, useState } from "react"
-
-import { cn } from "../../../lib/utils"
-import { Avatar, AvatarFallback, AvatarImage } from "../../primitives/Avatar"
-import { Button } from "../../primitives/Button"
-import {
-  approvalFlowActionsVariants,
-  approvalFlowConnectorVariants,
-  approvalFlowMarkerVariants,
-  approvalFlowStepCardVariants,
-  approvalFlowStepVariants,
-  approvalFlowVariants,
-} from "./ApprovalFlow.variants"
-
-/**
- * Get initials from a name
- */
-function getInitials(name: string): string {
-  return name
-    .split(" ")
-    .map((part) => part[0])
-    .join("")
-    .toUpperCase()
-    .slice(0, 2)
-}
-
-/**
- * Get icon for status
- */
-function getStatusIcon(status: ApprovalStepStatus): ReactNode {
-  switch (status) {
-    case "approved":
-      return <Check className="h-4 w-4" />
-    case "rejected":
-      return <X className="h-4 w-4" />
-    case "in_progress":
-    case "awaiting":
-      return <Clock className="h-4 w-4" />
-    case "escalated":
-      return <TrendingUp className="h-4 w-4" />
-    case "skipped":
-      return <Forward className="h-4 w-4" />
-    default:
-      return null
-  }
-}
-
-/**
- * Get accessible status label
- */
-function getStatusLabel(status: ApprovalStepStatus): string {
-  const labels: Record<ApprovalStepStatus, string> = {
-    pending: "Pending",
-    in_progress: "In progress",
-    awaiting: "Awaiting approval",
-    approved: "Approved",
-    rejected: "Rejected",
-    escalated: "Escalated",
-    skipped: "Skipped",
-  }
-  return labels[status]
-}
-
-/**
- * ApprovalFlowMarker component renders the status indicator
- */
-function ApprovalFlowMarker({
-  index,
-  status = "pending",
-}: {
-  index: number
-  status?: ApprovalStepStatus
-}) {
-  const icon = getStatusIcon(status)
-
-  return (
-    <div
-      aria-hidden="true"
-      className={approvalFlowMarkerVariants({ status })}
-      data-slot="approval-flow-marker"
-      data-status={status}
-    >
-      {icon ?? (
-        <span className="font-medium">{index + 1}</span>
-      )}
-    </div>
-  )
-}
-
-/**
- * ApprovalFlowConnector component renders the line between steps
- */
-function ApprovalFlowConnector({
-  layout = "horizontal",
-  status = "pending",
-  isConditional = false,
-}: {
-  isConditional?: boolean
-  layout?: "compact" | "horizontal" | "vertical"
-  status?: ApprovalStepStatus
-}) {
-  return (
-    <div
-      className={approvalFlowConnectorVariants({
-        layout,
-        status,
-        style: isConditional ? "dashed" : "solid",
-      })}
-      aria-hidden="true"
-      data-slot="approval-flow-connector"
-    />
-  )
-}
-
-/**
- * ApproverAvatar component renders an approver's avatar
- */
-function ApproverAvatar({ approver }: { approver: Approver }) {
-  return (
-    <div className="flex items-center gap-2" title={`${approver.name} (${approver.role})`}>
-      <Avatar size="sm">
-        {approver.avatar ? (
-          <AvatarImage alt={approver.name} src={approver.avatar} />
-        ) : null}
-        <AvatarFallback>{getInitials(approver.name)}</AvatarFallback>
-      </Avatar>
-    </div>
-  )
-}
-
-/**
- * ApprovalFlowStepContent renders the content of a step
- */
-function ApprovalFlowStepContent({
-  step,
-  layout = "horizontal",
-}: {
-  layout?: "compact" | "horizontal" | "vertical"
-  step: ApprovalStep
-}) {
-  const showApproversCount = step.approvers.length > 3
-  const visibleApprovers = showApproversCount
-    ? step.approvers.slice(0, 3)
-    : step.approvers
-
-  return (
-    <div
-      className={approvalFlowStepCardVariants({ status: step.status, layout })}
-      data-slot="approval-flow-step-card"
-    >
-      <div className="space-y-2">
-        <div data-slot="approval-flow-step-title">
-          <span className="text-sm font-medium text-foreground">
-            {step.title}
-          </span>
-        </div>
-
-        {step.description && (
-          <div data-slot="approval-flow-step-description">
-            <span className="text-xs text-muted-foreground">
-              {step.description}
-            </span>
-          </div>
-        )}
-
-        {step.approvers.length > 0 && (
-          <div
-            className="flex items-center gap-1"
-            data-slot="approval-flow-step-approvers"
-          >
-            <div className="flex -space-x-2">
-              {visibleApprovers.map((approver) => (
-                <ApproverAvatar key={approver.id} approver={approver} />
-              ))}
-            </div>
-            {showApproversCount && (
-              <span className="ml-2 text-xs text-muted-foreground">
-                +{step.approvers.length - 3} more
-              </span>
-            )}
-          </div>
-        )}
-
-        {step.requiredApprovals && step.requiredApprovals > 1 && (
-          <div
-            className="text-xs text-muted-foreground"
-            data-slot="approval-flow-step-required"
-          >
-            Requires {step.requiredApprovals} of {step.approvers.length} approvals
-          </div>
-        )}
-
-        {step.deadline && (
-          <div
-            className="flex items-center gap-1 text-xs text-muted-foreground"
-            data-slot="approval-flow-step-deadline"
-          >
-            <Clock className="h-3 w-3" />
-            <span>Due: {step.deadline.toLocaleDateString()}</span>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-/**
- * ApprovalFlowStep component renders a single approval step
- */
-function ApprovalFlowStep({
-  step,
-  index,
-  isCurrent,
-  isLast,
-  showConnector = true,
-  layout = "horizontal",
-  readOnly = false,
-  allowDelegation = true,
-  allowEscalation = true,
-  onApprove,
-  onReject,
-  onDelegate,
-  onEscalate,
-  className,
-  ...props
-}: ApprovalFlowStepProps) {
-  const stepId = useId()
-  const statusLabel = getStatusLabel(step.status)
-  // Normalize null to undefined for layout
-  const normalizedLayout = layout ?? "horizontal"
-  const canAct =
-    isCurrent &&
-    !readOnly &&
-    (step.status === "in_progress" || step.status === "awaiting")
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    const target = event.currentTarget
-    const parent = target.parentElement
-    if (!parent) return
-
-    const siblings = [
-      ...parent.querySelectorAll('[data-slot="approval-flow-step"]'),
-    ] as HTMLDivElement[]
-    const currentIndex = siblings.indexOf(target)
-
-    let nextIndex = -1
-
-    switch (event.key) {
-      case "ArrowDown":
-      case "ArrowRight":
-        event.preventDefault()
-        nextIndex = Math.min(currentIndex + 1, siblings.length - 1)
-        break
-      case "ArrowUp":
-      case "ArrowLeft":
-        event.preventDefault()
-        nextIndex = Math.max(currentIndex - 1, 0)
-        break
-      default:
-        return
-    }
-
-    const nextElement = siblings[nextIndex]
-    if (nextIndex !== -1 && nextElement) {
-      nextElement.focus()
-    }
-  }
-
-  return (
-    <div
-      className={cn(
-        approvalFlowStepVariants({ layout: normalizedLayout, status: step.status }),
-        className
-      )}
-      aria-current={isCurrent ? "step" : undefined}
-      aria-describedby={`${stepId}-description`}
-      aria-label={`${step.title} - ${statusLabel}`}
-      data-active={isCurrent ? "" : undefined}
-      data-slot="approval-flow-step"
-      data-status={step.status}
-      role="listitem"
-      tabIndex={0}
-      onKeyDown={handleKeyDown}
-      {...props}
-    >
-      {/* Marker and Connector for vertical/compact layouts */}
-      {(normalizedLayout === "vertical" || normalizedLayout === "compact") && (
-        <div className="relative flex flex-col items-center">
-          <ApprovalFlowMarker index={index} status={step.status} />
-          {showConnector && !isLast && (
-            <ApprovalFlowConnector layout={normalizedLayout} status={step.status} />
-          )}
-        </div>
-      )}
-
-      {/* Main content wrapper */}
-      <div className="flex flex-1 flex-col gap-2">
-        {/* Marker for horizontal layout */}
-        {normalizedLayout === "horizontal" && (
-          <div className="flex items-center justify-center">
-            <ApprovalFlowMarker index={index} status={step.status} />
-          </div>
-        )}
-
-        {/* Step content */}
-        <ApprovalFlowStepContent layout={normalizedLayout} step={step} />
-
-        {/* Actions */}
-        <div
-          className={approvalFlowActionsVariants({
-            layout: normalizedLayout,
-            visible: canAct,
-          })}
-          data-slot="approval-flow-step-actions"
-          id={`${stepId}-description`}
-        >
-          {canAct && (
-            <>
-              <Button
-                aria-label={`Approve ${step.title}`}
-                size="sm"
-                variant="default"
-                onClick={onApprove}
-              >
-                <Check className="h-4 w-4" />
-                Approve
-              </Button>
-              <Button
-                aria-label={`Reject ${step.title}`}
-                size="sm"
-                variant="destructive"
-                onClick={onReject}
-              >
-                <X className="h-4 w-4" />
-                Reject
-              </Button>
-              {allowDelegation && (
-                <Button
-                  aria-label={`Delegate ${step.title}`}
-                  size="sm"
-                  variant="outline"
-                  onClick={onDelegate}
-                >
-                  <User className="h-4 w-4" />
-                  Delegate
-                </Button>
-              )}
-              {allowEscalation && (
-                <Button
-                  aria-label={`Escalate ${step.title}`}
-                  size="sm"
-                  variant="outline"
-                  onClick={onEscalate}
-                >
-                  <TrendingUp className="h-4 w-4" />
-                  Escalate
-                </Button>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Connector for horizontal layout */}
-      {normalizedLayout === "horizontal" && showConnector && !isLast && (
-        <div className="flex items-center self-start mt-5">
-          <ApprovalFlowConnector layout={normalizedLayout} status={step.status} />
-          <ChevronRight className="h-4 w-4 text-muted-foreground shrink-0" />
-        </div>
-      )}
-    </div>
-  )
-}
-
-/**
- * ApprovalFlow component displays and manages an approval workflow.
- *
- * @example
- * ```tsx
- * const steps = [
- *   { id: "1", title: "Request", status: "approved", approvers: [] },
- *   { id: "2", title: "Manager", status: "in_progress", approvers: [{ id: "1", name: "John", email: "john@example.com", role: "Manager" }] },
- *   { id: "3", title: "Director", status: "pending", approvers: [] },
- * ]
- *
- * <ApprovalFlow
- *   steps={steps}
- *   currentStep={1}
- *   onApprove={({ stepId }) => console.log("Approved:", stepId)}
- *   onReject={({ stepId, reason }) => console.log("Rejected:", stepId, reason)}
- * />
- * ```
- */
-function ApprovalFlow({
-  "aria-label": ariaLabel = "Approval workflow",
-  className,
-  steps,
-  currentStep = 0,
-  variant = "linear",
-  layout = "horizontal",
-  allowDelegation = true,
-  allowEscalation = true,
-  showTimeline: _showTimeline = true,
-  showComments: _showComments = true,
-  readOnly = false,
-  history: _history,
-  onApprove,
-  onReject,
-  onDelegate,
-  onEscalate,
-  onStepChange: _onStepChange,
-  onComplete: _onComplete,
-  ...props
-}: ApprovalFlowProps) {
-  const [_activeStepIndex, setActiveStepIndex] = useState(currentStep)
-
-  // Determine effective layout based on screen size
-  // On mobile, force vertical layout
-  const effectiveLayout = layout
-
-  const handleApprove = (stepId: string) => {
-    onApprove?.({ stepId })
-  }
-
-  const handleReject = (stepId: string) => {
-    // In a real implementation, this would open a dialog for the reason
-    onReject?.({ stepId, reason: "" })
-  }
-
-  const handleDelegate = (stepId: string) => {
-    // In a real implementation, this would open a dialog to select delegate
-    onDelegate?.({
-      stepId,
-      delegateTo: { id: "", name: "", email: "", role: "" },
-    })
-  }
-
-  const handleEscalate = (stepId: string) => {
-    // In a real implementation, this would open a dialog to select escalation target
-    onEscalate?.({
-      stepId,
-      escalateTo: { id: "", name: "", email: "", role: "" },
-    })
-  }
-
-  // Handle keyboard navigation between steps
-  const handleStepFocus = (index: number) => {
-    setActiveStepIndex(index)
-  }
-
-  const hasSteps = steps.length > 0
-
-  return (
-    <div
-      aria-label={ariaLabel}
-      className={cn(approvalFlowVariants({ variant, layout: effectiveLayout }), className)}
-      data-slot="approval-flow"
-      data-variant={variant}
-      role="list"
-      {...props}
-    >
-      {hasSteps
-        ? steps.map((step, index) => (
-            <ApprovalFlowStep
-              key={step.id}
-              allowDelegation={allowDelegation}
-              allowEscalation={allowEscalation}
-              index={index}
-              isCurrent={index === currentStep}
-              isLast={index === steps.length - 1}
-              layout={effectiveLayout}
-              readOnly={readOnly}
-              showConnector={variant !== "conditional"}
-              step={step}
-              onApprove={() => { handleApprove(step.id); }}
-              onDelegate={() => { handleDelegate(step.id); }}
-              onEscalate={() => { handleEscalate(step.id); }}
-              onFocus={() => { handleStepFocus(index); }}
-              onReject={() => { handleReject(step.id); }}
-            />
-          ))
-        : null}
-    </div>
-  )
-}
-
-export {
-  ApprovalFlow,
-  approvalFlowActionsVariants,
-  ApprovalFlowConnector,
-  approvalFlowConnectorVariants,
-  ApprovalFlowMarker,
-  approvalFlowMarkerVariants,
-  ApprovalFlowStep,
-  approvalFlowStepCardVariants,
-  approvalFlowStepVariants,
-  approvalFlowVariants,
-}
-export type {
-  ApprovalFlowProps,
-  ApprovalFlowStepProps,
-  ApprovalStep,
-  ApprovalStepStatus,
-}