@ayasofyazilim/ui 0.0.0

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

@@ -0,0 +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();
+  });
+}

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +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]}
+    />
+  );
+}

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

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

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

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

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

@@ -0,0 +1,105 @@
+import { useMemo, useState } from "react";
+import { DocRenderer, DocRendererProps } from "react-doc-viewer";
+import { Document, Page, pdfjs, Thumbnail } from "react-pdf";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
+import { Controllers } from "../controllers";
+
+pdfjs.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
+type CustomDocRendererProps = {} & DocRendererProps;
+
+const CustomPDFRenderer = (props: CustomDocRendererProps) => {
+  const { mainState } = props;
+  const { currentDocument } = mainState;
+  const [zoom, setZoom] = useState(1);
+  const [showThumbnail, setShowThumbnail] = useState(false);
+  const [pageCount, setPageCount] = useState(0);
+  const [activePage, setActivePage] = useState(1);
+  const [searchValue, setSearchValue] = useState<string>();
+
+  if (!currentDocument) return null;
+  return (
+    <Document
+      className={cn("p-4 w-full flex")}
+      file={currentDocument.uri}
+      renderMode="canvas"
+      onLoadSuccess={({ numPages }) => {
+        setPageCount(numPages);
+      }}
+    >
+      <Controllers
+        documentUri={currentDocument.uri}
+        zoom={zoom}
+        setZoom={setZoom}
+        showThumbnail={showThumbnail}
+        setShowThumbnail={setShowThumbnail}
+        searchValue={searchValue}
+        setSearchValue={setSearchValue}
+      />
+
+      <div className="flex gap-2 w-full justify-center">
+        {showThumbnail && (
+          <div className="flex flex-col gap-2 left-4 absolute top-4 z-10 w-full max-w-[110px]">
+            {Array.from(new Array(pageCount), (el, index) => (
+              <Thumbnail
+                key={"page_" + index}
+                onClick={() => {
+                  setActivePage(index + 1);
+                }}
+                className={cn(
+                  "rounded-md border bg-white p-1 flex justify-center",
+                  activePage === index + 1 && "border-primary"
+                )}
+                pageNumber={index + 1}
+                width={100}
+                height={100}
+              />
+            ))}
+          </div>
+        )}
+        <div className={cn("flex flex-col", showThumbnail && "")}>
+          {Array.from(new Array(pageCount), (el, index) => (
+            <Page
+              customTextRenderer={({ str }) =>
+                searchValue
+                  ? str.replace(
+                      new RegExp(searchValue, "gi"),
+                      (value) => `<mark>${value}</mark>`
+                    )
+                  : str
+              }
+              className="border shadow-sm max-w-max overflow-hidden rounded-md mb-2"
+              key={`page_${index + 1}`}
+              pageNumber={index + 1}
+              scale={zoom}
+            />
+          ))}
+        </div>
+      </div>
+    </Document>
+  );
+};
+
+CustomPDFRenderer.fileTypes = ["pdf", "application/pdf"];
+CustomPDFRenderer.weight = 1;
+
+export default CustomPDFRenderer;
+
+export const ExtendCustomPDFRenderer = ({
+  searchValue,
+}: {
+  searchValue?: string;
+}): DocRenderer => {
+  const Renderer = useMemo(() => {
+    function RendererComponent(props: DocRendererProps) {
+      return <CustomPDFRenderer {...props} />;
+    }
+    RendererComponent.fileTypes = ["pdf", "application/pdf"];
+    RendererComponent.weight = 1;
+    return RendererComponent;
+  }, [searchValue]);
+
+  return Renderer;
+};

package/src/custom/email-input/domains.json

@@ -0,0 +1,159 @@
+[
+  "gmail.com",
+  "outlook.com",
+  "hotmail.com",
+  "icloud.com",
+  "yahoo.com",
+  "aol.com",
+  "att.net",
+  "comcast.net",
+  "facebook.com",
+  "gmx.com",
+  "googlemail.com",
+  "google.com",
+  "hotmail.co.uk",
+  "mac.com",
+  "me.com",
+  "mail.com",
+  "msn.com",
+  "live.com",
+  "sbcglobal.net",
+  "verizon.net",
+  "yahoo.co.uk",
+  "email.com",
+  "fastmail.fm",
+  "games.com",
+  "gmx.net",
+  "hush.com",
+  "hushmail.com",
+  "iname.com",
+  "inbox.com",
+  "lavabit.com",
+  "love.com",
+  "pobox.com",
+  "protonmail.ch",
+  "protonmail.com",
+  "tutanota.de",
+  "tutanota.com",
+  "tutamail.com",
+  "tuta.io",
+  "keemail.me",
+  "rocketmail.com",
+  "safe-mail.net",
+  "wow.com",
+  "ygm.com",
+  "ymail.com",
+  "zoho.com",
+  "bellsouth.net",
+  "charter.net",
+  "cox.net",
+  "earthlink.net",
+  "juno.com",
+  "btinternet.com",
+  "virginmedia.com",
+  "blueyonder.co.uk",
+  "live.co.uk",
+  "ntlworld.com",
+  "orange.net",
+  "sky.com",
+  "talktalk.co.uk",
+  "tiscali.co.uk",
+  "virgin.net",
+  "bt.com",
+  "sina.com",
+  "sina.cn",
+  "qq.com",
+  "naver.com",
+  "hanmail.net",
+  "daum.net",
+  "nate.com",
+  "yahoo.co.jp",
+  "yahoo.co.kr",
+  "yahoo.co.id",
+  "yahoo.co.in",
+  "yahoo.com.sg",
+  "yahoo.com.ph",
+  "163.com",
+  "yeah.net",
+  "126.com",
+  "21cn.com",
+  "aliyun.com",
+  "foxmail.com",
+  "hotmail.fr",
+  "live.fr",
+  "laposte.net",
+  "yahoo.fr",
+  "wanadoo.fr",
+  "orange.fr",
+  "gmx.fr",
+  "sfr.fr",
+  "neuf.fr",
+  "free.fr",
+  "gmx.de",
+  "hotmail.de",
+  "live.de",
+  "online.de",
+  "t-online.de",
+  "web.de",
+  "yahoo.de",
+  "libero.it",
+  "virgilio.it",
+  "hotmail.it",
+  "aol.it",
+  "tiscali.it",
+  "alice.it",
+  "live.it",
+  "yahoo.it",
+  "email.it",
+  "tin.it",
+  "poste.it",
+  "teletu.it",
+  "bk.ru",
+  "inbox.ru",
+  "list.ru",
+  "mail.ru",
+  "rambler.ru",
+  "yandex.by",
+  "yandex.com",
+  "yandex.kz",
+  "yandex.ru",
+  "yandex.ua",
+  "ya.ru",
+  "hotmail.be",
+  "live.be",
+  "skynet.be",
+  "voo.be",
+  "tvcablenet.be",
+  "telenet.be",
+  "hotmail.com.ar",
+  "live.com.ar",
+  "yahoo.com.ar",
+  "fibertel.com.ar",
+  "speedy.com.ar",
+  "arnet.com.ar",
+  "yahoo.com.mx",
+  "live.com.mx",
+  "hotmail.es",
+  "hotmail.com.mx",
+  "prodigy.net.mx",
+  "yahoo.ca",
+  "hotmail.ca",
+  "bell.net",
+  "shaw.ca",
+  "sympatico.ca",
+  "rogers.com",
+  "yahoo.com.br",
+  "hotmail.com.br",
+  "outlook.com.br",
+  "uol.com.br",
+  "bol.com.br",
+  "terra.com.br",
+  "ig.com.br",
+  "r7.com",
+  "zipmail.com.br",
+  "globo.com",
+  "globomail.com",
+  "oi.com.br",
+  "unirefund.com",
+  "clomerce.com"
+]