@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/waka-biometric-prompt/index.tsx

@@ -0,0 +1,765 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import {
+  Fingerprint,
+  ScanFace,
+  Check,
+  X,
+  KeyRound,
+  AlertCircle,
+  RefreshCw,
+  Loader2,
+} from "lucide-react"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type BiometricType = "fingerprint" | "face" | "iris" | "voice"
+
+export type BiometricState = "idle" | "scanning" | "success" | "error"
+
+export interface BiometricPromptConfig {
+  /** Type of biometric authentication */
+  type: BiometricType
+  /** Custom label for the biometric type */
+  label?: string
+  /** Custom icon component */
+  icon?: React.ReactNode
+}
+
+export interface WakaBiometricPromptProps {
+  /** Available biometric types */
+  biometricTypes?: BiometricPromptConfig[]
+  /** Currently selected biometric type */
+  selectedType?: BiometricType
+  /** Callback when biometric type changes */
+  onTypeChange?: (type: BiometricType) => void
+  /** Title text */
+  title?: string
+  /** Description text */
+  description?: string
+  /** Current authentication state */
+  state?: BiometricState
+  /** Error message when state is "error" */
+  errorMessage?: string
+  /** Callback when authentication is initiated */
+  onAuthenticate?: () => void | Promise<void>
+  /** Callback when retry is clicked */
+  onRetry?: () => void
+  /** Callback when cancel is clicked */
+  onCancel?: () => void
+  /** Callback when fallback to password is clicked */
+  onFallbackToPassword?: () => void
+  /** Show fallback to password option */
+  showPasswordFallback?: boolean
+  /** Show cancel button */
+  showCancel?: boolean
+  /** Custom scanning duration in ms (for demo purposes) */
+  scanningDuration?: number
+  /** Success message */
+  successMessage?: string
+  /** Additional CSS classes */
+  className?: string
+  /** Size variant */
+  size?: "sm" | "md" | "lg"
+  /** Color scheme */
+  colorScheme?: "default" | "primary" | "dark"
+}
+
+export interface UseBiometricPromptOptions {
+  /** Initial biometric type */
+  initialType?: BiometricType
+  /** Simulated scanning duration */
+  scanningDuration?: number
+  /** Simulated success rate (0-1, for demo) */
+  successRate?: number
+  /** Callback on successful authentication */
+  onSuccess?: () => void
+  /** Callback on authentication error */
+  onError?: (error: string) => void
+  /** Actual authentication function */
+  authenticate?: () => Promise<boolean>
+}
+
+export interface UseBiometricPromptReturn {
+  /** Current state */
+  state: BiometricState
+  /** Current biometric type */
+  selectedType: BiometricType
+  /** Error message if any */
+  errorMessage: string | null
+  /** Set biometric type */
+  setSelectedType: (type: BiometricType) => void
+  /** Start authentication */
+  startAuthentication: () => Promise<void>
+  /** Retry authentication */
+  retry: () => void
+  /** Reset to idle state */
+  reset: () => void
+  /** Cancel authentication */
+  cancel: () => void
+}
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+export function useBiometricPrompt(
+  options: UseBiometricPromptOptions = {}
+): UseBiometricPromptReturn {
+  const {
+    initialType = "fingerprint",
+    scanningDuration = 2000,
+    successRate = 0.9,
+    onSuccess,
+    onError,
+    authenticate,
+  } = options
+
+  const [state, setState] = React.useState<BiometricState>("idle")
+  const [selectedType, setSelectedType] = React.useState<BiometricType>(initialType)
+  const [errorMessage, setErrorMessage] = React.useState<string | null>(null)
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
+
+  const clearTimeouts = React.useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+  }, [])
+
+  const reset = React.useCallback(() => {
+    clearTimeouts()
+    setState("idle")
+    setErrorMessage(null)
+  }, [clearTimeouts])
+
+  const cancel = React.useCallback(() => {
+    clearTimeouts()
+    setState("idle")
+    setErrorMessage(null)
+  }, [clearTimeouts])
+
+  const startAuthentication = React.useCallback(async () => {
+    clearTimeouts()
+    setState("scanning")
+    setErrorMessage(null)
+
+    try {
+      if (authenticate) {
+        // Use actual authentication function
+        const success = await authenticate()
+        if (success) {
+          setState("success")
+          onSuccess?.()
+        } else {
+          setState("error")
+          const message = "Authentication failed. Please try again."
+          setErrorMessage(message)
+          onError?.(message)
+        }
+      } else {
+        // Simulated authentication for demo
+        await new Promise<void>((resolve) => {
+          timeoutRef.current = setTimeout(() => {
+            const success = Math.random() < successRate
+            if (success) {
+              setState("success")
+              onSuccess?.()
+            } else {
+              setState("error")
+              const message = "Authentication failed. Please try again."
+              setErrorMessage(message)
+              onError?.(message)
+            }
+            resolve()
+          }, scanningDuration)
+        })
+      }
+    } catch (error) {
+      setState("error")
+      const message = error instanceof Error ? error.message : "An unexpected error occurred."
+      setErrorMessage(message)
+      onError?.(message)
+    }
+  }, [authenticate, clearTimeouts, onError, onSuccess, scanningDuration, successRate])
+
+  const retry = React.useCallback(() => {
+    startAuthentication()
+  }, [startAuthentication])
+
+  React.useEffect(() => {
+    return () => {
+      clearTimeouts()
+    }
+  }, [clearTimeouts])
+
+  return {
+    state,
+    selectedType,
+    errorMessage,
+    setSelectedType,
+    startAuthentication,
+    retry,
+    reset,
+    cancel,
+  }
+}
+
+// ============================================================================
+// Default Configs
+// ============================================================================
+
+const defaultBiometricConfigs: BiometricPromptConfig[] = [
+  { type: "fingerprint", label: "Fingerprint" },
+  { type: "face", label: "Face ID" },
+]
+
+const biometricIcons: Record<BiometricType, React.ReactNode> = {
+  fingerprint: <Fingerprint className="h-full w-full" />,
+  face: <ScanFace className="h-full w-full" />,
+  iris: <ScanFace className="h-full w-full" />,
+  voice: <ScanFace className="h-full w-full" />,
+}
+
+// ============================================================================
+// Size Configs
+// ============================================================================
+
+const sizeConfig = {
+  sm: {
+    container: "p-4 max-w-xs",
+    icon: "h-12 w-12",
+    iconInner: "h-8 w-8",
+    title: "text-base",
+    description: "text-xs",
+    button: "h-8 px-3 text-xs",
+    typeButton: "h-8 w-8",
+  },
+  md: {
+    container: "p-6 max-w-sm",
+    icon: "h-20 w-20",
+    iconInner: "h-12 w-12",
+    title: "text-lg",
+    description: "text-sm",
+    button: "h-10 px-4 text-sm",
+    typeButton: "h-10 w-10",
+  },
+  lg: {
+    container: "p-8 max-w-md",
+    icon: "h-28 w-28",
+    iconInner: "h-16 w-16",
+    title: "text-xl",
+    description: "text-base",
+    button: "h-12 px-6 text-base",
+    typeButton: "h-12 w-12",
+  },
+}
+
+// ============================================================================
+// Color Scheme Configs
+// ============================================================================
+
+const colorSchemeConfig = {
+  default: {
+    background: "bg-background",
+    text: "text-foreground",
+    muted: "text-muted-foreground",
+    primary: "text-primary",
+    success: "text-green-500",
+    error: "text-destructive",
+    iconBg: "bg-muted",
+    iconBgScanning: "bg-primary/10",
+    iconBgSuccess: "bg-green-500/10",
+    iconBgError: "bg-destructive/10",
+    button: "bg-primary text-primary-foreground hover:bg-primary/90",
+    buttonOutline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+    buttonGhost: "hover:bg-accent hover:text-accent-foreground",
+  },
+  primary: {
+    background: "bg-primary",
+    text: "text-primary-foreground",
+    muted: "text-primary-foreground/70",
+    primary: "text-primary-foreground",
+    success: "text-green-300",
+    error: "text-red-300",
+    iconBg: "bg-primary-foreground/10",
+    iconBgScanning: "bg-primary-foreground/20",
+    iconBgSuccess: "bg-green-400/20",
+    iconBgError: "bg-red-400/20",
+    button: "bg-primary-foreground text-primary hover:bg-primary-foreground/90",
+    buttonOutline: "border border-primary-foreground/30 bg-transparent hover:bg-primary-foreground/10",
+    buttonGhost: "hover:bg-primary-foreground/10",
+  },
+  dark: {
+    background: "bg-zinc-900",
+    text: "text-zinc-100",
+    muted: "text-zinc-400",
+    primary: "text-blue-400",
+    success: "text-green-400",
+    error: "text-red-400",
+    iconBg: "bg-zinc-800",
+    iconBgScanning: "bg-blue-500/20",
+    iconBgSuccess: "bg-green-500/20",
+    iconBgError: "bg-red-500/20",
+    button: "bg-blue-500 text-white hover:bg-blue-600",
+    buttonOutline: "border border-zinc-700 bg-transparent hover:bg-zinc-800",
+    buttonGhost: "hover:bg-zinc-800",
+  },
+}
+
+// ============================================================================
+// Scanning Animation Component
+// ============================================================================
+
+interface ScanningAnimationProps {
+  type: BiometricType
+  size: "sm" | "md" | "lg"
+  colorScheme: "default" | "primary" | "dark"
+}
+
+function ScanningAnimation({ type, size, colorScheme }: ScanningAnimationProps) {
+  const colors = colorSchemeConfig[colorScheme]
+  const sizes = sizeConfig[size]
+
+  return (
+    <div className="absolute inset-0 flex items-center justify-center">
+      {/* Pulsing rings */}
+      <div className={cn(
+        "absolute rounded-full animate-ping",
+        colors.iconBgScanning,
+        sizes.icon
+      )} style={{ animationDuration: "1.5s" }} />
+      <div className={cn(
+        "absolute rounded-full animate-ping",
+        colors.iconBgScanning,
+        sizes.icon
+      )} style={{ animationDuration: "1.5s", animationDelay: "0.5s" }} />
+
+      {/* Scanning line for fingerprint */}
+      {type === "fingerprint" && (
+        <div
+          className={cn(
+            "absolute h-0.5 rounded-full animate-scan-line",
+            colorScheme === "default" ? "bg-primary" :
+            colorScheme === "primary" ? "bg-primary-foreground" : "bg-blue-400"
+          )}
+          style={{ width: "70%" }}
+        />
+      )}
+
+      {/* Scanning frame for face */}
+      {type === "face" && (
+        <div className="absolute inset-2 border-2 border-dashed rounded-lg animate-pulse"
+          style={{
+            borderColor: colorScheme === "default" ? "hsl(var(--primary))" :
+                         colorScheme === "primary" ? "hsl(var(--primary-foreground))" : "#60a5fa"
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Success Animation Component
+// ============================================================================
+
+interface SuccessAnimationProps {
+  size: "sm" | "md" | "lg"
+  colorScheme: "default" | "primary" | "dark"
+}
+
+function SuccessAnimation({ size, colorScheme }: SuccessAnimationProps) {
+  const colors = colorSchemeConfig[colorScheme]
+  const sizes = sizeConfig[size]
+
+  return (
+    <div className={cn(
+      "flex items-center justify-center rounded-full animate-success-pop",
+      colors.iconBgSuccess,
+      sizes.icon
+    )}>
+      <Check className={cn(sizes.iconInner, colors.success)} strokeWidth={3} />
+    </div>
+  )
+}
+
+// ============================================================================
+// Error Animation Component
+// ============================================================================
+
+interface ErrorAnimationProps {
+  size: "sm" | "md" | "lg"
+  colorScheme: "default" | "primary" | "dark"
+}
+
+function ErrorAnimation({ size, colorScheme }: ErrorAnimationProps) {
+  const colors = colorSchemeConfig[colorScheme]
+  const sizes = sizeConfig[size]
+
+  return (
+    <div className={cn(
+      "flex items-center justify-center rounded-full animate-error-shake",
+      colors.iconBgError,
+      sizes.icon
+    )}>
+      <AlertCircle className={cn(sizes.iconInner, colors.error)} strokeWidth={2} />
+    </div>
+  )
+}
+
+// ============================================================================
+// Biometric Type Selector
+// ============================================================================
+
+interface BiometricTypeSelectorProps {
+  types: BiometricPromptConfig[]
+  selectedType: BiometricType
+  onTypeChange: (type: BiometricType) => void
+  disabled?: boolean
+  size: "sm" | "md" | "lg"
+  colorScheme: "default" | "primary" | "dark"
+}
+
+function BiometricTypeSelector({
+  types,
+  selectedType,
+  onTypeChange,
+  disabled,
+  size,
+  colorScheme,
+}: BiometricTypeSelectorProps) {
+  const colors = colorSchemeConfig[colorScheme]
+  const sizes = sizeConfig[size]
+
+  if (types.length <= 1) return null
+
+  return (
+    <div className="flex items-center justify-center gap-2 mt-4" role="radiogroup" aria-label="Biometric type selection">
+      {types.map((config) => {
+        const isSelected = config.type === selectedType
+        const icon = config.icon || biometricIcons[config.type]
+
+        return (
+          <button
+            key={config.type}
+            type="button"
+            role="radio"
+            aria-checked={isSelected}
+            aria-label={config.label || config.type}
+            disabled={disabled}
+            onClick={() => onTypeChange(config.type)}
+            className={cn(
+              "flex items-center justify-center rounded-full transition-all",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              sizes.typeButton,
+              isSelected
+                ? cn(colors.button)
+                : cn(colors.buttonGhost, colors.muted),
+              disabled && "opacity-50 cursor-not-allowed"
+            )}
+          >
+            <div className={cn(
+              size === "sm" ? "h-4 w-4" : size === "md" ? "h-5 w-5" : "h-6 w-6"
+            )}>
+              {icon}
+            </div>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export const WakaBiometricPrompt = React.forwardRef<
+  HTMLDivElement,
+  WakaBiometricPromptProps
+>(
+  (
+    {
+      biometricTypes = defaultBiometricConfigs,
+      selectedType: controlledSelectedType,
+      onTypeChange,
+      title = "Use biometrics",
+      description = "Authenticate using your biometric data",
+      state = "idle",
+      errorMessage,
+      onAuthenticate,
+      onRetry,
+      onCancel,
+      onFallbackToPassword,
+      showPasswordFallback = true,
+      showCancel = true,
+      successMessage = "Authentication successful",
+      className,
+      size = "md",
+      colorScheme = "default",
+    },
+    ref
+  ) => {
+    const [internalSelectedType, setInternalSelectedType] = React.useState<BiometricType>(
+      biometricTypes[0]?.type || "fingerprint"
+    )
+
+    const selectedType = controlledSelectedType ?? internalSelectedType
+    const handleTypeChange = onTypeChange ?? setInternalSelectedType
+
+    const colors = colorSchemeConfig[colorScheme]
+    const sizes = sizeConfig[size]
+
+    const currentConfig = biometricTypes.find((c) => c.type === selectedType) || biometricTypes[0]
+    const icon = currentConfig?.icon || biometricIcons[selectedType]
+
+    const isDisabled = state === "scanning" || state === "success"
+
+    // Handle keyboard navigation
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault()
+        if (state === "idle") {
+          onAuthenticate?.()
+        } else if (state === "error") {
+          onRetry?.()
+        }
+      } else if (event.key === "Escape") {
+        event.preventDefault()
+        onCancel?.()
+      }
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex flex-col items-center rounded-2xl shadow-lg",
+          colors.background,
+          sizes.container,
+          className
+        )}
+        role="dialog"
+        aria-labelledby="biometric-title"
+        aria-describedby="biometric-description"
+        onKeyDown={handleKeyDown}
+      >
+        {/* Icon Container */}
+        <div className="relative flex items-center justify-center mb-4">
+          {state === "idle" && (
+            <button
+              type="button"
+              onClick={onAuthenticate}
+              disabled={isDisabled}
+              className={cn(
+                "flex items-center justify-center rounded-full transition-all",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                "hover:scale-105 active:scale-95",
+                colors.iconBg,
+                colors.primary,
+                sizes.icon
+              )}
+              aria-label={`Authenticate with ${currentConfig?.label || selectedType}`}
+            >
+              <div className={sizes.iconInner}>{icon}</div>
+            </button>
+          )}
+
+          {state === "scanning" && (
+            <div className={cn(
+              "relative flex items-center justify-center rounded-full",
+              colors.iconBgScanning,
+              colors.primary,
+              sizes.icon
+            )}>
+              <div className={cn(sizes.iconInner, "animate-pulse")}>{icon}</div>
+              <ScanningAnimation type={selectedType} size={size} colorScheme={colorScheme} />
+            </div>
+          )}
+
+          {state === "success" && (
+            <SuccessAnimation size={size} colorScheme={colorScheme} />
+          )}
+
+          {state === "error" && (
+            <ErrorAnimation size={size} colorScheme={colorScheme} />
+          )}
+        </div>
+
+        {/* Title */}
+        <h2
+          id="biometric-title"
+          className={cn("font-semibold text-center", colors.text, sizes.title)}
+        >
+          {state === "success" ? successMessage : state === "error" ? "Authentication failed" : title}
+        </h2>
+
+        {/* Description */}
+        <p
+          id="biometric-description"
+          className={cn("text-center mt-1", colors.muted, sizes.description)}
+        >
+          {state === "scanning" && `Scanning ${currentConfig?.label || selectedType}...`}
+          {state === "error" && (errorMessage || "Please try again")}
+          {state === "success" && "You can now proceed"}
+          {state === "idle" && description}
+        </p>
+
+        {/* Biometric Type Selector */}
+        {state === "idle" && (
+          <BiometricTypeSelector
+            types={biometricTypes}
+            selectedType={selectedType}
+            onTypeChange={handleTypeChange}
+            disabled={isDisabled}
+            size={size}
+            colorScheme={colorScheme}
+          />
+        )}
+
+        {/* Loading indicator for scanning state */}
+        {state === "scanning" && (
+          <div className={cn("flex items-center gap-2 mt-4", colors.muted)}>
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className={sizes.description}>Processing...</span>
+          </div>
+        )}
+
+        {/* Action Buttons */}
+        <div className="flex flex-col items-center gap-2 mt-6 w-full">
+          {state === "error" && onRetry && (
+            <button
+              type="button"
+              onClick={onRetry}
+              className={cn(
+                "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                colors.button,
+                sizes.button,
+                "w-full"
+              )}
+              aria-label="Retry authentication"
+            >
+              <RefreshCw className="h-4 w-4" />
+              Try again
+            </button>
+          )}
+
+          {state === "idle" && showPasswordFallback && onFallbackToPassword && (
+            <button
+              type="button"
+              onClick={onFallbackToPassword}
+              className={cn(
+                "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                colors.buttonOutline,
+                sizes.button,
+                "w-full"
+              )}
+              aria-label="Use password instead"
+            >
+              <KeyRound className="h-4 w-4" />
+              Use password instead
+            </button>
+          )}
+
+          {(state === "idle" || state === "error") && showCancel && onCancel && (
+            <button
+              type="button"
+              onClick={onCancel}
+              className={cn(
+                "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                colors.buttonGhost,
+                colors.muted,
+                sizes.button
+              )}
+              aria-label="Cancel authentication"
+            >
+              <X className="h-4 w-4" />
+              Cancel
+            </button>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+
+WakaBiometricPrompt.displayName = "WakaBiometricPrompt"
+
+// ============================================================================
+// CSS Animations (injected dynamically)
+// ============================================================================
+
+if (typeof document !== "undefined") {
+  const styleId = "waka-biometric-prompt-styles"
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style")
+    style.id = styleId
+    style.textContent = `
+      @keyframes scan-line {
+        0%, 100% {
+          transform: translateY(-200%);
+          opacity: 0;
+        }
+        10%, 90% {
+          opacity: 1;
+        }
+        50% {
+          transform: translateY(200%);
+        }
+      }
+
+      @keyframes success-pop {
+        0% {
+          transform: scale(0);
+          opacity: 0;
+        }
+        50% {
+          transform: scale(1.2);
+        }
+        100% {
+          transform: scale(1);
+          opacity: 1;
+        }
+      }
+
+      @keyframes error-shake {
+        0%, 100% {
+          transform: translateX(0);
+        }
+        10%, 30%, 50%, 70%, 90% {
+          transform: translateX(-4px);
+        }
+        20%, 40%, 60%, 80% {
+          transform: translateX(4px);
+        }
+      }
+
+      .animate-scan-line {
+        animation: scan-line 2s ease-in-out infinite;
+      }
+
+      .animate-success-pop {
+        animation: success-pop 0.4s ease-out forwards;
+      }
+
+      .animate-error-shake {
+        animation: error-shake 0.5s ease-in-out;
+      }
+    `
+    document.head.appendChild(style)
+  }
+}
+
+// ============================================================================
+// Exports
+// ============================================================================
+
+export default WakaBiometricPrompt