willba-component-library 0.2.78 → 0.2.80

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

@@ -12,531 +12,162 @@ export default meta
 
 type Story = StoryObj<typeof FilterCalendar>
 
-const baseData = {
-  disableCalendarDates: {
-    availableDates: [
-      {
-        checkIn: new Date('2025-01-01'),
-        firstCheckOut: new Date('2025-01-02'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2025-01-02'),
-        firstCheckOut: new Date('2025-01-03'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2025-01-03'),
-        firstCheckOut: new Date('2025-01-04'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2025-01-08'),
-        firstCheckOut: new Date('2025-01-09'),
-        lastCheckOut: new Date('2025-01-14'),
-      },
-      {
-        checkIn: new Date('2025-01-09'),
-        firstCheckOut: new Date('2025-01-10'),
-        lastCheckOut: new Date('2025-01-14'),
-      },
-      {
-        checkIn: new Date('2025-01-10'),
-        firstCheckOut: new Date('2025-01-11'),
-        lastCheckOut: new Date('2025-01-14'),
-      },
-      {
-        checkIn: new Date('2025-01-11'),
-        firstCheckOut: new Date('2025-01-12'),
-        lastCheckOut: new Date('2025-01-14'),
-      },
-      {
-        checkIn: new Date('2025-01-12'),
-        firstCheckOut: new Date('2025-01-13'),
-        lastCheckOut: new Date('2025-01-14'),
-      },
-      {
-        checkIn: new Date('2025-01-13'),
-        firstCheckOut: new Date('2025-01-14'),
-        lastCheckOut: new Date('2025-01-14'),
-      },
-      {
-        checkIn: new Date('2025-01-17'),
-        firstCheckOut: new Date('2025-01-18'),
-        lastCheckOut: new Date('2025-02-05'),
-      },
-      {
-        checkIn: new Date('2025-01-18'),
-        firstCheckOut: new Date('2025-01-19'),
-        lastCheckOut: new Date('2025-02-05'),
-      },
-      {
-        checkIn: new Date('2025-01-19'),
-        firstCheckOut: new Date('2025-01-20'),
-        lastCheckOut: new Date('2025-02-05'),
-      },
-      {
-        checkIn: new Date('2025-01-20'),
-        firstCheckOut: new Date('2025-01-21'),
-        lastCheckOut: new Date('2025-02-05'),
-      },
-      {
-        checkIn: new Date('2025-01-21'),
-        firstCheckOut: new Date('2025-01-22'),
-        lastCheckOut: new Date('2025-02-05'),
-      },
-      {
-        checkIn: new Date('2025-01-22'),
-        firstCheckOut: new Date('2025-01-23'),
-        lastCheckOut: new Date('2025-02-05'),
-      },
-      {
-        checkIn: new Date('2025-01-23'),
-        firstCheckOut: new Date('2025-01-24'),
-        lastCheckOut: new Date('2025-02-05'),
-      },
-      {
-        checkIn: new Date('2025-01-24'),
-        firstCheckOut: new Date('2025-01-25'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-01-25'),
-        firstCheckOut: new Date('2025-01-26'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-01-26'),
-        firstCheckOut: new Date('2025-01-27'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-01-27'),
-        firstCheckOut: new Date('2025-01-28'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-01-28'),
-        firstCheckOut: new Date('2025-01-29'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-01-29'),
-        firstCheckOut: new Date('2025-01-30'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-01-30'),
-        firstCheckOut: new Date('2025-01-31'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-01-31'),
-        firstCheckOut: new Date('2025-02-01'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-01'),
-        firstCheckOut: new Date('2025-02-02'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-02'),
-        firstCheckOut: new Date('2025-02-03'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-03'),
-        firstCheckOut: new Date('2025-02-04'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-04'),
-        firstCheckOut: new Date('2025-02-05'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-05'),
-        firstCheckOut: new Date('2025-02-06'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-06'),
-        firstCheckOut: new Date('2025-02-07'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-07'),
-        firstCheckOut: new Date('2025-02-08'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-08'),
-        firstCheckOut: new Date('2025-02-09'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-09'),
-        firstCheckOut: new Date('2025-02-10'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-10'),
-        firstCheckOut: new Date('2025-02-11'),
-        lastCheckOut: new Date('2025-02-11'),
-      },
-      {
-        checkIn: new Date('2025-02-11'),
-        firstCheckOut: new Date('2025-02-12'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-12'),
-        firstCheckOut: new Date('2025-02-13'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-13'),
-        firstCheckOut: new Date('2025-02-14'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-14'),
-        firstCheckOut: new Date('2025-02-15'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-15'),
-        firstCheckOut: new Date('2025-02-16'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-16'),
-        firstCheckOut: new Date('2025-02-17'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-17'),
-        firstCheckOut: new Date('2025-02-18'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-18'),
-        firstCheckOut: new Date('2025-02-19'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-19'),
-        firstCheckOut: new Date('2025-02-20'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-20'),
-        firstCheckOut: new Date('2025-02-21'),
-        lastCheckOut: new Date('2025-03-01'),
-      },
-      {
-        checkIn: new Date('2025-02-21'),
-        firstCheckOut: new Date('2025-02-22'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-02-22'),
-        firstCheckOut: new Date('2025-02-23'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-02-23'),
-        firstCheckOut: new Date('2025-02-24'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-02-24'),
-        firstCheckOut: new Date('2025-02-25'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-02-25'),
-        firstCheckOut: new Date('2025-02-26'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-02-26'),
-        firstCheckOut: new Date('2025-02-27'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-02-27'),
-        firstCheckOut: new Date('2025-02-28'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-02-28'),
-        firstCheckOut: new Date('2025-03-01'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2024-12-01'),
-        firstCheckOut: new Date('2024-12-02'),
-        lastCheckOut: new Date('2024-12-03'),
-      },
-      {
-        checkIn: new Date('2024-12-02'),
-        firstCheckOut: new Date('2024-12-03'),
-        lastCheckOut: new Date('2024-12-03'),
-      },
-      {
-        checkIn: new Date('2024-12-07'),
-        firstCheckOut: new Date('2024-12-08'),
-        lastCheckOut: new Date('2024-12-11'),
-      },
-      {
-        checkIn: new Date('2024-12-08'),
-        firstCheckOut: new Date('2024-12-09'),
-        lastCheckOut: new Date('2024-12-11'),
-      },
-      {
-        checkIn: new Date('2024-12-09'),
-        firstCheckOut: new Date('2024-12-10'),
-        lastCheckOut: new Date('2024-12-11'),
-      },
-      {
-        checkIn: new Date('2024-12-10'),
-        firstCheckOut: new Date('2024-12-11'),
-        lastCheckOut: new Date('2024-12-11'),
-      },
-      {
-        checkIn: new Date('2024-12-14'),
-        firstCheckOut: new Date('2024-12-15'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-15'),
-        firstCheckOut: new Date('2024-12-16'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-16'),
-        firstCheckOut: new Date('2024-12-17'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-17'),
-        firstCheckOut: new Date('2024-12-18'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-18'),
-        firstCheckOut: new Date('2024-12-19'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-19'),
-        firstCheckOut: new Date('2024-12-20'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-20'),
-        firstCheckOut: new Date('2024-12-21'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-21'),
-        firstCheckOut: new Date('2024-12-22'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-22'),
-        firstCheckOut: new Date('2024-12-23'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-23'),
-        firstCheckOut: new Date('2024-12-24'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-24'),
-        firstCheckOut: new Date('2024-12-25'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-25'),
-        firstCheckOut: new Date('2024-12-26'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-26'),
-        firstCheckOut: new Date('2024-12-27'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-27'),
-        firstCheckOut: new Date('2024-12-28'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-28'),
-        firstCheckOut: new Date('2024-12-29'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-29'),
-        firstCheckOut: new Date('2024-12-30'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-30'),
-        firstCheckOut: new Date('2024-12-31'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2024-12-31'),
-        firstCheckOut: new Date('2025-01-01'),
-        lastCheckOut: new Date('2025-01-04'),
-      },
-      {
-        checkIn: new Date('2025-03-01'),
-        firstCheckOut: new Date('2025-03-02'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-02'),
-        firstCheckOut: new Date('2025-03-03'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-03'),
-        firstCheckOut: new Date('2025-03-04'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-04'),
-        firstCheckOut: new Date('2025-03-05'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-05'),
-        firstCheckOut: new Date('2025-03-06'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-06'),
-        firstCheckOut: new Date('2025-03-07'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-07'),
-        firstCheckOut: new Date('2025-03-08'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-08'),
-        firstCheckOut: new Date('2025-03-09'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-09'),
-        firstCheckOut: new Date('2025-03-10'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-10'),
-        firstCheckOut: new Date('2025-03-11'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-      {
-        checkIn: new Date('2025-03-11'),
-        firstCheckOut: new Date('2025-03-12'),
-        lastCheckOut: new Date('2025-03-12'),
-      },
-    ],
-    disabledDates: [
-      {
-        to: new Date('2025-01-07'),
-        from: new Date('2025-01-04'),
-      },
-      {
-        to: new Date('2025-01-16'),
-        from: new Date('2025-01-14'),
-      },
-      {
-        to: new Date('2024-12-06'),
-        from: new Date('2024-12-03'),
-      },
-      {
-        to: new Date('2024-12-13'),
-        from: new Date('2024-12-11'),
-      },
-      {
-        to: new Date('2025-03-31'),
-        from: new Date('2025-03-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 = {
+export const Primary: Story = {
   args: {
-    ...baseData,
-    rangeContext: {
-      from: new Date('2025-01-09'),
-      to: new Date('2025-01-26'),
+    disableCalendarDates: {
+      availableDates: [
+        {
+          checkIn: new Date('2024-08-01'),
+          firstCheckOut: new Date('2024-08-02'),
+          lastCheckOut: new Date('2024-08-07'),
+        },
+        {
+          checkIn: new Date('2024-08-02'),
+          firstCheckOut: new Date('2024-08-03'),
+          lastCheckOut: new Date('2024-08-07'),
+        },
+        {
+          checkIn: new Date('2024-08-03'),
+          firstCheckOut: new Date('2024-08-04'),
+          lastCheckOut: new Date('2024-08-07'),
+        },
+        {
+          checkIn: new Date('2024-08-04'),
+          firstCheckOut: new Date('2024-08-05'),
+          lastCheckOut: new Date('2024-08-07'),
+        },
+        {
+          checkIn: new Date('2024-08-05'),
+          firstCheckOut: new Date('2024-08-06'),
+          lastCheckOut: new Date('2024-08-07'),
+        },
+        {
+          checkIn: new Date('2024-08-06'),
+          firstCheckOut: new Date('2024-08-07'),
+          lastCheckOut: new Date('2024-08-07'),
+        },
+        {
+          checkIn: new Date('2024-08-08'),
+          firstCheckOut: new Date('2024-08-09'),
+          lastCheckOut: new Date('2024-08-13'),
+        },
+        {
+          checkIn: new Date('2024-08-09'),
+          firstCheckOut: new Date('2024-08-10'),
+          lastCheckOut: new Date('2024-08-13'),
+        },
+        {
+          checkIn: new Date('2024-08-10'),
+          firstCheckOut: new Date('2024-08-11'),
+          lastCheckOut: new Date('2024-08-13'),
+        },
+        {
+          checkIn: new Date('2024-08-11'),
+          firstCheckOut: new Date('2024-08-12'),
+          lastCheckOut: new Date('2024-08-13'),
+        },
+        {
+          checkIn: new Date('2024-08-12'),
+          firstCheckOut: new Date('2024-08-13'),
+          lastCheckOut: new Date('2024-08-13'),
+        },
+        {
+          checkIn: new Date('2024-08-15'),
+          firstCheckOut: new Date('2024-08-16'),
+          lastCheckOut: new Date('2024-08-20'),
+        },
+        {
+          checkIn: new Date('2024-08-16'),
+          firstCheckOut: new Date('2024-08-17'),
+          lastCheckOut: new Date('2024-08-20'),
+        },
+        {
+          checkIn: new Date('2024-08-17'),
+          firstCheckOut: new Date('2024-08-18'),
+          lastCheckOut: new Date('2024-08-20'),
+        },
+        {
+          checkIn: new Date('2024-08-18'),
+          firstCheckOut: new Date('2024-08-19'),
+          lastCheckOut: new Date('2024-08-20'),
+        },
+        {
+          checkIn: new Date('2024-08-19'),
+          firstCheckOut: new Date('2024-08-20'),
+          lastCheckOut: new Date('2024-08-20'),
+        },
+        {
+          checkIn: new Date('2024-08-24'),
+          firstCheckOut: new Date('2024-08-25'),
+          lastCheckOut: new Date('2024-09-10'),
+        },
+        {
+          checkIn: new Date('2024-08-25'),
+          firstCheckOut: new Date('2024-08-26'),
+          lastCheckOut: new Date('2024-09-10'),
+        },
+        {
+          checkIn: new Date('2024-08-26'),
+          firstCheckOut: new Date('2024-08-27'),
+          lastCheckOut: new Date('2024-09-10'),
+        },
+        {
+          checkIn: new Date('2024-08-27'),
+          firstCheckOut: new Date('2024-08-28'),
+          lastCheckOut: new Date('2024-09-10'),
+        },
+        {
+          checkIn: new Date('2024-08-28'),
+          firstCheckOut: new Date('2024-08-29'),
+          lastCheckOut: new Date('2024-09-10'),
+        },
+        {
+          checkIn: new Date('2024-08-29'),
+          firstCheckOut: new Date('2024-08-30'),
+          lastCheckOut: new Date('2024-09-10'),
+        },
+        {
+          checkIn: new Date('2024-08-30'),
+          firstCheckOut: new Date('2024-08-31'),
+          lastCheckOut: new Date('2024-09-10'),
+        },
+        {
+          checkIn: new Date('2024-08-31'),
+          firstCheckOut: new Date('2024-09-01'),
+          lastCheckOut: new Date('2024-09-10'),
+        },
+      ],
+      disabledDates: [
+        {
+          from: new Date('2024-07-02'),
+          to: new Date('2024-07-03'),
+        },
+        {
+          from: new Date('2024-08-07'),
+          to: new Date('2024-08-07'),
+        },
+        {
+          from: new Date('2024-08-13'),
+          to: new Date('2024-08-14'),
+        },
+        {
+          from: new Date('2024-08-20'),
+          to: new Date('2024-08-23'),
+        },
+      ],
     },
-  },
-  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('2025-01-04'),
-      to: new Date('2025-01-24'),
+    language: 'en',
+    palette: {
+      primary: '#0095d9',
+      secondary: '#0095d9',
     },
+    loadingData: true,
+    toggleCalendar: true,
+    onSubmit: (val) => console.log('onSubmit ->', val),
+    setToggleCalendar: (val) => console.log('setToggleCalendar ->', val),
+    requestDates: (val) => console.log('requestDates ->', val),
+    showFeedback: true,
+    noActiveSelection: true,
   },
   render: (args) => {
     const [toggleCalendar, setToggleCalendar] = useState(true)