@skalfa/skalfa-app 1.0.2 → 1.0.5

package/components/base.components/button/IconButton.component.tsx

@@ -1,88 +0,0 @@
-"use client"
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { cn, pcn } from "@utils";
-import { buttonVariant, buttonRadius, iconButtonContainer } from "./button.decorate";
-
-
-
-type CT = "icon" | "loading" | "base";
-
-export interface IconButtonProps {
-  icon         ?:  any;
-  type         ?:  "submit" | "button";
-  variant      ?:  "solid" | "outline" | "light" | "simple";
-  rounded      ?:  boolean | string;
-  disabled     ?:  boolean;
-  size         ?:  "xs" | "sm" | "md" | "lg";
-  onClick      ?:  any;
-  loading      ?:  boolean;
-  hover        ?:  boolean;
-  tips         ?:  string | undefined;
-  paint        ?:  "primary" | "secondary" | "success" | "danger" | "warning";
-  customPaint  ?:  {
-    bg         ?:  string;
-    color      ?:  string;
-    border     ?:  string;
-  };
-
-  /** Use custom class with: "icon::", "loading::". */
-  className?: string;
-};
-
-
-
-export function IconButtonComponent({
-  type     =  "button",
-  variant  =  "solid",
-  paint    =  "primary",
-  size     =  "md",
-  rounded,
-  disabled,
-  onClick,
-  icon,
-  loading,
-  tips,
-  className  =  "",
-}: IconButtonProps) {
-  const buttonClasses = cn(
-    "button",
-    buttonVariant[variant][paint],
-    iconButtonContainer[size],
-    rounded ? "rounded-full" : buttonRadius[size],
-    pcn<CT>(className, "base")
-  );
-
-  const loadingClasses = cn(
-    "button-loading",
-    size === "sm" ? "w-3 h-3" : size === "lg" ? "w-5 h-5" : "w-4 h-4",
-    pcn<CT>(className, "loading")
-  );
-
-  const iconClasses = cn(
-    size === "xs"
-      ? "text-xs"
-      : size === "sm"
-        ? "text-sm mb-0.5"
-        : size === "lg"
-          ? "text-xl mb-0.5"
-          : "text-base mb-0.5",
-    pcn<CT>(className, "icon")
-  );
-
-  return (
-    <button
-      type={type}
-      className={buttonClasses}
-      disabled={disabled || loading}
-      onClick={onClick}
-      title={tips}
-    >
-      {loading ? (
-        <div className={loadingClasses}></div>
-      ) : (
-        <FontAwesomeIcon icon={icon} className={iconClasses} />
-      )}
-    </button>
-  );
-}

package/components/base.components/button/button.decorate.ts

@@ -1,82 +0,0 @@
-export const buttonContainer = {
-  lg: "px-14 py-3 flex items-center gap-3",
-  md: "px-8 py-2 flex items-center gap-2",
-  sm: "px-6 py-2 text-xs flex items-center gap-2",
-  xs: "px-3 py-1 text-xs flex items-center gap-1.5",
-};
-
-export const iconButtonContainer = {
-  lg: "w-10 h-10 flex items-center justify-center",
-  md: "w-8 h-8 flex items-center justify-center",
-  sm: "w-7 h-7 text-xs flex items-center justify-center",
-  xs: "w-6 h-6 text-xs flex items-center justify-center",
-};
-
-export const buttonVariant = {
-  solid: {
-    primary: "bg-primary text-white",
-    secondary: "bg-secondary text-white",
-    warning: "bg-warning text-white",
-    danger: "bg-danger text-white",
-    success: "bg-success text-white",
-  },
-  outline: {
-    primary: "border text-primary",
-    secondary: "border text-secondary",
-    warning: "border text-warning",
-    danger: "border text-danger",
-    success: "border text-success",
-  },
-  light: {
-    primary: "bg-light-primary text-primary",
-    secondary: "bg-light-secondary text-secondary",
-    warning: "bg-light-warning text-warning",
-    danger: "bg-light-danger text-danger",
-    success: "bg-light-success text-success",
-  },
-  simple: {
-    primary: "text-primary",
-    secondary: "text-secondary",
-    warning: "text-warning",
-    danger: "text-danger",
-    success: "text-success",
-  },
-};
-
-export const buttonIcon = {
-  solid: {
-    primary: "text-white",
-    secondary: "text-white",
-    warning: "text-white",
-    danger: "text-white",
-    success: "text-white",
-  },
-  outline: {
-    primary: "text-primary",
-    secondary: "text-secondary",
-    warning: "text-warning",
-    danger: "text-danger",
-    success: "text-success",
-  },
-  light: {
-    primary: "text-primary",
-    secondary: "text-secondary",
-    warning: "text-warning",
-    danger: "text-danger",
-    success: "text-success",
-  },
-  simple: {
-    primary: "text-primary",
-    secondary: "text-secondary",
-    warning: "text-warning",
-    danger: "text-danger",
-    success: "text-success",
-  },
-};
-
-export const buttonRadius = {
-  lg: "rounded-sm",
-  md: "rounded-sm",
-  sm: "rounded-sm",
-  xs: "rounded-xs",
-};

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

@@ -1,69 +0,0 @@
-"use client"
-
-import { ReactNode } from "react";
-import { cn, pcn } from "@utils";
-
-
-
-type CT = "badge" | "title" | "base";
-
-export interface AlertCardProps {
-  title        ?:  string | ReactNode;
-  leftContent  ?:  string | ReactNode;
-  badge        ?:  string | ReactNode;
-  content      ?:  string | ReactNode;
-  footer       ?:  string | ReactNode;
-
-  /** Use custom class with: "badge::", "title::". */
-  className  ?:  string;
-}
-
-
-
-export function AlertCardComponent({
-  title,
-  leftContent,
-  badge,
-  content,
-  footer,
-  className = "",
-}: AlertCardProps) {
-  return (
-    <>
-      <section
-        className={cn(
-          "rounded-[6px] bg-white p-4 border sm:p-6",
-          pcn<CT>(className, "base"),
-        )}
-      >
-        <div className="flex items-start sm:gap-8">
-          {leftContent}
-
-          <div>
-            <strong
-              className={cn(
-                "rounded-[4px] border text-primary bg-primary/20 px-3 py-1.5 text-xs font-bold",
-                pcn<CT>(className, "badge"),
-              )}
-            >
-              {badge}
-            </strong>
-
-            <h3
-              className={cn(
-                "mt-4 text-lg font-medium sm:text-xl",
-                pcn<CT>(className, "title"),
-              )}
-            >
-              {title}
-            </h3>
-
-            {content}
-
-            {footer && <div className="pt-4">{footer}</div>}
-          </div>
-        </div>
-      </section>
-    </>
-  );
-}

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

@@ -1,25 +0,0 @@
-"use client"
-
-import { cn } from "@utils";
-
-
-
-export interface CardProps {
-  children    :  React.ReactNode;
-  className  ?:  string;
-}
-
-
-
-export function CardComponent({
-  children,
-  className,
-}: CardProps) {
-  return (
-    <>
-      <div className={cn("px-4 py-2.5 rounded-[6px] border bg-white", className)}>
-        {children}
-      </div>
-    </>
-  );
-}

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

@@ -1,44 +0,0 @@
-"use client"
-
-import Link from "next/link";
-import { ReactNode } from "react";
-import { cn } from "@utils";
-
-
-
-export interface DashboardCardProps {
-  content       ?:  string | ReactNode;
-  title         ?:  string | ReactNode;
-  rightContent  ?:  string | ReactNode;
-  path          ?:  string;
-  className     ?:  string;
-}
-
-
-
-export function DashboardCardComponent({
-  content,
-  title,
-  rightContent,
-  path,
-  className,
-} : DashboardCardProps) {
-  return (
-    <>
-      <Link href={path || ""}>
-        <div
-          className={cn(
-            `bg-white border py-4 px-6 rounded-[6px] flex justify-between gap-4 items-center`,
-            className,
-          )}
-        >
-          <div>
-            <div className="flex gap-4 items-center">{content}</div>
-            {title}
-          </div>
-          <div>{rightContent}</div>
-        </div>
-      </Link>
-    </>
-  );
-}

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

@@ -1,50 +0,0 @@
-"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

@@ -1,65 +0,0 @@
-"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

@@ -1,71 +0,0 @@
-"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

@@ -1,113 +0,0 @@
-"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

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