@licklist/design 0.78.16 → 0.78.18

package/src/logo/Logo.stories.tsx

@@ -1,4 +1,4 @@
-import { color } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 import Logo from './Logo'
 import { ReactComponent as BookeditLogoSvg } from '../assets/logo/bookedit.svg'
 import { ReactComponent as LicklistLogoSvg } from '../assets/logo/licklist.svg'

package/src/modals/confirmation/ConfirmModal.tsx

@@ -91,7 +91,12 @@ export function ConfirmModal({
         contentClassName='rounded'
         className='confirm-modal'
       >
-        <ModalHeader className='align-items-center border-0'>
+        <ModalHeader 
+          className='align-items-center border-0'
+          placeholder={undefined}
+          onPointerEnterCapture={undefined}
+          onPointerLeaveCapture={undefined}
+        >
           <ModalTitle as='h6'>
             {title ?? t('pleaseConfirmThisAction')}
           </ModalTitle>

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

@@ -1,5 +1,5 @@
-import { Meta, Story } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+import { Meta, Story } from '@storybook/react-vite'
+// TODO: Replace knobs with controls
 import { ConfirmModal, ConfirmModalProps } from './ConfirmModal'
 
 export default {

package/src/modals/fullscreen/FullscreenModal.tsx

@@ -55,7 +55,12 @@ export const FullscreenModal = ({
         contentClassName='fullscreen-modal-content'
       >
         {showHeader && (
-          <ModalHeader className='align-items-center border-0'>
+          <ModalHeader 
+            className='align-items-center border-0'
+            placeholder={undefined}
+            onPointerEnterCapture={undefined}
+            onPointerLeaveCapture={undefined}
+          >
             {title && <ModalTitle as='h6'>{title}</ModalTitle>}
 
             <Button

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { EventVenueMap } from '../../events/event-venue-map'
 import { FullscreenModal, FullscreenModalProps } from './FullscreenModal'
 

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import {
   NotificationPlaceholders,

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { EmailTemplateCard, EmailTemplateCardProps } from './EmailTemplateCard'
 

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

@@ -2,7 +2,10 @@ import { forwardRef, useState, useEffect } from 'react'
 import { Col, Row, Form } from 'react-bootstrap'
 import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
-import EmailEditor from 'react-email-editor'
+import UnlayerEmailEditor from 'react-email-editor'
+import React from 'react'
+// Workaround for TS S2786 with react-email-editor typings in React 18
+const EmailEditorComponent = UnlayerEmailEditor as unknown as React.ComponentType<any>
 import {
   TemplateOption,
   OPTION_TYPE,
@@ -122,7 +125,7 @@ export const EmailTemplateControl = forwardRef(
       setIsIncludePDF(true)
     }, [options])
 
-    const handleDeleteEmailImage = (content) => {
+    const handleDeleteEmailImage = (content: any) => {
       const imgUrl = content.item.values.src.url
 
       if (imgUrl.includes('unlayer')) return
@@ -214,7 +217,6 @@ export const EmailTemplateControl = forwardRef(
               name='type'
               required
               isInvalid={Boolean(errors.type)}
-              placeholder={t('Design:type')}
               disabled={!!id}
             >
               <option value=''>{t('Design:choose')}</option>
@@ -315,7 +317,7 @@ export const EmailTemplateControl = forwardRef(
             </div>
 
             <div className={`email-editor ${errors.body && 'is-invalid'}`}>
-              <EmailEditor
+              <EmailEditorComponent
                 ref={ref}
                 onReady={onReadyEditor}
                 style={{ height: '50rem' }}
@@ -377,7 +379,7 @@ export const EmailTemplateControl = forwardRef(
                 // should show dropdown only if user want to include PDF file
                 if (option.type === OPTION_TYPE.files_selector && !waiverType) {
                    const fileSelectors =  option?.defaultValue ? JSON.parse(option.defaultValue) : ''
-                  const fileNames =  Object.values(fileSelectors) : []
+                  const fileNames = Object.values(fileSelectors) || []
                   const fileKeys = Object.keys(fileSelectors)
 
                   return (
@@ -415,7 +417,7 @@ export const EmailTemplateControl = forwardRef(
                                 value={String(fileType)}
                                 key={String(fileType)}
                               >
-                                {fileNames[index]}
+                                {String(fileNames[index])}
                               </option>
                             ))}
                           </Form.Control>

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { EmailTemplateForm, EmailTemplateProps } from './EmailTemplateForm'
 

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import {
   SendEmailTemplateForm,

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { SmsTemplateCard, SmsTemplateCardProps } from './SmsTemplateCard'
 

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

@@ -33,8 +33,6 @@ export function SmsTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
-        {/* TODO fix issue react router types
-      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal

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

@@ -43,7 +43,6 @@ export const SmsTemplateControl = ({
             name='type'
             required
             isInvalid={Boolean(errors.type)}
-            placeholder={t('Design:type')}
             disabled={!!id}
           >
             <option value=''>{t('Design:choose')}</option>

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { SmsTemplateForm, SmsTemplateProps } from './SmsTemplateForm'
 

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

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Meta } from '@storybook/react'
+import { Meta } from '@storybook/react-vite'
 import { RenderNumberOfPeopleInputComponent } from './RenderNumberOfPeopleInputComponent'
 
 export default {

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import { ProductSetCard, ProductSetCardProps } from './ProductSetCard'
 

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import {

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { useState } from 'react'
 import {
   ProductSetRecurrenceControl,

package/src/product-set/deposit-paid/ProductSetDepositPaid.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import {

package/src/product-set/elements/Elements.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { DeleteFieldButton, DeleteFieldButtonProps } from './DeleteFieldButton'
 
 export default {

package/src/product-set/form/ProductSetForm.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 /* eslint-disable no-console */
-import { Meta, Story } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+import { Meta, Story } from '@storybook/react-vite'
+// TODO: Replace knobs with controls
 import {
   CONFIRMATION_TYPE,
   PAYMENT_LINK_TYPE,

package/src/product-set/form/SelectCategoryModal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 
 import {
   SelectCategoryModal,

package/src/product-set/form/SelectCategoryModal.tsx

@@ -110,7 +110,12 @@ export function SelectCategoryModal({
       animation={false}
       contentClassName='rounded'
     >
-      <ModalHeader className='align-items-center border-0'>
+      <ModalHeader 
+        className='align-items-center border-0'
+        placeholder={undefined}
+        onPointerEnterCapture={undefined}
+        onPointerLeaveCapture={undefined}
+      >
         <ModalTitle as='h5'>{t('Design:selectCategory')}</ModalTitle>
 
         <Button variant='danger' className='btn-sm rounded' onClick={onHide}>

package/src/product-set/popover/ProductSetPopover.stories.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react'
-import { Meta } from '@storybook/react'
+import { Meta } from '@storybook/react-vite'
 import { Tab, Tabs } from 'react-bootstrap'
 import { useClickAway } from 'react-use'
 import { ProductSetPopover } from './ProductSetPopover'

package/src/product-set/product/Product.stories.tsx

@@ -1,6 +1,6 @@
 import { DndContext } from '@dnd-kit/core'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import { SortableTree } from '../../sortable-tree'

package/src/product-set/product/booking-management/ProductBookingManagement.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import {

package/src/product-set/product/deposit/ProductDeposit.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import {

package/src/product-set/product/duration/ProductDurationControl.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { useForm, FormProvider } from 'react-hook-form'
 import { ProductDurationControl } from './ProductDurationControl'
 

package/src/product-set/product/price/ProductPrice.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import {

package/src/product-set/product/quantity/ProductQuantity.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import {

package/src/product-set/product/scanRange/{ProductScanRangeControl.stories.ts → ProductScanRangeControl.stories.tsx}

@@ -1,5 +1,5 @@
 // ProductScanRangeControl.stories.tsx
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { FormProvider, useForm } from 'react-hook-form';
 import Form from 'react-bootstrap/Form';        
 

package/src/product-set/product-category/ProductCategory.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { DndContext } from '@dnd-kit/core'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import Form from 'react-bootstrap/Form'
 import { FormProvider, useForm } from 'react-hook-form'
 import {

package/src/product-set/step/Step.stories.tsx

@@ -4,7 +4,7 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import Badge from 'react-bootstrap/Badge'

package/src/product-set/tabs/ProductSetTab.tsx

@@ -6,6 +6,7 @@ import { Tab } from 'react-bootstrap'
 export type ProductSetTabProps = {
   eventKey?: string
   title?: string
+  children?: React.ReactNode
 }
 
 export const ProductSetTab: FunctionComponent<ProductSetTabProps> = ({

package/src/product-set/tabs/ProductSetTabs.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react'
+import { Meta } from '@storybook/react-vite'
 import { ProductSetTabs } from './ProductSetTabs'
 
 export default {

package/src/provider/categories-input/CategoriesInput.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react'
+import { Meta, Story } from '@storybook/react-vite'
 import { FormProvider, useForm } from 'react-hook-form'
 import { CategoriesInputValues } from '.'
 import { CategoriesInput, CategoriesInputProps } from './CategoriesInput'