willba-component-library 0.3.26 → 0.4.0

package/src/components/FilterCalendar/FilterCalendar.stories.tsx

@@ -1,554 +0,0 @@
-import { useState } from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import FilterCalendar from './FilterCalendar'
-
-const meta: Meta<typeof FilterCalendar> = {
-  title: 'Components/FilterCalendar',
-  component: FilterCalendar,
-}
-
-export default meta
-
-type Story = StoryObj<typeof FilterCalendar>
-
-const baseData = {
-  disableCalendarDates: {
-    availableDates: [
-      {
-        checkIn: new Date('2026-07-01'),
-        firstCheckOut: new Date('2026-07-02'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-07-02'),
-        firstCheckOut: new Date('2026-07-03'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-07-03'),
-        firstCheckOut: new Date('2026-07-04'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-07-08'),
-        firstCheckOut: new Date('2026-07-09'),
-        lastCheckOut: new Date('2026-07-14'),
-      },
-      {
-        checkIn: new Date('2026-07-09'),
-        firstCheckOut: new Date('2026-07-10'),
-        lastCheckOut: new Date('2026-07-14'),
-      },
-      {
-        checkIn: new Date('2026-07-10'),
-        firstCheckOut: new Date('2026-07-11'),
-        lastCheckOut: new Date('2026-07-14'),
-      },
-      {
-        checkIn: new Date('2026-07-11'),
-        firstCheckOut: new Date('2026-07-12'),
-        lastCheckOut: new Date('2026-07-14'),
-      },
-      {
-        checkIn: new Date('2026-07-12'),
-        firstCheckOut: new Date('2026-07-13'),
-        lastCheckOut: new Date('2026-07-14'),
-      },
-      {
-        checkIn: new Date('2026-07-13'),
-        firstCheckOut: new Date('2026-07-14'),
-        lastCheckOut: new Date('2026-07-14'),
-      },
-      {
-        checkIn: new Date('2026-07-17'),
-        firstCheckOut: new Date('2026-07-20'),
-        lastCheckOut: new Date('2026-08-05'),
-      },
-      {
-        checkIn: new Date('2026-07-18'),
-        firstCheckOut: new Date('2026-07-19'),
-        lastCheckOut: new Date('2026-08-05'),
-      },
-      {
-        checkIn: new Date('2026-07-19'),
-        firstCheckOut: new Date('2026-07-20'),
-        lastCheckOut: new Date('2026-08-05'),
-      },
-      {
-        checkIn: new Date('2026-07-20'),
-        firstCheckOut: new Date('2026-07-21'),
-        lastCheckOut: new Date('2026-08-05'),
-      },
-      {
-        checkIn: new Date('2026-07-21'),
-        firstCheckOut: new Date('2026-07-22'),
-        lastCheckOut: new Date('2026-08-05'),
-      },
-      {
-        checkIn: new Date('2026-07-22'),
-        firstCheckOut: new Date('2026-07-23'),
-        lastCheckOut: new Date('2026-08-05'),
-      },
-      {
-        checkIn: new Date('2026-07-23'),
-        firstCheckOut: new Date('2026-07-24'),
-        lastCheckOut: new Date('2026-08-05'),
-      },
-      {
-        checkIn: new Date('2026-07-24'),
-        firstCheckOut: new Date('2026-07-25'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-07-25'),
-        firstCheckOut: new Date('2026-07-26'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-07-26'),
-        firstCheckOut: new Date('2026-07-27'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-07-27'),
-        firstCheckOut: new Date('2026-07-28'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-07-28'),
-        firstCheckOut: new Date('2026-07-29'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-07-29'),
-        firstCheckOut: new Date('2026-07-30'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-07-30'),
-        firstCheckOut: new Date('2026-07-31'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-07-31'),
-        firstCheckOut: new Date('2026-08-01'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-01'),
-        firstCheckOut: new Date('2026-08-02'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-02'),
-        firstCheckOut: new Date('2026-08-03'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-03'),
-        firstCheckOut: new Date('2026-08-04'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-04'),
-        firstCheckOut: new Date('2026-08-05'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-05'),
-        firstCheckOut: new Date('2026-08-06'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-06'),
-        firstCheckOut: new Date('2026-08-07'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-07'),
-        firstCheckOut: new Date('2026-08-08'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-08'),
-        firstCheckOut: new Date('2026-08-09'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-09'),
-        firstCheckOut: new Date('2026-08-10'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-10'),
-        firstCheckOut: new Date('2026-08-11'),
-        lastCheckOut: new Date('2026-08-11'),
-      },
-      {
-        checkIn: new Date('2026-08-11'),
-        firstCheckOut: new Date('2026-08-12'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-12'),
-        firstCheckOut: new Date('2026-08-13'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-13'),
-        firstCheckOut: new Date('2026-08-14'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-14'),
-        firstCheckOut: new Date('2026-08-15'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-15'),
-        firstCheckOut: new Date('2026-08-16'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-16'),
-        firstCheckOut: new Date('2026-08-17'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-17'),
-        firstCheckOut: new Date('2026-08-18'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-18'),
-        firstCheckOut: new Date('2026-08-19'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-19'),
-        firstCheckOut: new Date('2026-08-20'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-20'),
-        firstCheckOut: new Date('2026-08-21'),
-        lastCheckOut: new Date('2026-09-01'),
-      },
-      {
-        checkIn: new Date('2026-08-21'),
-        firstCheckOut: new Date('2026-08-22'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-08-22'),
-        firstCheckOut: new Date('2026-08-23'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-08-23'),
-        firstCheckOut: new Date('2026-08-24'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-08-24'),
-        firstCheckOut: new Date('2026-08-25'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-08-25'),
-        firstCheckOut: new Date('2026-08-26'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-08-26'),
-        firstCheckOut: new Date('2026-08-27'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-08-27'),
-        firstCheckOut: new Date('2026-08-28'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-08-28'),
-        firstCheckOut: new Date('2026-09-01'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-06-01'),
-        firstCheckOut: new Date('2026-06-02'),
-        lastCheckOut: new Date('2026-06-03'),
-      },
-      {
-        checkIn: new Date('2026-06-02'),
-        firstCheckOut: new Date('2026-06-03'),
-        lastCheckOut: new Date('2026-06-03'),
-      },
-      {
-        checkIn: new Date('2026-06-07'),
-        firstCheckOut: new Date('2026-06-08'),
-        lastCheckOut: new Date('2026-06-11'),
-      },
-      {
-        checkIn: new Date('2026-06-08'),
-        firstCheckOut: new Date('2026-06-09'),
-        lastCheckOut: new Date('2026-06-11'),
-      },
-      {
-        checkIn: new Date('2026-06-09'),
-        firstCheckOut: new Date('2026-06-10'),
-        lastCheckOut: new Date('2026-06-11'),
-      },
-      {
-        checkIn: new Date('2026-06-10'),
-        firstCheckOut: new Date('2026-06-11'),
-        lastCheckOut: new Date('2026-06-11'),
-      },
-      {
-        checkIn: new Date('2026-06-14'),
-        firstCheckOut: new Date('2026-06-15'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-15'),
-        firstCheckOut: new Date('2026-06-16'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-16'),
-        firstCheckOut: new Date('2026-06-17'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-17'),
-        firstCheckOut: new Date('2026-06-18'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-18'),
-        firstCheckOut: new Date('2026-06-19'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-19'),
-        firstCheckOut: new Date('2026-06-20'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-20'),
-        firstCheckOut: new Date('2026-06-21'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-21'),
-        firstCheckOut: new Date('2026-06-22'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-22'),
-        firstCheckOut: new Date('2026-06-23'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-23'),
-        firstCheckOut: new Date('2026-06-24'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-24'),
-        firstCheckOut: new Date('2026-06-25'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-25'),
-        firstCheckOut: new Date('2026-06-26'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-26'),
-        firstCheckOut: new Date('2026-06-27'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-27'),
-        firstCheckOut: new Date('2026-06-28'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-28'),
-        firstCheckOut: new Date('2026-06-29'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-29'),
-        firstCheckOut: new Date('2026-06-30'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-30'),
-        firstCheckOut: new Date('2026-06-31'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-06-31'),
-        firstCheckOut: new Date('2026-07-01'),
-        lastCheckOut: new Date('2026-07-04'),
-      },
-      {
-        checkIn: new Date('2026-09-01'),
-        firstCheckOut: new Date('2026-09-02'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-02'),
-        firstCheckOut: new Date('2026-09-03'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-03'),
-        firstCheckOut: new Date('2026-09-04'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-04'),
-        firstCheckOut: new Date('2026-09-05'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-05'),
-        firstCheckOut: new Date('2026-09-06'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-06'),
-        firstCheckOut: new Date('2026-09-07'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-07'),
-        firstCheckOut: new Date('2026-09-08'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-08'),
-        firstCheckOut: new Date('2026-09-09'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-09'),
-        firstCheckOut: new Date('2026-09-10'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-10'),
-        firstCheckOut: new Date('2026-09-11'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-      {
-        checkIn: new Date('2026-09-11'),
-        firstCheckOut: new Date('2026-09-12'),
-        lastCheckOut: new Date('2026-09-12'),
-      },
-    ],
-    disabledDates: [
-      {
-        to: new Date('2026-07-07'),
-        from: new Date('2026-07-04'),
-      },
-      {
-        to: new Date('2026-07-16'),
-        from: new Date('2026-07-14'),
-      },
-      {
-        to: new Date('2026-06-06'),
-        from: new Date('2026-06-03'),
-      },
-      {
-        to: new Date('2026-06-13'),
-        from: new Date('2026-06-11'),
-      },
-      {
-        to: new Date('2026-09-31'),
-        from: new Date('2026-09-12'),
-      },
-    ],
-  },
-
-  language: 'en',
-  palette: {
-    primary: '#0095d9',
-    secondary: '#0095d9',
-    error: '#d32f2f',
-  },
-  loadingData: false,
-  toggleCalendar: true,
-  onSubmit: (val: any) => console.log('onSubmit ->', val),
-  setToggleCalendar: (val: any) => console.log('setToggleCalendar ->', val),
-  requestDates: (val: any) => console.log('requestDates ->', val),
-  showFeedback: true,
-  noActiveSelection: true,
-}
-
-export const Default: Story = {
-  args: { ...baseData },
-  render: (args) => {
-    const [toggleCalendar, setToggleCalendar] = useState(true)
-    return (
-      <div style={{ padding: '30px', height: '100vh' }}>
-        <FilterCalendar
-          {...args}
-          toggleCalendar={toggleCalendar}
-          setToggleCalendar={setToggleCalendar}
-        />
-        {/* <button onClick={() => setToggleCalendar(true)}>Open calendar</button> */}
-      </div>
-    )
-  },
-}
-
-export const RangeContext: Story = {
-  args: {
-    ...baseData,
-    rangeContext: {
-      from: new Date('2026-07-09'),
-      to: new Date('2026-07-26'),
-    },
-  },
-  render: (args) => {
-    const [toggleCalendar, setToggleCalendar] = useState(true)
-    return (
-      <div style={{ padding: '30px', height: '100vh' }}>
-        <FilterCalendar
-          {...args}
-          toggleCalendar={toggleCalendar}
-          setToggleCalendar={setToggleCalendar}
-        />
-        {/* <button onClick={() => setToggleCalendar(true)}>Open calendar</button> */}
-      </div>
-    )
-  },
-}
-
-export const DisabledRangeContextDates: Story = {
-  args: {
-    ...baseData,
-    rangeContext: {
-      from: new Date('2026-07-04'),
-      to: new Date('2026-07-24'),
-    },
-  },
-  render: (args) => {
-    const [toggleCalendar, setToggleCalendar] = useState(true)
-    return (
-      <div style={{ padding: '30px', height: '100vh' }}>
-        <FilterCalendar
-          {...args}
-          toggleCalendar={toggleCalendar}
-          setToggleCalendar={setToggleCalendar}
-        />
-        {/* <button onClick={() => setToggleCalendar(true)}>Open calendar</button> */}
-      </div>
-    )
-  },
-}

package/src/components/FilterCalendar/FilterCalendar.tsx

@@ -1,115 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { useTheme } from '../../themes/useTheme'
-import { Calendar, CloseButton } from '../../core/components'
-import {
-  useAwaitRender,
-  useCloseFilterSection,
-  useUpdateTranslations,
-} from '../../core/hooks'
-
-import { FilterCalendarTypes } from './FilterCalendarTypes'
-import { useFilterCalendar } from './hooks/useFilterCalendar'
-import { Footer } from './components/Footer'
-
-import '../../themes/Default.css'
-import './FilterCalendar.css'
-
-export default function FilterCalendar({
-  calendarOffset,
-  language,
-  palette,
-  onSubmit,
-  disableCalendarDates: outerDisableCalendarDates,
-  toggleCalendar,
-  loadingData,
-  setToggleCalendar,
-  requestDates,
-  showFeedback,
-  noActiveSelection,
-  rangeContext: outerRangeContext,
-}: FilterCalendarTypes) {
-  const themePalette = useTheme({ palette })
-
-  // Translations
-  useUpdateTranslations({ language })
-  const { t } = useTranslation()
-
-  const {
-    setCalendarRange,
-    handleClearDates,
-    calendarRange,
-    disabledDates,
-    updateCalendarMonthNavigation,
-    updateCalendarDefaultMonth,
-    setUpdateCalendarMonthNavigation,
-    calendarHasError,
-    setCalendarHasError,
-    setUpdatedForSubmit,
-    rangeContext,
-    disableCalendarDates,
-  } = useFilterCalendar({
-    onSubmit,
-    setToggleCalendar,
-    noActiveSelection,
-    toggleCalendar,
-    outerRangeContext,
-    outerDisableCalendarDates,
-  })
-
-  // Display component after fully loaded
-  useAwaitRender()
-
-  // Handle close filter section
-  const { filterSectionRef } = useCloseFilterSection({
-    handleSelectedFilter: setToggleCalendar,
-  })
-
-  return (
-    <div className={`will-root`} style={themePalette}>
-      {toggleCalendar && (
-        <div className={`will-calendar-wrapper`} ref={filterSectionRef}>
-          <div className={`will-calendar-header`}>
-            <h2>{t('filterBar:calendar.title')}</h2>
-            <CloseButton handleClose={() => setToggleCalendar(false)} />
-          </div>
-          <div className={`will-calendar-main`}>
-            <Calendar
-              calendarRange={calendarRange}
-              setCalendarRange={setCalendarRange}
-              calendarOffset={calendarOffset}
-              selectedPath={'/rooms'}
-              language={language}
-              disableCalendarDates={disableCalendarDates}
-              requestDates={requestDates}
-              disabledDates={disabledDates}
-              updateCalendarMonthNavigation={updateCalendarMonthNavigation}
-              setUpdateCalendarMonthNavigation={
-                setUpdateCalendarMonthNavigation
-              }
-              updateCalendarDefaultMonth={updateCalendarDefaultMonth}
-              loadingData={loadingData}
-              showFeedback={showFeedback}
-              noActiveSelection={noActiveSelection}
-              palette={palette}
-              setCalendarHasError={setCalendarHasError}
-              setUpdatedForSubmit={setUpdatedForSubmit}
-              rangeContext={rangeContext}
-              calendarHasError={calendarHasError}
-            />
-          </div>
-          <div className="will-calendar-footer">
-            <Footer
-              calendarHasError={calendarHasError}
-              calendarRange={calendarRange}
-              handleClearDates={handleClearDates}
-              language={language}
-              palette={palette}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/FilterCalendar/FilterCalendarTypes.ts

@@ -1,11 +0,0 @@
-import { DateRange } from 'react-day-picker'
-
-import { Palette } from '../../themes/useTheme'
-import { CalendarTypes } from '../../core/components/calendar/CalendarTypes'
-
-export interface FilterCalendarTypes extends Partial<CalendarTypes> {
-  palette: Palette
-  onSubmit: (val: DateRange) => void
-  toggleCalendar: boolean
-  setToggleCalendar: (val: boolean) => void
-}