@ayasofyazilim/ui 0.0.0

package/src/custom/date-picker/utils/index.ts

@@ -0,0 +1,42 @@
+import {
+  CalendarDate,
+  DateValue,
+  parseDate,
+  parseTime,
+  Time,
+} from "@internationalized/date";
+
+export function createDate({
+  date,
+  // timezone,
+  offset,
+}: {
+  date: Date | undefined;
+  // timezone: string;
+  offset: number;
+}): CalendarDate | DateValue | undefined {
+  if (date)
+    return parseDate(
+      new Date(date.getTime() - offset).toJSON().split("T").at(0) || ""
+    );
+  return undefined;
+}
+
+export function createTime({
+  date,
+  offset,
+}: {
+  date: Date | undefined;
+  offset: number;
+}): Time {
+  if (date)
+    return parseTime(
+      new Date(date.getTime() - offset)
+        .toJSON()
+        .split("T")
+        .at(1)
+        ?.replace("Z", "") || ""
+    );
+
+  return parseTime("00:00");
+}

package/src/custom/date-picker-old.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { format } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { Calendar } from "@repo/ayasofyazilim-ui/components/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { forwardRef } from "react";
+
+export const DatePicker = forwardRef<
+  HTMLDivElement,
+  {
+    date?: Date;
+    setDate: (date?: Date) => void;
+    disabled?: boolean;
+    className?: string;
+  }
+>(function DatePickerCmp({ date, setDate, disabled, className }, ref) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          disabled={disabled}
+          variant={"outline"}
+          className={cn(
+            "w-full justify-start text-left font-normal",
+            !date && "text-muted-foreground",
+            className
+          )}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, "PPP") : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" ref={ref}>
+        <Calendar
+          mode="single"
+          selected={date}
+          onSelect={setDate}
+          initialFocus
+        />
+      </PopoverContent>
+    </Popover>
+  );
+});

package/src/custom/date-tooltip.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React from "react";
+import { ClockIcon } from "lucide-react";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@repo/ayasofyazilim-ui/components/tooltip";
+
+export type Localization = { locale: string; timeZone: string; lang: string };
+
+function DateTooltip({
+  icon = <ClockIcon className="w-4 h-4" />,
+  date,
+  dateOptions = {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  },
+  localization,
+}: {
+  icon?: React.ReactNode;
+  date: string | Date;
+  dateOptions?: Intl.DateTimeFormatOptions;
+  localization: Localization;
+}) {
+  const tenantDate = formatToLocalizedDate({
+    localization,
+    date,
+    dateOptions,
+    timeZone: localization.timeZone,
+  });
+  const utcDate = formatToLocalizedDate({
+    localization,
+    date,
+    dateOptions,
+    timeZone: "UTC",
+  });
+  const userDate = formatToLocalizedDate({ localization, date, dateOptions });
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        className="flex items-center gap-1 underline decoration-dotted underline-offset-2"
+        asChild
+      >
+        <div>
+          {icon} {tenantDate}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent className="bg-gray-100 text-gray-900 border border-gray-300 z-100 [&_svg]:fill-gray-100">
+        <p className="flex justify-between">
+          <span className="font-semibold mr-2">UTC:</span>
+          {utcDate}
+        </p>
+        <p className="flex justify-between">
+          <span className="font-semibold mr-2">Tenant:</span>
+          {tenantDate}
+        </p>
+        <p className="flex justify-between">
+          <span className="font-semibold mr-2">You:</span>
+          {userDate}
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export default DateTooltip;
+
+export function formatToLocalizedDate({
+  localization,
+  date,
+  dateOptions = {
+    day: "2-digit",
+    month: "long",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  },
+  timeZone,
+}: {
+  localization: Localization;
+  date: string | Date;
+  dateOptions?: Intl.DateTimeFormatOptions;
+  timeZone?: string;
+}) {
+  const _date = typeof date === "string" ? new Date(date) : date;
+  const dateString = _date.toLocaleDateString(localization.lang, {
+    ...dateOptions,
+    timeZone,
+  });
+  return dateString;
+}

package/src/custom/document-scanner/consts.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_VIDEO_DIMENSIONS = { width: 1080, height: 1080 };
+export const DEFAULT_MIN_DOCUMENT_SIZE = 0.1;
+export const DEFAULT_MAX_DOCUMENT_SIZE = 0.98;
+export const DEFAULT_IMAGE_QUALITY = 0.95;
+export const DEFAULT_CAPTURE_INTERVAL = 2;

package/src/custom/document-scanner/corner-adjustment/action-buttons.tsx

@@ -0,0 +1,33 @@
+import { memo } from "react";
+import { ActionButtonsProps } from "./types";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+
+export const ActionButtons = memo<ActionButtonsProps>(
+  ({
+    allowCrop,
+    allowRetry,
+    cropButtonText,
+    retryButtonText,
+    onCrop,
+    onRetry,
+  }) => {
+    if (!allowCrop && !allowRetry) return null;
+
+    return (
+      <div className="absolute bottom-2 right-2 flex gap-2">
+        {allowRetry && (
+          <Button type="button" variant="outline" onClick={onRetry} size="sm">
+            {retryButtonText}
+          </Button>
+        )}
+        {allowCrop && (
+          <Button onClick={onCrop} size="sm">
+            {cropButtonText}
+          </Button>
+        )}
+      </div>
+    );
+  }
+);
+
+ActionButtons.displayName = "ActionButtons";

package/src/custom/document-scanner/corner-adjustment/corner-handle.tsx

@@ -0,0 +1,43 @@
+import { memo } from "react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { CornerHandleProps } from "./types";
+
+export const CornerHandle = memo<CornerHandleProps>(
+  ({
+    cornerKey,
+    corner,
+    videoDimensions,
+    isDragging,
+    cornerColor,
+    cornerTouchAreaSize,
+    onDragStart,
+  }) => {
+    const percentX = (corner.x / videoDimensions.width) * 100;
+    const percentY = (corner.y / videoDimensions.height) * 100;
+
+    return (
+      <div
+        role="button"
+        tabIndex={0}
+        className={cn(
+          "block border rounded-full min-w-5 min-h-5 absolute cursor-grab active:cursor-grabbing select-none",
+          isDragging ? "bg-blue-500/80 scale-125" : cornerColor,
+          isDragging ? "z-20" : "z-10"
+        )}
+        style={{
+          left: `${percentX}%`,
+          top: `${percentY}%`,
+          transform: `translate(-50%, -50%)`,
+          width: `${cornerTouchAreaSize}px`,
+          height: `${cornerTouchAreaSize}px`,
+          touchAction: "none",
+        }}
+        onPointerDown={(e) => onDragStart(cornerKey, e)}
+      >
+        <span className="sr-only">{`Drag ${cornerKey} corner`}</span>
+      </div>
+    );
+  }
+);
+
+CornerHandle.displayName = "CornerHandle";

package/src/custom/document-scanner/corner-adjustment/hooks/use-corner-drag.ts

@@ -0,0 +1,85 @@
+import { useCallback, useState, PointerEvent } from "react";
+import { DocumentCorners } from "../../types";
+import { DragState } from "../types";
+
+export function useCornerDrag(
+  detectedCorners: DocumentCorners,
+  videoDimensions: { width: number; height: number },
+  onCornersChange: (corners: DocumentCorners) => void
+) {
+  const [dragState, setDragState] = useState<DragState>({
+    isDragging: null,
+    offset: { x: 0, y: 0 },
+  });
+
+  const handleCornerDragStart = useCallback(
+    (cornerKey: string, event: PointerEvent) => {
+      event.preventDefault();
+
+      const rect = event.currentTarget.getBoundingClientRect();
+      const containerRect = event.currentTarget
+        .closest(".corner-adjustment-container")
+        ?.getBoundingClientRect();
+
+      if (containerRect) {
+        const newDragState = {
+          isDragging: cornerKey,
+          offset: {
+            x: event.clientX - rect.left - rect.width / 2,
+            y: event.clientY - rect.top - rect.height / 2,
+          },
+        };
+        setDragState(newDragState);
+      }
+    },
+    []
+  );
+
+  const handleCornerDrag = useCallback(
+    (event: PointerEvent) => {
+      if (!dragState.isDragging || !detectedCorners) {
+        return;
+      }
+
+      event.preventDefault();
+      const containerRect = event.currentTarget.getBoundingClientRect();
+
+      // Calculate new position relative to container
+      const newX =
+        ((event.clientX - containerRect.left - dragState.offset.x) /
+          containerRect.width) *
+        videoDimensions.width;
+      const newY =
+        ((event.clientY - containerRect.top - dragState.offset.y) /
+          containerRect.height) *
+        videoDimensions.height;
+
+      // Clamp to image bounds
+      const clampedX = Math.max(0, Math.min(videoDimensions.width, newX));
+      const clampedY = Math.max(0, Math.min(videoDimensions.height, newY));
+
+      // Update corners
+      const updatedCorners = {
+        ...detectedCorners,
+        [dragState.isDragging]: { x: clampedX, y: clampedY },
+      };
+
+      onCornersChange(updatedCorners);
+    },
+    [dragState, detectedCorners, videoDimensions, onCornersChange]
+  );
+
+  const handleCornerDragEnd = useCallback(() => {
+    setDragState({
+      isDragging: null,
+      offset: { x: 0, y: 0 },
+    });
+  }, []);
+
+  return {
+    dragState,
+    handleCornerDragStart,
+    handleCornerDrag,
+    handleCornerDragEnd,
+  };
+}

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

@@ -0,0 +1,125 @@
+import { memo, useMemo, useRef, useLayoutEffect, useState } from "react";
+import { ActionButtons } from "./action-buttons";
+import { CornerHandle } from "./corner-handle";
+import { ZoomMagnifier } from "./zoom-magnifier";
+import { useCornerDrag } from "./hooks/use-corner-drag";
+import { generateClipPath } from "./utils/clip-path";
+import { CornerAdjustmentProps } from "../types";
+
+export const CornerAdjustment = memo<CornerAdjustmentProps>(
+  ({
+    capturedImage,
+    detectedCorners,
+    videoDimensions,
+    onCornersChange,
+    onCrop,
+    onRetry,
+    cornerColor = "bg-white/80",
+    cornerTouchAreaSize = 20,
+    allowCrop = true,
+    allowRetry = true,
+    cropButtonText = "Crop",
+    retryButtonText = "Scan Again",
+    showMagnifier = true,
+    magnifierSize = 100,
+    zoomLevel = 2,
+  }) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [containerDimensions, setContainerDimensions] = useState({
+      width: 0,
+      height: 0,
+    });
+
+    const {
+      dragState,
+      handleCornerDragStart,
+      handleCornerDrag,
+      handleCornerDragEnd,
+    } = useCornerDrag(detectedCorners, videoDimensions, onCornersChange);
+
+    // Update container dimensions
+    useLayoutEffect(() => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setContainerDimensions({ width: rect.width, height: rect.height });
+      }
+    }, []);
+
+    const clipPath = useMemo(
+      () => generateClipPath(detectedCorners, videoDimensions),
+      [detectedCorners, videoDimensions]
+    );
+
+    const cornerEntries = useMemo(
+      () => Object.entries(detectedCorners),
+      [detectedCorners]
+    );
+
+    return (
+      <div
+        ref={containerRef}
+        className="corner-adjustment-container size-full flex items-center justify-center relative bg-red-500"
+        onPointerMove={handleCornerDrag}
+        onPointerUp={handleCornerDragEnd}
+        onPointerLeave={handleCornerDragEnd}
+      >
+        {/* Original image */}
+        <img
+          src={capturedImage}
+          alt="Original"
+          className="h-auto w-full object-contain absolute top-0 left-0 opacity-50"
+          draggable={false}
+        />
+        {/* Clipped image */}
+        <img
+          src={capturedImage}
+          alt="Document preview"
+          className="h-full w-full object-contain"
+          style={{ clipPath }}
+          draggable={false}
+        />
+
+        {/* Zoom Magnifier */}
+        {showMagnifier && (
+          <ZoomMagnifier
+            capturedImage={capturedImage}
+            detectedCorners={detectedCorners}
+            videoDimensions={videoDimensions}
+            containerDimensions={containerDimensions}
+            draggedCorner={dragState.isDragging}
+            zoomLevel={zoomLevel}
+            magnifierSize={magnifierSize}
+          />
+        )}
+
+        {/* Corner handles */}
+        {cornerEntries.map(([cornerKey, corner]) => (
+          <CornerHandle
+            key={cornerKey}
+            cornerKey={cornerKey}
+            corner={corner}
+            videoDimensions={videoDimensions}
+            isDragging={dragState.isDragging === cornerKey}
+            cornerColor={cornerColor}
+            cornerTouchAreaSize={cornerTouchAreaSize}
+            onDragStart={handleCornerDragStart}
+          />
+        ))}
+
+        {/* Action buttons */}
+        {!dragState.isDragging && (
+          <ActionButtons
+            allowCrop={allowCrop}
+            allowRetry={allowRetry}
+            cropButtonText={cropButtonText}
+            retryButtonText={retryButtonText}
+            onCrop={onCrop}
+            onRetry={onRetry}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+CornerAdjustment.displayName = "CornerAdjustment";

package/src/custom/document-scanner/corner-adjustment/types.ts

@@ -0,0 +1,53 @@
+import { PointerEvent } from "react";
+import { DocumentCorners } from "../types";
+
+export interface CornerAdjustmentProps {
+  capturedImage: string;
+  detectedCorners: DocumentCorners;
+  videoDimensions: { width: number; height: number };
+
+  onCornersChange: (corners: DocumentCorners) => void;
+  onCrop: () => void;
+  onRetry: () => void;
+
+  // Styling props
+  cornerColor?: string;
+  cornerTouchAreaSize?: number;
+
+  // Feature toggles
+  allowCrop?: boolean;
+  allowRetry?: boolean;
+
+  // Text customization
+  cropButtonText?: string;
+  retryButtonText?: string;
+
+  // Magnifier settings
+  showMagnifier?: boolean;
+  magnifierSize?: number;
+  zoomLevel?: number;
+}
+
+export interface DragState {
+  isDragging: string | null;
+  offset: { x: number; y: number };
+}
+
+export interface CornerHandleProps {
+  cornerKey: string;
+  corner: { x: number; y: number };
+  videoDimensions: { width: number; height: number };
+  isDragging: boolean;
+  cornerColor: string;
+  cornerTouchAreaSize: number;
+  onDragStart: (cornerKey: string, event: PointerEvent) => void;
+}
+
+export interface ActionButtonsProps {
+  allowCrop: boolean;
+  allowRetry: boolean;
+  cropButtonText: string;
+  retryButtonText: string;
+  onCrop: () => void;
+  onRetry: () => void;
+}

package/src/custom/document-scanner/corner-adjustment/utils/clip-path.ts

@@ -0,0 +1,22 @@
+import { DocumentCorners } from "../../types";
+
+export function generateClipPath(
+  corners: DocumentCorners,
+  videoDimensions: { width: number; height: number }
+): string {
+  const { topLeftCorner, topRightCorner, bottomRightCorner, bottomLeftCorner } =
+    corners;
+
+  // Convert pixel coordinates to percentages
+  const toPercent = (x: number, y: number) => ({
+    x: (x / videoDimensions.width) * 100,
+    y: (y / videoDimensions.height) * 100,
+  });
+
+  const tl = toPercent(topLeftCorner.x, topLeftCorner.y);
+  const tr = toPercent(topRightCorner.x, topRightCorner.y);
+  const br = toPercent(bottomRightCorner.x, bottomRightCorner.y);
+  const bl = toPercent(bottomLeftCorner.x, bottomLeftCorner.y);
+
+  return `polygon(${tl.x}% ${tl.y}%, ${tr.x}% ${tr.y}%, ${br.x}% ${br.y}%, ${bl.x}% ${bl.y}%)`;
+}

package/src/custom/document-scanner/corner-adjustment/zoom-magnifier.tsx

@@ -0,0 +1,115 @@
+import { memo, useMemo } from "react";
+import { DocumentCorners } from "../types";
+
+interface ZoomMagnifierProps {
+  capturedImage: string;
+  detectedCorners: DocumentCorners;
+  videoDimensions: { width: number; height: number };
+  containerDimensions: { width: number; height: number };
+  draggedCorner: string | null;
+  zoomLevel?: number;
+  magnifierSize?: number;
+}
+
+export const ZoomMagnifier = memo<ZoomMagnifierProps>(
+  ({
+    capturedImage,
+    detectedCorners,
+    videoDimensions,
+    containerDimensions,
+    draggedCorner,
+    zoomLevel = 3,
+    magnifierSize = 100,
+  }) => {
+    const position = useMemo(() => {
+      if (!draggedCorner) return null;
+
+      const margin = 8;
+      let left = 0;
+      let top = 0;
+
+      // Position opposite to the corner being dragged
+      switch (draggedCorner) {
+        case "topLeftCorner":
+          left = containerDimensions.width - magnifierSize - margin;
+          top = margin;
+          break;
+        case "topRightCorner":
+          left = margin;
+          top = margin;
+          break;
+        case "bottomLeftCorner":
+          left = containerDimensions.width - magnifierSize - margin;
+          top = containerDimensions.height - magnifierSize - margin;
+          break;
+        case "bottomRightCorner":
+          left = margin;
+          top = containerDimensions.height - magnifierSize - margin;
+          break;
+        default:
+          return null;
+      }
+
+      return { left, top };
+    }, [draggedCorner, containerDimensions, magnifierSize]);
+
+    const backgroundStyle = useMemo(() => {
+      if (!position || !draggedCorner) return {};
+
+      // Get the active corner position
+      const activeCorner =
+        detectedCorners[draggedCorner as keyof DocumentCorners];
+      if (!activeCorner) return {};
+
+      // Convert corner position from video dimensions to container dimensions
+      const cornerX =
+        (activeCorner.x / videoDimensions.width) * containerDimensions.width;
+      const cornerY =
+        (activeCorner.y / videoDimensions.height) * containerDimensions.height;
+
+      // Calculate the background position to center the zoom on active corner
+      const bgX = -cornerX * zoomLevel + magnifierSize / 2;
+      const bgY = -cornerY * zoomLevel + magnifierSize / 2;
+
+      return {
+        backgroundImage: `url(${capturedImage})`,
+        backgroundSize: `${containerDimensions.width * zoomLevel}px ${containerDimensions.height * zoomLevel}px`,
+        backgroundPosition: `${bgX}px ${bgY}px`,
+        backgroundRepeat: "no-repeat",
+      };
+    }, [
+      capturedImage,
+      detectedCorners,
+      draggedCorner,
+      videoDimensions,
+      containerDimensions,
+      zoomLevel,
+      magnifierSize,
+      position,
+    ]);
+
+    if (!position || !draggedCorner) return null;
+
+    return (
+      <div
+        className="absolute border-2 border-white rounded-md shadow-lg pointer-events-none z-30"
+        style={{
+          left: position.left,
+          top: position.top,
+          width: magnifierSize,
+          height: magnifierSize,
+          ...backgroundStyle,
+        }}
+      >
+        {/* Crosshair overlay */}
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+            <div className="size-[5px] rounded-full border border-primary bg-white absolute" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+ZoomMagnifier.displayName = "ZoomMagnifier";