@licklist/design 0.66.13 → 0.67.0

package/src/modals/confirmation/ConfirmModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useRef, useState } from "react";
+import { ReactNode, useRef, useState } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import ModalHeader from "react-bootstrap/ModalHeader";
@@ -6,7 +6,7 @@ import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import ModalFooter from "react-bootstrap/ModalFooter";
 import Modal from "react-bootstrap/Modal";
-import Icon from "../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 
 export type ConfirmAction = () => void;
 export const ConfirmModalType = {
@@ -15,7 +15,7 @@ export const ConfirmModalType = {
 } as const;
 
 export type ConfirmModalTypes =
-  typeof ConfirmModalType[keyof typeof ConfirmModalType];
+  (typeof ConfirmModalType)[keyof typeof ConfirmModalType];
 
 export interface ConfirmModalProps {
   type?: ConfirmModalTypes;
@@ -91,7 +91,7 @@ export function ConfirmModal({
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
-            <Icon type="times" height="1rem" />
+            <FaTimes size={16} />
           </Button>
         </ModalHeader>
         <ModalBody className="confirmation-modal-body">

package/src/modals/confirmation/Confirmation.stories.tsx

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

package/src/modals/dialog/Dialog.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 

package/src/modals/dialog/DialogContext.tsx

@@ -1,10 +1,4 @@
-import React, {
-  createContext,
-  useContext,
-  FC,
-  useState,
-  useCallback,
-} from "react";
+import { createContext, useContext, FC, useState, useCallback } from "react";
 
 interface IDialogContext {
   isShownDialog: boolean;
@@ -50,7 +44,7 @@ export const DialogContextProvider: FC = ({ children }) => {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isShownDialog]
+    [isShownDialog],
   );
 
   const onApproveDialog = useCallback(() => {

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from "react";
+import { ReactNode, useState } from "react";
 import Button from "react-bootstrap/Button";
 import { useTranslation } from "react-i18next";
 import ModalHeader from "react-bootstrap/ModalHeader";
@@ -6,7 +6,7 @@ import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import ModalFooter from "react-bootstrap/ModalFooter";
 import Modal from "react-bootstrap/Modal";
-import Icon from "../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 
 export interface FullscreenModalProps {
   children?: (confirm: () => void) => ReactNode;
@@ -63,7 +63,7 @@ export const FullscreenModal = ({
               className="btn-sm rounded"
               onClick={handleClose}
             >
-              <Icon type="times" height="1rem" />
+              <FaTimes size={16} />
             </Button>
           </ModalHeader>
         )}

package/src/modals/fullscreen/FulscreenModal.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import { EventVenueMap } from "../../events/event-venue-map";
 import { FullscreenModal, FullscreenModalProps } from "./FullscreenModal";
 

package/src/notification/components/NotificationPlaceholders.stories.tsx

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

package/src/notification/components/NotificationPlaceholders.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Row, Col, Card } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { NotificationPlaceholder } from "@licklist/core/dist/DataMapper/Notification/NotificationPlaceholderDataMapper";

package/src/notification/email-template/card/EmailTemplateCard.stories.tsx

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

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -1,10 +1,9 @@
-import React from "react";
 import { Link } from "react-router-dom";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
 import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
+import { FaTrashAlt, FaCopy } from "react-icons/fa";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
-import { Icon } from "../../../static";
 import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface EmailTemplateCardProps extends HasPermissionProp {
@@ -54,7 +53,7 @@ export function EmailTemplateCard({
                   confirm(onRemove);
                 }}
               >
-                <Icon type="trash-alt" />
+                <FaTrashAlt />
               </button>
             )}
           </ConfirmModal>
@@ -64,7 +63,7 @@ export function EmailTemplateCard({
           className="snippet-template-card-button"
           onClick={onDuplicate}
         >
-          <Icon type="copy" />
+          <FaCopy />
         </button>
       </div>
       <div className={`mt-${isDefault ? "3" : "4"}`}>

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { forwardRef, useState, useEffect } from "react";
 import { Col, Row, Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -30,7 +30,7 @@ export interface EmailTemplateControlProps {
   getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string;
 }
 
-export const EmailTemplateControl = React.forwardRef(
+export const EmailTemplateControl = forwardRef(
   (
     {
       setIsLoading,
@@ -40,7 +40,7 @@ export const EmailTemplateControl = React.forwardRef(
       notificationTypes = [],
       getDefaultTemplateMetaByType,
     }: EmailTemplateControlProps,
-    ref: any
+    ref: any,
   ) => {
     const { t } = useTranslation(["Design"]);
     const [initialAttachments, setInitialAttachemnts] = useState<
@@ -112,7 +112,7 @@ export const EmailTemplateControl = React.forwardRef(
       if (!options?.length) return;
 
       const fileSelectorOptions = options.find(
-        (option) => option.type === OPTION_TYPE.files_selector
+        (option) => option.type === OPTION_TYPE.files_selector,
       );
 
       if (!fileSelectorOptions?.selectedValue) return;
@@ -140,7 +140,7 @@ export const EmailTemplateControl = React.forwardRef(
 
       // we have some temp images and some saved images
       const imgData = imagesMetadata.find(
-        (staticImg) => staticImg.permanentUrl === imgUrl
+        (staticImg) => staticImg.permanentUrl === imgUrl,
       );
 
       if (!imgData) {
@@ -151,7 +151,7 @@ export const EmailTemplateControl = React.forwardRef(
 
         handlePermanentImageRemove(
           permanentImgHash,
-          PERMANENT_IMAGE_TYPE_PERMANENT
+          PERMANENT_IMAGE_TYPE_PERMANENT,
         );
         return;
       }
@@ -189,7 +189,7 @@ export const EmailTemplateControl = React.forwardRef(
       // saving image in our backend, not on unlayer s3
       ref.current?.registerCallback("image", async (file, done) => {
         const imgData = await handlePermanentImageUploading(
-          file.attachments[0]
+          file.attachments[0],
         );
 
         done({
@@ -389,7 +389,7 @@ export const EmailTemplateControl = React.forwardRef(
                           setIsIncludePDF(!isIncludePDF);
                           setValue(
                             `templateOptionValues.${option.id}.value`,
-                            ""
+                            "",
                           );
                         }}
                         label={t("Design:includePDF")}
@@ -404,7 +404,7 @@ export const EmailTemplateControl = React.forwardRef(
                           <Form.Control
                             as="select"
                             {...register(
-                              `templateOptionValues.${option.id}.value`
+                              `templateOptionValues.${option.id}.value`,
                             )}
                             defaultValue={option.selectedValue || ""}
                           >
@@ -433,7 +433,7 @@ export const EmailTemplateControl = React.forwardRef(
                       </Form.Label>
                       <Form.Control
                         {...register(
-                          `templateOptionValues.${option?.id}.value`
+                          `templateOptionValues.${option?.id}.value`,
                         )}
                         type="number"
                         placeholder={t(`Design:${option.name}`)}
@@ -452,7 +452,7 @@ export const EmailTemplateControl = React.forwardRef(
         )}
       </>
     );
-  }
+  },
 );
 
 EmailTemplateControl.displayName = "EmailTemplateControl";

package/src/notification/email-template/form/EmailTemplateForm.stories.tsx

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

package/src/notification/email-template/form/EmailTemplateForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { Button, Form, Row, Col } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";

package/src/notification/send-email-template/SendEmailTemplateForm.stories.tsx

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

package/src/notification/send-email-template/SendEmailTemplateForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { Row, Button, Form, Col, Modal } from "react-bootstrap";
 import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useForm } from "react-hook-form";
@@ -35,7 +35,7 @@ export function SendEmailTemplateForm({
 
   const isFieldValid = useCallback(
     (field: string) => HookFormService.isFieldValid(formState, errors, field),
-    [formState, errors]
+    [formState, errors],
   );
 
   return (

package/src/notification/sms-template/card/SmsTemplateCard.stories.tsx

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

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -1,10 +1,9 @@
-import React from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
+import { FaCopy, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
-import { Icon } from "../../../static";
 import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface SmsTemplateCardProps extends HasPermissionProp {
@@ -52,7 +51,7 @@ export function SmsTemplateCard({
                   confirm(onRemove);
                 }}
               >
-                <Icon type="trash-alt" />
+                <FaTrashAlt />
               </button>
             )}
           </ConfirmModal>
@@ -62,7 +61,7 @@ export function SmsTemplateCard({
           className="snippet-template-card-button"
           onClick={onDuplicate}
         >
-          <Icon type="copy" />
+          <FaCopy />
         </button>
       </div>
       <div className="mt-2">

package/src/notification/sms-template/control/SmsTemplateControl.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/display-name */
-import React from "react";
 import { Col, Row, Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";

package/src/notification/sms-template/form/SmsTemplateForm.stories.tsx

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

package/src/notification/sms-template/form/SmsTemplateForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { Button, Form } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";

package/src/number-of-people-input/NumberOfPeopleInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { RenderNumberOfPeopleInputComponent } from "./components";
 

package/src/number-of-people-input/components/RenderNumberOfPeopleInputComponent.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Meta } from "@storybook/react";
 import { RenderNumberOfPeopleInputComponent } from "./RenderNumberOfPeopleInputComponent";
 

package/src/number-of-people-input/components/RenderNumberOfPeopleInputComponent.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import clsx from "clsx";
 import { NumberInput } from "../../iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput";

package/src/product-set/card/ProductSetCard.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 
 import { ProductSetCard, ProductSetCardProps } from "./ProductSetCard";
@@ -10,8 +9,7 @@ export default {
 
 export const Default: Story<ProductSetCardProps> = (args) => (
   <ProductSetCard {...args} />
-)
-
+);
 
 Default.args = {
   href: "#",
@@ -19,4 +17,3 @@ Default.args = {
   rrule: "FREQ=WEEKLY;BYDAY=WE",
   hasPermission: true,
 };
-

package/src/product-set/card/ProductSetCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { ListGroup, OverlayTrigger, Popover } from "react-bootstrap";
 import RRule from "rrule";
 import { useTranslation } from "react-i18next";
@@ -6,9 +6,8 @@ import clsx from "clsx";
 import { useId } from "@react-aria/utils";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
-
+import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../modals";
-import { Icon } from "../../static";
 import { MenuButton } from "../../table/MenuButton";
 
 export interface ProductSetCardProps extends HasPermissionProp {
@@ -59,7 +58,7 @@ export function ProductSetCard({
         </div>
         <div className="d-flex">
           <div className="product-set-card-menu-eye-container">
-            <Icon type="eye" color="#0E8CE2" width="20" />
+            <FaEye color="#0E8CE2" size={20} />
           </div>
           <OverlayTrigger
             trigger="click"
@@ -70,7 +69,7 @@ export function ProductSetCard({
                 id={popoverId}
                 className={clsx(
                   "product-set-card-popover",
-                  !isOverlayVisibile && "d-none"
+                  !isOverlayVisibile && "d-none",
                 )}
               >
                 <Popover.Content
@@ -106,7 +105,7 @@ export function ProductSetCard({
                                   confirm(onRemove);
                                 }}
                                 name={t("remove")}
-                                icon="trash-alt"
+                                icon={<FaTrashAlt size={12} />}
                                 className="product-set-card-menu-item-text d-flex w-100 align-items-center"
                                 rightIcon
                               />
@@ -128,7 +127,7 @@ export function ProductSetCard({
                 setIsOverlayVisible(true);
               }}
             >
-              <Icon type="ellipsis-h" />
+              <FaEllipsisH />
             </button>
           </OverlayTrigger>
         </div>

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Form, OverlayTrigger, Popover } from "react-bootstrap";
@@ -16,8 +16,8 @@ import {
 } from "@dnd-kit/sortable";
 
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { FaPlusCircle } from "react-icons/fa";
 import { CONFIRM_MODAL_ACTIONS } from "../../modals/confirmation/ConfirmModal";
-import { Icon } from "../../static";
 import {
   RecurringDatePickerInput,
   RecurringDatePickerInputValues,
@@ -79,7 +79,7 @@ export const DateAndRecurrenceInput = ({
 
   useClickAway(popoverRef, (event) => {
     const isModal = CONFIRM_MODAL_ACTIONS.includes(
-      (event.target as HTMLElement)?.attributes?.getNamedItem("data-id")?.value
+      (event.target as HTMLElement)?.attributes?.getNamedItem("data-id")?.value,
     );
 
     if (isModal) {
@@ -96,7 +96,7 @@ export const DateAndRecurrenceInput = ({
 
   // in this method we should fulfill the form with a proper data
   const handleRecurringDateChange = async (
-    next: RecurringDatePickerInputValues
+    next: RecurringDatePickerInputValues,
   ) => {
     const isAvailableTimesFormValid =
       await availableTimesFormRef.current?.trigger();
@@ -186,8 +186,8 @@ export const DateAndRecurrenceInput = ({
       setValue(
         "menuRecurrences",
         menuRecurrences.filter(
-          (_currentMenuRecurrence, index) => index !== removeIndex
-        )
+          (_currentMenuRecurrence, index) => index !== removeIndex,
+        ),
       );
     }, 100);
   };
@@ -196,7 +196,7 @@ export const DateAndRecurrenceInput = ({
     if (over.id === active.id) return;
 
     const prevIndex = fields.findIndex(
-      (item) => String(item._id) === active.id
+      (item) => String(item._id) === active.id,
     );
     const nextIndex = fields.findIndex((item) => String(item._id) === over.id);
 
@@ -215,7 +215,7 @@ export const DateAndRecurrenceInput = ({
         {t(
           isEventEditProductSet
             ? "whenOverridesAvailable"
-            : "productSetAvailable"
+            : "productSetAvailable",
         )}
       </Form.Label>
 
@@ -241,7 +241,7 @@ export const DateAndRecurrenceInput = ({
                     }
                     clearErrorMessage={() =>
                       clearErrors(
-                        `menuRecurrences.${editState?.index}.availableTimes`
+                        `menuRecurrences.${editState?.index}.availableTimes`,
                       )
                     }
                   />
@@ -288,9 +288,8 @@ export const DateAndRecurrenceInput = ({
               onClick={handleOnAdd}
               onKeyDown={handleOnAdd}
             >
-              <Icon
-                type="plus-circle"
-                height="1rem"
+              <FaPlusCircle
+                size={16}
                 className="product-set-recurrence-icon-add mr-2"
               />
               {t("addDates")}

package/src/product-set/control/DateInput.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Form, OverlayTrigger, Popover } from "react-bootstrap";
@@ -11,9 +11,9 @@ import { DateTime } from "luxon";
 import RRule, { Frequency } from "rrule";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 
+import { FaPlusCircle } from "react-icons/fa";
 import { DatePickerInput } from "../../recurring-date-picker-input/DatePickerInput";
 import { CONFIRM_MODAL_ACTIONS } from "../../modals/confirmation/ConfirmModal";
-import { Icon } from "../../static";
 
 import {
   AvailableTimesControl,
@@ -73,7 +73,7 @@ export const DateInput = ({
 
   useClickAway(popoverRef, (event) => {
     const isModal = CONFIRM_MODAL_ACTIONS.includes(
-      (event.target as HTMLElement)?.attributes?.getNamedItem("data-id")?.value
+      (event.target as HTMLElement)?.attributes?.getNamedItem("data-id")?.value,
     );
 
     if (isModal) {
@@ -101,7 +101,7 @@ export const DateInput = ({
 
   // in this method we should fulfill the form with a proper data
   const handleRecurringDateChange = async (
-    next: RecurringDatePickerInputValues
+    next: RecurringDatePickerInputValues,
   ) => {
     const isAvailableTimesFormValid =
       await availableTimesFormRef.current?.trigger();
@@ -189,8 +189,8 @@ export const DateInput = ({
       setValue(
         "menuRecurrences",
         menuRecurrences.filter(
-          (_currentMenuRecurrence, index) => index !== removeIndex
-        )
+          (_currentMenuRecurrence, index) => index !== removeIndex,
+        ),
       );
     }, 100);
   };
@@ -201,7 +201,7 @@ export const DateInput = ({
         {t(
           isEventEditProductSet
             ? "whenOverridesAvailable"
-            : "productSetAvailable"
+            : "productSetAvailable",
         )}
       </Form.Label>
 
@@ -227,7 +227,7 @@ export const DateInput = ({
                     }
                     clearErrorMessage={() =>
                       clearErrors(
-                        `menuRecurrences.${editState?.index}.availableTimes`
+                        `menuRecurrences.${editState?.index}.availableTimes`,
                       )
                     }
                   />
@@ -259,11 +259,11 @@ export const DateInput = ({
               onClick={handleOnAdd}
               onKeyDown={handleOnAdd}
             >
-              <Icon
-                type="plus-circle"
-                height="1rem"
+              <FaPlusCircle
+                size={16}
                 className="product-set-recurrence-icon-add mr-2"
               />
+
               {t("addDates")}
             </div>
           )}

package/src/product-set/control/ProductSetControl.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import Form from "react-bootstrap/Form";
 import { FormProvider, useForm } from "react-hook-form";
 import {

package/src/product-set/control/ProductSetControl.tsx

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

package/src/product-set/control/ProductSetRecurrenceControl.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, Story } from "@storybook/react";
-import React, { useState } from "react";
+import { useState } from "react";
 import {
   ProductSetRecurrenceControl,
   ProductSetRecurrenceControlProps,
@@ -23,7 +23,7 @@ interface ProductSetRecurrences {
 
 export const Default: Story<ProductSetRecurrences> = (args) => {
   const [items, setItems] = useState(
-    args.menuRecurrences?.sort((a, b) => a.sort - b.sort) ?? []
+    args.menuRecurrences?.sort((a, b) => a.sort - b.sort) ?? [],
   );
 
   const onDragEnd = ({ over, active }) => {
@@ -31,7 +31,7 @@ export const Default: Story<ProductSetRecurrences> = (args) => {
 
     setItems((items) => {
       const prevIndex = items.findIndex(
-        (item) => String(item.id) === active.id
+        (item) => String(item.id) === active.id,
       );
       const nextIndex = items.findIndex((item) => String(item.id) === over.id);