@ayasofyazilim/ui 0.0.0 → 0.0.2

package/src/custom/document-scanner/utils/perspective-correction.ts

@@ -1,139 +1,139 @@
-import cv from "opencv-ts";
-import type { Mat } from "opencv-ts";
-import { DocumentCorners } from "../types";
-
-export interface PerspectiveCorrectionOptions {
-  imageQuality: number;
-}
-
-export function perspectiveCorrection(
-  imageBase64: string,
-  corners: DocumentCorners,
-  videoDimensions: { width: number; height: number },
-  options: PerspectiveCorrectionOptions
-): Promise<string> {
-  return new Promise<string>((resolve, reject) => {
-    try {
-      const img = new Image();
-      img.onload = () => {
-        try {
-          // Create canvas and get image data
-          const canvas = document.createElement("canvas");
-          canvas.width = img.width;
-          canvas.height = img.height;
-          const ctx = canvas.getContext("2d");
-          if (!ctx) {
-            reject(new Error("Failed to get canvas context"));
-            return;
-          }
-          ctx.drawImage(img, 0, 0);
-
-          // Create OpenCV matrices
-          const src = cv.imread(canvas);
-
-          // Scale corners from video dimensions to actual image dimensions
-          const scaleX = img.width / videoDimensions.width;
-          const scaleY = img.height / videoDimensions.height;
-
-          // Source points (detected corners scaled to image size)
-          const srcPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [
-            corners.topLeftCorner.x * scaleX,
-            corners.topLeftCorner.y * scaleY,
-            corners.topRightCorner.x * scaleX,
-            corners.topRightCorner.y * scaleY,
-            corners.bottomRightCorner.x * scaleX,
-            corners.bottomRightCorner.y * scaleY,
-            corners.bottomLeftCorner.x * scaleX,
-            corners.bottomLeftCorner.y * scaleY,
-          ]);
-
-          // Calculate output dimensions
-          const { outputWidth, outputHeight } = calculateOutputDimensions(
-            corners,
-            scaleX,
-            scaleY
-          );
-
-          // Destination points (rectangle)
-          const dstPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [
-            0,
-            0,
-            outputWidth,
-            0,
-            outputWidth,
-            outputHeight,
-            0,
-            outputHeight,
-          ]);
-
-          // Get perspective transform matrix
-          const transformMatrix = cv.getPerspectiveTransform(
-            srcPoints,
-            dstPoints
-          );
-
-          // Apply perspective transformation
-          const dst = new cv.Mat();
-          cv.warpPerspective(
-            src,
-            dst,
-            transformMatrix,
-            new cv.Size(outputWidth, outputHeight)
-          );
-
-          // Convert back to canvas and get base64
-          const outputCanvas = document.createElement("canvas");
-          cv.imshow(outputCanvas, dst);
-          const croppedBase64 = outputCanvas.toDataURL(
-            "image/jpeg",
-            options.imageQuality
-          );
-
-          // Cleanup OpenCV matrices
-          cleanupMatrices([src, dst, srcPoints, dstPoints, transformMatrix]);
-
-          resolve(croppedBase64);
-        } catch (error) {
-          reject(error);
-        }
-      };
-      img.onerror = () => reject(new Error("Failed to load image"));
-      img.src = imageBase64;
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-
-function calculateOutputDimensions(
-  corners: DocumentCorners,
-  scaleX: number,
-  scaleY: number
-): { outputWidth: number; outputHeight: number } {
-  const distance = (
-    p1: { x: number; y: number },
-    p2: { x: number; y: number }
-  ) => Math.sqrt(((p2.x - p1.x) * scaleX) ** 2 + ((p2.y - p1.y) * scaleY) ** 2);
-
-  const topWidth = distance(corners.topLeftCorner, corners.topRightCorner);
-  const bottomWidth = distance(
-    corners.bottomLeftCorner,
-    corners.bottomRightCorner
-  );
-  const leftHeight = distance(corners.topLeftCorner, corners.bottomLeftCorner);
-  const rightHeight = distance(
-    corners.topRightCorner,
-    corners.bottomRightCorner
-  );
-
-  return {
-    outputWidth: Math.max(topWidth, bottomWidth),
-    outputHeight: Math.max(leftHeight, rightHeight),
-  };
-}
-
-function cleanupMatrices(matrices: Mat[]): void {
-  matrices.forEach((matrix) => {
-    matrix.delete();
-  });
-}
+import cv from "opencv-ts";
+import type { Mat } from "opencv-ts";
+import { DocumentCorners } from "../types";
+
+export interface PerspectiveCorrectionOptions {
+  imageQuality: number;
+}
+
+export function perspectiveCorrection(
+  imageBase64: string,
+  corners: DocumentCorners,
+  videoDimensions: { width: number; height: number },
+  options: PerspectiveCorrectionOptions
+): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    try {
+      const img = new Image();
+      img.onload = () => {
+        try {
+          // Create canvas and get image data
+          const canvas = document.createElement("canvas");
+          canvas.width = img.width;
+          canvas.height = img.height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          ctx.drawImage(img, 0, 0);
+
+          // Create OpenCV matrices
+          const src = cv.imread(canvas);
+
+          // Scale corners from video dimensions to actual image dimensions
+          const scaleX = img.width / videoDimensions.width;
+          const scaleY = img.height / videoDimensions.height;
+
+          // Source points (detected corners scaled to image size)
+          const srcPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [
+            corners.topLeftCorner.x * scaleX,
+            corners.topLeftCorner.y * scaleY,
+            corners.topRightCorner.x * scaleX,
+            corners.topRightCorner.y * scaleY,
+            corners.bottomRightCorner.x * scaleX,
+            corners.bottomRightCorner.y * scaleY,
+            corners.bottomLeftCorner.x * scaleX,
+            corners.bottomLeftCorner.y * scaleY,
+          ]);
+
+          // Calculate output dimensions
+          const { outputWidth, outputHeight } = calculateOutputDimensions(
+            corners,
+            scaleX,
+            scaleY
+          );
+
+          // Destination points (rectangle)
+          const dstPoints = cv.matFromArray(4, 1, cv.CV_32FC2, [
+            0,
+            0,
+            outputWidth,
+            0,
+            outputWidth,
+            outputHeight,
+            0,
+            outputHeight,
+          ]);
+
+          // Get perspective transform matrix
+          const transformMatrix = cv.getPerspectiveTransform(
+            srcPoints,
+            dstPoints
+          );
+
+          // Apply perspective transformation
+          const dst = new cv.Mat();
+          cv.warpPerspective(
+            src,
+            dst,
+            transformMatrix,
+            new cv.Size(outputWidth, outputHeight)
+          );
+
+          // Convert back to canvas and get base64
+          const outputCanvas = document.createElement("canvas");
+          cv.imshow(outputCanvas, dst);
+          const croppedBase64 = outputCanvas.toDataURL(
+            "image/jpeg",
+            options.imageQuality
+          );
+
+          // Cleanup OpenCV matrices
+          cleanupMatrices([src, dst, srcPoints, dstPoints, transformMatrix]);
+
+          resolve(croppedBase64);
+        } catch (error) {
+          reject(error);
+        }
+      };
+      img.onerror = () => reject(new Error("Failed to load image"));
+      img.src = imageBase64;
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+
+function calculateOutputDimensions(
+  corners: DocumentCorners,
+  scaleX: number,
+  scaleY: number
+): { outputWidth: number; outputHeight: number } {
+  const distance = (
+    p1: { x: number; y: number },
+    p2: { x: number; y: number }
+  ) => Math.sqrt(((p2.x - p1.x) * scaleX) ** 2 + ((p2.y - p1.y) * scaleY) ** 2);
+
+  const topWidth = distance(corners.topLeftCorner, corners.topRightCorner);
+  const bottomWidth = distance(
+    corners.bottomLeftCorner,
+    corners.bottomRightCorner
+  );
+  const leftHeight = distance(corners.topLeftCorner, corners.bottomLeftCorner);
+  const rightHeight = distance(
+    corners.topRightCorner,
+    corners.bottomRightCorner
+  );
+
+  return {
+    outputWidth: Math.max(topWidth, bottomWidth),
+    outputHeight: Math.max(leftHeight, rightHeight),
+  };
+}
+
+function cleanupMatrices(matrices: Mat[]): void {
+  matrices.forEach((matrix) => {
+    matrix.delete();
+  });
+}

package/src/custom/document-viewer/controllers.tsx

@@ -1,98 +1,98 @@
-import {
-  DownloadIcon,
-  EyeIcon,
-  EyeOffIcon,
-  SearchIcon,
-  ZoomIn,
-  ZoomOut,
-} from "lucide-react";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { Button } from "@repo/ayasofyazilim-ui/components/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@repo/ayasofyazilim-ui/components/popover";
-import { Input } from "@repo/ayasofyazilim-ui/components/input";
-
-export function Controllers({
-  documentUri,
-  zoom,
-  setZoom,
-  showThumbnail,
-  setShowThumbnail,
-  searchValue,
-  setSearchValue,
-}: {
-  documentUri: string;
-  zoom: number;
-  setZoom: (zoom: number) => void;
-  showThumbnail?: boolean;
-  setShowThumbnail?: (show: boolean) => void;
-  searchValue?: string;
-  setSearchValue?: (value: string) => void;
-}) {
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
-    if (!open) {
-      if (setSearchValue) {
-        setSearchValue("");
-      }
-    }
-  }, [open]);
-
-  return (
-    <div className="absolute top-4 right-6 flex gap-2 z-10 flex-col">
-      {setShowThumbnail && (
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => setShowThumbnail(!showThumbnail)}
-        >
-          {showThumbnail ? (
-            <EyeIcon className="size-4" />
-          ) : (
-            <EyeOffIcon className="size-4" />
-          )}
-        </Button>
-      )}
-      <Button variant="outline" size="icon" onClick={() => setZoom(zoom - 0.1)}>
-        <ZoomOut className="size-4" />
-      </Button>
-      <Button variant="outline" size="icon" onClick={() => setZoom(zoom + 0.1)}>
-        <ZoomIn className="size-4" />
-      </Button>
-      <Button asChild variant="outline" size="icon">
-        <Link href={documentUri} download target="_blank">
-          <DownloadIcon className="size-4" />
-        </Link>
-      </Button>
-      {setSearchValue && (
-        <Popover open={open} onOpenChange={setOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              size="icon"
-              onClick={() => setOpen(!open)}
-            >
-              <SearchIcon className="size-4" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-80 p-0" side="left">
-            <div className="grid gap-4">
-              <Input
-                id="search"
-                defaultValue={searchValue}
-                onChange={(e) => {
-                  setSearchValue(e.target.value);
-                }}
-                className="col-span-2 h-8"
-              />
-            </div>
-          </PopoverContent>
-        </Popover>
-      )}
-    </div>
-  );
-}
+import {
+  DownloadIcon,
+  EyeIcon,
+  EyeOffIcon,
+  SearchIcon,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { Button } from "@ayasofyazilim/ui/components/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@ayasofyazilim/ui/components/popover";
+import { Input } from "@ayasofyazilim/ui/components/input";
+
+export function Controllers({
+  documentUri,
+  zoom,
+  setZoom,
+  showThumbnail,
+  setShowThumbnail,
+  searchValue,
+  setSearchValue,
+}: {
+  documentUri: string;
+  zoom: number;
+  setZoom: (zoom: number) => void;
+  showThumbnail?: boolean;
+  setShowThumbnail?: (show: boolean) => void;
+  searchValue?: string;
+  setSearchValue?: (value: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (!open) {
+      if (setSearchValue) {
+        setSearchValue("");
+      }
+    }
+  }, [open]);
+
+  return (
+    <div className="absolute top-4 right-6 flex gap-2 z-10 flex-col">
+      {setShowThumbnail && (
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => setShowThumbnail(!showThumbnail)}
+        >
+          {showThumbnail ? (
+            <EyeIcon className="size-4" />
+          ) : (
+            <EyeOffIcon className="size-4" />
+          )}
+        </Button>
+      )}
+      <Button variant="outline" size="icon" onClick={() => setZoom(zoom - 0.1)}>
+        <ZoomOut className="size-4" />
+      </Button>
+      <Button variant="outline" size="icon" onClick={() => setZoom(zoom + 0.1)}>
+        <ZoomIn className="size-4" />
+      </Button>
+      <Button asChild variant="outline" size="icon">
+        <Link href={documentUri} download target="_blank">
+          <DownloadIcon className="size-4" />
+        </Link>
+      </Button>
+      {setSearchValue && (
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => setOpen(!open)}
+            >
+              <SearchIcon className="size-4" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80 p-0" side="left">
+            <div className="grid gap-4">
+              <Input
+                id="search"
+                defaultValue={searchValue}
+                onChange={(e) => {
+                  setSearchValue(e.target.value);
+                }}
+                className="col-span-2 h-8"
+              />
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+    </div>
+  );
+}

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

@@ -1,43 +1,43 @@
-"use client";
-
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-import DocViewer, { DocRenderer, DocViewerRenderers } from "react-doc-viewer";
-import CustomImageRenderer from "./renderers/image";
-import CustomPDFRenderer from "./renderers/pdf";
-
-export * from "react-doc-viewer";
-
-export type DocumentType = {
-  uri: string;
-  fileType?: string;
-  fileName?: string;
-  fileData?: string | ArrayBuffer;
-};
-export default function DocumentViewer({
-  document,
-  className,
-  renderers = [],
-}: {
-  document: DocumentType;
-  className?: string;
-  renderers?: DocRenderer[];
-}) {
-  return (
-    <DocViewer
-      config={{
-        header: {
-          disableHeader: true,
-          disableFileName: true,
-        },
-      }}
-      className={cn("h-full rounded-md border relative", className)}
-      pluginRenderers={[
-        ...DocViewerRenderers,
-        CustomPDFRenderer,
-        CustomImageRenderer,
-        ...renderers,
-      ]}
-      documents={[document]}
-    />
-  );
-}
+"use client";
+
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+import DocViewer, { DocRenderer, DocViewerRenderers } from "react-doc-viewer";
+import CustomImageRenderer from "./renderers/image";
+import CustomPDFRenderer from "./renderers/pdf";
+
+export * from "react-doc-viewer";
+
+export type DocumentType = {
+  uri: string;
+  fileType?: string;
+  fileName?: string;
+  fileData?: string | ArrayBuffer;
+};
+export default function DocumentViewer({
+  document,
+  className,
+  renderers = [],
+}: {
+  document: DocumentType;
+  className?: string;
+  renderers?: DocRenderer[];
+}) {
+  return (
+    <DocViewer
+      config={{
+        header: {
+          disableHeader: true,
+          disableFileName: true,
+        },
+      }}
+      className={cn("h-full rounded-md border relative", className)}
+      pluginRenderers={[
+        ...DocViewerRenderers,
+        CustomPDFRenderer,
+        CustomImageRenderer,
+        ...renderers,
+      ]}
+      documents={[document]}
+    />
+  );
+}

package/src/custom/document-viewer/renderers/image.tsx

@@ -1,37 +1,37 @@
-import { useState } from "react";
-import { DocRendererProps } from "react-doc-viewer";
-import { Controllers } from "../controllers";
-import ImageCanvas from "../../image-canvas";
-
-const CustomImageRenderer = (props: DocRendererProps) => {
-  const { mainState } = props;
-  const { currentDocument } = mainState;
-  if (!currentDocument) return null;
-  const [zoom, setZoom] = useState(1);
-  return (
-    <div className="flex w-full items-center justify-center p-4">
-      <Controllers
-        documentUri={currentDocument.uri}
-        zoom={zoom}
-        setZoom={setZoom}
-      />
-      <div className="relative size-full flex items-center justify-center">
-        <ImageCanvas
-          classNames={{
-            canvas: "border rounded-md",
-          }}
-          imageUrl={currentDocument.uri}
-          zoom={zoom}
-          minZoom={0.5}
-          maxZoom={2}
-          onZoomChange={setZoom}
-        />
-      </div>
-    </div>
-  );
-};
-
-CustomImageRenderer.fileTypes = ["image/jpeg", "image/png", "image/gif"];
-CustomImageRenderer.weight = 1;
-
-export default CustomImageRenderer;
+import { useState } from "react";
+import { DocRendererProps } from "react-doc-viewer";
+import { Controllers } from "../controllers";
+import ImageCanvas from "../../image-canvas";
+
+const CustomImageRenderer = (props: DocRendererProps) => {
+  const { mainState } = props;
+  const { currentDocument } = mainState;
+  if (!currentDocument) return null;
+  const [zoom, setZoom] = useState(1);
+  return (
+    <div className="flex w-full items-center justify-center p-4">
+      <Controllers
+        documentUri={currentDocument.uri}
+        zoom={zoom}
+        setZoom={setZoom}
+      />
+      <div className="relative size-full flex items-center justify-center">
+        <ImageCanvas
+          classNames={{
+            canvas: "border rounded-md",
+          }}
+          imageUrl={currentDocument.uri}
+          zoom={zoom}
+          minZoom={0.5}
+          maxZoom={2}
+          onZoomChange={setZoom}
+        />
+      </div>
+    </div>
+  );
+};
+
+CustomImageRenderer.fileTypes = ["image/jpeg", "image/png", "image/gif"];
+CustomImageRenderer.weight = 1;
+
+export default CustomImageRenderer;

package/src/custom/document-viewer/renderers/index.tsx

@@ -1,2 +1,2 @@
-export * from "./pdf";
-export * from "./image";
+export * from "./pdf";
+export * from "./image";