willba-component-library 0.3.27 → 0.4.0

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

@@ -1,139 +0,0 @@
-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,
-
-    previouslyFocusedButtonRef,
-    buttonRefs,
-    tabsRef,
-    filtersRef,
-  } = 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'} ${selectedFilter ? 'disabled' : ''}`}
-      ref={(el) => {
-        filtersRef.current = el
-
-        if (tabs?.length === 1) {
-          tabsRef.current = el
-        }
-      }}
-    >
-      {!!locations?.data?.length && locations.data.length > 1 && (
-        <>
-          <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/FilterPanels/Categories/Categories.css

@@ -1,21 +0,0 @@
-#will-filter-bar-categories {
-  text-align: center;
-}
-
-.will-categories-filter-title {
-  font-size: 16px;
-  text-transform: uppercase;
-  margin: 10px 0 30px 0;
-}
-
-.will-categories-filter-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.will-categories-filter-inner input {
-  cursor: pointer;
-  margin-right: 10px;
-}

package/src/components/FilterBar/components/FilterPanels/Categories/Categories.tsx

@@ -1,49 +0,0 @@
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import './Categories.css'
-
-type Props = {
-  categories: any
-  setCategories: any
-}
-
-export const Categories = ({ categories, setCategories }: Props) => {
-  const { t } = useTranslation('filterBar')
-
-  const categoriesPlaceholder = [
-    'Weekend',
-    'Week',
-    'Summer camp',
-    'Winter camp',
-  ]
-
-  const [selectedCategory, setSelectedCategory] = useState('')
-
-  const handleCategoryChange = (selectedCategory: any) => {
-    setSelectedCategory(selectedCategory)
-    setCategories(selectedCategory)
-  }
-
-  return (
-    <div id="will-filter-bar-categories">
-      <h3 className="will-categories-filter-title">{t('categories.label')}</h3>
-
-      <div className="will-categories-filter-inner">
-        {categoriesPlaceholder.map((itm, idx) => (
-          <div key={idx}>
-            <input
-              type="radio"
-              value={itm}
-              checked={selectedCategory === itm}
-              onChange={() => handleCategoryChange(itm)}
-            />
-            <span>{itm}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-Categories.displayName = 'Categories'

package/src/components/FilterBar/components/FilterPanels/Dates/Dates.css

@@ -1,9 +0,0 @@
-.will-dates-filter-container {
-  padding: 0 30px 16px 30px;
-}
-
-@media (max-width: 960px) {
-  .will-dates-filter-container {
-    padding: 0 20px 16px 20px;
-  }
-}

package/src/components/FilterBar/components/FilterPanels/Dates/Dates.tsx

@@ -1,60 +0,0 @@
-import React, { RefObject, forwardRef } from 'react'
-import { DateRange } from 'react-day-picker'
-
-import {
-  CalendarTypes,
-  CloseButton,
-  Calendar,
-} from '../../../../../core/components'
-
-import { SectionHeader } from '../SectionHeader/SectionHeader'
-
-import './Dates.css'
-
-type Props = {
-  ref: RefObject<HTMLDivElement>
-  onClose?: () => void
-  autoFocus?: boolean
-  calendarRange: DateRange | undefined
-  setCalendarRange: (range: DateRange | undefined) => void
-  disableCalendarDates?: CalendarTypes['disableCalendarDates']
-  selectedPath?: string
-  language?: string
-}
-
-export const Dates = forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      onClose,
-      autoFocus,
-      calendarRange,
-      setCalendarRange,
-      disableCalendarDates,
-      selectedPath,
-      language,
-    },
-    ref
-  ) => {
-    return (
-      <div id="will-filter-bar-dates" ref={ref}>
-        <SectionHeader
-          title={''}
-          action={onClose && <CloseButton handleClose={onClose} />}
-        />
-
-        <div className="will-dates-filter-container">
-          <Calendar
-            autoFocus={autoFocus}
-            calendarRange={calendarRange}
-            setCalendarRange={setCalendarRange}
-            disableCalendarDates={disableCalendarDates}
-            selectedPath={selectedPath}
-            language={language}
-          />
-        </div>
-      </div>
-    )
-  }
-)
-
-Dates.displayName = 'Dates'

package/src/components/FilterBar/components/FilterPanels/FilterPanels.css

@@ -1,22 +0,0 @@
-.will-filter-bar-panels {
-  background-color: var(--will-white);
-  min-height: 100px;
-  position: absolute;
-  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-panels {
-    width: 100%;
-    z-index: 999;
-  }
-}

package/src/components/FilterBar/components/FilterPanels/FilterPanels.tsx

@@ -1,111 +0,0 @@
-import React, { CSSProperties, useEffect, useState } from 'react'
-
-import { useCloseFilterSection } from '../../../../core/hooks'
-import { FilterSections } from '../../FilterBarTypes'
-import { useFilterBar } from '../../providers'
-
-import { Dates } from './Dates/Dates'
-import { Guests } from './Guests/Guests'
-import { Locations } from './Locations/Locations'
-import { Categories } from './Categories/Categories'
-
-import './FilterPanels.css'
-import { usePanelPosition } from '../../hooks'
-
-export const FilterPanels = () => {
-  const {
-    categories,
-    calendarRange,
-    selectedFilter,
-    selectedPath,
-    ageCategoryCounts,
-    selectedLocations,
-    mode,
-    tabs,
-    disableCalendarDates,
-    ageCategories,
-    locations,
-    language,
-    isMobile,
-    panelRef,
-    buttonRefs,
-    filtersRef,
-    setSelectedLocations,
-    setCalendarRange,
-    handleSelectedFilter,
-    updateGuestsCount,
-    setCategories,
-  } = useFilterBar()
-
-  // Handle close filter section
-  const { filterSectionRef } = useCloseFilterSection({ handleSelectedFilter })
-
-  const { left, top } = usePanelPosition({
-    selectedFilter,
-    panelRef,
-    filtersRef,
-    buttonRefs,
-    isMobile,
-    tabs,
-  })
-
-  const renderContent = () => {
-    switch (selectedFilter) {
-      case FilterSections.CALENDAR:
-        return (
-          <Dates
-            autoFocus
-            ref={filterSectionRef}
-            onClose={() => handleSelectedFilter(false)}
-            calendarRange={calendarRange}
-            setCalendarRange={setCalendarRange}
-            disableCalendarDates={disableCalendarDates}
-            selectedPath={selectedPath}
-            language={language}
-          />
-        )
-      case FilterSections.GUESTS:
-        return (
-          <Guests
-            autoFocus
-            ref={filterSectionRef}
-            ageCategories={ageCategories}
-            ageCategoryCounts={ageCategoryCounts}
-            updateGuestsCount={updateGuestsCount}
-            onClose={() => handleSelectedFilter(false)}
-          />
-        )
-      case FilterSections.CATEGORIES:
-        return (
-          <Categories categories={categories} setCategories={setCategories} />
-        )
-      case FilterSections.LOCATIONS:
-        return (
-          <Locations
-            autoFocus
-            ref={filterSectionRef}
-            locations={locations?.data}
-            selectedLocations={selectedLocations}
-            setSelectedLocations={setSelectedLocations}
-            multiSelect={locations?.multiSelect}
-            onClose={() => handleSelectedFilter(false)}
-          />
-        )
-
-      default:
-        return null
-    }
-  }
-
-  return (
-    selectedFilter && (
-      <div
-        ref={panelRef}
-        className={`will-filter-bar-panels ${mode || 'light'}`}
-        style={{ left, top }}
-      >
-        {renderContent()}
-      </div>
-    )
-  )
-}

package/src/components/FilterBar/components/FilterPanels/Guests/GuestCount/GuestCount.css

@@ -1,58 +0,0 @@
-.will-guests-filter-label,
-.will-guests-filter-count {
-  font-size: 18px;
-  color: var(--will-text);
-}
-
-.will-guests-filter-inner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.will-guests-filter-label {
-  display: block;
-  font-weight: 600;
-  margin-bottom: 10px;
-}
-
-.will-guests-filter-inner .will-guests-filter-counter {
-  display: flex;
-  align-items: center;
-}
-
-.will-guests-filter-count {
-  margin: 0 10px;
-  min-width: 30px;
-  text-align: center;
-}
-
-.will-guests-filter-counter-button {
-  border-radius: 50%;
-  background-color: transparent;
-  border: 1px solid var(--will-grey);
-  width: 30px;
-  height: 30px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 20px;
-  cursor: pointer;
-  color: var(--will-black);
-
-  padding: 0;
-  margin: 0;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.will-guests-filter-counter-button:hover {
-  background-color: var(--will-onahau);
-}
-
-@media (max-width: 960px) {
-  .will-guests-filter-inner {
-    width: 100%;
-    justify-content: space-between;
-  }
-}

package/src/components/FilterBar/components/FilterPanels/Guests/GuestCount/GuestCount.tsx

@@ -1,85 +0,0 @@
-import React, { FC, useEffect } from 'react'
-
-import { GuestsCountPropsType } from '../../../../FilterBarTypes'
-
-import './GuestCount.css'
-
-export const GuestCount: FC<GuestsCountPropsType> = ({
-  label,
-  sortOrder,
-  id,
-  updateGuestsCount,
-  count,
-  minVal,
-}) => {
-  useEffect(() => {
-    if (minVal && minVal > count) {
-      updateGuestsCount(`guests-${id}`, minVal)
-    }
-  }, [])
-
-  const handleDecrement = () => {
-    if (count > minVal) {
-      updateGuestsCount(`guests-${id}`, count - 1)
-    }
-  }
-
-  const handleIncrement = () => {
-    updateGuestsCount(`guests-${id}`, count + 1)
-  }
-
-  return (
-    <div className="will-guests-filter-inner" style={{ order: `${sortOrder}` }}>
-      <p className="will-guests-filter-label">{label}</p>
-
-      <div className="will-guests-filter-counter">
-        <button
-          className="will-guests-filter-counter-button"
-          onClick={handleDecrement}
-          disabled={(minVal && count <= minVal) || !count}
-          style={{
-            cursor:
-              (minVal && count <= minVal) || !count ? 'initial' : 'pointer',
-            paddingBottom: '4px',
-            opacity: (minVal && count <= minVal) || !count ? 0.4 : 1,
-          }}
-        >
-          <svg
-            width="10"
-            height="10"
-            viewBox="0 0 15 15"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4 10H16"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-            />
-          </svg>
-        </button>
-        <span className="will-guests-filter-count">{count}</span>
-        <button
-          className="will-guests-filter-counter-button"
-          onClick={handleIncrement}
-        >
-          <svg
-            width="15"
-            height="15"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M10 4V16M4 10H16"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-  )
-}

package/src/components/FilterBar/components/FilterPanels/Guests/Guests.css

@@ -1,24 +0,0 @@
-#will-filter-bar-guests {
-  text-align: initial;
-}
-
-.will-guests-filter-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 400px;
-  gap: 20px;
-  padding: 0 30px 16px 30px;
-}
-
-@media (max-width: 960px) {
-  .will-guests-filter-container {
-    min-width: auto;
-    padding: 0 20px 16px 20px;
-  }
-}
-
-/**/
-.will-guest-count {
-  display: inline-block;
-  min-width: 10px;
-}

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

@@ -1,59 +0,0 @@
-import React, { forwardRef } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import { useAutoFocus } from '../../../../../core/hooks'
-import { CloseButton } from '../../../../../core/components'
-import { GuestCount } from './GuestCount/GuestCount'
-import { AgeCategoryCount, AgeCategoryType } from '../../../FilterBarTypes'
-import { SectionHeader } from '../SectionHeader/SectionHeader'
-
-import './Guests.css'
-
-type Props = {
-  ageCategories?: AgeCategoryType[]
-  updateGuestsCount: (arg1: string, arg2: number) => void
-  ageCategoryCounts: AgeCategoryCount
-  autoFocus?: boolean
-  onClose?: () => void
-}
-
-export const Guests = forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      ageCategories,
-      updateGuestsCount,
-      ageCategoryCounts,
-      autoFocus,
-      onClose,
-    }: Props,
-    ref
-  ) => {
-    const { t } = useTranslation('filterBar')
-    const containerRef = useAutoFocus<HTMLDivElement>(autoFocus)
-
-    return (
-      <div id="will-filter-bar-guests" ref={ref}>
-        <SectionHeader
-          title={t('guests.title')}
-          action={onClose && <CloseButton handleClose={onClose} />}
-        />
-
-        <div className="will-guests-filter-container" ref={containerRef}>
-          {ageCategories?.map((category) => (
-            <GuestCount
-              key={category.id}
-              id={category.id}
-              label={category.name}
-              minVal={category.minVal}
-              sortOrder={category.sortOrder}
-              updateGuestsCount={updateGuestsCount}
-              count={ageCategoryCounts[`guests-${category.id}`] || 0}
-            />
-          ))}
-        </div>
-      </div>
-    )
-  }
-)
-
-Guests.displayName = 'Guests'

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

@@ -1,16 +0,0 @@
-#will-filter-bar-locations {
-  text-align: initial;
-}
-
-.will-locations-filter-container {
-  display: flex;
-  flex-direction: column;
-  min-width: 400px;
-  padding-bottom: 16px;
-}
-
-@media (max-width: 960px) {
-  .will-locations-filter-container {
-    min-width: 100%;
-  }
-}