@licklist/design 0.66.12-dev.2 → 0.66.12

package/src/sortable-fields/SortableFieldList.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 import {
   DndContext,
@@ -33,7 +34,7 @@ export function SortableFieldList<T extends BaseItem>({
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    }),
+    })
   );
 
   return (

package/src/sortable-list/CreateSortableListItem.tsx

@@ -1,4 +1,5 @@
-import { FaPlus } from "react-icons/fa";
+import React from "react";
+import { Icon } from "../static";
 
 interface CreateSortableListItemProps {
   onClick: () => void;
@@ -16,7 +17,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-list/SortableList.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta } from "@storybook/react";
+import React from "react";
 import { SortableList } from "./SortableList";
 
 export default {

package/src/sortable-list/SortableList.tsx

@@ -6,7 +6,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { isEqual } from "lodash";
-import {
+import React, {
   Dispatch,
   ReactNode,
   SetStateAction,

package/src/sortable-tree/SortableTree.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, Story } from "@storybook/react";
 import { uniqueId } from "lodash";
+import React from "react";
 import { SortableTree, SortableTreeProps } from "./SortableTree";
 
 export default {

package/src/sortable-tree/SortableTree.tsx

@@ -4,7 +4,7 @@ import {
   SortableContextProps,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 import { SortableTreeItem } from "./SortableTreeItem";
 
 export interface SortableTreeProps {

package/src/sortable-tree/SortableTreeItem.stories.tsx

@@ -4,6 +4,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { Form } from "react-bootstrap";
 import { SortableTreeItem, SortableTreeItemProps } from "./SortableTreeItem";
 

package/src/sortable-tree/SortableTreeItem.tsx

@@ -1,10 +1,4 @@
-import {
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from "react";
+import React, { ReactNode, useCallback, useEffect, useState } from "react";
 import { DndContext, useDraggable } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -15,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;
@@ -25,11 +20,10 @@ export const ProductSetModalClasses = {
   step: "edit-product-step",
   category: "edit-product-category",
   product: "edit-product",
-  productZones: "edit-product-zone",
 } as const;
 
 export type ProductSetModalClassesType =
-  (typeof ProductSetModalClasses)[keyof typeof ProductSetModalClasses];
+  typeof ProductSetModalClasses[keyof typeof ProductSetModalClasses];
 
 export interface SortableTreeItemProps {
   id: string;
@@ -39,11 +33,9 @@ export interface SortableTreeItemProps {
   body: ReactNode;
   children?: ReactNode;
   preItem?: ReactNode;
-  itemButton?: ReactNode;
   postItem?: ReactNode;
   sortableItems?: string[];
   isExpanded?: boolean;
-  shouldExpand?: boolean;
   isInvalid?: boolean;
   isIconInHeader?: boolean;
   treeLineIconColor?: string;
@@ -74,7 +66,6 @@ export function SortableTreeItem({
   postItem,
   sortableItems,
   isExpanded = false,
-  shouldExpand = true,
   isInvalid = false,
   isIconInHeader = true,
   treeLineIconColor = "",
@@ -89,7 +80,6 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
-  itemButton,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
@@ -110,14 +100,11 @@ export function SortableTreeItem({
     transform: dragTransform,
   } = useDraggable({
     id,
-    disabled: isOverride || !shouldExpand,
+    disabled: isOverride,
   });
 
   const onHandleExpand = useCallback(
     (event) => {
-      if (!shouldExpand) {
-        return;
-      }
       const deltaX = event.pageX - position.pageX;
       const deltaY = event.pageY - position.pageY;
       const euclidean = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -133,20 +120,14 @@ export function SortableTreeItem({
 
       setExpanded((expanded) => !expanded);
     },
-    [position, shouldExpand, setIsExpanded],
+    [position, setIsExpanded]
   );
 
   const isVisibleDeleteButton = Boolean(onDelete) && !isOverride;
 
-  const onButtonMouseDown = useCallback(
-    (event) => {
-      if (!shouldExpand) {
-        return;
-      }
-      setPosition({ pageX: event.pageX, pageY: event.pageY });
-    },
-    [shouldExpand],
-  );
+  const onButtonMouseDown = useCallback((event) => {
+    setPosition({ pageX: event.pageX, pageY: event.pageY });
+  }, []);
 
   const onHide = async () => {
     if (!validate) setIsModalVisible(false);
@@ -216,49 +197,47 @@ export function SortableTreeItem({
             : null
         }
       >
-        {shouldExpand && (
-          <div className="sortable-tree-line">
-            <Button
-              variant="link"
-              size="sm"
-              onMouseDown={onButtonMouseDown}
-              onMouseUp={onHandleExpand}
-            >
-              {expanded ? (
-                <FaMinus size={10} />
-              ) : (
-                <div className="expand-icon-container">
-                  <div />
-                  <div />
-                  <div />
-                </div>
-              )}
-            </Button>
-
-            {expanded && (
-              <svg
-                className="sortable-tree-line-icon"
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                width="100%"
-                height="100%"
-                viewBox="0 0 100 100"
-                preserveAspectRatio="none"
-              >
-                <g>
-                  <path
-                    className={clsx(
-                      "sortable-tree-line-icon-path",
-                      treeLineIconColor && "sortable-tree-line-product-element",
-                    )}
-                    style={{ stroke: treeLineIconColor }}
-                    d="M 50 0 V 100"
-                  />
-                </g>
-              </svg>
+        <div className="sortable-tree-line">
+          <Button
+            variant="link"
+            size="sm"
+            onMouseDown={onButtonMouseDown}
+            onMouseUp={onHandleExpand}
+          >
+            {expanded ? (
+              <Icon type="minus" width=".7rem" />
+            ) : (
+              <div className="expand-icon-container">
+                <div />
+                <div />
+                <div />
+              </div>
             )}
-          </div>
-        )}
+          </Button>
+
+          {expanded && (
+            <svg
+              className="sortable-tree-line-icon"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              width="100%"
+              height="100%"
+              viewBox="0 0 100 100"
+              preserveAspectRatio="none"
+            >
+              <g>
+                <path
+                  className={clsx(
+                    "sortable-tree-line-icon-path",
+                    treeLineIconColor && "sortable-tree-line-product-element"
+                  )}
+                  style={{ stroke: treeLineIconColor }}
+                  d="M 50 0 V 100"
+                />
+              </g>
+            </svg>
+          )}
+        </div>
 
         <div className="sortable-tree-item-wrapper">
           <div
@@ -272,7 +251,7 @@ export function SortableTreeItem({
                   {...attributes}
                   {...listeners}
                 >
-                  <FaGripVertical />
+                  <Icon type="grip-vertical" />
                 </Button>
               )}
               <Button
@@ -288,20 +267,16 @@ export function SortableTreeItem({
                   className={clsx(
                     modalLabel
                       ? "sortable-tree-product-set-title-container"
-                      : "sortable-tree-title-container",
+                      : "sortable-tree-title-container"
                   )}
                 >
                   <span
                     className={clsx(
                       "sortable-tree-item-title",
-                      modalLabel && "sortable-tree-product-set-element-title",
-                      "d-flex justify-content-between",
+                      modalLabel && "sortable-tree-product-set-element-title"
                     )}
                   >
                     {title}
-                    <div className="sortable-tree-item-subtitle">
-                      {itemButton}
-                    </div>
                   </span>
                   {!expanded && (
                     <span className="sortable-tree-item-subtitle">
@@ -316,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>
@@ -334,7 +309,7 @@ export function SortableTreeItem({
                 // unique class
                 className={clsx(
                   "m-0 edit-product-set-element-modal edit-right-form-modal h-100",
-                  modalClass,
+                  modalClass
                 )}
                 dialogClassName="edit-event-dialog edit-step-dialog"
                 onHide={onHide}

package/src/sortable-tree/index.ts

@@ -1,2 +1,2 @@
 export * from "./SortableTree";
-export type { SortableTreeItemProps } from "./SortableTreeItem";
+export { SortableTreeItemProps } from "./SortableTreeItem";

package/src/sorting-select/SortingSelect.stories.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { SortingSelect, SortingSelectProps } from "./SortingSelect";
 

package/src/sorting-select/SortingSelect.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
 import { Form, FormGroupProps } from "react-bootstrap";
 import { useTranslation } from "react-i18next";

package/src/static/CountryCodeSelect.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Form from "react-bootstrap/Form";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";

package/src/static/CountrySelect.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useState, useEffect } from "react";
+import React, { ChangeEvent, useState, useEffect } from "react";
 import Form from "react-bootstrap/Form";
 import {
   getCountries,

package/src/static/CurrencyNumberInput.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode } from "react";
+import React, { forwardRef, ReactNode } from "react";
 import { Form, FormControlProps } from "react-bootstrap";
 
 export interface CurrencyNumberInputProps extends FormControlProps {
@@ -32,7 +32,7 @@ export const CurrencyNumberInput = forwardRef<
       error,
       ...props
     },
-    ref,
+    ref
   ) => (
     <Form.Group className="currency-number-input">
       <Form.Label className={labelClassName}>{label}</Form.Label>
@@ -51,7 +51,7 @@ export const CurrencyNumberInput = forwardRef<
         <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
       </div>
     </Form.Group>
-  ),
+  )
 );
 
 CurrencyNumberInput.displayName = "CurrencyNumberInput";

package/src/static/FormCard.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import Card from "react-bootstrap/Card";
 
 export interface Props {

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 React, { 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/Image.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable import/no-named-default */
+import React from "react";
 import { default as BootstrapImage, ImageProps } from "react-bootstrap/Image";
 
 export interface Props extends ImageProps {

package/src/static/RestrictedAccess.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 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 +14,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

@@ -1,21 +1,23 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* 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 React, { ReactNode } from "react";
+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>