@skalfa/skalfa-component 1.0.6 → 1.0.8

package/dist/index.js

@@ -186,15 +186,15 @@ exports.ShortcutProvider = require("./wrap/ShortcutProvider").ShortcutProvider;
 exports.SwipeComponent = require("./wrap/Swipe.component").SwipeComponent;
 
 const _utils_1 = require("@utils");
-const Table_component_js_1 = require("./table/Table.component.js");
-const Button_component_js_1 = require("./button/Button.component.js");
-const Select_component_js_1 = require("./input/Select.component.js");
-const Modal_component_js_1 = require("./modal/Modal.component.js");
-const FilterComponent_js_1 = require("./table/FilterComponent.js");
+const Table_component_1 = require("./table/Table.component");
+const Button_component_1 = require("./button/Button.component");
+const Select_component_1 = require("./input/Select.component");
+const Modal_component_1 = require("./modal/Modal.component");
+const FilterComponent_1 = require("./table/FilterComponent");
 const _contexts_1 = require("@contexts");
-_utils_1.registry.register("TableComponent", Table_component_js_1.TableComponent);
-_utils_1.registry.register("ButtonComponent", Button_component_js_1.ButtonComponent);
-_utils_1.registry.register("SelectComponent", Select_component_js_1.SelectComponent);
-_utils_1.registry.register("ModalComponent", Modal_component_js_1.ModalComponent);
-_utils_1.registry.register("FilterComponent", FilterComponent_js_1.FilterComponent);
+_utils_1.registry.register("TableComponent", Table_component_1.TableComponent);
+_utils_1.registry.register("ButtonComponent", Button_component_1.ButtonComponent);
+_utils_1.registry.register("SelectComponent", Select_component_1.SelectComponent);
+_utils_1.registry.register("ModalComponent", Modal_component_1.ModalComponent);
+_utils_1.registry.register("FilterComponent", FilterComponent_1.FilterComponent);
 _utils_1.registry.register("useToggleContext", _contexts_1.useToggleContext);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": ["skalfa", "skalfa-app", "skalfa-component", "next-framework", "next-template"],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": ["dist", "src"],
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "postbuild": "bun fix-exports.js"

package/src/accordion/Accordion.component.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import { ReactNode, useEffect, useState } from "react";
+import { faChevronDown, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "container" | "head" | "active" | "base";
+
+export interface AccordionProps {
+  setActive   ?:  number | null;
+  items        :  { head: ReactNode; content: ReactNode }[];
+  horizontal  ?:  boolean;
+  className   ?:  string;
+};
+
+
+
+export function AccordionComponent({
+  items,
+  setActive = null,
+  horizontal = false,
+
+  /** Use custom class with: "container::", "head::", "active::". */
+  className = "",
+}: AccordionProps) {
+  const [isActive, setIsActive] = useState<number | null>(setActive);
+
+  useEffect(() => {
+    setIsActive(setActive);
+  }, [setActive]);
+
+  return (
+    <div
+      className={cn(
+        "accordion",
+        horizontal ? "accordion-horizontal" : "accordion-vertical",
+        pcn<CT>(className, "container"),
+      )}
+    >
+      {items.map(({ head, content }, key) => (
+        <div
+          key={key}
+          className={cn(
+            "accordion-item",
+            horizontal ? "accordion-item-horizontal" : "accordion-item-vertical",
+          )}
+        >
+          <div
+            className={cn(
+              "accordion-head",
+              horizontal ? "accordion-head-horizontal" : "accordion-head-vertical",
+              pcn<CT>(className, "head"),
+            )}
+            onClick={() => setIsActive(isActive === key ? null : key)}
+          >
+            <div>{head}</div>
+            <div
+              className={cn(
+                "w-min transition-transform",
+                isActive !== key && "rotate-180",
+              )}
+            >
+              <FontAwesomeIcon icon={horizontal ? faChevronLeft : faChevronDown} />
+            </div>
+          </div>
+          <div
+            className={cn(
+              "accordion-content",
+              horizontal
+                ? isActive === key
+                  ? "accordion-content-horizontal-active"
+                  : "accordion-content-horizontal-inactive"
+                : isActive === key
+                ? "accordion-content-vertical-active"
+                : "accordion-content-vertical-inactive",
+              pcn<CT>(className, "base"),
+              isActive === key && pcn<CT>(className, "active"),
+            )}
+          >{content}</div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/breadcrumb/Breadcrumb.component.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import { Fragment, ReactNode } from "react";
+import Link from "next/link";
+import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, pcn } from "@utils";
+
+
+
+type CT = "container" | "active" | "base";
+
+export interface BreadcrumbItemProps {
+  path        :  string;
+  label       :  string;
+  className  ?:  string;
+};
+
+export interface BreadcrumbProps {
+  items              :  BreadcrumbItemProps[];
+  square            ?:  boolean;
+  separatorContent  ?:  string | ReactNode;
+
+  /** Use custom class with: "container::", "active::". */
+  className  ?:  string;
+};
+
+
+export function BreadcrumbComponent({
+  items,
+  className  =  "",
+  square     =  false,
+  separatorContent,
+}: BreadcrumbProps) {
+  return (
+    <nav
+      className={cn(
+        "breadcrumb",
+        pcn<CT>(className, "container"),
+      )}
+    >
+      <ol className="breadcrumb-list">
+        {items.map((item, index) => {
+          const isActive = index === items.length - 1;
+
+          return (
+            <Fragment key={item.path}>
+              <li>
+                <Link
+                  href={item.path}
+                  className={cn(
+                    "breadcrumb-link",
+                    square && "breadcrumb-link-square",
+                    isActive && !square && "breadcrumb-link-active",
+                    isActive && square && "breadcrumb-link-square-active",
+                    pcn<CT>(className, "base"),
+                    isActive && pcn<CT>(className, "active"),
+                  )}
+                >
+                  {item.label}
+                </Link>
+              </li>
+              
+              {!isActive && (
+                <li className="breadcrumb-separator">
+                  {separatorContent || (
+                    <FontAwesomeIcon
+                      icon={faChevronRight}
+                    />
+                  )}
+                </li>
+              )}
+            </Fragment>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/button/Button.component.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { ReactNode } from "react";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cn, pcn } from "@utils";
+
+type CT = "icon" | "loading" | "base";
+
+export interface ButtonProps {
+  type      ?:  "submit" | "button";
+  label     ?:  string | ReactNode;
+  variant   ?:  "solid" | "outline" | "light" | "simple";
+  paint     ?:  "primary" | "secondary" | "success" | "danger" | "warning";
+  rounded   ?:  boolean | string;
+  block     ?:  boolean;
+  disabled  ?:  boolean;
+  size      ?:  "xs" | "sm" | "md" | "lg";
+  onClick   ?:  any;
+  href      ?:  string;
+  icon      ?:  any;
+  loading   ?:  boolean;
+  hover     ?:  boolean;
+  tips      ?:  string; // Tooltip / title attribute
+  title     ?:  string;
+
+  /** Use custom class with: "icon::", "loading::". */
+  className?: string;
+};
+
+export function ButtonComponent({
+  type       =  "button",
+  label,
+  variant    =  "solid",
+  paint      =  "primary",
+  rounded,
+  block,
+  disabled,
+  size       =  "md",
+  onClick,
+  href,
+  icon,
+  loading,
+  tips,
+  title,
+  className  =  "",
+}: ButtonProps) {
+  const isIconButton = icon && !label;
+
+  return (
+    <ButtonComponentWrapper
+      type={type}
+      className={cn(
+        "button",
+        `button-${variant}-${paint}`,
+        isIconButton ? `icon-button-${size}` : `button-${size}`,
+        rounded && "rounded-full",
+        !isIconButton && block && "w-full justify-center",
+        pcn<CT>(className, "base"),
+      )}
+      disabled={disabled || loading}
+      onClick={onClick}
+      href={href}
+      title={tips || title}
+    >
+      {loading ? (
+        <div className={cn("button-loading", pcn<CT>(className, "loading"))}></div>
+      ) : (
+        icon && (
+          <FontAwesomeIcon
+            icon={icon}
+            className={cn("button-icon", pcn<CT>(className, "icon"))}
+          />
+        )
+      )}
+      {!isIconButton && label}
+    </ButtonComponentWrapper>
+  );
+}
+
+const ButtonComponentWrapper = ({ children, href, ...props }: ButtonProps & { children?: ReactNode }) => {
+  return !href ? (
+    <button {...(props as any)}>{children}</button>
+  ) : (
+    <Link href={href} {...(props as any)}>
+      {children}
+    </Link>
+  );
+};

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>
+    </>
+  );
+}