@skalfa/skalfa-app 1.0.0

package/components/base.components/card/GalleryCard.component.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import Image from "next/image";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "label" | "image" | "base";
+
+export interface GalleryCardProps {
+  src   :  string;
+  alt  ?:  string;
+
+  /** Use custom class with: "label::", "image::". */
+  className?: string;
+}
+
+
+
+export function GalleryCardComponent({
+  src,
+  alt = "",
+  className = "",
+} : GalleryCardProps) {
+  return (
+    <>
+      <div className={pcn<CT>(className, "base")}>
+        <Image
+          src={src}
+          alt={src}
+          width={400}
+          height={300}
+          className={cn(
+            "w-full rounded-bl-4xl rounded-tr-3xl object-cover aspect-[4/3]",
+            pcn<CT>(className, "image"),
+          )}
+        />
+
+        <div
+          className={cn(
+            "mt-1 text-center text-sm text-light-foreground",
+            pcn<CT>(className, "label"),
+          )}
+        >
+          {alt}
+        </div>
+      </div>
+    </>
+  );
+}

package/components/base.components/card/ProductCard.component.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import Image from "next/image";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "image" | "base" | "content";
+
+export interface ProductCardProps {
+  name          :  string;
+  price        ?:  string;
+  image        ?:  string;
+  description  ?:  string | React.ReactNode;
+
+  /** Use custom class with: "image::", "content::". */
+  className  ?:  string;
+}
+
+
+
+export function ProductCardComponent({
+  image = "",
+  name,
+  price,
+  description,
+  className = "",
+} : ProductCardProps) {
+  return (
+    <>
+      <div
+        className={cn(
+          "rounded-[6px] border p-2 bg-white",
+          pcn<CT>(className, "base"),
+        )}
+      >
+        <Image
+          src={image}
+          alt={image}
+          width={400}
+          height={300}
+          className={cn(
+            "h-56 w-full rounded-[4px] object-cover",
+            pcn<CT>(className, "image"),
+          )}
+        />
+
+        <div className={cn("p-2", pcn<CT>(className, "content"))}>
+          <dl>
+            <div>
+              <dt className="sr-only">Name</dt>
+              <dd className="text-sm">{name}</dd>
+            </div>
+            <div>
+              <dt className="sr-only">Price</dt>
+              <dd className="font-semibold">{price}</dd>
+            </div>
+          </dl>
+
+          {description && <div>{description}</div>}
+        </div>
+      </div>
+    </>
+  );
+}

package/components/base.components/card/ProfileCard.component.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import Image from "next/image";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "image" | "base" | "content";
+
+export interface ProfileCardProps {
+  name          :  string;
+  short        ?:  string;
+  image        ?:  string;
+  description  ?:  string | React.ReactNode;
+  footer       ?:  string | React.ReactNode;
+
+  /** Use custom class with: "image::", "content::". */
+  className  ?:  string;
+}
+
+
+
+export function ProfileCardComponent({
+  image  =  "",
+  name,
+  short,
+  description,
+  footer,
+  className  =  "",
+} : ProfileCardProps) {
+  return (
+    <>
+      <div
+        className={cn(
+          "relative block overflow-hidden rounded-[6px] border bg-white p-4 sm:p-6",
+          pcn<CT>(className, "base"),
+        )}
+      >
+        <span className="absolute inset-x-0 bottom-0 h-1 bg-primary"></span>
+
+        <div className="sm:flex sm:gap-4 sm:items-center">
+          {image && (
+            <div className="hidden sm:block sm:shrink-0">
+              <Image
+                src={image}
+                alt={image}
+                width={400}
+                height={400}
+                className={cn(
+                  "size-16 rounded-full object-cover shadow-sm",
+                  pcn<CT>(className, "image"),
+                )}
+              />
+            </div>
+          )}
+          <div className={pcn<CT>(className, "content")}>
+            <h3 className="text-lg font-bold sm:text-xl">{name}</h3>
+
+            <p className="mt-1 text-xs font-medium text-light-foreground">
+              {short}
+            </p>
+          </div>
+        </div>
+
+        {description}
+
+        {footer && <dl className="mt-4">{footer}</dl>}
+      </div>
+    </>
+  );
+}

package/components/base.components/carousel/Carousel.component.tsx

@@ -0,0 +1,113 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "item" | "prev-button" | "next-button" | "navigation" | "base";
+
+interface CarouselItem {
+  background   :  string;
+  content     ?:  string;
+}
+
+interface CarouselProps {
+  items          :  CarouselItem[];
+  noButton      ?:  boolean;
+  noNavigation  ?:  boolean;
+
+  /** Use custom class with: "item::", "prev-button::", "next-button::", "navigation::". */
+  className  ?:  string;
+}
+
+
+
+export function CarouselComponent({
+  items,
+  className = "",
+  noButton,
+  noNavigation,
+}: CarouselProps) {
+  const [currentIndex, setCurrentIndex]  =  useState<number>(0);
+  const touchStartX                      =  useRef<number | null>(null);
+  const touchEndX                        =  useRef<number | null>(null);
+  const intervalRef                      =  useRef<NodeJS.Timeout | null>(null);
+
+  const handlePrev = (): void => setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
+
+  const handleNext = (): void => setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>): void => {
+    touchStartX.current = e.touches[0].clientX;
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent<HTMLDivElement>): void => {
+    touchEndX.current = e.changedTouches[0].clientX;
+    if (touchStartX.current !== null && touchEndX.current !== null) {
+      if (touchStartX.current - touchEndX.current > 50) handleNext();
+      if (touchEndX.current - touchStartX.current > 50) handlePrev();
+    }
+  };
+
+  useEffect(() => {
+    intervalRef.current = setInterval(handleNext, 10000);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, []);
+
+  const styles = {
+    base        :  cn("relative w-full overflow-hidden rounded-[6px]", pcn<CT>(className, "base")),
+    item        :  cn("flex-shrink-0 w-full aspect-[16/6] flex items-center justify-center bg-cover bg-center", pcn<CT>(className, "item")),
+    prevButton  :  cn("absolute top-1/2 left-4 transform -translate-y-1/2 bg-light-foreground/40 text-white p-2 rounded-[6px] cursor-pointer",pcn<CT>(className, "prev-button")),
+    nextButton  :  cn("absolute top-1/2 right-4 transform -translate-y-1/2 bg-light-foreground/40 text-white p-2 rounded-[6px] cursor-pointer",pcn<CT>(className, "next-button")),
+    navigation  :  cn("absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2",pcn<CT>(className, "navigation")),
+  };
+
+  return (
+    <div className={styles.base}>
+      <div
+        className="flex transition-transform duration-500"
+        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+      >
+        {items.map((item, index) => (
+          <div
+            key={index}
+            className={styles.item}
+            style={{ backgroundImage: `url(${item.background})` }}
+          >
+            {item.content}
+          </div>
+        ))}
+      </div>
+
+      {!noNavigation && (
+        <div className={styles.navigation}>
+          {items.map((_, index) => (
+            <button
+              key={index}
+              className={`w-8 h-1 rounded-full ${currentIndex === index ? "bg-primary" : "bg-light-foreground/40"}`}
+              onClick={() => setCurrentIndex(index)}
+            ></button>
+          ))}
+        </div>
+      )}
+
+      {!noButton && (
+        <>
+          <button className={styles.prevButton} onClick={handlePrev}>
+            <FontAwesomeIcon icon={faChevronLeft} />
+          </button>
+          <button className={styles.nextButton} onClick={handleNext}>
+            <FontAwesomeIcon icon={faChevronRight} />
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

package/components/base.components/chip/Chip.component.tsx

@@ -0,0 +1,39 @@
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn } from "@utils";
+
+export function ChipComponent({ 
+  items, 
+  onClick,
+  onDelete, 
+  className, 
+} : { 
+  items      :  Record<string, any>,
+  onClick    ?:  (item: any, index: number) => void,
+  onDelete   ?:  (item: any, index: number) => void,
+  className  ?:  string,
+}) {
+  return (
+    <div className={cn(`overflow-hidden flex gap-2 flex-wrap`, className)}>
+      {items?.map((item: any, key: number) => {
+        return (
+          <div 
+            key={key} 
+            className={`flex text-xs py-0.5 px-2 justify-between text-foreground border items-center rounded-md cursor-pointer`} 
+            onClick={() => onClick?.(item, key)}
+          >
+            <span>{item}</span>
+            
+            {onDelete && (
+              <FontAwesomeIcon
+                icon={faTimes}
+                className={`text-xs cursor-pointer text-light-foreground pl-2 py-1 hover:text-danger`}
+                onClick={() =>  onDelete?.(item, key)}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  )
+}

package/components/base.components/document/DocumentViewer.component.tsx

@@ -0,0 +1,164 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import Image from "next/image";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFilePdf, faFileImage, faFileWord, faFileExcel, faFile } from "@fortawesome/free-solid-svg-icons";
+import { cn } from "@/utils";
+
+
+
+type Props = {
+  file    ?:  File | string | null;
+  width   ?:  number;
+  height  ?:  number;
+  mode    ?:  "full" | "thumb";
+};
+
+
+
+export const DocumentViewerIcon = (ext: string) => {
+  switch (ext) {
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "webp":
+      return faFileImage;
+    case "pdf":
+      return faFilePdf;
+    case "doc":
+    case "docx":
+      return faFileWord;
+    case "xls":
+    case "xlsx":
+      return faFileExcel;
+    default:
+      return faFile;
+  }
+};
+
+
+
+export function DocumentViewerComponent({ file, width, height, mode = "full" }: Props) {
+  const [fileUrl, setFileUrl] = useState<string | null>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!file) {
+      setFileUrl(null);
+      return;
+    }
+
+    if (typeof file === "string") {
+      setFileUrl(file);
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(file);
+    setFileUrl(objectUrl);
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [file]);
+
+  const extension = useMemo(() => {
+    if (!file) return null;
+    if (typeof file === "string") {
+      const clean = file.split("?")[0].split("#")[0];
+      return clean.split(".").pop()?.toLowerCase() || null;
+    }
+    return file.name.split(".").pop()?.toLowerCase() || null;
+  }, [file]);
+
+  const isImage = ["jpg", "jpeg", "png", "webp"].includes(extension || "");
+  const isPdf = extension === "pdf";
+
+  const renderTaskRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (!file || !isPdf || !fileUrl || !canvasRef.current) return;
+
+    let cancelled = false;
+
+    const renderPdf = async () => {
+      const pdfjs = await import("pdfjs-dist/legacy/build/pdf.mjs");
+      pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs";
+
+      if (renderTaskRef.current) {
+        try {
+          await renderTaskRef.current.cancel();
+        } catch {}
+        renderTaskRef.current = null;
+      }
+
+      let loadingTask;
+
+      if (typeof file === "string") {
+        loadingTask = pdfjs.getDocument(fileUrl);
+      } else {
+        const buf = await file.arrayBuffer();
+        const uint8 = new Uint8Array(buf);
+        loadingTask = pdfjs.getDocument({ data: uint8 });
+      }
+
+      const pdf = await loadingTask.promise;
+      if (cancelled) return;
+
+      const page = await pdf.getPage(1);
+      if (cancelled) return;
+
+      const scale = mode === "thumb" ? 0.35 : 1;
+      const viewport = page.getViewport({ scale });
+
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+
+      const renderTask = page.render({ canvasContext: ctx, viewport, canvas });;
+      renderTaskRef.current = renderTask;
+
+      await renderTask.promise;
+      renderTaskRef.current = null;
+    };
+
+    renderPdf();
+
+    return () => {
+      cancelled = true;
+      if (renderTaskRef.current) {
+        try {
+          renderTaskRef.current.cancel();
+        } catch {}
+        renderTaskRef.current = null;
+      }
+    };
+  }, [isPdf, fileUrl, mode]);
+
+  if (!fileUrl) return null;
+
+
+  return (
+    <div
+      style={{
+        width: width ? width : "100%",
+        height: height ? height : "100%",
+        overflow: "hidden",
+        position: "relative",
+      }}
+    >
+      {isImage && <Image src={fileUrl} alt="document" fill className={mode === "thumb" ? "object-cover" : "object-contain"}/>}
+
+      {isPdf && <canvas ref={canvasRef} className={cn("block w-full h-full",  mode === "thumb" ? "object-cover" : "object-contain")} />}
+
+      {!isImage && !isPdf && (
+        <div className={cn("w-full h-full flex flex-col items-center justify-center opacity-50 gap-4")}>
+          <FontAwesomeIcon icon={DocumentViewerIcon(extension || "")} className={mode !== "thumb" ? "text-3xl" : "text-lg"} />
+          {mode !== "thumb" && file instanceof File && (<p className="text-center text-sm">{file.name}</p>)}
+        </div>
+      )}
+    </div>
+  );
+}