willba-component-library 0.3.13 → 0.3.15

package/lib/themes/useTheme.d.ts

@@ -12,4 +12,4 @@ export interface CustomPaletteTypes extends CSSProperties {
     '--will-secondary'?: string;
     '--will-error'?: string;
 }
-export default function useTheme({ palette }: ThemeProps): CustomPaletteTypes;
+export declare const useTheme: ({ palette }: ThemeProps) => CustomPaletteTypes;

package/package.json

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

package/rollup.config.mjs

@@ -46,7 +46,7 @@ export default [
       resolve(),
       commonjs(),
       typescript({
-        jsx: 'react-jsx',
+        jsx: 'react',
       }),
       postcss({
         extensions: ['.css'],

package/src/components/FilterBar/FilterBar.css

@@ -16,80 +16,14 @@
   position: relative;
 }
 
-/* Tabs */
-
-.will-filter-bar-tabs {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  z-index: 222;
-  background: transparent;
-  padding: 10px;
-  gap: 10px;
-}
-
-/* Header */
-.will-filter-bar-header {
-  display: flex;
-  justify-content: space-between;
-  padding: 10px;
-  position: relative;
-  z-index: 222;
-  border-radius: 40px;
-  background-color: var(--will-white);
-}
-
-@media (max-width: 960px) {
-  .will-filter-bar-header {
-    flex-direction: column;
-    padding: 20px;
-    border-radius: 25px;
-    overflow: hidden;
-  }
-}
-
-/* Container */
-
-.will-filter-bar-container {
-  background-color: var(--will-white);
-  min-height: 100px;
-  position: absolute;
-  top: 125px;
-  z-index: 111;
-  border-radius: 25px;
-  box-shadow: var(--will-box-shadow);
-}
-
-@media (max-width: 960px) {
-  .will-root {
-    width: 100%;
-    min-width: auto;
-    max-height: 100vh;
-    z-index: 3;
-  }
-
-  .will-filter-bar-container {
-    margin-top: 10px;
-    top: 0;
-    padding: 45px 20px;
-    position: relative;
-  }
-}
-
 /* Common */
 
-.will-filter-bar-header.dark,
-.will-filter-bar-container.dark {
+.will-filter-bar-controls.dark,
+.will-filter-bar-panels.dark {
   box-shadow: var(--will-box-shadow-dark);
 }
 
-.will-filter-bar-header.light,
-.will-filter-bar-container.light {
+.will-filter-bar-controls.light,
+.will-filter-bar-panels.light {
   box-shadow: var(--will-box-shadow-light);
 }
-
-.will-guest-count {
-  display: inline-block;
-  min-width: 10px;
-}

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import FilterBar from './FilterBar'
+import { FilterBar } from './FilterBar'
 import { Filters } from './FilterBarTypes'
 
 const meta: Meta<typeof FilterBar> = {

package/src/components/FilterBar/FilterBar.tsx

@@ -1,41 +1,18 @@
-import React, {
-  CSSProperties,
-  MutableRefObject,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import { useTranslation } from 'react-i18next'
-import { FaSearch } from 'react-icons/fa'
+import React from 'react'
 
-import useTheme from '../../themes/useTheme'
-import '../../themes/Default.css'
-import {
-  useAwaitRender,
-  useCloseFilterSection,
-  useUpdateTranslations,
-} from '../../core/hooks'
-import { SubmitButton } from '../../core/components'
-import { parseDates } from '../../core/components/calendar/utils'
+import { useTheme } from '../../themes/useTheme'
+import { useAwaitRender, useUpdateTranslations } from '../../core/hooks'
 
-import { parseGuests, parseLocations, calculateDropdownPosition } from './utils'
-import { FilterBarTypes, FilterSections, Pages } from './FilterBarTypes'
-import { useFilterBar, useScrollInToView } from './hooks'
-import {
-  TabButton,
-  SelectButton,
-  Guests,
-  Divider,
-  Categories,
-  Locations,
-} from './components'
+import { FilterBarTypes } from './FilterBarTypes'
+import { FilterPanels, FilterControls, FilterTabs } from './components'
+import { FilterBarProvider } from './providers'
 
+import '../../themes/Default.css'
 import './FilterBar.css'
-import { Dates } from './components/dates'
 
-export default function FilterBar({
+export const FilterBar = ({
   language = LANGUAGE_FALLBACK,
-  ageCategories = AGE_CATEGORIES_FALLBACK,
+  ageCategories,
   redirectUrl = REDIRECT_URL_FALLBACK,
   palette,
   onSubmit,
@@ -45,276 +22,44 @@ export default function FilterBar({
   tabs,
   outerLoading,
   locations,
-}: FilterBarTypes) {
+}: FilterBarTypes) => {
   const themePalette = useTheme({ palette })
 
   // Translations
   useUpdateTranslations({ language })
-  const { t } = useTranslation('filterBar')
-
-  // Refs for SelectButtons
-  const locationsButtonRef = useRef<HTMLButtonElement>(null)
-  const datesButtonRef = useRef<HTMLButtonElement>(null)
-  const guestsButtonRef = useRef<HTMLButtonElement>(null)
-  const previouslyFocusedButtonRef = useRef<HTMLButtonElement | null>(null)
-  const headerRef = useRef<HTMLDivElement>(null)
-
-  // Dropdown positioning
-  const [dropdownStyle, setDropdownStyle] = useState<CSSProperties>({})
-
-  // Filters
-  const {
-    selectedFilter,
-    ageCategoryCounts,
-    categories,
-    calendarRange,
-    selectedPath,
-    innerLoading,
-    selectedLocations,
-    setSelectedLocations,
-    setCalendarRange,
-    setCategories,
-    handleSelectedFilter,
-    handleSubmit,
-    updateGuestsCount,
-    setSelectedPath,
-    handleResetFilters,
-  } = useFilterBar({
-    redirectUrl,
-    ageCategories,
-    onSubmit,
-    tabs,
-    locations,
-  })
-
-  // Scroll in to view
-  const { isMobile, targetFilterBarRef } = useScrollInToView({ selectedFilter })
-
-  // Handle close filter section
-  const { filtersRef } = useCloseFilterSection({ handleSelectedFilter })
-
-  // Enhanced handleSelectedFilter with positioning
-  const handleSelectedFilterWithPosition = (filter: FilterSections | false) => {
-    if (filter) {
-      const position = calculateDropdownPosition({
-        filterSection: filter,
-        headerRef,
-        locationsButtonRef,
-        datesButtonRef,
-        guestsButtonRef,
-        isMobile,
-      })
-      setDropdownStyle(position)
-    }
-    handleSelectedFilter(filter)
-  }
-
-  // Store previously focused button and restore focus when closing
-  useEffect(() => {
-    if (!selectedFilter && previouslyFocusedButtonRef.current) {
-      previouslyFocusedButtonRef.current.focus()
-      previouslyFocusedButtonRef.current = null
-    }
-  }, [selectedFilter])
 
   // Display component after fully loaded
   useAwaitRender()
 
-  // Parsed data for filter section description
-  const parsedDates = parseDates({ calendarRange })
-  const parsedGuests = parseGuests({
-    ageCategoryCounts,
-    ageCategories,
-    guestsPlaceholder: t('guests.labelPlaceholder'),
-    guestLabel: t('guests.guestLabel'),
-    guestsLabel: t('guests.guestsLabel'),
-  })
-  const parsedLocations = parseLocations({
-    selectedLocations,
-    locationsPlaceholder: t('locations.placeholder'),
-    locationsSelectedLabel: t('locations.selected'),
-  })
-
   return (
-    <div
-      className={`will-root ${fullWidth ? 'is-full-width' : ''}`}
-      style={themePalette}
+    <FilterBarProvider
+      language={language}
+      ageCategories={ageCategories}
+      redirectUrl={redirectUrl}
+      palette={palette}
+      onSubmit={onSubmit}
+      fullWidth={fullWidth}
+      disableCalendarDates={disableCalendarDates}
+      mode={mode}
+      tabs={tabs}
+      outerLoading={outerLoading}
+      locations={locations}
     >
-      {tabs && tabs.length > 1 && (
-        <div className="will-filter-bar-tabs" ref={targetFilterBarRef}>
-          {tabs
-            .sort((a, b) => a.order - b.order)
-            .map((tab, idx) => (
-              <TabButton
-                key={`tab-${idx}`}
-                label={tab.label || t(`tabs.${tab.path.substring(1)}`)}
-                onClick={() => {
-                  setSelectedPath(tab.path)
-                  handleResetFilters()
-                  handleSelectedFilter(false)
-                }}
-                active={selectedPath === tab.path}
-                mode={mode}
-              />
-            ))}
-        </div>
-      )}
-
       <div
-        className={`will-filter-bar-header ${mode || 'light'}`}
-        ref={(el) => {
-          ;(headerRef as MutableRefObject<HTMLDivElement | null>).current = el
-          if (tabs?.length === 1 && targetFilterBarRef) {
-            ;(
-              targetFilterBarRef as MutableRefObject<HTMLDivElement | null>
-            ).current = el
-          }
-        }}
+        className={`will-root ${fullWidth ? 'is-full-width' : ''}`}
+        style={themePalette}
       >
-        {!!locations?.data?.length && (
-          <>
-            <SelectButton
-              ref={locationsButtonRef}
-              label={t('locations.label')}
-              description={parsedLocations}
-              onClick={() => {
-                previouslyFocusedButtonRef.current = locationsButtonRef.current
-                handleSelectedFilterWithPosition(FilterSections.LOCATIONS)
-              }}
-              active={!!selectedLocations.length}
-              disabled={locations?.disabled}
-              ariaExpanded={selectedFilter === FilterSections.LOCATIONS}
-              ariaControls="will-locations-filter"
-            />
-
-            <Divider />
-          </>
-        )}
+        <FilterTabs />
 
-        <SelectButton
-          ref={datesButtonRef}
-          label={t('calendar.label')}
-          description={
-            parsedDates
-              ? parsedDates
-              : selectedPath === Pages.ROOMS
-                ? t('calendar.roomsLabelPlaceholder')
-                : t('calendar.eventsLabelPlaceholder')
-          }
-          onClick={() => {
-            previouslyFocusedButtonRef.current = datesButtonRef.current
-            handleSelectedFilterWithPosition(FilterSections.CALENDAR)
-          }}
-          active={!!parsedDates}
-          ariaExpanded={selectedFilter === FilterSections.CALENDAR}
-          ariaControls="will-calendar-filter"
-        />
+        <FilterControls />
 
-        {selectedPath !== Pages.EVENTS && (
-          <>
-            <Divider />
-
-            <SelectButton
-              ref={guestsButtonRef}
-              label={t('guests.label')}
-              description={parsedGuests.content}
-              onClick={() => {
-                previouslyFocusedButtonRef.current = guestsButtonRef.current
-                handleSelectedFilterWithPosition(FilterSections.GUESTS)
-              }}
-              active={!!parsedGuests.data.total}
-              ariaExpanded={selectedFilter === FilterSections.GUESTS}
-              ariaControls="will-guests-filter"
-            />
-          </>
-        )}
-
-        <SubmitButton
-          onClick={handleSubmit}
-          startIcon={<FaSearch />}
-          label={t('common:search')}
-          isLoading={innerLoading || outerLoading}
-        />
+        <FilterPanels />
       </div>
-
-      {selectedFilter && (
-        <div
-          className={`will-filter-bar-container ${mode || 'light'}`}
-          style={{
-            ...((!tabs || tabs.length < 2) && !isMobile ? { top: 66 } : {}),
-            ...dropdownStyle,
-          }}
-        >
-          {selectedFilter === FilterSections.CALENDAR && (
-            <div id="will-dates-filter">
-              <Dates
-                autoFocus
-                ref={filtersRef}
-                onClose={() => handleSelectedFilter(false)}
-                calendarRange={calendarRange}
-                setCalendarRange={setCalendarRange}
-                disableCalendarDates={disableCalendarDates}
-                selectedPath={selectedPath}
-                language={language}
-                filtersRef={filtersRef}
-              />
-            </div>
-          )}
-          {selectedFilter === FilterSections.GUESTS && (
-            <div id="will-guests-filter">
-              <Guests
-                updateGuestsCount={updateGuestsCount}
-                ageCategories={ageCategories}
-                ageCategoryCounts={ageCategoryCounts}
-                ref={filtersRef}
-                autoFocus
-                onClose={() => handleSelectedFilter(false)}
-              />
-            </div>
-          )}
-          {selectedFilter === FilterSections.CATEGORIES && (
-            <div id="will-categories-filter">
-              <Categories
-                categories={categories}
-                setCategories={setCategories}
-              />
-            </div>
-          )}
-          {selectedFilter === FilterSections.LOCATIONS && (
-            <div id="will-locations-filter">
-              <Locations
-                autoFocus
-                ref={filtersRef}
-                locations={locations?.data}
-                language={language}
-                selectedLocations={selectedLocations}
-                setSelectedLocations={setSelectedLocations}
-                multiSelect={locations?.multiSelect}
-                onClose={() => handleSelectedFilter(false)}
-              />
-            </div>
-          )}
-        </div>
-      )}
-    </div>
+    </FilterBarProvider>
   )
 }
 
 ////////////
 
-const AGE_CATEGORIES_FALLBACK = [
-  {
-    id: '1',
-    name: 'Adults',
-    sortOrder: 1,
-    minVal: 0,
-  },
-  {
-    id: '2',
-    name: 'Kids',
-    sortOrder: 2,
-    minVal: 0,
-  },
-]
 const REDIRECT_URL_FALLBACK = 'http://localhost:3000/'
 const LANGUAGE_FALLBACK = 'en'

package/src/components/FilterBar/components/FilterControls/FilterControls.css

@@ -0,0 +1,18 @@
+.will-filter-bar-controls {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  position: relative;
+  z-index: 222;
+  border-radius: 40px;
+  background-color: var(--will-white);
+}
+
+@media (max-width: 960px) {
+  .will-filter-bar-controls {
+    flex-direction: column;
+    padding: 20px;
+    border-radius: 25px;
+    overflow: hidden;
+  }
+}

package/src/components/FilterBar/components/FilterControls/FilterControls.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FaSearch } from 'react-icons/fa'
+
+import { parseDates, SubmitButton } from '../../../../core/components'
+import { useFilterBar } from '../../providers'
+import { parseGuests, parseLocations } from '../../utils'
+import { FilterSections, Pages } from '../../FilterBarTypes'
+
+import { Divider } from '../Divider/Divider'
+import { SelectButton } from '../SelectButton/SelectButton'
+
+import './FilterControls.css'
+
+export const FilterControls = () => {
+  const { t } = useTranslation('filterBar')
+
+  const {
+    calendarRange,
+    selectedFilter,
+    selectedPath,
+    ageCategoryCounts,
+    selectedLocations,
+    mode,
+    tabs,
+    ageCategories,
+    locations,
+    innerLoading,
+    outerLoading,
+
+    handleSubmit,
+    handleSelectedFilter,
+
+    // Refs
+    previouslyFocusedButtonRef,
+    buttonRefs,
+    //
+    targetFilterBarRef,
+  } = useFilterBar()
+
+  // Store previously focused button and restore focus when closing
+  useEffect(() => {
+    if (!selectedFilter && previouslyFocusedButtonRef.current) {
+      previouslyFocusedButtonRef.current.focus()
+      previouslyFocusedButtonRef.current = null
+    }
+  }, [selectedFilter])
+
+  // Parsed data for filter section description
+  const parsedDates = parseDates({ calendarRange })
+  const parsedGuests = parseGuests({
+    ageCategoryCounts,
+    ageCategories,
+    guestsPlaceholder: t('guests.labelPlaceholder'),
+    guestLabel: t('guests.guestLabel'),
+    guestsLabel: t('guests.guestsLabel'),
+  })
+  const parsedLocations = parseLocations({
+    selectedLocations,
+    locationsPlaceholder: t('locations.placeholder'),
+    locationsSelectedLabel: t('locations.selected'),
+  })
+
+  return (
+    <div
+      className={`will-filter-bar-controls ${mode || 'light'}`}
+      ref={tabs?.length === 1 ? targetFilterBarRef : null}
+    >
+      {!!locations?.data?.length && (
+        <>
+          <SelectButton
+            ref={(el) => (buttonRefs.current[FilterSections.LOCATIONS] = el)}
+            label={t('locations.label')}
+            description={parsedLocations}
+            onClick={(e) => {
+              previouslyFocusedButtonRef.current = e.currentTarget
+              handleSelectedFilter(FilterSections.LOCATIONS)
+            }}
+            active={!!selectedLocations.length}
+            disabled={locations?.disabled}
+            ariaExpanded={selectedFilter === FilterSections.LOCATIONS}
+            ariaControls="will-filter-bar-locations"
+          />
+
+          <Divider />
+        </>
+      )}
+
+      <SelectButton
+        ref={(el) => (buttonRefs.current[FilterSections.CALENDAR] = el)}
+        label={t('calendar.label')}
+        description={
+          parsedDates
+            ? parsedDates
+            : selectedPath === Pages.ROOMS
+              ? t('calendar.roomsLabelPlaceholder')
+              : t('calendar.eventsLabelPlaceholder')
+        }
+        onClick={(e) => {
+          previouslyFocusedButtonRef.current = e.currentTarget
+          handleSelectedFilter(FilterSections.CALENDAR)
+        }}
+        active={!!parsedDates}
+        ariaExpanded={selectedFilter === FilterSections.CALENDAR}
+        ariaControls="will-filter-bar-dates"
+      />
+
+      {selectedPath !== Pages.EVENTS && (
+        <>
+          <Divider />
+
+          <SelectButton
+            ref={(el) => (buttonRefs.current[FilterSections.GUESTS] = el)}
+            label={t('guests.label')}
+            description={parsedGuests.content}
+            onClick={(e) => {
+              previouslyFocusedButtonRef.current = e.currentTarget
+              handleSelectedFilter(FilterSections.GUESTS)
+            }}
+            active={!!parsedGuests.data.total}
+            ariaExpanded={selectedFilter === FilterSections.GUESTS}
+            ariaControls="will-guests-filter"
+          />
+        </>
+      )}
+
+      <SubmitButton
+        onClick={handleSubmit}
+        startIcon={<FaSearch />}
+        label={t('common:search')}
+        isLoading={innerLoading || outerLoading}
+      />
+    </div>
+  )
+}

package/src/components/FilterBar/components/{categories → FilterPanels/Categories}/Categories.css

@@ -1,4 +1,4 @@
-.will-filter-bar-categories {
+#will-filter-bar-categories {
   text-align: center;
 }
 

package/src/components/FilterBar/components/{categories → FilterPanels/Categories}/Categories.tsx

@@ -26,7 +26,7 @@ export const Categories = ({ categories, setCategories }: Props) => {
   }
 
   return (
-    <div className="will-filter-bar-categories">
+    <div id="will-filter-bar-categories">
       <h3 className="will-categories-filter-title">{t('categories.label')}</h3>
 
       <div className="will-categories-filter-inner">
@@ -45,3 +45,5 @@ export const Categories = ({ categories, setCategories }: Props) => {
     </div>
   )
 }
+
+Categories.displayName = 'Categories'

package/src/components/FilterBar/components/{dates → FilterPanels/Dates}/Dates.tsx

@@ -1,10 +1,13 @@
 import React, { RefObject, forwardRef } from 'react'
-
 import { DateRange } from 'react-day-picker'
-import { Calendar } from '../../../../core/components'
-import { DisableCalendarDates } from '../../../../core/components/calendar/CalendarTypes'
-import { CloseButton } from '../buttons'
-import { FilterSectionHeader } from '../common/FilterSectionHeader'
+
+import {
+  CalendarTypes,
+  CloseButton,
+  Calendar,
+} from '../../../../../core/components'
+
+import { SectionHeader } from '../SectionHeader/SectionHeader'
 
 import './Dates.css'
 
@@ -14,10 +17,9 @@ type Props = {
   autoFocus?: boolean
   calendarRange: DateRange | undefined
   setCalendarRange: (range: DateRange | undefined) => void
-  disableCalendarDates?: DisableCalendarDates
+  disableCalendarDates?: CalendarTypes['disableCalendarDates']
   selectedPath?: string
   language?: string
-  filtersRef?: RefObject<HTMLDivElement>
 }
 
 export const Dates = forwardRef<HTMLDivElement, Props>(
@@ -30,13 +32,12 @@ export const Dates = forwardRef<HTMLDivElement, Props>(
       disableCalendarDates,
       selectedPath,
       language,
-      filtersRef,
     },
     ref
   ) => {
     return (
-      <div className="will-filter-bar-dates" ref={ref}>
-        <FilterSectionHeader
+      <div id="will-filter-bar-dates" ref={ref}>
+        <SectionHeader
           title={''}
           action={onClose && <CloseButton handleClose={onClose} />}
         />
@@ -49,7 +50,6 @@ export const Dates = forwardRef<HTMLDivElement, Props>(
             disableCalendarDates={disableCalendarDates}
             selectedPath={selectedPath}
             language={language}
-            ref={filtersRef}
           />
         </div>
       </div>