willba-component-library 0.2.55 → 0.2.56

package/lib/themes/useTheme.d.ts

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 export type Palette = {
     primary: string;
     secondary: string;
+    error: string;
 };
 export type ThemeProps = {
     palette?: Palette;
@@ -9,5 +10,6 @@ export type ThemeProps = {
 export interface CustomPaletteTypes extends CSSProperties {
     '--will-primary'?: string;
     '--will-secondary'?: string;
+    '--will-error'?: string;
 }
 export default function useTheme({ palette }: ThemeProps): CustomPaletteTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "willba-component-library",
-  "version": "0.2.55",
+  "version": "0.2.56",
   "description": "A custom UI component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",

package/src/assets/IconsSvg.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+type Icon = 'spinner' | 'warning'
+
+type Props = {
+  fill?: string
+  size?: number
+  icon: Icon
+}
+
+export const IconsSvg = ({ fill, size, icon }: Props) => {
+  switch (icon) {
+    case 'spinner':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={`${size || 25}`}
+          height={`${size || 25}`}
+          viewBox="0 0 24 24"
+        >
+          <style>
+            {`
+      .spinner_z9k8 {
+      transform-origin: center;
+      animation: spinner_StKS .75s infinite linear;
+      }
+      @keyframes spinner_StKS {
+      100% {
+      transform: rotate(360deg);
+      }
+      }
+      `}
+          </style>
+          <path
+            d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+            opacity=".25"
+            fill={fill}
+          />
+          <path
+            d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
+            className="spinner_z9k8"
+            fill={fill}
+          />
+        </svg>
+      )
+    case 'warning':
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={`${size || 25}`}
+          height={`${size || 25}`}
+          className="svg-icon"
+          style={{
+            verticalAlign: 'middle',
+            fill: fill,
+            overflow: 'hidden',
+          }}
+          viewBox="0 0 1024 1024"
+          version="1.1"
+        >
+          <path d="M42.666667 896h938.666666L512 85.333333 42.666667 896z m512-128h-85.333334v-85.333333h85.333334v85.333333z m0-170.666667h-85.333334v-170.666666h85.333334v170.666666z" />
+        </svg>
+      )
+    default:
+  }
+}

package/src/components/FilterBar/FilterBar.stories.tsx

@@ -13,7 +13,7 @@ export default meta
 
 type Story = StoryObj<typeof FilterBar>
 
-export const Primary: Story = {
+export const Main: Story = {
   args: {
     disableCalendarDates: {
       disabledDatesByPage: [
@@ -53,6 +53,7 @@ export const Primary: Story = {
     palette: {
       primary: '',
       secondary: '',
+      error: '#d32f2f',
     },
     mode: 'dark',
     tabs: [

package/src/components/FilterBar/FilterBar.tsx

@@ -10,7 +10,7 @@ import {
   useUpdateTranslations,
 } from '../../core/hooks'
 import { Calendar, SubmitButton, CloseButton } from '../../core/components'
-import { parseDates } from '../../core/utils'
+import { parseDates } from '../../core/components/calendar/utils'
 
 import { parseGuests } from './utils'
 import { FilterBarProps, FilterSections, Pages } from './FilterBarTypes'

package/src/components/FilterCalendar/FilterCalendar.css

@@ -16,22 +16,25 @@
 /* Header */
 
 .will-root .will-calendar-wrapper .will-calendar-header {
-    border-bottom: 1px solid var(--will-grey);
-}
-
-.will-root .will-calendar-wrapper .will-calendar-header-row {
     display: flex;
     justify-content: space-between;
+    border-bottom: 1px solid var(--will-grey);
     align-items: center;
 }
 
 /* Footer */
 
 .will-root .will-calendar-wrapper .will-calendar-footer {
+    border-top: 1px solid var(--will-grey);
+}
+
+/* Footer actions */
+
+.will-root .will-calendar-wrapper .will-calendar-footer-actions-wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-top: 1px solid var(--will-grey);
+    margin-bottom: 10px;
 }
 
 .will-root .will-calendar-wrapper .will-calendar-footer-dates > div {
@@ -53,8 +56,6 @@
     gap: 10px;
 }
 
-
-
 @media (max-width: 960px) {
     .will-root .will-calendar-wrapper {
         width: -webkit-fill-available;
@@ -89,8 +90,6 @@
      }
   }
 
-/**/
-
 .will-root .will-calendar-wrapper .will-calendar-header .will-filter-bar-close-button {
     position: initial;
 }

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

@@ -12,166 +12,353 @@ export default meta
 
 type Story = StoryObj<typeof FilterCalendar>
 
-export const Primary: 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'),
-        },
-      ],
-      selectedDates: {
-        from: new Date('2024-09-05'),
-        to: new Date('2024-09-10'),
+const baseData = {
+  disableCalendarDates: {
+    availableDates: [
+      {
+        checkIn: new Date('2024-11-01'),
+        firstCheckOut: new Date('2024-11-02'),
+        lastCheckOut: new Date('2024-11-11'),
       },
+      {
+        checkIn: new Date('2024-11-02'),
+        firstCheckOut: new Date('2024-11-03'),
+        lastCheckOut: new Date('2024-11-11'),
+      },
+      {
+        checkIn: new Date('2024-11-03'),
+        firstCheckOut: new Date('2024-11-04'),
+        lastCheckOut: new Date('2024-11-11'),
+      },
+      {
+        checkIn: new Date('2024-11-04'),
+        firstCheckOut: new Date('2024-11-05'),
+        lastCheckOut: new Date('2024-11-11'),
+      },
+      {
+        checkIn: new Date('2024-11-05'),
+        firstCheckOut: new Date('2024-11-06'),
+        lastCheckOut: new Date('2024-11-11'),
+      },
+      {
+        checkIn: new Date('2024-11-06'),
+        firstCheckOut: new Date('2024-11-07'),
+        lastCheckOut: new Date('2024-11-11'),
+      },
+      {
+        checkIn: new Date('2024-11-07'),
+        firstCheckOut: new Date('2024-11-08'),
+        lastCheckOut: new Date('2024-11-11'),
+      },
+      {
+        checkIn: new Date('2024-11-08'),
+        firstCheckOut: new Date('2024-11-09'),
+        lastCheckOut: new Date('2024-11-11'),
+      },
+      {
+        checkIn: new Date('2024-11-09'),
+        firstCheckOut: new Date('2024-11-10'),
+        lastCheckOut: new Date('2024-11-11'),
+      },
+      {
+        checkIn: new Date('2024-11-10'),
+        firstCheckOut: new Date('2024-11-11'),
+        lastCheckOut: new Date('2024-11-11'),
+      },
+      {
+        checkIn: new Date('2024-11-15'),
+        firstCheckOut: new Date('2024-11-16'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-16'),
+        firstCheckOut: new Date('2024-11-17'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-17'),
+        firstCheckOut: new Date('2024-11-18'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-18'),
+        firstCheckOut: new Date('2024-11-19'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-19'),
+        firstCheckOut: new Date('2024-11-20'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-20'),
+        firstCheckOut: new Date('2024-11-21'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-21'),
+        firstCheckOut: new Date('2024-11-22'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-22'),
+        firstCheckOut: new Date('2024-11-23'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-23'),
+        firstCheckOut: new Date('2024-11-24'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-24'),
+        firstCheckOut: new Date('2024-11-25'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-25'),
+        firstCheckOut: new Date('2024-11-26'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-26'),
+        firstCheckOut: new Date('2024-11-27'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-27'),
+        firstCheckOut: new Date('2024-11-28'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-28'),
+        firstCheckOut: new Date('2024-11-29'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-29'),
+        firstCheckOut: new Date('2024-11-30'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-11-30'),
+        firstCheckOut: new Date('2024-12-01'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-01'),
+        firstCheckOut: new Date('2024-12-02'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-02'),
+        firstCheckOut: new Date('2024-12-03'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-03'),
+        firstCheckOut: new Date('2024-12-04'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-04'),
+        firstCheckOut: new Date('2024-12-05'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-05'),
+        firstCheckOut: new Date('2024-12-06'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-06'),
+        firstCheckOut: new Date('2024-12-07'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-07'),
+        firstCheckOut: new Date('2024-12-08'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-08'),
+        firstCheckOut: new Date('2024-12-09'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-09'),
+        firstCheckOut: new Date('2024-12-10'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-10'),
+        firstCheckOut: new Date('2024-12-11'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-11'),
+        firstCheckOut: new Date('2024-12-12'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-12'),
+        firstCheckOut: new Date('2024-12-13'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-13'),
+        firstCheckOut: new Date('2024-12-14'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-14'),
+        firstCheckOut: new Date('2024-12-15'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-15'),
+        firstCheckOut: new Date('2024-12-16'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-16'),
+        firstCheckOut: new Date('2024-12-17'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-17'),
+        firstCheckOut: new Date('2024-12-18'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-18'),
+        firstCheckOut: new Date('2024-12-19'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-19'),
+        firstCheckOut: new Date('2024-12-20'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-20'),
+        firstCheckOut: new Date('2024-12-21'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-21'),
+        firstCheckOut: new Date('2024-12-22'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-22'),
+        firstCheckOut: new Date('2024-12-23'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-23'),
+        firstCheckOut: new Date('2024-12-24'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-24'),
+        firstCheckOut: new Date('2024-12-25'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-25'),
+        firstCheckOut: new Date('2024-12-26'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-26'),
+        firstCheckOut: new Date('2024-12-27'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-27'),
+        firstCheckOut: new Date('2024-12-28'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-28'),
+        firstCheckOut: new Date('2024-12-29'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-29'),
+        firstCheckOut: new Date('2024-12-30'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-30'),
+        firstCheckOut: new Date('2024-12-31'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+      {
+        checkIn: new Date('2024-12-31'),
+        firstCheckOut: new Date('2025-01-01'),
+        lastCheckOut: new Date('2025-03-01'),
+      },
+    ],
+    disabledDates: [
+      {
+        to: new Date('2024-10-09'),
+        from: new Date('2024-10-01'),
+      },
+      {
+        to: new Date('2024-10-18'),
+        from: new Date('2024-10-17'),
+      },
+      {
+        to: new Date('2024-10-23'),
+        from: new Date('2024-10-22'),
+      },
+      {
+        to: new Date('2024-11-14'),
+        from: new Date('2024-11-11'),
+      },
+    ],
+  },
+  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('2024-11-20'),
+      to: new Date('2024-11-23'),
     },
-    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)