@skalfa/skalfa-component 1.0.8 → 1.0.10

package/src/modal/ModalConfirm.component.tsx

@@ -1,12 +1,9 @@
 "use client"
 
 import { ReactNode, useEffect, useMemo, useState } from "react";
-import { faQuestion } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { api, ApiType, cn, pcn, registry, shortcut, useResponsive } from "@utils";
-import { ToastComponent } from "./Toast.component";
-import { ButtonComponent, ButtonProps } from "../button/Button.component";
-import { BottomSheetComponent } from "./BottomSheet.component";
+import { ButtonComponent, ButtonProps, BottomSheetComponent } from "@components";
+import { Icon } from "@skalfa/skalfa-icon";
 
 
 
@@ -37,7 +34,6 @@ export function ModalConfirmComponent({
   show,
   title,
   children,
-  icon,
   footer,
 
   submitControl,
@@ -66,47 +62,59 @@ export function ModalConfirmComponent({
   }, [show]);
   
 
-  const renderChildren = useMemo(() => {
+  const renderChildren = (actionSize: ButtonProps["size"] = 'md') => {
+    if (toast == "success") {
+      return (
+        <div className="flex flex-col items-center justify-center h-full py-6 transition-all duration-300 animate-intro-down">
+          <div className="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center">
+            <Icon icon={"solid/check"} className="text-primary text-2xl" />
+          </div>
+          <p className="text-primary text-lg font-semibold mt-4">{"Berhasil!"}</p>
+        </div>
+      )
+    }
+
     return (
       <>
         {title && (
           <div
             className={cn(
-              "flex flex-col gap-2 items-center text-primary",
+              "flex flex-col gap-2 p-6",
               pcn<CT>(className, "header")
             )}
           >
-            <div className="mt-6">
-              <FontAwesomeIcon
-                icon={icon || faQuestion}
-                className={`text-xl`}
-              />
-            </div>
-
             <h6 className="font-semibold text-lg">{title}</h6>
           </div>
         )}
 
         {children}
 
-        {footer && (
-          <div className={cn("modal-footer", pcn<CT>(className, "footer"))}>
-            {footer}
+        {toast == "failed" && (
+          <div className="px-4">
+            <div className="mt-4 w-full p-4 rounded-sm border border-danger bg-light-danger flex gap-4 items-center">
+              <div>
+                <div className="w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center">
+                  <Icon icon={"solid/exclamation-triangle"} className="text-danger text-lg" />
+                </div>
+              </div>
+              <p className="text-danger text-sm font-semibold">{"Terjadi Masalah, Coba ulangi lagi!"}</p>
+            </div>
           </div>
         )}
+
+        {renderAction(actionSize)}
       </>
     )
-  }, [title, footer, children])
+  }
 
 
   const renderAction = (size: ButtonProps["size"] = 'md') => {
     return (
-      <div className="flex justify-center pt-6">
+      <div className="flex justify-center gap-4 p-6 pt-2">
         <ButtonComponent
           label="Batal"
-          variant="simple"
+          variant="outline"
           onClick={() => onClose()}
-          className="text-foreground bg-background rounded-none"
           block
           size={size}
         />
@@ -138,16 +146,17 @@ export function ModalConfirmComponent({
 
               if (response?.status == 200 || response?.status == 201) {
                 setToast("success");
+                setTimeout(() => setToast(false), 1000);
                 submitControl?.onSuccess?.();
                 setLoading(false);
               } else {
                 setToast("failed");
+                setTimeout(() => setToast(false), 5000);
                 submitControl?.onError?.();
                 setLoading(false);
               }
             }
           }}
-          className="rounded-none"
           block
           size={size}
           {...submitControl}
@@ -176,9 +185,7 @@ export function ModalConfirmComponent({
               pcn<CT>(className, "base")
             )}
           >
-            {renderChildren}
-
-            {renderAction()}
+            {renderChildren()}
           </div>
         </>
       ) : (
@@ -187,33 +194,11 @@ export function ModalConfirmComponent({
             show={show}
             onClose={onClose}
             size={220}
-            footer={renderAction('lg')}
           >
-            {renderChildren}
+            {renderChildren('lg')}
           </BottomSheetComponent>
         </>
       )}
-      
-
-      <ToastComponent
-        show={toast == "failed"}
-        onClose={() => setToast(false)}
-        title="Gagal"
-        className="!border-danger header::text-danger"
-      >
-        <p className="px-3 pb-2 text-sm">
-          Gagal {title || ""}! cek data dan koneksi internet dan coba kembali!
-        </p>
-      </ToastComponent>
-
-      <ToastComponent
-        show={toast == "success"}
-        onClose={() => setToast(false)}
-        title="Berhasil"
-        className="!border-success header::text-success"
-      >
-        <p className="px-3 pb-2 text-sm">Berhasil {title || ""}!</p>
-      </ToastComponent>
     </>
   );
 }

package/src/modal/Toast.component.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { ReactNode, useEffect, useState } from "react";
-import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { cn, pcn } from "@utils";
 import { ButtonComponent } from "../button/Button.component";
 
@@ -99,7 +98,7 @@ export function ToastComponent({
             <div className="flex gap-2 items-center">
               <span className="text-xs text-foreground/50">{countdown}</span>
               <ButtonComponent
-                icon={faTimes}
+                icon="solid/times"
                 variant="simple"
                 paint="danger"
                 onClick={() => {

package/src/nav/Bottombar.component.tsx

@@ -1,14 +1,13 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClipboard, faCrosshairs, faHome, faSackDollar, faUserCircle } from "@fortawesome/free-solid-svg-icons";
 import { cn, pcn, useKeyboardOpen } from "@utils";
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 
 export interface BottombarItemProps {
-  icon       :  IconDefinition;
+  icon       :  IconName;
   path       :  string;
   activeKey ?:  string;
 }
@@ -20,11 +19,11 @@ export interface BottombarProps {
 }
 
 const defaultItems: BottombarItemProps[] = [
-  { icon: faHome, path: "/_example/bottombar", activeKey: "home" },
-  { icon: faClipboard, path: "/", activeKey: "clipboard" },
-  { icon: faCrosshairs, path: "/", activeKey: "crosshairs" },
-  { icon: faSackDollar, path: "/", activeKey: "sack-dollar" },
-  { icon: faUserCircle, path: "/", activeKey: "profile" },
+  { icon: "solid/home", path: "/_example/bottombar", activeKey: "home" },
+  { icon: "solid/clipboard", path: "/", activeKey: "clipboard" },
+  { icon: "solid/crosshairs", path: "/", activeKey: "crosshairs" },
+  { icon: "solid/sack-dollar", path: "/", activeKey: "sack-dollar" },
+  { icon: "solid/user-circle", path: "/", activeKey: "profile" },
 ];
 
 export function BottombarComponent({
@@ -60,7 +59,7 @@ export function BottombarComponent({
                     isActive && pcn(className, "active"),
                   )}
                 >
-                  <FontAwesomeIcon icon={item.icon} />
+                  <Icon icon={item.icon} />
                 </div>
               </Link>
             );

package/src/nav/Footer.component.tsx

@@ -1,9 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFacebook, faGithub, faInstagram, faLinkedin } from "@fortawesome/free-brands-svg-icons";
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 
 export interface FooterLinkProps {
   label: string;
@@ -16,7 +15,7 @@ export interface FooterColumnProps {
 }
 
 export interface FooterSocialProps {
-  icon: IconDefinition;
+  icon: IconName;
   path: string;
 }
 
@@ -33,10 +32,10 @@ export interface FooterProps {
 }
 
 const defaultSocials: FooterSocialProps[] = [
-  { icon: faFacebook as any, path: "" },
-  { icon: faLinkedin as any, path: "" },
-  { icon: faGithub as any, path: "https://github.com/SE-JE" },
-  { icon: faInstagram as any, path: "https://www.instagram.com/seje.digital/" },
+  { icon: "brands/facebook" as any, path: "" },
+  { icon: "brands/linkedin" as any, path: "" },
+  { icon: "brands/github" as any, path: "https://github.com/SE-JE" },
+  { icon: "brands/instagram" as any, path: "https://www.instagram.com/seje.digital/" },
 ];
 
 const defaultColumns: FooterColumnProps[] = [
@@ -131,7 +130,7 @@ export function FooterComponent({
             <div className="footer-socials-container">
               {socials.map((social, key) => (
                 <a href={social.path} key={key} target="_blank" rel="noopener noreferrer">
-                  <FontAwesomeIcon
+                  <Icon
                     icon={social.icon}
                     className="footer-social-icon"
                   />

package/src/nav/Headbar.component.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { useRouter } from "next/navigation";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import { ReactNode } from "react";
 
 
@@ -22,7 +22,7 @@ export function HeadbarComponent({ title, backHref, rightContent }: HeadbarProps
       <div className="flex items-center">
         {backHref && (
           <div className="w-8 aspect-square flex justify-center items-center cursor-pointer" onClick={() => typeof backHref != "boolean" ? router.push(backHref) : router.back()}>
-            <FontAwesomeIcon icon={faChevronLeft} className="text-secondary text-xl" />
+            <Icon icon="solid/chevron-left" className="text-secondary text-xl" />
           </div>
         )}
         <p className="text-lg font-bold px-2">{title}</p>

package/src/nav/Navbar.component.tsx

@@ -1,10 +1,9 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBell, faHistory, faStore, faUser } from "@fortawesome/free-solid-svg-icons";
 import { ButtonComponent } from "../button/Button.component";
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { cn } from "@utils";
 
 export interface NavbarItemProps {
@@ -16,7 +15,7 @@ export interface NavbarProps {
   logoTitle    ?:  string;
   logoSubtitle ?:  string;
   logoPath     ?:  string;
-  specialLink  ?:  { label: string; path: string; icon?: IconDefinition };
+  specialLink  ?:  { label: string; path: string; icon?: IconName };
   items        ?:  NavbarItemProps[];
   isLoggedIn   ?:  boolean;
   onLogin      ?:  () => void;
@@ -34,8 +33,8 @@ const defaultItems: NavbarItemProps[] = [
 const defaultSpecialLink = {
   label: "Special Link",
   path: "",
-  icon: faStore,
-};
+  icon: "solid/store",
+} as const;
 
 export function NavbarComponent({
   logoTitle = "Next Light v.3",
@@ -56,7 +55,7 @@ export function NavbarComponent({
           <h2 className="text-base">
             Ini untuk
             <Link href={specialLink.path} className="navbar-special-link">
-              {specialLink.icon && <FontAwesomeIcon icon={specialLink.icon} className="mr-1" />}
+              {specialLink.icon && <Icon icon={specialLink.icon} className="mr-1" />}
               {specialLink.label}
             </Link>
           </h2>
@@ -113,10 +112,10 @@ export function NavbarComponent({
               ) : (
                 <div className="flex gap-2 w-max items-center">
                   <div className="p-2 text-light-foreground hover:text-foreground cursor-pointer">
-                    <FontAwesomeIcon icon={faHistory} />
+                    <Icon icon="solid/history" />
                   </div>
                   <div className="p-2 text-light-foreground hover:text-foreground cursor-pointer">
-                    <FontAwesomeIcon icon={faBell} />
+                    <Icon icon="solid/bell" />
                   </div>
                   <div className="h-5 w-[1px] bg-foreground mx-2.5"></div>
                   <div
@@ -124,7 +123,7 @@ export function NavbarComponent({
                     onClick={onProfile}
                   >
                     <div className="h-10 bg-background rounded-full aspect-square overflow-hidden flex justify-center items-center">
-                      <FontAwesomeIcon icon={faUser} />
+                      <Icon icon="solid/user" />
                     </div>
                   </div>
                 </div>

package/src/nav/Sidebar.component.tsx

@@ -1,11 +1,11 @@
 "use client"
 
-import { Fragment, ReactNode, useEffect, useState } from "react";
+import { Fragment, ReactNode, useEffect, useState, } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { cn, pcn } from "@utils";
+import { useToggleContext } from "@contexts";
+import { Icon } from "@skalfa/skalfa-icon";
 
 
 
@@ -29,15 +29,11 @@ export interface SidebarHeadItemProps {
 };
 
 export interface sidebarProps {
-  head            ?:  any;
-  items           ?:  SidebarHeadItemProps[];
-  basePath        ?:  string;
-  show            ?:  boolean;
-  toggle          ?:  boolean;
-  onToggleChange  ?:  () => void;
-  children        ?:  any;
-  hasAccess       ?:  number[];
-  onChange        ?:  () => void;
+  id        ?:  string;
+  head      ?:  any;
+  footer    ?:  any;
+  items     ?:  SidebarHeadItemProps[];
+  basePath  ?:  string;
 
   /** Use custom class with: "backdrop::", "head-item::", "item::", "child-item::". */
   className?: string;
@@ -67,25 +63,20 @@ function SidebarWrapper({
 
 
 export function SidebarComponent({
+  id,
   head,
+  footer,
   items,
   basePath,
-  toggle,
-  onToggleChange,
-  // onChange,
-  // hasAccess,
   className = "",
 } : sidebarProps) {
-  const pathName           =  usePathname();
+  const pathName               =  usePathname();
+  const { toggle, setToggle }  =  useToggleContext()
 
   const [shows, setShows]  =  useState<string[]>([]);
 
   const setShow = (key: string) => {
-    setShows((prevShows) =>
-      prevShows?.find((pk) => pk === key)
-        ? prevShows.filter((pk) => pk !== key)
-        : [...prevShows, key],
-    );
+    setShows((prevShows) => prevShows?.find((pk) => pk === key) ? prevShows.filter((pk) => pk !== key) : [...prevShows, key]);
   };
 
   const checkShow = (key: string): boolean => {
@@ -130,29 +121,46 @@ export function SidebarComponent({
     });
   }, []);
 
+  useEffect(() => {
+    setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`, false)
+  }, [pathName]);
+
   return (
     <>
-      <div
+      <div 
         className={cn(
           "sidebar-backdrop",
-          toggle ? "scale-100 md:scale-0" : "scale-0",
+          toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "scale-100 lg:scale-0" : "scale-0",
           pcn<CT>(className, "backdrop"),
-        )}
-        onClick={() => onToggleChange?.()}
+        )} 
+        onClick={() => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`)}
       ></div>
-      <aside
+      <aside 
         className={cn(
           "sidebar-base scroll-sm",
-          toggle ? "scale-x-100 md:scale-x-0" : "scale-x-0 md:scale-x-100",
+          toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full sm:w-[280px]" : "w-0 sm:w-14 lg:w-[280px]",
           pcn<CT>(className, "base"),
         )}
       >
-        {head}
-        <nav className="flex flex-col flex-1 mt-3">
+        <div className={toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block"}>
+          {head}
+        </div>
+
+        <div 
+          className={toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "hidden" : "flex justify-center pt-4 h-full lg:hidden"}
+          onClick={() => setToggle(`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`)}
+        >
+          <Icon icon={"solid/bars"} />
+        </div>
+
+        <nav className={cn(
+          "flex flex-col flex-1 overflow-hidden", 
+          toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "w-full" : "w-0 lg:w-full",
+        )}>
           {items?.map((menu_head, menu_head_key) => {
             return (
               <Fragment key={menu_head_key}>
-                <div className="px-2 pt-2">
+                <div className="">
                   <div
                     className={cn(
                       "sidebar-head-item",
@@ -164,10 +172,9 @@ export function SidebarComponent({
                   >
                     {menu_head?.label}
                     {menu_head.collapse && (
-                      <FontAwesomeIcon
-                        icon={faChevronDown}
+                      <Icon
+                        icon={"solid/chevron-down"}
                         className={cn(
-                          "text-xs",
                           checkShow(String(menu_head_key)) && "rotate-180",
                         )}
                       />
@@ -189,16 +196,14 @@ export function SidebarComponent({
                             <div
                               className={cn(
                                 "sidebar-item",
-                                menu?.path &&
-                                  cekActive(menu?.path || "") &&
-                                  "sidebar-item-active",
+                                menu?.path && cekActive(menu?.path || "") && "sidebar-item-active",
                                 pcn<CT>(className, "item"),
                                 menu?.className,
                               )}
                             >
                               <div className="flex gap-2 items-center">
                                 {menu?.leftContent}
-                                <span className="text-sm font-medium">
+                                <span className="font-medium">
                                   {menu?.label}
                                 </span>
                               </div>
@@ -206,9 +211,9 @@ export function SidebarComponent({
                                 {menu?.rightContent}
 
                                 {menu?.items?.length && (
-                                  <FontAwesomeIcon
-                                    icon={faChevronUp}
-                                    className={`text-sm ${
+                                  <Icon
+                                    icon={"solid/chevron-up"}
+                                    className={`text-[10px] ${
                                       checkShow(
                                         `${menu_head_key}.${menu_key}`,
                                       ) || "rotate-180"
@@ -251,7 +256,7 @@ export function SidebarComponent({
                                         >
                                           <div className="flex gap-2 items-center">
                                             {child?.leftContent}
-                                            <span className="text-sm font-medium">
+                                            <span className="text-[10px] font-medium">
                                               {child?.label}
                                             </span>
                                           </div>
@@ -259,9 +264,9 @@ export function SidebarComponent({
                                             {child?.rightContent}
 
                                             {child?.items?.length && (
-                                              <FontAwesomeIcon
-                                                icon={faChevronUp}
-                                                className={`block text-sm ${
+                                              <Icon
+                                                icon={"solid/chevron-up"}
+                                                className={`block text-[10px] ${
                                                   checkShow(
                                                     `${menu_head_key}.${menu_key}`,
                                                   ) || "rotate-180"
@@ -284,6 +289,10 @@ export function SidebarComponent({
             );
           })}
         </nav>
+
+        <div className={toggle[`SIDEBAR${id ? "" : "_" + id?.toUpperCase()}`] ? "block" : "hidden lg:block"}>
+          {footer}
+        </div>
       </aside>
     </>
   );
@@ -291,7 +300,7 @@ export function SidebarComponent({
 
 export function SidebarContentComponent({ children }: { children: ReactNode }) {
   return (
-    <main className="sidebar-main-content">
+    <main className="w-full sm:ml-14 sm:w-[calc(100vw-56px)] lg:ml-[280px] lg:w-[calc(100vw-280px)] min-h-screen overflow-x-hidden">
       {children}
     </main>
   );