@ayasofyazilim/ui 0.0.0 → 0.0.1

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

@@ -1,50 +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>
-  );
-});
+"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

@@ -1,98 +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;
-}
+"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

@@ -1,5 +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;
+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

@@ -1,33 +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";
+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

@@ -1,43 +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";
+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

@@ -1,85 +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,
-  };
-}
+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,
+  };
+}