@licklist/design 0.78.19 → 0.78.21

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

@@ -20,7 +20,8 @@ export default {
 } as Meta
 
 export const Default: Story<ProductSetFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return (
     <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
@@ -28,7 +29,8 @@ export const Default: Story<ProductSetFormProps> = (args) => {
 }
 
 export const Empty: Story<ProductSetFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return (
     <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
@@ -36,13 +38,15 @@ export const Empty: Story<ProductSetFormProps> = (args) => {
 }
 
 export const Valid: Story<ProductSetFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return <ProductSetForm {...args} providerHasMap={providerHasMap} />
 }
 
 export const ServerErrors: Story<ProductSetFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return <ProductSetForm {...args} providerHasMap={providerHasMap} />
 }
@@ -119,6 +123,7 @@ Default.args = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: 'constant',
+            type: 'menuItems',
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -187,10 +192,12 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: 'recharging',
+            type: 'menuItems',
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
             hasBookingManagement: false,
+            products: [],
             sort: 1,
           },
         ],
@@ -258,6 +265,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: 'recharging',
+            type: 'menuItems',
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -343,6 +351,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: null,
             quantityType: 'recharging',
+            type: 'menuItems',
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,

package/src/provider/location-input/LocationInput.stories.tsx

@@ -1,5 +1,7 @@
 import { Meta, Story } from '@storybook/react-vite'
 import { FormProvider, useForm } from 'react-hook-form'
+import { useQueryClient } from 'react-query'
+import { TimeZonePath } from '@licklist/plugins'
 import { LocationInputValues } from '.'
 import { LocationInput } from './LocationInput'
 import { LocationInputDescription } from './LocationInputDescription'
@@ -14,19 +16,62 @@ const defaultValues: LocationInputValues = {
     state: 'Essex',
     country: 'GB',
   },
+  timeZoneId: '',
+}
+
+// Mock timezone data for Storybook
+const mockTimezones = [
+  { id: 1, name: 'Europe/London' },
+  { id: 2, name: 'America/New_York' },
+  { id: 3, name: 'America/Los_Angeles' },
+  { id: 4, name: 'Europe/Paris' },
+  { id: 5, name: 'Asia/Tokyo' },
+]
+
+// Decorator to mock timezone query data
+const withMockedTimezones = (Story) => {
+  const QueryClientWrapper = () => {
+    const queryClient = useQueryClient()
+    const path = '/api/timezones' as TimeZonePath
+
+    // Set query data synchronously before first render
+    // Try all possible query key formats
+    const queryKeys = [
+      [path, 'all'],
+      ['timezones', path, 'all'],
+      ['timeZone', path],
+      [path],
+      ['useTimeZoneApi', path, 'all'],
+    ]
+
+    queryKeys.forEach((key) => {
+      queryClient.setQueryData(key, mockTimezones)
+    })
+
+    // Also set query defaults to return mock data if query key doesn't match
+    queryClient.setQueryDefaults([path], {
+      queryFn: () => Promise.resolve(mockTimezones),
+      initialData: mockTimezones,
+    })
+
+    return <Story />
+  }
+
+  return <QueryClientWrapper />
 }
 
 export default {
   title: 'Provider/LocationInput',
   component: LocationInput,
   subcomponents: { LocationInputDescription },
+  decorators: [withMockedTimezones],
 } as Meta
 
 export const Default: Story = (args) => {
   const form = useForm<LocationInputValues>({ defaultValues })
   return (
     <FormProvider {...form}>
-      <LocationInput {...args} />
+      <LocationInput path={'/api/timezones' as TimeZonePath} {...args} />
     </FormProvider>
   )
 }
@@ -35,7 +80,7 @@ export const Description: Story = (args) => {
   const form = useForm<LocationInputValues>({ defaultValues })
   return (
     <FormProvider {...form}>
-      <LocationInputDescription {...args} />
+      <LocationInputDescription path={'/api/timezones' as TimeZonePath} {...args} />
     </FormProvider>
   )
 }

package/src/provider/provider-details-input/ProviderDetailsInput.stories.tsx

@@ -12,7 +12,16 @@ export default {
 } as Meta
 
 export const Default: Story<ProviderDetailsInputProps> = (args) => {
-  const form = useForm<ProviderDetailsInputValues>()
+  const form = useForm<ProviderDetailsInputValues>({
+    defaultValues: {
+      name: '',
+      description: '',
+      email: '',
+      phone: '',
+      website: '',
+      images: [],
+    },
+  })
   return (
     <FormProvider {...form}>
       <ProviderDetailsInput {...args} />

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -46,7 +46,7 @@ export function ProviderDetailsInput({
   const websiteId = useId()
   const companyId = useId()
 
-  const description = watch('description')
+  const description = watch('description') || ''
 
   useEffect(() => {
     if (MAX_DESCRIPTION_CHARACTERS_LENGTH > description.length) return

package/src/provider/provider-form/ProviderForm.stories.tsx

@@ -1,4 +1,6 @@
 import { Meta, Story } from '@storybook/react-vite'
+import { useQueryClient } from 'react-query'
+import { TimeZonePath } from '@licklist/plugins'
 import {
   ProviderForm,
   ProviderFormProps,
@@ -31,9 +33,51 @@ const defaultValues: ProviderFormValues = {
     state: 'Essex',
     country: 'GB',
   },
+  timeZoneId: '',
   images: [],
 }
 
+// Mock timezone data for Storybook
+const mockTimezones = [
+  { id: 1, name: 'Europe/London' },
+  { id: 2, name: 'America/New_York' },
+  { id: 3, name: 'America/Los_Angeles' },
+  { id: 4, name: 'Europe/Paris' },
+  { id: 5, name: 'Asia/Tokyo' },
+]
+
+// Decorator to mock timezone query data
+const withMockedTimezones = (Story) => {
+  const QueryClientWrapper = () => {
+    const queryClient = useQueryClient()
+    const path = '/api/timezones' as TimeZonePath
+
+    // Set query data synchronously before first render
+    // Try all possible query key formats
+    const queryKeys = [
+      [path, 'all'],
+      ['timezones', path, 'all'],
+      ['timeZone', path],
+      [path],
+      ['useTimeZoneApi', path, 'all'],
+    ]
+
+    queryKeys.forEach((key) => {
+      queryClient.setQueryData(key, mockTimezones)
+    })
+
+    // Also set query defaults to return mock data if query key doesn't match
+    queryClient.setQueryDefaults([path], {
+      queryFn: () => Promise.resolve(mockTimezones),
+      initialData: mockTimezones,
+    })
+
+    return <Story />
+  }
+
+  return <QueryClientWrapper />
+}
+
 const linkTypes = ['Facebook', 'Twitter', 'Other'].map((name, id) => ({
   name,
   id: `${id}`,
@@ -42,6 +86,7 @@ const linkTypes = ['Facebook', 'Twitter', 'Other'].map((name, id) => ({
 export default {
   title: 'Provider/ProviderForm',
   component: ProviderForm,
+  decorators: [withMockedTimezones],
 } as Meta
 
 export const Default: Story<ProviderFormProps> = (args) => (
@@ -59,4 +104,5 @@ Default.args = {
     { id: 3, value: 'user3', label: 'User3' },
   ],
   hasPermission: true,
+  path: '/api/timezones' as TimeZonePath,
 }

package/src/provider/venue-form/VenueForm.stories.tsx

@@ -1,4 +1,6 @@
 import { Meta, Story } from '@storybook/react-vite'
+import { useQueryClient } from 'react-query'
+import { TimeZonePath } from '@licklist/plugins'
 import { VenueForm, VenueFormProps, VenueFormValues } from './VenueForm'
 
 const categories = Array.from({ length: 6 }, (_, i) => ({
@@ -50,6 +52,7 @@ const defaultValues: VenueFormValues = {
     state: 'Essex',
     country: 'GB',
   },
+  timeZoneId: '',
   workingHours: [
     { start: '08:00', end: '18:00', description: 'Description' },
     undefined,
@@ -58,6 +61,47 @@ const defaultValues: VenueFormValues = {
   images: [],
 }
 
+// Mock timezone data for Storybook
+const mockTimezones = [
+  { id: 1, name: 'Europe/London' },
+  { id: 2, name: 'America/New_York' },
+  { id: 3, name: 'America/Los_Angeles' },
+  { id: 4, name: 'Europe/Paris' },
+  { id: 5, name: 'Asia/Tokyo' },
+]
+
+// Decorator to mock timezone query data
+const withMockedTimezones = (Story) => {
+  const QueryClientWrapper = () => {
+    const queryClient = useQueryClient()
+    const path = '/api/timezones' as TimeZonePath
+
+    // Set query data synchronously before first render
+    // Try all possible query key formats
+    const queryKeys = [
+      [path, 'all'],
+      ['timezones', path, 'all'],
+      ['timeZone', path],
+      [path],
+      ['useTimeZoneApi', path, 'all'],
+    ]
+
+    queryKeys.forEach((key) => {
+      queryClient.setQueryData(key, mockTimezones)
+    })
+
+    // Also set query defaults to return mock data if query key doesn't match
+    queryClient.setQueryDefaults([path], {
+      queryFn: () => Promise.resolve(mockTimezones),
+      initialData: mockTimezones,
+    })
+
+    return <Story />
+  }
+
+  return <QueryClientWrapper />
+}
+
 const linkTypes = ['Facebook', 'Twitter', 'Other'].map((name, id) => ({
   id: `${id}`,
   name,
@@ -66,6 +110,7 @@ const linkTypes = ['Facebook', 'Twitter', 'Other'].map((name, id) => ({
 export default {
   title: 'Provider/VenueForm',
   component: VenueForm,
+  decorators: [withMockedTimezones],
 } as Meta
 
 export const Default: Story<VenueFormProps> = (args) => <VenueForm {...args} />
@@ -75,10 +120,14 @@ export const WithDefaultValues: Story<VenueFormProps> = (args) => (
 Default.args = {
   categories,
   linkTypes,
+  path: '/api/timezones' as TimeZonePath,
+  onSubmit: (values) => console.log(values),
 }
 WithDefaultValues.args = {
   defaultValues,
   categories,
   linkTypes,
   errorResponse,
+  path: '/api/timezones' as TimeZonePath,
+  onSubmit: (values) => console.log(values),
 }

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -35,14 +35,16 @@ function RecurrenceEndInput({
   const dateInput = useRef<HTMLInputDateElement | null>(null)
 
   useEffect(() => {
-    const untilDatetime = DateTime.fromFormat(
-      until ?? getUntil({ date, frequency }),
-      DATE_FORMAT,
-    )
+    if (!minDate) return
 
+    const untilValue = until ?? getUntil({ date, frequency })
+    // getUntil returns ISO date, so use fromISO; until prop should also be ISO format
+    const untilDatetime = DateTime.fromISO(untilValue)
+
+    // minDate should be in DATE_FORMAT, so use fromFormat
     const minDatetime = DateTime.fromFormat(minDate, DATE_FORMAT)
 
-    if (minDatetime > untilDatetime) {
+    if (untilDatetime.isValid && minDatetime.isValid && minDatetime > untilDatetime) {
       onChange({ until: minDate })
     }
   }, [minDate, onChange, until, date, frequency])

package/src/recurrence-input/RecurrenceInput.stories.tsx

@@ -17,4 +17,7 @@ export const Default: Story<RecurrenceInputProps> = (args) => (
 )
 Default.args = {
   date: DateTime.now().toISODate(),
+  onChange: (value: string) => {
+    console.log('onChange called with:', value)
+  },
 }

package/src/resource/form/ResourceForm.stories.tsx

@@ -9,7 +9,8 @@ export default {
 } as Meta
 
 export const Default: Story<ResourceFormProps> = (args) => {
-  const isLoading = boolean('isLoading', false)
+  // TODO: Replace with Storybook controls
+  const isLoading = false
   return <ResourceForm {...args} isLoading={isLoading} />
 }
 

package/src/sales/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -11,7 +11,8 @@ export default {
 } as Meta
 
 export const Default = (args) => {
-  const useProviderLink = boolean('useProviderLink', true)
+  // TODO: Replace with Storybook controls
+  const useProviderLink = true
 
   const renderOrderTitleLinkByProvider = (order: Order) => {
     return (

package/src/sales/life-time-sales/LifeTimeSalesChart.stories.tsx

@@ -47,7 +47,8 @@ const data: LifeTimeSalesData[] = [
 ]
 
 export const Default: Story<any> = (args) => {
-  const isLoading = boolean('isLoading', true)
+  // TODO: Replace with Storybook controls
+  const isLoading = true
 
   return (
     <div style={{ height: '250px', width: '370px' }}>

package/src/sales/manual-booking/select-date-type-control/SelectDateTypeControl.stories.tsx

@@ -13,7 +13,8 @@ export const Default: Story<any> = (args) => {
     undefined,
   )
   const [orderDate, setOrderDate] = useState<string>('2018-07-22')
-  const showTypeSelect = boolean('showTypeSelect', true)
+  // TODO: Replace with Storybook controls
+  const showTypeSelect = true
 
   return (
     <div style={{ height: '250px', width: '370px' }}>

package/src/sales/manual-booking/select-menu/SelectMenu.stories.tsx

@@ -148,7 +148,8 @@ const tranformedMenus = transformMenus([
 ])
 
 export const Default: Story<SelectMenuProps> = () => {
-  const isLoading = boolean('isLoading', false)
+  // TODO: Replace with Storybook controls
+  const isLoading = false
 
   return (
     <SelectMenu

package/src/sales/modals/payment-modal/PaymentModal.stories.tsx

@@ -17,8 +17,9 @@ const Component = () => {
   const [isVisible, setIsVisible] = useState(false)
   const [isValid, setIsValid] = useState(false)
   const [ryftInitFailure, setRyftInitFailure] = useState(false)
-  const isLoading = boolean('isLoading', false)
-  const remainingToPay = number('remainingToPay', 10)
+  // TODO: Replace with Storybook controls
+  const isLoading = false
+  const remainingToPay = 10
   const { formValues } = useContext(SalePaymentFormContext)
 
   const ryftPayment = useRyftPayment()

package/src/sales/modals/refund-modal/RefundModal.stories.tsx

@@ -10,10 +10,11 @@ export default {
 
 export const Default: Story<RefundModalProps> = () => {
   const [isVisible, setIsVisible] = useState(false)
-  const isFullRefund = boolean('isFullRefund', false)
-  const isLoading = boolean('isLoading', false)
-  const defaultValue = number('defaultValue', 0)
-  const maxValue = number('maxValue', 0)
+  // TODO: Replace with Storybook controls
+  const isFullRefund = false
+  const isLoading = false
+  const defaultValue = 0
+  const maxValue = 0
 
   const onSubmit = (value: number | undefined) => {
     console.log(value)

package/src/sales/payment-form/SalePaymentForm.stories.tsx

@@ -15,8 +15,9 @@ export default {
 } as Meta
 // @TODO add ryft script in Storybook <head>
 export const Default: Story<SalePaymentFormProps> = () => {
-  const showAmountField = boolean('showAmountField', true)
-  const calculatedAmount = number('calculatedAmount', 50)
+  // TODO: Replace with Storybook controls
+  const showAmountField = true
+  const calculatedAmount = 50
   const [isValid, setIsValid] = useState(false)
   const [ryftInitFailure, setRyftInitFailure] = useState(false)
 

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

@@ -11,7 +11,8 @@ export default {
 } as Meta
 
 export const Default: Story<SnippetTemplateCardProps> = (args) => {
-  const isDefault = boolean('isDefault', false)
+  // TODO: Replace with Storybook controls
+  const isDefault = false
   return <SnippetTemplateCard {...args} isDefault={isDefault} />
 }
 

package/src/snippet/snippet-template/SnippetTemplate.stories.tsx

@@ -9,7 +9,8 @@ export default {
 } as Meta
 
 export const Default: Story<SnippetTemplateProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return <SnippetTemplate {...args} providerHasMap={providerHasMap} />
 }

package/src/snippet/snippet-template/form/SnippetTemplateForm.stories.tsx

@@ -54,7 +54,8 @@ const defaultValues = {
 }
 
 export const Default: Story<SnippetTemplateFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return (
     <SnippetTemplateLoadingContextProvider>
@@ -68,7 +69,8 @@ export const Default: Story<SnippetTemplateFormProps> = (args) => {
 }
 
 export const ServerError: Story<SnippetTemplateFormProps> = (args) => {
-  const providerHasMap = boolean('providerHasMap', true)
+  // TODO: Replace with Storybook controls
+  const providerHasMap = true
 
   return (
     <SnippetTemplateLoadingContextProvider>

package/src/sortable-tree/SortableTree.tsx

@@ -20,7 +20,7 @@ export function SortableTree({
   sensors,
 }: PropsWithChildren<SortableTreeProps>) {
   return (
-    <DndContext onDragEnd={onDragEnd} sensors={[...sensors]}>
+    <DndContext onDragEnd={onDragEnd} sensors={sensors ?? []}>
       <SortableContext items={items} strategy={verticalListSortingStrategy}>
         {children}
       </SortableContext>

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

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { DndContext } from '@dnd-kit/core'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
 import { Meta, Story } from '@storybook/react-vite'
@@ -9,20 +10,17 @@ export default {
   component: SortableTreeItem,
 } as Meta
 
-export const Default: Story<SortableTreeItemProps> = (args) => (
-  <DndContext>
-    <SortableContext items={[args.id]} strategy={verticalListSortingStrategy}>
-      {[1, 2, 3].map((item) => (
-        <SortableTreeItem
-          {...args}
-          id={String(item)}
-          title={`Step number ${item}`}
-        />
-      ))}
-      <SortableTreeItem {...args} />
-    </SortableContext>
-  </DndContext>
-)
+export const Default: Story<SortableTreeItemProps> = (args) => {
+  const items = useMemo(() => [args.id], [args.id])
+
+  return (
+    <DndContext>
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        <SortableTreeItem {...args} />
+      </SortableContext>
+    </DndContext>
+  )
+}
 
 Default.args = {
   id: '4',

package/src/styles/overrides/_functions.scss

@@ -3,4 +3,4 @@
 // size in scalable pixels (0.25rem by default)
 @function sp($value) {
   @return calc($value / 4 * $font-size-base);
-}
+}

package/src/table/Table.stories.tsx

@@ -2,7 +2,6 @@ import ILengthAwarePaginator from '@licklist/plugins/dist/types/services/Table/I
 import { Meta, Story } from '@storybook/react-vite'
 import { range } from 'lodash'
 import { useRef } from 'react'
-import { Router } from '../auth/Router'
 import {
   FilterHelperComponent as FilterHelper,
   FilterHelperComponentProps,
@@ -33,13 +32,7 @@ export default {
 
 export const TableHelperComponent: Story<TableHelperComponentProps> = (
   args,
-) => (
-  <>
-    <Router>
-      <TableHelper {...args} />
-    </Router>
-  </>
-)
+) => <TableHelper {...args} />
 export const FilterHelperComponent: Story<FilterHelperComponentProps> = (
   args,
 ) => <FilterHelper {...args} />
@@ -54,13 +47,7 @@ export const PerPageHelperComponent: Story<PerPageHelperComponentProps> = (
 
 export const ReactTableHelperComponent: Story<
   ReactTableHelperComponentProps<any>
-> = (args) => (
-  <>
-    <Router>
-      <ReactTableHelper {...args} />
-    </Router>
-  </>
-)
+> = (args) => <ReactTableHelper {...args} />
 
 const ComponentInsideRouter = (args) => {
   const ref = useRef<ReactTableHelperComponentRef>(null)
@@ -76,15 +63,7 @@ const ComponentInsideRouter = (args) => {
 
 export const ReactTableHelperComponentWithColumns: Story<
   ReactTableHelperComponentProps<any>
-> = (args) => {
-  return (
-    <>
-      <Router>
-        <ComponentInsideRouter {...args} />
-      </Router>
-    </>
-  )
-}
+> = (args) => <ComponentInsideRouter {...args} />
 
 const getPaginator = (perPage, items = 100) =>
   ({

package/src/tiptap-editor/TipTapMenu/TipTapMenu.stories.tsx

@@ -1,10 +1,22 @@
 import { TipTapMenu } from './TipTapMenu'
 import { useEditor } from '@tiptap/react'
 import { Meta } from '@storybook/react-vite'
-import TaskList from '@tiptap/extension-task-list'
-import TaskItem from '@tiptap/extension-task-item'
+import Bold from '@tiptap/extension-bold'
 import Text from '@tiptap/extension-text'
+import Blockquote from '@tiptap/extension-blockquote'
+import BulletList from '@tiptap/extension-bullet-list'
 import Document from '@tiptap/extension-document'
+import Heading from '@tiptap/extension-heading'
+import History from '@tiptap/extension-history'
+import HorizontalRule from '@tiptap/extension-horizontal-rule'
+import Italic from '@tiptap/extension-italic'
+import ListItem from '@tiptap/extension-list-item'
+import OrderedList from '@tiptap/extension-ordered-list'
+import Paragraph from '@tiptap/extension-paragraph'
+import Strike from '@tiptap/extension-strike'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+import HardBreak from '@tiptap/extension-hard-break'
 
 import { EmojiReplacer } from './extensions/EmojiReplacer'
 
@@ -16,8 +28,20 @@ export default {
 export const Default = () => {
   const editor = useEditor({
     extensions: [
-      Text,
+      Blockquote,
+      BulletList,
+      Heading,
+      History,
+      HorizontalRule,
+      Strike,
+      Paragraph,
+      OrderedList,
+      ListItem,
+      Italic,
       Document,
+      Text,
+      Bold,
+      HardBreak,
       TaskList,
       TaskItem.configure({
         nested: true,