@licklist/design 0.66.12-dev.2 → 0.66.12

package/src/events/event-card/EventCard.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import {
   Badge,
   Card,
@@ -12,13 +12,7 @@ import { useTranslation } from "react-i18next";
 import * as Config from "@licklist/core/dist/Config";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
-import {
-  FaEye,
-  FaExternalLinkAlt,
-  FaEdit,
-  FaCopy,
-  FaTrashAlt,
-} from "react-icons/fa";
+import Icon from "../../static/Icon";
 import { Sale } from "../../types/bookings";
 import { TipTapEditor } from "../../tiptap-editor/TipTapEditor";
 import {
@@ -67,7 +61,7 @@ export function EventCard({
   const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date);
   const memoedContent = useMemo(
     () => formatContentWithoutTags(description, EVENT_DESCRIPTION_SIZE),
-    [description],
+    [description]
   );
 
   return (
@@ -165,8 +159,7 @@ export function EventCard({
               <ChartBarIcon />
             </button>
             <div className="event-card-views">
-              <FaEye />
-
+              <Icon type="eye" />
               <span>{formatNumber(totalViews)}</span>
             </div>
           </div>
@@ -176,7 +169,7 @@ export function EventCard({
               className="event-card-link-button"
               onClick={onPreview}
             >
-              <FaExternalLinkAlt />
+              <Icon type="external-link-alt" />
             </button>
             {hasPermission && (
               <>
@@ -185,21 +178,21 @@ export function EventCard({
                   className="event-card-link-button"
                   onClick={onEdit}
                 >
-                  <FaEdit />
+                  <Icon type="edit" />
                 </button>
                 <button
                   type="button"
                   className="event-card-link-button"
                   onClick={onCopy}
                 >
-                  <FaCopy />
+                  <Icon type="copy" />
                 </button>
                 <button
                   type="button"
                   className="event-card-link-button"
                   onClick={onRemove}
                 >
-                  <FaTrashAlt />
+                  <Icon type="trash-alt" />
                 </button>
               </>
             )}

package/src/events/event-card/EventCardSkeleton.tsx

@@ -1,4 +1,4 @@
-import { memo } from "react";
+import React, { memo } from "react";
 import { Card } from "react-bootstrap";
 import Skeleton from "react-loading-skeleton";
 

package/src/events/event-card/utils.ts

@@ -10,7 +10,7 @@ export function formatContent(content, maxSymbols) {
 
 export const formatContentWithoutTags = (
   content,
-  maxLength = EVENT_DESCRIPTION_SIZE,
+  maxLength = EVENT_DESCRIPTION_SIZE
 ) => {
   if (!content) return "";
   if (content < maxLength) return content;
@@ -36,11 +36,11 @@ export const EVENT_DESCRIPTION_SIZE = 350;
  */
 export const calculateTotalViews = (
   dates: string[],
-  eventStatistic: EventStatistic,
+  eventStatistic: EventStatistic
 ): number =>
   dates.reduce(
     (acc, date) => acc + (eventStatistic.views[date]?.pageViews ?? 0),
-    0,
+    0
   );
 
 /**
@@ -53,7 +53,7 @@ export const calculateTotalViews = (
  */
 export const calculateTotalSoldAndAmount = (
   dates: string[],
-  eventStatistic: EventStatistic,
+  eventStatistic: EventStatistic
 ): [number, number] => {
   let totalSold = 0;
   let totalAmount = 0;
@@ -64,8 +64,8 @@ export const calculateTotalSoldAndAmount = (
         totalSold +=
           productsSummary?.reduce((acc, curr) => acc + curr.productsSold, 0) ??
           0;
-      },
-    ),
+      }
+    )
   );
 
   return [totalSold, totalAmount];
@@ -83,7 +83,7 @@ export const calculateTotalSoldAndAmount = (
  */
 export const getStatisticInfo = (
   eventStatistic: EventStatistic | null,
-  date: string,
+  date: string
 ): {
   totalViews: number;
   totalSold: number;
@@ -104,14 +104,14 @@ export const getStatisticInfo = (
     Object.keys(eventStatistic?.productCategorySummary)?.filter(
       (date) =>
         DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(
-          DATE_FORMAT,
-        ) === summaryFormattedDate,
+          DATE_FORMAT
+        ) === summaryFormattedDate
     ) ?? [];
 
   const totalViews = calculateTotalViews([viewsFormattedDate], eventStatistic);
   const [totalSold, totalAmount] = calculateTotalSoldAndAmount(
     summaryDays,
-    eventStatistic,
+    eventStatistic
   );
 
   return { totalViews, totalSold, totalAmount };

package/src/events/event-statistic-modal/EventStatisticModal.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import {

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -1,8 +1,9 @@
+import React from "react";
 import { Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
-import { FaTimes } from "react-icons/fa";
+import Icon from "../../static/Icon";
 import { StaticTable } from "../../table";
 import { useTableData } from "./hooks/useTableData";
 
@@ -44,7 +45,7 @@ export const EventStatisticModal = ({
           className="btn-sm rounded"
           onClick={handleClose}
         >
-          <FaTimes size={16} />
+          <Icon type="times" height="1rem" />
         </Button>
       </Modal.Header>
       <Modal.Body>

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import clsx from "clsx";
 import { useIntl } from "react-intl";
 import { useTranslation } from "react-i18next";
@@ -10,7 +10,7 @@ import { StaticTableData } from "../../../table";
 
 export const useTableData = (
   date: Event["startAt"] | null,
-  eventStatistic: EventStatistic | null,
+  eventStatistic: EventStatistic | null
 ) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
@@ -34,7 +34,7 @@ export const useTableData = (
 
   const transformStatisticToTableRows = (
     date: Event["startAt"],
-    statistic: EventStatistic | null,
+    statistic: EventStatistic | null
   ) => {
     if (!statistic) {
       return [];
@@ -45,7 +45,7 @@ export const useTableData = (
     convertEventStatisticToTableData(date, statistic).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
         const formattedTotal = !Object.keys(TRANSLATION_KEYS).includes(
-          String(total),
+          String(total)
         )
           ? formatNumber(Number(total), {
               style: "currency",
@@ -73,11 +73,11 @@ export const useTableData = (
             name === TRANSLATION_KEYS.total
               ? `Total: ${formattedTotal}`
               : formattedTotal,
-            isHeader,
+            isHeader
           ),
           key,
         });
-      },
+      }
     );
 
     return tableDataRows;

package/src/events/event-statistic-modal/utils/index.ts

@@ -23,7 +23,7 @@ type TableDataRecord = {
 
 export const convertEventStatisticToTableData = (
   date: string,
-  eventStatistic: EventStatistic,
+  eventStatistic: EventStatistic
 ) => {
   let totalAmount = 0;
   let totalQuantity = 0;
@@ -40,8 +40,8 @@ export const convertEventStatisticToTableData = (
     Object.keys(eventStatistic?.productCategorySummary)?.filter(
       (date) =>
         DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(
-          DATE_FORMAT,
-        ) === summaryFormattedDate,
+          DATE_FORMAT
+        ) === summaryFormattedDate
     ) ?? [];
 
   const summaryMap = new Map<string, TableDataRecord>();
@@ -53,8 +53,8 @@ export const convertEventStatisticToTableData = (
       prev.categoryName === next.categoryName
         ? 0
         : prev.categoryName > next.categoryName
-          ? 1
-          : -1,
+        ? 1
+        : -1
     )
     .forEach(
       ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
@@ -78,7 +78,7 @@ export const convertEventStatisticToTableData = (
             quantity += productsSold;
 
             const existingProduct = summaryMap.get(
-              `${categoryName}.${name}`,
+              `${categoryName}.${name}`
             ) ?? {
               metadata: {
                 _productsSold: 0,
@@ -101,11 +101,11 @@ export const convertEventStatisticToTableData = (
                 _total: existingProduct.metadata._total + total,
               },
             });
-          },
+          }
         );
 
         const prevTotalPerCategory = summaryMap.get(
-          `${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
+          `${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`
         ) ?? {
           quantity: 0,
           total: 0,
@@ -119,7 +119,7 @@ export const convertEventStatisticToTableData = (
         });
 
         totalQuantity += quantity;
-      },
+      }
     );
 
   summaryMap.set(`${TRANSLATION_KEYS.total}.${totalAmount}`, {

package/src/events/event-venue-map/EventVenueMap.stories.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import { EventVenueMap, EventVenueMapProps } from "./EventVenueMap";

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { EventVenueMapProvider } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
@@ -47,7 +47,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
       errorOnChoosedProductUuids = [],
       soldOutProducts,
     },
-    ref,
+    ref
   ) => {
     const canvasSizes = useCanvasSize({ width, height });
 
@@ -73,5 +73,5 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
         />
       </EventVenueMapProvider>
     );
-  },
+  }
 );

package/src/events/event-venue-map/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState, useRef } from "react";
+import React, { useContext, useEffect, useState, useRef } from "react";
 import { EventVenueMapContext } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
 import { ImageOffset } from "../../types";
@@ -34,14 +34,14 @@ export const Dropdown = ({
   const { mapPoints, activeElementKey, editMode } =
     useContext(EventVenueMapContext);
   const [selectedPoint, setSelectedPoint] = useState<Partial<Point> | null>(
-    null,
+    null
   );
 
   const isDisabled = editMode || !selectedPoint;
 
   useEffect(() => {
     const selectedPoint = mapPoints.find(
-      (point) => String(point?.id || point?.localId) === activeElementKey,
+      (point) => String(point?.id || point?.localId) === activeElementKey
     );
 
     setSelectedPoint(selectedPoint || null);
@@ -72,13 +72,13 @@ export const Dropdown = ({
       imageScale,
       imageOffsetX,
       imageOffsetY,
-    },
+    }
   );
 
   const styles = () => {
     const { left, top } = calculateDropdownOffsets(
       { x: pointX, y: pointY },
-      { scale, x: stageX, y: stageY },
+      { scale, x: stageX, y: stageY }
     );
 
     return {

package/src/events/event-venue-map/components/Dropdown/components/DropdownWrapper/DropdownWrapper.tsx

@@ -1,4 +1,4 @@
-import { FC } from "react";
+import React, { FC } from "react";
 
 export const DropdownWrapper: FC = ({ children }) => {
   return (

package/src/events/event-venue-map/components/Dropdown/components/ProductsControl/ProductsControl.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";

package/src/events/event-venue-map/components/Dropdown/components/SelectControl/SelectControl.tsx

@@ -1,4 +1,10 @@
-import { useState, useContext, useMemo, useCallback, useEffect } from "react";
+import React, {
+  useState,
+  useContext,
+  useMemo,
+  useCallback,
+  useEffect,
+} from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
@@ -23,7 +29,7 @@ export const SelectControl = ({ selectedPoint }: SelectControlProps) => {
   const selectedPointProduct = useMemo(
     () =>
       mapPointProducts.find((product) => product.pointId === selectedPoint?.id),
-    [mapPointProducts, selectedPoint],
+    [mapPointProducts, selectedPoint]
   );
 
   const selectedProduct = useMemo(() => {
@@ -32,7 +38,7 @@ export const SelectControl = ({ selectedPoint }: SelectControlProps) => {
     }
 
     return products.find(
-      (product) => product.uuid === selectedPointProduct?.productUuid,
+      (product) => product.uuid === selectedPointProduct?.productUuid
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedPointProduct, products, mapPointProducts]);
@@ -51,8 +57,8 @@ export const SelectControl = ({ selectedPoint }: SelectControlProps) => {
     setMapPointProducts((prevPointProducts) =>
       prevPointProducts.filter(
         (pointProduct) =>
-          String(pointProduct.pointId) !== String(selectedPoint?.id),
-      ),
+          String(pointProduct.pointId) !== String(selectedPoint?.id)
+      )
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedPoint]);
@@ -82,14 +88,14 @@ export const SelectControl = ({ selectedPoint }: SelectControlProps) => {
               ...prevPointProduct,
               productUuid,
             };
-          }),
+          })
         );
       }
 
       setShowProductSelect(false);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedPoint, selectedPointProduct],
+    [selectedPoint, selectedPointProduct]
   );
 
   useEffect(() => {

package/src/events/event-venue-map/components/MapPoint/MapPoint.tsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { Group } from "react-konva";
 import Konva from "konva";
 import { EventVenueMapContext } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
@@ -53,22 +53,22 @@ export const MapPoint = ({
   const pointKey = String(id || localId);
   const isActive = pointKey === activeElementKey;
   const pointProduct = mapPointProducts.find(
-    (pointProduct) => id && pointProduct.pointId && pointProduct.pointId === id,
+    (pointProduct) => id && pointProduct.pointId && pointProduct.pointId === id
   );
 
   const isProductChoosed = Boolean(
     mapPointProducts.find(
       (currentPointProduct) =>
         choosedProductUuids.includes(currentPointProduct?.productUuid) &&
-        choosedProductUuids.includes(pointProduct?.productUuid),
-    ),
+        choosedProductUuids.includes(pointProduct?.productUuid)
+    )
   );
   const isErrorOnChoosedProduct = Boolean(
     mapPointProducts.find(
       (currentPointProduct) =>
         errorOnChoosedProductUuids.includes(currentPointProduct?.productUuid) &&
-        errorOnChoosedProductUuids.includes(pointProduct?.productUuid),
-    ),
+        errorOnChoosedProductUuids.includes(pointProduct?.productUuid)
+    )
   );
 
   const changePointPosition = () => {
@@ -79,7 +79,7 @@ export const MapPoint = ({
       const nextPoints = prevPoints.slice();
       const currentPoint = nextPoints.find(
         (point) =>
-          (id && point.id === id) || (localId && point.localId === localId),
+          (id && point.id === id) || (localId && point.localId === localId)
       );
       const currentPointIndex = nextPoints.indexOf(currentPoint);
 
@@ -119,7 +119,7 @@ export const MapPoint = ({
     setActiveElementKey();
     changeCursorType();
     setMapPoints((prevPoints) =>
-      removeMapPointFromPoints(prevPoints, id, localId),
+      removeMapPointFromPoints(prevPoints, id, localId)
     );
   };
 

package/src/events/event-venue-map/components/MapPoint/components/DeleteIcon/DeleteIcon.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Path, Group, Rect } from "react-konva";
 
 const ICON_WIDTH = 16;

package/src/events/event-venue-map/components/MapPoint/components/EditIcon/EditIcon.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Path, Group, Rect } from "react-konva";
 
 const ICON_WIDTH = 16;

package/src/events/event-venue-map/components/MapPoint/components/PointIcon/PointIcon.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Path, KonvaNodeEvents, Text, Group } from "react-konva";
 import Konva from "konva";
 import { DeleteIcon } from "../DeleteIcon";

package/src/events/event-venue-map/components/MapPoint/components/ProductIcon/ProductIcon.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { Path, KonvaNodeEvents, Group, Circle } from "react-konva";
 import Konva from "konva";
 import { ProductTooltip } from "../ProductTooltip";
@@ -69,12 +69,12 @@ export const ProductIcon = ({
     return {
       pointBackgroundColor:
         getSnippetCssStyleVariableValue(
-          "--snippet-canvas-point-background-color",
+          "--snippet-canvas-point-background-color"
         ) || BACKGROUND_COLOR,
       pointBorderColor:
         getSnippetCssStyleVariableValue(
           "--snippet-canvas-point-border-color",
-          true,
+          true
         ) || BACKGROUND_COLOR_TRANSPARENT,
       pointFontColor:
         getSnippetCssStyleVariableValue("--snippet-canvas-point-font-color") ||
@@ -82,16 +82,16 @@ export const ProductIcon = ({
 
       activePointBackgroundColor:
         getSnippetCssStyleVariableValue(
-          "--snippet-canvas-active-point-background-color",
+          "--snippet-canvas-active-point-background-color"
         ) || FILL_COLOR,
       activePointBorderColor:
         getSnippetCssStyleVariableValue(
           "--snippet-canvas-active-point-border-color",
-          true,
+          true
         ) || BACKGROUND_COLOR_TRANSPARENT,
       activePointFontColor:
         getSnippetCssStyleVariableValue(
-          "--snippet-canvas-active-point-font-color",
+          "--snippet-canvas-active-point-font-color"
         ) || BACKGROUND_COLOR,
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/ProductTooltip.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { Group, Rect, Text } from "react-konva";
 
 const TOOLTIP_WIDTH = 60;

package/src/events/event-venue-map/components/Scrollbars/Scrollbars.tsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import React, { useContext } from "react";
 import { EventVenueMapContext } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
 import { useWindowDimensions } from "@licklist/plugins/dist/hooks/Media/useWindowDimensions";
 import {
@@ -93,7 +93,7 @@ export const Scrollbars = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
         y,
         height,
         totalLayerHeight,
-      },
+      }
     );
 
     return {

package/src/events/event-venue-map/components/VenueMap/VenueMap.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   useRef,
   useContext,
   useEffect,
@@ -49,7 +49,7 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       errorOnChoosedProductUuids = [],
       soldOutProducts,
     },
-    ref,
+    ref
   ) => {
     const {
       mapPoints,
@@ -95,7 +95,7 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
         mapPoints.map((point, index) => ({
           ...point,
           pointNumber: index + 1,
-        })),
+        }))
       );
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -111,18 +111,18 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
 
     const isProductSoldOut = (pointId: number): boolean => {
       const currentProduct = mapPointProducts.find(
-        (point) => point.pointId === pointId,
+        (point) => point.pointId === pointId
       );
 
       if (!currentProduct) return false;
       const selectedProduct = products.find(
-        (product) => product.uuid === currentProduct.productUuid,
+        (product) => product.uuid === currentProduct.productUuid
       );
       return (
         selectedProduct?.isSoldOut ||
         (selectedProduct &&
           !!soldOutProducts?.find(
-            (product) => product?.product_id === selectedProduct?.id,
+            (product) => product?.product_id === selectedProduct?.id
           )) ||
         false
       );
@@ -196,5 +196,5 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
         )}
       </div>
     );
-  },
+  }
 );

package/src/events/event-venue-map/components/ZoomButtons/ZoomButtons.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { Button } from "react-bootstrap";
-import { FaSearch } from "react-icons/fa";
+import { Icon } from "../../../../static";
 import { useZoom } from "../../hooks/useZoom";
 import { CanvasRefs } from "../../types";
 
@@ -13,7 +14,7 @@ export const ZoomButtons = ({
     <div className="zoom-buttons">
       <div className="buttons-wrapper">
         <div className="icon-wrapper mb-1">
-          <FaSearch size={16} />
+          <Icon type="search" width="1rem" height="1rem" />
         </div>
         <Button onClick={onZoomOut} className="mb-1">
           -

package/src/events/event-venue-map/hooks/useDrag.ts

@@ -60,10 +60,10 @@ export const useDrag = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
       }
 
       const x = Math.round(
-        twoDigitsRound((stageRef.x() / scaleX - deltaX / scaleX) * scaleX),
+        twoDigitsRound((stageRef.x() / scaleX - deltaX / scaleX) * scaleX)
       );
       const y = Math.round(
-        twoDigitsRound((stageRef.y() / scaleY - deltaY / scaleY) * scaleY),
+        twoDigitsRound((stageRef.y() / scaleY - deltaY / scaleY) * scaleY)
       );
 
       let nextX = x > 0 ? 0 : x;
@@ -81,7 +81,7 @@ export const useDrag = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
       setStage((prevStage) => ({ ...prevStage, x: nextX, y: nextY }));
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [stageRef, imageRef],
+    [stageRef, imageRef]
   );
 
   const onMoveX = useCallback(
@@ -111,7 +111,7 @@ export const useDrag = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
         layer: layerRef,
       });
     },
-    [stage, dragCanvas, stageRef, imageRef, layerRef],
+    [stage, dragCanvas, stageRef, imageRef, layerRef]
   );
 
   const onMoveY = useCallback(
@@ -141,7 +141,7 @@ export const useDrag = ({ stageRef, imageRef, layerRef }: CanvasRefs) => {
         layer: layerRef,
       });
     },
-    [stage, dragCanvas, stageRef, imageRef, layerRef],
+    [stage, dragCanvas, stageRef, imageRef, layerRef]
   );
 
   const onDragX = useCallback(() => {