@licklist/design 0.78.18 → 0.78.20

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,

package/src/v2/components/Alert/Alert.scss

@@ -0,0 +1,186 @@
+@import '../../../styles/overrides/functions';
+
+.alert {
+  background: var(--surfaces-status-background-success, #eef9ea);
+  border: 2px solid var(--borders-status-border-success, #c9ecbd);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--padding-reg, 16px);
+  border-radius: var(--radius-reg, 8px);
+  width: 100%;
+
+  // Variant-specific styles
+  &--success {
+    background: var(--surfaces-status-background-success, #eef9ea);
+    border-color: var(--borders-status-border-success, #c9ecbd);
+
+    .alert__icon {
+      background-image: url("./assets/success-icon.svg");
+    }
+
+    .alert__dismiss svg path {
+      stroke: var(--fills-status-fill-success, #2d6b18);
+    }
+  }
+
+  &--error {
+    background: var(--surfaces-status-background-error, #fceceb);
+    border-color: var(--borders-status-border-error, #f5c4c2);
+
+    .alert__icon {
+      background-image: url("./assets/error-icon.svg");
+    }
+
+    .alert__dismiss svg path {
+      stroke: var(--fills-status-fill-error, #cc3c35);
+    }
+  }
+
+  &--alert {
+    background: var(--surfaces-status-background-alert, #fcf6e7);
+    border-color: var(--borders-status-border-alert, #f6e3b4);
+
+    .alert__icon {
+      background-image: url("./assets/alert-icon.svg");
+    }
+
+    .alert__dismiss svg path {
+      stroke: var(--fills-status-fill-alert, #fd7e14);
+    }
+  }
+
+  &--info {
+    background: var(--surfaces-status-background-info, #e7f4fc);
+    border-color: var(--borders-status-border-info, #b4dbf6);
+
+    .alert__icon {
+      background-image: url("./assets/info-icon.svg");
+    }
+
+    .alert__dismiss svg path {
+      stroke: var(--fills-status-fill-info, #0e8ce2);
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex: 1 0 0;
+    gap: 16px;
+    align-items: center;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  &__icon {
+    overflow: hidden;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    position: relative;
+  }
+
+  &__details {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+    justify-content: center;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  &__information {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+    position: relative;
+    text-align: left;
+    font-size: 15px;
+    line-height: normal;
+    color: var(--labels-main-label-primary, #121e52);
+    width: 100%;
+    white-space: pre-wrap;
+  }
+
+  &__title {
+    font-family: 'Geist', sans-serif;
+    font-weight: 600;
+    font-size: 15px;
+    line-height: 18px;
+    color: var(--labels-main-label-primary, #121e52);
+    margin: 0;
+  }
+
+  &__message {
+    font-family: 'Geist', sans-serif;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 20px;
+    color: var(--labels-main-label-primary, #121e52);
+    max-width: 720px;
+    margin: 0;
+  }
+
+  &__link {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    cursor: pointer;
+    
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__link-text {
+    font-family: 'Geist', sans-serif;
+    font-weight: 500;
+    font-size: 15px;
+    line-height: 20px;
+    color: var(--labels-main-label-primary, #121e52);
+    margin: 0;
+  }
+
+  &__link-icon {
+    overflow: hidden;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    position: relative;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+
+  &__dismiss {
+    overflow: hidden;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s ease;
+    
+    &:hover {
+      opacity: 0.7;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+}