@licklist/design 0.66.8-dev.2 → 0.66.9-dev.1

package/src/setting/admin/AdminSettingForm.tsx

@@ -11,7 +11,7 @@ import Col from "react-bootstrap/Col";
 import { Link } from "react-router-dom";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
-import { FaCommentAlt } from "react-icons/fa";
+import Icon from "../../static/Icon";
 import { PaymentFeeForm, PaymentFeeFormFieldValues } from "./PaymentFeeForm";
 import { Currency } from "../../types/currency";
 
@@ -74,7 +74,12 @@ export const AdminSettingForm = ({
           <InputGroup>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <FaCommentAlt size={16} />
+                <Icon
+                  type="comment-alt"
+                  style={{
+                    width: "1rem",
+                  }}
+                />
               </InputGroup.Text>
             </InputGroup.Prepend>
 

package/src/setting/admin/PaymentFeeForm.tsx

@@ -6,8 +6,8 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaPercentage, FaPoundSign } from "react-icons/fa";
-import { WarningMessage } from "../../static";
+
+import { WarningMessage, Icon } from "../../static";
 
 export type PaymentFeeFormFieldValues = {
   feeInPercent: number;
@@ -64,7 +64,12 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <FaPercentage size={10} />
+                      <Icon
+                        type="percentage"
+                        style={{
+                          width: ".7rem",
+                        }}
+                      />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -112,7 +117,12 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <FaPoundSign size={10} />
+                      <Icon
+                        type="pound-sign"
+                        style={{
+                          width: ".7rem",
+                        }}
+                      />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -157,7 +167,12 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <FaPoundSign size={10} />
+                      <Icon
+                        type="pound-sign"
+                        style={{
+                          width: ".7rem",
+                        }}
+                      />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -214,7 +229,12 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <FaPercentage size={10} />
+                      <Icon
+                        type="percentage"
+                        style={{
+                          width: ".7rem",
+                        }}
+                      />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 
@@ -259,7 +279,12 @@ export function PaymentFeeForm({ isLoading = false }: PaymentFeeFormProps) {
                 <InputGroup hasValidation>
                   <InputGroup.Prepend>
                     <InputGroup.Text>
-                      <FaPoundSign size={10} />
+                      <Icon
+                        type="pound-sign"
+                        style={{
+                          width: ".7rem",
+                        }}
+                      />
                     </InputGroup.Text>
                   </InputGroup.Prepend>
 

package/src/setting/dashboard/FinancialDataForm.tsx

@@ -5,7 +5,7 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaIdBadge, FaMoneyCheckAlt, FaUser } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export type FinancialDataFormFieldValues = {
   accountName: string;
@@ -45,7 +45,12 @@ export function FinancialDataForm({
           <InputGroup>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <FaUser size={16} />
+                <Icon
+                  type="user"
+                  style={{
+                    width: "1rem",
+                  }}
+                />
               </InputGroup.Text>
             </InputGroup.Prepend>
 
@@ -59,7 +64,12 @@ export function FinancialDataForm({
           <InputGroup hasValidation>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <FaIdBadge size={16} />
+                <Icon
+                  type="id-badge"
+                  style={{
+                    width: "1rem",
+                  }}
+                />
               </InputGroup.Text>
             </InputGroup.Prepend>
 
@@ -105,7 +115,12 @@ export function FinancialDataForm({
           <InputGroup hasValidation>
             <InputGroup.Prepend>
               <InputGroup.Text>
-                <FaMoneyCheckAlt size={28} />
+                <Icon
+                  type="money-check-alt"
+                  style={{
+                    width: "1.7rem",
+                  }}
+                />
               </InputGroup.Text>
             </InputGroup.Prepend>
 

package/src/setting/dashboard/ProviderSettingForm.tsx

@@ -6,7 +6,7 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaPhone } from "react-icons/fa";
+import Icon from "../../static/Icon";
 import { SelectItem } from "../../types/generic/SelectItem";
 // @TODO not for first release
 // import { Button } from "react-bootstrap";
@@ -113,7 +113,12 @@ export const ProviderSettingForm = ({
             <InputGroup>
               <InputGroup.Prepend>
                 <InputGroup.Text>
-                  <FaPhone size={16} />
+                  <Icon
+                    type="phone"
+                    style={{
+                      width: "1rem",
+                    }}
+                  />
                 </InputGroup.Text>
               </InputGroup.Prepend>
 

package/src/setting/dashboard/components/IpInput.tsx

@@ -12,7 +12,7 @@ import {
 import { Button, FormControl, InputGroup } from "react-bootstrap";
 import { FormProvider, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaTimes } from "react-icons/fa";
+import { Icon } from "../../../static";
 
 export interface IpInputProps {
   onChange: (value: string) => void;
@@ -154,7 +154,7 @@ export function IpInput({ onChange, onRemove, value }: IpInputProps) {
             disabled={!isRemovable}
             onClick={onRemove}
           >
-            <FaTimes size={14} color="red" />
+            <Icon type="times" width=".55rem" height=".9rem" color="red" />
           </Button>
         </InputGroup.Text>
         <FormControl.Feedback type="invalid">

package/src/setting/dashboard/snippet-templates/card/SnippetTemplateCard.tsx

@@ -1,7 +1,7 @@
 import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
-import { FaTrashAlt } from "react-icons/fa";
+import { Icon } from "../../../../static";
 
 export interface SnippetTemplateCardProps extends HasPermissionProp {
   name: string;
@@ -31,7 +31,7 @@ export function SnippetTemplateCard({
             className="snippet-template-card-button"
             onClick={onRemove}
           >
-            <FaTrashAlt />
+            <Icon type="trash-alt" />
           </button>
         )}
       </div>

package/src/setting/dashboard/snippets/card/SnippetCard.tsx

@@ -5,9 +5,9 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import clsx from "clsx";
 import { OverlayTrigger, Popover, ListGroup } from "react-bootstrap";
 import { useId } from "@react-aria/utils";
-import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { MenuButton } from "../../../../table";
 import { ConfirmModal } from "../../../../modals";
+import { Icon } from "../../../../static";
 
 export interface SnippetCardProps extends HasPermissionProp {
   name: string;
@@ -42,7 +42,7 @@ export function SnippetCard({
         <div className="d-flex align-items-center">
           {isDefault && <div className="mr-4">{t("Design:default")}</div>}
           <div className="product-set-card-menu-eye-container">
-            <FaEye color="#0E8CE2" size={20} />
+            <Icon type="eye" color="#0E8CE2" width="20" />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -70,7 +70,7 @@ export function SnippetCard({
                             confirm(onRemove);
                           }}
                           name={t("remove")}
-                          icon={<FaTrashAlt size={12} />}
+                          icon="trash-alt"
                           className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                           rightIcon
                         />
@@ -90,7 +90,7 @@ export function SnippetCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <FaEllipsisH />
+              <Icon type="ellipsis-h" />
             </button>
           </OverlayTrigger>
         </div>

package/src/sidebar/elements/ReturnBack.tsx

@@ -1,6 +1,6 @@
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { FaChevronLeft } from "react-icons/fa";
+import Icon from "../../static/Icon";
 
 export interface ReturnBackProps {
   onClick: () => void;
@@ -12,7 +12,7 @@ function ReturnBack({ onClick }: ReturnBackProps) {
   return (
     <div className="sidebar-return-back-container">
       <Button onClick={onClick} variant="outline-primary">
-        <FaChevronLeft />
+        <Icon type="chevron-left" height="1rem" />
         <span className="sidebar-return-back__title">{t("backToCompany")}</span>
       </Button>
     </div>

package/src/slide-curtain/SlideCurtain.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { FaEllipsisH } from "react-icons/fa";
 import { useSwipeable } from "react-swipeable";
+import Icon from "../static/Icon";
 
 const formOffsetBuffer = 90;
 
@@ -52,7 +52,11 @@ export function SlideCurtain({ children }) {
         {...handlers}
         ref={passRefToSwieable}
       >
-        <FaEllipsisH size={24} className="slide-form__swipe-trigger__icon" />
+        <Icon
+          type="ellipsis-h"
+          height="1.5rem"
+          className="slide-form__swipe-trigger__icon"
+        />
       </div>
       <div className="slide-form__content">{children}</div>
     </div>

package/src/snippet/snippet-template/settings/SettingButton.tsx

@@ -1,6 +1,6 @@
 import Button from "react-bootstrap/Button";
 import clsx from "clsx";
-import { FaCog } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 import { snippetTemplateViews } from "../context/snippetTemplateView";
 
 export interface SettingButtonProps extends React.PropsWithChildren<unknown> {
@@ -27,7 +27,7 @@ export const SettingButton = ({
         className={clsx("snippet-template__setting d-inline", className)}
         onClick={() => onClick(view as keyof typeof snippetTemplateViews)}
       >
-        <FaCog size={16} />
+        <Icon type="cog" style={{ width: 16 }} />
       </Button>
     </div>
   );

package/src/sortable-list/CreateSortableListItem.tsx

@@ -1,4 +1,4 @@
-import { FaPlus } from "react-icons/fa";
+import { Icon } from "../static";
 
 interface CreateSortableListItemProps {
   onClick: () => void;
@@ -16,7 +16,12 @@ export function CreateSortableListItem({
       type="button"
     >
       <span>{title}</span>
-      <FaPlus size={32} className="rounded sortable-list-item-icon p-2" />
+      <Icon
+        type="plus"
+        height="2rem"
+        width="2rem"
+        className="rounded sortable-list-item-icon p-2"
+      />
     </button>
   );
 }

package/src/sortable-tree/SortableTreeItem.tsx

@@ -9,8 +9,9 @@ import { CSS } from "@dnd-kit/utilities";
 import { Button, Collapse, Modal } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { FaEllipsisH, FaGripVertical, FaMinus } from "react-icons/fa";
+
 import { ConfirmModal } from "../modals";
+import Icon from "../static/Icon";
 import { DeleteFieldButton } from "../product-set/elements/DeleteFieldButton";
 
 const DRAG_RADIUS_LIMIT = 5;
@@ -204,7 +205,7 @@ export function SortableTreeItem({
             onMouseUp={onHandleExpand}
           >
             {expanded ? (
-              <FaMinus size={10} />
+              <Icon type="minus" width=".7rem" />
             ) : (
               <div className="expand-icon-container">
                 <div />
@@ -250,7 +251,7 @@ export function SortableTreeItem({
                   {...attributes}
                   {...listeners}
                 >
-                  <FaGripVertical />
+                  <Icon type="grip-vertical" />
                 </Button>
               )}
               <Button
@@ -290,7 +291,7 @@ export function SortableTreeItem({
                   onClick={(e) => onEdit(e)}
                   onKeyDown={(e) => e.stopPropagation()}
                 >
-                  <FaEllipsisH color="#0E8CE2" size={16} />
+                  <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
                 </div>
               </Button>
             </div>

package/src/static/Icon.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { config, IconProp, library } from "@fortawesome/fontawesome-svg-core";
+import { fab } from "@fortawesome/free-brands-svg-icons";
+import { fas } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { CSSProperties } from "react";
+
+config.autoAddCss = false;
+
+// @ts-ignore
+library.add(fas, fab);
+
+type Props = {
+  type: IconProp | string | [string, string];
+  style?: CSSProperties;
+  color?: string;
+  height?: string;
+  width?: string;
+  className?: string;
+};
+
+function Icon(props: Props) {
+  const { type, style, color, height, width, className } = props;
+
+  return (
+    <FontAwesomeIcon
+      icon={type as IconProp}
+      style={style}
+      color={color}
+      height={height}
+      width={width}
+      className={className}
+    />
+  );
+}
+
+export default Icon;

package/src/static/RestrictedAccess.tsx

@@ -1,7 +1,7 @@
 import { Button } from "react-bootstrap";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { useTranslation } from "react-i18next";
-import { FaArrowLeft } from "react-icons/fa";
+import Icon from "./Icon";
 
 function RestrictedAccess() {
   const { t } = useTranslation("Design");
@@ -13,7 +13,7 @@ function RestrictedAccess() {
         variant="link"
         onClick={() => RouteService.goBack()}
       >
-        <FaArrowLeft size={25} />
+        <Icon type="arrow-left" width="25" />
       </Button>
       <div className="container d-flex justify-content-center pt-5">
         <div className="text-center">

package/src/static/SocialButton.tsx

@@ -2,20 +2,22 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { ReactNode } from "react";
-import { FaFacebookF, FaTwitter } from "react-icons/fa";
+import Icon from "./Icon";
 
 interface Props {
   children?: ReactNode | ReactNode[];
   onClick?: () => void;
   className?: string;
   type?: string;
+  icon?: string;
   disabled?: boolean;
 }
 
 function SocialButton(props: Props) {
-  const { children, className, onClick, type, disabled } = props;
+  const { children, className, onClick, type, icon, disabled } = props;
 
   const defaultType = "twitter";
+  const defaultIcon = "twitter";
 
   const handleClick = () => {
     if (onClick) {
@@ -36,8 +38,7 @@ function SocialButton(props: Props) {
       onClick={handleClick}
     >
       <span className="separator">
-        {type === "facebook" && <FaFacebookF />}
-        {type === "twitter" && <FaTwitter />}
+        <Icon type={["fab", icon ?? defaultIcon]} />
       </span>
       {children}
     </a>

package/src/static/Static.stories.tsx

@@ -4,10 +4,10 @@ import InputGroup from "react-bootstrap/InputGroup";
 import Row from "react-bootstrap/Row";
 import Input from "react-phone-number-input/input";
 import { FormProvider, useForm } from "react-hook-form";
-import { FaSearch } from "react-icons/fa";
 import CountrySelect from "./CountrySelect";
 import CountryCodeSelect from "./CountryCodeSelect";
 import FormCard from "./FormCard";
+import Icon from "./Icon";
 import Image from "./Image";
 import SocialButton from "./SocialButton";
 import StyledButton from "./StyledButton";
@@ -72,7 +72,7 @@ _RestrictedAccess.story = {
   name: "RestrictedAccess",
 };
 
-export const _Icon = () => <FaSearch />;
+export const _Icon = () => <Icon type="search" />;
 
 _Icon.story = {
   parameters: {

package/src/static/UserBadge.tsx

@@ -1,7 +1,7 @@
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { FaLongArrowAltDown } from "react-icons/fa";
 import { useIntl } from "react-intl";
+import { Icon } from ".";
 
 interface UserBadgeProps {
   userName: string;
@@ -35,7 +35,11 @@ export function UserBadge({
           </p>
         </div>
       </div>
-      <FaLongArrowAltDown size={24} className="user-badge-down-icon" />
+      <Icon
+        type="long-arrow-alt-down"
+        height="1.5rem"
+        className="user-badge-down-icon"
+      />
     </Button>
   );
 }

package/src/static/date-range-input/DateRangeInput.tsx

@@ -5,7 +5,7 @@ import { useClickAway } from "react-use";
 import { useTranslation } from "react-i18next";
 import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
-import { FaCalendar } from "react-icons/fa";
+import { Icon } from "..";
 import {
   stringDatesToJSDates,
   rangeDatesToStringDates,
@@ -151,7 +151,11 @@ export const DateRangeInput = ({
             className="date-range-input"
             value={stringDatesToInputValue({ startDate, endDate })}
           />
-          <FaCalendar size={16} className="date-range-input-icon" />
+          <Icon
+            type="calendar"
+            height="1rem"
+            className="date-range-input-icon"
+          />
         </div>
       </OverlayTrigger>
     </div>

package/src/static/index.ts

@@ -12,6 +12,7 @@ export * from "./text-expand";
 export { Tabs } from "./tabs";
 export { default as CountrySelect } from "./CountrySelect";
 export { default as FormCard } from "./FormCard";
+export { default as Icon } from "./Icon";
 export { default as Image } from "./Image";
 export { default as SocialButton } from "./SocialButton";
 export { default as StyledButton } from "./StyledButton";

package/src/static/number-input/NumberInput.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { FormControl } from "react-bootstrap";
-import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+import Icon from "../Icon";
 
 interface NumberInputProps {
   disabled?: boolean;
@@ -63,7 +63,7 @@ export function NumberInput({
         className="licklist-number-input__btn-up"
         disabled={disabled}
       >
-        <FaChevronUp size={16} />
+        <Icon type="chevron-up" width="1rem" />
       </button>
       <button
         type="button"
@@ -71,7 +71,7 @@ export function NumberInput({
         className="licklist-number-input__btn-down"
         disabled={disabled}
       >
-        <FaChevronDown size={16} />
+        <Icon type="chevron-down" width="1rem" />
       </button>
     </div>
   );

package/src/table/MenuButton.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ReactElement } from "react";
+import Icon from "../static/Icon";
 
 export type MenuButtonProps = {
   onClick?: () => void;
@@ -7,7 +7,8 @@ export type MenuButtonProps = {
   rightIcon?: boolean;
   name: string;
   className?: string;
-  icon?: ReactElement;
+  icon?: string;
+  iconWidth?: string;
 };
 
 export const MenuButton = ({
@@ -17,7 +18,10 @@ export const MenuButton = ({
   icon,
   leftIcon,
   rightIcon,
+  iconWidth = "12",
 }: MenuButtonProps) => {
+  const iconComponent = icon ? <Icon type={icon} width={iconWidth} /> : null;
+
   return (
     <>
       <button
@@ -28,7 +32,7 @@ export const MenuButton = ({
         }}
         className={clsx(className)}
       >
-        {leftIcon && icon}
+        {leftIcon && iconComponent}
         <span
           className={clsx(
             icon && leftIcon && "ml-3",
@@ -37,7 +41,7 @@ export const MenuButton = ({
         >
           {name}
         </span>
-        {rightIcon && icon}
+        {rightIcon && iconComponent}
       </button>
     </>
   );

package/src/table/PaginationHelperComponent.tsx

@@ -5,7 +5,8 @@ import { useTranslation } from "react-i18next";
 import ILengthAwarePaginator from "@licklist/plugins/dist/types/services/Table/ILengthAwarePaginator";
 import PaginationService from "@licklist/plugins/dist/services/Table/PaginationService";
 import clsx from "clsx";
-import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
+
+import { Icon } from "../static";
 
 export interface PaginationHelperComponentProps {
   displayShowingSection?: boolean;
@@ -58,7 +59,7 @@ function PaginationHelperComponent({
           className="border-0"
           onClick={() => onPageChange(paginationService.getPrevPage())}
         >
-          <FaArrowLeft size={14} color="black" />
+          <Icon type="arrow-left" width="0.9rem" color="black" />
         </button>
 
         {paginationService.getElements().map((element) => {
@@ -83,7 +84,7 @@ function PaginationHelperComponent({
           className="border-0"
           onClick={() => onPageChange(paginationService.getNextPage())}
         >
-          <FaArrowRight size={14} color="black" />
+          <Icon type="arrow-right" width="0.9rem" color="black" />
         </button>
       </Pagination>
     ),