@skalfa/skalfa-component 1.0.8 → 1.0.9

package/src/table/ControlBar.component.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { ReactNode, useEffect, useRef } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowDownZA, faArrowUpAZ, faEllipsisV, faEyeLowVision, faMagnifyingGlass, faPlus, faRefresh, faSearch, faSliders, faSort } from '@fortawesome/free-solid-svg-icons';
 import { ApiFilterType, cn, conversion, shortcut, useResponsive } from '@utils';
 import { useToggleContext } from '@contexts';
 import { InputCheckboxComponent } from "../input/InputCheckbox.component";
@@ -121,7 +121,7 @@ export function ControlBarComponent({
     <>
       <div className={cn("control-bar", className)}>
         {(isSm ? [
-          ...(options?.filter((op, iop) => iop == 0 || op == "REFRESH") || []), 
+          ...(options?.filter((op) => op == "SEARCH" || op == "REFRESH") || []), 
           ...(options && options?.length > 1 ? ['MOBILE_OPTION'] : [])
         ] : options)?.map((option: ControlBarOptionType, key: number) => {
           {
@@ -133,7 +133,7 @@ export function ControlBarComponent({
             return (
               <div className="control-bar-create-wrapper" key="button-add">
                 <ButtonComponent
-                  icon={faPlus}
+                  icon="solid/plus"
                   label="Tambah Data"
                   size="sm"
                   onClick={() => setToggle(`MODAL_FORM_${conversion.strSnake(id).toUpperCase()}`)}
@@ -156,7 +156,7 @@ export function ControlBarComponent({
                   ref={searchRef}
                   name="search"
                   placeholder="Cari disini..."
-                  rightIcon={faMagnifyingGlass}
+                  rightIcon="solid/magnifying-glass"
                   value={search}
                   onChange={(e) => onSearch?.(e)}
                   className={cn("control-bar-search-input", searchable && "control-bar-search-input-searchable")}
@@ -175,7 +175,7 @@ export function ControlBarComponent({
               <div className="control-bar-searchable-wrapper" key={key}>
                 <SelectComponent
                   name="searchableColumn"
-                  leftIcon={faSearch}
+                  leftIcon="solid/search"
                   options={searchableOptions?.map((column) => {
                     return {
                       label: column.label,
@@ -200,7 +200,7 @@ export function ControlBarComponent({
             return (
               <div className="control-bar-button-wrapper" key={key}>
                 <ButtonComponent
-                  icon={faEyeLowVision}
+                  icon="solid/eye-low-vision"
                   variant="outline"
                   className="control-bar-icon-button"
                   onClick={() => setToggle("SELECTABLE")}
@@ -243,7 +243,7 @@ export function ControlBarComponent({
             return sortableOptions?.length ? (
               <div className="control-bar-button-wrapper" key={key}>
                 <ButtonComponent
-                  icon={faSort}
+                  icon="solid/sort"
                   variant="outline"
                   className="control-bar-icon-button"
                   onClick={() => setToggle("SORT")}
@@ -270,7 +270,7 @@ export function ControlBarComponent({
 
                             {sortBy && (
                               <div className='control-bar-sort-active-icon'>
-                                <FontAwesomeIcon icon={sortBy == "desc" ? faArrowDownZA : faArrowUpAZ} className='control-bar-sort-icon' /> 
+                                <Icon icon={sortBy == "desc" ? "solid/arrow-down-z-a" : "solid/arrow-up-a-z"} className='control-bar-sort-icon' /> 
                                 {sort?.length && sort?.length > 1 && <span className='control-bar-sort-badge'>{sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1}</span>}
                               </div>
                             )}
@@ -293,7 +293,7 @@ export function ControlBarComponent({
             return (
               <div className="control-bar-button-wrapper-refresh" key={key}>
                 <ButtonComponent
-                  icon={faRefresh}
+                  icon="solid/refresh"
                   variant="outline"
                   className="control-bar-icon-button"
                   onClick={() => onRefresh?.()}
@@ -312,7 +312,7 @@ export function ControlBarComponent({
             return (
               <div className="control-bar-button-wrapper" key={key}>
                 <ButtonComponent
-                  icon={faSliders}
+                  icon="solid/sliders"
                   label="Filter"
                   variant="outline"
                   className="control-bar-filter-button"
@@ -332,7 +332,7 @@ export function ControlBarComponent({
             return (
               <div className="control-bar-button-wrapper" key={key}>
                 <ButtonComponent
-                  icon={faEllipsisV}
+                  icon="solid/ellipsis-v"
                   variant="outline"
                   className="control-bar-icon-button"
                   onClick={() => setToggle("MOBILE_OPTION")}
@@ -365,7 +365,7 @@ export function ControlBarComponent({
           maxSize="98vh"
         >
           <div className='control-bar-mobile-container'>
-            {options?.filter((op, iop) => (iop != 0 && op != "CREATE" && op != "REFRESH"))?.map((option: ControlBarOptionType, key: number) => {
+            {options?.filter((op, iop) => (iop != 0 && op != "CREATE" && op != "SEARCH" && op != "REFRESH"))?.map((option: ControlBarOptionType, key: number) => {
               {
                 // =========================>
                 // ## Search Field
@@ -377,7 +377,7 @@ export function ControlBarComponent({
                     <InputComponent
                       name="search"
                       placeholder="Cari disini..."
-                      rightIcon={faMagnifyingGlass}
+                      rightIcon="solid/magnifying-glass"
                       value={search}
                       onChange={(e) => onSearch?.(e)}
                     />
@@ -395,7 +395,7 @@ export function ControlBarComponent({
                   <div key={key}>
                     <SelectComponent
                       name="searchableColumn"
-                      leftIcon={faSearch}
+                      leftIcon="solid/search"
                       options={searchableOptions?.map((column) => {
                         return {
                           label: column.label,
@@ -459,7 +459,7 @@ export function ControlBarComponent({
 
                             {sortBy && (
                               <div className='text-primary'>
-                                <FontAwesomeIcon icon={sortBy == "desc" ? faArrowDownZA : faArrowUpAZ} className='text-xs' /> 
+                                <Icon icon={sortBy == "desc" ? "solid/arrow-down-z-a" : "solid/arrow-up-a-z"} className='text-xs' /> 
                                 {sort?.length && sort?.length > 1 && <span className='text-[9px] ml-1'>{sort.findIndex((s) => s.split(" ")?.at(0) == option?.selector) + 1}</span>}
                               </div>
                             )}

package/src/table/FilterComponent.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { useState, useEffect } from "react";
-import { faChevronUp, faEllipsisH, faPlus, faRotate, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { ApiFilterType, cn, pcn, useResponsive } from "@utils";
 import { ButtonComponent } from "../button/Button.component";
 import { ChipComponent } from "../chip/Chip.component";
@@ -12,7 +11,6 @@ import { InputNumberComponent } from "../input/InputNumber.component";
 import { ModalComponent } from "../modal/Modal.component";
 import { SelectComponent } from "../input/Select.component";
 import { useToggleContext } from "@contexts";
-import { faBookmark } from "@fortawesome/free-regular-svg-icons";
 
 type CT = "base" | "title";
 
@@ -122,7 +120,7 @@ export function FilterComponent({
           <div className="filter-panel-controls">
             <div className="filter-panel-bookmarks-wrapper">
               <ButtonComponent
-                icon={faBookmark}
+                icon="solid/bookmark"
                 variant="outline"
                 paint="primary"
                 className="filter-panel-bookmark-btn icon::text-slate-400"
@@ -140,7 +138,7 @@ export function FilterComponent({
 
               {bookmarks?.length > 5 && (
                 <ButtonComponent
-                  icon={faEllipsisH}
+                  icon="solid/ellipsis-h"
                   variant="outline"
                   paint="primary"
                   className="filter-panel-bookmark-btn icon::text-slate-400"
@@ -151,7 +149,7 @@ export function FilterComponent({
             </div>
 
             <ButtonComponent
-              icon={faRotate}
+              icon="solid/rotate"
               label="Bersihkan"
               variant="outline"
               paint="primary"
@@ -162,7 +160,7 @@ export function FilterComponent({
 
             {onMinimize && (
               <ButtonComponent
-                icon={faChevronUp}
+                icon="solid/chevron-up"
                 variant="outline"
                 paint="primary"
                 className="filter-panel-bookmark-btn icon::text-slate-400"
@@ -218,7 +216,7 @@ export function FilterComponent({
               
               {isSm && (
                 <ButtonComponent 
-                  icon={faTimes}
+                  icon="solid/times"
                   paint="danger"
                   variant="outline"
                   onClick={() => removeFilter(i)}
@@ -244,7 +242,7 @@ export function FilterComponent({
 
               {!isSm && (
                 <ButtonComponent 
-                  icon={faTimes}
+                  icon="solid/times"
                   paint="danger"
                   variant="outline"
                   onClick={() => removeFilter(i)}
@@ -257,7 +255,7 @@ export function FilterComponent({
 
         <ButtonComponent
           label="Tambahkan"
-          icon={faPlus}
+          icon="solid/plus"
           variant="outline"
           paint="primary"
           size={isSm ? "xs" : "sm"}
@@ -277,7 +275,7 @@ export function FilterComponent({
               <p className="filter-bookmark-name">{b.name}</p>
               <div className="flex gap-2">
                 <ButtonComponent
-                  icon={faPlus}
+                  icon="solid/plus"
                   variant="outline"
                   paint="primary"
                   className=""
@@ -288,7 +286,7 @@ export function FilterComponent({
                   }}
                 />
                 <ButtonComponent
-                  icon={faTimes}
+                  icon="solid/times"
                   variant="outline"
                   paint="danger"
                   className=""

package/src/table/Pagination.component.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { useEffect, useState } from "react";
-import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { cn, pcn } from "@utils";
 import { ButtonComponent } from "../button/Button.component";
 import { InputRadioComponent } from "../input/InputRadio.component";
@@ -62,7 +62,7 @@ export function PaginationComponent({
                 className="pagination-overflow"
                 onClick={() => onChange?.(totalRow, paginate, page - 1)}
               >
-                <FontAwesomeIcon icon={faChevronLeft} />
+                <Icon icon="solid/chevron-left" />
               </button>
             )}
 
@@ -111,7 +111,7 @@ export function PaginationComponent({
                 className="pagination-overflow"
                 onClick={() => onChange?.(totalRow, paginate, page + 1)}
               >
-                <FontAwesomeIcon icon={faChevronRight} />
+                <Icon icon="solid/chevron-right" />
               </button>
             )}
           </div>
@@ -132,14 +132,14 @@ export function PaginationComponent({
           <div className="pagination-mobile-controls">
             {page > 1 && (
               <ButtonComponent 
-                icon={faChevronLeft}
+                icon="solid/chevron-left"
                 onClick={() => onChange?.(totalRow, paginate, page - 1)}
                 size="sm"
               />
             )}
             {page < lastPage && (
               <ButtonComponent 
-                icon={faChevronRight}
+                icon="solid/chevron-right"
                 onClick={() => onChange?.(totalRow, paginate, page + 1)}
                 size="sm"
               />

package/src/table/Table.component.tsx

@@ -1,8 +1,8 @@
 "use client"
+import { Icon, type IconName } from "@skalfa/skalfa-icon";
+
 
 import { isValidElement, ReactNode, useEffect, useMemo, useRef, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowDownZA, faArrowUpAZ, faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
 import { ApiFilterType, cn, pcn, useLazySearch, useResponsive, conversion } from "@utils";
 import { ControlBarComponent, ControlBarOptionType } from "./ControlBar.component";
 import { PaginationComponent, PaginationProps } from "./Pagination.component";
@@ -158,8 +158,8 @@ export function TableComponent({
               {column.label}
 
               {!!sortColumn && (
-                <FontAwesomeIcon
-                  icon={sortDirection == "desc" ? faArrowDownZA : faArrowUpAZ}
+                <Icon
+                  icon={sortDirection == "desc" ? "solid/arrow-down-z-a" : "solid/arrow-up-a-z"}
                   className="text-light-foreground/70"
                 />
               )}
@@ -379,7 +379,7 @@ export function TableComponent({
                               }
                             >
                               <div className="table-floating-action-icon-wrapper">
-                                <FontAwesomeIcon icon={floatingActionActive === false || floatingActionActive != key ? faChevronLeft : faChevronRight}/>
+                                <Icon icon={floatingActionActive === false || floatingActionActive != key ? "solid/chevron-left" : "solid/chevron-right"}/>
                               </div>
 
                               <div className={cn("table-floating-action-content", floatingActionActive === key && "table-floating-action-content-active")}>

package/src/wrap/Swipe.component.tsx

@@ -2,7 +2,7 @@
 
 import { ReactNode, useRef, useState } from 'react'
 import { cn } from '@utils';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Icon } from '@skalfa/skalfa-icon';
 
 
 export type SwipeActionType = {
@@ -84,7 +84,7 @@ export function SwipeComponent({
           offset > 0 ? "opacity-100" : "opacity-0"
         )}
       >
-        {leftActionControl?.icon && <FontAwesomeIcon icon={leftActionControl?.icon} />} {leftActionControl?.label}
+        {leftActionControl?.icon && <Icon icon={leftActionControl?.icon} />} {leftActionControl?.label}
       </div>
 
       <div 
@@ -95,7 +95,7 @@ export function SwipeComponent({
           offset < 0 ? "opacity-100" : "opacity-0"
         )}
       >
-        {rightActionControl?.icon && <FontAwesomeIcon icon={rightActionControl?.icon} />} {rightActionControl?.label}
+        {rightActionControl?.icon && <Icon icon={rightActionControl?.icon} />} {rightActionControl?.label}
       </div>
 
       <div

package/src/types.d.ts

@@ -1,7 +0,0 @@
-declare module "@contexts" {
-  export function useToggleContext(): {
-    setToggle: (key: string, value?: any) => void;
-    toggle: Record<string, any>;
-  };
-  export function useAppContext(): any;
-}