willba-component-library 0.2.101 → 0.3.0

package/src/components/FilterBar/components/guests/Guests.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import GuestCount from './GuestCount/GuestCount'
+import { useAutoFocus } from '../../../../core/hooks'
+import { GuestCount } from './GuestCount/GuestCount'
 import { AgeCategoryCount, AgeCategoryType } from '../../FilterBarTypes'
 
 import './Guests.css'
@@ -10,16 +11,19 @@ type Props = {
   ageCategories: AgeCategoryType[]
   updateGuestsCount: (arg1: string, arg2: number) => void
   ageCategoryCounts: AgeCategoryCount
+  autoFocus?: boolean
 }
 
 export const Guests = forwardRef<HTMLDivElement, Props>(
-  ({ ageCategories, updateGuestsCount, ageCategoryCounts }: Props, ref) => {
+  ({ ageCategories, updateGuestsCount, ageCategoryCounts, autoFocus }: Props, ref) => {
     const { t } = useTranslation('filterBar')
+    const containerRef = useAutoFocus<HTMLDivElement>(autoFocus)
+
     return (
       <div className="will-filter-bar-guests" ref={ref}>
         <h3 className="will-guests-filter-title">{t('guests.title')}</h3>
 
-        <div className="will-guests-filter-container">
+        <div className="will-guests-filter-container" ref={containerRef}>
           {ageCategories?.map((category) => (
             <GuestCount
               key={category.id}
@@ -36,3 +40,5 @@ export const Guests = forwardRef<HTMLDivElement, Props>(
     )
   }
 )
+
+Guests.displayName = 'Guests'

package/src/components/FilterBar/components/index.ts

@@ -3,3 +3,4 @@ export { CloseButton, SelectButton, SubmitButton, TabButton } from './buttons'
 export { Guests } from './guests/Guests'
 export { Divider } from './divider/Divider'
 export { Categories } from './categories/Categories'
+export { Locations } from './locations/Locations'

package/src/components/FilterBar/components/locations/Locations.css

@@ -0,0 +1,32 @@
+.will-filter-bar-locations {
+  text-align: initial;
+}
+
+.will-locations-filter-title {
+  font-size: 22px;
+  margin: 10px 0;
+}
+
+.will-locations-filter-subtitle {
+  font-size: 15px;
+  font-weight: 500;
+  color: var(--will-text);
+}
+
+.will-locations-filter-container {
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  min-width: 400px;
+}
+
+@media (max-width: 960px) {
+  .will-locations-filter-title {
+    font-size: 18px;
+  }
+
+  .will-locations-filter-container {
+    margin-top: 15px;
+    min-width: 100%;
+  }
+}

package/src/components/FilterBar/components/locations/Locations.tsx

@@ -0,0 +1,86 @@
+import React, { forwardRef, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import './Locations.css'
+import { ImageCard } from '../cards/image-card/ImageCard'
+import { Location } from '../../FilterBarTypes'
+
+type Props = {
+  locations?: Location[]
+  language?: string
+  selectedLocations: Location[]
+  setSelectedLocations: (locations: Location[]) => void
+  autoFocus?: boolean
+  multiSelect?: boolean
+  onClose?: () => void
+}
+
+export const Locations = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      locations,
+      language,
+      selectedLocations,
+      setSelectedLocations,
+      autoFocus,
+      multiSelect = false,
+      onClose,
+    },
+    ref
+  ) => {
+    const { t } = useTranslation('filterBar')
+    const firstCardRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+      if (autoFocus && firstCardRef.current) {
+        firstCardRef.current.focus()
+      }
+    }, [autoFocus])
+
+    const handleLocationClick = (location: Location) => {
+      if (multiSelect) {
+        // Multi-select: toggle location in array
+        const isSelected = selectedLocations.some((loc) => loc.id === location.id)
+
+        if (isSelected) {
+          // Remove location if already selected
+          setSelectedLocations(
+            selectedLocations.filter((loc) => loc.id !== location.id)
+          )
+        } else {
+          // Add location to selection
+          setSelectedLocations([...selectedLocations, location])
+        }
+      } else {
+        // Single-select: replace selection with clicked location and close modal
+        setSelectedLocations([location])
+        onClose?.()
+      }
+    }
+
+    return (
+      <div className="will-filter-bar-locations" ref={ref}>
+        <h3 className="will-locations-filter-title">{t('locations.title')}</h3>
+
+        <div className="will-locations-filter-container">
+          {!!(locations?.length && language) &&
+            locations
+              .filter((location) => location?.label?.[language])
+              .map((location, index) => (
+                <ImageCard
+                  key={location.id}
+                  ref={index === 0 ? firstCardRef : null}
+                  title={location.label[language]}
+                  description={location.description?.[language]}
+                  imageUrl={location.imageUrl}
+                  isSelected={selectedLocations.some((loc) => loc.id === location.id)}
+                  onClick={() => handleLocationClick(location)}
+                />
+              ))}
+        </div>
+      </div>
+    )
+  }
+)
+
+Locations.displayName = 'Locations'

package/src/components/FilterBar/hooks/useFilterBar.tsx

@@ -8,6 +8,7 @@ import {
   Filters,
   Pages,
   Tab,
+  Location,
 } from '../FilterBarTypes'
 
 type Props = {
@@ -15,7 +16,10 @@ type Props = {
   ageCategories?: AgeCategoryType[]
   onSubmit?: ((val: Filters) => void) | null
   tabs?: Tab[]
-  locationIds?: string[]
+  locations?: {
+    multiSelect: boolean
+    data: Location[]
+  }
 }
 
 export const useFilterBar = ({
@@ -23,7 +27,7 @@ export const useFilterBar = ({
   ageCategories,
   onSubmit,
   tabs,
-  locationIds,
+  locations,
 }: Props) => {
   const [selectedPath, setSelectedPath] = useState<string>(Pages.EVENTS)
   const [selectedFilter, setSelectedFilter] = useState<string | boolean>(false)
@@ -34,12 +38,15 @@ export const useFilterBar = ({
   const [ageCategoryCounts, setAgeCategoryCounts] = useState<AgeCategoryCount>(
     {}
   )
+  const [selectedLocations, setSelectedLocations] = useState<Location[]>([])
 
   useEffect(() => {
     const urlSearchParams = new URLSearchParams(window.location.search)
 
     const startDateParam = urlSearchParams.get('startDate')
     const endDateParam = urlSearchParams.get('endDate')
+    // Get all locationId params from URL
+    const locationIdParams = urlSearchParams.getAll('locationId')
     const ageCategoryCountsParam = JSON.parse(
       urlSearchParams.get('ageCategoryCounts') || '{}'
     )
@@ -54,8 +61,17 @@ export const useFilterBar = ({
         to: new Date(endDateParam),
       })
     }
+
     setAgeCategoryCounts(ageCategoryCountsParam)
     setCategories(parsedCategories)
+
+    // Set selected locations from URL - handle all locationIds
+    if (locations?.data?.length && locationIdParams.length) {
+      const matchedLocations = locations.data.filter((location) =>
+        locationIdParams.includes(location.id)
+      )
+      setSelectedLocations(matchedLocations)
+    }
   }, [])
 
   useEffect(() => {
@@ -112,6 +128,11 @@ export const useFilterBar = ({
       }
     }
 
+    // Append all selected locationIds
+    selectedLocations.forEach((location) => {
+      querySearchParams.append('locationId', location.id)
+    })
+
     handleSelectedFilter(false)
 
     if (onSubmit && window.location.href.includes(selectedPath)) {
@@ -119,12 +140,6 @@ export const useFilterBar = ({
     } else {
       const params = new URLSearchParams(querySearchParams ?? undefined)
 
-      if (locationIds) {
-        locationIds.forEach((id) => {
-          params.append('locationId', id)
-        })
-      }
-
       const paramString = params.toString()
       const path = `${redirectUrl}${selectedPath}`
 
@@ -145,6 +160,8 @@ export const useFilterBar = ({
     calendarRange,
     selectedPath,
     innerLoading,
+    selectedLocations,
+    setSelectedLocations,
     setCalendarRange,
     setSelectedFilter,
     setAgeCategoryCounts,

package/src/components/FilterBar/utils/index.tsx

@@ -1 +1,2 @@
 export { parseGuests } from './parseGuests'
+export { parseLocations } from './parseLocations'

package/src/components/FilterBar/utils/parseGuests.tsx

@@ -22,7 +22,10 @@ export const parseGuests = ({
 }: Props) => {
   const parsedData = Object.entries(ageCategoryCounts).reduce(
     (acc: AccType, [key, value]) => {
-      const ageCategoryId = key[key.length - 1]
+      const parts = key.split('-')
+      if (parts.length < 2) return acc
+
+      const ageCategoryId = parts[1]
       const ageCategory = ageCategories.find((c) => c.id === ageCategoryId)
 
       if (ageCategory && value) {
@@ -42,11 +45,9 @@ export const parseGuests = ({
 
   return {
     content: parsedData.total
-      ? `<span style="display: inline-block; min-width: 10px">${
-          parsedData.total
-        }</span> ${parsedData.total > 1 ? guestsLabel : guestLabel}${
-          htmlString ? ` &nbsp; ( ${htmlString} )` : ''
-        }`
+      ? `<span class="will-guest-count">${parsedData.total}</span> ${
+          parsedData.total > 1 ? guestsLabel : guestLabel
+        }${htmlString ? ` &nbsp; ( ${htmlString} )` : ''}`
       : guestsPlaceholder,
     data: parsedData,
   }

package/src/components/FilterBar/utils/parseLocations.tsx

@@ -0,0 +1,29 @@
+import { Location } from '../FilterBarTypes'
+
+type Props = {
+  selectedLocations: Location[]
+  language: string
+  locationsPlaceholder: string
+  locationsSelectedLabel?: string
+}
+
+export const parseLocations = ({
+  selectedLocations,
+  language,
+  locationsPlaceholder,
+  locationsSelectedLabel = 'locations',
+}: Props) => {
+  if (!selectedLocations.length) {
+    return locationsPlaceholder
+  }
+
+  if (selectedLocations.length === 1) {
+    const translation = selectedLocations[0]?.label?.[language]
+    if (!translation) {
+      return locationsPlaceholder
+    }
+    return translation
+  }
+
+  return `${selectedLocations.length} ${locationsSelectedLabel}`
+}

package/src/core/components/calendar/Calendar.tsx

@@ -19,6 +19,7 @@ import {
   useCalendarTooltips,
   useUpdateDisabledDates,
 } from './hooks'
+import { useAutoFocus } from '../../hooks'
 
 import 'react-day-picker/dist/style.css'
 import './Calendar.css'
@@ -43,12 +44,15 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
       setUpdatedForSubmit,
       rangeContext,
       calendarHasError,
+      autoFocus,
     }: CalendarTypes,
     ref
   ) => {
     // Translations
     const { t } = useTranslation('common')
 
+    const calendarContainerRef = useAutoFocus<HTMLDivElement>(autoFocus)
+
     const isTablet = useMediaQuery({ maxWidth: 960 })
     const today = startOfDay(new Date())
     const selectedStartDate = calendarRange?.from
@@ -158,7 +162,7 @@ export const Calendar = forwardRef<HTMLDivElement, CalendarTypes>(
 
     return (
       <div className="will-filter-bar-calendar" ref={ref}>
-        <div className="will-calendar-filter-container">
+        <div className="will-calendar-filter-container" ref={calendarContainerRef}>
           <DayPicker
             key={updateCalendarDefaultMonth}
             id="will-calendar"

package/src/core/components/calendar/CalendarTypes.ts

@@ -44,4 +44,5 @@ export type CalendarTypes = {
   setUpdatedForSubmit?: (arg: boolean) => void
   rangeContext?: RangeContext
   calendarHasError?: boolean
+  autoFocus?: boolean
 }

package/src/core/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useAwaitRender } from './useAwaitRender'
 export { useUpdateTranslations } from './useUpdateTranslations'
 export { useCloseFilterSection } from './useCloseFilterSection'
+export { useAutoFocus } from './useAutoFocus'

package/src/core/hooks/useAutoFocus.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react'
+
+export const useAutoFocus = <T extends HTMLElement>(autoFocus?: boolean) => {
+  const ref = useRef<T>(null)
+
+  useEffect(() => {
+    if (!autoFocus || !ref.current) return
+
+    const attemptFocus = (attempts = 0): void => {
+      if (attempts > 20 || !ref.current) return
+
+      const focusable = ref.current.querySelector<HTMLElement>(
+        'button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+
+      if (focusable) {
+        focusable.focus()
+      } else {
+        requestAnimationFrame(() => attemptFocus(attempts + 1))
+      }
+    }
+
+    requestAnimationFrame(() => attemptFocus())
+  }, [autoFocus])
+
+  return ref
+}

package/src/locales/en/filterBar.json

@@ -1,4 +1,10 @@
 {
+  "locations": {
+    "label": "Locations",
+    "title": "Where to?",
+    "placeholder": "Add location",
+    "selected": "locations"
+  },
   "calendar": {
     "label": "Dates",
     "roomsLabelPlaceholder": "Add check-in and check-out",

package/src/locales/fi/filterBar.json

@@ -1,4 +1,10 @@
 {
+  "locations": {
+    "label": "Sijainnit",
+    "title": "Minne?",
+    "placeholder": "Lisää sijainti",
+    "selected": "sijaintia"
+  },
   "calendar": {
     "label": "Päivät",
     "roomsLabelPlaceholder": "Lisää check-in ja check-out",

package/tsconfig.json

@@ -25,5 +25,5 @@
     }
   },
   "include": ["src"],
-  "exclude": ["node_modules", "lib"]
+  "exclude": ["node_modules", "lib", "**/*.stories.tsx", "**/*.stories.ts"]
 }

package/lib/components/Button/Button.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Button from "./Button";
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story = StoryObj<typeof Button>;
-export declare const Primary: Story;
-export declare const Secondary: Story;

package/lib/components/FilterBar/FilterBar.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import FilterBar from './FilterBar';
-declare const meta: Meta<typeof FilterBar>;
-export default meta;
-type Story = StoryObj<typeof FilterBar>;
-export declare const Main: Story;

package/lib/components/FilterCalendar/FilterCalendar.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import FilterCalendar from './FilterCalendar';
-declare const meta: Meta<typeof FilterCalendar>;
-export default meta;
-type Story = StoryObj<typeof FilterCalendar>;
-export declare const Default: Story;
-export declare const RangeContext: Story;
-export declare const DisabledRangeContextDates: Story;