@skalfa/skalfa-component 1.0.7 → 1.0.9

package/src/card/AlertCard.component.tsx

@@ -0,0 +1,69 @@
+"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(
+          "alert-card",
+          pcn<CT>(className, "base"),
+        )}
+      >
+        <div className="flex items-start sm:gap-8">
+          {leftContent}
+
+          <div>
+            <strong
+              className={cn(
+                "alert-card-badge",
+                pcn<CT>(className, "badge"),
+              )}
+            >
+              {badge}
+            </strong>
+
+            <h3
+              className={cn(
+                "alert-card-title",
+                pcn<CT>(className, "title"),
+              )}
+            >
+              {title}
+            </h3>
+
+            {content}
+
+            {footer && <div className="pt-4">{footer}</div>}
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}

package/src/card/Card.component.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { cn } from "@utils";
+
+
+
+export interface CardProps {
+  children    :  React.ReactNode;
+  className  ?:  string;
+}
+
+
+
+export function CardComponent({
+  children,
+  className,
+}: CardProps) {
+  return (
+    <>
+      <div className={cn("card", className)}>
+        {children}
+      </div>
+    </>
+  );
+}

package/src/card/DashboardCard.component.tsx

@@ -0,0 +1,44 @@
+"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(
+            "dashboard-card",
+            className,
+          )}
+        >
+          <div>
+            <div className="flex gap-4 items-center">{content}</div>
+            {title}
+          </div>
+          <div>{rightContent}</div>
+        </div>
+      </Link>
+    </>
+  );
+}

package/src/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(
+            "gallery-card-image",
+            pcn<CT>(className, "image"),
+          )}
+        />
+
+        <div
+          className={cn(
+            "gallery-card-label",
+            pcn<CT>(className, "label"),
+          )}
+        >
+          {alt}
+        </div>
+      </div>
+    </>
+  );
+}

package/src/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(
+          "product-card",
+          pcn<CT>(className, "base"),
+        )}
+      >
+        <Image
+          src={image}
+          alt={image}
+          width={400}
+          height={300}
+          className={cn(
+            "product-card-image",
+            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/src/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(
+          "profile-card",
+          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(
+                  "profile-card-image",
+                  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/src/carousel/Carousel.component.tsx

@@ -0,0 +1,111 @@
+"use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
+
+import { useState, useRef, useEffect } from "react";
+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);
+    };
+  }, []);
+
+  return (
+    <div className={cn("carousel", pcn<CT>(className, "base"))}>
+      <div
+        className="carousel-inner"
+        style={{ transform: `translateX(-${currentIndex * 100}%)` }}
+        onTouchStart={handleTouchStart}
+        onTouchEnd={handleTouchEnd}
+      >
+        {items.map((item, index) => (
+          <div
+            key={index}
+            className={cn("carousel-item", pcn<CT>(className, "item"))}
+            style={{ backgroundImage: `url(${item.background})` }}
+          >
+            {item.content}
+          </div>
+        ))}
+      </div>
+
+      {!noNavigation && (
+        <div className={cn("carousel-navigation", pcn<CT>(className, "navigation"))}>
+          {items.map((_, index) => (
+            <button
+              key={index}
+              className={`carousel-indicator ${currentIndex === index ? "carousel-indicator-active" : ""}`}
+              onClick={() => setCurrentIndex(index)}
+            ></button>
+          ))}
+        </div>
+      )}
+
+      {!noButton && (
+        <>
+          <button
+            className={cn("carousel-btn carousel-prev-btn", pcn<CT>(className, "prev-button"))}
+            onClick={handlePrev}
+          >
+            <Icon icon="solid/chevron-left" />
+          </button>
+          <button
+            className={cn("carousel-btn carousel-next-btn", pcn<CT>(className, "next-button"))}
+            onClick={handleNext}
+          >
+            <Icon icon="solid/chevron-right" />
+          </button>
+        </>
+      )}
+    </div>
+  );
+}

package/src/chip/Chip.component.tsx

@@ -0,0 +1,38 @@
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+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("chip-group", className)}>
+      {items?.map((item: any, key: number) => {
+        return (
+          <div 
+            key={key} 
+            className="chip" 
+            onClick={() => onClick?.(item, key)}
+          >
+            <span>{item}</span>
+            
+            {onDelete && (
+              <Icon
+                icon="solid/times"
+                className="chip-delete"
+                onClick={() =>  onDelete?.(item, key)}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  )
+}

package/src/contexts-mock.ts

@@ -0,0 +1,6 @@
+export function useToggleContext(): any {
+  return { toggle: {}, setToggle: () => {} };
+}
+export function useAuthContext(): any {
+  return { setUser: () => {}, setAccessToken: () => {} };
+}

package/src/index.ts

@@ -0,0 +1,70 @@
+export * from "./accordion/Accordion.component";
+export * from "./breadcrumb/Breadcrumb.component";
+export * from "./button/Button.component";
+export * from "./card/AlertCard.component";
+export * from "./card/Card.component";
+export * from "./card/DashboardCard.component";
+export * from "./card/GalleryCard.component";
+export * from "./card/ProductCard.component";
+export * from "./card/ProfileCard.component";
+export * from "./carousel/Carousel.component";
+export * from "./chip/Chip.component";
+export * from "./input/Checkbox.component";
+export * from "./input/Input.component";
+export * from "./input/InputCheckbox.component";
+export * from "./input/InputCurrency.component";
+export * from "./input/InputDate.component";
+export * from "./input/InputDatetime.component";
+export * from "./input/InputDocument.component";
+export * from "./input/InputImage.component";
+export * from "./input/InputNumber.component";
+export * from "./input/InputOtp.component";
+export * from "./input/InputPassword.component";
+export * from "./input/InputRadio.component";
+export * from "./input/InputTime.component";
+export * from "./input/InputValues.component";
+export * from "./input/Radio.component";
+export * from "./input/Select.component";
+export * from "./modal/BottomSheet.component";
+export * from "./modal/FloatingPage.component";
+export * from "./modal/Modal.component";
+export * from "./modal/ModalConfirm.component";
+export * from "./modal/Toast.component";
+export * from "./nav/Bottombar.component";
+export * from "./nav/Footer.component";
+export * from "./nav/Headbar.component";
+export * from "./nav/Navbar.component";
+export * from "./nav/Sidebar.component";
+export * from "./nav/Tabbar.component";
+export * from "./nav/Wizard.component";
+export * from "./supervision/FormSupervision.component";
+export * from "./supervision/TableSupervision.component";
+export * from "./table/ControlBar.component";
+export * from "./table/FilterComponent";
+export * from "./table/Pagination.component";
+export * from "./table/Table.component";
+export * from "./typography/TypographyArticle.component";
+export * from "./typography/TypographyColumn.component";
+export * from "./typography/TypographyContent.component";
+export * from "./typography/TypographyTips.component";
+export * from "./wrap/Draggable.component";
+export * from "./wrap/Image.component";
+export * from "./wrap/OutsideClick.component";
+export * from "./wrap/ScrollContainer.component";
+export * from "./wrap/ShortcutProvider";
+export * from "./wrap/Swipe.component";
+
+import { registry } from "@utils";
+import { TableComponent } from "./table/Table.component";
+import { ButtonComponent } from "./button/Button.component";
+import { SelectComponent } from "./input/Select.component";
+import { ModalComponent } from "./modal/Modal.component";
+import { FilterComponent } from "./table/FilterComponent";
+import { useToggleContext } from "@contexts";
+
+registry.register("TableComponent", TableComponent);
+registry.register("ButtonComponent", ButtonComponent);
+registry.register("SelectComponent", SelectComponent);
+registry.register("ModalComponent", ModalComponent);
+registry.register("FilterComponent", FilterComponent);
+registry.register("useToggleContext", useToggleContext);

package/src/input/Checkbox.component.tsx

@@ -0,0 +1,102 @@
+"use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
+
+import { ReactNode, useEffect, useState } from "react";
+import { cn, pcn, useInputRandomId } from "@utils";
+
+type CT  =  "label" | "checked" | "error" | "base";
+
+export type CheckboxProps = {
+  name    :  string;
+  label  ?:  string | ReactNode;
+  
+  value     ?:  string;
+  disabled  ?:  boolean;
+  checked   ?:  boolean;
+  invalid   ?:  string;
+  
+  onChange  ?:  () => void;
+
+  /** Use custom class with: "label::", "checked::", "error::". */
+  className  ?:  string;
+};
+
+export function CheckboxComponent({
+  name,
+  label,
+
+  value,
+  disabled = false,
+  checked = false,
+  invalid,
+
+  onChange,
+
+  className = "",
+}: CheckboxProps) {
+
+  // =========================>
+  // ## Initial
+  // =========================>
+  const randomId                             =  useInputRandomId()
+  const [invalidMessage, setInvalidMessage]  =  useState("");
+
+  // =========================>
+  // ## Invalid handler
+  // =========================>
+  useEffect(() => {
+    setInvalidMessage(invalid || "");
+  }, [invalid]);
+
+  return (
+    <div className="checkbox-container">
+      <input
+        type="checkbox"
+        className="hidden"
+        id={randomId}
+        name={name}
+        onChange={onChange}
+        defaultChecked={checked}
+        value={value}
+        disabled={disabled}
+      />
+
+      <label
+        htmlFor={randomId}
+        className={cn(
+          "checkbox-wrapper",
+          disabled && "checkbox-wrapper-disabled"
+        )}
+      >
+        <div>
+          <div
+            className={cn(
+              "checkbox-input",
+              checked && "checkbox-input-checked",
+              checked && pcn<CT>(className, "checked"),
+              pcn<CT>(className, "base"),
+            )}
+          >
+            {checked && <Icon icon="solid/check" className="text-sm" />}
+          </div>
+        </div>
+        <span
+          className={cn(
+            "checkbox-label",
+            checked && "checkbox-label-checked",
+            pcn<CT>(className, "label"),
+            checked && pcn<CT>(className, "label", "checked"),
+            disabled && pcn<CT>(className, "label", "disabled"),
+          )}
+        >
+          {label}
+        </span>
+      </label>
+
+      {invalidMessage && (
+        <small className={cn("input-error-message", pcn<CT>(className, "error"))}>{invalidMessage}</small>
+      )}
+    </div>
+  );
+}