willba-component-library 0.2.80 → 0.2.81

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

@@ -12,162 +12,531 @@ export default meta
 
 type Story = StoryObj<typeof FilterCalendar>
 
-export const Primary: Story = {
+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 = {
   args: {
-    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'),
-        },
-      ],
+    ...baseData,
+    rangeContext: {
+      from: new Date('2025-01-09'),
+      to: new Date('2025-01-26'),
     },
-    language: 'en',
-    palette: {
-      primary: '#0095d9',
-      secondary: '#0095d9',
+  },
+  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'),
     },
-    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)