@ayasofyazilim/ui 0.0.0

package/src/custom/document-scanner/hooks/use-document-capture.ts

@@ -0,0 +1,81 @@
+import { useCallback } from "react";
+import { scanDocument } from "../lib";
+import {
+  DocumentCorners,
+  DocumentScannerCallbacks,
+  DetectionSettings,
+} from "../types";
+
+export interface UseDocumentCaptureProps {
+  videoDimensions: { width: number; height: number };
+  callbacks: DocumentScannerCallbacks;
+  customDetectionAlgorithm?: (
+    image: string,
+    dimensions: { width: number; height: number }
+  ) => Promise<DocumentCorners | null>;
+  detectionSettings: DetectionSettings;
+  setCapturedImage: (image: string | null) => void;
+  setDetectedCorners: (corners: DocumentCorners | undefined) => void;
+  handleError: (error: string) => void;
+}
+
+export function useDocumentCapture({
+  videoDimensions,
+  callbacks,
+  customDetectionAlgorithm,
+  detectionSettings,
+  setCapturedImage,
+  setDetectedCorners,
+  handleError,
+}: UseDocumentCaptureProps) {
+  return useCallback(
+    (capturedImageBase64: string | null) => {
+      if (!capturedImageBase64) return;
+
+      setCapturedImage(capturedImageBase64);
+      callbacks.onImageCapture?.(capturedImageBase64);
+      callbacks.onScanAttempt?.();
+
+      // Use custom detection algorithm if provided
+      if (customDetectionAlgorithm) {
+        customDetectionAlgorithm(capturedImageBase64, videoDimensions)
+          .then((corners) => {
+            if (corners) {
+              setDetectedCorners(corners);
+              callbacks.onStatusChange?.("detected");
+              callbacks.onDocumentDetected?.(corners, capturedImageBase64);
+            } else {
+              handleError("Document not detected by custom algorithm");
+            }
+          })
+          .catch((error) => {
+            const errorMessage = error?.message || "Custom detection failed";
+            handleError(errorMessage);
+          });
+      } else {
+        scanDocument(
+          capturedImageBase64,
+          videoDimensions,
+          (corners) => {
+            setDetectedCorners(corners);
+            callbacks.onStatusChange?.("detected");
+            callbacks.onDocumentDetected?.(corners, capturedImageBase64);
+          },
+          (error) => {
+            handleError(error);
+          },
+          detectionSettings
+        );
+      }
+    },
+    [
+      videoDimensions,
+      callbacks,
+      customDetectionAlgorithm,
+      detectionSettings,
+      setCapturedImage,
+      setDetectedCorners,
+      handleError,
+    ]
+  );
+}

package/src/custom/document-scanner/hooks/use-document-scanner.ts

@@ -0,0 +1,80 @@
+import { useCallback, useState } from "react";
+import { DocumentCorners, DocumentScannerCallbacks } from "../types";
+import { DEFAULT_VIDEO_DIMENSIONS } from "../consts";
+
+export interface UseDocumentScannerReturn {
+  videoDimensions: { width: number; height: number };
+  detectedCorners: DocumentCorners | undefined;
+  capturedImage: string | null;
+  handleVideoReady: (dimensions: { width: number; height: number }) => void;
+  handleCornersChange: (newCorners: DocumentCorners) => void;
+  handleError: (error: string) => void;
+  handleImageCrop: (croppedImageBase64: string) => void;
+  handleRetry: () => void;
+  setCapturedImage: (image: string | null) => void;
+  setDetectedCorners: (corners: DocumentCorners | undefined) => void;
+}
+
+export function useDocumentScanner(
+  callbacks: DocumentScannerCallbacks
+): UseDocumentScannerReturn {
+  const [videoDimensions, setVideoDimensions] = useState(
+    DEFAULT_VIDEO_DIMENSIONS
+  );
+  const [detectedCorners, setDetectedCorners] = useState<
+    DocumentCorners | undefined
+  >();
+  const [capturedImage, setCapturedImage] = useState<string | null>(null);
+
+  const handleVideoReady = useCallback(
+    (dimensions: { width: number; height: number }) => {
+      setVideoDimensions(dimensions);
+      callbacks.onStatusChange?.("scanning");
+      callbacks.onCameraReady?.(dimensions);
+    },
+    [callbacks]
+  );
+
+  const handleCornersChange = useCallback(
+    (newCorners: DocumentCorners) => {
+      setDetectedCorners(newCorners);
+      callbacks.onCornersChanged?.(newCorners);
+    },
+    [callbacks]
+  );
+
+  const handleError = useCallback(
+    (error: string) => {
+      callbacks.onStatusChange?.("error");
+      callbacks.onError?.(error);
+    },
+    [callbacks]
+  );
+
+  const handleImageCrop = useCallback(
+    (croppedImageBase64: string) => {
+      callbacks.onStatusChange?.("cropped");
+      callbacks.onDocumentCropped?.(croppedImageBase64);
+    },
+    [callbacks]
+  );
+
+  const handleRetry = useCallback(() => {
+    setDetectedCorners(undefined);
+    setCapturedImage(null);
+    callbacks.onStatusChange?.("scanning");
+  }, [callbacks]);
+
+  return {
+    videoDimensions,
+    detectedCorners,
+    capturedImage,
+    handleVideoReady,
+    handleCornersChange,
+    handleError,
+    handleImageCrop,
+    handleRetry,
+    setCapturedImage,
+    setDetectedCorners,
+  };
+}

package/src/custom/document-scanner/hooks/use-perspective-crop.ts

@@ -0,0 +1,38 @@
+import { useCallback } from "react";
+import { perspectiveCorrection } from "../utils/perspective-correction";
+import { DocumentCorners, Dimensions } from "../types";
+
+export interface UsePerspectiveCropProps {
+  videoDimensions: Dimensions;
+  imageQuality: number;
+  handleImageCrop: (croppedImageBase64: string) => void;
+  handleError: (error: string) => void;
+}
+
+export function usePerspectiveCrop({
+  videoDimensions,
+  imageQuality,
+  handleImageCrop,
+  handleError,
+}: UsePerspectiveCropProps) {
+  return useCallback(
+    async (capturedImage: string, detectedCorners: DocumentCorners) => {
+      if (!capturedImage || !detectedCorners) return;
+
+      try {
+        const croppedImage = await perspectiveCorrection(
+          capturedImage,
+          detectedCorners,
+          videoDimensions,
+          { imageQuality }
+        );
+        handleImageCrop(croppedImage);
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error ? error.message : "Cropping failed";
+        handleError(errorMessage);
+      }
+    },
+    [videoDimensions, imageQuality, handleImageCrop, handleError]
+  );
+}

package/src/custom/document-scanner/index.tsx

@@ -0,0 +1,255 @@
+import { useCallback, useMemo, useState } from "react";
+import { Loader } from "lucide-react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Webcam } from "../webcam";
+import {
+  DEFAULT_CAPTURE_INTERVAL,
+  DEFAULT_IMAGE_QUALITY,
+  DEFAULT_MAX_DOCUMENT_SIZE,
+  DEFAULT_MIN_DOCUMENT_SIZE,
+} from "./consts";
+import { CornerAdjustment } from "./corner-adjustment";
+import { useDocumentCapture } from "./hooks/use-document-capture";
+import { useDocumentScanner } from "./hooks/use-document-scanner";
+import { usePerspectiveCrop } from "./hooks/use-perspective-crop";
+import { DocumentScannerProps, ScannerStatus } from "./types";
+import { Skeleton } from "@repo/ayasofyazilim-ui/components/skeleton";
+
+export function DocumentScanner({
+  // Core callbacks
+  onDocumentCropped,
+  onDocumentDetected,
+  onCornersChanged,
+  onError,
+  onStatusChange,
+  onCameraReady,
+  onScanAttempt,
+  onImageCapture,
+
+  // Basic configuration
+  className = "",
+  captureInterval = DEFAULT_CAPTURE_INTERVAL,
+
+  // Feature toggles
+  allowCrop = true,
+  allowRetry = true,
+  allowCornerAdjustment = true,
+  allowCameraSwitch = true,
+  showWebcamControls = false,
+
+  // UI Text customization
+  cropButtonText = "Crop",
+  retryButtonText = "Scan Again",
+
+  // Visual styling
+  cornerColor = "bg-white/80",
+  cornerTouchAreaSize = 20,
+
+  // Detection settings
+  minDocumentSize = DEFAULT_MIN_DOCUMENT_SIZE,
+  maxDocumentSize = DEFAULT_MAX_DOCUMENT_SIZE,
+  detectionConfidence = 0.8,
+
+  // Image processing
+  imageQuality = DEFAULT_IMAGE_QUALITY,
+
+  // Magnifier settings
+  showMagnifier = true,
+  magnifierSize = 60,
+  zoomLevel = 2,
+
+  // Advanced settings
+  customDetectionAlgorithm,
+
+  // Custom components
+  customControls,
+  customOverlay,
+
+  // Webcam interface
+  interfaceLocation = "absolute",
+  showBorder = true,
+}: DocumentScannerProps) {
+  const [webCamKey, setWebCamKey] = useState(() => Date.now().toString());
+  const [status, setStatus] = useState<ScannerStatus>("scanning");
+
+  // Combine callbacks for hooks
+  const callbacks = useMemo(
+    () => ({
+      onDocumentCropped,
+      onDocumentDetected,
+      onCornersChanged,
+      onError,
+      onStatusChange: (newStatus: ScannerStatus) => {
+        setStatus(newStatus);
+        onStatusChange?.(newStatus);
+      },
+      onCameraReady,
+      onScanAttempt,
+      onImageCapture,
+    }),
+    [
+      onDocumentCropped,
+      onDocumentDetected,
+      onCornersChanged,
+      onError,
+      onStatusChange,
+      onCameraReady,
+      onScanAttempt,
+      onImageCapture,
+    ]
+  );
+
+  // Detection settings
+  const detectionSettings = useMemo(
+    () => ({
+      minDocumentSize,
+      maxDocumentSize,
+      detectionConfidence,
+    }),
+    [minDocumentSize, maxDocumentSize, detectionConfidence]
+  );
+
+  // Main document scanner state
+  const {
+    videoDimensions,
+    detectedCorners,
+    capturedImage,
+    handleVideoReady,
+    handleCornersChange,
+    handleError,
+    handleImageCrop,
+    handleRetry: originalHandleRetry,
+    setCapturedImage,
+    setDetectedCorners,
+  } = useDocumentScanner(callbacks);
+
+  // Enhanced retry handler that resets webcam
+  const handleRetry = useCallback(() => {
+    originalHandleRetry();
+    setWebCamKey(Date.now().toString());
+  }, [originalHandleRetry]);
+
+  // Document capture logic
+  const handleCapture = useDocumentCapture({
+    videoDimensions,
+    callbacks,
+    customDetectionAlgorithm,
+    detectionSettings,
+    setCapturedImage,
+    setDetectedCorners,
+    handleError,
+  });
+
+  // Perspective cropping logic
+  const handleCrop = usePerspectiveCrop({
+    videoDimensions,
+    imageQuality,
+    handleImageCrop,
+    handleError,
+  });
+
+  // Webcam configuration
+  const webcamCallbacks = useMemo(
+    () => ({
+      onWebcamReady: handleVideoReady,
+      onAutoPhotoCaptured: handleCapture,
+    }),
+    [handleVideoReady, handleCapture]
+  );
+
+  const webcamClassNames = useMemo(
+    () => ({
+      placeholder: "block",
+    }),
+    []
+  );
+
+  const webcamAutoCapture = useMemo(
+    () => ({
+      captureInterval,
+      hasInterface: showWebcamControls,
+      startOnReady: true,
+      quality: imageQuality,
+      stopOnCapture: true,
+    }),
+    [captureInterval, imageQuality, showWebcamControls]
+  );
+
+  const webcamPlaceholder = useMemo(() => {
+    if (status === "scanning") {
+      return (
+        <Skeleton className="w-full h-full bg-white/50 flex items-center justify-center">
+          <Loader className="size-4 animate-spin" />
+        </Skeleton>
+      );
+    }
+    if (detectedCorners && capturedImage && allowCornerAdjustment) {
+      return (
+        <CornerAdjustment
+          capturedImage={capturedImage}
+          detectedCorners={detectedCorners}
+          videoDimensions={videoDimensions}
+          onCornersChange={handleCornersChange}
+          onCrop={() => handleCrop(capturedImage, detectedCorners)}
+          onRetry={handleRetry}
+          cornerColor={cornerColor}
+          cornerTouchAreaSize={cornerTouchAreaSize}
+          allowCrop={allowCrop}
+          allowRetry={allowRetry}
+          cropButtonText={cropButtonText}
+          retryButtonText={retryButtonText}
+          showMagnifier={showMagnifier}
+          magnifierSize={magnifierSize}
+          zoomLevel={zoomLevel}
+        />
+      );
+    }
+
+    return undefined;
+  }, [
+    status,
+    detectedCorners,
+    allowCornerAdjustment,
+    videoDimensions,
+    capturedImage,
+    cornerTouchAreaSize,
+    cornerColor,
+    handleCornersChange,
+    handleCrop,
+    handleRetry,
+    allowCrop,
+    allowRetry,
+    cropButtonText,
+    retryButtonText,
+    showMagnifier,
+    magnifierSize,
+    zoomLevel,
+  ]);
+
+  const isInCornerAdjustmentMode =
+    (detectedCorners && capturedImage && allowCornerAdjustment) || false;
+
+  return (
+    <div
+      className={cn(
+        "container relative mx-auto max-w-3xl overflow-hidden p-4",
+        className
+      )}
+    >
+      {customOverlay}
+      <Webcam
+        key={webCamKey}
+        classNames={webcamClassNames}
+        callbacks={webcamCallbacks}
+        defaultCamera="back"
+        autoCapture={webcamAutoCapture}
+        allowCameraSwitch={allowCameraSwitch}
+        placeholder={webcamPlaceholder}
+        interfaceLocation={interfaceLocation}
+        showBorder={showBorder}
+        forceHideInterface={isInCornerAdjustmentMode}
+      />
+      {customControls && <div className="mt-4">{customControls}</div>}
+    </div>
+  );
+}